kd-aiot-frontend-eom/src/views/marketManagem/components/userList.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="65vw"
    :visible.sync="show"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    @close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <ele-split-layout
      width="210px"
      allow-collapse
      :right-style="{ overflow: 'hidden' }"
    >
      <div>
        <div class="ele-border-lighter sys-organization-list">
          <el-tree
            ref="tree"
            :data="data"
            highlight-current
            node-key="id"
            :props="{ label: 'name' }"
            :expand-on-click-node="false"
            :default-expand-all="true"
            @node-click="onNodeClick"
          /> </div
        >.
      </div>
      <template v-slot:content>
        <ele-pro-table

          ref="table"
            :columns="columns"
            :datasource="datasource"
            :selection.sync="selection"
            :current.sync="current"
            highlight-current-row
            cache-key="systemRoleTable3"
            aaaaaa
            row-key="id"
        >
        </ele-pro-table>
      </template>
    </ele-split-layout>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { getUserPage } from '@/api/system/organization';

import { listOrganizations } from '@/api/system/organization';
export default {
  data() {
    return {
      data: [],
      show: false,
      organizationId: '',
      // 表格列配置
      current: {},
      selection: [],
      disArr: [],
      key: '',
      isAll:2 //多选：1 单选：2
    };
  },
  computed: {
    columns() {
      return [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center', reserveSelection: true,
          show: this.isAll == 1,
          selectable: (row, index) => {
            return !this.disArr.includes(row.id);
          }
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'name',
          label: '姓名',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'jobNumber',
          label: '工号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'loginName',
          label: '用户账号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'sex',
          label: '性别',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 80,
          formatter: (_row, _column, cellValue) => {
            return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
          }
        }
      ];
    }
  },
  created() {},
  methods: {
    /* 查询 */
    query() {
      listOrganizations()
        .then((list) => {
          let _list = list.filter((i) => i.name != '超级管理员');

          this.data = this.$util.toTreeData({
            data: _list,
            idField: 'id',
            parentIdField: 'parentId'
          });

          this.$nextTick(() => {
            this.onNodeClick(this.data[0]);
          });
        })
        .catch((e) => {
          // this.$message.error(e.message);
        });
    },
    async open(key) {
      this.query();
      this.key = key;
      this.show = true;
    },
    /* 表格数据源 */
    async datasource({ page, limit, where, order }) {
      let data = await getUserPage({
        ...where,
        ...order,
        pageNum: page,
        size: limit,
        groupId: this.organizationId
      });

      return data;
    },
    /* 保存编辑 */
    save() {
      let data =
        this.isAll == 1
          ? JSON.parse(JSON.stringify(this.selection))
          : JSON.parse(JSON.stringify(this.current));
      this.$emit('success', { data, key: this.key });
      this.show = false;
    },
    onNodeClick(val) {
      this.organizationId = val.id;
      this.reload();
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ pageNum: 1, where: where });
    },
    cancel() {
      this.show = false;
    }
  }
};
</script>
<style scoped lang="scss">
:deep(.ele-split-panel-wrap) {
  height: 50vh;
  overflow-y: auto;
}
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  background-color: #f3f3f3;
}
</style>