smartai2dian0/src/modules/permission/account/AccountForm.vue

<template>
  <a-form :model="edit_form" auto-label-width>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="userName" label="用户名" :rules="[
          { required: true, message: '用户名必填' },
          { maxLength: 50, message: '长度不超过50' },
        ]">
          <a-input v-model="edit_form.userName" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="loginName" label="姓名">
          <a-input v-model="edit_form.loginName" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item field="phone" label="手机号">
          <a-input v-model="edit_form.phone" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item required field="email" label="邮箱" :rules="[
          { required: true, message: '邮箱必填' },
          { maxLength: 50, message: '长度不超过50' },
        ]">
          <a-input v-model="edit_form.email" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <!-- 编辑则不显示密码 -->
      <a-col v-if="!edit_mode" :span="12">
        <a-form-item field="pwd" label="密码">
          <a-input v-model="edit_form.pwd" type="pwd" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="role" label="角色">
          <a-select multiple v-model="edit_form.role" :options="roles" @change="roleChange">
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { toRefs } from 'vue';

const props = defineProps({
  edit_form: Object,
  edit_mode: Boolean,
  roles: Array,
});

// 事件发射器
const emit = defineEmits(['ok', 'cancel']);

const { edit_form, edit_mode, roles } = toRefs(props);

// 角色变化处理
const roleChange = (selectedRoles) => {

  edit_form.role = selectedRoles;
}
</script>

<style lang="css" scoped>
/* 这里可以添加自定义样式 */
</style>