From cab099213443488fce5f93d43ea380d4eb3b3da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E9=9D=96?= <2217640373@qq.com>
Date: Fri, 15 Sep 2023 17:37:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BD=E5=9D=AF=E8=AE=A2=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=94=9F=E4=BA=A7=E5=B7=A5=E8=89=BA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/plan/whiteOrder/index.vue           |  96 ++-
 src/views/technology/process/index.vue        | 687 ++++++++++++------
 .../technology/proroute/routeprodproduct.vue  | 267 ++++---
 .../proroute/routeprodproductnew.vue          | 186 +++++
 4 files changed, 893 insertions(+), 343 deletions(-)
 create mode 100644 src/views/technology/proroute/routeprodproductnew.vue

diff --git a/src/views/plan/whiteOrder/index.vue b/src/views/plan/whiteOrder/index.vue
index fb706f6..4cc164f 100644
--- a/src/views/plan/whiteOrder/index.vue
+++ b/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>
diff --git a/src/views/technology/process/index.vue b/src/views/technology/process/index.vue
index 26bde9d..3f32d68 100644
--- a/src/views/technology/process/index.vue
+++ b/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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <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,38 +90,82 @@
           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" >
+      <el-table-column label="工序编码" align="center" prop="processCode">
         <template slot-scope="scope">
           <el-button
             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 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="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 label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        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,20 +173,22 @@
             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>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -132,41 +196,53 @@
     />
 
     <!-- 添加或修改生产工序对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body >
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
+    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <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>
         </el-row>
         <el-row>
           <el-col :span="8">
-            <el-form-item label="拆分&合并"  prop="splitMerge">
+            <el-form-item label="拆分&合并" prop="splitMerge">
               <el-select v-model="form.splitMerge" placeholder="请选择">
                 <el-option
                   v-for="dict in dict.type.split_merge"
@@ -185,12 +261,21 @@
           </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-cascader
+            <el-form-item
+              label="工作中心"
+              prop="workCenter"
+              style="width: 310px"
+            >
+              <!-- <el-cascader
                           :show-all-levels="false"
                           :options="factoryOptions"
                           :props = "{checkStrictly: true , label:'factoryName',value:'factoryId',children:'children' }"
@@ -199,47 +284,90 @@
                           clearable
                           style="width:400px"
                           ></el-cascader> -->
-                    <template>
-                      <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">
-                          </el-option>
-                        </el-select>
-                  </template>
-              </el-form-item>
-            </el-col>
+              <template>
+                <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"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-form-item>
+          </el-col>
         </el-row>
         <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-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-input>
-                <ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <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-input>
+            </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">
             <el-form-item label="参数1温度" prop="param1">
@@ -260,29 +388,45 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="工序SOP" prop="fileList">
-              <FileUpload v-model="form.fileList"/>
+              <FileUpload v-model="form.fileList" />
             </el-form-item>
           </el-col>
         </el-row>
         <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>
-      <Processcontent v-if="form.processId !=null" :optType="optType" :processId="form.processId"></Processcontent>
+      <el-divider content-position="center" v-if="form.processId != null"
+        >操作步骤</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,32 +435,42 @@
 </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 ItemSelect from "./single.vue";
+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'],
-  components: {Processcontent,ItemSelect},
+  dicts: ["sys_yes_no", "split_merge"],
+  components: { Processcontent, ItemSelect },
   data() {
     return {
-    	workCenter:[],
-    	options1: [],
+      workCenter: [],
+      options1: [],
       // workCenter: { multiple: true,checkStrictly: true , label:'factoryName',value:'factoryId',children:'children' },
-      checkEquipment:null,
+      checkEquipment: null,
       //自动生成编码
-      autoGenFlag:false,
+      autoGenFlag: false,
       optType: undefined,
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
       //最底层
-      ids1:[],
+      ids1: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -324,36 +478,36 @@ export default {
       // 显示搜索条件
       showSearch: true,
       // 总条数
-      total:0,
+      total: 0,
       // 生产工序表格数据
-      processList:[],
-      equipmentList:[],
+      processList: [],
+      equipmentList: [],
       // 工厂模型树选项
       factoryOptions: [],
       // 弹出层标题
       title: "",
-      boundTitle:"",
+      boundTitle: "",
       // 是否显示弹出层
       open: false,
-      boundeEuipmentOpen:false,
-      equipmentTypeName : undefined,
+      boundeEuipmentOpen: false,
+      equipmentTypeName: undefined,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         processCode: null,
         processName: null,
-        enableFlag: null
+        enableFlag: null,
         // workCenter: null
         // factoryCode: null
       },
       queryEquipmentParams: {
-        equipmentTypeName :null,
-        equipmentTypeCode:null,
-        equipmentName :null,
-        equipmentCode:null,
-        equipmentId:'',
-        processId:null,
+        equipmentTypeName: null,
+        equipmentTypeCode: null,
+        equipmentName: null,
+        equipmentCode: null,
+        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:'',
+      fileList: [],
+      equipmentId: "",
       options: null,
+      // 新增-物料选中listtag
+      selectMaterielListtag: [],
     };
   },
   created() {
@@ -388,79 +544,83 @@ export default {
     this.getTreeselect();
   },
   methods: {
-   selectWorkCenter(){
-     this.form.workshopCode = this.form.workCenter;
-   },
+    selectWorkCenter() {
+      this.form.workshopCode = this.form.workCenter;
+    },
 
-    activated(){
-    this.useTypeKey +=1
-  },
+    activated() {
+      this.useTypeKey += 1;
+    },
 
-  handleEquipmentSelectionChange (val) {
-    this.equipmentList = val
-  },
+    handleEquipmentSelectionChange(val) {
+      this.equipmentList = val;
+    },
 
-  //中山榄菊日化实业有限公司 A001
-  getTreeselect() {
-    listFactory().then(response => {
-      this.factoryOptions = [];
-      const data = { factoryId: 1, factoryName: '中山榄菊日化实业有限公司', children: [] };
-      data.children = this.handleTree(response.data, "factoryId", "parentId");
-      this.factoryOptions.push(data);
-    });
-  },
+    //中山榄菊日化实业有限公司 A001
+    getTreeselect() {
+      listFactory().then((response) => {
+        this.factoryOptions = [];
+        const data = {
+          factoryId: 1,
+          factoryName: "中山榄菊日化实业有限公司",
+          children: [],
+        };
+        data.children = this.handleTree(response.data, "factoryId", "parentId");
+        this.factoryOptions.push(data);
+      });
+    },
 
     /** 查询物料信息列表 */
-		getEquipmentList() {
-			this.loading = true;
-		  listEquipment(this.queryEquipmentParams).then(response => {
-				this.equipmentList = response.rows;
-				this.total = response.total;
-				this.loading = false;
-			});
-		},
+    getEquipmentList() {
+      this.loading = true;
+      listEquipment(this.queryEquipmentParams).then((response) => {
+        this.equipmentList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
 
-      // 筛选节点
-      // filterNode(value, data) {
-      //   if (!value) return true;
-      //   return data.label.indexOf(value) !== -1;
-      // },
+    // 筛选节点
+    // filterNode(value, data) {
+    //   if (!value) return true;
+    //   return data.label.indexOf(value) !== -1;
+    // },
 
-      // 节点单击事件
-      handleNodeClick(data) {
-        this.queryEquipmentParams.equipmentTypeCode = data.id;
-        this.handleEquipmentTypeQuery();
-      },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryEquipmentParams.equipmentTypeCode = data.id;
+      this.handleEquipmentTypeQuery();
+    },
 
-      /** 搜索按钮操作 */
-      handleEquipmentTypeQuery() {
-        console.log(2);
-        this.getEquipmentList();
+    /** 搜索按钮操作 */
+    handleEquipmentTypeQuery() {
+      console.log(2);
+      this.getEquipmentList();
     },
 
     /** 搜索按钮操作 */
-		handleEquipmentQuery() {
-			this.queryEquipmentParams.pageNum = 1;
-			this.getEquipmentList();
-			console.log(this.form);
-		},
+    handleEquipmentQuery() {
+      this.queryEquipmentParams.pageNum = 1;
+      this.getEquipmentList();
+      console.log(this.form);
+    },
 
     // 生成表头序号
-        indexMethod(index){
-        return index+1 ;
-      },
+    indexMethod(index) {
+      return index + 1;
+    },
 
     // 多选框选中数据
-		handleEquipmentSelectionChange(selection) {
-			this.ids = selection.map(item => item.equipmentId);
-			this.single = selection.length!==1;
-			this.multiple = !selection.length;
-		},
+    handleEquipmentSelectionChange(selection) {
+      this.ids = selection.map((item) => item.equipmentId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
 
     /** 查询生产工序列表 */
     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,20 +645,20 @@ export default {
         processCode: null,
         processName: null,
         attention: null,
-        enableFlag: 'Y',
+        enableFlag: "Y",
         remark: null,
         createBy: null,
         createTime: null,
         updateBy: null,
         updateTime: null,
-        fileList:'',
-        equipmentTypeName:'',
-        equipmentId :null,
-        equipmentTypeName :null,
-        equipmentTypeCode:null,
-        equipmentName :null,
-        equipmentCode:null,
-        equipment:null,
+        fileList: "",
+        equipmentTypeName: "",
+        equipmentId: null,
+        equipmentTypeName: null,
+        equipmentTypeCode: null,
+        equipmentName: null,
+        equipmentCode: null,
+        equipment: null,
       };
       this.autoGenFlag = false;
       this.resetForm("form");
@@ -520,34 +680,35 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.processId);
-      this.ids1 = selection.map(item => item.processId);
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.processId);
+      this.ids1 = selection.map((item) => item.processId);
+      this.single = selection.length !== 1;
+      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() {
+      //this.reset();
+      this.boundeEuipmentOpen = true;
+      this.boundTitle = "绑定设备";
+      this.optType = "bound";
     },
-     /** 绑定设备操作 */
-     handleBoundeEuipment() {
-       //this.reset();
-       this.boundeEuipmentOpen = true;
-       this.boundTitle = "绑定设备";
-       this.optType = "bound";
-     },
     // 查询明细按钮操作
-    handleView(row){
+    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
-      getWorkCenterList().then(response =>{
+      this.selectMaterielListtag = [];
+      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){
+        if (response.data.files != null) {
           var newFiles = [];
-          response.data.files.forEach(item =>{
-              var newfile = {};
-              newfile.name = item.fileName;
-              newfile.url = item.fileAddress;
-              newFiles.push(newfile);
-          })
+          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;
@@ -584,20 +751,20 @@ export default {
 
     /** 提交按钮 */
     submitForm() {
-    // 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);
-      this.$refs["form"].validate(valid => {
+      // console.log('workCENTER',this.form.workCenter);
+      // this.work = JSON.stringify(this.form.workCenter);
+      // this.form.workCenter = JSON.stringify(this.form.workCenter);
+      console.log(this.form);
+      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 => {
+          } else {
+            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() {
-        return delProcess(processIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("是否确认删除生产工序？")
+        .then(function () {
+          return delProcess(processIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('technology/pro/process/export', {
-        ...this.queryParams
-      }, `process_${new Date().getTime()}.xlsx`)
+      this.download(
+        "technology/pro/process/export",
+        {
+          ...this.queryParams,
+        },
+        `process_${new Date().getTime()}.xlsx`
+      );
     },
     // 对象转成指定字符串分隔
     listToString(list, separator) {
@@ -630,44 +805,100 @@ 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);
+    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;
-      }else{
-        if(obj != undefined && obj != null){
-          const a = obj.split(',');
-          const len = obj.split(',').length;
-          console.log('切割的数组',obj.split(','));
-          a.forEach(item => {
+        this.selectMaterielListtag = 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.checkEquipment = this.form.equipment.search(item) != -1;
-            console.log("check的值",this.checkEquipment);
-            if(this.checkEquipment == true){
-              console.log("重复添加",true);
-              Message.warning('您已经添加过该设备,请勿重复添加！！！');
-            }else if(this.checkEquipment == false){
-              this.form.equipment = this.form.equipment +","+item;
+
+            if (this.checkEquipment == true) {
+              console.log("重复添加", true);
+
+              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);
+          });
         }
       }
     },
-     //新增 设备选择弹出框
-     handleSelectEquipment(){
-       this.$refs.itemSelect.showFlag = true;
-     },
+    //新增 设备选择弹出框
+    handleSelectEquipment() {
+      this.$refs.itemSelect.showFlag = true;
+    },
   },
-  		// workCenterList(){
-  		//   console.log(查询workCenterList);
-  		// 	getWorkCenterList().then(data => {
-  		// 		this.options = data;
-  		// 	});
-  		// 	this.form.workCenter = this.options[0].factoryCode;
-  		// },
+  // workCenterList(){
+  //   console.log(查询workCenterList);
+  // 	getWorkCenterList().then(data => {
+  // 		this.options = data;
+  // 	});
+  // 	this.form.workCenter = this.options[0].factoryCode;
+  // },
 };
 </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>
diff --git a/src/views/technology/proroute/routeprodproduct.vue b/src/views/technology/proroute/routeprodproduct.vue
index 1f53a3b..ed8886a 100644
--- a/src/views/technology/proroute/routeprodproduct.vue
+++ b/src/views/technology/proroute/routeprodproduct.vue
@@ -1,87 +1,119 @@
 <template>
   <div>
-  <el-input placeholder="请输入内容"  clearable > </el-input>
-  <el-transfer v-model="rightList" :data="leftList" :titles="titles" 
-  :filterable=false
-  @change="handleChange"
-  >
-   <!-- 左侧栏分页 -->
-        <el-button
-          type="text"
-          style="color:#606266"
-          v-if="leftLength != 0"
-          class="transfer-footer"
-          slot="left-footer"
-          size="small"
-        >共{{ Ltotal }}条</el-button>
-        <el-button
-          v-if="leftLength != 0"
-          class="transfer-footer"
-          slot="left-footer"
-          size="small"
-          @click="leftPageNumChange"
-          :disabled="LPageNum - 1 < 1"
-        >上一页</el-button>
-        <el-input
-          v-if="leftLength != 0"
-          v-model="LPageNum"
-          size="mini"
-          class="transfer-footer"
-          slot="left-footer"
-          :placeholder="LPageNum"
-          style="width: 67px;padding: 1px 3px"
-          disabled
-        ></el-input>
-        <el-button
-          class="transfer-footer"
-          slot="left-footer"
-          size="small"
-          @click="leftAddPageNumChange"
-          v-if="leftLength != 0"
-          :disabled="LNextPage>LPages"
-        >下一页</el-button>
+    <!-- <el-input placeholder="请输入内容" clearable> </el-input> -->
+    <div class="query">
+      <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-button
-          type="text"
-          style="color:#606266"
-          v-if="rightLength != 0"
-          class="transfer-footer"
-          slot="right-footer"
-          size="small"
-        >共{{ Rtotal }}条</el-button>
-        <el-button
-          v-if="rightLength != 0"
-          class="transfer-footer"
-          slot="right-footer"
-          size="small"
-          @click="rightPageNumChange"
-          :disabled="RPageNum - 1 < 1"
-        >上一页</el-button>
-        <el-input
-          v-if="rightLength != 0"
-          v-model="RPageNum"
-          size="mini"
-          class="transfer-footer"
-          slot="right-footer"
-          :placeholder="RPageNum"
-          style="width: 43px"
-        ></el-input>
-        <el-button
-          class="transfer-footer"
-          slot="right-footer"
-          size="small"
-          @click="rightAddPageNumChange"
-          v-if="rightLength != 0"
-          :disabled="RNextPage>RPages"
-        >下一页</el-button>
+    <el-transfer
+      v-model="rightList"
+      :data="leftList"
+      :titles="titles"
+      :filterable="true"
+      @change="handleChange"
+    >
+      <!-- 左侧栏分页 -->
+      <el-button
+        type="text"
+        style="color: #606266"
+        v-if="leftLength != 0"
+        class="transfer-footer"
+        slot="left-footer"
+        size="small"
+        >共{{ Ltotal }}条</el-button
+      >
+      <el-button
+        v-if="leftLength != 0"
+        class="transfer-footer"
+        slot="left-footer"
+        size="small"
+        @click="leftPageNumChange"
+        :disabled="LPageNum - 1 < 1"
+        >上一页</el-button
+      >
+      <el-input
+        v-if="leftLength != 0"
+        v-model="LPageNum"
+        size="mini"
+        class="transfer-footer"
+        slot="left-footer"
+        :placeholder="LPageNum"
+        style="width: 67px; padding: 1px 3px"
+        disabled
+      ></el-input>
+      <el-button
+        class="transfer-footer"
+        slot="left-footer"
+        size="small"
+        @click="leftAddPageNumChange"
+        v-if="leftLength != 0"
+        :disabled="LNextPage > LPages"
+        >下一页</el-button
+      >
 
-  </el-transfer>
+      <!-- 右侧栏分页 -->
+      <el-button
+        type="text"
+        style="color: #606266"
+        v-if="rightLength != 0"
+        class="transfer-footer"
+        slot="right-footer"
+        size="small"
+        >共{{ Rtotal }}条</el-button
+      >
+      <el-button
+        v-if="rightLength != 0"
+        class="transfer-footer"
+        slot="right-footer"
+        size="small"
+        @click="rightPageNumChange"
+        :disabled="RPageNum - 1 < 1"
+        >上一页</el-button
+      >
+      <el-input
+        v-if="rightLength != 0"
+        v-model="RPageNum"
+        size="mini"
+        class="transfer-footer"
+        slot="right-footer"
+        :placeholder="RPageNum"
+        style="width: 43px"
+      ></el-input>
+      <el-button
+        class="transfer-footer"
+        slot="right-footer"
+        size="small"
+        @click="rightAddPageNumChange"
+        v-if="rightLength != 0"
+        :disabled="RNextPage > RPages"
+        >下一页</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,10 +171,11 @@ export default {
       LPages: null,
       leftLength: null,
       leftQueryParams: {
+        itemName: null,
         routeId: this.routeId,
         pageNum: 1,
-        pageSize: 20
-       },
+        pageSize: 20,
+      },
       // 右侧分页数据
       Rtotal: "",
       RPageNum: "1",
@@ -149,42 +184,53 @@ export default {
       rightLength: null,
       RNextPage: null,
       rightQueryParams: {
+        itemName: null,
         routeId: this.routeId,
         pageNum: 1,
-        pageSize: 20
-       },
+        pageSize: 20,
+      },
     };
   },
-  props :{
-      routeId: undefined,
-      optType: undefined
+  props: {
+    routeId: 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 => {
-        this.LPages = Math.ceil(response.total/this.LPageSize)
+      getListProduct(this.leftQueryParams).then((response) => {
+        this.LPages = Math.ceil(response.total / this.LPageSize);
         this.leftList = response.rows;
-				this.Ltotal = response.total;
+        this.Ltotal = response.total;
         this.LPageNum = this.leftQueryParams.pageNum;
-        this.LNextPage = this.leftQueryParams.pageNum+1;
+        this.LNextPage = this.leftQueryParams.pageNum + 1;
         this.loading = false;
       });
     },
     /**左边上一页**/
-    leftPageNumChange(){
-      this.leftQueryParams.pageNum = this.LPageNum-1;
+    leftPageNumChange() {
+      this.leftQueryParams.pageNum = this.LPageNum - 1;
       this.loading = true;
       this.getList();
       this.getRightListFun();
     },
     /**左边下一页**/
-    leftAddPageNumChange(){
+    leftAddPageNumChange() {
       this.leftQueryParams.pageNum = this.LNextPage;
       this.loading = true;
       this.getList();
@@ -194,35 +240,33 @@ export default {
     /** 查询已分配产品列表 -------------------------------*/
     getRightListFun() {
       this.loading = true;
-      getRightList(this.rightQueryParams).then(response => {
-        this.RPages = Math.ceil(response.total/this.RPageSize);
+      getRightList(this.rightQueryParams).then((response) => {
+        this.RPages = Math.ceil(response.total / this.RPageSize);
 
         const dataright = [];
-        for(let i in response.rows){
+        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.Rtotal = response.total;
         this.RPageNum = this.rightQueryParams.pageNum;
-        this.RNextPage = this.rightQueryParams.pageNum+1;
+        this.RNextPage = this.rightQueryParams.pageNum + 1;
         this.loading = false;
       });
     },
     /**右边上一页**/
-    rightPageNumChange(){
-      this.rightQueryParams.pageNum = this.RPageNum-1;
+    rightPageNumChange() {
+      this.rightQueryParams.pageNum = this.RPageNum - 1;
       this.loading = true;
       this.getRightListFun();
     },
     /**右边下一页**/
-    rightAddPageNumChange(){
+    rightAddPageNumChange() {
       this.rightQueryParams.pageNum = this.RNextPage;
       this.loading = true;
       this.getRightListFun();
     },
-     
 
     // 取消按钮
     cancel() {
@@ -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 => {
-            this.$modal.msgSuccess("关联成功");
+        addProduct(this.queryParams).then((response) => {
+          this.$modal.msgSuccess("关联成功");
         });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style>
 .el-transfer-panel {
-    width: 350px;
-   };
+  width: 350px;
+}
+.query{
+  display: flex;
+  justify-content: space-between;
+  padding-right: 4px;
+}
 </style>
diff --git a/src/views/technology/proroute/routeprodproductnew.vue b/src/views/technology/proroute/routeprodproductnew.vue
new file mode 100644
index 0000000..126c61f
--- /dev/null
+++ b/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>