<template>
|
<app-dialog-form
|
v-bind="dialogFormProps"
|
v-loading="appStore.getLoading('entityset')"
|
>
|
<app-form-fields v-bind="formFieldsProps">
|
<template #key_words="scope">
|
</template>
|
</app-form-fields>
|
<app-collapse-form title="字段新增">
|
<template #header-button="scope">
|
<el-button size="small" type="primary" @click="onAdd" icon="Plus">
|
新增
|
</el-button>
|
</template>
|
<app-table-list v-bind="tableListProps">
|
<template #table-sort="scope">
|
<el-button
|
size="small"
|
icon="Rank"
|
link
|
>
|
</el-button>
|
</template>
|
<template #table-value="scope">
|
<el-input class="ignore-elements" v-model="scope.row.value"/>
|
</template>
|
<template #table-operate="scope">
|
<el-button
|
size="small"
|
type="danger"
|
icon="Delete"
|
@click="onDelete(scope.row)"
|
>
|
</el-button>
|
</template>
|
</app-table-list>
|
</app-collapse-form>
|
</app-dialog-form>
|
</template>
|
|
<script setup>
|
|
import * as tools from '@/utils/tools.js';
|
|
import Sortable from "sortablejs";
|
|
import {useI18n} from 'vue-i18n';
|
|
const {t} = useI18n();
|
|
import {meta} from "@/hooks";
|
|
const {useMetaData} = meta;
|
|
import {useEntityStore, useAppStore} from '@/store/modules/index.js';
|
import {modal} from "@/plugins/index.js";
|
|
const [, , fields] = useMetaData(
|
'agm_agreement_display_config',
|
async ({fieldsTools}) => {
|
fieldsTools.remove('key_words');
|
}
|
);
|
|
|
const form = ref({});
|
|
const entityStore = useEntityStore();
|
const appStore = useAppStore();
|
|
const dialogFormRef = ref();
|
const formFieldsRef = ref();
|
|
const tableListRef = ref();
|
|
const tableListProps = {
|
class: 'sql-sort-table-class',
|
ref: tableListRef,
|
title: 'sql列表',
|
complementHeight: -1,
|
columns: [
|
{
|
type: 'slot',
|
label: "排序",
|
prop: 'sort',
|
table: {
|
width: 55
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'value',
|
label: "字段名称",
|
table: {
|
className: 'ignore-elements'
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'operate',
|
label: "操作",
|
table: {
|
className: 'ignore-elements',
|
width: 120
|
}
|
},
|
]
|
};
|
|
const props = defineProps({
|
subReload: {
|
type: Function,
|
default: () => {
|
}
|
},
|
});
|
|
const formFieldsProps = {
|
ref: formFieldsRef,
|
fields: []
|
}
|
|
let isSortable = false;
|
|
const onAdd = () => {
|
const tableList = tableListRef.value.getTableData();
|
tableList.push({id: tools.uuid(), value: ''});
|
tableListRef.value.setTableData([...tableList]);
|
}
|
|
|
const dialogFormProps = {
|
title: '',
|
ref: dialogFormRef,
|
subSubmit: async () => {
|
const data = await formFieldsRef.value.onValidate();
|
const {id} = formFieldsRef.value.getDefaultModel();
|
const tableList = tableListRef.value.getTableData();
|
|
await entityStore.dataEntity({
|
dataName: 'agm_agreement_display_config',
|
data: {
|
'agm_agreement_display_config': {
|
...(id ? {id} : {}),
|
...data,
|
key_words: tableList.map(e => e.value).join(";")
|
}
|
}
|
});
|
props.subReload(Boolean(!id));
|
},
|
subReset: async () => {
|
formFieldsRef.value.onReset();
|
}
|
};
|
|
const onDelete = 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 onOpen = async (row) => {
|
|
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;
|
formFieldsRef.value.$forceUpdate(formFieldsProps);
|
formFieldsRef.value.setDefaultModel(row);
|
|
tableListRef.value.setTableData([...(row.key_words || '').split(';').filter(Boolean).map(val => ({id: tools.uuid(), value: val}))]);
|
await dragSortHandler();
|
}
|
|
|
const dragSortHandler = async () => {
|
|
if (!isSortable) {
|
isSortable = true;
|
const elNode = document.querySelector(`.${tableListProps.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]);
|
}
|
});
|
}
|
};
|
|
defineExpose({
|
onOpen,
|
});
|
|
</script>
|
