<template>
|
<app-dialog-form
|
v-bind="dialogFormProps"
|
v-loading="appStore.getLoading('sys_library_rule')"
|
>
|
<app-form-fields v-bind="formFieldsProps">
|
<template #format_content="scope">
|
<el-form-item label="规则配置" required>
|
|
<el-tooltip
|
v-if="scope.model.format_type"
|
effect="dark"
|
:content="from[scope.model.format_type]?.desc"
|
placement="top-start"
|
>
|
<el-button class="prompt" icon="QuestionFilled" link></el-button>
|
</el-tooltip>
|
|
<div class="price" v-if="scope.model.format_type === 'number'">
|
<!-- width: 200px;-->
|
<!-- display: flex;-->
|
<!-- justify-content: space-around;-->
|
<el-select v-model="from.number.prefix" placeholder="请选择">
|
<el-option label="无" value=""/>
|
<el-option label="¥" value="¥"/>
|
<el-option label="$" value="$"/>
|
</el-select>
|
<el-select v-model="from.number.suffix" placeholder="请选择">
|
<el-option label="整数" value="."/>
|
<el-option label="1位小数" value=".0"/>
|
<el-option label="2位小数" value=".00"/>
|
<el-option label="3位小数" value=".000"/>
|
<el-option label="4位小数" value=".0000"/>
|
<el-option label="5位小数" value=".00000"/>
|
</el-select>
|
</div>
|
|
|
<div class="date" v-if="scope.model.format_type === 'date'">
|
<el-input v-model="from.date.format" placeholder="请输入模版"/>
|
<div class="example" v-if="from.date.format">{{ from.date.example }}</div>
|
</div>
|
</el-form-item>
|
</template>
|
<template #parent="scope">
|
<div>{{ scope.model.type_name }}</div>
|
</template>
|
</app-form-fields>
|
</app-dialog-form>
|
</template>
|
|
<script setup>
|
|
import dayjs from 'dayjs';
|
import modal from '@/plugins';
|
|
import {useI18n} from 'vue-i18n';
|
|
const {t} = useI18n();
|
|
import {meta} from "@/hooks";
|
|
const {useMetaData} = meta;
|
|
import {useEntityStore, useAppStore} from '@/store/modules/index.js';
|
import {formatDateformat} from "@/utils/format.js";
|
|
const from = reactive({
|
number: {
|
prefix: '',
|
suffix: '',
|
desc: '选择前缀和尾号小数位'
|
},
|
date: {
|
format: '',
|
example: computed(() => dayjs(new Date()).format(formatDateformat(from.date.format)).toString()),
|
desc: 'yyyy 年份 MM 月份 dd日期 HH时 mm分 ss秒'
|
}
|
});
|
|
const [columns, filters, fields] = useMetaData(
|
'sys_library_rule',
|
async ({fieldsTools}) => {
|
fieldsTools.assign('type_name', {input: {readonly: true}});
|
|
fieldsTools.splice(0, 0,
|
{
|
type: 'el-input',
|
prop: "type_name",
|
label: '类型',
|
col: {span: 12},
|
input: {
|
placeholder: '请输入',
|
readonly: true
|
},
|
item: {
|
prop: 'type_name',
|
label: '规则类型'
|
}
|
});
|
|
|
fieldsTools.assign('format_content', {
|
type: 'slot',
|
prop: "format_content",
|
label: '公式配置',
|
col: {span: 12},
|
item: {
|
label: '公式配置',
|
prop: 'format_content',
|
rules: [{required: true, message: '请输入公式配置'}],
|
},
|
}
|
);
|
|
fieldsTools.assign(
|
'format_type',
|
{
|
type: 'el-select',
|
prop: "format_type",
|
label: '数据类型',
|
col: {span: 12},
|
item: {
|
label: '数据类型',
|
prop: 'format_type',
|
rules: [{required: true, message: '请选择'}],
|
},
|
select: {
|
placeholder: '请选择',
|
options: [{
|
name: 'date',
|
label: '日期类型'
|
}, {
|
name: 'number',
|
label: '数值类型'
|
}],
|
valueKey: 'name',
|
labelKey: 'label',
|
}
|
}
|
);
|
}
|
);
|
|
const entityStore = useEntityStore();
|
const appStore = useAppStore();
|
|
const dialogFormRef = ref();
|
const formFieldsRef = ref();
|
|
const props = defineProps({
|
subReload: {
|
type: Function,
|
default: () => {
|
}
|
},
|
});
|
|
const formFieldsProps = {
|
ref: formFieldsRef,
|
fields
|
}
|
|
const dialogFormProps = {
|
title: '',
|
ref: dialogFormRef,
|
subSubmit: async () => {
|
const data = await formFieldsRef.value.onValidate();
|
const {type_code = '', id = ''} = formFieldsRef.value.getDefaultModel();
|
|
if (data.format_type === 'number') {
|
if (!from.number.prefix || !from.number.suffix) {
|
modal.msgError('请选择规则！');
|
throw '';
|
}
|
data.format_content = `${from.number.prefix}${from.number.suffix}`;
|
}
|
if (data.format_type === 'date') {
|
if (!from.date.format) {
|
modal.msgError('请输入日期格式！');
|
throw '';
|
}
|
data.format_content = `${from.date.format}`;
|
}
|
|
await entityStore.saveEntity({
|
dataName: 'sys_library_rule',
|
data: {
|
'sys_library_rule': {
|
...(id ? {id} : {}),
|
type_code,
|
...data
|
}
|
}
|
});
|
props.subReload(Boolean(!id));
|
},
|
subReset: async () => {
|
formFieldsRef.value.onReset();
|
}
|
};
|
const onOpen = async (row, filterFields) => {
|
from.number.prefix = '';
|
from.number.suffix = '';
|
from.date.format = '';
|
if (row.id) {
|
if (row.format_type === 'number') {
|
from.number.prefix = row.format_content.split('.')[0];
|
from.number.suffix = `.${row.format_content.split('.')[1]}`;
|
}
|
if (row.format_type === 'date') {
|
from.date.format = row.format_content;
|
}
|
}
|
|
dialogFormProps.title = t(row.id ? 'common.dialog.title.edit' : 'common.dialog.title.add');
|
dialogFormRef.value.$forceUpdate(dialogFormProps)
|
dialogFormRef.value.onOpen();
|
|
await nextTick();
|
formFieldsProps.fields = fields.filter(e => filterFields.includes(e.prop));
|
formFieldsRef.value.$forceUpdate(formFieldsProps);
|
formFieldsRef.value.setDefaultModel(row);
|
}
|
|
defineExpose({
|
onOpen,
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
.prompt {
|
position: absolute;
|
left: -83px;
|
}
|
|
.price {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.el-select:first-child {
|
margin-right: 20px;
|
}
|
}
|
|
.date {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.example {
|
position: absolute;
|
left: 0;
|
top: 32px;
|
}
|
}
|
|
.prompt {
|
position: absolute;
|
left: -90px;
|
}
|
</style>
|
