新增网格审批

src/pages/main/gridDivision/approvalExamination.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="approvalExamination-container">
+      <simple-form
+        :form="table_form"
+        :handle="table_handle"
+        @search="handleSearch"
+        @track="handleVisible('track')"
+        @batch="handleVisible('batch')"
+      >
+      </simple-form>
+      <simple-table
+        :list="table_list"
+        :config="table_config"
+        :loading="table_loading"
+        :multiple="true"
+        :handle-row="table_handle_row"
+        @selection="handleaaa"
+        @approve="handleApprove"
+      ></simple-table>
+      <simple-dialog
+        title="审批"
+        width="40%"
+        @cancel="handleVisible('opinion')"
+        @confirm="handleOpinion"
+        :visible="opinion_visible"
+      >
+        <el-form
+          label-width="80px"
+          :model="opinion_form"
+          ref="opinion_ref"
+        >
+          <el-form-item
+            label="审批意见"
+            prop="opinion"
+            :rules="{
+                        required: true,
+                        message: '审批意见不能为空',
+                        trigger: 'blur',
+                    }"
+          >
+            <el-input
+              :rows="8"
+              type="textarea"
+              v-model="opinion_form.opinion"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </simple-dialog>
+      <simple-dialog
+        title="审批轨迹"
+        :fullscreen="true"
+        @cancel="handleVisible('track')"
+        @confirm="handleConsent"
+        :visible="track_visible"
+      >
+        <simple-table
+          :list="table_list_track"
+          :config="table_config_track"
+          :loading="table_loading_track"
+        ></simple-table>
+      </simple-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import simpleForm from "./components/form.vue";
+import simpleTable from "./components/table.vue";
+import simpleDialog from "./components/dialog.vue";
+// import simplePagination from "./components/pagination.vue";
+export default {
+  components: {
+    simpleForm,
+    simpleDialog,
+    simpleTable,
+    // simplePagination,
+  },
+  data() {
+    return {
+      // 审批意见
+      opinion_visible: false,
+      track_visible: false,
+      opinion_form: {},
+      table_form: [
+        {
+          label: "公司名称",
+          props: "name",
+          type: "input",
+        },
+        {
+          label: "状态",
+          props: "status",
+          type: "select",
+          // 0.待办  1.已办
+          dictionary: [
+            {
+              label: "待办",
+              value: "0",
+            },
+            {
+              label: "已办",
+              value: "1",
+            },
+          ],
+        },
+      ],
+      table_loading: false,
+      table_handle: [
+        {
+          label: "审批轨迹",
+          props: "track",
+        },
+        {
+          label: "批量审批",
+          props: "batch",
+        },
+      ],
+      // 列表数据
+      table_list: [
+        {
+          number: 1,
+          cpmName: "xq",
+          person: "mll",
+          phone: 132548648844,
+          need: "xxxxxxxx",
+          file: "附件1",
+          status: 0,
+        },
+      ],
+      // 表头配置
+      table_config: [
+        {
+          label: "序号",
+          props: "number",
+        },
+        {
+          label: "公司名称",
+          props: "cpmName",
+        },
+        {
+          label: "提出人",
+          props: "person",
+        },
+        {
+          label: "联系电话",
+          props: "phone",
+        },
+        {
+          label: "网格划分需求",
+          props: "need",
+        },
+        {
+          label: "附件",
+          props: "file",
+        },
+        {
+          label: "状态",
+          props: "status",
+          type: "dictionary",
+          dictionary: { 0: "待办", 1: "已办" },
+        },
+      ],
+      //   表格里的操作按钮
+      table_handle_row: [
+        {
+          label: "审批",
+          props: "approve",
+        },
+        {},
+        {},
+      ],
+      table_loading_track:false,
+      // 审批轨迹内表数据
+      table_list_track:[],
+      // 审批轨迹内表头配置
+      table_config_track: [
+        {
+          label: "编号",
+          props: "number",
+        },
+        {
+          label: "流程环节",
+          props: "cpmName",
+        },
+        {
+          label: "处理人",
+          props: "person",
+        },
+        {
+          label: "处理工号",
+          props: "number",
+        },
+        {
+          label: "处理时间",
+          props: "createTime",
+          type: "date",
+        },
+        {
+          label: "审批意见",
+          props: "status",
+          type: "dictionary",
+          dictionary: { 0: "同意", 1: "不同意" },
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSearch() {},
+    handleVisible(props) {
+      switch (props) {
+        case "opinion":
+          this.opinion_visible = !this.opinion_visible;
+          break;
+        case "track":
+          this.track_visible = !this.track_visible;
+          break;
+      }
+    },
+    handleaaa(val) {
+      console.log(val);
+    },
+    handleApprove() {
+      this.handleVisible("opinion");
+    },
+    handleOpinion() {},
+    handleConsent() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.approvalExamination-container {
+  background: #ffffff;
+  padding-top: 20px;
+  padding-left: 20px;
+  margin: 15px;
+  overflow: auto;
+  width: calc(100% - 30px);
+  max-width: calc(100% - 30px);
+  height: 100%;
+  overflow-x: hidden;
+}
+</style>

src/pages/main/gridDivision/workersList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="simple-container">
+    <div class="workersList-container">
       <simple-form
         :form="table_form"
         :handle="table_handle"
@@ -13,19 +13,26 @@
         :list="table_list"
         :config="table_config"
         :loading="table_loading"
+        :multiple="true"
         :handle-row="table_handle_row"
+        @selection="handleaaa"
         @check="handleCheck"
         @edit="handleEdit"
       ></simple-table>
+      <simple-pagination
+        :page="page"
+        :total="total"
+        @change="handleChange"
+      ></simple-pagination>
       <simple-dialog
         title="新建"
-        width="40%"
+        :fullscreen="true"
         @cancel="handleVisible('add')"
-        @confirm="handleAdd"
+        @confirm="handleSubmit"
         :visible="add_visible"
       >
         <el-form
-          label-width="60px"
+          label-width="120px"
           :model="add_form"
           ref="add_ref"
         >
@@ -53,7 +60,7 @@
           </el-form-item>
           <el-form-item
             label="网格划分需求"
-            prop="endTime"
+            prop="desc"
             :rules="{
                         required: true,
                         message: '网格划分需求不能为空',
@@ -82,6 +89,7 @@
           <el-form-item
             label="审批轨迹"
             prop=""
+            v-if="edit_visible"
           >
             <simple-table
               :list="table_list_approve"
@@ -89,13 +97,25 @@
               :loading="table_loading_approve"
             ></simple-table>
           </el-form-item>
+          <el-form-item
+            label="审批意见"
+            prop=""
+            v-if="edit_visible"
+            :rules="{
+                        required: true,
+                        message: '审批意见不能为空',
+                        trigger: 'blur',
+                    }"
+          >
+            <el-input type="textarea" v-model="add_form.precautions"></el-input>
+          </el-form-item>
         </el-form>
       </simple-dialog>
       <simple-dialog
         title="工单汇总"
         width="40%"
         @cancel="handleVisible('summary')"
-        @confirm="handleAdd"
+        @confirm="handleSummary"
         :visible="summary_visible"
       >
         <div class="summary">
@@ -111,17 +131,21 @@
 import simpleForm from "./components/form.vue";
 import simpleTable from "./components/table.vue";
 import simpleDialog from "./components/dialog.vue";
-// import simplePagination from "./components/pagination.vue";
+import simplePagination from "./components/pagination.vue";
 
 export default {
   components: {
     simpleForm,
     simpleDialog,
     simpleTable,
-    // simplePagination,
+    simplePagination,
   },
   data() {
     return {
+      page:1,
+      row:10,
+      total:0,
+      table_search:{},
       // 新建模态框
       add_visible: false,
       summary_visible: false,
@@ -219,10 +243,10 @@ export default {
         },
       ],
       // 模态框内表数据
-      table_list_approve:[],
-      table_loading_approve:false,
+      table_list_approve: [],
+      table_loading_approve: false,
       // 模态框内表头配置
-      table_config_approve:[
+      table_config_approve: [
         {
           label: "编号",
           props: "number",
@@ -250,10 +274,31 @@ export default {
           type: "dictionary",
           dictionary: { 0: "同意", 1: "不同意" },
         },
-      ]
+      ],
     };
   },
+  mounted(){
+    this.handleInit({
+      ...this.table_search,
+      page: this.page,
+      pageSize: this.rows,
+    })
+  },
   methods: {
+    // 表格数据初始化
+    handleInit(){
+      // this.table_loading = true
+      // this.$http({
+      //   url:'/mkWangge/queryPage',
+      //   method:'get',
+      //   headers:{
+      //     "Content-Type": "application/json",
+      //   },
+      //   data:{}
+      // }).then(res => {
+      //   console.log(res);
+      // })
+    },
     // 搜索事件
     handleSearch(data) {
       this.table_search = data;
@@ -264,32 +309,71 @@ export default {
       switch (props) {
         case "add":
           this.add_visible = !this.add_visible;
+          this.edit_visible = false
           break;
         case "summary":
-          this.summary_visible = !this.summary_visible;
+          this.summary_visible = !this.summary_visible
+          break
+        
+        case 'edit':
+          this.edit_visible = !this.edit_visible
+          this.add_visible = !this.add_visible
+          break
+        case 'check':
+          this.edit_visible = !this.edit_visible
+          this.add_visible = !this.add_visible
+          break
       }
     },
+    handleaaa(val) {
+      console.log(val);
+    },
     // 查看按钮
     handleCheck(row) {
       console.log(row, "row");
+      this.handleVisible('check')
       // this.visible = true;
       // this.edit_visible = false;
       // this.edit_form = row;
+      // this.edit_visible = !this.edit_visible
+      // this.add_visible = !this.add_visible
     },
     // 编辑按钮
-    handleEdit() {},
-    handleAdd() {},
+    handleEdit() {
+      this.handleVisible('edit')
+    },
+    handleSubmit() {
+      this.edit_visible = false
+      this.add_visible = false
+    },
+    handleSummary(){},
+    handleChange(page) {
+      this.page = page;
+      this.handleInit({
+        ...this.table_search,
+        page: this.page,
+        pageSize: this.rows,
+      });
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.workersList-container {
+  background: #ffffff;
+  padding-top: 20px;
+  padding-left: 20px;
+  margin: 15px;
+  overflow: auto;
+  width: calc(100% - 30px);
+  max-width: calc(100% - 30px);
+  height: 100%;
+  overflow-x: hidden;
+}
 .simple-container .el-form-item {
   padding-bottom: 22px;
 }
-/deep/ .el-upload-dragger {
-  width: 608px;
-}
 .summary {
   padding: 20px 50px 100px;
   font-size: 16px;

src/router/index.js

@@ -1651,6 +1651,12 @@ const routes = [{
             name: 'workersList',
             component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/gridDivision/workersList.vue'], resolve)
         },
+        {
+            meta: { name:  '地市网格负责人~市场部副总汇总后处理', keepAlive: false },
+            path: '/approvalExamination',
+            name: 'approvalExamination',
+            component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/gridDivision/approvalExamination.vue'], resolve)
+        },
     ]
 },
 {