kd-aiot-frontend/src/views/system/user/components/add.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"
  >
    <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>
        <org-user-search @search="reload"> </org-user-search>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          tool-class="ele-toolbar-form"
          :current.sync="current"
          highlight-current-row
        >
        </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 OrgUserSearch from '@/views/system/organization/components/org-user-search.vue';

  import { listOrganizations } from '@/api/system/organization';
  export default {
    components: {
      OrgUserSearch
    },
    data() {
      return {
        data: [],
        show: false,
        organizationId: '',
        isHasAccount: '',
        // 表格列配置
        columns: [
          {
            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 ? '女' : '';
            }
          }
        ],
        current: {}
      };
    },

    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(isHasAccount) {
        this.isHasAccount = isHasAccount;
        this.query();
        this.show = true;
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {

        let data = await getUserPage({
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          groupId: this.organizationId,
          hasAccount:this.isHasAccount||''
        });

        return data;
      },
      /* 保存编辑 */
      save() {
        let data = JSON.parse(JSON.stringify(this.current));
        this.$emit('success', data);
        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>