设备管理完成

src/views/station/equipment.vue

@@ -63,25 +63,34 @@
         align="center"
         prop="deviceId"
       />
-      <el-table-column 
-        label="油站名称" 
-        align="center" 
+      <el-table-column
+        label="油站名称"
+        align="center"
         prop="stationName"
-        v-if="jiBie===3" 
+        v-if="jiBie === 3"
+      />
+      <el-table-column
+        label="设备编号"
+        align="center"
+        prop="deviceNo"
       />
       <el-table-column
         label="设备序列号"
         align="center"
         prop="deviceSerialNum"
       />
+
       <el-table-column label="设备厂家" align="center" prop="deviceFactory" />
+      <el-table-column label="绑定油枪号" align="center" prop="gunNo" />
       <el-table-column
-        label="油站名称id"
-        v-if="false"
+        label="启动状态"
         align="center"
-        prop="stationId"
-      />
-      <el-table-column label="绑定油枪号" align="center" prop="gunNo" />
+        prop="deviceStatus"
+      >
+        <template slot-scope="scope">
+          {{scope.row.deviceStatus == "1" ? "开启":"关闭"}}
+        </template>
+      </el-table-column>
       <el-table-column
         label="操作"
         align="center"
@@ -107,7 +116,7 @@
     </el-table>
 
     <pagination
-      :hidden="total>0? false: true"
+      :hidden="total > 0 ? false : true"
       :total="total"
       :page.sync="queryForm.pageNum"
       :limit.sync="queryForm.pageSize"
@@ -116,13 +125,30 @@
     />
 
     <!-- 添加或修改油站设备管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+      status-icon
+    >
+      <el-form
+        ref="dialogForm"
+        :model="dialogForm"
+        :rules="rules"
+        label-width="100px"
+      >
         <el-form-item label="设备编号" prop="deviceNo">
-          <el-input v-model="dialogForm.deviceNo" placeholder="请输入设备编号" />
+          <el-input
+            v-model="dialogForm.deviceNo"
+            placeholder="请输入设备编号"
+          />
         </el-form-item>
         <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="dialogForm.deviceName" placeholder="请输入设备名称" />
+          <el-input
+            v-model="dialogForm.deviceName"
+            placeholder="请输入设备名称"
+          />
         </el-form-item>
         <el-form-item label="设备序列号" prop="deviceSerialNum">
           <el-input
@@ -130,10 +156,10 @@
             placeholder="请输入设备序列号"
           />
         </el-form-item>
-        <el-form-item label="设备类型">
+        <el-form-item label="设备类型" prop="deviceType">
           <el-select
             v-model="dialogForm.deviceType"
-            placeholder="请选择"
+            placeholder="请选择设备类型"
             clearable
             size="small"
           >
@@ -146,19 +172,24 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="绑定油枪号" prop="gunNo">
-          <el-checkbox-group v-model="checkedGunList">
-            <el-checkbox
-              v-for="item in gunList"
-              :key="item.oilGunId"
-              :label="item.oilGunNo"
-              :value="item.oilGunNo"
-            >
-              {{ item.oilGunNo + "号枪/" + item.oilName }}
-            </el-checkbox>
-          </el-checkbox-group>
+        <el-form-item label="绑定油枪号" prop="checkedGunList" required>
+          <template v-if="allGunList.length === 0">
+            请先在油枪管理里配置油枪
+          </template>
+          <template v-else>
+            <el-checkbox-group v-model="dialogForm.checkedGunList">
+              <el-checkbox
+                v-for="item in allGunList"
+                :key="item.oilGunId"
+                :label="item.oilGunNo"
+                :value="item.oilGunNo"
+              >
+                {{ item.oilGunNo + "号枪/" + item.oilName }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </template>
         </el-form-item>
-        <el-form-item label="设备状态">
+        <el-form-item label="设备状态" prop="deviceStatus">
           <el-select
             v-model="dialogForm.deviceStatus"
             clearable
@@ -174,7 +205,10 @@
           </el-select>
         </el-form-item>
         <el-form-item label="设备厂家" prop="deviceFactory">
-          <el-input v-model="dialogForm.deviceFactory" placeholder="请输入设备厂家" />
+          <el-input
+            v-model="dialogForm.deviceFactory"
+            placeholder="请输入设备厂家"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -199,6 +233,16 @@ import { listGun } from "@/api/station/gun";
 export default {
   name: "equipment",
   data() {
+    let validateGunNo = (rule, value, callback) => {
+      console.log("rule",this.allGunList);
+      if (this.allGunList.length === 0) {
+        callback(new Error("请先配置油枪后再来配置设备"));
+      }
+      if (this.dialogForm.checkedGunList.length === 0) {
+        callback(new Error("请勾选要绑定的油枪"));
+      }
+      callback();
+    };
     return {
       // 非单个禁用
       single: true,
@@ -207,7 +251,7 @@ export default {
       // 油站设备管理表格数据
       equipmentList: [],
       // 油枪复选
-      gunList: [],
+      allGunList: [],
       // 已选的油枪
       checkedGunList: [],
       //设备状态
@@ -227,31 +271,58 @@ export default {
         pageSize: 10, // 初始值只能比10大
         deviceNo: null,
         stationId: this.deptId,
-        deviceType: null,
-        deviceSerialNum: null,
+        deviceType: null, // 设备类型 数据字典里取
+        deviceSerialNum: null, // 设备序列号
+      },
+      // 弹窗表单参数
+      dialogForm: {
+        checkedGunList:[2]
       },
-      // 表单参数
-      dialogForm: {},
       // 表单校验
-      rules: {},
+      rules: {
+        deviceNo: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+        ],
+        deviceName: [
+          { required: true, message: "请输入设备名", trigger: "blur" },
+        ],
+        deviceSerialNum: [
+          { required: true, message: "请输入设备序列号", trigger: "blur" },
+        ],
+        deviceType: [
+          { required: true, message: "请选择设备类型", trigger: "blur" },
+        ],
+        checkedGunList: [
+          { validator: validateGunNo, trigger: 'change' }
+        ],
+        deviceStatus: [
+          { required: true, message: "请选择设备状态", trigger: "blur" },
+        ],
+        deviceFactory: [
+          // { required: true, message: '请输入设备厂家', trigger: 'blur' }
+        ],
+      },
     };
   },
   created() {
     this.getList();
-    //字典设备状态
-    this.getDicts("device_status").then((response) => {
-      this.deviceStatusOptions = response.data;
-    });
-    //字典设备类型
-    this.getDicts("device_type").then((response) => {
-      this.deviceTypeOptions = response.data;
-    });
+    this.init();
   },
   methods: {
-    /** 查询油站设备管理列表 */
+    init() {
+      //字典设备状态
+      this.getDicts("device_status").then((response) => {
+        this.deviceStatusOptions = response.data;
+      });
+      //字典设备类型
+      this.getDicts("device_type").then((response) => {
+        this.deviceTypeOptions = response.data;
+      });
+    },
+    /** 查询油站设备管理列表 首页表单 */
     getList() {
       listManage(this.queryForm).then((response) => {
-        console.log(response)
+        console.log(response);
         this.equipmentList = response.rows;
         this.total = response.total;
       });
@@ -264,14 +335,7 @@ export default {
     // 表单重置
     reset() {
       this.dialogForm = {};
-      this.checkedGunList = [];
-    },
-    deviceStatusFotmat(row, column) {
-      if (row.deviceStatus === "1") {
-        return "在用";
-      } else if (row.deviceStatus === "2") {
-        return "停用";
-      }
+      this.dialogForm.checkedGunList = [];
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -286,12 +350,12 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       if (this.jiBie === 2) {
-        this.open = true;
         this.title = "添加油站设备管理";
+        this.open = true;
         listGun({
-          stationId: this.deptId
+          stationId: this.deptId,
         }).then((response) => {
-          this.gunList = response.rows;
+          this.allGunList = response.rows;
         });
       } else {
         this.msgSuccess("请登录对应的账号");
@@ -299,28 +363,38 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      const deviceId = row.deviceId;
-      getManage(deviceId).then((response) => {
-        this.dialogForm = response.data;
-        if (this.dialogForm.gunNo != null && this.dialogForm.gunNo != "") {
-          this.checkedGunList = this.dialogForm.gunNo.split(",");
-        }
-        listGun({
-          stationId:this.deptId
-        }).then((response) => {
-          this.gunList = response.rows;
-        });
-        this.open = true;
-        this.title = "修改油站设备管理";
+      console.log(row);
+      let checkedGunList
+      if (
+        Object.prototype.toString.call(row.gunNo) ===
+        "[object String]"
+      ) {
+        checkedGunList = [...new Set(row.gunNo.split(","))].filter((ele) => {
+          return ele.toString().trim() !== "";
+        }); 
+        console.log('checkedGunList',checkedGunList);
+      }else{
+        checkedGunList = []
+        console.log('checkedGunList',checkedGunList);
+      }
+      this.dialogForm={...row, checkedGunList}
+      listGun({
+        stationId: this.deptId,
+      }).then((response) => {
+        this.allGunList = response.rows;
       });
+      this.title = "修改油站设备管理";
+      this.open = true;
     },
 
     /** 提交按钮 */
     submitForm() {
       this.$refs["dialogForm"].validate((valid) => {
         if (valid) {
+          this.dialogForm.gunNo = this.dialogForm.checkedGunList.toString()
           if (this.dialogForm.deviceId != null) {
             updateManage(this.dialogForm).then((response) => {
+              console.log(response);
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -351,34 +425,21 @@ export default {
           this.msgSuccess("删除成功");
         });
     },
-    onInstitutionChang(e) {
-      let obj = {};
-      obj = this.stationOptions.find((item) => {
-        //这里的userList就是上面遍历的数据源
-        return item.deptId === e; //筛选出匹配数据
-      });
-      this.dialogForm.stationName = obj.deptName;
-      listGun({
-        stationId:this.deptId
-      }).then((response) => {
-        this.gunList = response.rows;
-      });
-    },
     /** 导出按钮操作 */
-    handleExport() {
-      const queryForm = this.queryForm;
-      this.$confirm("是否确认导出所有油站设备管理数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportManage(queryForm);
-        })
-        .then((response) => {
-          this.download(response.msg);
-        });
-    },
+    // handleExport() {
+    //   const queryForm = this.queryForm;
+    //   this.$confirm("是否确认导出所有油站设备管理数据项?", "警告", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "warning",
+    //   })
+    //     .then(function () {
+    //       return exportManage(queryForm);
+    //     })
+    //     .then((response) => {
+    //       this.download(response.msg);
+    //     });
+    // },
   },
 };
 </script>