任务列表

src/views/Work/TaskPage.vue

@@ -1,10 +1,42 @@
 <template>
   <div class="InvoicedAndSettled" style="width: 99%; margin-top: 0px">
     <el-button type="primary" @click="newAdd" size="small">新增</el-button>
-    <templateTable ref="templateTable" :tableConfig="tableConfig" :data="tableData"
-     :btnGroup="btnGroup" :formList="formList" @handleSearchList="handleSearchList"
-      @findPage="findPage" @getList="findPage" :pagination="pageData">
-    </templateTable>
+    <!-- <templateTable ref="templateTable" :tableConfig="tableConfig" :data="tableData" :btnGroup="btnGroup"
+      :formList="formList" @handleSearchList="handleSearchList" @findPage="findPage" @getList="findPage"
+      :pagination="pageData">
+    </templateTable> -->
+
+    <el-table :data="tableData" v-loading="tableLoading" style="width: 100%; margin-bottom: 20px" row-key="id" border lazy :load="load"
+    :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }" :row-style="{ height: '55px' }" :cell-style="{ padding: '0px' }"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column prop="taskName" label="任务名称" />
+      <el-table-column prop="taskDesc" label="任务描述" align="center" />
+      <el-table-column prop="taskFirst" label="任务优先级" align="center">
+        <template slot-scope="scope">
+          <!-- taskLevel -->
+          <span v-for="(item, index) in taskLevel" :key="index" v-show="item.value == scope.row.level">{{ item.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="taskStartTime" label="任务开始时间" align="center" />
+      <el-table-column prop="taskEndTime" label="任务结束时间" align="center" />
+      <el-table-column prop="createTime" label="创建时间" align="center" />
+      <el-table-column prop="createTime" label="任务状态" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.taskStatus" size="small" type="text" @click="editStatus(scope.row)">{{ scope.row.taskStatus == '0' ? '未完成' : '已完成' }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="340" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.create" size="small" type="primary" @click="newAdd(scope.row)">新增子任务</el-button>
+          <el-button v-if="!scope.row.assign" size="small" type="primary" @click="haldAssign(scope.row)">指派</el-button>
+          <el-button size="small" type="primary" @click="haldUpload(scope.row)">编辑</el-button>
+          <el-button size="small" type="primary" @click="haldDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination @size-change="findPage" @current-change="findPage" 
+      :current-page.sync="pageData.pageNum" :page-size="pageData.pageSize" layout="total, prev, pager, next" :total="pageData.total">
+    </el-pagination>
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
       <el-form ref="form" :model="formAdd" label-width="130px">
@@ -12,7 +44,8 @@
           <el-col :span="8">
             <el-form-item label="项目类型">
               <el-select v-model="formAdd.projectId" placeholder="请选择">
-                <el-option v-for="(item, index) in projectList" :label="item.projectName" :value="item.id" :key="index"></el-option>
+                <el-option v-for="(item, index) in projectList" :label="item.projectName" :value="item.id"
+                  :key="index"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -23,28 +56,36 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="任务描述">
-              <el-input v-model="formAdd.taskDesc" class="inputType" size="small"></el-input>
+              <el-input v-model="formAdd.taskDesc" type="textarea" class="inputType" size="small"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="任务优先级">
-              <el-input v-model="formAdd.taskFirst" class="inputType" type="number" size="small"></el-input>
+              <!-- <el-input v-model="formAdd.taskFirst" class="inputType" type="number" size="small"></el-input> -->
+              <!-- taskLevel -->
+              <el-select v-model="formAdd.taskFirst" placeholder="请选择任务优先级">
+                <el-option v-for="(item, index) in taskLevel" :label="item.label" :value="item.value"
+                  :key="index"></el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="任务开始时间">
-              <el-date-picker v-model="formAdd.taskStartTime" size="small" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择任务开始时间" style="width: 100%;"></el-date-picker>
+              <el-date-picker v-model="formAdd.taskStartTime" size="small" type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择任务开始时间" style="width: 100%"></el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="任务结束时间">
-              <el-date-picker v-model="formAdd.taskEndTime" size="small" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择任务结束时间" style="width: 100%;"></el-date-picker>
+              <el-date-picker v-model="formAdd.taskEndTime" size="small" type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择任务结束时间" style="width: 100%"></el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="附件">
-              <el-upload style="margin-bottom:10px" action="#" class="upload-demo" :limit="1" :auto-upload="false"
-                :on-change="fillUpload" :on-progress="handleProgress" ref="upload3" :file-list="fileList">
+              <el-upload style="margin-bottom: 10px" action="#" class="upload-demo" :auto-upload="false"
+                :on-change="fillUpload" :on-progress="handleProgress" ref="upload3" :on-remove="handleRemove"
+                :on-exceed="handleExceed" :file-list="fileList">
                 <el-button size="small" type="primary">点击上传</el-button>
               </el-upload>
             </el-form-item>
@@ -61,7 +102,8 @@
       <el-form>
         <el-form-item>
           <el-select v-model="choiceUser" multiple placeholder="请选择">
-            <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
+            <el-option v-for="item in userList" :key="item.userId" :label="item.userName"
+              :value="item.userId"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -70,93 +112,153 @@
         <el-button type="primary" @click="handleAssign">确 定</el-button>
       </span>
     </el-dialog>
-
   </div>
 </template>
 
 <script>
-import templateTable from '@/components/TemplateTable/index.vue'
+import templateTable from "@/components/TemplateTable/index.vue";
 export default {
   components: {
     templateTable
   },
   data() {
     return {
-      tableData:[],
+      tableData: [],
       tableConfig: {
         columns: [
-          { prop: "taskName", label: "任务名称", type: "text"},
+          { prop: "taskName", label: "任务名称", type: "text" },
           { prop: "taskDesc", label: "任务描述", type: "text" },
           { prop: "taskFirst", label: "任务优先级", type: "text" },
           { prop: "taskStartTime", label: "任务开始时间", type: "text" },
           { prop: "taskEndTime", label: "任务结束时间", type: "text" },
-          { prop: "createTime", label: "创建时间", type: "text" },
+          { prop: "createTime", label: "创建时间", type: "text" }
         ],
-        isPaginationShow:true,
+        isPaginationShow: true,
         loading: true,
-        tableHeight: 'auto',
-        operationWidth: '150',
-        optBtns:[
-          { type:'primary', label:'新增子任务', click:(row, index) => {return this.newAdd(row)}},
-          { type:'primary', label:'指派', click:(row, index) => {return this.haldAssign(row)}},
-          { type:'primary', label:'编辑', click:(row, index) => {return this.haldUpload(row)}},
-          { type:'primary', label:'删除', click:(row, index) => {return this.haldDelete(row)}},
+        tableHeight: "auto",
+        operationWidth: "150",
+        optBtns: [
+          {
+            type: "primary",
+            label: "新增子任务",
+            click: (row, index) => {
+              return this.newAdd(row)
+            }
+          },
+          {
+            type: "primary",
+            label: "指派",
+            click: (row, index) => {
+              return this.haldAssign(row)
+            }
+          },
+          {
+            type: "primary",
+            label: "编辑",
+            click: (row, index) => {
+              return this.haldUpload(row)
+            }
+          },
+          {
+            type: "primary",
+            label: "删除",
+            click: (row, index) => {
+              return this.haldDelete(row)
+            }
+          }
         ]
       },
-      pageData: { pageNum: 1, pageSize: 20 },
+      pageData: { pageNum: 1, pageSize: 20 ,total: 0},
       btnGroup: [
-        { name:'新增', click:() => {return this.newAdd()}, },
+        {
+          name: "新增",
+          click: () => {
+            return this.newAdd()
+          }
+        }
       ],
       formList: [
         // { label: "任务名称", prop: "taskName", type: "input", },
       ],
       dialogVisible: false,
       formAdd: {},
-      dialogTitle: '新增',
+      dialogTitle: "新增",
       projectList: [],
       fileList: [],
       fillData: {},
-      taskId: '0',
+      taskId: "0",
       userList: [],
       dialogVisibleChoice: false,
       choiceUser: [],
+      tableLoading: false,
+      taskLevel: [],
     }
   },
   created() {
-    this.findPage();
+    this.findPage()
     this.getProjectList()
     this.getLineList()
   },
   methods: {
+    // 修改状态
+    editStatus() {
+      
+    },
+    // 展开
+    load(tree, treeNode, resolve) {
+      this.$api.task
+        .getTaskChildren({
+          parentId: tree.id
+        })
+        .then(res => {
+          res.data.forEach(val => {
+            val.hasChildren = true
+          })
+          resolve(res.data)
+        })
+    },
+    // 指派
     handleAssign() {
-      this.$api.task.assignTask({
-        taskId: this.taskId,
-        userId: this.choiceUser
-      }).then((res) => {
-        if (res.code == 200) {
-          this.$message.success(res.mgs)
-          this.handleCloseChoice()
-          this.findPage();
-        } else {
-          this.$message.error(res.mgs)
-        }
-      })
+      this.$api.task
+        .assignTask({
+          taskId: this.taskId,
+          userId: this.choiceUser
+        })
+        .then(res => {
+          if (res.code == 200) {
+            this.$message.success(res.mgs)
+            this.handleCloseChoice()
+            this.findPage()
+          } else {
+            this.$message.error(res.mgs)
+          }
+        })
     },
     haldAssign(row) {
       this.dialogVisibleChoice = true
       this.taskId = row.id
     },
     getLineList() {
-      this.$api.task.getBehindUser().then((res) => {
+      this.$api.task.getBehindUser().then(res => {
         this.userList = res.data
       })
+      this.$api.dict.findByLableName('task_priority').then((res) => {
+        this.taskLevel = res.data
+      })
     },
     handleCloseChoice() {
       this.dialogVisibleChoice = false
     },
+    handleExceed(files, fileList) {
+      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+      this.fileList = fileList
+    },
     fillUpload(file, fileList) {
-      const params = new FormData(); // 声明formData数据类型
-      params.append("file", file.raw);
+      const params = new FormData() // 声明formData数据类型
+      params.append("file", file.raw)
       this.$api.task.fileUpload(params).then(res => {
         if (res.code == "200") {
           this.fileList = fileList
@@ -166,31 +268,36 @@ export default {
           this.fileList = []
           this.$message.error(res.msg)
         }
-      });
+      })
     },
     handleProgress(event) {
       console.log(event)
     },
     getProjectList() {
-      this.$api.task.getProjectList().then((res) => {
+      this.$api.task.getProjectList().then(res => {
         this.projectList = res.data
       })
     },
     findPage(data) {
-      this.$api.task.getTaskPage({...this.pageData, ...data}).then((res) => {
+      this.tableLoading = true
+      this.$api.task.getTaskPage({ ...this.pageData, ...data }).then(res => {
         if (res.code == 200) {
+          res.data.records.forEach(val => {
+            val.hasChildren = true
+          })
           this.tableData = res.data.records
           this.pageData.pageNum = res.data.current
           this.pageData.pageSize = res.data.size
-          this.pageData.totalSize = res.data.total
+          this.pageData.total = res.data.total
         } else {
           this.$message.error(res.msg)
         }
-        this.tableConfig.loading = false;
+        this.tableConfig.loading = false
+        this.tableLoading = false
       })
     },
     handleSearchList(data) {
-      this.findPage(data);
+      this.findPage(data)
     },
     addSubmit() {
       let data = {
@@ -201,16 +308,14 @@ export default {
             taskFirst: this.formAdd.taskFirst,
             taskName: this.formAdd.taskName,
             taskStartTime: this.formAdd.taskStartTime,
-            annexs: [
-              this.fillData
-            ]
+            annexs: [this.fillData]
           }
         ],
         projectId: this.formAdd.projectId,
-        taskId: this.taskId || '0'
+        taskId: this.taskId || "0"
       }
-      if (this.dialogTitle == '新增') {
-        this.$api.task.addTask(data).then((res) => {
+      if (this.dialogTitle == "新增") {
+        this.$api.task.addTask(data).then(res => {
           if (res.code == 200) {
             this.$message.success(res.msg)
             this.findPage()
@@ -220,7 +325,7 @@ export default {
           }
         })
       } else {
-          this.$api.task.editTask(this.formAdd).then((res) => {
+        this.$api.task.editTask(this.formAdd).then(res => {
           if (res.code == 200) {
             this.$message.success(res.msg)
             this.findPage()
@@ -230,19 +335,18 @@ export default {
           }
         })
       }
-      
     },
     newAdd(row) {
       if (row) {
         this.taskId = row.id
       } else {
-        this.taskId = '0'
+        this.taskId = "0"
       }
-      this.dialogTitle = '新增'
+      this.dialogTitle = "新增"
       this.dialogVisible = true
     },
     haldUpload(row) {
-      this.dialogTitle = '编辑'
+      this.dialogTitle = "编辑"
       this.dialogVisible = true
       this.formAdd = {
         taskName: row.taskName,
@@ -267,22 +371,26 @@ export default {
       //   ],
     },
     haldDelete(row) {
-      this.$confirm('确认是否删除?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$api.task.delTask({
-          id: row.id
-        }).then((res) => {
-          if (res.code == 200) {
-            this.$message.success(res.msg)
-            this.findPage()
-          }
+      this.$confirm("确认是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$api.task
+            .delTask({
+              id: row.id
+            })
+            .then(res => {
+              if (res.code == 200) {
+                this.$message.success(res.msg)
+                this.findPage()
+              }
+            })
+        })
+        .catch(() => {
+          this.$message.error("已取消删除")
         })
-      }).catch(() => {
-        this.$message.error('已取消删除')
-      });
     },
     handleClose() {
       this.dialogVisible = false
@@ -293,10 +401,10 @@ export default {
   }
 }
 </script>
-    
+
 <style scoped lang="scss">
-  .InvoicedAndSettled>>>.el-table__body-wrapper {
-    overflow-y: auto !important;
-    height: auto !important;
-  }
-</style>
+.InvoicedAndSettled>>>.el-table__body-wrapper {
+  overflow-y: auto !important;
+  height: auto !important;
+}
+</style>