白坯订单管理生产工艺页面优化

src/views/plan/whiteOrder/index.vue

@@ -244,7 +244,28 @@
 
       <el-form ref="form" :model="form" :rules="addrules" label-width="80px">
         <!-- 第一行 -->
-        <el-row>
+        <div class="tagbox">
+          <div class="tagboxlabel">物料名称</div>
+          <div class="tag" style="">
+            <el-tag
+              :key="index"
+              class="tagitem"
+              v-for="(tag,index) in selectMaterielListtag"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)"
+            >
+              {{ tag.productDescZh }}
+            </el-tag>
+          </div>
+          <el-button
+              class="button1"
+              icon="el-icon-search"
+              circle
+              @click="selectMateriel()"
+            ></el-button>
+        </div>
+        <el-row style="display: none;">
 
           <!-- 第一列 -->
           <el-col :offset="1" :span="18">
@@ -529,6 +550,8 @@ export default {
       splitOpen: false,
       // 新增-物料选中list
       selectMaterielList: [],
+      // 新增-物料选中listtag
+      selectMaterielListtag:[],
       // 新增-物料list
       materielList: [],
       // 新增-物料-记录总数
@@ -963,10 +986,23 @@ export default {
         ...this.queryParams
       }, `whiteOrder_${new Date().getTime()}.xlsx`)
     },
+    // 新增—删除标签
+    handleClose(tag) {
+      this.selectMaterielListtag.splice(this.selectMaterielListtag.indexOf(tag.productDescZh), 1);
+      this.form.prodCode =''
+      this.form.prodDesc =''
+      var code = "";
+      var desc = "";
+      for (let i = 0; i < this.selectMaterielListtag.length; i++) {
+        code = code + this.selectMaterielListtag[i].productCode + ",";
+        desc = desc + this.selectMaterielListtag[i].productDescZh + ",";
+      }
+      this.form.prodCode += code;
+      this.form.prodDesc += desc;
+    },
     // 新增-物料选择-确定按钮
     subMateriel() {
       console.log("点击了物料-确定")
-
       if (this.selectMaterielList.length < 1) {
         this.$message({
           message: '至少选择一个物料！',
@@ -974,12 +1010,17 @@ export default {
         })
         return
       }
+      console.log(this.form.prodCode == '')
+      // if(this.form.prodCode == '' ){
+      //    this.selectMaterielListtag = this.selectMaterielList
+      // }
       
       var code = '';
       var desc = '';
       for (let i = 0; i < this.selectMaterielList.length; i++) {
         if(this.form.prodCode.indexOf(this.selectMaterielList[i].productCode)<0){
           code = code + this.selectMaterielList[i].productCode + ',';
+          this.selectMaterielListtag.push(this.selectMaterielList[i])
         }else{
           this.$message({
             message: this.selectMaterielList[i].productDescZh+'已经选择',
@@ -993,6 +1034,7 @@ export default {
       }
       this.form.prodCode += code;
       this.form.prodDesc += desc;
+
       // 关闭选择物料弹窗
       this.innerVisible = false;
     },
@@ -1078,19 +1120,21 @@ export default {
       this.form.planComplete = moment(new Date()).format('YYYY-MM-DD')
       // 打开新增弹窗
       this.dialogVisible = true;
+      this.selectMaterielListtag = []
+      this.reset();
     },
     // 新增-提交按钮
     submitForm() {
-      console.log("点击了提交按钮");
+      console.log("点击了提交按钮",this.form);
       // 校验新增数据是否存在空值
-      if (this.form.prodCode == null) {
+      if (this.form.prodCode == '') {
         this.$message({
           message: '请选择物料！',
           type: 'warning'
         })
         return
       }
-      if (this.form.prodDesc == null) {
+      if (this.form.prodDesc == '') {
         this.$message({
           message: '请选择物料！',
           type: 'warning'
@@ -1174,6 +1218,7 @@ export default {
       this.open = false;
       // 新增-关闭新增弹窗
       this.dialogVisible = false;
+      this.selectMaterielListtag = []
       this.reset();
     },
     // 首-表单重置
@@ -1282,3 +1327,42 @@ export default {
   margin-left: 650px;
 }
 </style>
+<style lang="scss" scoped>
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 80%;
+  padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel{
+    width: 100px;
+    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: 12px;
+  }
+  .tag {
+    width: 82%;
+    border: 1px #DCDFE6 solid;
+    height: 100px;
+    padding: 5px 15px;
+    overflow-y: scroll;
+    .tagitem{
+      margin-left: 5px;
+    }
+  }
+  .button1{
+    width: 37px;
+    height: 37px;
+    position: absolute;
+        right: -39px;
+    top: 2px;
+
+  }
+}
+</style>

src/views/technology/process/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
       <el-form-item label="工序编码" prop="processCode">
         <el-input
           v-model="queryParams.processCode"
@@ -26,8 +33,16 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</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>
 
@@ -40,7 +55,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['mes:pro:process:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -51,7 +67,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['mes:pro:process:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -62,7 +79,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['mes:pro:process:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -72,12 +90,20 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['mes:pro:process: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="processList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="processList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="工序编码" align="center" prop="processCode">
         <template slot-scope="scope">
@@ -85,25 +111,61 @@
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:pro:process:query']"
-          >{{scope.row.processCode}}</el-button>
+            >{{ scope.row.processCode }}</el-button
+          >
         </template>
       </el-table-column>
-      <el-table-column label="工序名称" align="center" prop="processName" :show-overflow-tooltip="true"/>
+      <el-table-column
+        label="工序名称"
+        align="center"
+        prop="processName"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column label="拆分&合并" align="center" prop="splitMerge">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.split_merge" :value="scope.row.splitMerge"/>
+          <dict-tag
+            :options="dict.type.split_merge"
+            :value="scope.row.splitMerge"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="工作中心" align="center" prop="workCenter" :show-overflow-tooltip="true"/>
+      <el-table-column
-      <el-table-column label="线体设备" align="center" prop="equipment" :show-overflow-tooltip="true"/>
+        label="工作中心"
-      <el-table-column label="工作时长" align="center" prop="workTime" :show-overflow-tooltip="true"/>
+        align="center"
+        prop="workCenter"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="线体设备"
+        align="center"
+        prop="equipment"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="工作时长"
+        align="center"
+        prop="workTime"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column label="是否启用" align="center" prop="enableFlag">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag"/>
+          <dict-tag
+            :options="dict.type.sys_yes_no"
+            :value="scope.row.enableFlag"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
+      <el-table-column
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -111,14 +173,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['pro:process:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['pro:process:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -137,29 +201,41 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="工序编码" prop="processCode">
-              <el-input v-model="form.processCode" placeholder="请输入工序编码" />
+              <el-input
+                v-model="form.processCode"
+                placeholder="请输入工序编码"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="工序名称" prop="processName">
-              <el-input v-model="form.processName" placeholder="请输入工序名称" />
+              <el-input
+                v-model="form.processName"
+                placeholder="请输入工序名称"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="是否启用" prop="enableFlag">
-               <el-radio-group v-model="form.enableFlag" disabled v-if="optType=='view'">
+              <el-radio-group
+                v-model="form.enableFlag"
+                disabled
+                v-if="optType == 'view'"
+              >
                 <el-radio
                   v-for="dict in dict.type.sys_yes_no"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
               <el-radio-group v-model="form.enableFlag" v-else>
                 <el-radio
                   v-for="dict in dict.type.sys_yes_no"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -185,11 +261,20 @@
           </el-col>-->
           <el-col :span="8">
             <el-form-item label="工作时间" prop="workTime">
-              <el-input-number :min="0" :step="1" v-model="form.workTime" placeholder="请输入工作时长" />
+              <el-input-number
+                :min="0"
+                :step="1"
+                v-model="form.workTime"
+                placeholder="请输入工作时长"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="工作中心" prop="workCenter" style="width:310px">
+            <el-form-item
+              label="工作中心"
+              prop="workCenter"
+              style="width: 310px"
+            >
               <!-- <el-cascader
                           :show-all-levels="false"
                           :options="factoryOptions"
@@ -200,12 +285,18 @@
                           style="width:400px"
                           ></el-cascader> -->
               <template>
-                      <el-select v-model="form.workCenter" filterable placeholder="请选择" @change="selectWorkCenter" >
+                <el-select
+                  v-model="form.workCenter"
+                  filterable
+                  placeholder="请选择"
+                  @change="selectWorkCenter"
+                >
                   <el-option
                     v-for="item in options1"
                     :key="item.factoryCode"
                     :label="item.factoryName"
-                            :value="item.factoryCode">
+                    :value="item.factoryCode"
+                  >
                   </el-option>
                 </el-select>
               </template>
@@ -215,30 +306,67 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="可多单运行" prop="sync">
-               <el-radio-group v-model="form.sync" disabled v-if="optType=='view'">
+              <el-radio-group
+                v-model="form.sync"
+                disabled
+                v-if="optType == 'view'"
+              >
                 <el-radio
                   v-for="dict in dict.type.sys_yes_no"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
               <el-radio-group v-model="form.sync" v-else>
                 <el-radio
                   v-for="dict in dict.type.sys_yes_no"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
-            <el-col :span="16">
+          <el-col :span="16" style="display: none;">
             <el-form-item label="线体设备" prop="equipment">
               <el-input v-model="form.equipment" placeholder="请选择线体设备">
-                  <el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
+                <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="16">
+            <div class="tagbox">
+              <div class="tagboxlabel">线体设备</div>
+              <div class="tag" style="">
+                <el-tag
+                  :key="index"
+                  class="tagitem"
+                  v-for="(tag, index) in selectMaterielListtag"
+                  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="8">
@@ -267,22 +395,38 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="工序说明" prop="attention">
-              <el-input v-model="form.attention" type="textarea" placeholder="请输入内容" />
+              <el-input
+                v-model="form.attention"
+                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-input
+                v-model="form.remark"
+                type="textarea"
+                placeholder="请输入内容"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
-      <el-divider content-position="center" v-if="form.processId !=null">操作步骤</el-divider>
+      <el-divider content-position="center" v-if="form.processId != null"
-      <Processcontent v-if="form.processId !=null" :optType="optType" :processId="form.processId"></Processcontent>
+        >操作步骤</el-divider
+      >
+      <Processcontent
+        v-if="form.processId != null"
+        :optType="optType"
+        :processId="form.processId"
+      ></Processcontent>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
+        <el-button type="primary" @click="cancel" v-if="optType == 'view'"
+          >返回</el-button
+        >
         <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -291,16 +435,26 @@
 </template>
 
 <script>
-import { listProcess, getProcess, delProcess, addProcess, updateProcess ,listEquipment,getEquipment,listFactory,getWorkCenterList} from "@/api/technology/process";
+import {
+  listProcess,
+  getProcess,
+  delProcess,
+  addProcess,
+  updateProcess,
+  listEquipment,
+  getEquipment,
+  listFactory,
+  getWorkCenterList,
+} from "@/api/technology/process";
 import Processcontent from "./content.vue";
 import ItemSelect from "./single.vue";
-import { Message } from 'element-ui'
+import { Message } from "element-ui";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Process",
-  dicts: ['sys_yes_no','split_merge'],
+  dicts: ["sys_yes_no", "split_merge"],
   components: { Processcontent, ItemSelect },
   data() {
     return {
@@ -343,7 +497,7 @@ export default {
         pageSize: 10,
         processCode: null,
         processName: null,
-        enableFlag: null
+        enableFlag: null,
         // workCenter: null
         // factoryCode: null
       },
@@ -352,7 +506,7 @@ export default {
         equipmentTypeCode: null,
         equipmentName: null,
         equipmentCode: null,
-        equipmentId:'',
+        equipmentId: "",
         processId: null,
         pageNum: 1,
         pageSize: 10,
@@ -362,24 +516,26 @@ export default {
       // 表单校验
       rules: {
         processCode: [
-          { required: true, message: "工序编码不能为空", trigger: "blur" }
+          { required: true, message: "工序编码不能为空", trigger: "blur" },
         ],
         processName: [
-          { required: true, message: "工序名称不能为空", trigger: "blur" }
+          { required: true, message: "工序名称不能为空", trigger: "blur" },
         ],
         enableFlag: [
-          { required: true, message: "是否启用不能为空", trigger: "blur" }
+          { required: true, message: "是否启用不能为空", trigger: "blur" },
         ],
         splitMerge: [
-          { required: true, message: "拆分&合并不能为空", trigger: "blur" }
+          { required: true, message: "拆分&合并不能为空", trigger: "blur" },
         ],
         sync: [
-          { required: true, message: "可多单运行不能为空", trigger: "blur" }
+          { required: true, message: "可多单运行不能为空", trigger: "blur" },
         ],
       },
       fileList: [],
-      equipmentId:'',
+      equipmentId: "",
       options: null,
+      // 新增-物料选中listtag
+      selectMaterielListtag: [],
     };
   },
   created() {
@@ -393,18 +549,22 @@ export default {
     },
 
     activated() {
-    this.useTypeKey +=1
+      this.useTypeKey += 1;
     },
 
     handleEquipmentSelectionChange(val) {
-    this.equipmentList = val
+      this.equipmentList = val;
     },
 
     //中山榄菊日化实业有限公司 A001
     getTreeselect() {
-    listFactory().then(response => {
+      listFactory().then((response) => {
         this.factoryOptions = [];
-      const data = { factoryId: 1, factoryName: '中山榄菊日化实业有限公司', children: [] };
+        const data = {
+          factoryId: 1,
+          factoryName: "中山榄菊日化实业有限公司",
+          children: [],
+        };
         data.children = this.handleTree(response.data, "factoryId", "parentId");
         this.factoryOptions.push(data);
       });
@@ -413,7 +573,7 @@ export default {
     /** 查询物料信息列表 */
     getEquipmentList() {
       this.loading = true;
-		  listEquipment(this.queryEquipmentParams).then(response => {
+      listEquipment(this.queryEquipmentParams).then((response) => {
         this.equipmentList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -452,7 +612,7 @@ export default {
 
     // 多选框选中数据
     handleEquipmentSelectionChange(selection) {
-			this.ids = selection.map(item => item.equipmentId);
+      this.ids = selection.map((item) => item.equipmentId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
@@ -460,7 +620,7 @@ export default {
     /** 查询生产工序列表 */
     getList() {
       this.loading = true;
-      listProcess(this.queryParams).then(response => {
+      listProcess(this.queryParams).then((response) => {
         this.processList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -485,14 +645,14 @@ export default {
         processCode: null,
         processName: null,
         attention: null,
-        enableFlag: 'Y',
+        enableFlag: "Y",
         remark: null,
         createBy: null,
         createTime: null,
         updateBy: null,
         updateTime: null,
-        fileList:'',
+        fileList: "",
-        equipmentTypeName:'',
+        equipmentTypeName: "",
         equipmentId: null,
         equipmentTypeName: null,
         equipmentTypeCode: null,
@@ -520,21 +680,22 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.processId);
+      this.ids = selection.map((item) => item.processId);
-      this.ids1 = selection.map(item => item.processId);
+      this.ids1 = selection.map((item) => item.processId);
-      this.single = selection.length!==1
+      this.single = selection.length !== 1;
-      this.multiple = !selection.length
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      getWorkCenterList().then(response =>{
+      getWorkCenterList().then((response) => {
         this.options1 = response.rows;
         console.log(this.options1);
       });
       this.open = true;
       this.title = "添加生产工序";
       this.optType = "add";
+      this.selectMaterielListtag = [];
     },
     /** 绑定设备操作 */
     handleBoundeEuipment() {
@@ -547,7 +708,7 @@ export default {
     handleView(row) {
       this.reset();
       const processId = row.processId || this.ids;
-      getProcess(processId).then(response => {
+      getProcess(processId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "查看工序信息";
@@ -557,23 +718,29 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const processId = row.processId || this.ids
+      this.selectMaterielListtag = [];
-      getWorkCenterList().then(response =>{
+      const processId = row.processId || this.ids;
+      getWorkCenterList().then((response) => {
         this.options1 = response.rows;
         console.log(this.options1);
       });
-      getProcess(processId).then(response => {
+      getProcess(processId).then((response) => {
         this.form = response.data;
-        // console.log(this.form.workCenter);
+        console.log(this.form);
+        if (this.form.equipment != "") {
+          this.selectMaterielListtag = JSON.parse(
+            JSON.stringify(this.form.equipment.split(","))
+          );
+        }
         // this.form.workCenter = this.form.workCenter.split(',');
         if (response.data.files != null) {
           var newFiles = [];
-          response.data.files.forEach(item =>{
+          response.data.files.forEach((item) => {
             var newfile = {};
             newfile.name = item.fileName;
             newfile.url = item.fileAddress;
             newFiles.push(newfile);
-          })
+          });
           this.form.fileList = newFiles;
         }
         this.open = true;
@@ -587,17 +754,17 @@ export default {
       // console.log('workCENTER',this.form.workCenter);
       // this.work = JSON.stringify(this.form.workCenter);
       // this.form.workCenter = JSON.stringify(this.form.workCenter);
-    // console.log('2',this.form.workCenter);
+      console.log(this.form);
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.processId != null) {
-            updateProcess(this.form).then(response => {
+            updateProcess(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProcess(this.form).then(response => {
+            addProcess(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -610,18 +777,26 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const processIds = row.processId || this.ids;
-      this.$modal.confirm('是否确认删除生产工序？').then(function() {
+      this.$modal
+        .confirm("是否确认删除生产工序？")
+        .then(function () {
           return delProcess(processIds);
-      }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('technology/pro/process/export', {
+      this.download(
-        ...this.queryParams
+        "technology/pro/process/export",
-      }, `process_${new Date().getTime()}.xlsx`)
+        {
+          ...this.queryParams,
+        },
+        `process_${new Date().getTime()}.xlsx`
+      );
     },
     // 对象转成指定字符串分隔
     listToString(list, separator) {
@@ -630,30 +805,49 @@ export default {
       for (let i in list) {
         strs += list[i].url + separator;
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+    // 新增—删除标签
+    handleClose(tag) {
+      this.selectMaterielListtag.splice(
+        this.selectMaterielListtag.indexOf(tag),
+        1
+      );
+      this.form.equipment = "";
+      var code = [];
+      this.selectMaterielListtag.forEach((item) => {
+        if(item){
+          code.push(item)
+        }
+      });
+      console.log(code,this.selectMaterielListtag)
+      this.form.equipment = code.join(',');
     },
-
     //新增 设备选择弹出框
     onItemSelectedEquipment(obj) {
       if (this.form.equipment == null) {
         console.log("equipment是空，if获取的obj", obj);
         console.log("device是空，if获取的equipment", this.form.equipment);
         this.form.equipment = obj;
+        this.selectMaterielListtag = obj.split(",");
       } else {
         if (obj != undefined && obj != null) {
-          const a = obj.split(',');
+          const a = obj.split(",");
-          const len = obj.split(',').length;
+          const len = obj.split(",").length;
-          console.log('切割的数组',obj.split(','));
+          console.log("切割的数组", obj.split(","));
-          a.forEach(item => {
+          a.forEach((item) => {
             this.checkEquipment = this.form.equipment.search(item) != -1;
-            console.log("check的值",this.checkEquipment);
+
             if (this.checkEquipment == true) {
               console.log("重复添加", true);
-              Message.warning('您已经添加过该设备,请勿重复添加！！！');
+
+              Message.warning("您已经添加过该设备,请勿重复添加！！！");
             } else if (this.checkEquipment == false) {
+              this.selectMaterielListtag.push(item);
               this.form.equipment = this.form.equipment + "," + item;
             }
-          })
+            console.log("check的值", this.checkEquipment, item,this.form.equipment);
+          });
         }
       }
     },
@@ -671,3 +865,40 @@ export default {
   // },
 };
 </script>
+<style lang="scss" scoped>
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 100%;
+  // padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel {
+    width: 100px;
+    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: 12px;
+  }
+  .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;
+  }
+}
+</style>

src/views/technology/proroute/routeprodproduct.vue

@@ -1,8 +1,28 @@
 <template>
   <div>
-  <el-input placeholder="请输入内容"  clearable > </el-input>
+    <!-- <el-input placeholder="请输入内容" clearable> </el-input> -->
-  <el-transfer v-model="rightList" :data="leftList" :titles="titles" 
+    <div class="query">
-  :filterable=false
+      <el-input
+        style="width: 351px; margin-bottom: 10px"
+        v-model="leftQueryParams.itemName"
+        placeholder="请输入内容"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        style="width: 351px; margin-bottom: 10px"
+        v-model="rightQueryParams.itemName"
+        placeholder="请输入内容"
+        clearable
+        @keyup.enter.native="handleQuery"
+      />
+    </div>
+
+    <el-transfer
+      v-model="rightList"
+      :data="leftList"
+      :titles="titles"
+      :filterable="true"
       @change="handleChange"
     >
       <!-- 左侧栏分页 -->
@@ -13,7 +33,8 @@
         class="transfer-footer"
         slot="left-footer"
         size="small"
-        >共{{ Ltotal }}条</el-button>
+        >共{{ Ltotal }}条</el-button
+      >
       <el-button
         v-if="leftLength != 0"
         class="transfer-footer"
@@ -21,7 +42,8 @@
         size="small"
         @click="leftPageNumChange"
         :disabled="LPageNum - 1 < 1"
-        >上一页</el-button>
+        >上一页</el-button
+      >
       <el-input
         v-if="leftLength != 0"
         v-model="LPageNum"
@@ -39,7 +61,8 @@
         @click="leftAddPageNumChange"
         v-if="leftLength != 0"
         :disabled="LNextPage > LPages"
-        >下一页</el-button>
+        >下一页</el-button
+      >
 
       <!-- 右侧栏分页 -->
       <el-button
@@ -49,7 +72,8 @@
         class="transfer-footer"
         slot="right-footer"
         size="small"
-        >共{{ Rtotal }}条</el-button>
+        >共{{ Rtotal }}条</el-button
+      >
       <el-button
         v-if="rightLength != 0"
         class="transfer-footer"
@@ -57,7 +81,8 @@
         size="small"
         @click="rightPageNumChange"
         :disabled="RPageNum - 1 < 1"
-        >上一页</el-button>
+        >上一页</el-button
+      >
       <el-input
         v-if="rightLength != 0"
         v-model="RPageNum"
@@ -74,14 +99,21 @@
         @click="rightAddPageNumChange"
         v-if="rightLength != 0"
         :disabled="RNextPage > RPages"
-        >下一页</el-button>
+        >下一页</el-button
-
+      >
     </el-transfer>
   </div>
 </template>
 
 <script>
-import { getListProduct,getRightList ,addProduct , updateProduct, getProduct, delProduct} from "@/api/technology/routeprodproduct";
+import {
+  getListProduct,
+  getRightList,
+  addProduct,
+  updateProduct,
+  getProduct,
+  delProduct,
+} from "@/api/technology/routeprodproduct";
 
 export default {
   name: "Routeprodproduct",
@@ -124,11 +156,13 @@ export default {
       },
       // 表单参数
       form: {},
+      // 分页
+      page: { pageNo: 1, pageSize: 20, total: 0 },
 
       //--------------------->
       leftList: [],
       rightList: [],
-      titles:['未关联产品','已关联产品'],
+      titles: ["未关联产品", "已关联产品"],
       // 左侧分页数据
       Ltotal: "",
       LPageNum: "1",
@@ -137,9 +171,10 @@ export default {
       LPages: null,
       leftLength: null,
       leftQueryParams: {
+        itemName: null,
         routeId: this.routeId,
         pageNum: 1,
-        pageSize: 20
+        pageSize: 20,
       },
       // 右侧分页数据
       Rtotal: "",
@@ -149,26 +184,37 @@ export default {
       rightLength: null,
       RNextPage: null,
       rightQueryParams: {
+        itemName: null,
         routeId: this.routeId,
         pageNum: 1,
-        pageSize: 20
+        pageSize: 20,
       },
     };
   },
   props: {
     routeId: undefined,
-      optType: undefined
+    optType: undefined,
   },
   created() {
     this.getList();
     this.getRightListFun();
   },
   methods: {
+    // // 穿梭框搜索
+    // filterMethod(keyword, row) {
+    //   console.log(keyword, row);
+    //   return row.label.indexOf(keyword) > -1;
+    // },
+    // 查询
+    handleQuery() {
+      this.getList();
+      this.getRightListFun();
+    },
     /** 查询未分配产品列表 */
     getList() {
       this.loading = true;
-      getListProduct(this.leftQueryParams).then(response => {
+      getListProduct(this.leftQueryParams).then((response) => {
-        this.LPages = Math.ceil(response.total/this.LPageSize)
+        this.LPages = Math.ceil(response.total / this.LPageSize);
         this.leftList = response.rows;
         this.Ltotal = response.total;
         this.LPageNum = this.leftQueryParams.pageNum;
@@ -194,16 +240,15 @@ export default {
     /** 查询已分配产品列表 -------------------------------*/
     getRightListFun() {
       this.loading = true;
-      getRightList(this.rightQueryParams).then(response => {
+      getRightList(this.rightQueryParams).then((response) => {
         this.RPages = Math.ceil(response.total / this.RPageSize);
 
         const dataright = [];
         for (let i in response.rows) {
           // 将返回的列表赋值于穿梭框左边列表
-          dataright.push(response.rows[i].key)
+          dataright.push(response.rows[i].key);
         }
         this.rightList = dataright;
-
         this.Rtotal = response.total;
         this.RPageNum = this.rightQueryParams.pageNum;
         this.RNextPage = this.rightQueryParams.pageNum + 1;
@@ -223,7 +268,6 @@ export default {
       this.getRightListFun();
     },
 
-
     // 取消按钮
     cancel() {
       this.open = false;
@@ -246,7 +290,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
     },
 
@@ -254,16 +298,21 @@ export default {
     handleChange(value, direction, movedKeys) {
       if (this.queryParams.routeId != null) {
         this.queryParams.selectedValues = value;
-        addProduct(this.queryParams).then(response => {
+        addProduct(this.queryParams).then((response) => {
           this.$modal.msgSuccess("关联成功");
         });
       }
-    }
+    },
-  }
+  },
 };
 </script>
 <style>
 .el-transfer-panel {
   width: 350px;
-   };
+}
+.query{
+  display: flex;
+  justify-content: space-between;
+  padding-right: 4px;
+}
 </style>

src/views/technology/proroute/routeprodproductnew.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-input
+      class="transfer_input"
+      placeholder="请输入内容"
+      v-model="knowledgeQuery.name"
+      clearable
+      @change="filterKonwledgeFn"
+    >
+    </el-input>
+    <el-transfer
+      v-model="knowledgeIds"
+      :titles="['选择知识点', '已选择知识点']"
+      :button-texts="['移除', '添加']"
+      :data="knowledgeData"
+      @change="handleKnowledgeChange"
+    >
+      <div class="transfer-footer" slot="left-footer">
+        <el-pagination
+          :pager-count="3"
+          @size-change="transferSizeChange"
+          @current-change="transferCurrentChange"
+          :current-page="transferCurrentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="transferPageSize"
+          layout=" sizes, prev, pager, next"
+          :total="transferTotal"
+        >
+        </el-pagination>
+      </div>
+      <div class="transfer-footer" slot="right-footer">
+        <el-pagination
+          :pager-count="3"
+          @size-change="transferSizeChange"
+          @current-change="transferCurrentChange"
+          :current-page="transferCurrentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="transferPageSize"
+          layout=" sizes, prev, pager, next"
+          :total="transferTotal"
+        >
+        </el-pagination>
+      </div>
+    </el-transfer>
+  </div>
+</template>
+
+<script>
+import {
+  getListProduct,
+  getRightList,
+  addProduct,
+  updateProduct,
+  getProduct,
+  delProduct,
+} from "@/api/technology/routeprodproduct";
+
+export default {
+  name: "Routeprodproductnew",
+
+  data() {
+    return {
+      knowledgeQuery: {
+        // 数据传参列表
+        cursor: 1,
+        limit: 10,
+        searchCount: true,
+        name: "",
+      },
+      knowledgeIds: [], // 穿梭框选中项组成的数组
+      knowledgeData: [], // 穿梭框要绑定的数据
+      preKnowledgeData: [], // 上一页的穿梭框数据源
+      transferCurrentPage: 1, //穿梭框分页当前页
+      transferPageSize: 10, //穿梭框分页当前pagesize
+      transferTotal: 0, //分页数据总数
+      leftQueryParams: {
+        routeId: this.routeId,
+        pageNum: 1,
+        pageSize: 20
+       },
+    };
+  },
+  props: {
+    routeId: undefined,
+    optType: undefined,
+  },
+  created() {
+    this.getKnowledges();
+    // this.getRightListFun();
+  },
+  methods: {
+    // 获取目前已选中的穿梭框选像id用于回显
+    getKnowledges() {
+      const _this = this
+      getListProduct(this.leftQueryParams).then(response => {
+        // this.LPages = Math.ceil(response.total/this.LPageSize)
+        // this.leftList = response.rows;
+				// this.Ltotal = response.total;
+        // this.LPageNum = this.leftQueryParams.pageNum;
+        // this.LNextPage = this.leftQueryParams.pageNum+1;
+        // this.loading = false;
+        this.knowledges = response.rows;
+        this.knowledges.forEach((e) => {
+          _this.knowledgeIds.push(e.id);
+        });
+      });
+    },
+    // 获取分页展示的数据
+    getKnowledgesFn() {
+      getKnowledgesByPage(this.knowledgeQuery).then((res) => {
+        // 获取所有的穿梭框展示数据
+        console.log("res章节列表", res);
+        this.transferTotal = res.result.total;
+        this.dialogKnowledgeVisible = true;
+        this.preKnowledgeData = [...this.knowledgeData];
+        // 将数据转成穿梭框要求的格式并去重
+        this.knowledgeData = res.result.records
+          .map((item, index) => {
+            return {
+              key: item.id,
+              label: item.name,
+            };
+          })
+          .filter((item, index, self) => {
+            return self.findIndex((el) => el.key == item.key) === index;
+          });
+        // console.log(' this.knowledgeData', this.knowledgeData)
+        this.getChooseDataFn();
+      });
+    },
+    // pageSize 改变
+    transferSizeChange(size) {
+      this.knowledgeQuery.limit = size;
+      this.getKnowledgesFn();
+    },
+    // currentPage 改变时
+    transferCurrentChange(page) {
+      this.knowledgeQuery.cursor = page;
+      this.transferCurrentPage = page;
+      this.getKnowledgesFn();
+    },
+    // 获取到选中的穿梭数据,将选中的数据添加到分页展示的数据中
+    getChooseDataFn() {
+      this.knowledgeData = this.knowledgeData.filter((item) => {
+        return !this.knowledgeIds.includes(item.key);
+      });
+      // console.log('knowledgeIds_55', this.knowledgeIds)
+      // knowledgeIds 存着选中的选项id
+      const pushArrVal = this.preKnowledgeData.filter((item, index, self) => {
+        return this.knowledgeIds.includes(item.key);
+      });
+      // console.log('pushArrVal', pushArrVal)
+      this.knowledgeData.push(...pushArrVal);
+      // console.log('this.knowledgeData——888', this.knowledgeData) //  获取到了已经选过得数据
+      // console.log(' this.preKnowledgeData', this.preKnowledgeData)
+    },
+    // 穿梭框添加操作
+    handleKnowledgeChange(value, direction, movedKeys) {
+      this.knowledges = [];
+      for (let i = 0; i < value.length; i++) {
+        this.knowledgeIds[i] = value[i];
+        for (let j = 0; j < this.knowledgeData.length; j++) {
+          if (this.knowledgeData[j].key == value[i]) {
+            this.knowledges.push({
+              id: this.knowledgeData[j].key,
+              name: this.knowledgeData[j].label,
+              category: this.knowledgeData[j].category,
+            });
+          }
+        }
+      }
+    },
+    // 穿梭框搜索
+    filterKonwledgeFn(val) {
+      this.transferCurrentPage = 1;
+      this.knowledgeQuery.cursor = 1;
+      this.getKnowledgesFn();
+    },
+  },
+};
+</script>
+<style>
+.el-transfer-panel {
+  width: 350px;
+}
+</style>