2 年之前 · ba0daf2942
--- a/src/views/system/organization/index.vue
+++ b/src/views/system/organization/index.vue
@@ -1,166 +0,0 @@
 <template>
  <div class="ele-body ele-body-card">
    <a-row :gutter="16">
      <a-col :lg="6" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          :body-style="{padding: '24px 16px'}">
          <div class="ele-table-tool">
            <a-space size="middle">
              <a-button
                type="primary"
                @click="openEdit()">新建
              </a-button>
              <a-button
                type="primary"
                @click="openEdit(current)"
                :disabled="!current">修改
              </a-button>
              <a-button
                danger
                type="primary"
                @click="remove"
                :disabled="!current">删除
              </a-button>
            </a-space>
          </div>
          <a-tree
            :tree-data="data"
            v-model:expanded-keys="expandedRowKeys"
            v-model:selected-keys="selectedRowKeys"
            @select="onTreeSelect"/>
        </a-card>
      </a-col>
      <a-col :lg="18" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false">
          <org-user-list
            v-if="current"
            :organization-id="current.organizationId"
            :organization-list="data"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
  <!-- 编辑弹窗 -->
  <org-edit
    v-model:visible="showEdit"
    :data="editData"
    :organization-list="data"
    @done="query"/>
 </template>

 <script>
 import {createVNode} from 'vue';
 import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
 import OrgUserList from './org-user-list';
 import OrgEdit from './org-edit';

 export default {
  name: 'SystemOrganization',
  components: {
    OrgUserList,
    OrgEdit
  },
  data() {
    return {
      // 加载状态
      loading: true,
      // 树形数据
      data: [],
      // 树展开的key
      expandedRowKeys: [],
      // 树选中的key
      selectedRowKeys: [],
      // 选中数据
      current: null,
      // 是否显示表单弹窗
      showEdit: false,
      // 编辑回显数据
      editData: null
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    /* 查询 */
    query() {
      this.loading = true;
      this.$http.get('/sys/organization').then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          let eks = [];
          res.data.data.forEach(d => {
            d.key = d.organizationId;
            d.value = d.organizationId;
            d.title = d.organizationName;
            eks.push(d.key);
          });
          this.expandedRowKeys = eks;
          this.data = this.$util.toTreeData(res.data.data, 'organizationId', 'parentId');
          if (this.data.length) {
            this.selectedRowKeys = [this.data[0].key];
            this.onTreeSelect();
          } else {
            this.selectedRowKeys = [];
            this.current = null;
          }
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /* 选择数据 */
    onTreeSelect() {
      this.$util.eachTreeData(this.data, (d) => {
        if (this.selectedRowKeys.indexOf(d.key) !== -1) {
          this.current = d;
          return false;
        }
      });
    },
    /* 打开编辑弹窗 */
    openEdit(item) {
      this.editData = Object.assign({}, {
        parentId: this.current.parentId
      }, item);
      this.showEdit = true;
    },
    /* 删除 */
    remove() {
      this.$confirm({
        title: '提示',
        content: '确定要删除选中的机构吗?',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          const hide = this.$message.loading('请求中..', 0);
          this.$http.delete('/sys/organization/' + this.current.organizationId).then(res => {
            hide();
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.query();
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            hide();
            this.$message.error(e.message);
          });
        }
      });
    }
  }
 }
 </script>

 <style scoped>
@media screen and (min-width: 768px) {
  .ant-card {
    min-height: calc(100vh - 122px);
  }
 }
 </style>
--- a/src/views/system/organization/org-edit.vue
+++ b/src/views/system/organization/org-edit.vue
@@ -1,201 +0,0 @@
 <!-- 机构编辑弹窗 -->
 <template>
  <a-modal
    :width="680"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate?'修改机构':'添加机构'"
    :body-style="{paddingBottom: '8px'}"
    @update:visible="updateVisible"
    @ok="save">
    <a-form
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{md: {span: 7}, sm: {span: 24}}"
      :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
      <a-row :gutter="16">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="上级机构:" name="parentId">
            <a-tree-select
              allow-clear
              tree-default-expand-all
              placeholder="请选择上级机构"
              v-model:value="form.parentId"
              :tree-data="organizationList"
              :dropdown-style="{maxHeight: '360px', overflow: 'auto'}"/>
          </a-form-item>
          <a-form-item label="机构名称:" name="organizationName">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入机构名称"
              v-model:value="form.organizationName"/>
          </a-form-item>
          <a-form-item label="机构全称:" name="organizationFullName">
            <a-input
              allow-clear
              :maxlength="100"
              placeholder="请输入机构全称"
              v-model:value="form.organizationFullName"/>
          </a-form-item>
          <a-form-item label="机构代码:" name="organizationCode">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入机构代码"
              v-model:value="form.organizationCode"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="机构类型:" name="organizationType">
            <a-select
              allow-clear
              placeholder="请选择机构类型"
              v-model:value="form.organizationType">
              <a-select-option
                v-for="item in organizationTypeList"
                :key="item.dictDataId"
                :value="item.dictDataId">
                {{ item.dictDataName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="排序号:" name="sortNumber">
            <a-input-number
              :min="0"
              :max="99999"
              class="ele-fluid"
              placeholder="请输入排序号"
              v-model:value="form.sortNumber"/>
          </a-form-item>
          <a-form-item label="备注:">
            <a-textarea
              :rows="4"
              :maxlength="200"
              placeholder="请输入备注"
              v-model:value="form.comments"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
 </template>

 <script>
 export default {
  name: 'OrgEdit',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 全部机构
    organizationList: Array
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data, {
        parentId: this.data ? (this.data.parentId === 0 ? null : this.data.parentId) : null
      }),
      // 表单验证规则
      rules: {
        organizationName: [
          {required: true, message: '请输入机构名称', type: 'string', trigger: 'blur'}
        ],
        organizationFullName: [
          {required: true, message: '请输入机构全称', type: 'string', trigger: 'blur'}
        ],
        organizationCode: [
          {required: true, message: '请输入机构代码', type: 'string', trigger: 'blur'}
        ],
        organizationType: [
          {required: true, message: '请选择机构类型', type: 'number', trigger: 'blur'}
        ],
        sortNumber: [
          {required: true, message: '请输入排序号', type: 'number', trigger: 'blur'}
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 机构类型列表
      organizationTypeList: []
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          parentId: this.data.parentId === 0 ? null : this.data.parentId
        });
        this.isUpdate = !!this.data.organizationId;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
      if (this.$refs.form) {
        this.$refs.form.clearValidate();
      }
    }
  },
  mounted() {
    this.queryOrganizationType();  // 获取机构类型
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs.form.validate().then(() => {
        this.loading = true;
        this.$http[this.isUpdate ? 'put' : 'post']('/sys/organization',
          Object.assign({}, this.form, {
            parentId: this.form.parentId || 0
          })
        ).then(res => {
          this.loading = false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            if (!this.isUpdate) {
              this.form = {};
            }
            this.updateVisible(false);
            this.$emit('done');
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 查询机构类型 */
    queryOrganizationType() {
      this.$http.get('/sys/dictdata', {
        params: {
          dictCode: 'organization_type'
        }
      }).then(res => {
        if (res.data.code === 0) {
          this.organizationTypeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  }
 }
 </script>

 <style scoped>
 </style>
--- a/src/views/system/organization/org-user-edit.vue
+++ b/src/views/system/organization/org-user-edit.vue
@@ -1,248 +0,0 @@
 <!-- 用户编辑弹窗 -->
 <template>
  <a-modal
    :width="680"
    :visible="visible"
    :confirm-loading="loading"
    :title="isUpdate?'修改用户':'新建用户'"
    :body-style="{paddingBottom: '8px'}"
    @update:visible="updateVisible"
    @ok="save">
    <a-form
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{md: {span: 7}, sm: {span: 24}}"
      :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
      <a-row :gutter="16">
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="所属机构:">
            <a-tree-select
              allow-clear
              tree-default-expand-all
              placeholder="请选择所属机构"
              v-model:value="form.organizationId"
              :tree-data="organizationList"
              :dropdown-style="{maxHeight: '360px', overflow: 'auto'}"/>
          </a-form-item>
          <a-form-item label="用户账号:" name="username">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入用户账号"
              v-model:value="form.username"/>
          </a-form-item>
          <a-form-item label="用户名:" name="nickname">
            <a-input
              allow-clear
              :maxlength="20"
              placeholder="请输入用户名"
              v-model:value="form.nickname"/>
          </a-form-item>
          <a-form-item label="性别:" name="sex">
            <a-select
              allow-clear
              placeholder="请选择性别"
              v-model:value="form.sex">
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="角色:" name="roleIds">
            <a-select
              allow-clear
              mode="multiple"
              placeholder="请选择角色"
              v-model:value="form.roleIds">
              <a-select-option
                v-for="item in roleList"
                :key="item.roleId"
                :value="item.roleId">
                {{ item.roleName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" :xs="24">
          <a-form-item label="手机号:" name="phone">
            <a-input
              allow-clear
              :maxlength="11"
              placeholder="请输入手机号"
              v-model:value="form.phone"/>
          </a-form-item>
          <a-form-item label="邮箱:" name="email">
            <a-input
              allow-clear
              :maxlength="100"
              placeholder="请输入邮箱"
              v-model:value="form.email"/>
          </a-form-item>
          <a-form-item
            v-if="!isUpdate"
            label="登录密码:"
            name="password">
            <a-input-password
              :maxlength="20"
              v-model:value="form.password"
              placeholder="请输入登录密码"/>
          </a-form-item>
          <a-form-item label="个人简介:">
            <a-textarea
              :rows="4"
              :maxlength="200"
              placeholder="请输入个人简介"
              v-model:value="form.introduction"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
 </template>

 <script>
 import validate from 'ele-admin-pro/packages/validate';

 export default {
  name: 'OrgUserEdit',
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 全部机构
    organizationList: Array,
    // 机构id
    organizationId: Number
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data, {
        organizationId: this.organizationId
      }),
      // 表单验证规则
      rules: {
        username: [
          {
            required: true,
            type: 'string',
            trigger: 'blur',
            asyncValidator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (!value) {
                  return reject('请输入用户账号');
                }
                this.$http.get('/sys/user?username=' + value).then(res => {
                  if (res.data.code !== 0 || !res.data.data.length) {
                    return resolve();
                  }
                  if (this.isUpdate && res.data.data[0].username === this.data.username) {
                    return resolve();
                  }
                  reject('账号已经存在');
                }).catch(() => {
                  resolve();
                });
              });
            }
          }
        ],
        nickname: [
          {required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', type: 'number', trigger: 'blur'}
        ],
        roleIds: [
          {required: true, message: '请选择角色', type: 'array', trigger: 'blur'}
        ],
        email: [
          {pattern: validate.email, message: '邮箱格式不正确', type: 'string', trigger: 'blur'}
        ],
        password: [
          {required: true, pattern: /^[\S]{5,18}$/, message: '密码必须为5-18位非空白字符', type: 'string', trigger: 'blur'}
        ],
        phone: [
          {pattern: validate.phone, message: '手机号格式不正确', type: 'string', trigger: 'blur'}
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 角色列表
      roleList: []
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {
          roleIds: this.data.roles.map(d => d.roleId)
        });
        this.isUpdate = true;
      } else {
        this.form = {organizationId: this.organizationId};
        this.isUpdate = false;
      }
      if (this.$refs.form) {
        this.$refs.form.clearValidate();
      }
    },
    organizationId() {
      if (!this.isUpdate) {
        this.form = {organizationId: this.organizationId};
      }
    }
  },
  mounted() {
    this.queryRoles();  // 查询角色列表
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs.form.validate().then(() => {
        this.loading = true;
        this.$http[this.isUpdate ? 'put' : 'post']('/sys/user', this.form).then(res => {
          this.loading = false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            if (!this.isUpdate) {
              this.form = {};
            }
            this.updateVisible(false);
            this.$emit('done');
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 查询角色列表 */
    queryRoles() {
      this.$http.get('/sys/role').then(res => {
        if (res.data.code === 0) {
          this.roleList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  }
 }
 </script>

 <style scoped>
 </style>
--- a/src/views/system/organization/org-user-list.vue
+++ b/src/views/system/organization/org-user-list.vue
@@ -1,207 +0,0 @@
 <template>
  <!-- 表格 -->
  <ele-pro-table
    ref="table"
    row-key="userId"
    :datasource="url"
    :columns="columns"
    :where="where"
    tool-class="ele-toolbar-form"
    :scroll="{x: 'max-content'}">
    <template #toolbar>
      <a-row :gutter="16">
        <a-col :lg="6" :md="8" :sm="24" :xs="24">
          <a-input
            v-model:value.trim="where.username"
            placeholder="请输入用户账号"
            allow-clear/>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24" :xs="24">
          <a-input
            v-model:value.trim="where.nickname"
            placeholder="请输入用户名"
            allow-clear/>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24" :xs="24">
          <a-space size="middle">
            <a-button
              type="primary"
              @click="reload">查询
            </a-button>
            <a-button
              type="primary"
              @click="openEdit()">新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </template>
    <template #roles="{ record }">
      <a-tag
        v-for="(item, index) in record.roles"
        :key="index"
        color="blue">{{ item.roleName }}
      </a-tag>
    </template>
    <template #state="{ text,record }">
      <a-switch
        :checked="text===0"
        @change="(checked) => changeState(checked, record)"/>
    </template>
    <template #action="{ record }">
      <a-space>
        <a @click="openEdit(record)">修改</a>
        <a-divider type="vertical"/>
        <a-popconfirm
          title="确定要删除此用户吗？"
          @confirm="remove(record)">
          <a class="ele-text-danger">删除</a>
        </a-popconfirm>
      </a-space>
    </template>
  </ele-pro-table>
  <!-- 编辑弹窗 -->
  <org-user-edit
    v-model:visible="showEdit"
    :data="current"
    :organization-list="organizationList"
    :organization-id="organizationId"
    @done="reload"/>
 </template>

 <script>
 import OrgUserEdit from './org-user-edit';

 export default {
  name: 'SysOrgUserList',
  components: {OrgUserEdit},
  props: {
    // 机构id
    organizationId: Number,
    // 全部机构
    organizationList: Array
  },
  data() {
    return {
      // 表格数据接口
      url: '/sys/user/page',
      // 表格列配置
      columns: [
        {
          key: 'index',
          width: 48,
          align: 'center',
          customRender: ({index}) => this.$refs.table.tableIndex + index
        },
        {
          title: '用户账号',
          dataIndex: 'username',
          sorter: true
        },
        {
          title: '用户名',
          dataIndex: 'nickname',
          sorter: true
        },
        {
          title: '性别',
          dataIndex: 'sexName',
          sorter: true
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          sorter: true,
        },
        {
          title: '角色',
          key: 'roles',
          slots: {customRender: 'roles'}
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true,
          width: 150,
          customRender: ({text}) => this.$util.toDateString(text)
        },
        {
          title: '状态',
          dataIndex: 'state',
          sorter: true,
          width: 90,
          align: 'center',
          slots: {customRender: 'state'}
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          align: 'center',
          slots: {customRender: 'action'}
        }
      ],
      // 表格搜索条件
      where: {
        organizationId: this.organizationId
      },
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false
    };
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({page: 1, where: this.where});
    },
    /* 打开编辑弹窗 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 删除单个 */
    remove(row) {
      const hide = this.$message.loading('请求中..', 0);
      this.$http.delete('/sys/user/' + row.userId).then(res => {
        hide();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        hide();
        this.$message.error(e.message);
      });
    },
    /* 修改用户状态 */
    changeState(checked, row) {
      let params = new FormData();
      params.append('state', checked ? 0 : 1);
      this.$http.put('/sys/user/state/' + row.userId, params).then(res => {
        if (res.data.code === 0) {
          row.state = checked ? 0 : 1;
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  },
  watch: {
    /* 监听机构id变化 */
    organizationId() {
      this.where.organizationId = this.organizationId;
      this.reload();
    }
  }
 }
 </script>

 <style scoped>
 </style>