11-mes-new/src/views/UserPage/usermanage.vue

<!--
 * @Author: zwq
 * @Date: 2021-04-06 19:33:11
 * @LastEditors: gtz
 * @LastEditTime: 2022-07-25 10:36:54
 * @Description:
-->
<template>
  <div class="app-container system-manage-landpage">
    <el-container>
      <el-aside>
        <TestTree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" />
        <!-- <side-tree v-if="menuList.length > 0" :menu-list="menuList" @getOrganization="getOrganization" /> -->
      </el-aside>
      <el-main>
        <el-form ref="dataForm" :model="dataForm" :inline="true" size="mini" label-position="left">
          <el-row>
            <el-col style="margin: 0 0 28px;">
              <!-- <el-form-item class="has-icon" label-width="100px" :label="$t('userManage.orgName')"> -->
              <el-form-item class="has-icon">
                <span v-if="dataForm.orgName">{{ dataForm.orgName }}</span>
                <span v-else>用户管理</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item :label="$t('userManage.userName')" prop="name">
                <el-input
                  v-model="dataForm.name"
                  :placeholder="['placeholder.input', $t('userManage.userName')] | i18nFilterForm"
                  clearable
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <base-table
          :top-btn-config="topBtnConfig"
          :table-config="tableProps"
          :table-data="list"
          :is-loading="listLoading"
          :page="dataForm.current"
          :limit="dataForm.size"
          @clickTopBtn="clickTopBtn"
        >
          <method-btn
            v-if="tableBtn.length"
            slot="handleBtn"
            :width="trueWidth"
            :method-list="tableBtn"
            @clickBtn="handleClick"
          />
        </base-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="dataForm.page"
          :limit.sync="dataForm.limit"
          @pagination="getList"
        />

        <add-user-form :visible.sync="showDialog" @refreshDataList="getList" />
        <edit-user-form :visible.sync="showEditDialog" :target-info="{ id: curEditId }" @refreshDataList="getList" />
        <assign-Role :visible.sync="AssignRoleDialog" :user-id="userId" @refreshDataList="getList" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TestTree from './TestTree.vue'
import sideTree from '../system-manage/sideTree'
import { getOrgList } from '@/api/org'
import AddUserForm from './AddUserForm'
import EditUserForm from './EditUser'
import AssignRole from './AssignRole'
import BaseTable from '@/components/BaseTable'
// edit here
import { getUserList, delUser } from '@/api/user'
import { getRoleList } from '@/api/role'

import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import dataDict from '@/filters/DataDict'
import i18n from '@/lang'
const topBtnConfig = [
  {
    type: 'add',
    btnName: 'btn.add'
  }
]
// edit here
const tableBtn = [
  {
    type: 'edit',
    btnName: 'btn.edit'
  },
  {
    type: 'EmPower',
    btnName: i18n.t('userManage.AssignRole')
  },
  {
    type: 'delete',
    btnName: 'btn.delete'
  }
]
// birthday
// orgId
// sex
// code
// remark
const tableProps = [
  {
    prop: 'name',
    label: i18n.t('userManage.userName')
  },
  {
    prop: 'email',
    label: i18n.t('userManage.email')
  },
  {
    prop: 'mobile',
    label: i18n.t('userManage.mobile')
  },
  // {
  //   prop: 'birthday',
  //   label: i18n.t('userManage.birthday'),
  //
  // },
  {
    prop: 'orgName',
    label: i18n.t('userManage.orgName')
  },
  {
    prop: 'roleName',
    label: i18n.t('roleManage.roleName')
  },
  // {
  //   prop: 'sex',
  //   label: i18n.t('userManage.sex'),
  //
  //   filter: dataDict('sex')
  // },
  {
    prop: 'code',
    label: i18n.t('userManage.code')
  },
  {
    prop: 'enabled',
    label: i18n.t('userManage.status'),

    filter: dataDict('enableState')
  },
  {
    prop: 'remark',
    label: i18n.t('userManage.remark')
  }
]
export default {
  components: { TestTree, sideTree, Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm, AssignRole },
  data() {
    return {
      topBtnConfig,
      menuList: [],
      tableBtn,
      tableProps,
      list: [],
      total: 0,
      trueWidth: 120,
      listLoading: true,
      showDialog: false,
      curEditId: null,
      userId: '',
      showEditDialog: false,
      AssignRoleDialog: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      roleNameOptions: [],
      dataForm: {
        name: '',
        sex: '',
        roleName: '',
        orgId: '',
        orgName: '',
        current: 1,
        size: 20
      },
      sexOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ]
    }
  },
  created() {
    this.getOrgList()
    this.getList()
  },
  methods: {
    async getOrgList() {
      // edit here
      const params = {
        current: 1,
        size: 500
      }
      this.roleNameOptions.splice(0, this.roleNameOptions.length)
      const res = await getRoleList(params)
      if (res.code === 0) {
        this.roleNameOptions = res.data
      }
      this.menuList.splice(0, this.menuList.length)
      const res1 = await getOrgList(params)
      if (res1.code === 0) {
        this.menuList = res1.data.records
        console.log('menulist===>', this.menuList)
      }
    },
    getOrganization(data) {
      this.dataForm.orgId = data.id
      this.dataForm.orgName = data.name
      this.getList()
    },
    handleClick(raw) {
      switch (raw.type) {
        case 'delete':
          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
            confirmButtonText: i18n.t('btn.confirm'),
            cancelButtonText: i18n.t('btn.cancel'),
            type: 'warning'
          }).then(async () => {
            // 走接口
            const result = await delUser({
              id: raw.data.id
            })
            if (result.code === 0) {
              this.$message({
                type: 'success',
                message: i18n.t('deleteMsgBox.doneMsg')
              })
              this.getList()
            }
          })
          break
        case 'edit':
          this.showEditDialog = true
          this.curEditId = raw.data.id
          break
        case 'EmPower':
          this.AssignRoleDialog = true
          this.userId = raw.data.id
          break
      }
    },
    async getList() {
      this.listLoading = true
      // edit here
      const res = await getUserList(this.dataForm)
      if (res.code === 0) {
        this.list = res.data.records
        this.list.forEach(item => {
          item.roleName = item.stringList.toString()
        })
        this.total = res.data.total
        this.listLoading = false
      }
    },
    btnClick(val) {
      this.headFormValue = val
      // 如果点击的是搜索栏的其他按钮在这里继续写判断
      if (this.headFormValue.btnName === 'search') {
        this.getList()
      }
    },
    clickTopBtn(val) {
      if (val === 'add') {
        this.showDialog = true // 新增
      }
    }
  }
}
</script>
<style scoped>
.el-container >>> .el-aside {
  border-radius: 8px;
  background-color: #fff;
  width: 256px !important;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
aside {
  padding: 0;
}
.el-container >>> .el-main {
  border-radius: 8px;
  background-color: #fff;
  border: unset;
}
.el-container >>> .el-tree-node__content {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.el-container >>> .el-tree-node__content:hover {
  background-color: #e3efff;
}
.el-container >>> .el-tree-node:focus > .el-tree-node__content {
  background-color: #e3efff;
}
/* .el-container >>> .el-icon-caret-right {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: transparent;
} */
.el-container >>> .el-icon-caret-right::before {
  /* content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: transparent; */
}

.system-manage-landpage {
  background: unset;
  padding: 0;
  display: flex;
}

.el-container {
  display: flex;
  gap: 8px;
}

.el-container >>> .el-tree-node__label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.88px;
  color: #161616;
}

.has-icon {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.has-icon::before {
  content: '';
  width: 4px;
  border-radius: 2px;
  height: 55%;
  position: absolute;
  /* top: 13%; */
  left: 0;
  background: #0b58ff;
}

:not(.has-icon) >>> .el-form-item__label {
  font-size: 14px;
}

.has-icon >>> .el-form-item__label {
  position: relative;
  left: 12px;
  font-size: 16px;
}
.has-icon >>> .el-form-item__content {
  font-size: 16px;
  margin-left: 12px;
}

.el-button--mini {
  padding: 6px 12px;
  border-radius: 4px;
}
/* .has-icon >>> .el-form-item__content {
  position: absolute;
  left: 24px;
} */

.el-form-item {
  margin: 0;
}
</style>