351 lines
12 KiB
Vue
351 lines
12 KiB
Vue
<template>
|
||
<div class="sys-codeGenConfig-container">
|
||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="80vw">
|
||
<template #header>
|
||
<div style="color: #fff">
|
||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||
<span> 生成配置 </span>
|
||
</div>
|
||
</template>
|
||
<el-table :data="state.tableData" style="width: 100%" v-loading="state.loading" border>
|
||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||
<el-table-column prop="columnName" label="字段" width="160" show-overflow-tooltip />
|
||
<el-table-column prop="columnComment" label="描述" width="160" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.columnComment" autocomplete="off" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="netType" label="数据类型" min-width="90" show-overflow-tooltip />
|
||
<el-table-column prop="effectType" label="作用类型" width="140" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div class="effect-type-container">
|
||
<el-select v-model="scope.row.effectType" class="m-2" style="width: 90%" placeholder="Select" :disabled="judgeColumns(scope.row)" @change="effectTypeChange(scope.row, scope.$index)" filterable>
|
||
<el-option v-for="item in state.effectTypeList" :key="item.code" :label="item.value" :value="item.code" />
|
||
</el-select>
|
||
<el-button
|
||
v-if="scope.row.effectType === 'ApiTreeSelect' || scope.row.effectType === 'fk'"
|
||
:icon="Edit"
|
||
type="dashed"
|
||
title="修改"
|
||
link
|
||
@click="effectTypeChange(scope.row, scope.$index)"
|
||
/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dictTypeCode" label="字典" width="180" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.dictTypeCode" class="m-2" :disabled="effectTypeEnable(scope.row)" filterable>
|
||
<el-option v-for="item in state.dictTypeCodeList" :key="item.code" :label="item.name" :value="item.code" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="whetherTable" label="列表显示" width="70" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-checkbox v-model="scope.row.whetherTable" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="whetherAddUpdate" label="增改" width="70" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-checkbox v-model="scope.row.whetherAddUpdate" :disabled="judgeColumns(scope.row)" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="whetherRequired" label="必填" width="70" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<!-- <el-checkbox v-model="scope.row.whetherRequired" :disabled="judgeColumns(scope.row)" /> -->
|
||
<el-tag v-if="scope.row.whetherRequired" type="success">是</el-tag>
|
||
<el-tag v-else type="info">否</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="whetherSortable" label="可排序" width="80" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-checkbox v-model="scope.row.whetherSortable" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="queryWhether" label="是否是查询" min-width="80" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-switch v-model="scope.row.queryWhether" :active-value="true" :inactive-value="false" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="queryType" label="查询方式" min-width="120" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.queryType" class="m-2" placeholder="Select" :disabled="!scope.row.queryWhether" filterable>
|
||
<el-option v-for="item in state.queryTypeList" :key="item.code" :label="item.value" :value="item.code" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="orderNo" label="排序" width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.orderNo" autocomplete="off" type="number" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="orderNo" label="校验" width="120" align="center" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-button type="primary" v-if="(scope.row.columnKey=== 'False') && (!scope.row.whetherCommon)"
|
||
@click="openVerifyDialog(scope.row)">规则{{ scope.row.ruleCount }}</el-button>
|
||
<span v-else></span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="cancel">取 消</el-button>
|
||
<el-button type="primary" @click="submit">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<fkDialog ref="fkDialogRef" @submitRefreshFk="submitRefreshFk" />
|
||
<treeDialog ref="treeDialogRef" @submitRefreshFk="submitRefreshFk" />
|
||
<verifyDialog ref="verifyDialogRef" @submitVerify="submitVerifyOk" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="sysCodeGenConfig">
|
||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||
import mittBus from '/@/utils/mitt';
|
||
import { Edit } from '@element-plus/icons-vue';
|
||
|
||
import fkDialog from '/@/views/system/codeGen/component/fkDialog.vue';
|
||
import treeDialog from '/@/views/system/codeGen/component/treeDialog.vue';
|
||
import verifyDialog from '/@/views/system/codeGen/component/verifyDialog.vue';
|
||
|
||
import { getAPI } from '/@/utils/axios-utils';
|
||
import { SysCodeGenConfigApi, SysConstApi, SysDictDataApi, SysDictTypeApi, SysEnumApi } from '/@/api-services/api';
|
||
import { CodeGenConfig } from '/@/api-services/models/code-gen-config';
|
||
|
||
const emits = defineEmits(['handleQuery']);
|
||
const fkDialogRef = ref();
|
||
const treeDialogRef = ref();
|
||
const verifyDialogRef = ref();
|
||
const state = reactive({
|
||
isShowDialog: false,
|
||
loading: false,
|
||
tableData: [] as CodeGenConfig[],
|
||
dbData: [] as any,
|
||
effectTypeList: [] as any,
|
||
dictTypeCodeList: [] as any,
|
||
dictDataAll: [] as any,
|
||
queryTypeList: [] as any,
|
||
allConstSelector: [] as any,
|
||
allEnumSelector: [] as any,
|
||
});
|
||
|
||
// 页面初始化
|
||
onMounted(async () => {
|
||
var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_effect_type');
|
||
state.effectTypeList = res.data.result;
|
||
|
||
var res1 = await getAPI(SysDictTypeApi).apiSysDictTypeListGet();
|
||
state.dictTypeCodeList = res1.data.result;
|
||
state.dictDataAll = res1.data.result;
|
||
|
||
var res2 = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('code_gen_query_type');
|
||
state.queryTypeList = res2.data.result;
|
||
|
||
var res3 = await getAPI(SysConstApi).apiSysConstListGet();
|
||
state.allConstSelector = res3.data.result;
|
||
|
||
let resEnum = await getAPI(SysEnumApi).apiSysEnumEnumTypeListGet();
|
||
state.allEnumSelector = resEnum.data.result?.map((item) => ({ ...item, name: `${item.typeDescribe} [${item.typeName?.replace('Enum', '')}]`, code: item.typeName }));
|
||
|
||
mittBus.on('submitRefreshFk', (data: any) => {
|
||
state.tableData[data.index] = data;
|
||
});
|
||
});
|
||
|
||
// 更新主键
|
||
const submitRefreshFk = (data: any) => {
|
||
state.tableData[data.index] = data;
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
mittBus.off('submitRefresh', () => {});
|
||
mittBus.off('submitRefreshFk', () => {});
|
||
});
|
||
|
||
// 控件类型改变
|
||
const effectTypeChange = (data: any, index: number) => {
|
||
let value = data.effectType;
|
||
if (value === 'fk') {
|
||
openFkDialog(data, index);
|
||
} else if (value === 'ApiTreeSelect') {
|
||
openTreeDialog(data, index);
|
||
} else if (value === 'Select') {
|
||
data.dictTypeCode = '';
|
||
state.dictTypeCodeList = state.dictDataAll;
|
||
} else if (value === 'ConstSelector') {
|
||
data.dictTypeCode = '';
|
||
state.dictTypeCodeList = state.allConstSelector;
|
||
} else if (value == 'EnumSelector') {
|
||
data.dictTypeCode = '';
|
||
state.dictTypeCodeList = state.allEnumSelector;
|
||
}
|
||
};
|
||
|
||
// 查询操作
|
||
const handleQuery = async (row: any) => {
|
||
state.loading = true;
|
||
var res = await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigListGet(undefined, row.id);
|
||
var data = res.data.result ?? [];
|
||
let lstWhetherColumn = ['whetherTable', 'whetherAddUpdate', 'whetherRequired', 'whetherSortable']; //列表显示的checkbox
|
||
data.forEach((item: any) => {
|
||
for (const key in item) {
|
||
if (item[key] === 'Y') {
|
||
item[key] = true;
|
||
}
|
||
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}）` : '';
|
||
});
|
||
state.tableData = data;
|
||
state.loading = false;
|
||
};
|
||
|
||
// 判断是否（用于是否能选择或输入等）
|
||
function judgeColumns(data: any) {
|
||
return data.whetherCommon == true || data.columnKey === 'True';
|
||
}
|
||
|
||
function effectTypeEnable(data: any) {
|
||
var lst = ['Radio', 'Select', 'Checkbox', 'ConstSelector', 'EnumSelector'];
|
||
return lst.indexOf(data.effectType) === -1;
|
||
}
|
||
|
||
// 打开弹窗
|
||
const openDialog = async (addRow: any) => {
|
||
await handleQuery(addRow);
|
||
state.isShowDialog = true;
|
||
};
|
||
|
||
// 打开弹窗
|
||
const openFkDialog = (addRow: any, index: number) => {
|
||
addRow.index = index;
|
||
fkDialogRef.value.openDialog(addRow);
|
||
};
|
||
|
||
const openTreeDialog = (addRow: any, index: number) => {
|
||
addRow.index = index;
|
||
treeDialogRef.value.openDialog(addRow);
|
||
};
|
||
|
||
// 打开校验弹窗
|
||
const openVerifyDialog = (row: any) => {
|
||
// handleQuery(addRow);
|
||
// state.isShowDialog = true;
|
||
verifyDialogRef.value.openDialog(row);
|
||
};
|
||
|
||
//验证提交回调
|
||
const submitVerifyOk = (data: any) => {
|
||
console.log('submitVerifyOk', data);
|
||
for (let i = 0; i < state.tableData.length; i++) {
|
||
if (state.tableData[i].id == data.id) {
|
||
state.tableData[i].rules = data.rules;
|
||
state.tableData[i].ruleCount = data.ruleCount;
|
||
//更新必填项
|
||
let rules = new Array();
|
||
if (data.rules != '' && data.rules !== null) {
|
||
rules = JSON.parse(data.rules);
|
||
let requiredRule = rules.find(t => t.type === 'required');
|
||
if (requiredRule) {
|
||
state.tableData[i].whetherRequired = true;
|
||
} else {
|
||
state.tableData[i].whetherRequired = false;
|
||
}
|
||
};
|
||
break;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const closeDialog = () => {
|
||
emits('handleQuery');
|
||
state.isShowDialog = false;
|
||
};
|
||
|
||
// 取消
|
||
const cancel = () => {
|
||
state.isShowDialog = false;
|
||
};
|
||
|
||
// 提交
|
||
const submit = async () => {
|
||
state.loading = true;
|
||
var lst = state.tableData;
|
||
console.log(lst);
|
||
let ignoreFields=['remoteVerify','anyRule','columnKey'];
|
||
lst.forEach((item: CodeGenConfig) => {
|
||
// 必填那一项转换
|
||
for (var key in item) {
|
||
if (item[key] === true&&!ignoreFields.includes(key)) {
|
||
item[key] = 'Y';
|
||
}
|
||
if (item[key] === false&&!ignoreFields.includes(key)) {
|
||
item[key] = 'N';
|
||
}
|
||
}
|
||
});
|
||
await getAPI(SysCodeGenConfigApi).apiSysCodeGenConfigUpdatePost(lst);
|
||
state.loading = false;
|
||
closeDialog();
|
||
};
|
||
|
||
const convertDbType = (dbType: number) => {
|
||
let result = '';
|
||
switch (dbType) {
|
||
case 0:
|
||
result = 'MySql';
|
||
break;
|
||
case 1:
|
||
result = 'SqlServer';
|
||
break;
|
||
case 2:
|
||
result = 'Sqlite';
|
||
break;
|
||
case 3:
|
||
result = 'Oracle';
|
||
break;
|
||
case 4:
|
||
result = 'PostgreSql';
|
||
break;
|
||
case 5:
|
||
result = 'Dm';
|
||
break;
|
||
case 6:
|
||
result = 'Kdbndp';
|
||
break;
|
||
case 7:
|
||
result = 'Oscar';
|
||
break;
|
||
case 8:
|
||
result = 'MySqlConnector';
|
||
break;
|
||
case 9:
|
||
result = 'Access';
|
||
break;
|
||
default:
|
||
result = 'Custom';
|
||
break;
|
||
}
|
||
return result;
|
||
};
|
||
|
||
const isOrNotSelect = () => [
|
||
{ label: '是', value: 1 },
|
||
{ label: '否', value: 0 },
|
||
];
|
||
|
||
// 导出对象
|
||
defineExpose({ openDialog });
|
||
</script>
|