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

<!--
 * @Date: 2020-12-15 15:36:52
 * @LastEditors: gtz
 * @LastEditTime: 2022-07-25 10:36:51
 * @FilePath: \mt-bus-fe\src\views\UserPage\index.vue
 * @Description:
-->
<template>
  <div class="usermanager-container">
    <div class="method-btn-area">
      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
    </div>
    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="trueWidth"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination v-show="total > listQuery.size" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <add-user-form :visible.sync="showDialog" :org-list="orgList" @refreshDataList="getList" />
    <edit-user-form :visible.sync="showEditDialog" :org-list="orgList" :target-info="{id: curEditId}" @refreshDataList="getList" />
  </div>
</template>

<script>
import dataDict from '@/filters/DataDict'
import i18n from '@/lang'
// edit here
const tableBtn = [{
  type: 'edit',
  btnName: 'btn.edit'
}, {
  type: 'delete',
  btnName: 'btn.delete'
}]
// birthday
// orgId
// sex
// code
// remark
const tableProps = [{
  prop: 'name',
  label: i18n.t('userManage.userName'),
  align: 'center'
}, {
  prop: 'email',
  label: i18n.t('userManage.email'),
  align: 'center'
}, {
  prop: 'mobile',
  label: i18n.t('userManage.mobile'),
  align: 'center'
}, {
  prop: 'birthday',
  label: i18n.t('userManage.birthday'),
  align: 'center'
}, {
  prop: 'orgName',
  label: i18n.t('userManage.orgName'),
  align: 'center'
}, {
  prop: 'sex',
  label: i18n.t('userManage.sex'),
  align: 'center',
  filter: dataDict('sex')
}, {
  prop: 'code',
  label: i18n.t('userManage.code'),
  align: 'center'
}, {
  prop: 'enabled',
  label: i18n.t('userManage.status'),
  align: 'center',
  filter: dataDict('enableState')
}, {
  prop: 'remark',
  label: i18n.t('userManage.remark'),
  align: 'center'
}]
import AddUserForm from './AddUserForm'
import EditUserForm from './EditUser'
import BaseTable from '@/components/BaseTable'
// edit here
import { getUserList, delUser } from '@/api/user'

import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import { getOrgList } from '@/api/org'
export default {
  name: 'UserManager',
  components: { Pagination, BaseTable, MethodBtn, AddUserForm, EditUserForm },
  props: {},
  data() {
    return {
      tableBtn,
      tableProps,
      list: [],
      total: 0,
      trueWidth: 120,
      listLoading: true,
      showDialog: false,
      curEditId: null,
      showEditDialog: false,
      listQuery: {
        current: 1,
        size: 10
      },
      orgList: []
    }
  },
  created() {
    this.getList()
    this.getOrgList()
  },
  mounted() {},
  methods: {
    handleClick(raw) {
      console.log(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')
              })
            }
          })
          break
        case 'edit':
          this.showEditDialog = true
          this.curEditId = raw.data.id
          break
      }
    },
    async getList() {
      this.listLoading = true
      // edit here
      const res = await getUserList(this.listQuery)
      if (res.code === 0) {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }
    },
    async getOrgList() {
      const res = await getOrgList({
        current: 1,
        size: 1000
      })
      if (res.code === 0) {
        this.orgList = res.data.records
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.usermanager-container {
  padding: 20px;
  .method-btn-area {
    padding: 15px 30px;
    margin: 10px 0 20px 0;
    border: 1px solid #dfe6ec;
  }
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>