<script lang="ts" setup>
|
import { computed, ref, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
const props = defineProps(['conf', 'appConf', 'tableList']);
|
defineExpose({ getData });
|
const { createMessage } = useMessage();
|
|
const columns = [
|
{ title: '序号', width: 50, align: 'center', customRender: ({ index }) => index + 1, fixed: 'left' },
|
{ title: '名称', dataIndex: 'fieldName', key: 'fieldName' },
|
{ title: '字段', dataIndex: 'fieldId', key: 'fieldId' },
|
{ title: '数据表', dataIndex: 'tableName', key: 'tableName', width: 200 },
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 50, align: 'center', fixed: 'right' },
|
];
|
const showType = ref('pc');
|
|
const getTableOptions = computed(() => props.tableList.map((o) => ({ id: o.table, fullName: o.table })));
|
const getList = computed(() => (showType.value == 'pc' ? props.conf : props.appConf));
|
|
function getData() {
|
return new Promise((resolve) => {
|
if (!exist(props.conf) || !exist(props.appConf)) return;
|
resolve({ target: 1 });
|
});
|
}
|
function exist(list) {
|
let isOk = true;
|
for (let i = 0; i < list.length; i++) {
|
const e = list[i];
|
if (!e.fieldName) {
|
createMessage.warning('名称不能为空');
|
isOk = false;
|
break;
|
}
|
if (!e.fieldId) {
|
createMessage.warning('字段不能为空');
|
isOk = false;
|
break;
|
}
|
const idNum = list.filter((o) => o.fieldId == e.fieldId);
|
if (idNum.length > 1) {
|
createMessage.warning(`字段'${e.fieldId}'已重复`);
|
isOk = false;
|
break;
|
}
|
}
|
return isOk;
|
}
|
function handleDelItem(index) {
|
unref(getList).splice(index, 1);
|
}
|
function handleAdd() {
|
const item = { fieldName: '', fieldId: '', tableName: '' };
|
unref(getList).push(item);
|
}
|
</script>
|
<template>
|
<div class="sys-form-title-content">
|
<jnpf-group-title content="列表字段" :bordered="false" />
|
<div class="action-bar">
|
<div class="action-bar-left">
|
<div class="jnpf-device-switch">
|
<div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'pc' }" @click="showType = 'pc'">
|
<a-tooltip title="PC">
|
<i class="icon-ym icon-ym-pc"></i>
|
</a-tooltip>
|
</div>
|
<div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'app' }" @click="showType = 'app'">
|
<a-tooltip title="APP">
|
<i class="icon-ym icon-ym-mobile"></i>
|
</a-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<a-table :data-source="getList" :columns="columns" size="small" :pagination="false" row-key="id" :scroll="{ x: 'max-content' }">
|
<template #bodyCell="{ column, record, index }">
|
<template v-if="column.key === 'fieldName'">
|
<a-input v-model:value="record.fieldName" placeholder="输入名称" allow-clear />
|
</template>
|
<template v-if="column.key === 'fieldId'">
|
<a-input v-model:value="record.fieldId" placeholder="输入字段" allow-clear />
|
</template>
|
<template v-if="column.key === 'tableName'">
|
<jnpf-select v-model:value="record.tableName" :options="getTableOptions" show-search allow-clear :dropdown-match-select-width="false" />
|
</template>
|
<template v-if="column.key === 'action'">
|
<a-button class="action-btn" type="link" color="error" @click="handleDelItem(index)" size="small">删除</a-button>
|
</template>
|
</template>
|
</a-table>
|
<div class="table-add-action" @click="handleAdd">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">新增一行</a-button>
|
</div>
|
</template>
|
