网格页面接口联调

src/pages/main/gridDivision/approvalExamination.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
     <div class="approvalExamination-container">
       <simple-form
         :form="table_form"
@@ -46,6 +45,12 @@
             ></el-input>
           </el-form-item>
         </el-form>
+        <template v-slot:footer>
+          <div>
+            <el-button @click="handleVisible('opinion')" type="default">退回修改</el-button>
+            <el-button @click="handleOpinion" type="primary">同意</el-button>
+          </div>
+        </template>
       </simple-dialog>
       <simple-dialog
         title="审批轨迹"
@@ -59,9 +64,14 @@
           :config="table_config_track"
           :loading="table_loading_track"
         ></simple-table>
+        <template v-slot:footer>
+          <div>
+            <el-button @click="handleVisible('track')" type="default">退回修改</el-button>
+            <el-button @click="handleConsent" type="primary">同意</el-button>
+          </div>
+        </template>
       </simple-dialog>
     </div>
-  </div>
 </template>
 
 <script>
@@ -215,6 +225,9 @@ export default {
         case "track":
           this.track_visible = !this.track_visible;
           break;
+        case "batch":
+          this.opinion_visible = !this.opinion_visible;
+          break;
       }
     },
     handleaaa(val) {
@@ -223,8 +236,12 @@ export default {
     handleApprove() {
       this.handleVisible("opinion");
     },
-    handleOpinion() {},
-    handleConsent() {},
+    handleOpinion() {
+      this.handleVisible('opinion')
+    },
+    handleConsent() {
+      this.handleVisible('track')
+    },
   },
 };
 </script>
@@ -232,8 +249,8 @@ export default {
 <style lang="scss" scoped>
 .approvalExamination-container {
   background: #ffffff;
+  padding: 0 20px;
   padding-top: 20px;
-  padding-left: 20px;
   margin: 15px;
   overflow: auto;
   width: calc(100% - 30px);
@@ -241,4 +258,7 @@ export default {
   height: 100%;
   overflow-x: hidden;
 }
+/deep/ .el-row {
+  padding-bottom: 12px;
+}
 </style>

src/pages/main/gridDivision/workersList.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
     <div class="workersList-container">
       <simple-form
         :form="table_form"
@@ -25,10 +24,9 @@
         @change="handleChange"
       ></simple-pagination>
       <simple-dialog
-        title="新建"
+        :title="title"
         :fullscreen="true"
         @cancel="handleVisible('add')"
-        @confirm="handleSubmit"
         :visible="add_visible"
       >
         <el-form
@@ -74,17 +72,13 @@
           </el-form-item>
           <el-form-item
             label="附件上传"
-            prop=""
+            prop="file"
           >
-            <el-upload
-              class="upload-demo"
-              drag
-              action="https://jsonplaceholder.typicode.com/posts/"
-              multiple
-            >
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-            </el-upload>
+            <myUpload
+              @uploadBack="uploadBack"
+              :fileInfo="fileInfo"
+              :fileList="fileInfo.fileList"
+            ></myUpload>
           </el-form-item>
           <el-form-item
             label="审批轨迹"
@@ -99,7 +93,7 @@
           </el-form-item>
           <el-form-item
             label="审批意见"
-            prop=""
+            prop="desc"
             v-if="edit_visible"
             :rules="{
                         required: true,
@@ -107,9 +101,25 @@
                         trigger: 'blur',
                     }"
           >
-            <el-input type="textarea" v-model="add_form.precautions"></el-input>
+            <el-input
+              type="textarea"
+              v-model="add_form.desc"
+            ></el-input>
           </el-form-item>
         </el-form>
+        <template  v-slot:footer>
+          <div v-if="!isCheck">
+            <el-button
+              @click="handleSubmit"
+              type="primary"
+            >保存</el-button>
+            <el-button
+              @click="handleVisible('add')"
+              type="default"
+            >取消</el-button>
+          </div>
+          <div v-else></div>
+        </template>
       </simple-dialog>
       <simple-dialog
         title="工单汇总"
@@ -124,10 +134,10 @@
         </div>
       </simple-dialog>
     </div>
-  </div>
 </template>
 
 <script>
+import myUpload from "../../../components/upload";
 import simpleForm from "./components/form.vue";
 import simpleTable from "./components/table.vue";
 import simpleDialog from "./components/dialog.vue";
@@ -137,15 +147,26 @@ export default {
   components: {
     simpleForm,
     simpleDialog,
+    myUpload,
     simpleTable,
     simplePagination,
   },
   data() {
     return {
-      page:1,
-      rows:10,
-      total:0,
-      table_search:{},
+      fileInfo: {
+        limit: 3,
+        url: "mkWangge/upload",
+        fileList: [],
+      },
+      attList: [],
+      page: 1,
+      rows: 10,
+      total: 0,
+      // 模态框标题
+      title:'',
+      // 是否为查看状态
+      isCheck:false,
+      table_search: {},
       // 新建模态框
       add_visible: false,
       summary_visible: false,
@@ -153,7 +174,7 @@ export default {
       add_form: {},
       table_handle: [
         {
-          label: "工作汇总",
+          label: "工单汇总",
           props: "summary",
         },
         {
@@ -186,20 +207,20 @@ export default {
       ],
       // 列表数据
       table_list: [
-        // {
-        //   number: 1,
-        //   cpmName: "xq",
-        //   person: "mll",
-        //   createTime: 1654563154824,
-        //   status: 0,
-        // },
-        // {
-        //   number: 2,
-        //   cpmName: "xq",
-        //   person: "mll",
-        //   createTime: 1654963568455,
-        //   status: 1,
-        // },
+        {
+          id: 1,
+          companyName: "xq",
+          proposer: "mll",
+          createTime: 1654563154824,
+          status: 0,
+        },
+        {
+          id: 2,
+          companyName: "xq",
+          proposer: "mll",
+          createTime: 1654963568455,
+          status: 1,
+        },
       ],
       table_loading: false,
       //   表格里的操作按钮
@@ -211,16 +232,16 @@ export default {
         {
           label: "处理",
           props: "edit",
-          visible: {
-            status: [0],
-          },
+          // visible: {
+          //   status: [1],
+          // },
         },
       ],
       //  表头配置
       table_config: [
         {
           label: "序号",
-          props: "createId",
+          props: "id",
         },
         {
           label: "公司名称",
@@ -277,32 +298,31 @@ export default {
       ],
     };
   },
-  mounted(){
+  mounted() {
     this.handleInit({
       ...this.table_search,
       page: this.page,
       pageSize: this.rows,
-    })
-    this.handleInit()
+    });
   },
   methods: {
     // 表格数据初始化
-    handleInit(data){
-      this.table_loading = true
+    handleInit(data) {
+      // this.table_loading = true;
       // console.log(data);
       this.$http({
-        url:'/mkWangge/queryPage',
-        method:'post',
-        headers:{
+        url: "/mkWangge/queryPage",
+        method: "post",
+        headers: {
           "Content-Type": "application/json",
         },
-        data:data
-      }).then(({data:{count,data}}) => {
-         this.table_loading = false
-         this.total = count
-         this.table_list = data || []
+        data: data,
+      }).then(({ data: { count, data } }) => {
+        this.table_loading = false;
+        this.total = count;
+        this.table_list = data || [];
         console.log(data);
-      })
+      });
     },
     // 搜索事件
     handleSearch(data) {
@@ -314,29 +334,46 @@ export default {
       switch (props) {
         case "add":
           this.add_visible = !this.add_visible;
-          this.edit_visible = false
+          this.edit_visible = false;
+          this.title = '新建'
+          this.isCheck = false
           break;
         case "summary":
-          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
+          this.summary_visible = !this.summary_visible;
+          break;
+
+        case "edit":
+          this.edit_visible = !this.edit_visible;
+          this.add_visible = !this.add_visible;
+          this.title = '发起人处理'
+          this.isCheck = false
+          break;
+        case "check":
+          this.edit_visible = !this.edit_visible;
+          this.add_visible = !this.add_visible;
+          this.title = '查看'
+          this.isCheck = true
+          break;
       }
     },
     handleaaa(val) {
       console.log(val);
     },
+    //文件返回值
+    uploadBack(v) {
+      console.log(v);
+      this.attList = v;
+    },
     // 查看按钮
     handleCheck(row) {
-      console.log(row, "row");
-      this.handleVisible('check')
+      // console.log(row, "row");
+      this.handleVisible("check");
+      this.add_form = {
+        proposer: row.proposer,
+        telephone: row.telephone,
+        wanggeText: row.wanggeText,
+        desc: row.desc,
+      };
       // this.visible = true;
       // this.edit_visible = false;
       // this.edit_form = row;
@@ -344,15 +381,44 @@ export default {
       // this.add_visible = !this.add_visible
     },
     // 编辑按钮
-    handleEdit() {
-      this.handleVisible('edit')
+    handleEdit(row) {
+      this.handleVisible("edit");
+      this.add_form = {
+        proposer: row.proposer,
+        telephone: row.telephone,
+        wanggeText: row.wanggeText,
+        desc: row.desc,
+        id: row.id,
+      };
+      console.log(this.add_form);
     },
     handleSubmit() {
-      this.edit_visible = false
-      this.add_visible = false
       console.log(this.add_form);
+      // let _this = this;
+      this.$refs.add_ref.validate((valid) => {
+        if (valid) {
+          let reqdata = [this.add_form];
+          this.$http({
+            url: "/mkWangge/saveOrUpdateList",
+            method: "post",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            data: reqdata,
+          }).then((res) => {
+            console.log(res);
+          });
+          this.handleInit({
+            ...this.table_search,
+            page: this.page,
+            pageSize: this.rows,
+          });
+          this.edit_visible = false;
+          this.add_visible = false;
+        }
+      });
     },
-    handleSummary(){},
+    handleSummary() {},
     handleChange(page) {
       this.page = page;
       this.handleInit({
@@ -368,7 +434,6 @@ export default {
 <style lang="scss" scoped>
 .workersList-container {
   background: #ffffff;
-  padding-top: 20px;
   padding: 0 20px;
   margin: 15px;
   overflow: auto;
@@ -388,4 +453,8 @@ export default {
     padding-top: 30px;
   }
 }
+/deep/ .el-row {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 </style>