fs-admin/src/views/system/User.vue

<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'
import { getUserList, saveUser, deleteUser, checkLoginName } from '@/api/user'
import { getRoleList } from '@/api/role'

const curRow = ref<any>(null)

const CRUD: ICRUD = {
  create(data: any) {
    return saveUser(data)
  },
  update(data: any) {
    if (data.password) {
      data.newPassword = data.password
    } else {
      delete data.password
    }
    delete data.roleList
    data.oldLoginName = curRow.value.loginName
    return saveUser(data)
  },
  getList(data: any) {
    return getUserList(data)
  },
  delete(data: any) {
    return deleteUser({ ids: data.id })
  },
  deleteBatch(data: any) {
    return deleteUser({ ids: data.id })
  }
}

const duplicate = (rule: any, value: any, callback: any) => {
  checkLoginName({
    oldLoginName: curRow.value?.loginName || '',
    loginName: value
  }).then((res: any) => {
    if (res === 'true') {
      callback()
    } else {
      callback(new Error('此登录名已存在'))
    }
  })
}
const formConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '用户名',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      search: true
    },
    {
      label: '登录名',
      value: '',
      name: 'loginName',
      type: 'input',
      rules: [
        { required: true, message: '请输入登录名', trigger: 'blur' },
        { validator: duplicate, trigger: 'blur' }
      ],
      search: true
    },
    {
      label: '密码',
      value: '',
      name: 'password',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '手机号',
      value: '',
      name: 'phone',
      type: 'input',
      search: true,
      props: {
        maxlength: 11
      }
    },
    {
      label: '角色',
      value: '',
      name: 'roleIdList',
      type: 'select',
      request: () => {
        return getRoleList({
          pageSize: -1,
          name: ''
        }).then((res: any) => {
          return res.rows.map((item: any) => {
            return {
              value: item.id,
              label: item.name
            }
          })
        })
      },
      rules: [{ required: true, message: '请选择角色', trigger: 'blur' }],
      props: {
        multiple: true,
        clearable: true
      }
    },
    {
      label: '启用',
      value: '1',
      name: 'loginFlag',
      type: 'switch',
      props: {
        'active-value': '1',
        'inactive-value': '0'
      }
    }
  ]
})

const handleCreate = () => {
  curRow.value = null
  formConfig.formItems[2].rules = [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const handleEdit = (row: any) => {
  curRow.value = row
  formConfig.formItems[2].rules = []
}
</script>

<template>
  <pro-table
    :crud="CRUD"
    :formConfig="formConfig"
    :toolbarConfig="{ custom: true }"
    @click-create="handleCreate"
    @click-edit="handleEdit"
  >
    <vxe-column field="name" title="用户名"></vxe-column>
    <vxe-column field="loginName" title="登录名"></vxe-column>
    <vxe-column field="phone" title="手机号"></vxe-column>
  </pro-table>
</template>

<style lang="scss" scoped></style>