<template>
|
<app-dialog-form
|
v-bind="dialogFormProps"
|
>
|
<app-form-fields v-bind="formFieldsProps">
|
</app-form-fields>
|
<app-collapse-form title="数据匹配关系">
|
<template #header-button="scope">
|
<el-button size="small" type="primary" @click="onDetailAdd" icon="Plus">
|
新增
|
</el-button>
|
</template>
|
<div class="table" v-loading="appStore.getLoading('getEntitySet')">
|
<app-table-list v-bind="tableListProps">
|
<template #table-sort="scope">
|
<el-button
|
size="small"
|
icon="Rank"
|
link
|
>
|
</el-button>
|
</template>
|
<template #table-base="scope">
|
<el-select
|
v-model="scope.row.field_base"
|
placeholder="请选择基础字段"
|
>
|
<el-option
|
v-for="item in form.base.fields"
|
:key="item.field"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</template>
|
|
<template #table-join="scope">
|
<el-select
|
v-model="scope.row.join_type"
|
placeholder="请选择公式"
|
>
|
<el-option
|
v-for="item in dictMapEntity.filter_type"
|
:key="item.code"
|
:label="item.value"
|
:value="item.code"
|
/>
|
</el-select>
|
</template>
|
|
<template #table-active="scope">
|
<el-switch
|
v-model="scope.row.active"
|
inline-prompt
|
active-value="T"
|
inactive-value="F"
|
active-text="是"
|
inactive-text="否"
|
/>
|
</template>
|
|
<template #table-target="scope">
|
<el-select
|
v-model="scope.row.field_target"
|
placeholder="请选择匹配字段">
|
<el-option
|
v-for="item in form.target.fields"
|
:key="item.field"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</template>
|
|
<template #table-remark="scope">
|
<el-input v-model="scope.row.remark" placeholder="请输入描述"/>
|
</template>
|
|
<template #table-operate="scope">
|
<el-button
|
size="small"
|
type="danger"
|
icon="Delete"
|
@click="onDetailDel(scope.row)"
|
>
|
</el-button>
|
</template>
|
</app-table-list>
|
</div>
|
</app-collapse-form>
|
</app-dialog-form>
|
</template>
|
|
<script setup>
|
|
import {useI18n} from 'vue-i18n';
|
|
const {t} = useI18n();
|
|
import {dict, meta} from "@/hooks";
|
|
const {useMetaData} = meta;
|
|
const {useDictMap} = dict;
|
|
import * as tools from '@/utils/tools.js';
|
|
import {useEntityStore, useAppStore} from '@/store/modules';
|
import Sortable from "sortablejs";
|
import {modal} from "@/plugins/index.js";
|
|
const entityStore = useEntityStore();
|
const appStore = useAppStore();
|
|
const dialogFormRef = ref();
|
const formFieldsRef = ref();
|
|
const props = defineProps({
|
subReload: {
|
type: Function,
|
default: () => {
|
}
|
},
|
});
|
|
const [dictMapEntity] = useDictMap(['filter_type']);
|
|
|
const tableListRef = ref();
|
|
const tableListProps = {
|
class: 'table-class',
|
ref: tableListRef,
|
title: '匹配列表',
|
complementHeight: -1,
|
columns: [
|
{
|
type: 'slot',
|
label: "排序",
|
prop: 'sort',
|
table: {
|
width: 55
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'base',
|
label: "基础表",
|
table: {
|
className: 'ignore-elements',
|
width: 190
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'join',
|
label: "公式",
|
table: {
|
className: 'ignore-elements',
|
width: 130
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'target',
|
label: "匹配表",
|
table: {
|
className: 'ignore-elements',
|
width: 190
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'remark',
|
label: "描述",
|
table: {
|
className: 'ignore-elements'
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'active',
|
label: "生效",
|
table: {
|
width: 80,
|
className: 'ignore-elements'
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'operate',
|
label: "操作",
|
table: {
|
width: 70,
|
className: 'ignore-elements'
|
}
|
},
|
]
|
};
|
|
|
const [columns, filters, fields] = useMetaData(
|
'v_joint',
|
() => {
|
}
|
);
|
|
const onDetailAdd = () => {
|
const tableList = tableListRef.value.getTableData();
|
tableList.push({id: tools.uuid()});
|
tableListRef.value.setTableData([...tableList]);
|
}
|
|
|
const formFieldsProps = {
|
ref: formFieldsRef,
|
fields,
|
async subModelChange(field) {
|
if (['base_band_id', 'target_band_id'].includes(field)) {
|
const {target_band_id, base_band_id} = formFieldsRef.value.getModel();
|
const [target, base] = await Promise.all([
|
entityStore.getEntitySet({
|
dataName: "fee_model_band_column",
|
filter: `bandid = '${target_band_id}'`,
|
}),
|
entityStore.getEntitySet({
|
dataName: "fee_model_band_column",
|
filter: `bandid = '${base_band_id}'`,
|
}),
|
]);
|
|
form.target.fields = target.data.entityset;
|
form.base.fields = base.data.entityset;
|
}
|
}
|
}
|
|
let rowEdit = {};
|
|
const form = reactive({
|
rowEdit,
|
target: {
|
fields: [],
|
},
|
base: {
|
fields: [],
|
}
|
});
|
|
|
const onDetailDel = async (row) => {
|
await modal.confirm("是否确认删除？");
|
let tableList = tableListRef.value.getTableData();
|
tableList.forEach((e, i) => {
|
if (e.id === row.id) {
|
tableList[i] = null;
|
}
|
});
|
tableList = tableList.filter(Boolean);
|
tableList.forEach((e, index) => {
|
e.order_no = index + 1;
|
});
|
tableListRef.value.setTableData([...tableList]);
|
}
|
|
const dialogFormProps = {
|
width: 1000,
|
title: '',
|
ref: dialogFormRef,
|
subSubmit: async () => {
|
const data = await formFieldsRef.value.onValidate();
|
const {id} = formFieldsRef.value.getDefaultModel();
|
const detailList = tableListRef.value.getTableData();
|
const fee_joint_detail = detailList.map((item, index) => ({
|
field_target: item.field_target,
|
field_base: item.field_base,
|
remark: item.remark,
|
order_no: index + 1,
|
active: item.active,
|
join_type: item.join_type
|
}));
|
await entityStore.saveEntity({
|
dataName: 'pkg_joint',
|
data: {
|
fee_joint: {
|
...(id ? {id} : {}),
|
...data,
|
},
|
fee_joint_detail,
|
}
|
});
|
props.subReload(Boolean(!id));
|
},
|
subReset: async () => {
|
await onReset();
|
}
|
};
|
|
const onReset = async () => {
|
tableListRef.value.setTableData([]);
|
formFieldsRef.value.setDefaultModel(rowEdit);
|
if (rowEdit.id) {
|
const {target_band_id, base_band_id} = rowEdit;
|
const [detail, target, base] = await Promise.all([
|
entityStore.getEntitySet({
|
dataName: "fee_joint_detail",
|
filter: `parent_id = '${rowEdit.id}'`,
|
}),
|
entityStore.getEntitySet({
|
dataName: "fee_model_band_column",
|
filter: `bandid = '${target_band_id}'`,
|
}),
|
entityStore.getEntitySet({
|
dataName: "fee_model_band_column",
|
filter: `bandid = '${base_band_id}'`,
|
}),
|
]);
|
|
tableListRef.value.setTableData(detail.data.entityset);
|
form.target.fields = target.data.entityset;
|
form.base.fields = base.data.entityset;
|
}
|
}
|
|
let isSortable = false;
|
|
const dragSortHandler = async () => {
|
window.setTimeout(() => {
|
|
if (!isSortable) {
|
isSortable = true;
|
const elNode = document.querySelector('.table-class tbody');
|
Sortable.create(elNode, {
|
animation: 500,
|
forceFallback: true,
|
filter: ".ignore-elements",
|
onEnd({newIndex, oldIndex}) {
|
let list = tableListRef.value.getTableData();
|
const currRow = list.splice(oldIndex, 1)[0];
|
list.splice(newIndex, 0, currRow);
|
list.forEach((e, index) => {
|
e.order_no = index + 1;
|
});
|
tableListRef.value.setTableData([...list]);
|
}
|
});
|
}
|
}, 200);
|
};
|
|
const onOpen = async (row) => {
|
rowEdit = row;
|
dialogFormProps.title = t(row.id ? 'common.dialog.title.edit' : 'common.dialog.title.add');
|
dialogFormRef.value.$forceUpdate(dialogFormProps)
|
dialogFormRef.value.onOpen();
|
|
await nextTick();
|
await dragSortHandler();
|
await onReset();
|
}
|
|
defineExpose({
|
onOpen,
|
});
|
|
</script>
|
