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

<template>
  <a-form ref="accountFormRef" :rules="rules" :model="edit_form" auto-label-width>
    <a-row :gutter="24" class="flex-row">
      <a-col :span="12" v-if="!is_edit_mode" class="flex-col">
        <a-form-item field="userName" :label="$t('permission.account.username')">
          <a-input v-model="edit_form.userName" />
        </a-form-item>
      </a-col>
      <a-col :span="12" class="flex-col">
        <a-form-item field="loginName" :label="$t('permission.account.name')">
          <a-input v-model="edit_form.loginName" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="flex-row">
      <a-col :span="12" class="flex-col">
        <a-form-item field="phone" :label="$t('permission.account.phone')">
          <a-input v-model="edit_form.phone" />
        </a-form-item>
      </a-col>
      <a-col :span="12" class="flex-col">
        <a-form-item required field="email" :label="$t('permission.account.email')">
          <a-input v-model="edit_form.email" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="flex-row">
      <a-col v-if="!is_edit_mode" :span="12" class="flex-col">
        <a-form-item field="pwd" :label="$t('permission.account.password')">
          <a-input v-model="edit_form.pwd" type="password" />
        </a-form-item>
      </a-col>
      <a-col :span="12" class="flex-col">
        <a-form-item field="roles" :label="$t('permission.account.roles')">
          <a-select
            multiple
            v-model="edit_form.roles"
            :options="role_list"
            :field-names="{ value: 'roleId', label: 'roleName' }"
            @change="roleChange"
          >
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" class="flex-row">
      <a-col :span="12" class="flex-col">
        <a-form-item field="groups" label="用户组">
          <a-select
            multiple
            v-model="edit_form.groups"
            :options="group_list"
            :field-names="{ value: 'groupId', label: 'groupName' }"
            @change="groupChange"
          >
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

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

const props = defineProps({
  edit_form: Object,
  is_edit_mode: Boolean,
  role_list: Array,
  group_list: Array
});

const rules = {
  userName: [{ required: true, message: '用户名必填' }],
  email: [{ required: true, message: '邮箱必填' }],
  pwd: [
    { required: true, message: '密码必填' },
    {
      validator: (value, cb) => {
        const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        if (value.length < 8 || !regex.test(value)) {
          cb('密码至少8位，且包含字母和数字');
        } else {
          cb();
        }
      }
    }
  ],
  roles: [{ required: true, message: '角色必选' }],
  groups: [{ required: true, message: '用户组必选' }]
};
const { edit_form, is_edit_mode, role_list, group_list } = toRefs(props);

// 角色变化处理
const roleChange = (selectedRoles) => {
  edit_form.role = selectedRoles;
};
// 用户组变化处理
const groupChange = (selectedGroups) => {
  edit_form.group = selectedGroups;
};
</script>

<style lang="css" scoped>
.flex-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
  /* 调整为实际的gutter值 */
}

.flex-col {
  padding-left: 12px;
  padding-right: 12px;
  /* 调整为实际的gutter值 */
  flex: 1;
  min-width: 0;
  /* 防止flex项目收缩 */
}
</style>