事务管理-前端页面

src/router/views/index.js

@@ -327,6 +327,36 @@ export default [{
       }
     ]
   },
+  // 结算修改页
+  {
+    path: '/task_editPages',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/task_editPages',
+        meta: {
+          i18n: 'task_editPages'
+        },
+        component: () => import( /* webpackChunkName: "views" */ '@/views/workManagement/task/taskEdit')
+      }
+    ]
+  },
+  // 任务修改页
+  {
+    path: '/settleAccounts_editPages',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/settleAccounts_editPages',
+        meta: {
+          i18n: 'settleAccounts_editPages'
+        },
+        component: () => import( /* webpackChunkName: "views" */ '@/views/workManagement/receipt/settleAccountsEdit')
+      }
+    ]
+  },
     {
         path: '/work/process/leave',
         component: Layout,

src/views/workManagement/main-items/detailsPage.vue

@@ -1,76 +1,87 @@
 <template>
-  <basic-container>
-    <el-form :model="form" ref="form" label-width="130px">
-      <el-row>
-        <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
-          <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
-            <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
-            <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
-            <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col>
-          <el-form-item>
-            <el-button type="primary" style="float: right" @click="onSubmit">生成账单</el-button>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <avue-crud
-      ref="crud"
-      :data="data"
-      :option="optionTable"
-      :page.sync="page"
-      :table-loading="loading"
-      @row-del="rowDel"
-      @row-update="rowUpdate"
-      @row-save="rowSave"
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      @search-change="searchChange"
-      @refresh-change="refreshChange"
-      @cell-dblclick="cellDblclick"
-      @on-load="getList"
-      @saveColumn="saveColumn"
-    >
-      <template slot="menuLeft">
-        <el-button type="primary"
-                   size="small"
-                   icon="el-icon-upload2"
-                   plain
-                   @click="handleDelete">新增明细
+  <div class="borderless">
+    <div class="customer-head">
+      <div class="customer-back">
+        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+                   @click="backToList">返回列表
         </el-button>
-        <el-button type="primary"
-                   size="small"
-                   icon="el-icon-upload2"
-                   plain
-                   @click="handleDelete">导 出
-        </el-button>
-        <el-button type="primary"
-                   size="small"
-                   icon="el-icon-upload2"
-                   plain
-                   @click="handleDelete">打 印
-        </el-button>
-        <el-button type="primary"
-                   size="small"
-                   icon="el-icon-upload2"
-                   plain
-                   @click="handleDelete">新 增
-        </el-button>
-        <el-button type="primary"
-                   size="small"
-                   icon="el-icon-upload2"
-                   plain
-                   @click="handleDelete">请 核
-        </el-button>
-      </template>
-    </avue-crud>
-  </basic-container>
+      </div>
+    </div>
+    <div style="margin-top: 60px">
+      <basic-container>
+        <el-form :model="form" ref="form" label-width="130px">
+          <el-row>
+            <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
+              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
+                <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
+                <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
+                <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item>
+                <el-button type="info" style="float: right" @click="">生成账单</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </basic-container>
+      <basic-container>
+        <avue-crud
+          ref="crud"
+          :data="data"
+          :option="optionTable"
+          :page.sync="page"
+          :table-loading="loading"
+          @row-del="rowDel"
+          @row-update="rowUpdate"
+          @row-save="rowSave"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          @search-change="searchChange"
+          @refresh-change="refreshChange"
+          @cell-dblclick="cellDblclick"
+          @on-load="getList"
+          @saveColumn="saveColumn"
+        >
+          <template slot="menuLeft">
+            <el-button type="success"
+                       size="small"
+                       icon="el-icon-plus"
+                       plain
+                       @click="">新增明细
+            </el-button>
+            <el-button type="primary"
+                       size="small"
+                       icon="el-icon-arrow-right"
+                       plain
+                       @click="">导 出
+            </el-button>
+            <el-button type="primary"
+                       size="small"
+                       plain
+                       @click="">打 印
+            </el-button>
+            <el-button type="success"
+                       size="small"
+                       icon="el-icon-plus"
+                       plain
+                       @click="">新 增
+            </el-button>
+            <el-button type="info"
+                       size="small"
+                       plain
+                       @click="">请 核
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+    </div>
+  </div>
 </template>
 
 <script>
-  import option from "./configuration/mainList.json";
+  import option from "./configuration/detailsPage.json";
   export default {
     data() {
       return {
@@ -348,8 +359,35 @@
       saveColumn(row, column) {
         console.log(row, column);
       },
+      //返回主营项目列表
+      backToList(){
+        this.$router.$avueRouter.closeTag();
+        this.$router.push({
+          path: '/workManagement/main-items/list',
+          query: {}
+        });
+      }
     }
   };
 </script>
 
-<style></style>
+<style scoped lang="scss">
+  .customer-head {
+    position: fixed;
+    top: 105px;
+    width: 100%;
+    margin-left: -10px;
+    height: 62px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
+    z-index: 999;
+  }
+
+  .customer-back {
+    cursor: pointer;
+    line-height: 62px;
+    font-size: 16px;
+    color: #323233;
+    font-weight: 400;
+  }
+</style>

src/views/workManagement/main-items/list.vue

@@ -6,6 +6,9 @@
       :option="optionTable"
       :page.sync="page"
       :table-loading="loading"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
       @size-change="sizeChange"
       @current-change="currentChange"
       @search-change="searchChange"
@@ -17,15 +20,15 @@
       <template slot="menuLeft">
         <el-button type="primary"
                    size="small"
-                   icon="el-icon-upload2"
+                   icon="el-icon-arrow-right"
                    plain
-                   @click="handleDelete">导 出
+                   @click="">导 出
         </el-button>
-        <el-button type="primary"
+        <el-button type="success"
                    size="small"
-                   icon="el-icon-upload2"
+                   icon="el-icon-plus"
                    plain
-                   @click="handleDelete">新 单
+                   @click="">新 单
         </el-button>
       </template>
     <template slot-scope="scope" slot="menu">
@@ -82,24 +85,18 @@ export default {
             label: "客户名称",
             prop: "prop3",
             search: true,
-            addDisplay: false,
-            editDisplay: false,
             overHidden: true,
             minWidth:'80'
           },
           {
             label: "应收金额",
             prop: "prop4",
-            addDisplay: false,
-            editDisplay: false,
             overHidden: true,
             minWidth:'80'
           },
           {
             label: "实收金额",
             prop: "prop5",
-            addDisplay: false,
-            editDisplay: false,
             overHidden: true,
             minWidth:'80'
           },
@@ -107,16 +104,12 @@ export default {
             label: "责任人",
             prop: "prop6",
             search: true,
-            addDisplay: false,
-            editDisplay: false,
             overHidden: true,
             minWidth:'80'
           },
           {
             label: "系统编号",
             prop: "prop7",
-            addDisplay: false,
-            editDisplay: false,
             overHidden: true,
             minWidth:'80'
           },
@@ -228,8 +221,36 @@ export default {
       this.page.currentPage = 1;
       this.getList();
     },
-    rowDel(row, index) {
-      this.$message.success("删除成功");
+    //删除列表后面的删除按钮触发触发(row, index, done)
+    rowDel(row, index, done) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        // 数据回调进行刷新
+        done(row);
+      });
+    },
+    //修改时的修改按钮点击触发
+    rowUpdate(row, index, done, loading) {
+      setTimeout(() => {
+        this.$message.success("修改成功");
+        loading();
+        done();
+      }, 1000);
+    },
+    //新增修改时保存触发
+    rowSave(row, done, loading) {
+      setTimeout(() => {
+        this.$message.success("保存成功");
+        loading();
+        done();
+      }, 1000);
     },
     cellDblclick(row, column, cell, event) {
       console.log(row, column, cell, event);

src/views/workManagement/receipt/configuration/settleAccounts.json

@@ -10,8 +10,8 @@
   "searchMenuSpan": 6,
   "tree": true,
   "selection": true,
-  "viewBtn": true,
-  "editBtn": true,
+  "viewBtn": false,
+  "editBtn": false,
   "delBtn": false,
   "menuWidth": 220,
   "column": [

src/views/workManagement/receipt/settleAccounts.vue

@@ -19,9 +19,8 @@
                  ref="crud"
                  v-model="form"
                  :page.sync="page"
+                 :before-open="beforeOpen"
                  @row-del="rowDel"
-                 @row-update="rowUpdate"
-                 @row-save="rowSave"
                  @search-change="searchChange"
                  @search-reset="searchReset"
                  @selection-change="selectionChange"
@@ -32,26 +31,41 @@
         <template slot="menuLeft">
           <el-button type="primary"
                      size="small"
-                     icon="el-icon-upload2"
+                     icon="el-icon-arrow-right"
                      plain
-                     @click="handleDelete">导 出
+                     @click="">导 出
           </el-button>
           <el-button type="primary"
                      size="small"
-                     icon="el-icon-upload2"
                      plain
-                     @click="handleDelete">打 印
+                     @click="">打 印
           </el-button>
-          <el-button type="primary"
+          <el-button type="info"
                      size="small"
-                     icon="el-icon-upload2"
                      plain
-                     @click="handleDelete">请 核
+                     @click="">请 核
           </el-button>
         </template>
+        <template slot-scope="{row}" slot="querenshou">
+          <el-button type="primary"  size="small" @click="">结 算</el-button>
+        </template>
         <template slot-scope="scope" slot="menu">
           <el-button
             type="text"
+            icon="el-icon-view"
+            size="small"
+            @click.stop="beforeOpenPage(scope.row,scope.index)"
+          >查看
+          </el-button>
+          <el-button
+            type="text"
+            icon="el-icon-edit"
+            size="small"
+            @click.stop="editOpen(scope.row,scope.index)"
+          >编辑
+          </el-button>
+          <el-button
+            type="text"
             icon="el-icon-edit"
             size="small"
             @click.stop="rowDel(scope.row,scope.index)"
@@ -201,6 +215,27 @@
 
     },
     methods: {
+      //新增时跳转页面
+      beforeOpen(row){
+        this.$router.push({
+          path: "/settleAccounts_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
+      //查看
+      beforeOpenPage(row){
+        this.$router.push({
+          path: "/settleAccounts_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
+      //修改
+      editOpen(row){
+        this.$router.push({
+          path: "/settleAccounts_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
       //删除列表后面的删除按钮触发触发(row, index, done)
       rowDel(row, index, done) {
         this.$confirm("确定将选择数据删除?", {
@@ -216,30 +251,6 @@
           done(row);
         });
       },
-      //修改时的修改按钮点击触发
-      rowUpdate(row, index, done, loading) {
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done(row);
-      },
-      //新增修改时保存触发
-      rowSave(row, done, loading) {
-        setTimeout(() => {
-          this.$message.success("保存成功");
-          loading();
-          done();
-        }, 1000);
-      },
-      //新增子项触发
-      handleAdd(row) {
-        this.parentId = row.id;
-        const column = this.findObject(this.option.column, "parentId");
-        column.value = row.id;
-        column.addDisabled = true;
-        this.$refs.crud.rowAdd();
-      },
       //点击搜索按钮触发
       searchChange(params, done) {
         this.query = params;

src/views/workManagement/receipt/settleAccountsEdit.vue

@@ -0,0 +1,350 @@
+<template>
+  <div class="borderless">
+    <div class="customer-head">
+      <div class="customer-back">
+        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+                   @click="backToList">返回列表
+        </el-button>
+      </div>
+      <el-button
+        class="el-button--small-yh add-customer-btn"
+        type="primary"
+        @click=""
+      >{{form.id?'确认修改':'确认新增'}}
+      </el-button>
+    </div>
+    <div style="margin-top: 60px">
+      <basic-container>
+        <el-form :model="form" ref="form" label-width="130px">
+          <el-row>
+            <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
+              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
+                <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
+                <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
+                <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+  import option from "./configuration/settleAccounts.json";
+  export default {
+    data() {
+      return {
+        loading: false,
+        form:{},
+        data: [],
+        //顶部from数据
+        basicData:
+          {
+          column: [
+            {
+              label: '服务项目',
+              prop: 'prop1',
+              rules: [
+                {
+                  required: false,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '收费建议',
+              prop: 'prop2',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '计价单位',
+              prop: 'prop3',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '数量',
+              prop: 'prop3',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '报价',
+              prop: 'prop4',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '合计金额',
+              prop: 'prop5',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '频率',
+              prop: 'prop6',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '提醒日',
+              prop: 'prop7',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '备注',
+              prop: 'prop8',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '任务部门',
+              prop: 'prop8',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '承做人',
+              prop: 'prop9',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '开始日期',
+              prop: 'prop10',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '需求完成日期',
+              prop: 'prop11',
+              type:'datetime',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '录入人',
+              prop: 'prop12',
+              type:'datetime',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '录入时间',
+              prop: 'prop13',
+              type:'select',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '最新修改人',
+              prop: 'prop8',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }
+          ],
+        },
+        page: {
+          currentPage: 1,
+          total: 0,
+          pageSize: 10
+        }
+      };
+    },
+    methods: {
+      //删除列表后面的删除按钮触发触发(row, index, done)
+      rowDel(row, index, done) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          // 数据回调进行刷新
+          done(row);
+        });
+      },
+      //修改时的修改按钮点击触发
+      rowUpdate(row, index, done, loading) {
+        setTimeout(() => {
+          this.$message.success("修改成功");
+          loading();
+          done();
+        }, 1000);
+      },
+      //新增修改时保存触发
+      rowSave(row, done, loading) {
+        setTimeout(() => {
+          this.$message.success("保存成功");
+          loading();
+          done();
+        }, 1000);
+      },
+      getList() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.data = [
+            {
+              prop1: "食品许可",
+              prop2: "500",
+              prop3: "次",
+              prop4: "1",
+              prop5: "1500",
+              prop6: "1500",
+              prop7: "年",
+              prop8: "202202-1-1",
+              prop9: "效率高",
+              prop10: "商务部",
+              prop11: "老周",
+              prop12: "2021-1-1",
+              prop13: "2021-1-1",
+              prop14: "LOL",
+              prop15: "2021-1-1",
+              prop16: "LOL",
+              prop17: "2021-1-1"
+            }
+          ];
+          this.page.total = 1;
+        }, 1000);
+      },
+      searchChange(params, done) {
+        this.getList(this.page, params);
+        done();
+      },
+      sizeChange(val) {
+        this.page.pageSize = val;
+        this.getList();
+      },
+      currentChange(val) {
+        this.page.currentPage = val;
+        this.getList();
+      },
+      refreshChange() {
+        this.page.currentPage = 1;
+        this.getList();
+      },
+      cellDblclick(row, column, cell, event) {
+        console.log(row, column, cell, event);
+        this.$refs.crud.rowEdit(row);
+      },
+      saveColumn(row, column) {
+        console.log(row, column);
+      },
+      //返回主营项目列表
+      backToList(){
+        this.$router.$avueRouter.closeTag();
+        this.$router.push({
+          path: '/workManagement/receipt/settleAccounts',
+          query: {}
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .customer-head {
+    position: fixed;
+    top: 105px;
+    width: 100%;
+    margin-left: -10px;
+    height: 62px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
+    z-index: 999;
+  }
+
+  .customer-back {
+    cursor: pointer;
+    line-height: 62px;
+    font-size: 16px;
+    color: #323233;
+    font-weight: 400;
+  }
+
+  .add-customer-btn {
+    position: fixed;
+    right: 36px;
+    top: 115px;
+  }
+</style>

src/views/workManagement/task/configuration/mainList.json

@@ -10,8 +10,8 @@
   "searchMenuSpan": 6,
   "tree": true,
   "selection": true,
-  "viewBtn": true,
-  "editBtn": true,
+  "viewBtn": false,
+  "editBtn": false,
   "delBtn": false,
   "menuWidth": 280,
   "column": [

src/views/workManagement/task/index.vue

@@ -5,9 +5,8 @@
                ref="crud"
                v-model="form"
                :page.sync="page"
+               :before-open="beforeOpen"
                @row-del="rowDel"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
@@ -21,7 +20,7 @@
                    size="small"
                    icon="el-icon-upload2"
                    plain
-                   @click="handleDelete">导 入
+                   @click="">导 入
         </el-button>
       </template>
       <template slot-scope="scope" slot="menu">
@@ -29,14 +28,28 @@
           type="text"
           icon="el-icon-view"
           size="small"
-          @click.stop="beforeOpenPage(scope.row,scope.index)"
+          @click.stop="beforeOpenPage(scope.row)"
+        >查看
+        </el-button>
+        <el-button
+          type="text"
+          icon="el-icon-edit"
+          size="small"
+          @click.stop="editOpen(scope.row)"
+        >编辑
+        </el-button>
+        <el-button
+          type="text"
+          icon="el-icon-view"
+          size="small"
+          @click.stop=""
         >发送
         </el-button>
         <el-button
           type="text"
           icon="el-icon-edit"
           size="small"
-          @click.stop="editOpen(scope.row,scope.index)"
+          @click.stop=""
         >完工
         </el-button>
       </template>
@@ -68,6 +81,28 @@
 
     },
     methods: {
+      //新增
+      beforeOpen(row){
+        this.$router.push({
+          path: "/task_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
+      //查看
+      beforeOpenPage(row){
+        this.$router.push({
+          path: "/task_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
+      //修改
+      editOpen(row){
+        this.$router.push({
+          path: "/task_editPages",
+          query: {id: JSON.stringify(row.fwxm)},
+        });
+      },
+      //
       //删除列表后面的删除按钮触发触发(row, index, done)
       rowDel(row, index, done) {
         this.$confirm("确定将选择数据删除?", {
@@ -83,22 +118,7 @@
           done(row);
         });
       },
-      //修改时的修改按钮点击触发
-      rowUpdate(row, index, done, loading) {
-        setTimeout(() => {
-          this.$message.success("修改成功");
-          loading();
-          done();
-        }, 1000);
-      },
-      //新增修改时保存触发
-      rowSave(row, done, loading) {
-        setTimeout(() => {
-          this.$message.success("保存成功");
-          loading();
-          done();
-        }, 1000);
-      },
+
       //查询全部
       initData(){
         customerList().then(res => {

src/views/workManagement/task/taskEdit.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="borderless">
+    <div class="customer-head">
+      <div class="customer-back">
+        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+                   @click="backToList">返回列表
+        </el-button>
+      </div>
+      <el-button
+        class="el-button--small-yh add-customer-btn"
+        type="primary"
+        @click=""
+      >{{form.id?'确认修改':'确认新增'}}
+      </el-button>
+    </div>
+    <div style="margin-top: 60px">
+      <basic-container>
+        <el-form :model="form" ref="form" label-width="130px">
+          <el-row>
+            <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
+              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
+                <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
+                <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
+                <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        loading: false,
+        form:{},
+        data: [],
+        //顶部from数据
+        basicData:
+          {
+          column: [
+            {
+              label: '项目代码',
+              prop: 'prop1',
+              rules: [
+                {
+                  required: false,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '项目名称',
+              prop: 'prop2',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '服务项目',
+              prop: 'prop3',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '下单时间',
+              prop: 'prop3',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '开始日期',
+              prop: 'prop4',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '需求完成日期',
+              prop: 'prop5',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '部门',
+              prop: 'prop6',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '备注',
+              prop: 'prop7',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '应收金额',
+              prop: 'prop8',
+              data: [],
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }, {
+              label: '任务责任人',
+              prop: 'prop8',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '客户名称',
+              prop: 'prop9',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '系统编号',
+              prop: 'prop10',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '状态',
+              prop: 'prop11',
+              type:'datetime',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            },
+            {
+              label: '备注',
+              prop: 'prop12',
+              type:'datetime',
+              rules: [
+                {
+                  required: true,
+                  message: ' ',
+                  trigger: 'blur'
+                }
+              ]
+            }
+          ],
+        },
+        page: {
+          currentPage: 1,
+          total: 0,
+          pageSize: 10
+        }
+      };
+    },
+    methods: {
+      //删除列表后面的删除按钮触发触发(row, index, done)
+      rowDel(row, index, done) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          // 数据回调进行刷新
+          done(row);
+        });
+      },
+      //修改时的修改按钮点击触发
+      rowUpdate(row, index, done, loading) {
+        setTimeout(() => {
+          this.$message.success("修改成功");
+          loading();
+          done();
+        }, 1000);
+      },
+      //新增修改时保存触发
+      rowSave(row, done, loading) {
+        setTimeout(() => {
+          this.$message.success("保存成功");
+          loading();
+          done();
+        }, 1000);
+      },
+      getList() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.data = [
+            {
+              prop1: "食品许可",
+              prop2: "500",
+              prop3: "次",
+              prop4: "1",
+              prop5: "1500",
+              prop6: "1500",
+              prop7: "年",
+              prop8: "202202-1-1",
+              prop9: "效率高",
+              prop10: "商务部",
+              prop11: "老周",
+              prop12: "2021-1-1",
+              prop13: "2021-1-1",
+              prop14: "LOL",
+              prop15: "2021-1-1",
+              prop16: "LOL",
+              prop17: "2021-1-1"
+            }
+          ];
+          this.page.total = 1;
+        }, 1000);
+      },
+      searchChange(params, done) {
+        this.getList(this.page, params);
+        done();
+      },
+      sizeChange(val) {
+        this.page.pageSize = val;
+        this.getList();
+      },
+      currentChange(val) {
+        this.page.currentPage = val;
+        this.getList();
+      },
+      refreshChange() {
+        this.page.currentPage = 1;
+        this.getList();
+      },
+      cellDblclick(row, column, cell, event) {
+        console.log(row, column, cell, event);
+        this.$refs.crud.rowEdit(row);
+      },
+      saveColumn(row, column) {
+        console.log(row, column);
+      },
+      //返回主营项目列表
+      backToList(){
+        this.$router.$avueRouter.closeTag();
+        this.$router.push({
+          path: '/workManagement/task/index',
+          query: {}
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .customer-head {
+    position: fixed;
+    top: 105px;
+    width: 100%;
+    margin-left: -10px;
+    height: 62px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
+    z-index: 999;
+  }
+
+  .customer-back {
+    cursor: pointer;
+    line-height: 62px;
+    font-size: 16px;
+    color: #323233;
+    font-weight: 400;
+  }
+
+  .add-customer-btn {
+    position: fixed;
+    right: 36px;
+    top: 115px;
+  }
+</style>