证照修改

src/views/documentManagement/certificateManagement/components/add-dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 上传 -->
-  <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
+  <el-dialog :title="title" :visible.sync="dialogVisible" @close="close" width="60%">
     <el-form ref="form" :model="form" :rules="rules" label-width="82px">
       <el-row :gutter="15">
         <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
@@ -26,10 +26,29 @@
             <DictSelection v-model="form.status" dictName="规则状态"></DictSelection>
           </el-form-item>
         </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item prop="holderType" label="持证类型">
+            <el-select style="width: 100%" v-model="form.holderType" @change="holderTypeChange">
+              <el-option :label="item.label" :value="item.value" v-for="(item, index) in holderTypeOptions" :key="index">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
         <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
           <el-form-item prop="holder" label="持证人">
-            <el-input v-model="form.holder" clearable readonly placeholder="请选择"
+            <el-input v-if="form.holderType != 2" v-model="form.holder" clearable readonly placeholder="请选择"
               @click.native="openStaffSelection"></el-input>
+              <ele-tree-select
+                v-if="form.holderType == 2"
+                ref="tree"
+                clearable
+                :data="companyData"
+                label-key="name"
+                value-key="id"
+                default-expand-all
+                v-model="form.holder"
+                @change="handleChange"
+              />
           </el-form-item>
         </el-col>
         <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
@@ -60,39 +79,9 @@
       </el-row>
     </el-form>
     <staffSelection ref="staffSelection" @confirm="confirmStaffSelection"></staffSelection>
-    <!-- <headerTitle title="关联产品" v-show="!isUpdate"></headerTitle> -->
-    <!-- <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="form.datasource" class="time-form"
-      :toolkit="[]"> -->
-      <!-- 表头工具栏 -->
-      <!-- <template v-slot:toolbar>
-        <el-button
-              size="small"
-              type="primary"
-              icon="el-icon-plus"
-              class="ele-btn-icon"
-              @click="handParent('', -1)"
-              v-if="!isContractId"
-            >
-              新增
-            </el-button>
-      </template> -->
-      <!-- 操作列 -->
-      <!-- <template v-slot:action="scope">
-        <el-popconfirm v-if="!isContractId" class="ele-action" title="确定要删除吗？" @confirm="remove(scope.$index)">
-          <template v-slot:reference>
-            <el-link type="danger" :underline="false" icon="el-icon-delete">
-              删除
-            </el-link>
-          </template>
-        </el-popconfirm>
-      </template>
-    </ele-pro-table>
-    <product-list
-      ref="productListRef"
-      classType="1"
-      :is-get-inventory-total="true"
-      @changeParent="changeParent"
-    ></product-list> -->
+    <productTable ref="productTableRef" />
+    <supplierSelection ref="supplierSelectionRef" @confirm="confirmStaffSelection" />
+    <customerSelection ref="customerSelectionRef" @confirm="confirmStaffSelection" />
     <div slot="footer" class="dialog-footer">
       <el-button size="small" @click="submit" type="primary">提 交</el-button>
       <el-button size="small" @click="close">关 闭</el-button>
@@ -106,13 +95,19 @@
   import fileUpload from '@/components/upload/fileUpload';
   import imgUpload from '@/components/upload/imgUpload';
   import { getCode } from '@/api/ruleManagement/matter';
-  import productList from './product-list.vue';
+  import productTable from './productTable.vue';
+  import supplierSelection from './supplierSelection.vue';
+  import customerSelection from './customerSelection.vue';
+  import { listOrganizations } from '@/api/system/organization';
+
   export default {
     components: {
       fileUpload,
       imgUpload,
       staffSelection,
-      productList
+      productTable,
+      supplierSelection,
+      customerSelection
     },
     //注册组件
     data() {
@@ -121,7 +116,8 @@
         holder: '',
         holderId: '',
         date: [],
-        fileObj: []
+        fileObj: [],
+        holderType: '1',
       };
       return {
         dialogVisible: false,
@@ -158,52 +154,29 @@
           ],
           fileObj: [
             { required: true, trigger: 'change', message: '请选择证照图片' }
-          ]
+          ],
         },
         form: { ...defaultForm },
         title: '新增',
-        columns: [{
-            width: 45,
-            type: 'index',
-            columnKey: 'index',
-            align: 'center',
-            fixed: 'left'
-          },
-          {
-            prop: 'productName',
-            label: '名称',
-            slot: 'productName',
-            headerSlot: 'headerProductName',
-            align: 'center',
-            fixed: 'left'
-          },
+        holderTypeOptions:[
           {
-            prop: 'productCode',
-            label: '编码',
-            slot: 'productCode',
-            align: 'center'
+            label: '个人',
+            value: '1'
           },
           {
-            prop: 'productCategoryName',
-            label: '类型',
-            slot: 'productCategoryName',
-            align: 'center'
+            label: '企业自身',
+            value: '2'
           },
           {
-            prop: 'specification',
-            label: '规格',
-            slot: 'specification',
-            align: 'center'
+            label: '供应商',
+            value: '3'
           },
           {
-          columnKey: 'action',
-          label: '操作',
-          width: 80,
-          align: 'left',
-          resizable: false,
-          slot: 'action',
-          showOverflowTooltip: true
-        }]
+            label: '客户',
+            value: '4'
+          }
+        ],
+        companyData: [], //公司分类
       };
     },
     computed: {
@@ -212,18 +185,27 @@
         return this.$store.state.theme.styleResponsive;
       }
     },
-    created() {},
+    created() {
+      this.getCompanyData()
+    },
     methods: {
       //选择负责人
       confirmStaffSelection(data) {
         console.log(data);
         this.form.holderId = data.map((item) => item.id).join(',');
+        
         this.form.holder = data.map((item) => item.name).join(',');
         this.$forceUpdate();
         console.log(this.form);
       },
       openStaffSelection() {
-        this.$refs.staffSelection.open([]);
+        if (this.form.holderType == 1) {
+          this.$refs.staffSelection.open([]);
+        } else if (this.form.holderType == 3) {
+          this.$refs.supplierSelectionRef.open([]);
+        } else if (this.form.holderType == 4) {
+          this.$refs.customerSelectionRef.open([]);
+        }
       },
       open(row) {
         this.$refs.form && this.$refs.form.clearValidate();
@@ -247,14 +229,19 @@
         const data = await getPhotoInfo(id);
         this.form = {
           ...data,
-          date: [data.validityStartTime, data.validityEndTime]
+          date: [data.validityStartTime, data.validityEndTime],
+          holderType: data.holderType || '1'
         };
+        
 
+        this.$refs.productTableRef.putTableValue(data.categorys || [])
       },
 
       close() {
         this.dialogVisible = false;
         // this.$refs.form.resetFields()
+        this.form = { ...this.defaultForm };
+        this.$refs.productTableRef.initData()
       },
 
       submit() {
@@ -267,13 +254,13 @@
             this.form.validityStartTime = this.form.date[0];
             this.form.validityEndTime = this.form.date[1];
           }
-          // if (this.form.fileObj.length) {
-          //   this.form.fileObj = this.form.fileObj[0];
-          // }
+         
           const data = {
             ...this.form,
           };
           delete data.date;
+          let productTable = this.$refs.productTableRef.getTableValue();
+          data.categorys = productTable || [];
           saveOrEdit(data)
             .then((msg) => {
               this.loading = false;
@@ -287,9 +274,32 @@
         });
       },
 
-      handParent() {
-        this.$refs.productListRef.open(-1);
+      //切换持证人类型
+      holderTypeChange(e) {
+        if (e === 2) {
+          this.getCompanyData();
+        }
+        this.form.holder = ''
+        this.form.holderId = ''
       },
+
+      //查询公司分类
+      async getCompanyData() {
+        let list = await listOrganizations();
+        list = list.filter((el) => el.type == 20);
+        this.companyData = this.$util.toTreeData({
+          data: list,
+          idField: 'id',
+          parentIdField: 'parentId'
+        });
+      },
+
+      //选择公司分类
+      handleChange(val) {
+        if (!val) return this.form.processTypeName = ''
+        let node = this.$refs.tree.$refs.tree.getCurrentNode()
+        this.form.holderId = node.id;
+      }
     }
   };
 </script>

src/views/documentManagement/certificateManagement/components/customerSelection.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="container">
+    <!-- 单据弹窗 -->
+    <el-dialog
+      title="客户"
+      :before-close="handleClose"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      width="80%"
+    >
+      <el-row class="zw-page">
+        <el-col :span="6" class="zw-page-left">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">客户</span>
+            </div>
+            <div class="zw-page-left-tree">
+              <el-container class="zw-container">
+                <el-tree
+                  ref="tree"
+                  :data="treeList"
+                  highlight-current
+                  node-key="id"
+                  :props="{ label: 'name' }"
+                  :expand-on-click-node="false"
+                  :default-expand-all="true"
+                  @node-click="handleNodeClick"
+                >
+                </el-tree>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-main">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">客户明细 </span>
+            </div>
+            <div class="zw-page-main-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="customerList"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column label="名称">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="代号">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.serialNo }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="{ row }">
+                      <el-button
+                        size="mini"
+                        type="primary"
+                        @click="choiceAsset(row)"
+                        :disabled="row.disabled || selectCustomerlist.length > 0"
+                        icon="el-icon-arrow-right"
+                        circle
+                      >
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div
+                  v-if="customerList.length !== 0 && isMore"
+                  class="zw-page-list-more"
+                >
+                  <el-link @click="getMore()" type="primary"
+                    >更多<i class="el-icon-caret-bottom"></i>
+                  </el-link>
+                </div>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-right">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title">已选客户</span>
+            </div>
+            <div class="zw-page-right-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="selectCustomerlist"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column prop="code" label="姓名">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工号">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.jobNumber }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="scope">
+                      <el-button
+                        @click="deleteSelectCustomer(scope.row, scope.$index)"
+                        size="mini"
+                        type="danger"
+                        >删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleClose">关 闭</el-button>
+        <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import { contactList } from '@/api/material/BOM'
+  import { getTreeByType } from '@/api/classifyManage/index'
+
+  export default {
+    data() {
+      return {
+        form: {
+          groupId: null
+        },
+        treeList: [],
+        customerList: [],
+        selectCustomerlist: [], //已选员工
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+          value: 'code'
+        },
+        pageNum: 1, //设备当前页数
+        size: 10,
+        isMore: false,
+        dialogVisible: false
+      };
+    },
+    created() {},
+    methods: {
+      open(selectedList) {
+        this.dialogVisible = true;
+        this.selectCustomerlist = selectedList;
+        this.getInfo();
+      },
+      //初始数据
+      async getInfo() {
+        let res = await getTreeByType(17);
+        this.treeList = res.data;
+      },
+      //选择分类
+      handleNodeClick(data) {
+        this.customerList = [];
+
+        this.form.groupId = data.id;
+        let params = {
+          pageNum: 1,
+          size: this.size,
+          categoryId: this.form.groupId,
+          type:1
+        };
+        this.getCustomerList(params);
+      },
+      //获取员工列表
+      async getCustomerList(params) {
+        let res = await contactList(params);
+        let list = res.list;
+        if (list.length < res.count) {
+          this.isMore = true;
+        } else {
+          this.isMore = false;
+        }
+        list.forEach((el) => {
+          let _index = this.selectCustomerlist.findIndex((n) => n.id == el.id);
+          if (_index !== -1) {
+            el.disabled = true;
+          } else {
+            el.disabled = false;
+          }
+        });
+        this.customerList = [...this.customerList, ...list];
+        // this.pageNum = res.pageNum;
+      },
+      //查询更多员工
+      async getMore() {
+        this.pageNum = this.pageNum + 1;
+        let params = {
+          pageNum: this.pageNum,
+          size: this.size,
+          groupId: this.form.groupId
+        };
+        this.getCustomerList(params);
+      },
+      //选择员工
+      choiceAsset(info) {
+        let data = JSON.parse(JSON.stringify(info));
+        this.selectCustomerlist.push(data);
+        info.disabled = true;
+      },
+      //删除已选员工
+      deleteSelectCustomer(info, index) {
+        this.customerList.forEach((el) => {
+          if (el.id == info.id) {
+            el.disabled = false;
+          }
+        });
+        this.selectCustomerlist.splice(index, 1);
+      },
+      //保存
+      sumbit() {
+        if (this.selectCustomerlist.length === 0) {
+          this.$message.warning('请选择员工');
+        } else {
+          this.$emit(
+            'confirm',
+            JSON.parse(JSON.stringify(this.selectCustomerlist))
+          );
+          this.handleClose();
+        }
+      },
+      handleClose() {
+        this.customerList = [];
+        this.selectCustomerlist = [];
+        this.dialogVisible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 10px 0;
+  }
+  .zw-container {
+    height: 500px;
+    overflow-y: auto;
+  }
+  .zw-header-title {
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: 600;
+  }
+  .details-title {
+    line-height: 32px;
+    height: 32px;
+  }
+  .zw-page-list-p {
+    font-size: 14px;
+    margin-bottom: 18px;
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+    .zw-page-list-right {
+      display: flex;
+    }
+  }
+  .zw-page {
+    background: #fff;
+    //padding: 20px 0;
+    height: 600px;
+    .zw-page-left {
+      padding: 0 10px;
+    }
+    .zw-page-main {
+      padding: 0 10px;
+      .zw-page-main-list {
+        span {
+          margin-right: 10px;
+        }
+        .zw-page-span-num {
+          font-size: 12px;
+          color: #157a2c;
+        }
+        .zw-page-p-operation {
+          text-align: right;
+          // width: 200px;
+        }
+        .zw-page-operation-num {
+          width: 100px;
+          margin: 0 10px;
+        }
+      }
+      .zw-page-list-more {
+        text-align: center;
+      }
+    }
+    .zw-page-right {
+      .zw-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 32px;
+      }
+      span {
+        margin-right: 10px;
+      }
+      .zw-page-span-num {
+        font-size: 12px;
+        color: #157a2c;
+      }
+    }
+  }
+  .notes {
+    font-size: 12px;
+    color: #909090;
+  }
+</style>

src/views/documentManagement/certificateManagement/components/product-list.vue

@@ -36,7 +36,6 @@
             class="dict-table"
             @cell-click="cellClick"
             :selection.sync="selection"
-            @done="tableDone"
             :initLoad="!isFirstRefreshTable"
           >
             <!-- 表头工具栏 -->
@@ -159,26 +158,18 @@
             showOverflowTooltip: true,
             minWidth: 110
           },
-          {
-            prop: 'componentAttribute',
-            align: 'center',
-            label: '属性类型',
-            showOverflowTooltip: true,
-            formatter: (row, column) => {
-              if(row.produceType){
-                return row.produceType.map(item=>{
-                  return lbjtList[item]
-                }).toString()
-              }
-          
-            },
-            minWidth: 110
-          },
           // {
-          //   prop: 'extField.approvalNumber',
+          //   prop: 'componentAttribute',
           //   align: 'center',
-          //   label: '批准文号',
+          //   label: '属性类型',
           //   showOverflowTooltip: true,
+          //   formatter: (row, column) => {
+          //     if(row.produceType){
+          //       return row.produceType.map(item=>{
+          //         return lbjtList[item]
+          //       }).toString()
+          //     }
+          //   },
           //   minWidth: 110
           // },
           {
@@ -336,7 +327,6 @@
             return this.$message.error('选择的物品已经存在列表了');
           }
         }
-
         let list = this.currentIndex == -1 ? this.selection : [this.current];
         console.log(list,'list')
         this.$emit('changeParent', list, this.currentIndex);

src/views/documentManagement/certificateManagement/components/productTable.vue

@@ -0,0 +1,165 @@
+<template>
+    <div>
+    <headerTitle title="关联产品" ></headerTitle>
+    <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" class="time-form"
+      :toolkit="[]">
+      <!-- 表头工具栏 -->
+      <template v-slot:toolbar>
+        <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-plus"
+              class="ele-btn-icon"
+              @click="handParent('', -1)"
+            >
+              新增
+            </el-button>
+      </template>
+      <!-- 操作列 -->
+      <template v-slot:action="scope">
+        <el-popconfirm v-if="!isContractId" class="ele-action" title="确定要删除吗？" @confirm="remove(scope.$index)">
+          <template v-slot:reference>
+            <el-link type="danger" :underline="false" icon="el-icon-delete">
+              删除
+            </el-link>
+          </template>
+        </el-popconfirm>
+      </template>
+    </ele-pro-table>
+    <product-list
+      ref="productListRef"
+      classType="1"
+      :is-get-inventory-total="true"
+      @changeParent="changeParent"
+      :data="datasource"
+    ></product-list>
+</div>
+</template>
+
+<script>
+  import productList from './product-list.vue';
+
+  export default {
+
+    components:{
+        productList
+    },
+    data() {
+        return {
+            datasource: [],
+            columns: [
+            {
+            width: 50,
+            label: '序号',
+            type: 'index',
+            columnKey: 'index',
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'productCategoryName',
+            label: '类型',
+            slot: 'productCategoryName',
+            align: 'center'
+          },
+          {
+            prop: 'productCode',
+            label: '编码',
+            slot: 'productCode',
+            align: 'center'
+          },
+          {
+            prop: 'productName',
+            label: '名称',
+            slot: 'productName',
+            headerSlot: 'headerProductName',
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            slot: 'specification',
+            align: 'center'
+          },
+          {
+            prop: 'productBrand',
+            label: '牌号',
+            slot: 'productBrand',
+            align: 'center'
+          },
+          {
+            prop: 'modelType',
+            label: '型号',
+            slot: 'modelType',
+            align: 'center'
+          },
+          {
+          columnKey: 'action',
+          label: '操作',
+          width: 80,
+          align: 'left',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }]
+        }
+    },
+    methods:{
+      //选择产品回调
+      changeParent(obj, idx) {
+        obj.forEach((item, index) => {
+          let i = idx == -1 ? index : idx;
+          let row = {};
+          row.key = this.datasource.length + 1;
+          let parasm = idx == -1 ? row : this.datasource[i];
+          this.$set(parasm, 'productId', item.id);
+          this.$set(parasm, 'productCategoryId', item.categoryLevelId);
+          this.$set(parasm, 'productCategoryName', item.categoryLevelPath);
+          this.$set(parasm, 'productCode', item.code);
+          this.$set(parasm, 'productName', item.name);
+          this.$set(parasm, 'specification', item.specification);
+          this.$set(parasm, 'productBrand', item.brandNum);
+          this.$set(parasm, 'modelType', item.modelType);
+          if (idx == -1) {
+            this.datasource.push(row);
+          }
+        });
+      },
+
+      //选择产品
+      handParent() {
+        this.$refs.productListRef.open(-1);
+      },
+      //删除选中产品
+      remove(index) {
+        this.datasource.splice(index, 1);
+        this.setSort();
+      },
+
+      // 重新排序
+      setSort() {
+        this.datasource.forEach((n, index) => {
+          n.key = index + 1;
+        });
+      },
+
+      // 初始化数据
+      initData() {
+        this.datasource = [];
+      },
+
+      // 返回列表数据
+      getTableValue() {
+        let comitDatasource = this.datasource;
+        if (comitDatasource.length === 0) return [];
+        return comitDatasource;
+      },
+
+      //修改回显
+      putTableValue(data) {
+        this.datasource = data;
+      }
+    }
+  }
+</script>

src/views/documentManagement/certificateManagement/components/productTree.vue

@@ -70,10 +70,6 @@
         type: Array,
         default: () => []
       }
-      // appendRoot: {
-      //   type: Boolean,
-      //   default: false
-      // },
     },
     data() {
       return {
@@ -112,9 +108,9 @@
           }
           console.log(data,'data')
           this.treeLoading = false;
-          // this.$emit('setRootId', data[0].id);
+          // this.$emit('setRootId', data.data[0].id);
           this.treeList = this.$util.toTreeData({
-            data: data || [],
+            data: data.data || [],
             idField: 'id',
             parentIdField: 'parentId'
           });
@@ -135,26 +131,6 @@
         }
         this.treeLoading = false;
       },
-      // 递归 - 往树children里面添加parentName
-      // _setParentName (tree) {
-      //   let data = tree;
-      //   for (let i = 0; i < data.length; i++) {
-      //     if (data[i].parentId === '0') {
-      //       this.parentName = data[i].name;
-      //       originId = data[i].id;
-      //       originType = data[i].type;
-      //     }
-
-      //     data[i]['originId'] = originId;
-      //     data[i]['originType'] = originType;
-      //     data[i]['parentId'] = data[i]['parentId'];
-      //     if (data[i].children && data[i].children.length > 0) {
-      //       this._setParentName(data[i].children);
-      //     }
-      //   }
-      //   return data;
-      // },
-
       handleNodeClick(data, node) {
         this.$emit('handleNodeClick', data, node);
       },

src/views/documentManagement/certificateManagement/components/supplierSelection.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="container">
+    <!-- 单据弹窗 -->
+    <el-dialog
+      title="供应商"
+      :before-close="handleClose"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      width="80%"
+    >
+      <el-row class="zw-page">
+        <el-col :span="6" class="zw-page-left">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">供应商</span>
+            </div>
+            <div class="zw-page-left-tree">
+              <el-container class="zw-container">
+                <el-tree
+                  ref="tree"
+                  :data="treeList"
+                  highlight-current
+                  node-key="id"
+                  :props="{ label: 'name' }"
+                  :expand-on-click-node="false"
+                  :default-expand-all="true"
+                  @node-click="handleNodeClick"
+                >
+                </el-tree>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-main">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title details-title">供应商明细 </span>
+            </div>
+            <div class="zw-page-main-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="supplierList"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column label="名称">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="编码">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.code }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="{ row }">
+                      <el-button
+                        size="mini"
+                        type="primary"
+                        @click="choiceAsset(row)"
+                        :disabled="row.disabled || selectSupplierlist.length > 0"
+                        icon="el-icon-arrow-right"
+                        circle
+                      >
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div
+                  v-if="supplierList.length !== 0 && isMore"
+                  class="zw-page-list-more"
+                >
+                  <el-link @click="getMore()" type="primary"
+                    >更多<i class="el-icon-caret-bottom"></i>
+                  </el-link>
+                </div>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="9" class="zw-page-right">
+          <el-card>
+            <div class="zw-card-header" slot="header">
+              <span class="zw-header-title">已选供应商</span>
+            </div>
+            <div class="zw-page-right-list">
+              <el-container class="zw-container">
+                <el-table
+                  :data="selectSupplierlist"
+                  tooltip-effect="dark"
+                  style="width: 100%"
+                  max-height="500"
+                  :header-cell-style="{
+                    background: '#F0F3F3',
+                    border: 'none'
+                  }"
+                >
+                  <el-table-column label="名称">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.name }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="编码">
+                    <template slot-scope="{ row }">
+                      <div>{{ row.code }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="80" label="操作">
+                    <template slot-scope="scope">
+                      <el-button
+                        @click="deleteSelectSupplier(scope.row, scope.$index)"
+                        size="mini"
+                        type="danger"
+                        >删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-container>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleClose">关 闭</el-button>
+        <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import { getPcTreeByPids } from '@/api/classifyManage/index'
+  import { contactList } from '@/api/material/BOM'
+  export default {
+    data() {
+      return {
+        form: {
+          groupId: null
+        },
+        treeList: [],
+        supplierList: [],
+        selectSupplierlist: [], //已选员工
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+          value: 'code'
+        },
+        pageNum: 1, //设备当前页数
+        size: 10,
+        isMore: false,
+        dialogVisible: false
+      };
+    },
+    created() {},
+    methods: {
+      open(selectedList) {
+        this.dialogVisible = true;
+        this.selectSupplierlist = selectedList;
+        this.getInfo();
+      },
+      //初始数据
+      async getInfo() {
+        let res = await getPcTreeByPids('19,20250317001');
+        // this.treeList = this.$util.toTreeData({
+        //   data: list,
+        //   idField: 'id',
+        //   parentIdField: 'parentId'
+        // });
+        this.treeList = res.data;
+      },
+      //选择分类
+      handleNodeClick(data) {
+        this.supplierList = [];
+
+        this.form.groupId = data.id;
+        let params = {
+          pageNum: 1,
+          size: this.size,
+          categoryId: this.form.groupId
+        };
+        this.getSupplierList(params);
+      },
+      //获取供应商列表
+      async getSupplierList(params) {
+        let res = await contactList(params);
+        let list = res.list;
+        if (list.length < res.count) {
+          this.isMore = true;
+        } else {
+          this.isMore = false;
+        }
+        list.forEach((el) => {
+          let _index = this.selectSupplierlist.findIndex((n) => n.id == el.id);
+          if (_index !== -1) {
+            el.disabled = true;
+          } else {
+            el.disabled = false;
+          }
+        });
+        this.supplierList = [...this.supplierList, ...list];
+        // this.pageNum = res.pageNum;
+      },
+      //查询更多供应商
+      async getMore() {
+        this.pageNum = this.pageNum + 1;
+        let params = {
+          pageNum: this.pageNum,
+          size: this.size,
+          groupId: this.form.groupId
+        };
+        this.getSupplierList(params);
+      },
+      //选择员工
+      choiceAsset(info) {
+        let data = JSON.parse(JSON.stringify(info));
+        this.selectSupplierlist.push(data);
+        info.disabled = true;
+      },
+      //删除已选员工
+      deleteSelectSupplier(info, index) {
+        this.supplierList.forEach((el) => {
+          if (el.id == info.id) {
+            el.disabled = false;
+          }
+        });
+        this.selectSupplierlist.splice(index, 1);
+      },
+      //保存
+      sumbit() {
+        if (this.selectSupplierlist.length === 0) {
+          this.$message.warning('请选择员工');
+        } else {
+          this.$emit(
+            'confirm',
+            JSON.parse(JSON.stringify(this.selectSupplierlist))
+          );
+          this.handleClose();
+        }
+      },
+      handleClose() {
+        this.supplierList = [];
+        this.selectSupplierlist = [];
+        this.dialogVisible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 10px 0;
+  }
+  .zw-container {
+    height: 500px;
+    overflow-y: auto;
+  }
+  .zw-header-title {
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: 600;
+  }
+  .details-title {
+    line-height: 32px;
+    height: 32px;
+  }
+  .zw-page-list-p {
+    font-size: 14px;
+    margin-bottom: 18px;
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+    .zw-page-list-right {
+      display: flex;
+    }
+  }
+  .zw-page {
+    background: #fff;
+    //padding: 20px 0;
+    height: 600px;
+    .zw-page-left {
+      padding: 0 10px;
+    }
+    .zw-page-main {
+      padding: 0 10px;
+      .zw-page-main-list {
+        span {
+          margin-right: 10px;
+        }
+        .zw-page-span-num {
+          font-size: 12px;
+          color: #157a2c;
+        }
+        .zw-page-p-operation {
+          text-align: right;
+          // width: 200px;
+        }
+        .zw-page-operation-num {
+          width: 100px;
+          margin: 0 10px;
+        }
+      }
+      .zw-page-list-more {
+        text-align: center;
+      }
+    }
+    .zw-page-right {
+      .zw-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 32px;
+      }
+      span {
+        margin-right: 10px;
+      }
+      .zw-page-span-num {
+        font-size: 12px;
+        color: #157a2c;
+      }
+    }
+  }
+  .notes {
+    font-size: 12px;
+    color: #909090;
+  }
+</style>