134 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			134 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
 | 
						|
 | 
						|
<template>
 | 
						|
  <div>
 | 
						|
    <Curd
 | 
						|
     :columns="columns"
 | 
						|
     :api-conf="apiConf"
 | 
						|
     :form-items="formItems"
 | 
						|
     @edit="editHandler"
 | 
						|
    />
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import base from "~/templates/base";
 | 
						|
import Curd from "../../components/smallCommon/Curd.vue";
 | 
						|
export default {
 | 
						|
  name: "user",
 | 
						|
  extends: base,
 | 
						|
  components: {
 | 
						|
    Curd
 | 
						|
  },
 | 
						|
  data () {
 | 
						|
    const self = this
 | 
						|
    return {
 | 
						|
      isEdit: false,
 | 
						|
      roles: [],
 | 
						|
      columns: [
 | 
						|
        {
 | 
						|
          dataIndex: 'username',
 | 
						|
          key: 'username',
 | 
						|
          title: '用户名'
 | 
						|
        },
 | 
						|
 | 
						|
        {
 | 
						|
          dataIndex: 'email',
 | 
						|
          key: 'email',
 | 
						|
          title: '邮箱'
 | 
						|
        },
 | 
						|
        {
 | 
						|
          dataIndex: 'phone',
 | 
						|
          key: 'phone',
 | 
						|
          title: '电话'
 | 
						|
        },
 | 
						|
        {
 | 
						|
          dataIndex: 'roleId',
 | 
						|
          key: 'roleId',
 | 
						|
          title: '角色',
 | 
						|
          customRender (text) {
 | 
						|
            const item = (self.roles || []).find(item => item.value === text)
 | 
						|
            return item && item.label || ''
 | 
						|
          }
 | 
						|
        }
 | 
						|
      ],
 | 
						|
      apiConf: {
 | 
						|
        listApi: { api: '/api/User/List', method: 'get' },
 | 
						|
        deleteApi: { api: '/api/User/DeleteUser', method: 'post', paramsType: 'Object', deleteKey: 'userId' } ,
 | 
						|
        editApi: { api:  '/api/User/UpdateUser', method: 'post', },
 | 
						|
        addApi: { api:  '/api/User/Add', method: 'post' }
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  computed: {
 | 
						|
    formItems () {
 | 
						|
      const self = this
 | 
						|
      return [
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'username',
 | 
						|
          label: '用户名',
 | 
						|
          isSearch: true,
 | 
						|
          placeholder: '请输入用户名',
 | 
						|
          rules: [
 | 
						|
            { required: true, message: '请输入用户名' }
 | 
						|
          ]
 | 
						|
        },
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'password',
 | 
						|
          label: '密码',
 | 
						|
          placeholder: '请输入密码',
 | 
						|
          hide: self.isEdit,
 | 
						|
          rules: [
 | 
						|
            { required: true, message: '请输入密码' }
 | 
						|
          ]
 | 
						|
        },
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'email',
 | 
						|
          label: '邮箱',
 | 
						|
          placeholder: '请输入邮箱',
 | 
						|
        },
 | 
						|
        {
 | 
						|
          type: 'input',
 | 
						|
          key: 'phone',
 | 
						|
          label: '电话',
 | 
						|
          placeholder: '请输入电话',
 | 
						|
        },
 | 
						|
        {
 | 
						|
          type: 'select',
 | 
						|
          key: 'roleId',
 | 
						|
          label: '角色',
 | 
						|
          placeholder: '请选择角色',
 | 
						|
          children: self.roles,
 | 
						|
          rules: [
 | 
						|
            { required: true, message: '请选择角色' }
 | 
						|
          ]
 | 
						|
        }
 | 
						|
      ]
 | 
						|
    }
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    this.getRoles()
 | 
						|
  },
 | 
						|
 | 
						|
  methods: {
 | 
						|
    editHandler (isEdit) {
 | 
						|
      this.isEdit = isEdit
 | 
						|
    },
 | 
						|
    getRoles () {
 | 
						|
      this.$get('/api/Role/all').then(({ data }) => {
 | 
						|
        this.roles = data.map(item => ({
 | 
						|
          label: item.roleName,
 | 
						|
          value: item.id
 | 
						|
        }))
 | 
						|
      })
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style scoped lang="less">
 | 
						|
 | 
						|
</style>
 |