From 40905cbd04c2e332cd4bc2b9e0c5b3e1da9cccfa Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期一, 30 三月 2026 08:17:32 +0800
Subject: [PATCH] feat: complete rsf-design phase 1 integration
---
rsf-design/src/views/system/role/modules/role-edit-dialog.vue | 206 ++++++++++++++++++++++++++++++---------------------
1 files changed, 122 insertions(+), 84 deletions(-)
diff --git a/rsf-design/src/views/system/role/modules/role-edit-dialog.vue b/rsf-design/src/views/system/role/modules/role-edit-dialog.vue
index 08d3e41..713149b 100644
--- a/rsf-design/src/views/system/role/modules/role-edit-dialog.vue
+++ b/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>
--
Gitblit v1.9.1