feat: complete rsf-design phase 1 integration

zhou zhou

15 小时以前 40905cbd04c2e332cd4bc2b9e0c5b3e1da9cccfa

 rsf-design/src/views/system/role/modules/role-edit-dialog.vue

@@ -1,109 +1,147 @@
<template>
  <ElDialog
    v-model="visible"
    :title="dialogType === 'add' ? '新增角色' : '编辑角色'"
    width="30%"
    :title="dialogTitle"
    :model-value="visible"
    width="720px"
    align-center
    @close="handleClose"
    @update:model-value="handleCancel"
    @closed="handleClosed"
  >
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
      <ElFormItem label="角色名称" prop="roleName">
        <ElInput v-model="form.roleName" placeholder="请输入角色名称" />
      </ElFormItem>
      <ElFormItem label="角色编码" prop="roleCode">
        <ElInput v-model="form.roleCode" placeholder="请输入角色编码" />
      </ElFormItem>
      <ElFormItem label="描述" prop="description">
        <ElInput
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="请输入角色描述"
        />
      </ElFormItem>
      <ElFormItem label="启用">
        <ElSwitch v-model="form.enabled" />
      </ElFormItem>
    </ElForm>
    <ArtForm
      ref="formRef"
      v-model="form"
      :items="formItems"
      :rules="rules"
      :span="12"
      :gutter="20"
      label-width="110px"
      :show-reset="false"
      :show-submit="false"
    />

    <template #footer>
      <ElButton @click="handleClose">取消</ElButton>
      <ElButton type="primary" @click="handleSubmit">提交</ElButton>
      <span class="dialog-footer">
        <ElButton @click="handleCancel">取消</ElButton>
        <ElButton type="primary" @click="handleSubmit">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<script setup>
  import ArtForm from '@/components/core/forms/art-form/index.vue'
  import { buildRoleDialogModel, createRoleFormState } from '../rolePage.helpers'

  const props = defineProps({
    modelValue: { required: false, default: false },
    visible: { required: false, default: false },
    dialogType: { required: false, default: 'add' },
    roleData: { required: false, default: void 0 }
    roleData: { required: false, default: () => ({}) }
  })
  const emit = defineEmits(['update:modelValue', 'success'])

  const emit = defineEmits(['update:visible', 'submit'])
  const formRef = ref()
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  })
  const rules = reactive({
    roleName: [
      { required: true, message: '请输入角色名称', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    roleCode: [
      { required: true, message: '请输入角色编码', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
  })
  const form = reactive({
    roleId: 0,
    roleName: '',
    roleCode: '',
    description: '',
    createTime: '',
    enabled: true
  })
  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal) initForm()
    }
  )
  watch(
    () => props.roleData,
    (newData) => {
      if (newData && props.modelValue) initForm()
  const form = reactive(createRoleFormState())

  const isEdit = computed(() => props.dialogType === 'edit')
  const dialogTitle = computed(() => (isEdit.value ? '编辑角色' : '新增角色'))

  const rules = computed(() => ({
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
  }))

  const formItems = computed(() => [
    {
      label: '角色名称',
      key: 'name',
      type: 'input',
      props: {
        placeholder: '请输入角色名称',
        clearable: true
      }
    },
    { deep: true }
  )
  const initForm = () => {
    if (props.dialogType === 'edit' && props.roleData) {
      Object.assign(form, props.roleData)
    } else {
      Object.assign(form, {
        roleId: 0,
        roleName: '',
        roleCode: '',
        description: '',
        createTime: '',
        enabled: true
      })
    {
      label: '角色编码',
      key: 'code',
      type: 'input',
      props: {
        placeholder: '请输入角色编码',
        clearable: true
      }
    },
    {
      label: '状态',
      key: 'status',
      type: 'select',
      props: {
        placeholder: '请选择状态',
        clearable: true,
        options: [
          { label: '正常', value: 1 },
          { label: '禁用', value: 0 }
        ]
      }
    },
    {
      label: '备注',
      key: 'memo',
      type: 'input',
      span: 24,
      props: {
        type: 'textarea',
        rows: 3,
        placeholder: '请输入备注',
        clearable: true
      }
    }
  ])

  const resetForm = () => {
    Object.assign(form, createRoleFormState())
    formRef.value?.clearValidate?.()
  }
  const handleClose = () => {
    visible.value = false
    formRef.value?.resetFields()

  const loadFormData = () => {
    Object.assign(form, buildRoleDialogModel(props.roleData))
  }

  const handleSubmit = async () => {
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      const message = props.dialogType === 'add' ? '新增成功' : '修改成功'
      ElMessage.success(message)
      emit('success')
      handleClose()
    } catch (error) {
      console.log('表单验证失败:', error)
      emit('submit', { ...form })
    } catch {
      return
    }
  }

  const handleCancel = () => {
    emit('update:visible', false)
  }

  const handleClosed = () => {
    resetForm()
  }

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        loadFormData()
        nextTick(() => {
          formRef.value?.clearValidate?.()
        })
      }
    },
    { immediate: true }
  )

  watch(
    () => props.roleData,
    () => {
      if (props.visible) {
        loadFormData()
      }
    },
    { deep: true }
  )
</script>