haowanShow/admin/src/views/system/user/list.vue

<template>
  <div class="house-list">
    <tables
      :data-api="dataApi"
      :columns="columns"
      @toEdit="toEdit"
      placeholder="账号名称"
      ref="table"
    />
    <CModal :show="show" title="用户信息" :width="420" @submit="changeUser" @close="closeModal">
      <Form :label-width="75">
        <FormItem label="用户名称">
          <Input size="large" v-model="form.name" disabled />
        </FormItem>
        <FormItem label="用户角色">
          <Select v-model="form.type" size="large">
            <Option :value="-1">未分配</Option>
            <Option :value="item.roleType" v-for="item in roleList" :key="item.roleId">{{ item.remark }}</Option>
          </Select>
        </FormItem>
        <FormItem label="手机号码">
          <Input size="large" v-model="form.phone" disabled />
        </FormItem>
      </Form>
    </CModal>
  </div>
</template>

<script>
import tables from 'components/tables'
import { fetchUserList, updateUser, fetchRoleList } from 'api/'
import CModal from 'components/Modal'

const roleMap = {
  0: '超级管理员',
  1: '普通管理员',
  2: '经纪人',
}
export default {
  data() {
    return {
      show: false,
      form: {},
      // 传递给tables的表格列数据
      dataApi: fetchUserList,
      roleList: [],
      columns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 80
        },
        {
          title: '账号ID',
          key: 'admin_id',
          align: 'center'
        },
        {
          title: '账号名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '角色',
          key: 'type',
          align: 'center',
          render: (h, params) => {
            return h('span', roleMap[params.row.type])
          }
        },
        {
          title: '联系方式',
          key: 'phone',
          align: 'center'
        },
        {
          title: '启动状态',
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h('i-switch', {
              props: {
                trueValue: 1,
                falseValue: 0,
                value: params.row.enable,
                // disabled: params.row.roleKey === 'admin'
              },
              on: {
                'on-change': (val) => {
                  updateUser(Object.assign(params.row, {enable: val})).catch (err => {
                    params.row.enable = !val ? 1 : 0
                  })
                }
              }
            })
          }
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          tools: ['edit' ],
          align: 'center'
        }
      ],
    }
  },
  components: {
    tables,
    CModal
  },
  mounted () {
    this.fetchRoleList()
  },
  methods: {
    fetchRoleList () {
      fetchRoleList().then(res => {
        this.roleList = res.data
      })
    },
    async changeUser () {
      await updateUser(this.form)
      this.closeModal()
      this.$Message.success({
        content: '修改成功'
      })
      this.$refs['table'].handleTableData()
    },
    toEdit (row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.show = true
    },
    closeModal () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.house-list {
  padding: 20px;
  background: #252828;
}

</style>