kd-aiot-frontend-aps/src/components/select/SelectUser/index.vue

<template>
  <ele-modal
    width="980px"
    height="60%"
    :visible="visibleInChild"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    fullscreen
    maxable
    title="选择用户"
    :append-to-body="appendToBody"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <div class="el-dialog-body-custom-height">
      <el-row :gutter="5">
        <el-col :span="18">
          <Organization
            @changeList="changeList"
            :multipleSelect="multipleSelect"
            ref="organization"
          />
        </el-col>
        <el-col :span="6">
          <div>
            <el-card shadow="never">
              <clearList @btnRemoveAll="btnRemoveAll" />
              <ele-pro-table
                ref="table"
                :columns="columns"
                :datasource="datasource"
                :need-page="false"
                :toolbar="false"
                tool-class="ele-toolbar-form"
                cache-key="systemOrgUserTable"
              >
                <template v-slot:action="row">
                  <el-popconfirm
                    class="ele-action"
                    title="确定要删除此用户吗？"
                    @confirm="remove(row)"
                  >
                    <template v-slot:reference>
                      <el-link
                        type="danger"
                        :underline="false"
                        icon="el-icon-delete"
                      >
                        删除
                      </el-link>
                    </template>
                  </el-popconfirm>
                </template>

                <!-- 角色列 -->
                <template v-slot:roles="{ row }">
                  <el-tag
                    v-for="item in row.roles"
                    :key="item.roleId"
                    type="primary"
                    size="mini"
                    :disable-transitions="true"
                  >
                    {{ item.roleName }}
                  </el-tag>
                </template>
              </ele-pro-table>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-close" @click="updateVisible">取消</el-button>
      <el-button icon="el-icon-check" type="primary" @click="confirm"
        >确定</el-button
      >
    </div>
  </ele-modal>
</template>

<script>
  import Organization from '@/components/select/organization';
  import { getAction } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  import clearList from './clear-list.vue';

  export default {
    name: 'SelectUser',
    components: { Organization, clearList },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      //是否多选
      multipleSelect: {
        type: Boolean,
        default: false
      },

      type: {
        type: String,
        default: ''
      },
      //是否为2级弹出框
      appendToBody: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        filterText: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'isLeaf',
          data: 'data'
        },
        records: [],
        total: 0,
        selectedRecords: [],
        listQuery: {
          current: 1,
          size: 10,
          userId: undefined,
          userName: undefined,
          orgId: undefined
        },
        currOrgId: '',
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '姓名',
            sortable: 'custom',
            showOverflowTooltip: true
          },

          {
            prop: 'loginName',
            label: '用户账号',
            sortable: 'custom',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    watch: {
      filterText(val) {
        this.$refs._selectOrgTree.filter(val);
      }
    },
    computed: {
      visibleInChild: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit('update:visible', val);
        }
      }
    },
    methods: {
      datasource() {
        return {
          list: this.selectedRecords
        };
      },
      remove(row) {
        this.selectedRecords.splice(row.$index, 1);
        this.$refs.table.reload();
        this.$refs.organization.$refs.userList.selectedRecords =
          this.selectedRecords;
      },
      changeList(arr) {
        this.selectedRecords = arr;
        this.$refs.table.reload();
      },
      /* 更新visible */
      updateVisible(value) {
        this.selectedRecords = [];
        this.$refs.table.reload();
        this.$refs.organization.$refs.userList.selectedRecords = [];
        this.$emit('update:visible', value);
        this.visibleInChild = false;
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // getTreeData() {
      //   getAction('/sys/org/getSelectTreeData', { type: this.type }).then(
      //     (res) => {
      //       const { data } = res;
      //       this.treeData = data;
      //     }
      //   );
      // },
      handleNodeClick(node) {
        this.currOrgId = node.id;
        this.listSysUsers();
      },
      listSysUsers() {
        this.listQuery.orgId = this.currOrgId;
        getAction('/sys/user/listSelectUser', this.listQuery).then((res) => {
          const { data } = res;
          this.records = data.records;
          this.total = data.total;
        });
      },
      btnQuery() {
        this.listQuery.current = 1;
        this.listSysUsers();
      },
      btnReset() {
        this.currOrgId = '';
        this.listQuery = {
          current: 1,
          size: 10,
          userId: undefined,
          userName: undefined,
          orgId: undefined
        };
        this.listSysUsers();
      },

      btnRemoveAll() {
        this.selectedRecords = [];
        this.$refs.table.reload();
        this.$refs.organization.$refs.userList.selectedRecords = [];
      },
      btnRemove(row) {
        let arr = this.selectedRecords;
        arr.splice(
          arr.findIndex((item) => item.userId === row.userId),
          1
        );
      },
      confirm() {
        if (!this.selectedRecords || this.selectedRecords.length == 0) {
          Message.error('请先选择用户');
          return;
        }
        if (this.multipleSelect) {
          this.$emit('selectUserFinished', this.selectedRecords);
        } else {
          this.$emit('selectUserFinished', this.selectedRecords[0]);
        }
        this.selectedRecords = [];
        this.$refs.table.reload();
        this.$refs.organization.$refs.userList.selectedRecords = [];
        this.visibleInChild = false;
      }
    }
  };
</script>