设备绑定辅助设备

src/views/wms/equipment/index.vue

@@ -328,6 +328,7 @@
             <el-step title="设备使用状况"></el-step>
             <el-step title="设备资产信息"></el-step>
             <el-step title="设备绑定备件"></el-step>
+            <el-step title="设备绑定辅助设备"></el-step>
           </el-steps>
         </div>
         <!-- 维修基本信息 -->
@@ -512,24 +513,23 @@
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="设备负责人" prop="equipmentHeadName">
+              <el-form-item label="设备负责人" prop="equipmentHead">
-                <el-select
+          <el-input
-                  v-model="queryParams.equipmentHeadName"
+            v-model="form.equipmentHead"
-                  placeholder="请选择设备负责人"
+            placeholder="请选择设备负责人"
-                  @change="$forceUpdate()"
+          >
-                  filterable
+            <el-button
-                  clearable
+              slot="append"
-                  style="width: 195px"
+              @click="handleSelectPerson"
-                  @keyup.enter.native="handleQuery"
+              icon="el-icon-search"
-                >
+            ></el-button>
-                  <el-option
+          </el-input>
-                    v-for="item in equipmentHeadOption"
+          <ItemSelectPerson
-                    :key="item.userName"
+            ref="itemSelectPerson"
-                    :label="item.teamUserName"
+            @onSelected="onItemSelectedPerson"
-                    :value="item.userName"
+          >
-                  ></el-option>
+          </ItemSelectPerson>
-                </el-select>
+          </el-form-item>
-              </el-form-item>
             </el-col>
           </el-row>
         </div>
@@ -617,7 +617,7 @@
           </el-row>
         </div>
 
-        <!-- 维修基本信息 -->
+        <!-- 设备绑定备件 -->
         <div v-if="this.repairRecordSteps == 3" class="step-body">
           <template>
             <el-transfer
@@ -631,16 +631,32 @@
             </el-transfer>
           </template>
         </div>
+
+        <!-- 设备绑定辅助设备 -->
+        <div v-if="this.repairRecordSteps == 4" class="step-body">
+          <template>
+            <el-transfer
+              filterable
+              filter-placeholder="请输入辅助设备名称"
+              v-model="auxiliaryEquipmentRightList"
+              :titles="['未绑定辅助设备列表', '已绑定辅助设备列表']"
+              :button-texts="['取消', '绑定']"
+              :data="auxiliaryEquipmentLeftList"
+            >
+            </el-transfer>
+          </template>
+        </div>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button v-if="this.repairRecordSteps > 0" @click="stepLast"
           >上一步</el-button
         >
-        <el-button v-if="this.repairRecordSteps < 3" @click="stepNext"
+        <el-button v-if="this.repairRecordSteps < 4" @click="stepNext"
           >下一步</el-button
         >
         <el-button
-          v-if="this.repairRecordSteps == 3"
+          v-if="this.repairRecordSteps == 4"
           type="primary"
           @click="submitForm"
           >提 交</el-button
@@ -719,7 +735,7 @@
                 form.department
               }}</el-descriptions-item>
               <el-descriptions-item label="设备负责人">{{
-                form.equipmentHeadName
+                form.equipmentHead
               }}</el-descriptions-item>
             </el-descriptions>
 
@@ -890,11 +906,12 @@ import { listTeamMembers } from "@/api/wms/team";
 import EquipmentSpareParts from "./single.vue";
 import { Message } from "element-ui";
 import { getToken } from "@/utils/auth";
+import ItemSelectPerson from "./single.vue";
 
 export default {
   name: "Equipment",
   dicts: ["sys_normal_disable", "equ_type", "equipment_status"],
-  components: { EquipmentSpareParts },
+  components: { EquipmentSpareParts ,ItemSelectPerson},
   data() {
     return {
       CS: {
@@ -969,6 +986,9 @@ export default {
       repairRecordSteps: 0,
       leftList: [],
       rightList: [],
+      //辅助设备
+      auxiliaryEquipmentRightList:[],
+      auxiliaryEquipmentLeftList:[],
       bind: undefined,
       imageFileList: [],
       qrFileList: [],
@@ -1108,16 +1128,13 @@ export default {
       this.queryEquipmentHeadParams.pageNum = 1;
       this.queryEquipmentHeadParams.pageSize = 2000;
       listTeamMembers(this.queryHeadParams).then((response) => {
-        console.log(response.rows);
         this.equipmentHeadOption = response.rows;
       });
     },
     /** 查询设备分类 */
     getEquipmentType() {
       getEquipmentTypeList().then((response) => {
-        console.log(response.rows);
         this.equipmentTypeOption = response.rows;
-        console.log(this.treeData1);
       });
     },
     /** 查询设备备件 */
@@ -1147,6 +1164,17 @@ export default {
     getList() {
       this.loading = true;
       listEquipment(this.queryParams).then((response) => {
+        for (let i in response.rows) {
+          // 将返回的列表赋值于穿梭框左边列表
+          this.auxiliaryEquipmentLeftList.push({
+            key: response.rows[i].equipmentCode,
+            label: response.rows[i].equipmentName,
+          });
+        }
+        for (let i in response.selected) {
+          this.auxiliaryEquipmentLeftList.push(response.selected[i].key);
+          this.form.auxiliaryEquipmentRightData = this.auxiliaryEquipmentRightList;
+        }
         this.equipmentList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -1194,6 +1222,7 @@ export default {
         workshopSection: null,
         equipmentLocation: null,
         hourlyUnitPrice: null,
+        equipmentHead : null,
       };
       this.resetForm("form");
     },
@@ -1246,25 +1275,29 @@ export default {
       this.reset();
       getWorkCenterList().then((response) => {
         this.options1 = response.rows;
-        console.log(this.options1);
       });
+      this.repairRecordSteps = 0;
       this.open = true;
       this.title = "添加设备管理";
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const equipmentId = row.equipmentId || this.ids;
       getWorkCenterList().then((response) => {
         this.options1 = response.rows;
-        console.log(this.options1);
       });
       getEquipment(equipmentId).then((response) => {
         this.form = response.data;
         for (let i in response.data.selectedData) {
-          // 将返回的列表赋值于穿梭框右边列表
+          // 将返回的备品备件列表赋值于穿梭框右边列表
           this.rightList.push(response.data.selectedData[i].spareCode);
         }
+        for (let i in response.data.selectedEquipmentData) {
+          // 将返回的辅助设备列表赋值于穿梭框右边列表
+          this.auxiliaryEquipmentRightList.push(response.data.selectedEquipmentData[i].auxiliaryEquipmentCode);
+        }
 
         if (response.data.imageFiles != null) {
           var newFiles = [];
@@ -1275,7 +1308,6 @@ export default {
             newFiles.push(newFile);
           });
           this.form.imageFileList = newFiles;
-          console.log("55555", this.form.imageFileList);
         }
         if (response.data.qrFiles != null) {
           var newFiles = [];
@@ -1298,16 +1330,17 @@ export default {
           this.form.barCodeFileList = newFiles;
         }
         this.form.workCenter = this.form.workshopCode;
+        this.repairRecordSteps = 0;
         this.open = true;
         this.title = "修改设备管理";
       });
     },
+
     // 查询明细按钮操作
     handleView(row) {
       this.reset();
       const equipmentId = row.equipmentId || this.ids;
       getWorkCenterList().then((response) => {
-        console.log(this.options1);
       });
       getEquipment(equipmentId).then((response) => {
         this.form = response.data;
@@ -1341,6 +1374,7 @@ export default {
         this.optType = "view";
       });
     },
+
     /** 提交按钮 */
     submitForm() {
       if (Array.isArray(this.form.qrFileList)) {
@@ -1358,6 +1392,7 @@ export default {
         if (valid) {
           if (this.form.equipmentId != null) {
             this.form.rightData = this.rightList;
+            this.form.auxiliaryEquipmentRightData = this.auxiliaryEquipmentRightList;
             updateEquipment(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -1381,6 +1416,7 @@ export default {
                 "【设备基础信息】设备类型为空，请选择设备类型！"
               );
             } else {
+              this.form.auxiliaryEquipmentRightData = this.auxiliaryEquipmentRightList;
               this.form.rightData = this.rightList;
               addEquipment(this.form).then((response) => {
                 this.$modal.msgSuccess("新增成功");
@@ -1467,6 +1503,17 @@ export default {
       );
     },
 
+    //人员选择
+    handleSelectPerson() {
+      this.$refs.itemSelectPerson.showFlag = true;
+    },
+
+    //人员选择
+    onItemSelectedPerson(obj) {
+      this.$set(this.form,"equipmentHead",obj[0].nickName + "(" + obj[0].userName+")" );
+      console.log(this.form.equipmentHead);
+    },
+
     // 设备状态修改
     handleStatusChange(row) {
       let text = row.status === "1" ? "启用" : "停用";
@@ -1498,4 +1545,8 @@ export default {
 .step-body {
   margin-top: 50px;
 }
+
+.el-transfer-panel {
+  width: 350px;
+}
 </style>

src/views/wms/equipment/single.vue

@@ -1,37 +1,130 @@
 <template>
   <el-dialog
-    title="备品备件绑定"
+    title="人员选择"
     v-if="showFlag"
     :visible.sync="showFlag"
     :modal="false"
-    width="1100px"
+    width="800px"
     center
+    :before-close="cancel"
   >
-      <el-transfer
+    <el-row :gutter="20">
-        filterable
+      <!--人员数据-->
-        filter-placeholder="请输入班组人员名称"
+      <el-col :span="24">
-        v-model="rightList"
+        <el-form
-        :titles="['未绑定备件列表', '已绑定备件列表']"
+          :model="queryParams"
-        :button-texts="['取消绑定', '绑定备件']"
+          ref="queryForm"
-        :data="leftList"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
+          <el-form-item label="人员编码" prop="itemCode">
+            <el-input
+              v-model="queryParams.itemCode"
+              placeholder="请输入人员编码"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="人员名称" prop="itemName">
+            <el-input
+              v-model="queryParams.itemName"
+              placeholder="请输入人员名称"
+              clearable
+              style="width: 150px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
+        <el-table
+          v-loading="loading"
+          :data="itemList"
+          @selection-change="handleSelectionChange"
+          ref="multipleTable"
+        >
+          <el-table-column
+            width="50"
+            align="center"
+            type="selection"
+          ></el-table-column>
+          <!-- 序号 -->
+          <el-table-column
+            type="index"
+            width="90"
+            align="center"
+            :index="indexMethod"
+            label="序号"
+          ></el-table-column>
+          <el-table-column
+            label="人员编码"
+            align="center"
+            key="itemCode"
+            prop="userName"
+            v-if="columns[0].visible"
+          >
+          </el-table-column>
+          <el-table-column
+            label="人员名称"
+            align="left"
+            key="itemName"
+            prop="nickName"
+            v-if="columns[1].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="人员联系方式"
+            align="left"
+            prop="phonenumber"
+            v-if="columns[2].visible"
+            :show-overflow-tooltip="true"
+          />
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm" :disabled="multiple"
+        >确 定</el-button
       >
-      </el-transfer>
+      <el-button @click="cancel">返 回</el-button>
-      <div slot="footer" class="dialog-footer">
+    </div>
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="">取 消</el-button>
-      </div>
   </el-dialog>
 </template>
 
 <script>
-import { getSparePartsList,bindSpareParts } from "@/api/wms/equipment";
+import { getRepairPersonList } from "@/api/device/faultReport";
 import { Message } from "element-ui";
 
 export default {
   name: "MdItemSingle",
   data() {
     return {
+      treeData1: [],
       showFlag: false,
+      // 选中数组
+      selectedItemId: undefined,
+      selectedRows: undefined,
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -40,59 +133,97 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      // 人员表格数据
+      itemList: null,
+      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        itemName: null,
+        itemCodeGet: "",
+        itemCode: null,
+        nickName: null,
+        userName: null,
       },
-      // 表单参数
+      // 列信息
-      form: {},
+      columns: [
-      leftList: [],
+        { key: 0, label: `人员编码`, visible: true },
-      rightList: [],
+        { key: 1, label: `人员名称`, visible: true },
+        { key: 1, label: `联系方式`, visible: true },
+      ],
     };
   },
-
   created() {
     this.getList();
   },
 
   methods: {
-    /** 查询备品备件列表 */
+    // 取消按钮
+    cancel() {
+      this.showFlag = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: null,
+        itemCode: this.processId,
+        itemType: null,
+      };
+      this.resetForm("form");
+    },
+
+    handleSelectionChange(val) {
+      this.itemList = val;
+    },
+
+    // 生成表头序号
+    indexMethod(index) {
+      return index + 1;
+    },
+
+    /** 查询设备编码列表*/
     getList() {
       this.loading = true;
-      getSparePartsList(this.queryParams).then((response) => {
+      this.queryParams.userName = this.queryParams.itemCode;
-        for (let i in response.rows) {
+      this.queryParams.nickName = this.queryParams.itemName;
-          // 将返回的列表赋值于穿梭框左边列表
+      getRepairPersonList(this.queryParams).then((response) => {
-          this.leftList.push({
+        this.itemList = response.rows;
-            key: response.rows[i].materialCode,
+        this.total = response.total;
-            label: response.rows[i].materialDesc,
-          });
-        }
-        for (let i in response.selected) {
-          this.rightList.push(response.selected[i].key);
-          this.form.rightData = this.rightList;
-        }
         this.loading = false;
       });
     },
 
-    /** 提交按钮 */
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.equipmentTypeCode = null;
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.userId);
+      this.userCodes = selection.map((item) => item.userName);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+
     submitForm() {
-            this.form.rightData = this.rightList;
+      if (this.$refs.multipleTable.selection.length > 1) {
-            bindSpareParts(this.form).then((response) => {
+        Message.warning("只能选择一个人员,请勿选择多个！");
-              this.showFlag = false;
+      } else {
-              this.$modal.msgSuccess("绑定成功");
+        this.$emit("onSelected", this.$refs.multipleTable.selection);
-            });
+        this.showFlag = false;
+        this.getList();
+      }
     },
   },
 };
 </script>
-<style>
-.el-transfer-panel {
-  width: 350px;
-}
-.query {
-  display: flex;
-  justify-content: space-between;
-  padding-right: 4px;
-}
-</style>