失效按钮 页面项目

src/api/inspection/inspectionroute.js

@@ -58,12 +58,13 @@ export const takeEffect = (ids) => {
   })
 }
 
-export const lapse = (ids) => {
+export const lapse = (ids, reason) => {
   return request({
     url: '/api/inspection/inspectionRoute/lapse',
     method: 'post',
     params: {
       ids,
+      reason,
     }
   })
 }

src/views/inspection/inspectionroute.vue

@@ -56,6 +56,22 @@
         <el-button v-if="permission.inspectionroute_delete" @click="rowDel(row)" type="text">删除</el-button>
       </template>
     </avue-crud>
+    <el-dialog title="失效"
+               append-to-body
+               :visible.sync="cancelBox"
+               width="555px">
+      <avue-form :option="cancelOption" v-model="cancelForm" ref="cancelForm">
+      </avue-form>
+      <div class="container">
+         <span>
+            <el-button type="primary"
+                       size="small"
+                       plain
+                       @click="handleDetailCancel">失效
+            </el-button>
+         </span>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -72,6 +88,7 @@
         search:{},
         query: {},
         loading: true,
+        cancelBox: false,
         page: {
           pageSize: 10,
           currentPage: 1,
@@ -136,6 +153,25 @@
             },
           ]
         },
+        cancelForm: {},
+        cancelOption: {
+          height: 'auto',
+          calcHeight: 210,
+          emptyBtn:false,
+          submitBtn:false,
+          tip: false,
+          border: true,
+          index: false,
+          selection: true,
+          column: [
+            {
+              label: "取消原因",
+              type: "textarea",
+              prop: "cancelReason",
+              span: 24
+            },
+          ]
+        },
         data: []
       };
     },
@@ -197,6 +233,8 @@
             return remove(row.id);
           })
           .then(() => {
+            const cancelReason = this.findObject(this.cancelOption.column, "cancelReason");
+            cancelReason.value = ' ';
             this.onLoad(this.page);
             this.$message({
               type: "success",
@@ -271,21 +309,25 @@
           this.$message.warning("请选择至少一条数据");
           return;
         }
+        this.cancelBox = true;
+      },
+      handleDetailCancel() {
         this.$confirm("是否将选择数据改为失效状态?", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
         })
           .then(() => {
-            return lapse(this.ids);
+            return lapse(this.ids, this.cancelForm.cancelReason);
           })
           .then(() => {
+            this.cancelBox = false;
             this.onLoad(this.page);
             this.$message({
               type: "success",
               message: "操作成功!"
             });
-            this.$refs.crud.toggleSelection();
+            this.$refs.crud.toggleSelection()
           });
       },
       handleExport() {
@@ -350,4 +392,8 @@
   background-color: #3366cc !important;
   color: #FFFFFF !important;
 }
+.container {
+  display: flex;
+  justify-content: flex-end; /* 将子元素推到容器的末端 */
+}
 </style>

src/views/inspection/inspectionrouteDetail.vue

@@ -39,6 +39,7 @@
             {
               label: "路线编号",
               prop: "routeNo",
+              display: true,
               span: 8,
             },
             {
@@ -106,6 +107,7 @@
             {
               label: "取消原因",
               prop: "cancelReason",
+              span: 8,
             },
           ]
         },
@@ -132,9 +134,13 @@
         this.addUpdateShowButton = false;
         this.frame_class = 'frame_class';
       }else{
-        const column = this.findObject(this.option.column, "routeNo");
+        const routeNo = this.findObject(this.option.column, "routeNo");
-        column.value = ' ';
+        routeNo.value = ' ';
-        column.disabled = true;
+        routeNo.disabled = true;
+        const iStatus = this.findObject(this.option.column, "istatus");
+        iStatus.display = false;
+        const cancelReason = this.findObject(this.option.column, "cancelReason");
+        cancelReason.display = false;
         this.readonlyForm = false;
         this.addUpdateShowButton = true;
         this.frame_class = null;