From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/views/tool/gen/genInfoForm.vue | 501 ++++++++++++++++++++++++++++---------------------------
1 files changed, 255 insertions(+), 246 deletions(-)
diff --git a/src/views/tool/gen/genInfoForm.vue b/src/views/tool/gen/genInfoForm.vue
index d48276e..b738de8 100644
--- a/src/views/tool/gen/genInfoForm.vue
+++ b/src/views/tool/gen/genInfoForm.vue
@@ -1,243 +1,31 @@
-<template>
- <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
- <el-row>
- <el-col :span="12">
- <el-form-item prop="tplCategory">
- <template #label>鐢熸垚妯℃澘</template>
- <el-select v-model="info.tplCategory" @change="tplSelectChange">
- <el-option label="鍗曡〃锛堝鍒犳敼鏌ワ級" value="crud" />
- <el-option label="鏍戣〃锛堝鍒犳敼鏌ワ級" value="tree" />
- </el-select>
- </el-form-item>
- </el-col>
+<script setup lang="ts">
+import { listMenu } from '@/api/system/menu';
+import { ComponentInternalInstance, PropType } from 'vue';
- <el-col :span="12">
- <el-form-item prop="packageName">
- <template #label>
- 鐢熸垚鍖呰矾寰�
- <el-tooltip content="鐢熸垚鍦ㄥ摢涓猨ava鍖呬笅锛屼緥濡� com.ruoyi.system" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-input v-model="info.packageName" />
- </el-form-item>
- </el-col>
+interface MenuOptionsType {
+ menuId: number;
+ menuName: string;
+ children: MenuOptionsType[] | undefined;
+}
- <el-col :span="12">
- <el-form-item prop="moduleName">
- <template #label>
- 鐢熸垚妯″潡鍚�
- <el-tooltip content="鍙悊瑙ｄ负瀛愮郴缁熷悕锛屼緥濡� system" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-input v-model="info.moduleName" />
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item prop="businessName">
- <template #label>
- 鐢熸垚涓氬姟鍚�
- <el-tooltip content="鍙悊瑙ｄ负鍔熻兘鑻辨枃鍚嶏紝渚嬪 user" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-input v-model="info.businessName" />
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item prop="functionName">
- <template #label>
- 鐢熸垚鍔熻兘鍚�
- <el-tooltip content="鐢ㄤ綔绫绘弿杩帮紝渚嬪 鐢ㄦ埛" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-input v-model="info.functionName" />
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 涓婄骇鑿滃崟
- <el-tooltip content="鍒嗛厤鍒版寚瀹氳彍鍗曚笅锛屼緥濡� 绯荤粺绠＄悊" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <tree-select
- v-model:value="info.parentMenuId"
- :options="menuOptions"
- :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
- placeholder="璇烽�夋嫨绯荤粺鑿滃崟"
- />
- </el-form-item>
- </el-col>
-
- <el-col :span="12">
- <el-form-item prop="genType">
- <template #label>
- 鐢熸垚浠ｇ爜鏂瑰紡
- <el-tooltip content="榛樿涓簔ip鍘嬬缉鍖呬笅杞斤紝涔熷彲浠ヨ嚜瀹氫箟鐢熸垚璺緞" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-radio v-model="info.genType" label="0">zip鍘嬬缉鍖�</el-radio>
- <el-radio v-model="info.genType" label="1">鑷畾涔夎矾寰�</el-radio>
- </el-form-item>
- </el-col>
-
- <el-col :span="24" v-if="info.genType == '1'">
- <el-form-item prop="genPath">
- <template #label>
- 鑷畾涔夎矾寰�
- <el-tooltip content="濉啓纾佺洏缁濆璺緞锛岃嫢涓嶅～鍐欙紝鍒欑敓鎴愬埌褰撳墠Web椤圭洰涓�" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-input v-model="info.genPath">
- <template #append>
- <el-dropdown>
- <el-button type="primary">
- 鏈�杩戣矾寰勫揩閫熼�夋嫨
- <i class="el-icon-arrow-down el-icon--right"></i>
- </el-button>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item @click="info.genPath = '/'">鎭㈠榛樿鐨勭敓鎴愬熀纭�璺緞</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </template>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
-
- <template v-if="info.tplCategory == 'tree'">
- <h4 class="form-header">鍏朵粬淇℃伅</h4>
- <el-row v-show="info.tplCategory == 'tree'">
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 鏍戠紪鐮佸瓧娈�
- <el-tooltip content="鏍戞樉绀虹殑缂栫爜瀛楁鍚嶏紝 濡傦細dept_id" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-select v-model="info.treeCode" placeholder="璇烽�夋嫨">
- <el-option
- v-for="(column, index) in info.columns"
- :key="index"
- :label="column.columnName + '锛�' + column.columnComment"
- :value="column.columnName"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 鏍戠埗缂栫爜瀛楁
- <el-tooltip content="鏍戞樉绀虹殑鐖剁紪鐮佸瓧娈靛悕锛� 濡傦細parent_Id" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-select v-model="info.treeParentCode" placeholder="璇烽�夋嫨">
- <el-option
- v-for="(column, index) in info.columns"
- :key="index"
- :label="column.columnName + '锛�' + column.columnComment"
- :value="column.columnName"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 鏍戝悕绉板瓧娈�
- <el-tooltip content="鏍戣妭鐐圭殑鏄剧ず鍚嶇О瀛楁鍚嶏紝 濡傦細dept_name" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-select v-model="info.treeName" placeholder="璇烽�夋嫨">
- <el-option
- v-for="(column, index) in info.columns"
- :key="index"
- :label="column.columnName + '锛�' + column.columnComment"
- :value="column.columnName"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- </template>
-
- <template v-if="info.tplCategory == 'sub'">
- <h4 class="form-header">鍏宠仈淇℃伅</h4>
- <el-row>
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 鍏宠仈瀛愯〃鐨勮〃鍚�
- <el-tooltip content="鍏宠仈瀛愯〃鐨勮〃鍚嶏紝 濡傦細sys_user" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-select v-model="info.subTableName" placeholder="璇烽�夋嫨" @change="subSelectChange">
- <el-option
- v-for="(table, index) in tables"
- :key="index"
- :label="table.tableName + '锛�' + table.tableComment"
- :value="table.tableName"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item>
- <template #label>
- 瀛愯〃鍏宠仈鐨勫閿悕
- <el-tooltip content="瀛愯〃鍏宠仈鐨勫閿悕锛� 濡傦細user_id" placement="top">
- <el-icon><question-filled /></el-icon>
- </el-tooltip>
- </template>
- <el-select v-model="info.subTableFkName" placeholder="璇烽�夋嫨">
- <el-option
- v-for="(column, index) in subColumns"
- :key="index"
- :label="column.columnName + '锛�' + column.columnComment"
- :value="column.columnName"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- </template>
-
- </el-form>
-</template>
-
-<script setup>
-import { listMenu } from "@/api/system/menu";
-
-const subColumns = ref([]);
-const menuOptions = ref([]);
-const { proxy } = getCurrentInstance();
+const subColumns = ref<any>([]);
+const menuOptions = ref<Array<MenuOptionsType>>([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
info: {
- type: Object,
+ type: Object as PropType<any>,
default: null
},
tables: {
- type: Array,
+ type: Array as PropType<any[]>,
default: null
}
});
+
+const infoForm = computed(() => props.info);
+
+const table = computed(() => props.tables);
// 琛ㄥ崟鏍￠獙
const rules = ref({
@@ -247,34 +35,255 @@
businessName: [{ required: true, message: "璇疯緭鍏ョ敓鎴愪笟鍔″悕", trigger: "blur" }],
functionName: [{ required: true, message: "璇疯緭鍏ョ敓鎴愬姛鑳藉悕", trigger: "blur" }]
});
-function subSelectChange(value) {
- props.info.subTableFkName = "";
+const subSelectChange = () => {
+ infoForm.value.subTableFkName = "";
}
-function tplSelectChange(value) {
+const tplSelectChange = (value: string) => {
if (value !== "sub") {
- props.info.subTableName = "";
- props.info.subTableFkName = "";
+ infoForm.value.subTableName = "";
+ infoForm.value.subTableFkName = "";
}
}
-function setSubTableColumns(value) {
- for (var item in props.tables) {
- const name = props.tables[item].tableName;
- if (value === name) {
- subColumns.value = props.tables[item].columns;
- break;
+const setSubTableColumns = (value: string) => {
+ table.value.forEach(item => {
+ const name = item.tableName;
+ if (value === name) {
+ subColumns.value = item.columns;
+ return;
}
- }
+ })
}
/** 鏌ヨ鑿滃崟涓嬫媺鏍戠粨鏋� */
-function getMenuTreeselect() {
- listMenu().then(response => {
- menuOptions.value = proxy.handleTree(response.data, "menuId");
- });
+const getMenuTreeselect = async () => {
+ const res = await listMenu();
+ const data = proxy?.handleTree<MenuOptionsType>(res.data, "menuId");
+ if (data) {
+ menuOptions.value = data
+ }
}
watch(() => props.info.subTableName, val => {
setSubTableColumns(val);
});
-getMenuTreeselect();
+onMounted(() => {
+ getMenuTreeselect();
+})
</script>
+
+<template>
+ <el-form ref="genInfoForm" :model="infoForm" :rules="rules" label-width="150px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item prop="tplCategory">
+ <template #label>鐢熸垚妯℃澘</template>
+ <el-select v-model="infoForm.tplCategory" @change="tplSelectChange">
+ <el-option label="鍗曡〃锛堝鍒犳敼鏌ワ級" value="crud" />
+ <el-option label="鏍戣〃锛堝鍒犳敼鏌ワ級" value="tree" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="packageName">
+ <template #label>
+ 鐢熸垚鍖呰矾寰�
+ <el-tooltip content="鐢熸垚鍦ㄥ摢涓猨ava鍖呬笅锛屼緥濡� com.ruoyi.system" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-input v-model="infoForm.packageName" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="moduleName">
+ <template #label>
+ 鐢熸垚妯″潡鍚�
+ <el-tooltip content="鍙悊瑙ｄ负瀛愮郴缁熷悕锛屼緥濡� system" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-input v-model="infoForm.moduleName" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="businessName">
+ <template #label>
+ 鐢熸垚涓氬姟鍚�
+ <el-tooltip content="鍙悊瑙ｄ负鍔熻兘鑻辨枃鍚嶏紝渚嬪 user" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-input v-model="infoForm.businessName" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="functionName">
+ <template #label>
+ 鐢熸垚鍔熻兘鍚�
+ <el-tooltip content="鐢ㄤ綔绫绘弿杩帮紝渚嬪 鐢ㄦ埛" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-input v-model="infoForm.functionName" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 涓婄骇鑿滃崟
+ <el-tooltip content="鍒嗛厤鍒版寚瀹氳彍鍗曚笅锛屼緥濡� 绯荤粺绠＄悊" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <tree-select
+ v-model:value="infoForm.parentMenuId"
+ :options="menuOptions"
+ :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
+ placeholder="璇烽�夋嫨绯荤粺鑿滃崟"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="genType">
+ <template #label>
+ 鐢熸垚浠ｇ爜鏂瑰紡
+ <el-tooltip content="榛樿涓簔ip鍘嬬缉鍖呬笅杞斤紝涔熷彲浠ヨ嚜瀹氫箟鐢熸垚璺緞" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-radio v-model="infoForm.genType" label="0">zip鍘嬬缉鍖�</el-radio>
+ <el-radio v-model="infoForm.genType" label="1">鑷畾涔夎矾寰�</el-radio>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24" v-if="infoForm.genType == '1'">
+ <el-form-item prop="genPath">
+ <template #label>
+ 鑷畾涔夎矾寰�
+ <el-tooltip content="濉啓纾佺洏缁濆璺緞锛岃嫢涓嶅～鍐欙紝鍒欑敓鎴愬埌褰撳墠Web椤圭洰涓�" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-input v-model="infoForm.genPath">
+ <template #append>
+ <el-dropdown>
+ <el-button type="primary">
+ 鏈�杩戣矾寰勫揩閫熼�夋嫨
+ <i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="infoForm.genPath = '/'">鎭㈠榛樿鐨勭敓鎴愬熀纭�璺緞</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <template v-if="info.tplCategory == 'tree'">
+ <h4 class="form-header">鍏朵粬淇℃伅</h4>
+ <el-row v-show="info.tplCategory == 'tree'">
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 鏍戠紪鐮佸瓧娈�
+ <el-tooltip content="鏍戞樉绀虹殑缂栫爜瀛楁鍚嶏紝 濡傦細dept_id" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-select v-model="infoForm.treeCode" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(column, index) in info.columns"
+ :key="index"
+ :label="column.columnName + '锛�' + column.columnComment"
+ :value="column.columnName"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 鏍戠埗缂栫爜瀛楁
+ <el-tooltip content="鏍戞樉绀虹殑鐖剁紪鐮佸瓧娈靛悕锛� 濡傦細parent_Id" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-select v-model="infoForm.treeParentCode" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(column, index) in infoForm.columns"
+ :key="index"
+ :label="column.columnName + '锛�' + column.columnComment"
+ :value="column.columnName"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 鏍戝悕绉板瓧娈�
+ <el-tooltip content="鏍戣妭鐐圭殑鏄剧ず鍚嶇О瀛楁鍚嶏紝 濡傦細dept_name" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-select v-model="infoForm.treeName" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(column, index) in info.columns"
+ :key="index"
+ :label="column.columnName + '锛�' + column.columnComment"
+ :value="column.columnName"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </template>
+
+ <template v-if="info.tplCategory == 'sub'">
+ <h4 class="form-header">鍏宠仈淇℃伅</h4>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 鍏宠仈瀛愯〃鐨勮〃鍚�
+ <el-tooltip content="鍏宠仈瀛愯〃鐨勮〃鍚嶏紝 濡傦細sys_user" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-select v-model="infoForm.subTableName" placeholder="璇烽�夋嫨" @change="subSelectChange">
+ <el-option v-for="(t, index) in table" :key="index" :label="t.tableName + '锛�' + t.tableComment" :value="t.tableName"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ 瀛愯〃鍏宠仈鐨勫閿悕
+ <el-tooltip content="瀛愯〃鍏宠仈鐨勫閿悕锛� 濡傦細user_id" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ </template>
+ <el-select v-model="infoForm.subTableFkName" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(column, index) in subColumns"
+ :key="index"
+ :label="column.columnName + '锛�' + column.columnComment"
+ :value="column.columnName"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </template>
+ </el-form>
+</template>
--
Gitblit v1.9.3