<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { computed, reactive, ref, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { omit } from 'lodash-es';
|
|
import { getColumnList } from '#/api/onlineDev/visualDev';
|
import { create, getInfo, update } from '#/api/system/dataAuthorize';
|
import ConditionMain from '#/components/ColumnDesign/src/components/ConditionMain.vue';
|
import { $t } from '#/locales';
|
|
interface State {
|
dataForm: any;
|
dataRule: any;
|
fieldOptions: any[];
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
dataForm: {
|
id: '',
|
moduleId: '',
|
enCode: '',
|
fullName: '',
|
conditionJson: '',
|
conditionText: '',
|
matchLogic: 'and',
|
},
|
dataRule: {
|
fullName: [{ required: true, message: '必填', trigger: 'blur' }],
|
enCode: [{ required: true, message: '必填', trigger: 'blur' }],
|
},
|
|
fieldOptions: [],
|
});
|
const { dataForm, dataRule } = toRefs(state);
|
const formElRef = ref<FormInstance>();
|
const conditionMainRef = ref();
|
const keyList = new Set([
|
'calculate',
|
'createTime',
|
'createUser',
|
'currOrganize',
|
'currPosition',
|
'dateCalculate',
|
'datePicker',
|
'groupSelect',
|
'inputNumber',
|
'modifyTime',
|
'modifyUser',
|
'organizeSelect',
|
'posSelect',
|
'rate',
|
'roleSelect',
|
'slider',
|
'timePicker',
|
'userSelect',
|
'usersSelect',
|
]);
|
|
const getTitle = computed(() => (state.dataForm.id ? $t('common.editText') : $t('common.addText')));
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal, changeLoading, changeOkLoading }] = useModalInner(init);
|
|
function init(data) {
|
state.dataForm.enCode = '';
|
state.dataForm.fullName = '';
|
state.dataForm.matchLogic = 'and';
|
state.dataForm.id = data.id || '';
|
state.dataForm.moduleId = data.menuId || '';
|
changeLoading(true);
|
getColumnList({ menuId: state.dataForm.moduleId })
|
.then((res) => {
|
state.fieldOptions =
|
res.data.map((o) => ({
|
...omit(o, ['jnpfKey']),
|
fullName: o.fieldName,
|
id: o.fieldId,
|
__config__: { jnpfKey: keyList.has(o.jnpfKey) ? o.jnpfKey : 'input', label: o.fieldName },
|
})) || [];
|
if (state.dataForm.id) {
|
changeLoading(true);
|
getInfo(state.dataForm.id)
|
.then((res) => {
|
state.dataForm = res.data;
|
const conditions = res.data.conditionJson ? JSON.parse(res.data.conditionJson) : [];
|
conditionMainRef.value?.init({ conditionList: conditions.conditionList, matchLogic: state.dataForm.matchLogic, fieldOptions: state.fieldOptions });
|
changeLoading(false);
|
})
|
.then(() => {
|
changeLoading(false);
|
});
|
} else {
|
conditionMainRef.value?.init({ fieldOptions: state.fieldOptions });
|
changeLoading(false);
|
}
|
})
|
.then(() => {
|
changeLoading(false);
|
});
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef?.value?.validate();
|
const conditions = conditionMainRef.value?.confirm();
|
if (!values || !conditions) return;
|
state.dataForm.conditionText = getConditionsContent(conditions.conditionList, conditions.matchLogic);
|
state.dataForm.conditionJson = JSON.stringify(conditions);
|
state.dataForm.matchLogic = conditions.matchLogic;
|
changeOkLoading(true);
|
const formMethod = state.dataForm.id ? update : create;
|
formMethod(state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closeModal();
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
} catch {}
|
}
|
function getConditionsContent(conditions, matchLogic) {
|
let content = '';
|
for (let i = 0; i < conditions.length; i++) {
|
const e = conditions[i];
|
content += conditions.length == 1 ? '' : `${i == 0 ? '' : ` ${matchLogic} `}( `;
|
for (let j = 0; j < e.groups.length; j++) {
|
const groups = e.groups[j];
|
const logic = j == 0 ? '' : ` ${e.logic} `;
|
const text = ` ${groups.fieldName} ${groups.symbolName}${
|
groups.fieldLabel ? groups.fieldLabel : groups.fieldValue || groups.fieldValue === 0 ? groups.fieldValue : ''
|
} `;
|
content += logic + text;
|
}
|
content += conditions.length == 1 ? '' : ' )';
|
}
|
return content;
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" show-ok-btn @ok="handleSubmit" class="jnpf-condition-modal" destroy-on-close>
|
<a-form :colon="false" :label-col="{ style: { width: '0' } }" :model="dataForm" :rules="dataRule" ref="formElRef">
|
<a-form-item name="enCode">
|
<a-input v-model:value="dataForm.enCode" placeholder="请输入编码" :maxlength="50" />
|
</a-form-item>
|
<a-form-item name="fullName">
|
<a-input v-model:value="dataForm.fullName" placeholder="请输入方案名称" />
|
</a-form-item>
|
<ConditionMain ref="conditionMainRef" default-add-empty show-field-value-type is-custom-field-value-type />
|
</a-form>
|
</BasicModal>
|
</template>
|
