😎格式化代码

This commit is contained in:
zuohuaijun 2024-10-31 19:01:59 +08:00
parent 81ce1a5328
commit 402125b814
6 changed files with 701 additions and 717 deletions

View File

@ -29,8 +29,4 @@
<ProjectReference Include="..\Plugins\Admin.NET.Plugin.GoView\Admin.NET.Plugin.GoView.csproj" /> <ProjectReference Include="..\Plugins\Admin.NET.Plugin.GoView\Admin.NET.Plugin.GoView.csproj" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="Entity\" />
</ItemGroup>
</Project> </Project>

View File

@ -45,7 +45,7 @@
<PackageReference Include="SqlSugarCore" Version="5.1.4.170" /> <PackageReference Include="SqlSugarCore" Version="5.1.4.170" />
<PackageReference Include="SSH.NET" Version="2024.1.0" /> <PackageReference Include="SSH.NET" Version="2024.1.0" />
<PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.7" /> <PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.7" />
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1113" /> <PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1114" />
<PackageReference Include="UAParser" Version="3.1.47" /> <PackageReference Include="UAParser" Version="3.1.47" />
<PackageReference Include="Yitter.IdGenerator" Version="1.0.14" /> <PackageReference Include="Yitter.IdGenerator" Version="1.0.14" />
</ItemGroup> </ItemGroup>

View File

@ -71,7 +71,7 @@
"vue-router": "^4.4.5", "vue-router": "^4.4.5",
"vue-signature-pad": "^3.0.2", "vue-signature-pad": "^3.0.2",
"vue3-tree-org": "^4.2.2", "vue3-tree-org": "^4.2.2",
"vxe-pc-ui": "^4.2.34", "vxe-pc-ui": "^4.2.35",
"vxe-table": "^4.7.59", "vxe-table": "^4.7.59",
"vxe-table-plugin-element": "^4.0.4", "vxe-table-plugin-element": "^4.0.4",
"vxe-table-plugin-export-xlsx": "^4.0.7", "vxe-table-plugin-export-xlsx": "^4.0.7",

View File

@ -24,7 +24,7 @@ declare type MittType<T = any> = {
openShareTagsView?: string; openShareTagsView?: string;
onTagsViewRefreshRouterView?: T; onTagsViewRefreshRouterView?: T;
onCurrentContextmenuClick?: T; onCurrentContextmenuClick?: T;
submitRefreshFk?:T submitRefreshFk?: T;
}; };
// mitt 参数类型定义 // mitt 参数类型定义

View File

@ -1,92 +1,86 @@
<template> <template>
<div class="sys-codeGenConfig-container"> <div class="sys-codeGenConfig-container">
<vxe-modal v-model="state.isShowDialog" title="生成配置" :width="800" :height="350" show-footer show-zoom resize fullscreen <vxe-modal v-model="state.isShowDialog" title="生成配置" :width="800" :height="350" show-footer show-zoom resize fullscreen @close="cancel">
@close="cancel"> <template #default>
<template #default> <vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options">
<vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options"> <template #drag_default="{}">
<template #drag_default="{}"> <span class="drag-btn">
<span class="drag-btn"> <i class="fa fa-arrows"></i>
<i class="fa fa-arrows"></i> </span>
</span> </template>
<template #effectType="{ row, $index }">
<vxe-select v-model="row.effectType" class="m-2" style="width: 70%" placeholder="Select" transfer :disabled="judgeColumns(row)" @change="effectTypeChange(row, $index)" filterable>
<vxe-option v-for="item in state.effectTypeList" :key="item.code" :label="item.value" :value="item.code" />
</vxe-select>
<vxe-button v-if="row.effectType === 'ApiTreeSelect' || row.effectType === 'fk'" style="width: 30%" icon="vxe-icon-edit" @click="effectTypeChange(row, $index)">修改</vxe-button>
</template>
<template #columnComment="{ row }">
<vxe-input v-model="row.columnComment" autocomplete="off" />
</template>
<template #dictType="{ row }">
<vxe-select v-model="row.dictTypeCode" class="m-2" :disabled="effectTypeEnable(row)" filterable transfer>
<vxe-option v-for="item in state.dictTypeCodeList" :key="item.code" :label="item.name" :value="item.code" />
</vxe-select>
</template>
<template #whetherTable="{ row }">
<vxe-checkbox v-model="row.whetherTable"></vxe-checkbox>
</template>
<template #whetherAddUpdate="{ row }">
<vxe-checkbox v-model="row.whetherAddUpdate" :disabled="judgeColumns(row)"></vxe-checkbox>
</template>
<template #whetherSortable="{ row }">
<vxe-checkbox v-model="row.whetherSortable"></vxe-checkbox>
</template>
<template #whetherRequired="{ row }">
<vxe-tag v-if="row.whetherRequired" status="success"></vxe-tag>
<vxe-tag v-else status="info"></vxe-tag>
</template>
<template #queryWhether="{ row }">
<vxe-switch readonly v-model="row.queryWhether" open-label="是" close-label="否" :openValue="true" :closeValue="false"></vxe-switch>
</template>
<template #queryType="{ row }">
<vxe-select v-model="row.queryType" class="m-2" placeholder="Select" :disabled="!row.queryWhether" filterable transfer>
<vxe-option v-for="item in state.queryTypeList" :key="item.code" :label="item.value" :value="item.code" />
</vxe-select>
</template>
<template #verification="{ row }">
<vxe-button status="primary" plain v-if="row.columnKey === 'False' && !row.whetherCommon" @click="openVerifyDialog(row)">校验规则{{ row.ruleCount }}</vxe-button>
<span v-else></span>
</template>
</vxe-grid>
</template> </template>
<template #effectType="{ row, $index }"> <template #footer>
<vxe-select v-model="row.effectType" class="m-2" style="width: 70%" placeholder="Select" transfer <vxe-button @click="cancel"> </vxe-button>
:disabled="judgeColumns(row)" @change="effectTypeChange(row, $index)" filterable> <vxe-button status="primary" @click="submit"> </vxe-button>
<vxe-option v-for="item in state.effectTypeList" :key="item.code" :label="item.value"
:value="item.code" />
</vxe-select>
<vxe-button v-if="row.effectType === 'ApiTreeSelect' || row.effectType === 'fk'" style="width: 30%"
icon="vxe-icon-edit" @click="effectTypeChange(row, $index)">修改</vxe-button>
</template> </template>
<template #columnComment="{ row }"> </vxe-modal>
<vxe-input v-model="row.columnComment" autocomplete="off" />
</template> <fkDialog ref="fkDialogRef" @submitRefreshFk="submitRefreshFk" />
<template #dictType="{ row }"> <treeDialog ref="treeDialogRef" @submitRefreshFk="submitRefreshFk" />
<vxe-select v-model="row.dictTypeCode" class="m-2" :disabled="effectTypeEnable(row)" filterable transfer> <verifyDialog ref="verifyDialogRef" @submitVerify="submitVerifyOk" />
<vxe-option v-for="item in state.dictTypeCodeList" :key="item.code" :label="item.name"
:value="item.code" />
</vxe-select>
</template>
<template #whetherTable="{ row }">
<vxe-checkbox v-model="row.whetherTable"></vxe-checkbox>
</template>
<template #whetherAddUpdate="{ row }">
<vxe-checkbox v-model="row.whetherAddUpdate" :disabled="judgeColumns(row)"></vxe-checkbox>
</template>
<template #whetherSortable="{ row }">
<vxe-checkbox v-model="row.whetherSortable"></vxe-checkbox>
</template>
<template #whetherRequired="{ row }">
<vxe-tag v-if="row.whetherRequired" status="success"></vxe-tag>
<vxe-tag v-else status="info"></vxe-tag>
</template>
<template #queryWhether="{ row }">
<vxe-switch readonly v-model="row.queryWhether" open-label="" close-label="" :openValue="true"
:closeValue="false"></vxe-switch>
</template>
<template #queryType="{ row }">
<vxe-select v-model="row.queryType" class="m-2" placeholder="Select" :disabled="!row.queryWhether"
filterable transfer>
<vxe-option v-for="item in state.queryTypeList" :key="item.code" :label="item.value" :value="item.code" />
</vxe-select>
</template>
<template #verification="{ row }">
<vxe-button status="primary" plain v-if="row.columnKey === 'False' && !row.whetherCommon"
@click="openVerifyDialog(row)">校验规则{{ row.ruleCount }}</vxe-button>
<span v-else></span>
</template>
</vxe-grid>
</template>
<template #footer>
<vxe-button @click="cancel"> </vxe-button>
<vxe-button status="primary" @click="submit"> </vxe-button>
</template>
</vxe-modal>
<fkDialog ref="fkDialogRef" @submitRefreshFk="submitRefreshFk" />
<treeDialog ref="treeDialogRef" @submitRefreshFk="submitRefreshFk" />
<verifyDialog ref="verifyDialogRef" @submitVerify="submitVerifyOk" />
</div> </div>
</template> </template>
<script lang="ts" setup name="sysCodeGenConfig"> <script lang="ts" setup name="sysCodeGenConfig">
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'; import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt'; import mittBus from '/@/utils/mitt';
import fkDialog from '/@/views/system/codeGen/component/fkDialog.vue'; import Sortable from 'sortablejs';
import treeDialog from '/@/views/system/codeGen/component/treeDialog.vue'; import { VxeGridInstance, VxeGridProps } from 'vxe-pc-ui';
import verifyDialog from '/@/views/system/codeGen/component/verifyDialog.vue';
import fkDialog from '/@/views/system/codeGen/component/fkDialog.vue';
import { getAPI } from '/@/utils/axios-utils'; import treeDialog from '/@/views/system/codeGen/component/treeDialog.vue';
import { SysCodeGenConfigApi, SysConstApi, SysDictDataApi, SysDictTypeApi, SysEnumApi } from '/@/api-services/api'; import verifyDialog from '/@/views/system/codeGen/component/verifyDialog.vue';
import { VxeGridInstance, VxeGridProps } from 'vxe-pc-ui';
import Sortable from 'sortablejs'; import { getAPI } from '/@/utils/axios-utils';
// import { CodeGenConfig } from '/@/api-services/models/code-gen-config'; import { SysCodeGenConfigApi, SysConstApi, SysDictDataApi, SysDictTypeApi, SysEnumApi } from '/@/api-services/api';
const xGrid = ref<VxeGridInstance<any>>(); // import { CodeGenConfig } from '/@/api-services/models/code-gen-config';
const emits = defineEmits(['handleQuery']);
const fkDialogRef = ref(); const xGrid = ref<VxeGridInstance<any>>();
const treeDialogRef = ref(); const emits = defineEmits(['handleQuery']);
const verifyDialogRef = ref(); const fkDialogRef = ref();
const state = reactive({ const treeDialogRef = ref();
const verifyDialogRef = ref();
const state = reactive({
isShowDialog: false, isShowDialog: false,
loading: false, loading: false,
dbData: [] as any, dbData: [] as any,
@ -97,9 +91,10 @@
allConstSelector: [] as any, allConstSelector: [] as any,
allEnumSelector: [] as any, allEnumSelector: [] as any,
sortable: undefined as any, sortable: undefined as any,
}); });
//
const options = reactive<VxeGridProps>({ //
const options = reactive<VxeGridProps>({
id: 'genConfigDialog', id: 'genConfigDialog',
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
@ -109,353 +104,353 @@
rowConfig: { useKey: true }, rowConfig: { useKey: true },
seqConfig: { seqMethod: ({ row }) => row.orderNo }, seqConfig: { seqMethod: ({ row }) => row.orderNo },
columns: [ columns: [
{ {
width: 50, width: 50,
slots: { slots: {
default: 'drag_default', default: 'drag_default',
},
}, },
}, {
{ field: 'orderNo',
field: 'orderNo', title: '排序',
title: '排序', minWidth: 80,
minWidth: 80, showOverflow: 'tooltip',
showOverflow: 'tooltip',
},
{
field: 'columnName',
title: '字段',
minWidth: 160,
showOverflow: 'tooltip',
},
{
field: 'columnComment',
title: '描述',
minWidth: 120,
showOverflow: 'tooltip',
slots: {
edit: 'columnComment',
default: 'columnComment',
}, },
}, {
{ field: 'columnName',
field: 'netType', title: '字段',
title: '数据类型', minWidth: 160,
minWidth: 90, showOverflow: 'tooltip',
},
{
field: 'effectType',
title: '作用类型',
minWidth: 160,
slots: {
edit: 'effectType',
default: 'effectType',
}, },
}, {
{ field: 'columnComment',
field: 'dictTypeCode', title: '描述',
title: '字典', minWidth: 120,
minWidth: 180, showOverflow: 'tooltip',
slots: { slots: {
edit: 'dictType', edit: 'columnComment',
default: 'dictType', default: 'columnComment',
},
}, },
}, {
{ field: 'netType',
field: 'whetherTable', title: '数据类型',
title: '列表显示', minWidth: 90,
minWidth: 70,
slots: {
edit: 'whetherTable',
default: 'whetherTable',
}, },
}, {
{ field: 'effectType',
field: 'whetherAddUpdate', title: '作用类型',
title: '增改', minWidth: 160,
minWidth: 70, slots: {
slots: { edit: 'effectType',
edit: 'whetherAddUpdate', default: 'effectType',
default: 'whetherAddUpdate', },
}, },
}, {
{ field: 'dictTypeCode',
field: 'whetherRequired', title: '字典',
title: '必填', minWidth: 180,
minWidth: 70, slots: {
slots: { edit: 'dictType',
edit: 'whetherRequired', default: 'dictType',
default: 'whetherRequired', },
}, },
}, {
{ field: 'whetherTable',
field: 'whetherSortable', title: '列表显示',
title: '可排序', minWidth: 70,
minWidth: 70, slots: {
slots: { edit: 'whetherTable',
edit: 'whetherSortable', default: 'whetherTable',
default: 'whetherSortable', },
}, },
}, {
{ field: 'whetherAddUpdate',
field: 'queryWhether', title: '增改',
title: '是否是查询', minWidth: 70,
minWidth: 70, slots: {
slots: { edit: 'whetherAddUpdate',
edit: 'queryWhether', default: 'whetherAddUpdate',
default: 'queryWhether', },
}, },
}, {
{ field: 'whetherRequired',
field: 'queryType', title: '必填',
title: '查询方式', minWidth: 70,
minWidth: 120, slots: {
slots: { edit: 'whetherRequired',
edit: 'queryType', default: 'whetherRequired',
default: 'queryType', },
}, },
}, {
{ field: 'whetherSortable',
title: '校验规则', title: '可排序',
width: 130, minWidth: 70,
showOverflow: true, slots: {
slots: { edit: 'whetherSortable',
edit: 'verification', default: 'whetherSortable',
default: 'verification', },
},
{
field: 'queryWhether',
title: '是否是查询',
minWidth: 70,
slots: {
edit: 'queryWhether',
default: 'queryWhether',
},
},
{
field: 'queryType',
title: '查询方式',
minWidth: 120,
slots: {
edit: 'queryType',
default: 'queryType',
},
},
{
title: '校验规则',
width: 130,
showOverflow: true,
slots: {
edit: 'verification',
default: 'verification',
},
}, },
},
], ],
editConfig: { trigger: 'click', mode: 'row', showStatus: true }, editConfig: { trigger: 'click', mode: 'row', showStatus: true },
}); });
const rowDrop = () => { const rowDrop = () => {
const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement; const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement;
state.sortable = Sortable.create(el, { state.sortable = Sortable.create(el, {
animation: 300, animation: 300,
handle: '.drag-btn', handle: '.drag-btn',
onEnd: (sortableEvent: any) => { onEnd: (sortableEvent: any) => {
const fullData = xGrid.value?.getTableData().fullData || []; const fullData = xGrid.value?.getTableData().fullData || [];
const newIndex = sortableEvent.newIndex as number; const newIndex = sortableEvent.newIndex as number;
const oldIndex = sortableEvent.oldIndex as number; const oldIndex = sortableEvent.oldIndex as number;
// //
if (oldIndex > newIndex) { if (oldIndex > newIndex) {
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1); const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
for (let i = oldIndex; i > newIndex; i--) { for (let i = oldIndex; i > newIndex; i--) {
const row = fullData?.find((e) => e.orderNo == i); const row = fullData?.find((e) => e.orderNo == i);
if (row) { if (row) {
row.orderNo += 1; row.orderNo += 1;
}
}
moveRow.orderNo = newIndex + 1;
} else {
//
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
for (let i = oldIndex; i < newIndex; i++) {
const row = fullData?.find((e) => e.orderNo == i + 2);
if (row) {
row.orderNo -= 1;
}
}
moveRow.orderNo = newIndex + 1;
} }
} //
moveRow.orderNo = newIndex + 1; xGrid.value?.updateData();
} else { },
//
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
for (let i = oldIndex; i < newIndex; i++) {
const row = fullData?.find((e) => e.orderNo == i + 2);
if (row) {
row.orderNo -= 1;
}
}
moveRow.orderNo = newIndex + 1;
}
//
xGrid.value?.updateData();
},
}); });
}; };
// //
onMounted(async () => { onMounted(async () => {
// //
var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_effect_type'); var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_effect_type');
state.effectTypeList = res.data.result; state.effectTypeList = res.data.result;
// //
var res1 = await getAPI(SysDictTypeApi).apiSysDictTypeListGet(); var res1 = await getAPI(SysDictTypeApi).apiSysDictTypeListGet();
state.dictTypeCodeList = res1.data.result; state.dictTypeCodeList = res1.data.result;
state.dictDataAll = res1.data.result; state.dictDataAll = res1.data.result;
// //
var res2 = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_query_type'); var res2 = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_query_type');
state.queryTypeList = res2.data.result; state.queryTypeList = res2.data.result;
// //
var res3 = await getAPI(SysConstApi).apiSysConstListGet(); var res3 = await getAPI(SysConstApi).apiSysConstListGet();
state.allConstSelector = res3.data.result; state.allConstSelector = res3.data.result;
// //
let resEnum = await getAPI(SysEnumApi).apiSysEnumEnumTypeListGet(); let resEnum = await getAPI(SysEnumApi).apiSysEnumEnumTypeListGet();
state.allEnumSelector = resEnum.data.result?.map((item) => ({ ...item, name: `${item.typeDescribe} [${item.typeName?.replace('Enum', '')}]`, code: item.typeName })); state.allEnumSelector = resEnum.data.result?.map((item) => ({ ...item, name: `${item.typeDescribe} [${item.typeName?.replace('Enum', '')}]`, code: item.typeName }));
mittBus.on('submitRefreshFk', (data: any) => { mittBus.on('submitRefreshFk', (data: any) => {
let tableData = xGrid.value?.getData() || []; let tableData = xGrid.value?.getData() || [];
tableData[data.index] = data; tableData[data.index] = data;
xGrid.value?.loadData(tableData); xGrid.value?.loadData(tableData);
}); });
}); });
// //
const submitRefreshFk = (data: any) => { const submitRefreshFk = (data: any) => {
let tableData = xGrid.value?.getData() || []; let tableData = xGrid.value?.getData() || [];
tableData[data.index] = data; tableData[data.index] = data;
xGrid.value?.reloadData(tableData); xGrid.value?.reloadData(tableData);
}; };
onUnmounted(() => { //
onUnmounted(() => {
// mittBus.off('submitRefresh', () => {}); // mittBus.off('submitRefresh', () => {});
mittBus.off('submitRefreshFk', () => { }); mittBus.off('submitRefreshFk', () => {});
}); });
// //
const effectTypeChange = (data: any, index: number) => { const effectTypeChange = (data: any, index: number) => {
let value = data.effectType; let value = data.effectType;
if (value === 'fk') { if (value === 'fk') {
openFkDialog(data, index); openFkDialog(data, index);
} else if (value === 'ApiTreeSelect') { } else if (value === 'ApiTreeSelect') {
openTreeDialog(data, index); openTreeDialog(data, index);
} else if (value === 'Select') { } else if (value === 'Select') {
data.dictTypeCode = ''; data.dictTypeCode = '';
state.dictTypeCodeList = state.dictDataAll; state.dictTypeCodeList = state.dictDataAll;
} else if (value === 'ConstSelector') { } else if (value === 'ConstSelector') {
data.dictTypeCode = ''; data.dictTypeCode = '';
state.dictTypeCodeList = state.allConstSelector; state.dictTypeCodeList = state.allConstSelector;
} else if (value == 'EnumSelector') { } else if (value == 'EnumSelector') {
data.dictTypeCode = ''; data.dictTypeCode = '';
state.dictTypeCodeList = state.allEnumSelector; state.dictTypeCodeList = state.allEnumSelector;
} }
}; };
// //
const handleQuery = async (row: any) => { const handleQuery = async (row: any) => {
state.loading = true; state.loading = true;
var res = await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigListGet(undefined, row.id); var res = await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigListGet(undefined, row.id);
var data = res.data.result ?? []; var data = res.data.result ?? [];
let lstWhetherColumn = ['whetherTable', 'whetherAddUpdate', 'whetherRequired', 'whetherSortable']; //checkbox let lstWhetherColumn = ['whetherTable', 'whetherAddUpdate', 'whetherRequired', 'whetherSortable']; //checkbox
data.forEach((item: any) => { data.forEach((item: any) => {
for (const key in item) { for (const key in item) {
if (item[key] === 'Y') { if (item[key] === 'Y') {
item[key] = true; item[key] = true;
}
if (item[key] === 'N' || (lstWhetherColumn.includes(key) && item[key] === null)) {
item[key] = false;
}
} }
if (item[key] === 'N' || (lstWhetherColumn.includes(key) && item[key] === null)) { //
item[key] = false; let rules = new Array();
if (item.rules != '' && item.rules !== null) {
rules = JSON.parse(item.rules);
} }
} item.ruleCount = rules.length > 0 ? `${rules.length}` : '';
//
let rules = new Array();
if (item.rules != '' && item.rules !== null) {
rules = JSON.parse(item.rules);
}
item.ruleCount = rules.length > 0 ? `${rules.length}` : '';
}); });
xGrid.value?.loadData(data); xGrid.value?.loadData(data);
state.loading = false; state.loading = false;
}; };
// //
function judgeColumns(data: any) { function judgeColumns(data: any) {
return data.whetherCommon == true || data.columnKey === 'True'; return data.whetherCommon == true || data.columnKey === 'True';
} }
function effectTypeEnable(data: any) { function effectTypeEnable(data: any) {
var lst = ['Radio', 'Select', 'Checkbox', 'ConstSelector', 'EnumSelector']; var lst = ['Radio', 'Select', 'Checkbox', 'ConstSelector', 'EnumSelector'];
return lst.indexOf(data.effectType) === -1; return lst.indexOf(data.effectType) === -1;
} }
// //
const openDialog = async (addRow: any) => { const openDialog = async (addRow: any) => {
state.isShowDialog = true; state.isShowDialog = true;
nextTick(async () => { nextTick(async () => {
await handleQuery(addRow); await handleQuery(addRow);
rowDrop(); rowDrop();
}); });
}; };
// //
const openFkDialog = (addRow: any, index: number) => { const openFkDialog = (addRow: any, index: number) => {
addRow.index = index; addRow.index = index;
fkDialogRef.value.openDialog(addRow); fkDialogRef.value.openDialog(addRow);
}; };
const openTreeDialog = (addRow: any, index: number) => { const openTreeDialog = (addRow: any, index: number) => {
addRow.index = index; addRow.index = index;
treeDialogRef.value.openDialog(addRow); treeDialogRef.value.openDialog(addRow);
}; };
// //
const openVerifyDialog = (row: any) => { const openVerifyDialog = (row: any) => {
// handleQuery(addRow); // handleQuery(addRow);
// state.isShowDialog = true; // state.isShowDialog = true;
verifyDialogRef.value.openDialog(row); verifyDialogRef.value.openDialog(row);
}; };
// //
const submitVerifyOk = (data: any) => { const submitVerifyOk = (data: any) => {
let tableData = xGrid.value?.getData() || []; let tableData = xGrid.value?.getData() || [];
for (let i = 0; i < tableData.length; i++) { for (let i = 0; i < tableData.length; i++) {
if (tableData[i].id == data.id) { if (tableData[i].id == data.id) {
tableData[i].rules = data.rules; tableData[i].rules = data.rules;
tableData[i].ruleCount = data.ruleCount; tableData[i].ruleCount = data.ruleCount;
// //
let rules = new Array(); let rules = new Array();
if (data.rules != '' && data.rules !== null) { if (data.rules != '' && data.rules !== null) {
rules = JSON.parse(data.rules); rules = JSON.parse(data.rules);
let requiredRule = rules.find((t) => t.type === 'required'); let requiredRule = rules.find((t) => t.type === 'required');
if (requiredRule) { if (requiredRule) {
tableData[i].whetherRequired = true; tableData[i].whetherRequired = true;
} else { } else {
tableData[i].whetherRequired = false; tableData[i].whetherRequired = false;
} }
}
break;
} }
break;
}
} }
xGrid.value?.reloadData(tableData); xGrid.value?.reloadData(tableData);
}; };
// //
const closeDialog = () => { const closeDialog = () => {
emits('handleQuery'); emits('handleQuery');
cancel(); cancel();
}; };
// //
const cancel = () => { const cancel = () => {
xGrid.value?.loadData([]); xGrid.value?.loadData([]);
state.isShowDialog = false; state.isShowDialog = false;
if (state.sortable) { if (state.sortable) {
state.sortable.destroy(); state.sortable.destroy();
} }
}; };
// //
const submit = async () => { const submit = async () => {
state.loading = true; state.loading = true;
let lst = xGrid.value?.getData() || []; let lst = xGrid.value?.getData() || [];
// console.log(lst);
let ignoreFields = ['remoteVerify', 'anyRule', 'columnKey']; let ignoreFields = ['remoteVerify', 'anyRule', 'columnKey'];
lst.forEach((item: any) => { lst.forEach((item: any) => {
// //
for (var key in item) { for (var key in item) {
if (item[key] === true && !ignoreFields.includes(key)) { if (item[key] === true && !ignoreFields.includes(key)) {
item[key] = 'Y'; item[key] = 'Y';
}
if (item[key] === false && !ignoreFields.includes(key)) {
item[key] = 'N';
}
} }
if (item[key] === false && !ignoreFields.includes(key)) {
item[key] = 'N';
}
}
}); });
await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigUpdatePost(lst); await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigUpdatePost(lst);
state.loading = false; state.loading = false;
closeDialog(); closeDialog();
}; };
// //
defineExpose({ openDialog }); defineExpose({ openDialog });
</script> </script>
<style lang="scss" scoped>
.xGrid-table-style .drag-btn { <style lang="scss" scoped>
.xGrid-table-style .drag-btn {
cursor: move; cursor: move;
font-size: 20px; font-size: 20px;
} }
</style> </style>

View File

@ -1,94 +1,87 @@
<template> <template>
<div class="sys-dbTable-container"> <div class="sys-dbTable-container">
<vxe-modal v-model="state.visible" title="增加表" :width="800" :height="350" resize show-footer show-confirm-button <vxe-modal v-model="state.visible" title="增加表" :width="800" :height="350" resize show-footer show-confirm-button show-cancel-button show-zoom fullscreen @close="cancel">
show-cancel-button show-zoom fullscreen @close="cancel"> <template #default>
<template #default> <el-divider content-position="left" style="margin: 10px 0 18px 0">数据表信息</el-divider>
<el-divider content-position="left" style="margin: 10px 0 18px 0">数据表信息</el-divider> <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> <el-row>
<el-row> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-form-item label="表名称" prop="tableName" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
<el-form-item label="表名称" prop="tableName" <el-input v-model.lazy.trim="state.ruleForm.tableName" placeholder="表名称" clearable />
:rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"> </el-form-item>
<el-input v-model.lazy.trim="state.ruleForm.tableName" placeholder="表名称" clearable /> </el-col>
</el-form-item> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
</el-col> <el-form-item label="描述" prop="description" :rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-input v-model.lazy.trim="state.ruleForm.description" placeholder="描述" clearable type="textarea" />
<el-form-item label="描述" prop="description" </el-form-item>
:rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]"> </el-col>
<el-input v-model.lazy.trim="state.ruleForm.description" placeholder="描述" clearable type="textarea" /> </el-row>
</el-form-item> </el-form>
</el-col> <el-divider content-position="left" style="margin: 10px 0 18px 0">数据列信息</el-divider>
</el-row> <div style="height: calc(100vh - 300px)">
</el-form> <vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options">
<el-divider content-position="left" style="margin: 10px 0 18px 0">数据列信息</el-divider> <template #toolbar_buttons>
<div style="height: calc(100vh - 300px)"> <el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button>
<vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options"> <el-button icon="ele-Plus" @click="addColumn">新增普通字段</el-button>
<template #toolbar_buttons> <el-button icon="ele-Plus" @click="addTenantColumn">新增租户字段</el-button>
<el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button> <el-button icon="ele-Plus" @click="addBaseColumn">新增基础字段</el-button>
<el-button icon="ele-Plus" @click="addColumn">新增普通字段</el-button> <el-button icon="ele-Delete" type="danger" @click="deleteSelected">删除选中</el-button>
<el-button icon="ele-Plus" @click="addTenantColumn">新增租户字段</el-button> </template>
<el-button icon="ele-Plus" @click="addBaseColumn">新增基础字段</el-button> <template #toolbar_tools> </template>
<el-button icon="ele-Delete" type="danger" @click="deleteSelected">删除选中</el-button> <template #empty>
</template> <el-empty :image-size="200" />
<template #toolbar_tools> </template> </template>
<template #empty> <template #drag_default="{}">
<el-empty :image-size="200" /> <span class="drag-btn">
</template> <i class="fa fa-arrows"></i>
<template #drag_default="{}"> </span>
<span class="drag-btn"> </template>
<i class="fa fa-arrows"></i> <template #isPrimarykey="{ row }">
</span> <vxe-switch readonly v-model="row.isPrimarykey" open-label="是" close-label="否" :openValue="1" :closeValue="0"></vxe-switch>
</template> </template>
<template #isPrimarykey="{ row }"> <template #isIdentity="{ row }">
<vxe-switch readonly v-model="row.isPrimarykey" open-label="" close-label="" :openValue="1" <vxe-switch readonly v-model="row.isIdentity" open-label="是" close-label="否" :openValue="1" :closeValue="0"></vxe-switch>
:closeValue="0"></vxe-switch> </template>
</template> <template #isNullable="{ row }">
<template #isIdentity="{ row }"> <vxe-switch readonly v-model="row.isNullable" open-label="是" close-label="否" :openValue="1" :closeValue="0"></vxe-switch>
<vxe-switch readonly v-model="row.isIdentity" open-label="" close-label="" :openValue="1" </template>
:closeValue="0"></vxe-switch> <template #operate="{ row }">
</template> <vxe-button mode="text" status="error" icon="vxe-icon-delete" @click="deleteRow(row)" />
<template #isNullable="{ row }"> </template>
<vxe-switch readonly v-model="row.isNullable" open-label="" close-label="" :openValue="1" </vxe-grid>
:closeValue="0"></vxe-switch> </div>
</template> </template>
<template #operate="{ row }"> <template #footer>
<vxe-button mode="text" status="error" icon="vxe-icon-delete" @click="deleteRow(row)" /> <vxe-button @click="cancel"> </vxe-button>
</template> <vxe-button status="primary" @click="submit"> </vxe-button>
</vxe-grid> </template>
</div> </vxe-modal>
</template>
<template #footer>
<vxe-button @click="cancel"> </vxe-button>
<vxe-button status="primary" @click="submit"> </vxe-button>
</template>
</vxe-modal>
</div> </div>
</template> </template>
<script lang="tsx" setup name="sysAddTable"> <script lang="tsx" setup name="sysAddTable">
import { nextTick, reactive, ref } from 'vue'; import { nextTick, reactive, ref } from 'vue';
import { ElMessage, dayjs } from 'element-plus'; import { ElMessage, dayjs } from 'element-plus';
import { VxeGridInstance, VxeGridProps } from 'vxe-table'; import { VxeGridInstance, VxeGridProps } from 'vxe-table';
import { Rank } from '@element-plus/icons-vue'; import Sortable from 'sortablejs';
import Sortable from 'sortablejs'; import { dataTypeList } from '../database';
import { dataTypeList } from '../database';
import { getAPI } from '/@/utils/axios-utils';
import { getAPI } from '/@/utils/axios-utils'; import { SysDatabaseApi } from '/@/api-services/api';
import { SysDatabaseApi } from '/@/api-services/api'; import { UpdateDbTableInput } from '/@/api-services/models';
import { UpdateDbTableInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const xGrid = ref<VxeGridInstance>(); let initTime: any;
let initTime: any; const emits = defineEmits(['addTableSubmitted']);
const emits = defineEmits(['addTableSubmitted']); const ruleFormRef = ref();
const ruleFormRef = ref(); const state = reactive({
const state = reactive({
visible: false, visible: false,
ruleForm: {} as UpdateDbTableInput, ruleForm: {} as UpdateDbTableInput,
sortable: undefined as any, sortable: undefined as any,
}); });
// //
const options = reactive<VxeGridProps>({ const options = reactive<VxeGridProps>({
id: 'sysAddTable', id: 'sysAddTable',
height: 'auto', height: 'auto',
autoResize: true, autoResize: true,
@ -98,373 +91,373 @@
data: [] as Array<any>, data: [] as Array<any>,
rowConfig: { useKey: true }, rowConfig: { useKey: true },
mouseConfig: { mouseConfig: {
selected: true, selected: true,
}, },
keyboardConfig: { keyboardConfig: {
isArrow: true, isArrow: true,
isDel: true, isDel: true,
isEnter: true, isEnter: true,
isTab: true, isTab: true,
isEdit: true, isEdit: true,
}, },
seqConfig: { seqMethod: ({ row }) => row.orderNo }, seqConfig: { seqMethod: ({ row }) => row.orderNo },
columns: [ columns: [
{ {
width: 80, width: 80,
slots: { slots: {
default: 'drag_default', default: 'drag_default',
},
}, },
}, { type: 'seq', title: '序号', width: 60 },
{ type: 'seq', title: '序号', width: 60 }, { type: 'checkbox', width: 40 },
{ type: 'checkbox', width: 40 }, {
{ field: 'dbColumnName',
field: 'dbColumnName', title: '字段名',
title: '字段名', minWidth: 160,
minWidth: 160, showOverflow: 'tooltip',
showOverflow: 'tooltip', editRender: { name: '$input', props: { clearable: true, placeholder: '请输入字段名' } },
editRender: { name: '$input', props: { clearable: true, placeholder: '请输入字段名' } },
},
{
field: 'columnDescription',
title: '描述',
minWidth: 220,
showOverflow: 'tooltip',
editRender: { name: '$input', props: { clearable: true, placeholder: '请输入描述' } },
},
{
field: 'isPrimarykey',
title: '主键',
minWidth: 100,
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否', immediate: true } },
slots: {
default: "isPrimarykey"
}, },
}, {
{ field: 'columnDescription',
field: 'isIdentity', title: '描述',
title: '自增', minWidth: 220,
minWidth: 100, showOverflow: 'tooltip',
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } }, editRender: { name: '$input', props: { clearable: true, placeholder: '请输入描述' } },
slots: {
default: "isIdentity"
}, },
}, {
{ field: 'isPrimarykey',
field: 'dataType', title: '主键',
title: '类型', minWidth: 100,
minWidth: 100, editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否', immediate: true } },
editRender: { slots: {
name: '$select', default: 'isPrimarykey',
options: dataTypeList, },
optionProps: { value: 'value', label: 'value' },
props: { optionProps: { value: 'value', label: 'value' }, placeholder: '请选择类型', popupClassName: 'zIndex2023' },
}, },
}, {
{ field: 'isIdentity',
field: 'isNullable', title: '自增',
title: '可空', minWidth: 100,
minWidth: 100, editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } }, slots: {
slots: { default: 'isIdentity',
default: "isNullable" },
}, },
}, {
{ field: 'dataType',
field: 'length', title: '类型',
title: '长度', minWidth: 100,
minWidth: 100, editRender: {
showOverflow: 'tooltip', name: '$select',
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入长度' } }, options: dataTypeList,
}, optionProps: { value: 'value', label: 'value' },
{ props: { optionProps: { value: 'value', label: 'value' }, placeholder: '请选择类型', popupClassName: 'zIndex2023' },
field: 'decimalDigits', },
title: '小数位', },
minWidth: 100, {
showOverflow: 'tooltip', field: 'isNullable',
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入小数位' } }, title: '可空',
}, minWidth: 100,
{ editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
title: '操作', slots: {
width: 80, default: 'isNullable',
showOverflow: true, },
fixed: 'right', },
slots: { {
default: "operate", field: 'length',
title: '长度',
minWidth: 100,
showOverflow: 'tooltip',
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入长度' } },
},
{
field: 'decimalDigits',
title: '小数位',
minWidth: 100,
showOverflow: 'tooltip',
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入小数位' } },
},
{
title: '操作',
width: 80,
showOverflow: true,
fixed: 'right',
slots: {
default: 'operate',
},
}, },
},
], ],
editRules: { editRules: {
dbColumnName: [{ required: true, message: '字段名必填' }], dbColumnName: [{ required: true, message: '字段名必填' }],
dataType: [{ required: true, message: '类型必填' }], dataType: [{ required: true, message: '类型必填' }],
}, },
toolbarConfig: { toolbarConfig: {
size: 'small', size: 'small',
slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' }, slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
refresh: false, refresh: false,
export: true, export: true,
print: true, print: true,
zoom: true, zoom: true,
custom: false, custom: false,
}, },
checkboxConfig: { range: true }, checkboxConfig: { range: true },
sortConfig: { sortConfig: {
trigger: 'cell', trigger: 'cell',
remote: false, remote: false,
}, },
editConfig: { trigger: 'click', mode: 'row', showStatus: true }, editConfig: { trigger: 'click', mode: 'row', showStatus: true },
exportConfig: { exportConfig: {
remote: false, //使 remote: false, // 使
filename: `数据列信息导出_${dayjs().format('YYMMDDHHmmss')}`, filename: `数据列信息导出_${dayjs().format('YYMMDDHHmmss')}`,
exportMethod: ({ options }) => handleExport(options), // exportMethod: ({ options }) => handleExport(options), //
}, },
printConfig: { sheetName: '' }, printConfig: { sheetName: '' },
proxyConfig: { proxyConfig: {
props: { props: {
list: 'data.result.items', // list: 'data.result.items', //
// result: 'data.result.items', // // result: 'data.result.items', //
total: 'data.result.total', total: 'data.result.total',
message: 'data.message', message: 'data.message',
}, },
ajax: { ajax: {
query: () => Promise.resolve(), // query: () => Promise.resolve(), //
}, },
}, },
}); });
// //
const openDialog = (row: any) => { const openDialog = (row: any) => {
state.ruleForm = row; state.ruleForm = row;
state.visible = true; state.visible = true;
ruleFormRef.value?.resetFields(); ruleFormRef.value?.resetFields();
nextTick(() => { nextTick(() => {
rowDrop(); rowDrop();
}); });
}; };
const rowDrop = () => { const rowDrop = () => {
const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement; const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement;
state.sortable = Sortable.create(el, { state.sortable = Sortable.create(el, {
animation: 300, animation: 300,
handle: '.drag-btn', handle: '.drag-btn',
onEnd: (sortableEvent: any) => { onEnd: (sortableEvent: any) => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const newIndex = sortableEvent.newIndex as number; const newIndex = sortableEvent.newIndex as number;
const oldIndex = sortableEvent.oldIndex as number; const oldIndex = sortableEvent.oldIndex as number;
// //
if (oldIndex > newIndex) { if (oldIndex > newIndex) {
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1); const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
for (let i = oldIndex; i > newIndex; i--) { for (let i = oldIndex; i > newIndex; i--) {
const row = fullData?.find((e) => e.orderNo == i); const row = fullData?.find((e) => e.orderNo == i);
row.orderNo += 1; row.orderNo += 1;
} }
moveRow.orderNo = newIndex + 1; moveRow.orderNo = newIndex + 1;
} else { } else {
// //
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1); const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
for (let i = oldIndex; i < newIndex; i++) { for (let i = oldIndex; i < newIndex; i++) {
const row = fullData?.find((e) => e.orderNo == i + 2); const row = fullData?.find((e) => e.orderNo == i + 2);
row.orderNo -= 1; row.orderNo -= 1;
} }
moveRow.orderNo = newIndex + 1; moveRow.orderNo = newIndex + 1;
} }
xGrid.value?.updateData(); xGrid.value?.updateData();
}, },
}); });
}; };
// //
const closeDialog = () => { const closeDialog = () => {
emits('addTableSubmitted', state.ruleForm.tableName ?? ''); emits('addTableSubmitted', state.ruleForm.tableName ?? '');
cancel(); cancel();
}; };
// //
const cancel = () => { const cancel = () => {
xGrid.value?.loadData([]); xGrid.value?.loadData([]);
state.visible = false; state.visible = false;
clearTimeout(initTime); clearTimeout(initTime);
if (state.sortable) { if (state.sortable) {
state.sortable.destroy(); state.sortable.destroy();
} }
}; };
// () // ()
const handleExport = async (opts: any) => { const handleExport = async (opts: any) => {
console.log(opts); console.log(opts);
options.loading = true; options.loading = true;
// var res = await getAPI(SysLogExApi).apiSysLogExExportPost(state.queryParams as any, { responseType: 'blob' }); // var res = await getAPI(SysLogExApi).apiSysLogExExportPost(state.queryParams as any, { responseType: 'blob' });
options.loading = false; options.loading = false;
// VXETable.saveFile({ filename: getFileName(res.headers), type: 'xlsx', content: res.data as any }); // VXETable.saveFile({ filename: getFileName(res.headers), type: 'xlsx', content: res.data as any });
return Promise.resolve(); return Promise.resolve();
}; };
// //
const submit = () => { const submit = () => {
ruleFormRef.value.validate(async (valid: boolean) => { ruleFormRef.value.validate(async (valid: boolean) => {
if (!valid) return; if (!valid) return;
const tableData = xGrid.value?.getTableData().fullData ?? []; const tableData = xGrid.value?.getTableData().fullData ?? [];
if (tableData.length === 0) { if (tableData.length === 0) {
ElMessage({ type: 'error', message: `请添加列!` }); ElMessage({ type: 'error', message: `请添加列!` });
return; return;
} }
const rowValid = await xGrid.value?.validate(true); const rowValid = await xGrid.value?.validate(true);
if (rowValid) { if (rowValid) {
ElMessage.error('校验不通过'); ElMessage.error('校验不通过');
return; return;
} }
const params: any = { const params: any = {
dbColumnInfoList: tableData, dbColumnInfoList: tableData,
...state.ruleForm, ...state.ruleForm,
}; };
await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params); await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params);
closeDialog(); closeDialog();
}); });
}; };
// //
const addPrimaryColumn = async () => { const addPrimaryColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
{ {
columnDescription: '主键ID', columnDescription: '主键ID',
dataType: 'bigint', dataType: 'bigint',
dbColumnName: 'Id', dbColumnName: 'Id',
decimalDigits: 0, decimalDigits: 0,
isIdentity: 0, isIdentity: 0,
isNullable: 0, isNullable: 0,
isPrimarykey: 1, isPrimarykey: 1,
length: 0, length: 0,
orderNo: colIndex, orderNo: colIndex,
editable: true, editable: true,
isNew: true, isNew: true,
}, },
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// //
const addColumn = async () => { const addColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
{ {
columnDescription: '', columnDescription: '',
dataType: 'varchar', dataType: 'varchar',
dbColumnName: '', dbColumnName: '',
decimalDigits: 0, decimalDigits: 0,
isIdentity: 0, isIdentity: 0,
isNullable: 1, isNullable: 1,
isPrimarykey: 0, isPrimarykey: 0,
length: 64, length: 64,
orderNo: colIndex, orderNo: colIndex,
editable: true, editable: true,
isNew: true, isNew: true,
}, },
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// //
const addTenantColumn = async () => { const addTenantColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
{ {
columnDescription: '租户Id', columnDescription: '租户Id',
dataType: 'bigint', dataType: 'bigint',
dbColumnName: 'TenantId', dbColumnName: 'TenantId',
decimalDigits: 0, decimalDigits: 0,
isIdentity: 0, isIdentity: 0,
isNullable: 1, isNullable: 1,
isPrimarykey: 0, isPrimarykey: 0,
length: 0, length: 0,
orderNo: colIndex, orderNo: colIndex,
editable: true, editable: true,
isNew: true, isNew: true,
}, },
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// //
const addBaseColumn = async () => { const addBaseColumn = async () => {
const fileds = [ const fileds = [
{ dataType: 'varchar', name: 'Code', desc: '编码', length: 64 }, { dataType: 'varchar', name: 'Code', desc: '编码', length: 64 },
{ dataType: 'varchar', name: 'Name', desc: '名称', length: 64 }, { dataType: 'varchar', name: 'Name', desc: '名称', length: 64 },
{ dataType: 'varchar', name: 'Description', desc: '描述', length: 500 }, { dataType: 'varchar', name: 'Description', desc: '描述', length: 500 },
{ dataType: 'datetime', name: 'CreateTime', desc: '创建时间' }, { dataType: 'datetime', name: 'CreateTime', desc: '创建时间' },
{ dataType: 'bigint', name: 'CreateUserId', desc: '创建人Id' }, { dataType: 'bigint', name: 'CreateUserId', desc: '创建人Id' },
{ dataType: 'varchar', name: 'CreateUserName', desc: '创建人', length: 64 }, { dataType: 'varchar', name: 'CreateUserName', desc: '创建人', length: 64 },
{ dataType: 'datetime', name: 'UpdateTime', desc: '修改时间' }, { dataType: 'datetime', name: 'UpdateTime', desc: '修改时间' },
{ dataType: 'bigint', name: 'UpdateUserId', desc: '修改人Id' }, { dataType: 'bigint', name: 'UpdateUserId', desc: '修改人Id' },
{ dataType: 'varchar', name: 'UpdateUserName', desc: '修改人', length: 64 }, { dataType: 'varchar', name: 'UpdateUserName', desc: '修改人', length: 64 },
{ dataType: 'bigint', name: 'CreateOrgId', desc: '创建者机构Id' }, { dataType: 'bigint', name: 'CreateOrgId', desc: '创建者机构Id' },
{ dataType: 'varchar', name: 'CreateOrgName', desc: '创建者机构名称', length: 64 }, { dataType: 'varchar', name: 'CreateOrgName', desc: '创建者机构名称', length: 64 },
{ dataType: 'bit', name: 'IsDelete', desc: '软删除', isNullable: 0 }, { dataType: 'bit', name: 'IsDelete', desc: '软删除', isNullable: 0 },
]; ];
let temp = {} as any; let temp = {} as any;
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
let colIndex = (fullData?.length ?? 0) + 1; let colIndex = (fullData?.length ?? 0) + 1;
for (let i = 0; i < fileds.length; i++) { for (let i = 0; i < fileds.length; i++) {
temp = await xGrid.value?.insertAt( temp = await xGrid.value?.insertAt(
{ {
columnDescription: fileds[i].desc, columnDescription: fileds[i].desc,
dataType: fileds[i].dataType, dataType: fileds[i].dataType,
dbColumnName: fileds[i].name, dbColumnName: fileds[i].name,
decimalDigits: 0, decimalDigits: 0,
isIdentity: 0, isIdentity: 0,
isNullable: fileds[i].isNullable === 0 ? 0 : 1, isNullable: fileds[i].isNullable === 0 ? 0 : 1,
isPrimarykey: 0, isPrimarykey: 0,
length: (fileds[i] as any).length || 0, length: (fileds[i] as any).length || 0,
orderNo: colIndex, orderNo: colIndex,
editable: true, editable: true,
isNew: true, isNew: true,
}, },
-1 -1
); );
colIndex++; colIndex++;
} }
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// //
const deleteRow = (row: any) => { const deleteRow = (row: any) => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1)); fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
xGrid.value?.remove(row); xGrid.value?.remove(row);
}; };
// //
const deleteSelected = () => { const deleteSelected = () => {
const selected = xGrid.value?.getCheckboxRecords(); const selected = xGrid.value?.getCheckboxRecords();
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
// //
for (let i = 0; i < selected!.length; i++) { for (let i = 0; i < selected!.length; i++) {
fullData?.filter((e: any) => e.orderNo > selected![i].orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1)); fullData?.filter((e: any) => e.orderNo > selected![i].orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
} }
// //
xGrid.value?.removeCheckboxRow(); xGrid.value?.removeCheckboxRow();
}; };
// //
defineExpose({ openDialog }); defineExpose({ openDialog });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sys-dbTable-container :deep(.el-dialog__body) {} .sys-dbTable-container :deep(.el-dialog__body) {
}
.xGrid-table-style .drag-btn {
.xGrid-table-style .drag-btn {
cursor: move; cursor: move;
font-size: 20px; font-size: 20px;
} }
.xGrid-table-style .vxe-body--row.sortable-ghost, .xGrid-table-style .vxe-body--row.sortable-ghost,
.xGrid-table-style .vxe-body--row.sortable-chosen { .xGrid-table-style .vxe-body--row.sortable-chosen {
background-color: #e40000 !important; background-color: #e40000 !important;
} }
</style> </style>