<template>
|
<BaseContentLayout>
|
<template #header> </template>
|
<template #aside>
|
<SideList
|
:items="domainCatalog"
|
:loading="sideLoading"
|
@item-click="chooseCatalog"
|
>
|
<template #header>
|
<el-row justify="end">
|
<el-button
|
type="primary"
|
icon="CirclePlusFilled"
|
size="small"
|
@click="handelDownload"
|
>
|
</el-button>
|
</el-row>
|
</template>
|
</SideList>
|
</template>
|
<template #main>
|
<ToolBar
|
class="toolbar-sticky"
|
:title="selectedCatalog?.name"
|
:loading="loading"
|
></ToolBar>
|
<!-- <FormCol> -->
|
<el-table
|
:data="domainItems"
|
v-loading="loading"
|
:height="contentHeight + 'px'"
|
table-layout="fixed"
|
:show-overflow-tooltip="true"
|
size="small"
|
style="z-index: 20"
|
border
|
>
|
<el-table-column fixed="left" prop="index" label="编号" width="50">
|
<template #default="{ row }">
|
<el-input
|
v-if="row._isAdd || row._isEdit"
|
size="small"
|
v-model="row.index"
|
/>
|
<span v-else>{{ row.index }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="catelogname"
|
label="类别"
|
:show-overflow-tooltip="true"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="text"
|
label="值域项"
|
:show-overflow-tooltip="true"
|
min-width="200"
|
>
|
<template #default="{ row }">
|
<el-input
|
v-if="row._isAdd || row._isEdit"
|
size="small"
|
v-model="row.text"
|
/>
|
<span v-else>{{ row.text }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="value"
|
label="值域值"
|
:formatter="timeFormat"
|
width="90"
|
>
|
<template #default="{ row }">
|
<el-input
|
v-if="row._isAdd || row._isEdit"
|
size="small"
|
v-model="row.value"
|
/>
|
<span v-else>{{ row.value }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="版本" width="80" />
|
<el-table-column
|
prop="guid"
|
label="ID"
|
:show-overflow-tooltip="true"
|
width="150"
|
>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="160">
|
<template #default="scope">
|
<el-button
|
v-if="scope.row._isAdd"
|
type="primary"
|
size="small"
|
icon="Select"
|
@click="savePut(scope)"
|
>新增</el-button
|
>
|
<el-button
|
v-else-if="scope.row._isEdit"
|
type="success"
|
size="small"
|
icon="Select"
|
@click="saveUpdate(scope)"
|
>修改</el-button
|
>
|
<el-button-group v-else>
|
<el-button
|
type="default"
|
size="small"
|
icon="Edit"
|
@click="itemEdit(scope)"
|
></el-button>
|
<el-button
|
:loading="scope.row.loadingDelete"
|
type="danger"
|
size="small"
|
icon="Delete"
|
@click="itemDelete(scope)"
|
></el-button>
|
</el-button-group>
|
<el-button
|
v-if="scope.row._isEdit || scope.row._isAdd"
|
type="default"
|
size="small"
|
icon="CloseBold"
|
@click="cancelEdit(scope)"
|
>取消</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-row justify="center" style="margin-top: -2px">
|
<el-button type="default" icon="Plus" @click="itemAdd"
|
>新增值域项</el-button
|
>
|
</el-row>
|
<!-- </FormCol> -->
|
</template>
|
</BaseContentLayout>
|
</template>
|
<script setup>
|
import { onMounted, ref } from 'vue';
|
import domainApi from '@/api/fysp/domainApi';
|
import { ElMessage } from 'element-plus';
|
|
const loading = ref(false);
|
const domainCatalog = ref([]);
|
const selectedCatalog = ref(null);
|
const domainItems = ref([]);
|
|
// 选择值域目录
|
const chooseCatalog = (catalog) => {
|
selectedCatalog.value = catalog.data;
|
loading.value = true;
|
domainApi
|
.fetchItemByCatalogId(catalog.data.guid)
|
.then((res) => {
|
domainItems.value = res.data;
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
};
|
|
// 添加值域项
|
const itemAdd = () => {
|
const lastOne = domainItems.value[domainItems.value.length - 1];
|
domainItems.value.push({
|
index: lastOne ? lastOne.index + 1 : 0,
|
catelogname: selectedCatalog.value.name,
|
dcguid: selectedCatalog.value.guid,
|
text: '',
|
value: '',
|
remark: '0',
|
_isAdd: true
|
});
|
};
|
|
function itemEdit(scope) {
|
scope.row._isEdit = true;
|
console.log(scope);
|
}
|
|
function itemDelete(scope) {
|
scope.row.loadingDelete = true;
|
setTimeout(() => {
|
domainItems.value.splice(scope.$index, 1);
|
scope.row.loadingDelete = false;
|
}, 1000);
|
}
|
|
function savePut(scope) {
|
if (_validate(scope.row)) {
|
scope.row._isAdd = false;
|
domainApi.putDomainItem(scope.row).then((res) => {
|
scope.row.guid = res.guid;
|
ElMessage.success('新增成功');
|
});
|
} else {
|
ElMessage.error('请填写完整信息');
|
}
|
}
|
|
function saveUpdate(scope) {
|
if (_validate(scope.row)) {
|
scope.row._isEdit = false;
|
domainApi.updateDomainItem(scope.row).then((res) => {
|
ElMessage.success('修改成功');
|
});
|
} else {
|
ElMessage.error('请填写完整信息');
|
}
|
}
|
|
// 取消编辑
|
function cancelEdit(scope) {
|
if (scope.row._isAdd) {
|
domainItems.value.splice(scope.$index, 1);
|
}
|
scope.row._isAdd = false;
|
scope.row._isEdit = false;
|
}
|
|
function _validate(row) {
|
return (
|
row.index !== undefined &&
|
row.index !== '' &&
|
row.text !== undefined &&
|
row.text !== '' &&
|
row.value !== undefined &&
|
row.value !== ''
|
);
|
}
|
|
onMounted(() => {
|
domainApi.fetchDomainCatalog().then((res) => {
|
domainCatalog.value = res.map((item) => ({
|
title: item.name,
|
categoly: '系统配置项',
|
data: item
|
}));
|
chooseCatalog(domainCatalog.value[0]);
|
});
|
});
|
</script>
|
