kd-aiot-frontend/src/views/documentManagement/certificateManagement/components/customerSelection.vue

<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>