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

<template>
  <a-modal v-model:visible="visible" :title="title" @ok="ok" @cancel="editHandleCancel" width="48%">
    <a-form ref="formRef" :model="edit_form" auto-label-width>
      <a-row :gutter="20">
        <a-col :span="10">
          <a-form-item field="loginName" label="用户名" :rules="[
            { required: true, message: '用户名必填' },
            { maxLength: 50, message: '长度不超过50' },
          ]">
            <a-input v-model="edit_form.loginName" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item field="userName" label="姓名">
            <a-input v-model="edit_form.userName" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="10">
          <a-form-item field="phoneNumber" label="手机号">
            <a-input v-model="edit_form.phoneNumber" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <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="20">
        <a-col :span="10">
          <a-form-item field="password" label="密码">
            <a-input v-model="edit_form.password" type="password" />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item field="role" label="角色">
            <a-select multiple v-model="edit_form.role" :options="roles" :field-names="field_names"
              @change="roleChange">
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

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

// 定义组件的 props（根据实际需要进行修改）
const props = defineProps({
  edit_form: Object,
  visible: Boolean,
  title: String,
  roles: Array,
  field_names: Object
});

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

const { edit_form, visible, title, roles, field_names } = toRefs(props);

// 处理确认事件
const ok = () => {
  // 进行表单验证和提交逻辑
  // 根据需要增加表单验证逻辑
  emit('ok', edit_form);
}

const editHandleCancel = () => {
  emit('cancel');
  visible.value = false;
}

// 角色变化处理
const roleChange = (selectedRoles) => {
  edit_form.role = selectedRoles;
}
</script>

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