restructure/src/views/system/user/components/UserModal.vue

<template>
  <Modal :options="getModalOptions" @on-close="handleClose">
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        :rules="rules"
      >
        <n-form-item
          label="头像:"
          path="avatar"
        >
          <n-upload
            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
            :default-file-list="previewFileList"
            list-type="image-card"
            @preview="handlePreview"
          />
          <n-modal
            v-model:show="showModal"
            preset="card"
            style="width: 600px"
            title="头像"
          >
            <img :src="form.avatar" style="width: 100%">
          </n-modal>
        </n-form-item>
        <n-form-item label="用户编号:" path="code">
          <n-input
            v-model:value="form.code"
            clearable
            :maxlength="20"
            placeholder="请输入用户编号"
          />
        </n-form-item>
        <n-form-item label="所属部门:" path="deptId">
          <n-select
            v-model:value="form.deptId"
            :options="deptOptions"
            placeholder="请选择所属部门"
          />
        </n-form-item>
        <n-form-item label="用户账号:" path="username">
          <n-input
            v-model:value="form.username"
            clearable
            :maxlength="20"
            placeholder="请输入用户账号"
          />
        </n-form-item>
        <n-form-item
          label="登录密码:"
          path="password"
        >
          <n-input
            v-model:value="form.password"
            type="password"
            :maxlength="20"
            placeholder="请输入登录密码"
          />
        </n-form-item>
        <n-form-item label="角色:" path="roleIds">
          <n-select
            v-model:value="form.roleIds"
            clearable
            :multiple="true"
            :options="rolesOptions"
            placeholder="请选择角色"
          />
        </n-form-item>
        <n-form-item
          v-if="form.type==2"
          label="驾照类型："
          path="driverType"
        >
          <n-select
            v-model:value="form.driverType"
            clearable
            :options="[1, 2]"
            placeholder="请选择驾照类型"
          />
        </n-form-item>
        <n-form-item label="用户姓名:" path="realname">
          <n-input
            v-model:value="form.realname"
            clearable
            :maxlength="20"
            placeholder="请输入用户姓名"
          />
        </n-form-item>
        <n-form-item label="状态" path="status">
          <n-radio-group
            v-model:value="form.status"
          >
            <n-radio :value="1">正常</n-radio>
            <n-radio :value="2">禁用</n-radio>
          </n-radio-group>
        </n-form-item>

        <n-form-item label="用户类型" path="type">
          <n-radio-group
            v-model:value="form.type"
          >
            <n-radio :value="1">普通用户</n-radio>
            <n-radio :value="2">飞手</n-radio>
          </n-radio-group>
        </n-form-item>
        <n-form-item
          v-if="form.type==2"
          label="驾照编号:"
          path="driverCode"
        >
          <n-input
            v-model:value="form.driverCode"
            clearable
            :maxlength="20"
            placeholder="请输入驾照编号"
          />
        </n-form-item>
        <n-form-item
          label="备注:"
          :label-col="{sm: {span: 3}, xs: {span: 6}}"
          :wrapper-col="{sm: {span: 21}, xs: {span: 18}}"
        >
          <n-input
            v-model:value="form.note"
            type="textarea"
            :rows="3"
            :maxlength="200"
            placeholder="请输入备注"
          />
        </n-form-item>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
import Modal from '@/components/CardModal/index.vue'
import { getDeptAll } from '@/api/system/dept/index'
import { getRoleAll } from '@/api/system/role/index'
import { dataToSelect } from '@/utils/handleData.js'
export default defineComponent({
  name: 'UserModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '添加用户'
    }
  },
  emits: {
    'update:visible': null,
    onClose: null,
    done: null
  },
  setup(props, { emit }) {
    const getModalOptions = computed(() => {
      return {
        title: props.title,
        show: props.visible
      }
    })

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    const form = reactive({
      avatar: '',
      code: '',
      deptId: null,
      username: '',
      realname: '',
      password: '',
      roleIds: [],
      driverType: null,
      driverCode: '',
      type: 1,
      status: 1,
      note: ''

    })

    const optionsList = reactive({
      deptOptions: [],
      rolesOptions: []
    })
    // 获取部门列表
    async function getDeptOptions() {
      const res = await getDeptAll()
      optionsList.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
      console.log('部门选项：', optionsList.deptOptions)
    }

    // 获取角色列表
    async function getRoleOptions() {
      const res = await getRoleAll()
      optionsList.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
    }

    onMounted(() => {
      getDeptOptions()
      getRoleOptions()
    })

    // 上传文件
    const handleUpload = ({ file, event }) => {
      console.log(event)
      form.avatar = file.url
    }
    return {
      getModalOptions,
      handleClose,
      form,
      rules: reactive({
        avatar: {
          required: true,
          trigger: 'blur',
          message: '请上传头像'
        },
        code: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入用户编号'
        },
        deptId: {
          required: true,
          trigger: 'blur',
          message: '请选择部门'
        }
      }),
      handleUpload,
      ...toRefs(optionsList)
    }
  },
  methods: {

  }
})
</script>
<style scoped lang='scss'>
</style>