优化迭代

package.json

@@ -43,6 +43,7 @@
     "path-to-regexp": "2.4.0",
     "qrcodejs2": "0.0.2",
     "simditor": "^2.3.26",
+    "sortablejs": "^1.10.2",
     "swiper": "^5.3.6",
     "tinymce": "^5.2.2",
     "v-jsoneditor": "^1.2.2",

src/api/iteration.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+import { TeamManagement } from '@/apiConfig/api'
+
+// 获取迭代列表
+export function iterationList(data) {
+  return request({
+    url: TeamManagement + `/iteration/list`,
+    method: 'post',
+    data
+  })
+}
+
+// 创建迭代
+export function iterationCreate(data) {
+  return request({
+    url: TeamManagement + `/iteration/create`,
+    method: 'post',
+    data
+  })
+}

src/styles/PublicStyle/index.scss

@@ -1,15 +1,93 @@
-.Layout_space_between {
+.Layout_space_between {  // 布局
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.Layout_flex_start {
+.Layout_flex_start { // 布局
   display:flex;
   align-items: center;
   justify-content: flex-start;
 }
 
+.public_header { // 缺陷，迭代，项目，任务，需求布局header
+  margin: 10px 10px 0;
+  background: #FFF;
+  height: auto !important;
+  border-radius: 4px;
+}
+
+.public_main { // 缺陷，迭代，项目，任务，需求布局main
+  margin: 10px 10px 0;
+  background: #FFF;
+  border-top-left-radius:4px;
+  border-top-right-radius:4px;
+}
+
+.public_footer { // 缺陷，迭代，项目，任务，需求布局footer
+  margin: 0 10px 10px;
+   background: #FFF;
+   text-align: right;
+   border-bottom-right-radius:4px;
+   border-bottom-left-radius:4px;
+}
+
+.public_botton { // 迭代状态select
+  /deep/ .el-input--suffix .el-input__inner {
+    padding-right: 10px;
+    padding-left: 10px;
+    width: 73px;
+  }
+  }
+
+.status_color { // 迭代状态样式修改（颜色）
+  /deep/ input {
+    color: #6AB4FF;
+    border: 1px solid #6AB4FF;
+    border-color: #6AB4FF !important;
+    font-weight: 900;
+  }
+  /deep/ .el-input__suffix {
+    color: #6AB4FF !important;
+    right: 1px;
+  }
+  /deep/ .el-select__caret {
+    color: #6AB4FF !important;
+  }
+  }
+
+  .status_color1 { // 迭代状态样式修改（颜色）
+    /deep/ input {
+      color: #FF8952;
+       border: 1px solid #FF8952;
+       border-color: #FF8952 !important;
+           font-weight: 900;
+    }
+     /deep/ .el-input__suffix {
+      color: #FF8952 !important;
+      right: 1px;
+    }
+    /deep/ .el-select__caret {
+      color: #FF8952 !important;
+    }
+  }
+
+  .status_color2 { // 迭代状态样式修改（颜色）
+    /deep/ input {
+      color: #7ED321;
+       border: 1px solid #7ED321;
+       border-color: #7ED321 !important;
+           font-weight: 900;
+    }
+     /deep/ .el-input__suffix {
+      color: #7ED321 !important;
+      right: 1px;
+    }
+    /deep/ .el-select__caret {
+      color: #7ED321 !important;
+    }
+  }
+
 .priority_color {
   background-color: darkorchid;
 }
@@ -24,4 +102,42 @@
 
 .priority_color3 {
   background-color: rgb(216, 88, 29);
+}
+
+.BackgroundCloth { // 迭代，背景 文字颜色页面高度计算 ，dialog水平垂直居中
+  background: #F2F3F6;
+  color: #333B4A;
+  min-height: calc(100vh - 55px);
+  /deep/ .el-dialog{
+    display: flex;
+    flex-direction: column;
+    margin:0 !important;
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+  }
+/deep/ .el-dialog .el-dialog__body{
+    flex:1;
+    overflow: auto;
+   }
+}
+
+.task {
+  /deep/ .el-dialog__title {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133;
+    padding-left: 45px;
+}
+
+.blueStripe {
+  width:4px;
+  height:17px;
+  background:#409EFF;
+  border-radius:1px;
+  position: absolute;
+  top: 23px;
+  left: 56px;
+}
 }

src/views/projectManage/dialog_vue.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="task">
-    <el-dialog :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false" :destroy-on-close="true">
-      <div style="display:flex;align-items: center;margin: 0% 7% 2% 4.5%;">
-        <div style="width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-        <div style="width:83px;height:20px;font-size:18px;font-family:MicrosoftYaHei;color:rgba(51,59,74,1);margin-left:6px">{{ tit_Name }}</div>
-      </div>
+    <el-dialog :title="tit_Name" :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false" :destroy-on-close="true">
+      <div class="blueStripe" />
       <el-form ref="task_form" :model="task_form" :rules="task_rulesForm" label-position="right" style="margin-right: 3%;" label-width="120px">
         <el-form-item label="任务名称" prop="name" style="width: 100%">
           <el-input v-model="task_form.name" autocomplete="off" placeholder="请输入任务名称" />
@@ -415,8 +412,23 @@ export default {
 }
 
 </script>
-<style lang="stylus" scoped>
-.el-dialog__header {
-    padding: 0px 0px 0px;
+<style lang="scss" scoped>
+.task {
+  /deep/ .el-dialog__title {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133;
+    padding-left: 45px;
+}
+
+.blueStripe {
+  width:4px;
+  height:17px;
+  background:#409EFF;
+  border-radius:1px;
+  position: absolute;
+  top: 23px;
+  left: 56px;
+}
 }
 </style>

src/views/projectManage/iteration/components/PlanningIteration.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog :visible.sync="visibleplanning" fullscreen :modal="false" :show="show" title="规划迭代" width="60%" @close="OnClose()">
+    <el-transfer
+      v-model="value"
+      filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入城市拼音"
+      :data="data"
+    />
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="OnClose">取 消</el-button>
+      <el-button type="primary" @click="OnClose">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'TemplateDialog',
+  props: {
+    show: { type: Boolean, default: false }
+  },
+  data() {
+    const generateData = _ => {
+      const data = []
+      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
+      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
+      cities.forEach((city, index) => {
+        data.push({
+          label: city,
+          key: index,
+          pinyin: pinyin[index]
+        })
+      })
+      return data
+    }
+    return {
+      visibleplanning: this.show,
+      data: generateData(),
+      value: [],
+      filterMethod(query, item) {
+        return item.pinyin.indexOf(query) > -1
+      }
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        this.visibleplanning = this.show
+      }
+    }
+  },
+  methods: {
+    OnClose() {
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+ <style lang="scss" scoped>
+ .el-dialog__wrapper {
+    position: fixed;
+    top: 55px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+}
+ </style>

src/views/projectManage/iteration/components/create.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog :visible.sync="showIteration" :show="show" class="task" :title="titName" width="60%" :close-on-click-modal="false" :destroy-on-close="true" @close="OnClose()">
+    <div class="blueStripe" />
+    <el-form ref="ruleForm" :model="iteration" :rules="rules" label-width="120px">
+      <el-form-item label="迭代名称" prop="name">
+        <el-input v-model="iteration.name" style="width: 90%;" placeholder="请输入迭代名称" />
+      </el-form-item>
+      <el-form-item label="开始日期">
+        <el-date-picker
+          v-model="iteration.creatTime"
+          type="date"
+          placeholder="选择日期时间"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          default-time="23:59:59"
+          style="width: 90%;"
+        />
+      </el-form-item>
+      <el-form-item label="截止日期">
+        <el-date-picker
+          v-model="iteration.endTime"
+          type="date"
+          placeholder="选择日期时间"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          default-time="23:59:59"
+          style="width: 90%;"
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="OnClose">取 消</el-button>
+      <el-button type="primary" @click="createdIteration(iteration)">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import '@/styles/PublicStyle/index.scss'
+import { iterationCreate } from '@/api/iteration.js'
+export default {
+  name: 'TemplateDialog',
+  props: {
+    show: { type: Boolean, default: false },
+    title: { type: String, default: '标题' }
+  },
+  data() {
+    return {
+      userInformation: localStorage.getItem('username'),
+      userNames: localStorage.getItem('realname'),
+      titName: this.title,
+      iteration: {},
+      rules: {
+        name: [
+          { required: true, message: '请输入迭代名称', trigger: 'blur' },
+          { max: 100, message: '名称不能能超过100个字符', trigger: 'change' }
+        ]
+      },
+      showIteration: this.show
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        this.showIteration = this.show
+      }
+    }
+  },
+  methods: {
+    OnClose() {
+      this.$refs.ruleForm.resetFields()
+      this.iteration = {}
+      this.$emit('update:show', false)
+    },
+    createdIteration(val) { // 创建迭代
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          // val.creator = this.userInformation
+          console.log(val, '创建')
+          iterationCreate(val).then(res => {
+            this.$emit('update:show', false)
+            this.$emit('iteratioFilter')
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>

src/views/projectManage/iteration/components/delete.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog :visible.sync="visible" :show="show" title="移除确认" width="60%" @close="OnClose()">
+    <div align="center">
+      <span style="color: red;">以下需求是否从当前迭代移除？</span>
+      <!-- <div :class="{'height_one' : types === true , 'height_tow' : types === false }" @scroll.passive="getScroll($event)">
+        <div v-for="(val ,key,i) in MemberList" :key="i">
+          <div class="title">{{ key }}</div>
+          <div v-for="item in val" :key="item.member" class="loop">
+            <span style="display: flex">
+              <el-avatar style="background: #FFF;" class="phoneUrl" :src="item.memberInfoResponse.phoneUrl !== '' ? item.memberInfoResponse.phoneUrl : image_role " />
+              <div style="display: flex; flex-direction: column; margin-left: 10px;">
+                <span class="titName">{{ item.memberInfoResponse.name }}<span v-if="item.isLeader === 1 ? true : false" class="responsibility">负责人</span></span>
+                <span class="userName">{{ item.member }}</span>
+              </div>
+            </span>
+            <el-button class="el-icon-delete colorSty" :class="[item.canDelete === 1 ? ' ' : 'colorStyTow']" :disabled="item.canDelete === 1 " @click="deletePersonnel(item, 2)" />
+          </div>
+        </div>
+      </div> -->
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="OnClose">取 消</el-button>
+      <el-button type="primary" @click="OnClose">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'TemplateDialog',
+  props: {
+    show: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      visible: this.show
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        this.visible = this.show
+      }
+    }
+  },
+  methods: {
+    OnClose() {
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>

src/views/projectManage/iteration/index.vue

@@ -1,32 +1,32 @@
 <template>
   <el-container class="BackgroundCloth">
-    <el-header class="iteration_header">
+    <el-header class="public_header">
       <div class="Layout_space_between">
         <div class="themeName">迭代</div>
-        <el-button size="mini" type="primary" @click="visible = true">新建迭代</el-button>
+        <el-button size="mini" type="primary" @click="showIteration = true">新建迭代</el-button>
       </div>
       <el-divider style="color: #EEF0F5; margin: 10px 0 ;" />
-      <div class="Layout_flex_start">
+      <div class="Layout_flex_start" style="margin-left: 15px">
         <div class="Layout_space_between">
           <div class="searchName">迭代名称</div>
-          <el-input v-model="input" size="small" placeholder="请输入迭代名称" />
+          <el-input v-model="filterItems.name" clearable size="small" placeholder="请输入迭代名称" @change="iteratioFilter(1)" />
         </div>
         <div class="Layout_space_between" style="margin: 0 3%;">
           <div class="searchName">状态</div>
-          <el-select v-model="input" size="small" clearable filterable placeholder="请选择">
-            <el-option v-for="item in arr" :key="item.code" :label="item.name" :value="item.code" />
+          <el-select v-model="filterItems.status" size="small" clearable filterable placeholder="请选择" @change="iteratioFilter(1)">
+            <el-option v-for="item in statusArr" :key="item.value" :label="item.name" :value="item.value" />
           </el-select></div>
         <div class="Layout_space_between">
           <div class="searchName">创建人</div>
-          <el-input v-model="input" size="small" placeholder="请输入姓名或邮箱前缀" />
+          <el-input v-model="filterItems.creator" clearable size="small" placeholder="请输入姓名或邮箱前缀" @change="iteratioFilter(1)" />
         </div>
       </div>
     </el-header>
-    <el-main class="iteration_main">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="address" label="迭代名称" align="left" min-width="350">
+    <el-main class="public_main">
+      <el-table :data="iterationTableData" style="width: 100%" show-overflow-tooltip="true">
+        <el-table-column label="迭代名称" align="left" min-width="350" show-overflow-tooltip>
           <template slot-scope="scope">
-            <span class="iterationName" @click="cilckIterationName(scope.row.id)">{{ scope.row.address }}</span>
+            <span class="iterationName" @click="cilckIterationName(scope.row.id)">{{ scope.row.name }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="status" label="状态" align="center" min-width="150">
@@ -38,100 +38,85 @@
                 'status_color1': scope.row.status === 1,
                 'status_color2': scope.row.status === 2
               }"
-              class="btns"
+              class="public_botton"
               size="mini"
             >
               <el-option v-for="item in statusArr" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column prop="date" label="开始日期" align="center" min-width="150" />
-        <el-table-column prop="date" label="截止日期" align="center" min-width="150" />
-        <el-table-column prop="name" label="创建人" align="center" min-width="150" />
-        <el-table-column prop="date" label="创建日期" align="center" min-width="150" />
+        <el-table-column prop="startTime" label="开始日期" align="center" min-width="200" />
+        <el-table-column prop="endTime" label="截止日期" align="center" min-width="200" />
+        <el-table-column prop="creator" label="创建人" align="center" min-width="150" />
+        <el-table-column prop="creatTime" label="创建日期" align="center" min-width="200" />
       </el-table>
     </el-main>
-    <el-footer class="iteration_footer">
+    <el-footer class="public_footer">
       <el-pagination
-        :current-page="currentPage4"
+        :current-page="currentPage"
         :page-sizes="[15, 20, 30]"
         background
         :page-size="15"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
+        :total="total"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
     </el-footer>
-    <normal-dialog title="新建迭代" width="60%" :show-dialog="visible" @cancel="visible = false">
-      <el-form ref="ruleForm" :model="iteration" :rules="rules" label-width="100px">
-        <el-form-item label="迭代名称" prop="name">
-          <el-input v-model="iteration.name" />
-        </el-form-item>
-        <el-form-item label="开始日期" prop="startDate">
-          <el-date-picker v-model="iteration.startDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;" />
-        </el-form-item>
-        <el-form-item label="截止日期" prop="endDate">
-          <el-date-picker v-model="iteration.endDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;" />
-        </el-form-item>
-      </el-form>
-    </normal-dialog>
+    <iteration-create title="新建迭代" width="60%" :show.sync="showIteration" @iteratioFilter="iteratioFilter" />
   </el-container>
 </template>
 
 <script>
 import '@/styles/PublicStyle/index.scss'
-import normalDialog from '@/components/dialog/normalDialog'
+import iterationCreate from '@/views/projectManage/iteration/components/create.vue'
+import { iterationList } from '@/api/iteration.js'
 
 export default {
   components: {
-    normalDialog
+    iterationCreate
   },
   data() {
     return {
       statusArr: [{ value: 0, name: '未开始' }, { value: 1, name: '进行中' }, { value: 2, name: '已完成' }],
-      iteration: {},
-      input: '',
+      iteration: {}, // 筛选项
+      curIndex: 1, // 分页
+      pageSize: 15, // 分页
+      filterItems: {},
       arr: [],
-      visible: false,
-      currentPage4: 4,
-      rules: {
-        name: [
-          { required: true, message: '请输入迭代名称', trigger: 'blur' },
-          { max: 100, message: '名称不能能超过100个字符', trigger: 'change' }
-        ]
-      },
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        status: 0,
-        address: '上海市普陀区金沙江路 1518 弄'
-      },
-      {
-        date: '2016-05-02',
-        name: '王小虎',
-        status: 1,
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        status: 2,
-        address: '上海市普陀区金沙江路 1517 弄'
-      }]
+      total: 0,
+      showIteration: false,
+      currentPage: 1,
+      iterationTableData: []
     }
   },
+  mounted() {
+    this.iteratioFilter()
+  },
   methods: {
-    cancel(e) {
-      this.visible = e
+    iteratioFilter(e) { // 筛选change
+      let data = {}
+      e === 1 ? data = this.filterItems : this.filterItems = {}
+      data.curIndex = this.curIndex
+      data.pageSize = this.pageSize
+      // 调用查询迭代list
+      iterationList(data).then(res => {
+        this.iterationTableData = res.data.list
+        this.total = res.data.total
+      })
     },
-    cilckIterationName() {
+
+    cilckIterationName(id) { // 迭代详情页跳转
       this.$router.push({ name: '迭代详情', query: { id: '' }})
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
+
+    handleSizeChange(val) { // 每页 ${val} 条
+      this.pageSize = val
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
+
+    handleCurrentChange(val) { // 当前页: ${val}
+      this.curIndex = val
+      this.iteratioFilter()
     }
   }
 }
@@ -139,9 +124,6 @@ export default {
 
 <style scoped lang="scss">
 .BackgroundCloth {
-  background: #F2F3F6;
-  color: #333B4A;
-  min-height: calc(100vh - 55px);
 
 .themeName {
   font-size: 22px;
@@ -167,88 +149,10 @@ export default {
   vertical-align: bottom;
 }
 
-.iteration_footer {
-  margin: 0 10px 10px;
-   background: #FFF;
-   text-align: right;
-   border-bottom-right-radius:4px;
-   border-bottom-left-radius:4px;
-}
-
-.iteration_main {
-  margin: 10px 10px 0;
-  background: #FFF;
-  border-top-left-radius:4px;
-  border-top-right-radius:4px;
-}
-
-.iteration_header {
-  margin: 10px 10px 0;
-  background: #FFF;
-  height: auto !important;
-  border-radius: 4px;
-}
-
 .iterationName:hover {
   color:#409EFF;
   cursor: pointer;
 }
-
-.btns {
-/deep/ .el-input--suffix .el-input__inner {
-  padding-right: 10px;
-  padding-left: 10px;
-  width: 73px;
-}
-}
-
-.status_color {
-  /deep/ input {
-    color: rgb(255, 204, 102);
-     border: 1px solid rgb(255, 204, 102);
-     border-color: rgb(255, 204, 102) !important;
-         font-weight: 900;
-  }
-   /deep/ .el-input__suffix {
-    color: rgb(255, 204, 102) !important;
-    right: 1px;
-  }
-  /deep/ .el-select__caret {
-    color: rgb(255, 204, 102) !important;
-  }
-}
-
-.status_color1 {
-  /deep/ input {
-    color: rgb(102, 255, 122);
-     border: 1px solid rgb(102, 255, 122);
-     border-color: rgb(102, 255, 122) !important;
-         font-weight: 900;
-  }
-   /deep/ .el-input__suffix {
-    color: rgb(102, 255, 122) !important;
-    right: 1px;
-  }
-  /deep/ .el-select__caret {
-    color: rgb(102, 255, 122) !important;
-  }
-}
-
-.status_color2 {
-  /deep/ input {
-    color: rgb(202, 22, 142);
-     border: 1px solid rgb(202, 22, 142);
-     border-color: rgb(202, 22, 142) !important;
-         font-weight: 900;
-  }
-   /deep/ .el-input__suffix {
-    color: rgb(202, 22, 142) !important;
-    right: 1px;
-  }
-  /deep/ .el-select__caret {
-    color: rgb(202, 22, 142) !important;
-  }
-}
 }
 
 </style>