| <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-option label="主子表(增删改查)" value="sub" /> | 
|           </el-select> | 
|         </el-form-item> | 
|       </el-col> | 
|   | 
|       <el-col :span="12"> | 
|         <el-form-item prop="tplWebType"> | 
|           <template #label>前端类型</template> | 
|           <el-select v-model="info.tplWebType"> | 
|             <el-option label="Vue2 Element UI 模版" value="element-ui" /> | 
|             <el-option label="Vue3 Element Plus 模版" value="element-plus" /> | 
|           </el-select> | 
|         </el-form-item> | 
|       </el-col> | 
|   | 
|       <el-col :span="12"> | 
|         <el-form-item prop="packageName"> | 
|           <template #label> | 
|             生成包路径 | 
|             <el-tooltip content="生成在哪个java包下,例如 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> | 
|   | 
|       <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 prop="genType"> | 
|           <template #label> | 
|             生成代码方式 | 
|             <el-tooltip content="默认为zip压缩包下载,也可以自定义生成路径" placement="top"> | 
|               <el-icon><question-filled /></el-icon> | 
|             </el-tooltip> | 
|           </template> | 
|           <el-radio v-model="info.genType" value="0">zip压缩包</el-radio> | 
|           <el-radio v-model="info.genType" value="1">自定义路径</el-radio> | 
|         </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> | 
|           <el-tree-select | 
|             v-model="info.parentMenuId" | 
|             :data="menuOptions" | 
|             :props="{ value: 'menuId', label: 'menuName', children: 'children' }" | 
|             value-key="menuId" | 
|             placeholder="请选择系统菜单" | 
|             check-strictly | 
|           /> | 
|         </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 props = defineProps({ | 
|   info: { | 
|     type: Object, | 
|     default: null | 
|   }, | 
|   tables: { | 
|     type: Array, | 
|     default: null | 
|   } | 
| }); | 
|   | 
| // 表单校验 | 
| const rules = ref({ | 
|   tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }], | 
|   packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }], | 
|   moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }], | 
|   businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }], | 
|   functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }] | 
| }); | 
|   | 
| function subSelectChange(value) { | 
|   props.info.subTableFkName = ""; | 
| } | 
|   | 
| function tplSelectChange(value) { | 
|   if (value !== "sub") { | 
|     props.info.subTableName = ""; | 
|     props.info.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; | 
|     } | 
|   } | 
| } | 
|   | 
| /** 查询菜单下拉树结构 */ | 
| function getMenuTreeselect() { | 
|   listMenu().then(response => { | 
|     menuOptions.value = proxy.handleTree(response.data, "menuId"); | 
|   }); | 
| } | 
|   | 
| onMounted(() => { | 
|   getMenuTreeselect(); | 
| }) | 
|   | 
| watch(() => props.info.subTableName, val => { | 
|   setSubTableColumns(val); | 
| }); | 
|   | 
| watch(() => props.info.tplWebType, val => { | 
|   if (val === '') { | 
|     props.info.tplWebType = "element-plus"; | 
|   } | 
| }); | 
|   | 
| </script> |