😎格式化代码
This commit is contained in:
parent
81ce1a5328
commit
402125b814
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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",
|
||||||
|
|||||||
2
Web/src/types/mitt.d.ts
vendored
2
Web/src/types/mitt.d.ts
vendored
@ -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 参数类型定义
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user