<script lang="ts" setup>
|
import { computed, onMounted, ref, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModal } from '@jnpf/ui/modal';
|
import { mergeNumberOfExps, validExp } from '@jnpf/utils';
|
|
import { ArrowLeftOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
import { cloneDeep } from 'lodash-es';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData', 'drawingList']);
|
const { createMessage } = useMessage();
|
const [registerModal, { openModal, closeModal }] = useModal();
|
const expressionTemp = ref<any[]>([]);
|
const expValid = ref(true);
|
const roundTypeList = [
|
{ fullName: '四舍五入', id: 1 },
|
{ fullName: '截断舍入', id: 2 },
|
{ fullName: '向上取整', id: 3 },
|
{ fullName: '向下取整', id: 4 },
|
];
|
const typeOptions = [
|
{ fullName: '数字', id: 1 },
|
{ fullName: '日期', id: 2 },
|
];
|
const startTypeOptions = [
|
{ fullName: '特定时间', id: 1 },
|
{ fullName: '表单字段', id: 2 },
|
{ fullName: '填写当前时间', id: 3 },
|
];
|
const dateUnitList = [
|
{ fullName: 'Y', tip: '年' },
|
{ fullName: 'M', tip: '月' },
|
{ fullName: 'd', tip: '天' },
|
{ fullName: 'h', tip: '时' },
|
{ fullName: 'm', tip: '分' },
|
{ fullName: 's', tip: '秒' },
|
];
|
const dateFormatOptions = [
|
{ fullName: '开始时间 00:00:00，结束时间 00:00:00', id: 1 },
|
{ fullName: '开始时间 00:00:00，结束时间 23:59:59', id: 2 },
|
];
|
|
const calculateComps = computed<any[]>(() => {
|
const list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
if (data.__config__ && data.__config__.jnpfKey && data.__vModel__ && ['calculate', 'inputNumber'].includes(data.__config__.jnpfKey)) {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
if (isTableChild && !isSameSource(data)) return;
|
list.push({
|
__vModel__: isTableChild ? `${parent.__vModel__}.${data.__vModel__}` : data.__vModel__,
|
label: isTableChild ? `${parent.__config__.label}.${data.__config__.label}` : data.__config__.label,
|
});
|
}
|
};
|
loop(props.drawingList);
|
return list;
|
});
|
const formFieldsOptions = computed(() => {
|
const list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && isIncludesTable(data) && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
if (data.__vModel__ && data.__config__.jnpfKey === 'datePicker' && data.__vModel__ !== props.activeData.__vModel__) {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
list.push({
|
id: isTableChild ? `${parent.__vModel__}.${data.__vModel__}` : data.__vModel__,
|
fullName: isTableChild ? `${parent.__config__.label}-${data.__config__.label}` : data.__config__.label,
|
...data,
|
});
|
}
|
};
|
loop(props.drawingList);
|
return list;
|
});
|
|
function openCalcModal() {
|
expressionTemp.value = cloneDeep(props.activeData.expression);
|
expValid.value = true;
|
openModal();
|
}
|
function handleSubmit() {
|
if (!expressionTemp.value.length) {
|
props.activeData.expression = expressionTemp.value;
|
closeModal();
|
return;
|
}
|
const formatExp = mergeNumberOfExps(expressionTemp.value);
|
const temp = formatExp.map((t) => (typeof t === 'object' ? 1 : t));
|
const boo = expressionTemp.value.some((o) => o.label === '无效的值');
|
if (boo) return createMessage.error(`编辑的公式含有无效的值，无法计算`);
|
expValid.value = validExp(temp, false);
|
if (expValid.value) {
|
props.activeData.expression = expressionTemp.value;
|
closeModal();
|
} else {
|
createMessage.error(`编辑的公式不符合计算法则，无法计算`);
|
}
|
}
|
function reloadExpressionTemp() {
|
const isValid = (d) => {
|
const target = unref(calculateComps).find((cmp) => cmp.__vModel__ === d.__vModel__ && cmp.__vModel__ === d.__vModel__);
|
return !!target;
|
};
|
expressionTemp.value = props.activeData.expression.map((t) => {
|
return typeof t === 'string' || isValid(t) ? t : { __vModel__: t.__vModel__, label: '无效的值' };
|
});
|
props.activeData.expression = expressionTemp.value;
|
}
|
function isSameSource(data) {
|
const isSubTable = props.activeData.__config__.isSubTable;
|
if (isSubTable) return data.__config__.isSubTable && props.activeData.__config__.parentVModel === data.__config__.parentVModel;
|
return true;
|
}
|
function isIncludesTable(data) {
|
if ((!data.__config__.layout || data.__config__.layout === 'rowFormItem') && data.__config__.jnpfKey !== 'table') return true;
|
if (props.activeData.__config__.isSubTable) return props.activeData.__config__.parentVModel === data.__vModel__;
|
return data.__config__.jnpfKey !== 'table';
|
}
|
function onStartTimeTypeChange() {
|
props.activeData.dateCalConfig.startTimeValue = null;
|
props.activeData.dateCalConfig.startRelationField = '';
|
}
|
function onEndTimeTypeChange() {
|
props.activeData.dateCalConfig.endTimeValue = null;
|
props.activeData.dateCalConfig.endRelationField = '';
|
}
|
function onTypeChange() {
|
props.activeData.thousands = false;
|
props.activeData.isAmountChinese = false;
|
}
|
|
onMounted(() => {
|
reloadExpressionTemp();
|
});
|
</script>
|
<template>
|
<a-form-item label="类型">
|
<jnpf-radio v-model:value="activeData.type" :options="typeOptions" option-type="button" button-style="solid" @change="onTypeChange" />
|
</a-form-item>
|
<template v-if="activeData.type === 1">
|
<a-form-item label="数字公式">
|
<div class="pane-calc-preview" @click="openCalcModal()">
|
<template v-if="activeData.expression.length">
|
<span
|
v-for="(item, index) in activeData.expression"
|
:key="index"
|
:class="{ 'calc-btn': typeof item !== 'string', error: typeof item !== 'string' && item.label === '无效的值' }">
|
{{ typeof item !== 'string' ? item.label : item }}
|
</span>
|
</template>
|
<span v-else class="placeholder-text">编辑数字公式</span>
|
</div>
|
</a-form-item>
|
</template>
|
<template v-else>
|
<a-form-item label="开始">
|
<jnpf-select v-model:value="activeData.dateCalConfig.startTimeType" :options="startTypeOptions" @change="onStartTimeTypeChange" />
|
<div class="mt-[10px]" v-if="activeData.dateCalConfig.startTimeType != 3">
|
<jnpf-date-picker
|
v-if="activeData.dateCalConfig.startTimeType == 1"
|
v-model:value="activeData.dateCalConfig.startTimeValue"
|
placeholder="请选择"
|
format="YYYY-MM-DD HH:mm:ss" />
|
<jnpf-select
|
v-else-if="activeData.dateCalConfig.startTimeType == 2"
|
v-model:value="activeData.dateCalConfig.startRelationField"
|
:options="formFieldsOptions" />
|
</div>
|
</a-form-item>
|
<a-form-item label="结束">
|
<jnpf-select v-model:value="activeData.dateCalConfig.endTimeType" :options="startTypeOptions" @change="onEndTimeTypeChange" />
|
<div class="mt-[10px]" v-if="activeData.dateCalConfig.endTimeType != 3">
|
<jnpf-date-picker
|
v-if="activeData.dateCalConfig.endTimeType == 1"
|
v-model:value="activeData.dateCalConfig.endTimeValue"
|
placeholder="请选择"
|
format="YYYY-MM-DD HH:mm:ss" />
|
<jnpf-select
|
v-else-if="activeData.dateCalConfig.endTimeType == 2"
|
v-model:value="activeData.dateCalConfig.endRelationField"
|
:options="formFieldsOptions" />
|
</div>
|
</a-form-item>
|
<a-form-item label="单位">
|
<jnpf-select v-model:value="activeData.dateCalConfig.dateUnit" :options="dateUnitList" :field-names="{ label: 'tip', value: 'fullName' }" />
|
</a-form-item>
|
<a-form-item label="格式化">
|
<p class="text-title">参与计算的日期未设置时间时，格式化方式为：</p>
|
<jnpf-select v-model:value="activeData.dateCalConfig.dateFormat" :options="dateFormatOptions" />
|
</a-form-item>
|
</template>
|
<a-form-item label="舍入类型">
|
<jnpf-select v-model:value="activeData.roundType" :options="roundTypeList" />
|
</a-form-item>
|
<a-form-item label="小数位数" v-if="[1, 2].includes(activeData.roundType)">
|
<a-input-number v-model:value="activeData.precision" placeholder="请输入" :min="0" :max="15" />
|
</a-form-item>
|
<template v-if="activeData.type === 1">
|
<a-form-item label="千位分隔">
|
<a-switch v-model:checked="activeData.thousands" />
|
</a-form-item>
|
<a-form-item label="大写金额">
|
<a-switch v-model:checked="activeData.isAmountChinese" />
|
</a-form-item>
|
</template>
|
<BasicModal @register="registerModal" title="编辑数字公式" @ok="handleSubmit" class="calc-modal">
|
<div class="calc-box">
|
<div class="calc-preview" :class="{ error: !expValid }">
|
数字公式 =
|
<span
|
v-for="(item, index) in expressionTemp"
|
:key="index"
|
:class="{ 'calc-btn': typeof item !== 'string', error: typeof item !== 'string' && item.label === '无效的值' }">
|
{{ typeof item !== 'string' ? item.label : item }}
|
</span>
|
<div class="preview-actions">
|
<a-tooltip title="删除" placement="bottom">
|
<ArrowLeftOutlined @click="expressionTemp.pop()" />
|
</a-tooltip>
|
<a-tooltip title="清空" placement="bottom">
|
<DeleteOutlined @click="expressionTemp = []" />
|
</a-tooltip>
|
</div>
|
</div>
|
<div class="calc-tip">
|
编辑数字公式可用来完成审批单内数据的自动结算，例如：采购单内设置数字公式“合计=单价×数量”，发起人填写单价、数量后，组件将自动计算出合计金额，免手动计算
|
</div>
|
<div>
|
<span>计算对象：</span>
|
<template v-if="calculateComps.length">
|
<span v-for="item in calculateComps" :key="item.__vModel__" @click="expressionTemp.push(item)" class="calc-btn">
|
{{ item.label }}
|
</span>
|
</template>
|
<span class="empty-text" v-else>暂无数据</span>
|
</div>
|
<div class="comBtn my-[10px]">
|
<span>计算符号：</span>
|
<span v-for="item in ['+', '-', '×', '÷', '(', ')']" class="calc-btn" :key="item" @click="expressionTemp.push(item)">{{ item }}</span>
|
</div>
|
<div class="my-[10px]">
|
<span style="float: left">数字键盘：</span>
|
<div class="numBtn comBtn">
|
<span :key="item" class="calc-btn" v-for="item in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']" @click="expressionTemp.push(item)">{{
|
item
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
<style lang="scss" scoped>
|
.pane-calc-preview {
|
min-height: 32px;
|
padding: 0 11px;
|
font-size: 13px;
|
cursor: pointer;
|
border: 1px solid var(--border-color-base);
|
border-radius: 2px;
|
|
.placeholder-text {
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 32px;
|
color: #bfbfbf;
|
}
|
|
span {
|
line-height: 32px;
|
}
|
|
.calc-btn {
|
&:first-child {
|
margin-left: 0;
|
}
|
}
|
}
|
|
.calc-btn {
|
padding: 4px 8px;
|
margin: 0 6px;
|
cursor: pointer;
|
background: var(--app-main-background);
|
|
&.error {
|
background: var(--error-color);
|
}
|
|
&:hover {
|
background: var(--app-content-background);
|
}
|
}
|
|
.calc-modal {
|
.calc-box {
|
font-size: 12px;
|
line-height: 2;
|
|
.calc-tip {
|
margin: 10px 0;
|
font-size: 12px;
|
color: var(--text-color-secondary);
|
}
|
|
.empty-text {
|
margin: 6px 0;
|
color: var(--text-color-secondary);
|
}
|
|
.numBtn {
|
width: 110px;
|
overflow: hidden;
|
line-height: 2.5;
|
}
|
|
.comBtn {
|
.calc-btn {
|
display: inline-block;
|
width: 22px;
|
height: 22px;
|
padding: 0;
|
line-height: 22px;
|
text-align: center;
|
}
|
}
|
|
.calc-preview {
|
position: relative;
|
min-height: 60px;
|
padding: 4px 10px;
|
border: 1px solid var(--border-color-base1);
|
border-radius: 2px;
|
|
&.error {
|
border: 1px solid var(--error-color);
|
}
|
|
.preview-actions {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
|
.anticon {
|
margin-right: 8px;
|
font-size: 14px;
|
cursor: pointer;
|
|
&:hover {
|
color: var(--error-color);
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.text-title {
|
padding-bottom: 10px;
|
color: var(--text-color-label);
|
}
|
</style>
|
