From 284ba780b1fab0e90966052614d65137ad121dc6 Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Thu, 19 Oct 2023 16:04:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9tag=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/technology/process/content.vue | 469 ++++++++++++++++------
 src/views/technology/process/index.vue   |   8 +-
 src/views/technology/recipe/content.vue  | 482 ++++++++++++++++-------
 3 files changed, 694 insertions(+), 265 deletions(-)

diff --git a/src/views/technology/process/content.vue b/src/views/technology/process/content.vue
index 1bef5e1..2073368 100644
--- a/src/views/technology/process/content.vue
+++ b/src/views/technology/process/content.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-row v-if="optType !='view'" :gutter="10" class="mb8">
+    <el-row v-if="optType != 'view'" :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -9,7 +9,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['mes:pro:processcontent:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -20,7 +21,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['mes:pro:processcontent:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -31,7 +33,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['mes:pro:processcontent:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -41,19 +44,54 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['mes:pro:processcontent:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="processcontentList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="processcontentList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="顺序编号" align="center" prop="orderNum" />
-      <el-table-column label="步骤说明" width="400px" align="center" prop="contentText" :show-overflow-tooltip="true"/>
-      <el-table-column label="辅助设备" align="center" prop="device" :show-overflow-tooltip="true"/>
-      <el-table-column label="BOM材料" align="center" prop="material" :show-overflow-tooltip="true"/>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
-      <el-table-column label="操作" width="100px" v-if="optType !='view'" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="步骤说明"
+        width="400px"
+        align="center"
+        prop="contentText"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="辅助设备"
+        align="center"
+        prop="device"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="BOM材料"
+        align="center"
+        prop="material"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="操作"
+        width="100px"
+        v-if="optType != 'view'"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -61,20 +99,22 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['mes:pro:processcontent:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['mes:pro:processcontent:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -84,13 +124,17 @@
     <!-- 添加或修改生产工序内容对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-row >
-            <el-col :span="12">
-                <el-form-item label="顺序编号" prop="orderNum">
-                    <el-input-number :min="1" v-model="form.orderNum" placeholder="请输入顺序编号" />
-                </el-form-item>
-            </el-col>
-            <!--
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="顺序编号" prop="orderNum">
+              <el-input-number
+                :min="1"
+                v-model="form.orderNum"
+                placeholder="请输入顺序编号"
+              />
+            </el-form-item>
+          </el-col>
+          <!--
             <el-col :span="12">
                 <el-form-item label="材料URL" prop="docUrl">
                     <el-input v-model="form.docUrl" placeholder="请输入材料URL" />
@@ -98,38 +142,118 @@
             </el-col>-->
         </el-row>
         <el-row>
-            <el-col :span="24">
-                <el-form-item label="辅助设备" prop="device">
-                  <el-input v-model="form.device" placeholder="请选择辅助设备" >
-                        <el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
-                    </el-input>
-                    <ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
-                </el-form-item>
-            </el-col>
+          <el-col :span="24">
+            <!-- <el-form-item label="辅助设备" prop="device">
+              <el-input v-model="form.device" placeholder="请选择辅助设备">
+                <el-button
+                  slot="append"
+                  @click="handleSelectEquipment"
+                  icon="el-icon-search"
+                ></el-button>
+              </el-input>
+              <ItemSelect
+                ref="itemSelect"
+                @onSelected="onItemSelectedEquipment"
+              >
+              </ItemSelect>
+            </el-form-item> -->
+          </el-col>
+          <el-col :span="24">
+            <div class="tagbox">
+              <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+                辅助设备
+              </div>
+              <div class="tag" style="" placeholder="请选择辅助设备">
+                <el-tag
+                  :key="index"
+                  class="tagitem"
+                  v-for="(tag, index) in selectsubsidiaryListtag"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleClose(tag)"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              <el-button
+                slot="append"
+                class="button1"
+                @click="handleSelectEquipment"
+                icon="el-icon-search"
+              ></el-button>
+              <ItemSelect
+                ref="itemSelect"
+                @onSelected="onItemSelectedEquipment"
+              >
+              </ItemSelect>
+            </div>
+          </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="BOM材料" prop="material">
-              <el-input v-model="form.material" placeholder="请选择BOM材料" >
-                <el-button slot="append" @click="handleSelectBom" icon="el-icon-search"></el-button>
+            <!-- <el-form-item label="BOM材料" prop="material">
+              <el-input v-model="form.material" placeholder="请选择BOM材料">
+                <el-button
+                  slot="append"
+                  @click="handleSelectBom"
+                  icon="el-icon-search"
+                ></el-button>
               </el-input>
-              <ItemSelectBom ref="itemSelectBom" @onSelected="onItemSelectedBom" ></ItemSelectBom>
+              <ItemSelectBom
+                ref="itemSelectBom"
+                @onSelected="onItemSelectedBom"
+              ></ItemSelectBom>
+            </el-form-item> -->
+            <div class="tagbox">
+              <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+                BOM材料
+              </div>
+              <div class="tag" style="" placeholder="请选择BOM材料">
+                <el-tag
+                  :key="index"
+                  class="tagitem"
+                  v-for="(tag, index) in selectBOMListtag"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleCloseBOM(tag)"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              <el-button
+                slot="append"
+                class="button1"
+                @click="handleSelectBom"
+                icon="el-icon-search"
+              ></el-button>
+              <ItemSelectBom
+                ref="itemSelectBom"
+                @onSelected="onItemSelectedBom"
+              ></ItemSelectBom>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="步骤说明" prop="contentText">
+              <el-input
+                v-model="form.contentText"
+                type="textarea"
+                placeholder="请输入内容"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-            <el-col :span="24">
-                <el-form-item label="步骤说明" prop="contentText">
-                    <el-input v-model="form.contentText" type="textarea" placeholder="请输入内容" />
-                </el-form-item>
-            </el-col>
-        </el-row>
-        <el-row>
-            <el-col :span="24">
-                <el-form-item label="备注" prop="remark">
-                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-                </el-form-item>
-            </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="form.remark"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -141,14 +265,20 @@
 </template>
 
 <script>
-import { listProcesscontent, getProcesscontent, delProcesscontent, addProcesscontent, updateProcesscontent } from "@/api/technology/processcontent";
-import ItemSelect  from "./single.vue";
-import ItemSelectBom  from "./singleBom.vue";
-import { Message } from 'element-ui'
+import {
+  listProcesscontent,
+  getProcesscontent,
+  delProcesscontent,
+  addProcesscontent,
+  updateProcesscontent,
+} from "@/api/technology/processcontent";
+import ItemSelect from "./single.vue";
+import ItemSelectBom from "./singleBom.vue";
+import { Message } from "element-ui";
 
 export default {
   name: "Processcontent",
-  components: {ItemSelect,ItemSelectBom},
+  components: { ItemSelect, ItemSelectBom },
   data() {
     return {
       // 遮罩层
@@ -170,8 +300,8 @@ export default {
       // 是否显示弹出层
       open: false,
       // 查询参数
-      checkMaterial :null,
-      checkDevice :null,
+      checkMaterial: null,
+      checkDevice: null,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -187,85 +317,121 @@ export default {
       // 表单校验
       rules: {
         processId: [
-          { required: true, message: "工序不能为空", trigger: "blur" }
+          { required: true, message: "工序不能为空", trigger: "blur" },
         ],
-      }
+      },
+      // 新增-辅助设备选中listtag
+      selectsubsidiaryListtag: [],
+      selectBOMListtag: [],
     };
   },
-  props :{
-      processId: undefined,
-      optType: undefined
+  props: {
+    processId: undefined,
+    optType: undefined,
   },
   created() {
     this.getList();
   },
   methods: {
+    // 新增—设备选择
+    handleClose(tag) {
+      this.selectsubsidiaryListtag.splice(
+        this.selectsubsidiaryListtag.indexOf(tag),
+        1
+      );
+      this.form.device = "";
+      var code = [];
+      this.selectsubsidiaryListtag.forEach((item) => {
+        if (item) {
+          code.push(item);
+        }
+      });
+      console.log(code, this.selectsubsidiaryListtag);
+      this.form.device = code.join(",");
+    },
+    // 新增—BOM选择
+    handleCloseBOM(tag) {
+      this.selectBOMListtag.splice(this.selectBOMListtag.indexOf(tag), 1);
+      this.form.material = "";
+      var code = [];
+      this.selectBOMListtag.forEach((item) => {
+        if (item) {
+          code.push(item);
+        }
+      });
+      console.log(code, this.selectBOMListtag);
+      this.form.material = code.join(",");
+    },
     //新增 设备选择弹出框
-    onItemSelectedEquipment(obj){
-      if(this.form.device == null || this.form.device == ""){
-        console.log("device是空，if获取的obj",obj);
-        console.log("device是空，if获取的device",this.form.device);
+    onItemSelectedEquipment(obj) {
+      if (this.form.device == null || this.form.device == "") {
+        console.log("device是空，if获取的obj", obj);
+        console.log("device是空，if获取的device", this.form.device);
         this.form.device = obj;
-      }else{
-        if(obj != undefined && obj != null && obj != "" ){
-          const a = obj.split(',');
-          const len = obj.split(',').length;
-          console.log('切割的数组',obj.split(','));
-          a.forEach(item => {
-            const b = this.form.device.split(',');
+        this.selectsubsidiaryListtag = obj.split(",");
+      } else {
+        if (obj != undefined && obj != null && obj != "") {
+          const a = obj.split(",");
+          const len = obj.split(",").length;
+          console.log("切割的数组", obj.split(","));
+          a.forEach((item) => {
+            const b = this.form.device.split(",");
             const size = b.length;
-            console.log("size",size,b[size-1])
-            const item1 = item+',';
-            console.log("打印item1",item1);
+            console.log("size", size, b[size - 1]);
+            const item1 = item + ",";
+            console.log("打印item1", item1);
             this.checkDevice = this.form.device.search(item1) != -1;
-            console.log("check的值",this.checkDevice);
-            if(this.checkDevice == true || b[size-1] == item){
-              console.log("重复添加",true);
-              Message.warning('您已经添加过该设备,请勿重复添加！！！');
-            }else if(this.checkDevice == false){
-              this.form.device = this.form.device +","+item;
+            console.log("check的值", this.checkDevice);
+            if (this.checkDevice == true || b[size - 1] == item) {
+              console.log("重复添加", true);
+              Message.warning("您已经添加过该设备,请勿重复添加！！！");
+            } else if (this.checkDevice == false) {
+              this.selectsubsidiaryListtag.push(item);
+              this.form.device = this.form.device + "," + item;
             }
-          })
+          });
         }
       }
     },
 
     //新增 BOM选择弹出框
-    onItemSelectedBom(obj){
-      if(this.form.material == null ||this.form.material == ""){
-        console.log("material是空，if获取的obj",obj);
-        console.log("material是空，if获取的material",this.form.material);
+    onItemSelectedBom(obj) {
+      if (this.form.material == null || this.form.material == "") {
+        console.log("material是空，if获取的obj", obj);
+        console.log("material是空，if获取的material", this.form.material);
         this.form.material = obj;
-      }else{
-        if(obj != undefined && obj != null){
-          const a = obj.split(',');
-          const len = obj.split(',').length;
-          console.log('切割的数组',obj.split(','));
-          a.forEach(item => {
+        this.selectBOMListtag = obj.split(",");
+      } else {
+        if (obj != undefined && obj != null) {
+          const a = obj.split(",");
+          const len = obj.split(",").length;
+          console.log("切割的数组", obj.split(","));
+          a.forEach((item) => {
             this.checkMaterial = this.form.material.search(item) != -1;
-            console.log("check的值",this.check);
-            if(this.checkMaterial == true){
-              console.log("重复添加",true);
-              Message.warning('您已经添加过该物料Bom,请勿重复添加！！！');
-            }else if(this.checkMaterial == false){
-              this.form.material = this.form.material +","+item;
+            console.log("check的值", this.check);
+            if (this.checkMaterial == true) {
+              console.log("重复添加", true);
+              Message.warning("您已经添加过该物料Bom,请勿重复添加！！！");
+            } else if (this.checkMaterial == false) {
+              this.selectBOMListtag.push(item);
+              this.form.material = this.form.material + "," + item;
             }
-          })
+          });
         }
       }
     },
     //新增 设备选择弹出框
-    handleSelectEquipment(){
+    handleSelectEquipment() {
       this.$refs.itemSelect.showFlag = true;
     },
     // //新增 设备选择弹出框
-    handleSelectBom(){
+    handleSelectBom() {
       this.$refs.itemSelectBom.showFlag = true;
     },
     /** 查询生产工序内容列表 */
     getList() {
       this.loading = true;
-      listProcesscontent(this.queryParams).then(response => {
+      listProcesscontent(this.queryParams).then((response) => {
         this.processcontentList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -290,7 +456,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.resetForm("form");
     },
@@ -306,22 +472,36 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.contentId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.contentId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加操作步骤";
+      this.selectsubsidiaryListtag = [];
+      this.selectBOMListtag = [];
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const contentId = row.contentId || this.ids
-      getProcesscontent(contentId).then(response => {
+      const contentId = row.contentId || this.ids;
+      this.selectsubsidiaryListtag = [];
+      this.selectBOMListtag = [];
+      getProcesscontent(contentId).then((response) => {
         this.form = response.data;
+        if (this.form.material != "" && this.form.material != null) {
+          this.selectBOMListtag = JSON.parse(
+            JSON.stringify(this.form.material.split(","))
+          );
+        }
+        if (this.form.device != "" && this.form.device != null) {
+          this.selectsubsidiaryListtag = JSON.parse(
+            JSON.stringify(this.form.device.split(","))
+          );
+        }
         this.open = true;
         this.title = "修改操作步骤";
       });
@@ -329,16 +509,16 @@ export default {
     /** 提交按钮 */
     submitForm() {
       // debugger
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.contentId != null) {
-            updateProcesscontent(this.form).then(response => {
+            updateProcesscontent(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProcesscontent(this.form).then(response => {
+            addProcesscontent(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -350,19 +530,70 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const contentIds = row.contentId || this.ids;
-      this.$modal.confirm('是否确认删除操作步骤？').then(function() {
-        return delProcesscontent(contentIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("是否确认删除操作步骤？")
+        .then(function () {
+          return delProcesscontent(contentIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('technology/pro/processcontent/export', {
-        ...this.queryParams
-      }, `processcontent_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "technology/pro/processcontent/export",
+        {
+          ...this.queryParams,
+        },
+        `processcontent_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 100%;
+  // padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel {
+    width: 109px;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: black;
+    line-height: 40px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-right: 15px;
+  }
+  .tag {
+    width: 82%;
+    border: 1px #dcdfe6 solid;
+    height: 70px;
+    padding: 5px 15px;
+    overflow-y: scroll;
+    .tagitem {
+      margin-left: 5px;
+    }
+  }
+  .button1 {
+    width: 57px;
+    height: 35px;
+    margin-left: 10px;
+    background: #f5f7fa;
+  }
+}
+div.tag:empty:before {
+  content: attr(placeholder);
+  color: #bbb;
+}
+</style>
+
diff --git a/src/views/technology/process/index.vue b/src/views/technology/process/index.vue
index 6eb8e2d..425a70b 100644
--- a/src/views/technology/process/index.vue
+++ b/src/views/technology/process/index.vue
@@ -341,8 +341,8 @@
           </el-col>
           <el-col :span="16">
             <div class="tagbox">
-              <div class="tagboxlabel">线体设备</div>
-              <div class="tag" style="">
+              <div class="tagboxlabel" style="font-weight: 600;color: #606266;">线体设备</div>
+              <div class="tag" style="" placeholder="请选择线体设备">
                 <el-tag
                   :key="index"
                   class="tagitem"
@@ -910,4 +910,8 @@ export default {
     background: #F5F7FA;
   }
 }
+div.tag:empty:before {
+  content: attr(placeholder);
+  color: #bbb;
+}
 </style>
diff --git a/src/views/technology/recipe/content.vue b/src/views/technology/recipe/content.vue
index 79d80cd..07cb770 100644
--- a/src/views/technology/recipe/content.vue
+++ b/src/views/technology/recipe/content.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-row v-if="optType !='view'" :gutter="10" class="mb8">
+    <el-row v-if="optType != 'view'" :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -8,8 +8,8 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -19,8 +19,8 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -30,8 +30,8 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -40,45 +40,99 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="recipecontentList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="recipecontentList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="顺序编号" align="center" prop="orderNum" />
-      <el-table-column label="步骤说明" width="300px" align="center" prop="contentText" :show-overflow-tooltip="true"/>
-      <el-table-column label="辅助设备" align="center" prop="device" :show-overflow-tooltip="true"/>
-      <el-table-column label="BOM材料" align="center" prop="material" :show-overflow-tooltip="true"/>
-      <el-table-column label="用量" align="center" prop="dosage" :show-overflow-tooltip="true"/>
-      <el-table-column label="单位" align="center" prop="unit" :show-overflow-tooltip="true"/>
-      <el-table-column label="安全用量" align="center" prop="safeDosage" :show-overflow-tooltip="true"/>
-      <el-table-column label="控制参数" align="center" prop="controlParameters" :show-overflow-tooltip="true"/>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
-      <el-table-column label="操作" width="100px" v-if="optType !='view'" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="步骤说明"
+        width="300px"
+        align="center"
+        prop="contentText"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="辅助设备"
+        align="center"
+        prop="device"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="BOM材料"
+        align="center"
+        prop="material"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="用量"
+        align="center"
+        prop="dosage"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="单位"
+        align="center"
+        prop="unit"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="安全用量"
+        align="center"
+        prop="safeDosage"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="控制参数"
+        align="center"
+        prop="controlParameters"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="操作"
+        width="100px"
+        v-if="optType != 'view'"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -88,13 +142,17 @@
     <!-- 添加或修改生产工序内容对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-row >
-            <el-col :span="12">
-                <el-form-item label="顺序编号" prop="orderNum">
-                    <el-input-number :min="1" v-model="form.orderNum" placeholder="请输入顺序编号" />
-                </el-form-item>
-            </el-col>
-            <!--
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="顺序编号" prop="orderNum">
+              <el-input-number
+                :min="1"
+                v-model="form.orderNum"
+                placeholder="请输入顺序编号"
+              />
+            </el-form-item>
+          </el-col>
+          <!--
             <el-col :span="12">
                 <el-form-item label="材料URL" prop="docUrl">
                     <el-input v-model="form.docUrl" placeholder="请输入材料URL" />
@@ -102,60 +160,130 @@
             </el-col>-->
         </el-row>
         <el-row>
-            <el-col :span="12">
+          <!-- <el-col :span="12">
                 <el-form-item label="辅助设备" prop="device">
                   <el-input v-model="form.device" placeholder="请选择辅助设备" >
                         <el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
                     </el-input>
                     <ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
                 </el-form-item>
-            </el-col>
-            <el-col :span="12">
+            </el-col> -->
+          <el-col :span="24">
+            <div class="tagbox">
+              <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+                辅助设备
+              </div>
+              <div class="tag" style="" placeholder="请选择辅助设备">
+                <el-tag
+                  :key="index"
+                  class="tagitem"
+                  v-for="(tag, index) in selectsubsidiaryListtag"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleClose(tag)"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              <el-button
+                slot="append"
+                class="button1"
+                @click="handleSelectEquipment"
+                icon="el-icon-search"
+              ></el-button>
+              <ItemSelect
+                ref="itemSelect"
+                @onSelected="onItemSelectedEquipment"
+              >
+              </ItemSelect>
+            </div>
+          </el-col>
+          <!-- <el-col :span="12">
                 <el-form-item label="BOM材料" prop="material">
                     <el-input v-model="form.material" placeholder="请选择BOM材料" >
                       <el-button slot="append" @click="handleSelectBom" icon="el-icon-search"></el-button>
                     </el-input>
                     <ItemSelectBom ref="itemSelectBom" @onSelected="onItemSelectedBom" ></ItemSelectBom>
                 </el-form-item>
-            </el-col>
+            </el-col> -->
+          <el-col :span="24">
+            <div class="tagbox">
+              <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+                BOM材料
+              </div>
+              <div class="tag" style="" placeholder="请选择BOM材料">
+                <el-tag
+                  :key="index"
+                  class="tagitem"
+                  v-for="(tag, index) in selectBOMListtag"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleCloseBOM(tag)"
+                >
+                  {{ tag }}
+                </el-tag>
+              </div>
+              <el-button
+                slot="append"
+                class="button1"
+                @click="handleSelectBom"
+                icon="el-icon-search"
+              ></el-button>
+              <ItemSelectBom
+                ref="itemSelectBom"
+                @onSelected="onItemSelectedBom"
+              ></ItemSelectBom>
+            </div>
+          </el-col>
         </el-row>
         <el-row>
-            <el-col :span="12">
-                <el-form-item label="用量" prop="dosage">
-                    <el-input v-model="form.dosage" placeholder="请输入用量" />
-                </el-form-item>
-            </el-col>
-            <el-col :span="12">
-                <el-form-item label="单位" prop="unit">
-                    <el-input v-model="form.unit" placeholder="请输入单位" />
-                </el-form-item>
-            </el-col>
+          <el-col :span="12">
+            <el-form-item label="用量" prop="dosage">
+              <el-input v-model="form.dosage" placeholder="请输入用量" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="单位" prop="unit">
+              <el-input v-model="form.unit" placeholder="请输入单位" />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row>
-            <el-col :span="12">
-                <el-form-item label="控制参数" prop="controlParameters">
-                    <el-input v-model="form.controlParameters" placeholder="请输入控制参数" />
-                </el-form-item>
-            </el-col>
-            <el-col :span="12">
-                <el-form-item label="安全用量" prop="safeDosage">
-                    <el-input v-model="form.safeDosage" placeholder="安全设置" />
-                </el-form-item>
-            </el-col>
+          <el-col :span="12">
+            <el-form-item label="控制参数" prop="controlParameters">
+              <el-input
+                v-model="form.controlParameters"
+                placeholder="请输入控制参数"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="安全用量" prop="safeDosage">
+              <el-input v-model="form.safeDosage" placeholder="安全设置" />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row>
-            <el-col :span="24">
-                <el-form-item label="步骤说明" prop="contentText">
-                    <el-input v-model="form.contentText" type="textarea" placeholder="请输入内容" />
-                </el-form-item>
-            </el-col>
+          <el-col :span="24">
+            <el-form-item label="步骤说明" prop="contentText">
+              <el-input
+                v-model="form.contentText"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row>
-            <el-col :span="24">
-                <el-form-item label="备注" prop="remark">
-                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-                </el-form-item>
-            </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="form.remark"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -167,23 +295,29 @@
 </template>
 
 <script>
-import { listProcesscontent, getProcesscontent, delProcesscontent, addProcesscontent, updateProcesscontent } from "@/api/technology/recipecontent";
-import ItemSelect  from "./single.vue";
-import ItemSelectBom  from "./singleBom.vue";
-import { Message } from 'element-ui'
+import {
+  listProcesscontent,
+  getProcesscontent,
+  delProcesscontent,
+  addProcesscontent,
+  updateProcesscontent,
+} from "@/api/technology/recipecontent";
+import ItemSelect from "./single.vue";
+import ItemSelectBom from "./singleBom.vue";
+import { Message } from "element-ui";
 
 export default {
   name: "Processcontent",
-  components: {ItemSelect,ItemSelectBom},
+  components: { ItemSelect, ItemSelectBom },
   data() {
     return {
-      checkMaterial :null,
-      checkDevice :null,
+      checkMaterial: null,
+      checkDevice: null,
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
-      idsName:[],
+      idsName: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -214,23 +348,26 @@ export default {
       // 表单校验
       rules: {
         recipeId: [
-          { required: true, message: "工序不能为空", trigger: "blur" }
+          { required: true, message: "工序不能为空", trigger: "blur" },
         ],
-      }
+      },
+      // 新增-辅助设备选中listtag
+      selectsubsidiaryListtag: [],
+      selectBOMListtag: [],
     };
   },
-  props :{
-      recipeId: undefined,
-      optType: undefined
+  props: {
+    recipeId: undefined,
+    optType: undefined,
   },
   created() {
     this.getList();
   },
   methods: {
     /** 查询生产工序内容列表 */
-    getList() { 
+    getList() {
       this.loading = true;
-      listProcesscontent(this.queryParams).then(response => {
+      listProcesscontent(this.queryParams).then((response) => {
         this.recipecontentList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -255,7 +392,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.resetForm("form");
     },
@@ -271,9 +408,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.contentId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.contentId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -284,9 +421,21 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const contentId = row.contentId || this.ids
-      getProcesscontent(contentId).then(response => {
+      const contentId = row.contentId || this.ids;
+      this.selectsubsidiaryListtag = [];
+      this.selectBOMListtag = [];
+      getProcesscontent(contentId).then((response) => {
         this.form = response.data;
+        if (this.form.material != "" && this.form.material != null) {
+          this.selectBOMListtag = JSON.parse(
+            JSON.stringify(this.form.material.split(","))
+          );
+        }
+        if (this.form.device != "" && this.form.device != null) {
+          this.selectsubsidiaryListtag = JSON.parse(
+            JSON.stringify(this.form.device.split(","))
+          );
+        }
         this.open = true;
         this.title = "修改操作步骤";
       });
@@ -294,16 +443,16 @@ export default {
     /** 提交按钮 */
     submitForm() {
       // debugger
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.contentId != null) {
-            updateProcesscontent(this.form).then(response => {
+            updateProcesscontent(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProcesscontent(this.form).then(response => {
+            addProcesscontent(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -312,84 +461,125 @@ export default {
         }
       });
     },
+    // 新增—设备选择
+    handleClose(tag) {
+      this.selectsubsidiaryListtag.splice(
+        this.selectsubsidiaryListtag.indexOf(tag),
+        1
+      );
+      this.form.device = "";
+      var code = [];
+      this.selectsubsidiaryListtag.forEach((item) => {
+        if (item) {
+          code.push(item);
+        }
+      });
+      console.log(code, this.selectsubsidiaryListtag);
+      this.form.device = code.join(",");
+    },
+    // 新增—BOM选择
+    handleCloseBOM(tag) {
+      this.selectBOMListtag.splice(this.selectBOMListtag.indexOf(tag), 1);
+      this.form.material = "";
+      var code = [];
+      this.selectBOMListtag.forEach((item) => {
+        if (item) {
+          code.push(item);
+        }
+      });
+      console.log(code, this.selectBOMListtag);
+      this.form.material = code.join(",");
+    },
     //新增 设备选择弹出框
-    onItemSelectedEquipment(obj){
-      if(this.form.device == null || this.form.device == ""){
-        console.log("device是空，if获取的obj",obj);
-        console.log("device是空，if获取的device",this.form.device);
+    onItemSelectedEquipment(obj) {
+      if (this.form.device == null || this.form.device == "") {
+        console.log("device是空，if获取的obj", obj);
+        console.log("device是空，if获取的device", this.form.device);
         this.form.device = obj;
-      }else{
-        if(obj != undefined && obj != null && obj != ""){
-          const a = obj.split(',');
-          console.log('切割的数组',obj.split(','));
-          a.forEach(item => {
-            const b = this.form.device.split(',');
+        this.selectsubsidiaryListtag = obj.split(",");
+      } else {
+        if (obj != undefined && obj != null && obj != "") {
+          const a = obj.split(",");
+          console.log("切割的数组", obj.split(","));
+          a.forEach((item) => {
+            const b = this.form.device.split(",");
             const size = b.length;
-            console.log("size",size,b[size-1])
-            const item1 = item+',';
-            console.log("打印item1",item1);
+            console.log("size", size, b[size - 1]);
+            const item1 = item + ",";
+            console.log("打印item1", item1);
             this.checkDevice = this.form.device.search(item1) != -1;
-            console.log("check的值",this.checkDevice);
-            if(this.checkDevice == true ||b[size-1] == item){
-              console.log("重复添加",true);
-              Message.warning('您已经添加过该设备,请勿重复添加！！！');
-            }else if(this.checkDevice == false){
-              this.form.device = this.form.device +","+item;
+            console.log("check的值", this.checkDevice);
+            if (this.checkDevice == true || b[size - 1] == item) {
+              console.log("重复添加", true);
+              Message.warning("您已经添加过该设备,请勿重复添加！！！");
+            } else if (this.checkDevice == false) {
+              this.selectsubsidiaryListtag.push(item);
+              this.form.device = this.form.device + "," + item;
             }
-          })
+          });
         }
       }
     },
 
-    //新增 设备选择弹出框
-    onItemSelectedBom(obj){
-      if(this.form.material == null || this.form.material == ""){
-        console.log("material是空，if获取的obj",obj);
-        console.log("material是空，if获取的material",this.form.material);
+    //新增 BOM选择弹出框
+    onItemSelectedBom(obj) {
+      if (this.form.material == null || this.form.material == "") {
+        console.log("material是空，if获取的obj", obj);
+        console.log("material是空，if获取的material", this.form.material);
         this.form.material = obj;
-      }else{
-        if(obj != undefined && obj != null && obj !=""){
-          const a = obj.split(',');
-          const len = obj.split(',').length;
-          console.log('切割的数组',obj.split(','));
-          a.forEach(item => {
+        this.selectBOMListtag = obj.split(",");
+      } else {
+        if (obj != undefined && obj != null && obj != "") {
+          const a = obj.split(",");
+          const len = obj.split(",").length;
+          console.log("切割的数组", obj.split(","));
+          a.forEach((item) => {
             this.checkMaterial = this.form.material.search(item) != -1;
-            console.log("check的值",this.check);
-            if(this.checkMaterial == true){
-              console.log("重复添加",true);
-              Message.warning('您已经添加过该物料Bom,请勿重复添加！！！');
-            }else if(this.checkMaterial == false){
-              this.form.material = this.form.material +","+item;
+            console.log("check的值", this.check);
+            if (this.checkMaterial == true) {
+              console.log("重复添加", true);
+              Message.warning("您已经添加过该物料Bom,请勿重复添加！！！");
+            } else if (this.checkMaterial == false) {
+              this.selectBOMListtag.push(item);
+              this.form.material = this.form.material + "," + item;
             }
-          })
+          });
         }
       }
     },
     //新增 设备选择弹出框
-    handleSelectEquipment(){
+    handleSelectEquipment() {
       this.$refs.itemSelect.showFlag = true;
     },
     // 新增 设备选择弹出框
-    handleSelectBom(){
+    handleSelectBom() {
       this.$refs.itemSelectBom.showFlag = true;
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const contentIds = row.contentId || this.ids;
-      this.$modal.confirm('是否确认删除操作步骤？').then(function() {
-        return delProcesscontent(contentIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("是否确认删除操作步骤？")
+        .then(function () {
+          return delProcesscontent(contentIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('technology/pro/recipecontent/export', {
-        ...this.queryParams
-      }, `recipecontent_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "technology/pro/recipecontent/export",
+        {
+          ...this.queryParams,
+        },
+        `recipecontent_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -401,7 +591,7 @@ export default {
   // padding-left: 26px;
   margin-bottom: 15px;
   .tagboxlabel {
-    width: 100px;
+    width: 109px;
     text-align: right;
     vertical-align: middle;
     font-size: 14px;
@@ -409,7 +599,7 @@ export default {
     line-height: 40px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    margin-right: 12px;
+    margin-right: 15px;
   }
   .tag {
     width: 82%;
@@ -425,7 +615,11 @@ export default {
     width: 57px;
     height: 35px;
     margin-left: 10px;
-    background: #F5F7FA;
+    background: #f5f7fa;
   }
 }
+div.tag:empty:before {
+  content: attr(placeholder);
+  color: #bbb;
+}
 </style>
\ No newline at end of file