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"
  >
    <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: false,
      // 表格列配置
      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) {
      if (isHasAccount) {
        this.isHasAccount = isHasAccount;
      }
      this.query();
      this.show = true;
    },
    /* 表格数据源 */
    async datasource({ page, limit, where, order }) {
      console.log(this.isHasAccount)
      if (!this.isHasAccount) {
        where['hasAccount'] = 0;
      }
      let data = await getUserPage({
        ...where,
        ...order,
        pageNum: page,
        size: limit,
        groupId: this.organizationId
      });

      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>