kd-aiot-frontend/src/views/factoryModel/station/components/staffSelection.vue

<template>
  <div class="container">
    <!-- 单据弹窗 -->
    <ele-modal
      title="选择设备"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="80%" :maxable="true"
    >
      <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="staffList"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#F0F3F3',
                    border: 'none'
                  }"
                >
                  <el-table-column prop="code" label="设备编码">
                    <template slot-scope="{ row }">
                      <div>{{ row.code }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="设备名称">
                    <template slot-scope="{ row }">
                      <div>{{ row.name }}</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"
                        icon="el-icon-arrow-right"
                        circle
                      >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div
                  v-if="staffList.length !== 0 && isMore"
                  class="zw-page-list-more"
                >
                  <el-link @click="getMore(page)" 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="selectStafflist"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#F0F3F3',
                    border: 'none'
                  }"
                >
                  <el-table-column prop="code" label="设备编码">
                    <template slot-scope="{ row }">
                      <div>{{ row.code }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="设备名称">
                    <template slot-scope="{ row }">
                      <div>{{ row.name }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column width="80" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click="deleteSelectStaff(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>
    </ele-modal>
  </div>
</template>
  <script>
import { listOrganizations, getUserPage } from '@/api/system/organization';
import { getAssetList } from '@/api/ledgerAssets';
import { getTreeByType } from '@/api/classifyManage';
export default {
  data() {
    return {
      form: {
        groupId: null
      },
      treeList: [],
      // 选择的分类
      currentTree: '',
      staffList: [],
      selectStafflist: [], //已选员工
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'code'
      },
      pageNum: 1, //设备当前页数
      size: 10,
      isMore: false,
      dialogVisible: false
    };
  },
  created() {},
  methods: {
    open(selectedList) {
      this.dialogVisible = true;
      this.selectStafflist = selectedList;
      this.getInfo();
    },
    //初始数据
    async getInfo() {
      let res = await getTreeByType(1);
      this.treeList = this.$util.toTreeData({
        data: res.data,
        idField: 'id',
        parentIdField: 'parentId'
      });
      //this.treeList = res.data;
    },
    //选择分类
    handleNodeClick(data) {
      this.currentTree = data;
      this.pageNum = 1;
      let params = {
        pageNum: 1,
        size: this.size,
        categoryLevelId: this.currentTree.id,
        rootCategoryLevelId: this.treeList[0].id
      };
      this.staffList = [];
      this.getStaffList(params);
    },
    //获取设备列表
    async getStaffList(params) {
      let res = await getAssetList(params);
      let list = res.list;
      
      list.forEach((el) => {
        let _index = this.selectStafflist.findIndex((n) => n.id == el.id);
        if (_index !== -1) {
          el.disabled = true;
        } else {
          el.disabled = false;
        }
      });
      this.staffList = [...this.staffList, ...list];
      if (this.staffList.length < res.count) {
        this.isMore = true;
      } else {
        this.isMore = false;
      }
      // this.pageNum = res.pageNum;
    },
    //查询更多设备
    async getMore() {
      this.pageNum += 1;
      let params = {
        pageNum: 1,
        size: this.size,
        categoryLevelId: this.currentTree.id,
        rootCategoryLevelId: this.treeList[0].id
      };
      this.getStaffList(params);
    },
    //选择员工
    choiceAsset(info) {
      let data = JSON.parse(JSON.stringify(info));
      this.selectStafflist.push(data);
      info.disabled = true;
    },
    //删除已选员工
    deleteSelectStaff(info, index) {
      this.staffList.forEach((el) => {
        if (el.id == info.id) {
          el.disabled = false;
        }
      });
      this.selectStafflist.splice(index, 1);
    },
    //保存
    sumbit() {
      if (this.selectStafflist.length === 0) {
        this.$message.warning('请选择设备');
      } else {
        this.$emit('confirm', JSON.parse(JSON.stringify(this.selectStafflist)));
        this.handleClose();
      }
    },
    handleClose() {
      this.staffList = [];
      this.selectStafflist = [];
      this.dialogVisible = false;
    }
  }
};
</script>
  
  <style lang='scss' scoped>
.container {
  padding: 10px 0;
}
.zw-container {
  height: 500px;
}
.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;
  .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>