277 lines
10 KiB
Vue
277 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<SimpleForm
|
|||
|
|
ref="systemFormRef"
|
|||
|
|
:formProps="data.formDataProps"
|
|||
|
|
:formModel="{}"
|
|||
|
|
:isWorkFlow="props.fromPage!=FromPageType.MENU"
|
|||
|
|
/>
|
|||
|
|
<a-button type="primary" style="margin-bottom: 10px;" @click="handleAdd">新增</a-button>
|
|||
|
|
<a-table :columns="columns" :data-source="dataList" >
|
|||
|
|
<template #bodyCell="{ column, record, index }">
|
|||
|
|
<template v-if="column.dataIndex === 'operation'">
|
|||
|
|
<a style="margin-right: 10px" @click="btnCheck('edit', record, index)">编辑</a>
|
|||
|
|
<a style="margin-right: 10px" @click="btnCheck('delete', record, index)">删除</a>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</a-table>
|
|||
|
|
<evaluateModal @register="registerEvaluate" @success="handleSuccessEvaluate"></evaluateModal>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { reactive, ref,onBeforeMount,onMounted } from 'vue';
|
|||
|
|
import { formProps, formEventConfigs ,formConfig} from './config';
|
|||
|
|
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
|||
|
|
import { addLngGradeSystem, getLngGradeSystem, updateLngGradeSystem, deleteLngGradeSystem } from '/@/api/sales/GradeSystem';
|
|||
|
|
import { cloneDeep } from 'lodash-es';
|
|||
|
|
import { FormDataProps } from '/@/components/Designer/src/types';
|
|||
|
|
import { usePermission } from '/@/hooks/web/usePermission';
|
|||
|
|
import { useFormConfig } from '/@/hooks/web/useFormConfig';
|
|||
|
|
import { FromPageType } from '/@/enums/workflowEnum';
|
|||
|
|
import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent,} from '/@/hooks/web/useFormEvent';
|
|||
|
|
import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
|
|||
|
|
import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|||
|
|
import evaluateModal from './evaluateModal.vue'
|
|||
|
|
import { useModal } from '/@/components/Modal';
|
|||
|
|
|
|||
|
|
const { filterFormSchemaAuth } = usePermission();
|
|||
|
|
const { mergeFormSchemas,mergeFormEventConfigs } = useFormConfig();
|
|||
|
|
const { currentRoute } = useRouter();
|
|||
|
|
|
|||
|
|
const RowKey = 'id';
|
|||
|
|
const emits = defineEmits(['changeUploadComponentIds','loadingCompleted', 'form-mounted']);
|
|||
|
|
const props = defineProps({
|
|||
|
|
fromPage: {
|
|||
|
|
type: Number,
|
|||
|
|
default: FromPageType.MENU,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
const systemFormRef = ref();
|
|||
|
|
const data: { formDataProps: FormDataProps } = reactive({
|
|||
|
|
formDataProps: {schemas:[]} as FormDataProps,
|
|||
|
|
});
|
|||
|
|
const state = reactive({
|
|||
|
|
formModel: {},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let customFormEventConfigs=[];
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const dataList = ref([])
|
|||
|
|
const columns = ref([
|
|||
|
|
{ title: t('序号'), dataIndex: 'index', key: 'index', sorter: true, customRender: (column) => `${column.index + 1}` ,width: 100},
|
|||
|
|
{ title: t('评价事项'), dataIndex: 'itemName', sorter: true, width:200},
|
|||
|
|
{ title: t('评价标准'), dataIndex: 'itemDesc', sorter: true, },
|
|||
|
|
{ title: t('评价部门'), dataIndex: 'eDeptCode', sorter: true, width: 140},
|
|||
|
|
{ title: t('操作'), dataIndex: 'operation', width: 120},
|
|||
|
|
]);
|
|||
|
|
const curIdx = ref(null)
|
|||
|
|
const [registerEvaluate, { openModal:openModalEvaluate }] = useModal();
|
|||
|
|
const handleAdd = ()=> {
|
|||
|
|
curIdx.value = null
|
|||
|
|
openModalEvaluate(true,{isUpdate: false});
|
|||
|
|
}
|
|||
|
|
const btnCheck = (type, record, index) => {
|
|||
|
|
curIdx.value = index
|
|||
|
|
if (type == 'edit') {
|
|||
|
|
openModalEvaluate(true,{isUpdate: true, record: record});
|
|||
|
|
} else {
|
|||
|
|
dataList.value.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const handleSuccessEvaluate = (val) => {
|
|||
|
|
if (curIdx.value != null) {
|
|||
|
|
dataList.value[curIdx.value] = {...val}
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
dataList.value.push(val)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
try {
|
|||
|
|
// 合并渲染覆盖配置中的字段配置、表单事件配置
|
|||
|
|
await mergeCustomFormRenderConfig();
|
|||
|
|
|
|||
|
|
if (props.fromPage == FromPageType.MENU) {
|
|||
|
|
setMenuPermission();
|
|||
|
|
await createFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：初始化表单
|
|||
|
|
await loadFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：加载表单
|
|||
|
|
} else if (props.fromPage == FromPageType.FLOW) {
|
|||
|
|
emits('loadingCompleted'); //告诉系统表单已经加载完毕
|
|||
|
|
// loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
|
|||
|
|
} else if (props.fromPage == FromPageType.PREVIEW) {
|
|||
|
|
// 预览 无需权限，表单事件也无需执行
|
|||
|
|
} else if (props.fromPage == FromPageType.DESKTOP) {
|
|||
|
|
// 桌面设计 表单事件需要执行
|
|||
|
|
emits('loadingCompleted'); //告诉系统表单已经加载完毕
|
|||
|
|
await createFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：初始化表单
|
|||
|
|
await loadFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：加载表单
|
|||
|
|
}
|
|||
|
|
emits('form-mounted', formProps);
|
|||
|
|
} catch (error) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
async function mergeCustomFormRenderConfig() {
|
|||
|
|
let cloneProps=cloneDeep(formProps);
|
|||
|
|
let fEventConfigs=cloneDeep(formEventConfigs);
|
|||
|
|
if (formConfig.useCustomConfig) {
|
|||
|
|
if(props.fromPage !== FromPageType.FLOW){
|
|||
|
|
let formPath=currentRoute.value.query.formPath;
|
|||
|
|
//1.合并字段配置
|
|||
|
|
cloneProps.schemas=await mergeFormSchemas({formSchema:cloneProps.schemas!,formPath:formPath});
|
|||
|
|
//2.合并表单事件配置
|
|||
|
|
fEventConfigs=await mergeFormEventConfigs({formEventConfigs:fEventConfigs,formPath:formPath});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
data.formDataProps=cloneProps;
|
|||
|
|
customFormEventConfigs=fEventConfigs;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
|
|||
|
|
function setMenuPermission() {
|
|||
|
|
data.formDataProps.schemas = filterFormSchemaAuth(data.formDataProps.schemas!);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 校验form 通过返回表单数据
|
|||
|
|
async function validate() {
|
|||
|
|
let values = [];
|
|||
|
|
try {
|
|||
|
|
values = await systemFormRef.value?.validate();
|
|||
|
|
//添加隐藏组件
|
|||
|
|
if (data.formDataProps.hiddenComponent?.length) {
|
|||
|
|
data.formDataProps.hiddenComponent.forEach((component) => {
|
|||
|
|
values[component.bindField] = component.value;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
}
|
|||
|
|
return values;
|
|||
|
|
}
|
|||
|
|
// 根据行唯一ID查询行数据，并设置表单数据 【编辑】
|
|||
|
|
async function setFormDataFromId(rowId, skipUpdate) {
|
|||
|
|
try {
|
|||
|
|
const record = await getLngGradeSystem(rowId);
|
|||
|
|
if (skipUpdate) {
|
|||
|
|
return record;
|
|||
|
|
}
|
|||
|
|
setFieldsValue(record);
|
|||
|
|
state.formModel = record;
|
|||
|
|
dataList.value = record?.lngGradeSystemItemList || []
|
|||
|
|
await getFormDataEvent(customFormEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
|
|||
|
|
return record;
|
|||
|
|
} catch (error) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 辅助设置表单数据
|
|||
|
|
function setFieldsValue(record) {
|
|||
|
|
systemFormRef.value.setFieldsValue(record);
|
|||
|
|
}
|
|||
|
|
// 重置表单数据
|
|||
|
|
async function resetFields() {
|
|||
|
|
await systemFormRef.value.resetFields();
|
|||
|
|
}
|
|||
|
|
// 设置表单数据全部为Disabled 【查看】
|
|||
|
|
async function setDisabledForm(isDisabled) {
|
|||
|
|
data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas),isDisabled);
|
|||
|
|
}
|
|||
|
|
// 获取行键值
|
|||
|
|
function getRowKey() {
|
|||
|
|
return RowKey;
|
|||
|
|
}
|
|||
|
|
// 更新api表单数据
|
|||
|
|
async function update({ values, rowId }) {
|
|||
|
|
try {
|
|||
|
|
values[RowKey] = rowId;
|
|||
|
|
state.formModel = values;
|
|||
|
|
let obj = {
|
|||
|
|
...values,
|
|||
|
|
lngGradeSystemItemList: dataList.value
|
|||
|
|
}
|
|||
|
|
let saveVal = await updateLngGradeSystem(obj);
|
|||
|
|
await submitFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：提交表单
|
|||
|
|
return saveVal;
|
|||
|
|
} catch (error) {}
|
|||
|
|
}
|
|||
|
|
// 新增api表单数据
|
|||
|
|
async function add(values) {
|
|||
|
|
try {
|
|||
|
|
state.formModel = values;
|
|||
|
|
let obj = {
|
|||
|
|
...values,
|
|||
|
|
lngGradeSystemItemList: dataList.value,
|
|||
|
|
valid: 'Y'
|
|||
|
|
}
|
|||
|
|
let saveVal = await addLngGradeSystem(obj);
|
|||
|
|
await submitFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：提交表单
|
|||
|
|
return saveVal;
|
|||
|
|
} catch (error) {}
|
|||
|
|
}
|
|||
|
|
// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
|
|||
|
|
async function setWorkFlowForm(obj: WorkFlowFormParams) {
|
|||
|
|
try {
|
|||
|
|
const cloneProps=cloneDeep(formProps);
|
|||
|
|
customFormEventConfigs=cloneDeep(formEventConfigs);
|
|||
|
|
if (formConfig.useCustomConfig) {
|
|||
|
|
const parts = obj.formConfigKey.split('_');
|
|||
|
|
const formId=parts[1];
|
|||
|
|
cloneProps.schemas=await mergeFormSchemas({formSchema:cloneProps.schemas!,formId:formId});
|
|||
|
|
customFormEventConfigs=await mergeFormEventConfigs({formEventConfigs:customFormEventConfigs,formId:formId});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let flowData = changeWorkFlowForm(cloneProps, obj);
|
|||
|
|
let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
|
|||
|
|
data.formDataProps = buildOptionJson;
|
|||
|
|
emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
|
|||
|
|
if (isViewProcess) {
|
|||
|
|
setDisabledForm(); //查看
|
|||
|
|
}
|
|||
|
|
state.formModel = formModels;
|
|||
|
|
if(formModels[RowKey]) {
|
|||
|
|
setFormDataFromId(formModels[RowKey], false)
|
|||
|
|
} else {
|
|||
|
|
setFieldsValue(formModels)
|
|||
|
|
}
|
|||
|
|
} catch (error) {}
|
|||
|
|
await createFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：初始化表单
|
|||
|
|
await loadFormEvent(customFormEventConfigs, state.formModel,
|
|||
|
|
systemFormRef.value,
|
|||
|
|
formProps.schemas); //表单事件：加载表单
|
|||
|
|
}
|
|||
|
|
function getFormModel() {
|
|||
|
|
return systemFormRef.value.formModel
|
|||
|
|
}
|
|||
|
|
async function handleDelete(id) {
|
|||
|
|
return await deleteLngGradeSystem([id]);
|
|||
|
|
}
|
|||
|
|
defineExpose({
|
|||
|
|
setFieldsValue,
|
|||
|
|
resetFields,
|
|||
|
|
validate,
|
|||
|
|
add,
|
|||
|
|
update,
|
|||
|
|
setFormDataFromId,
|
|||
|
|
setDisabledForm,
|
|||
|
|
setMenuPermission,
|
|||
|
|
setWorkFlowForm,
|
|||
|
|
getRowKey,
|
|||
|
|
getFormModel,
|
|||
|
|
handleDelete
|
|||
|
|
});
|
|||
|
|
</script>
|