219 lines
5.8 KiB
Vue
219 lines
5.8 KiB
Vue
<!-- 配置编辑弹窗 -->
|
||
<template>
|
||
<ele-modal
|
||
form
|
||
destroy-on-close
|
||
:width="460"
|
||
v-model="visible"
|
||
:title="isUpdate ? '修改配置' : '添加配置'"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="80px"
|
||
@submit.prevent=""
|
||
>
|
||
|
||
<el-form-item label="配置标题" prop="title">
|
||
<el-input
|
||
clearable
|
||
:maxlength="20"
|
||
v-model="form.title"
|
||
placeholder="请输入配置标题(一般由中文组成，仅用于显示)"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="配置名称" prop="name">
|
||
<el-input
|
||
clearable
|
||
:maxlength="20"
|
||
v-model="form.name"
|
||
placeholder="请输入配置名称"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- //由英文字母和下划线组成，如 web_site_title，调用方法：config('web_site_title')-->
|
||
<el-form-item label="配置类型" prop="type">
|
||
<el-select
|
||
clearable
|
||
class="ele-fluid"
|
||
placeholder="请选择配置类型"
|
||
v-model="form.type"
|
||
>
|
||
<el-option value="-" label="分割线" />
|
||
<el-option value="alert" label="提示" />
|
||
<el-option value="card" label="卡片" />
|
||
<el-option value="text" label="单行文本" />
|
||
<el-option value="textarea" label="多行文本" />
|
||
<el-option value="password" label="密码" />
|
||
<el-option value="checkbox" label="复选框" />
|
||
<el-option value="radio" label="单选按钮" />
|
||
<el-option value="date" label="日期" />
|
||
<el-option value="datetime" label="日期+时间" />
|
||
<el-option value="time" label="时间" />
|
||
<el-option value="switch" label="开关" />
|
||
<el-option value="hidden" label="隐藏" />
|
||
<el-option value="time" label="时间" />
|
||
<el-option value="range" label="范围" />
|
||
<el-option value="date_range" label="日期范围" />
|
||
<el-option value="datetime_range" label="日期时间范围" />
|
||
<el-option value="time_range" label="时间范围" />
|
||
<el-option value="number" label="数字" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="配置值">
|
||
<el-input
|
||
:rows="4"
|
||
type="textarea"
|
||
v-model="form.value"
|
||
placeholder="请输入配置值"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="配置项">
|
||
<el-input
|
||
:rows="4"
|
||
type="textarea"
|
||
v-model="form.options"
|
||
placeholder="请输入配置项"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="Bind属性">
|
||
<el-input
|
||
:rows="4"
|
||
type="textarea"
|
||
v-model="form.bind"
|
||
placeholder="请输入Bind属性"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="配置说明">
|
||
<el-input
|
||
:rows="4"
|
||
type="textarea"
|
||
v-model="form.tips"
|
||
placeholder="请输入配置说明"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input
|
||
:rows="4"
|
||
type="textarea"
|
||
v-model="form.comments"
|
||
placeholder="请输入备注"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="handleCancel">取消</el-button>
|
||
<el-button type="primary" :loading="loading" @click="save">
|
||
保存
|
||
</el-button>
|
||
</template>
|
||
</ele-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, watch } from 'vue';
|
||
import type { FormInstance, FormRules } from 'element-plus';
|
||
import { EleMessage } from 'ele-admin-plus';
|
||
import { useFormData } from '@/utils/use-form-data';
|
||
import type { Config } from '@/api/system/config/model';
|
||
import {addConfig, updateConfig} from "@/api/system/config";
|
||
|
||
const props = defineProps<{
|
||
/** 修改回显的数据 */
|
||
data?: Config | null;
|
||
/** 配置所属组 */
|
||
group?: string | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'done'): void;
|
||
}>();
|
||
|
||
/** 弹窗是否打开 */
|
||
const visible = defineModel({ type: Boolean });
|
||
|
||
/** 是否是修改 */
|
||
const isUpdate = ref(false);
|
||
|
||
/** 提交状态 */
|
||
const loading = ref(false);
|
||
|
||
/** 表单实例 */
|
||
const formRef = ref<FormInstance | null>(null);
|
||
|
||
/** 表单数据 */
|
||
const [form, resetFields, assignFields] = useFormData<Config>({
|
||
id: void 0,
|
||
comments: '',
|
||
group: '',
|
||
title: '',
|
||
name: '',
|
||
type: '',
|
||
tips: '',
|
||
options: '',
|
||
value: '',
|
||
});
|
||
|
||
/** 表单验证规则 */
|
||
const rules = reactive<FormRules>({
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: '请输入配置名称',
|
||
type: 'string',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
title: [
|
||
{
|
||
required: true,
|
||
message: '请输入配置标题',
|
||
type: 'string',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
});
|
||
|
||
/** 关闭弹窗 */
|
||
const handleCancel = () => {
|
||
visible.value = false;
|
||
};
|
||
|
||
/** 保存编辑 */
|
||
const save = () => {
|
||
formRef.value?.validate?.((valid) => {
|
||
if (!valid) {
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
const saveOrUpdate = isUpdate.value ? updateConfig : addConfig;
|
||
saveOrUpdate(form)
|
||
.then((msg) => {
|
||
loading.value = false;
|
||
EleMessage.success({ message: msg, plain: true });
|
||
handleCancel();
|
||
emit('done');
|
||
})
|
||
.catch((e) => {
|
||
loading.value = false;
|
||
EleMessage.error({ message: e.message, plain: true });
|
||
});
|
||
});
|
||
};
|
||
|
||
/** 监听弹窗打开 */
|
||
watch(visible, () => {
|
||
if (visible.value) {
|
||
if (props.data) {
|
||
assignFields(props.data);
|
||
isUpdate.value = true;
|
||
} else {
|
||
resetFields();
|
||
isUpdate.value = false;
|
||
}
|
||
form.group = props.group;
|
||
}
|
||
});
|
||
</script>
|