物资柜模块物资列表状态展示颜色区分，加查询条件

src/views/mes/material/lockers/index.vue

@@ -112,6 +112,60 @@
         </div>
       </div>
       <div class="right">
+        <el-row>
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="100px"
+          >
+            <el-form-item label="物资柜编号" prop="cabinetId">
+              <el-input
+                v-model="queryParams.cabinetId"
+                placeholder="请输入物资柜编号"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="物资柜名称" prop="cabinetName">
+              <el-input
+                v-model="queryParams.cabinetName"
+                placeholder="请输入物资柜名称"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="物资柜状态" prop="status">
+              <el-select v-model="queryParams.status" placeholder="物资柜状态">
+                <el-option
+                  v-for="dict in dict.type.cabinet_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                v-no-more-click
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button
+                v-no-more-click
+                icon="el-icon-refresh"
+                size="mini"
+                @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-row>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button
@@ -122,7 +176,7 @@
               size="mini"
               @click="handleAdd"
               v-hasPermi="['iscs:cabinet:add']"
-            >新增
+              >新增
             </el-button>
           </el-col>
           <right-toolbar
@@ -135,45 +189,39 @@
           :data="CabinetList"
           @selection-change="handleSelectionChange"
         >
-<!--          <el-table-column type="selection" width="55" align="center"/>-->
+          <!--          <el-table-column type="selection" width="55" align="center"/>-->
           <el-table-column label="物资柜编号" align="center" prop="cabinetId">
           </el-table-column>
-          <el-table-column
-            label="物资柜名称"
-            prop="cabinetName"
-          />
-          <el-table-column
-            label="物资柜图片"
-            prop="cabinetPicture"
-          >
+          <el-table-column label="物资柜名称" prop="cabinetName" width="150" />
+          <el-table-column label="物资柜图片" prop="cabinetPicture" width="100">
             <template slot-scope="scope">
-              <div  class="img-box" v-if="scope.row.cabinetPicture">
+              <div class="img-box" v-if="scope.row.cabinetPicture">
                 <el-image
                   style="width: 75px; height: 75px"
                   :preview-teleported="true"
                   class="images"
-                  :hide-on-click-modal=true
+                  :hide-on-click-modal="true"
                   :src="scope.row.cabinetPicture"
                   :zoom-rate="1.2"
                   :preview-src-list="[scope.row.cabinetPicture]"
                   :initial-index="1"
-                  fit="cover" >
+                  fit="cover"
+                >
                 </el-image>
                 <i class="el-icon-zoom-in" id="eyeicon"></i>
               </div>
               <span v-else>-</span>
             </template>
           </el-table-column>
-          <el-table-column
-            label="物资柜状态"
-            align="center"
-            prop="status"
-          >
+          <el-table-column label="物资柜状态" align="center" prop="status">
             <template slot-scope="scope">
-              <dict-tag :options="dict.type.cabinet_status" :value="scope.row.status"/>
+              <dict-tag
+                :options="dict.type.cabinet_status"
+                :value="scope.row.status"
+              />
             </template>
           </el-table-column>
-
+          <el-table-column label="异常原因" prop="cabinetName" width="100" />
           <el-table-column label="物资柜详情" align="center">
             <template slot-scope="scope">
               <el-button
@@ -181,7 +229,7 @@
                 size="mini"
                 type="text"
                 @click="handleLook(scope.row)"
-              >查看
+                >查看
               </el-button>
             </template>
           </el-table-column>
@@ -198,7 +246,7 @@
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['iscs:cabinet:edit']"
-              >编辑
+                >编辑
               </el-button>
               <el-button
                 v-no-more-click
@@ -207,12 +255,12 @@
                 icon="el-icon-delete"
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['iscs:cabinet:remove']"
-              >删除
+                >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
-         <pagination
+        <pagination
           v-show="total > 0"
           :total="total"
           :page.sync="queryParams.current"
@@ -275,7 +323,6 @@
             style="width: 348px"
           />
         </el-form-item>
-
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -284,10 +331,10 @@
           type="primary"
           @click="cancel"
           v-if="optType == 'view'"
-        >返回
+          >返回
         </el-button>
         <el-button v-no-more-click type="primary" @click="submitForm" v-else
-        >确 定
+          >确 定
         </el-button>
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
@@ -301,27 +348,27 @@ import {
   addMaterialsCabinet,
   updateMaterialsCabinet,
   deleteMaterialsCabinet,
-  selectMaterialsCabinetById
-} from '@/api/mes/material/lockers.js'
+  selectMaterialsCabinetById,
+} from "@/api/mes/material/lockers.js";
 
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { genCode } from '@/api/system/autocode/rule'
-import { listMarsDept } from '@/api/system/marsdept'
-import { listLoto } from '@/api/mes/lotoStation/lotoStation'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { genCode } from "@/api/system/autocode/rule";
+import { listMarsDept } from "@/api/system/marsdept";
+import { listLoto } from "@/api/mes/lotoStation/lotoStation";
 
 export default {
-  name: 'Team',
+  name: "Team",
   components: {
-    Treeselect
+    Treeselect,
   },
-  dicts: ['material_status','cabinet_status'],
+  dicts: ["material_status", "cabinet_status"],
   data() {
     return {
       //自动生成编码
       autoGenFlag: false,
       optType: undefined,
-      tabPosition: 'first', //顶部切换
+      tabPosition: "first", //顶部切换
       // 遮罩层
       loading: true,
       // 选中数组
@@ -338,66 +385,75 @@ export default {
       // 班组表格数据
       CabinetList: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
-      createTime: '',
+      createTime: "",
       queryParams: {
         current: 1,
         size: 10,
         workstationName: undefined,
-        workstationId: undefined
+        workstationId: undefined,
+        cabinetId: null,
+        cabinetName: null,
+        status: null,
       },
+      // queryParamsList: {
+      //   current: 1,
+      //   size: 10,
+      //   cabinetId: null,
+      //   cabinetName: null,
+      //   status: null,
+      // },
       imageMap: {
         0: "table_map2", //正常
         1: "table_map1", //使用中
         2: "table_map3", //异常
-
       },
       pickerOptions: {
         shortcuts: [
           {
-            text: '最近一周',
+            text: "最近一周",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', [start, end])
-            }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
           },
           {
-            text: '最近一个月',
+            text: "最近一个月",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              picker.$emit('pick', [start, end])
-            }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
           },
           {
-            text: '最近三个月',
+            text: "最近三个月",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              picker.$emit('pick', [start, end])
-            }
-          }
-        ]
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         cabinetCode: [
-          { required: true, message: '物资柜编码不能为空', trigger: 'blur' }
+          { required: true, message: "物资柜编码不能为空", trigger: "blur" },
         ],
         cabinetName: [
-          { required: true, message: '物资柜名称不能为空', trigger: 'blur' }
+          { required: true, message: "物资柜名称不能为空", trigger: "blur" },
         ],
       },
-      marsOptions: [],//岗位
+      marsOptions: [], //岗位
       TicketListPage: [], //R&R岗位
       COCOTicketListPage: [], //CCO岗位
       scaleFactor: 1, // 缩放比例，初始值为1
@@ -405,310 +461,317 @@ export default {
         left: 500,
         top: 260,
         width: 65,
-        height: 25
+        height: 25,
       },
       deptCCOPosition: {
         left: 670,
         top: 480,
         width: 65,
-        height: 25
+        height: 25,
       },
       workstationOptions: [], //岗位
       defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    }
+        children: "children",
+        label: "label",
+      },
+    };
   },
   computed: {
     deptXLGCenter() {
       return {
         left: this.deptXLGPosition.left + this.deptXLGPosition.width / 2,
-        top: this.deptXLGPosition.top + this.deptXLGPosition.height / 2
-      }
+        top: this.deptXLGPosition.top + this.deptXLGPosition.height / 2,
+      };
     },
     deptCCOCenter() {
       return {
         left: this.deptCCOPosition.left + this.deptCCOPosition.width / 2,
-        top: this.deptCCOPosition.top + this.deptCCOPosition.height / 2
-      }
-    }
+        top: this.deptCCOPosition.top + this.deptCCOPosition.height / 2,
+      };
+    },
   },
   watch: {
-    'queryParams.workstationId': function(newVal, oldVal) {
+    "queryParams.workstationId": function (newVal, oldVal) {
       if (newVal) {
         const data = {
           current: 1,
           size: -1,
-          workstationId: this.queryParams.workstationId
-        }
+          workstationId: this.queryParams.workstationId,
+        };
         getMaterialsCabinet(data).then((response) => {
-          this.CabinetList = response.data.records
-        })
+          this.CabinetList = response.data.records;
+        });
       }
     },
-    tabPosition: function(newVal, oldVal) {
+    tabPosition: function (newVal, oldVal) {
       if (newVal) {
-        this.getList()
+        this.getList();
       }
-    }
+    },
   },
   created() {
-    this.getList()
-    this.getOtherList()
+    this.getList();
+    this.getOtherList();
   },
 
   methods: {
     /** 查询物资柜信息列表 */
     getList() {
-      this.loading = true
+      this.loading = true;
       getMaterialsCabinet(this.queryParams).then((response) => {
-        this.CabinetList = response.data.records
-        console.log(response, '所有物资柜')
-        this.total = response.data.total
-        this.loading = false
-      })
-
+        this.CabinetList = response.data.records;
+        console.log(response, "所有物资柜");
+        this.total = response.data.total;
+        this.loading = false;
+      });
     },
     getOtherList() {
       const data = {
         pasge: 1,
-        size: -1
-      }
+        size: -1,
+      };
       getMaterialsCabinet(data).then((response) => {
-        console.log(response, '所有物资柜')
+        console.log(response, "所有物资柜");
         this.TicketListPage = response.data.records.filter((item) => {
-          return item.workstationId == '6'
-        })
+          return item.workstationId == "6";
+        });
         this.COCOTicketListPage = response.data.records.filter((item) => {
-          return item.workstationId == '7'
-        })
-        this.total = response.data.total
-        this.loading = false
-      })
+          return item.workstationId == "7";
+        });
+        this.total = response.data.total;
+        this.loading = false;
+      });
       listMarsDept(data).then((response) => {
         // 新增岗位单选
-        const data=response.data.records.filter((item) => {return item.parentId=='0'})
-        this.marsOptions = this.handleTree(
-          data,
-          'workstationId',
-          'parentId'
-        )
+        const data = response.data.records.filter((item) => {
+          return item.parentId == "0";
+        });
+        this.marsOptions = this.handleTree(data, "workstationId", "parentId");
         // mars岗位树数据
-        this.workstationOptions = this.transformToTree(data)
+        this.workstationOptions = this.transformToTree(data);
         // 使用递归函数查找匹配的节点
         const selectedTreeNode = this.findNodeById(
           this.workstationOptions,
           this.queryParams.workstationId
-        )
+        );
         // 调用 handleNodeClick 方法
         if (selectedTreeNode) {
-          this.handleNodeClick(selectedTreeNode)
+          this.handleNodeClick(selectedTreeNode);
         } else {
-          console.log('未找到匹配的节点')
+          console.log("未找到匹配的节点");
         }
-      })
+      });
     },
     // mars岗位树点击事件
     handleNodeClick(data) {
-      this.queryParams.workstationId = data.id //这里给查询传递参数
-      this.queryParams.workstationName = data.label //这里给回显框显示中文
+      this.queryParams.workstationId = data.id; //这里给查询传递参数
+      this.queryParams.workstationName = data.label; //这里给回显框显示中文
     },
     /** 转换mars岗位树数据为树形结构 */
     transformToTree(records) {
-      const recordMap = {} // 创建一个 Map 以存储所有记录
-      const tree = [] // 最终返回的树形结构
+      const recordMap = {}; // 创建一个 Map 以存储所有记录
+      const tree = []; // 最终返回的树形结构
 
       // 初始化所有记录到 Map
       records.forEach((record) => {
         recordMap[record.workstationId] = {
           id: record.workstationId,
           label: record.workstationName,
-          children: []
-        }
-      })
+          children: [],
+        };
+      });
 
       // 遍历记录并构建树
       records.forEach((record) => {
-        const parentId = record.parentId
+        const parentId = record.parentId;
 
-        if (parentId === '0') {
+        if (parentId === "0") {
           // 如果是顶层节点，直接添加到树中
-          tree.push(recordMap[record.workstationId])
+          tree.push(recordMap[record.workstationId]);
         } else if (recordMap[parentId]) {
           // 如果有父节点，则将当前节点加入父节点的 children 中
-          recordMap[parentId].children.push(recordMap[record.workstationId])
+          recordMap[parentId].children.push(recordMap[record.workstationId]);
         }
-      })
+      });
 
-      return tree
+      return tree;
     },
     // mars岗位数深层次遍历
     findNodeById(nodes, targetId) {
       for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i]
+        const node = nodes[i];
         if (node.id === targetId) {
-          return node
+          return node;
         }
         if (node.children && node.children.length > 0) {
-          const foundNode = this.findNodeById(node.children, targetId)
+          const foundNode = this.findNodeById(node.children, targetId);
           if (foundNode) {
-            return foundNode
+            return foundNode;
           }
         }
       }
-      return null
+      return null;
     },
     /** 转换mars岗位数据结构 */
     Marsnormalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.workstationId,
         label: node.workstationName,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
     // 筛选节点
     filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
     },
     // 岗位查询 清除事件
     handleClear() {
-      this.queryParams.workstationId = ''
-      this.queryParams.workstationName = ''
-      this.getList()
+      this.queryParams.workstationId = "";
+      this.queryParams.workstationName = "";
+      this.getList();
     },
 
     // 物资柜跳转详情
     handleCabinetClick(cabinet) {
-      this.$router.push({ path:'/mes/material/lockers/DetailsIndex',query:{cabinetId:cabinet.cabinetId,cabinetName:cabinet.cabinetName} })
-      console.log(cabinet, '地图跳转详情拿到的')
+      this.$router.push({
+        path: "/mes/material/lockers/DetailsIndex",
+        query: {
+          cabinetId: cabinet.cabinetId,
+          cabinetName: cabinet.cabinetName,
+        },
+      });
+      console.log(cabinet, "地图跳转详情拿到的");
     },
     // 物资柜列表跳转详情
     handleLook(row) {
-      this.$router.push({ path:'/mes/material/lockers/DetailsIndex',query:{cabinetId:row.cabinetId,cabinetName:row.cabinetName} })
-      console.log('列表详情')
+      this.$router.push({
+        path: "/mes/material/lockers/DetailsIndex",
+        query: { cabinetId: row.cabinetId, cabinetName: row.cabinetName },
+      });
+      console.log("列表详情");
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
       this.form = {
-        cabinetCode: '',
-        cabinetName: '',
-        workstationId: '',
-        remark:'',
-        cabinetPicture: '',
-      }
+        cabinetCode: "",
+        cabinetName: "",
+        workstationId: "",
+        remark: "",
+        cabinetPicture: "",
+      };
 
-      this.resetForm('form')
-      this.autoGenFlag = false
+      this.resetForm("form");
+      this.autoGenFlag = false;
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.current = 1
-      this.getList()
+      this.queryParams.current = 1;
+      this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.createTime = ''
-      this.queryParams.cabinetCode = null
-      this.queryParams.cabinetName = null
-      this.resetForm('queryForm')
+      this.createTime = "";
+      this.queryParams.cabinetCode = null;
+      this.queryParams.cabinetName = null;
+      this.queryParams.cabinetId = null;
+      this.queryParams.status = null;
+      this.resetForm("queryForm");
 
-      this.handleQuery()
+      this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.cabinetId)
-      this.codes = selection.map((item) => item.cabinetCode)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.cabinetId);
+      this.codes = selection.map((item) => item.cabinetCode);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
 
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset()
-      this.open = true
-      this.form.workstationId = null
-      this.title = '新增物资柜信息'
-      this.optType = 'add'
+      this.reset();
+      this.open = true;
+      this.form.workstationId = null;
+      this.title = "新增物资柜信息";
+      this.optType = "add";
     },
 
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset()
+      this.reset();
       selectMaterialsCabinetById(row.cabinetId).then((response) => {
-        this.form = response.data
-        this.open = true
-        this.title = '编辑物资柜信息'
-        this.optType = 'edit'
-      })
+        this.form = response.data;
+        this.open = true;
+        this.title = "编辑物资柜信息";
+        this.optType = "edit";
+      });
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs['form'].validate((valid) => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.cabinetId != null) {
             updateMaterialsCabinet(this.form).then((response) => {
-              console.log(response, '修改返回')
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
+              console.log(response, "修改返回");
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
             addMaterialsCabinet(this.form).then((response) => {
-              console.log(response, '新增返回')
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.getList()
-            })
+              console.log(response, "新增返回");
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const cabinetIds = row.cabinetId || this.ids
-      const cabinetCodes = row.cabinetCode || this.codes
+      const cabinetIds = row.cabinetId || this.ids;
+      const cabinetCodes = row.cabinetCode || this.codes;
       this.$modal
         .confirm('是否确认删除编号为"' + cabinetCodes + '"的数据项？')
-        .then(function() {
-          return deleteMaterialsCabinet(cabinetIds)
+        .then(function () {
+          return deleteMaterialsCabinet(cabinetIds);
         })
         .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
-        })
-        .catch(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
         })
+        .catch(() => {});
     },
     //图标上传成功
     handleIconUplaoded(imgUrl) {
-      this.form.cabinetPicture = imgUrl[0].url
+      this.form.cabinetPicture = imgUrl[0].url;
     },
     // 图标移除
     handleIconRemoved(imgUrl) {
-      this.form.cabinetPicture = null
+      this.form.cabinetPicture = null;
     },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
-        genCode('MATERIALS_CABINET').then((response) => {
-          this.form.cabinetCode = response
-        })
+        genCode("MATERIALS_CABINET").then((response) => {
+          this.form.cabinetCode = response;
+        });
       } else {
-        this.form.cabinetCode = null
+        this.form.cabinetCode = null;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
 </style>
@@ -763,9 +826,9 @@ export default {
     position: absolute;
     top: 40%;
     left: 40%;
-    z-index:100;
+    z-index: 100;
     color: white;
-    pointer-events:none
+    pointer-events: none;
   }
 }
 .el-input-width {