128 lines
3.0 KiB
Plaintext
128 lines
3.0 KiB
Plaintext
<template>
|
|
<basicModal @register="modalRegister" ref="modalRef" @ok="okModal">
|
|
<template #default>
|
|
<BasicForm @register="registerForm" :labelCol="{ span: 5 }" class="pt-6" />
|
|
</template>
|
|
</basicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, computed } from 'vue';
|
|
import { BasicForm, useForm } from '@/components/Form/index';
|
|
import { basicModal, useModal } from '@/components/Modal';
|
|
import { Password } from '@/components/Password';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '添加字典',
|
|
},
|
|
isEdit: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
createType: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
});
|
|
|
|
const typeName = computed(() => {
|
|
return props.createType === 1 ? '' : '项';
|
|
});
|
|
|
|
//表单项配置
|
|
const schemas = computed(() => [
|
|
{
|
|
field: 'label',
|
|
component: 'Input',
|
|
label: `字典${typeName.value}名称`,
|
|
componentProps: {
|
|
placeholder: `请输入字典${typeName.value}名称`,
|
|
},
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: `请输入字典${typeName.value}名称`,
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
field: 'value',
|
|
component: 'Input',
|
|
label: `字典${typeName.value}值`,
|
|
componentProps: {
|
|
placeholder: `请输入字典${typeName.value}值`,
|
|
},
|
|
rules: [
|
|
{
|
|
required: true,
|
|
message: `请输入字典${typeName.value}值`,
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
field: 'order',
|
|
component: 'InputNumber',
|
|
label: '排序',
|
|
componentProps: {
|
|
placeholder: '请输入排序',
|
|
},
|
|
rules: [{ required: true, type: 'number', message: '请输入排序', trigger: ['blur'] }],
|
|
},
|
|
{
|
|
field: 'remark',
|
|
component: 'Input',
|
|
label: '备注',
|
|
componentProps: {
|
|
placeholder: '请输入备注',
|
|
type: 'textarea',
|
|
},
|
|
},
|
|
]);
|
|
|
|
const title = ref(props.title);
|
|
|
|
//创建form
|
|
const [registerForm, { submit, setFieldsValue }] = useForm({
|
|
rowProps: { span: 24 },
|
|
colProps: { span: 24 },
|
|
layout: 'horizontal',
|
|
submitButtonText: '确定',
|
|
showActionButtonGroup: false,
|
|
schemas,
|
|
});
|
|
|
|
//弹窗
|
|
const [modalRegister, { openModal, closeModal, setSubLoading, setProps }] = useModal({
|
|
title,
|
|
subBtuText: '确定',
|
|
width: 450,
|
|
});
|
|
|
|
//提交
|
|
async function okModal() {
|
|
const formRes = await submit();
|
|
if (formRes) {
|
|
// const { isEdit } = props;
|
|
message.error('抱歉，您没有操作权限');
|
|
//message.success(isEdit ? '修改成功' : '添加成功');
|
|
closeModal();
|
|
} else {
|
|
message.error('验证失败，请填写完整信息');
|
|
setSubLoading(false);
|
|
}
|
|
}
|
|
|
|
//导出方法
|
|
defineExpose({
|
|
openModal,
|
|
closeModal,
|
|
setFieldsValue,
|
|
setProps,
|
|
});
|
|
</script>
|