genInfoForm.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
  3. <el-row>
  4. <el-col :span="12">
  5. <el-form-item prop="tplCategory">
  6. <template #label>生成模板</template>
  7. <el-select v-model="info.tplCategory" @change="tplSelectChange">
  8. <el-option label="单表(增删改查)" value="crud" />
  9. <el-option label="树表(增删改查)" value="tree" />
  10. <el-option label="主子表(增删改查)" value="sub" />
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="12">
  15. <el-form-item prop="tplWebType">
  16. <template #label>前端类型</template>
  17. <el-select v-model="info.tplWebType">
  18. <el-option label="Vue2 Element UI 模版" value="element-ui" />
  19. <el-option label="Vue3 Element Plus 模版" value="element-plus" />
  20. </el-select>
  21. </el-form-item>
  22. </el-col>
  23. <el-col :span="12">
  24. <el-form-item prop="packageName">
  25. <template #label>
  26. 生成包路径
  27. <el-tooltip content="生成在哪个java包下,例如 com.ruoyi.system" placement="top">
  28. <el-icon><question-filled /></el-icon>
  29. </el-tooltip>
  30. </template>
  31. <el-input v-model="info.packageName" />
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="12">
  35. <el-form-item prop="moduleName">
  36. <template #label>
  37. 生成模块名
  38. <el-tooltip content="可理解为子系统名,例如 system" placement="top">
  39. <el-icon><question-filled /></el-icon>
  40. </el-tooltip>
  41. </template>
  42. <el-input v-model="info.moduleName" />
  43. </el-form-item>
  44. </el-col>
  45. <el-col :span="12">
  46. <el-form-item prop="businessName">
  47. <template #label>
  48. 生成业务名
  49. <el-tooltip content="可理解为功能英文名,例如 user" placement="top">
  50. <el-icon><question-filled /></el-icon>
  51. </el-tooltip>
  52. </template>
  53. <el-input v-model="info.businessName" />
  54. </el-form-item>
  55. </el-col>
  56. <el-col :span="12">
  57. <el-form-item prop="functionName">
  58. <template #label>
  59. 生成功能名
  60. <el-tooltip content="用作类描述,例如 用户" placement="top">
  61. <el-icon><question-filled /></el-icon>
  62. </el-tooltip>
  63. </template>
  64. <el-input v-model="info.functionName" />
  65. </el-form-item>
  66. </el-col>
  67. <el-col :span="12">
  68. <el-form-item prop="genType">
  69. <template #label>
  70. 生成代码方式
  71. <el-tooltip content="默认为zip压缩包下载,也可以自定义生成路径" placement="top">
  72. <el-icon><question-filled /></el-icon>
  73. </el-tooltip>
  74. </template>
  75. <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
  76. <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
  77. </el-form-item>
  78. </el-col>
  79. <el-col :span="12">
  80. <el-form-item>
  81. <template #label>
  82. 上级菜单
  83. <el-tooltip content="分配到指定菜单下,例如 系统管理" placement="top">
  84. <el-icon><question-filled /></el-icon>
  85. </el-tooltip>
  86. </template>
  87. <tree-select
  88. v-model:value="info.parentMenuId"
  89. :options="menuOptions"
  90. :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
  91. placeholder="请选择系统菜单"
  92. />
  93. </el-form-item>
  94. </el-col>
  95. <el-col :span="24" v-if="info.genType == '1'">
  96. <el-form-item prop="genPath">
  97. <template #label>
  98. 自定义路径
  99. <el-tooltip content="填写磁盘绝对路径,若不填写,则生成到当前Web项目下" placement="top">
  100. <el-icon><question-filled /></el-icon>
  101. </el-tooltip>
  102. </template>
  103. <el-input v-model="info.genPath">
  104. <template #append>
  105. <el-dropdown>
  106. <el-button type="primary">
  107. 最近路径快速选择
  108. <i class="el-icon-arrow-down el-icon--right"></i>
  109. </el-button>
  110. <template #dropdown>
  111. <el-dropdown-menu>
  112. <el-dropdown-item @click="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
  113. </el-dropdown-menu>
  114. </template>
  115. </el-dropdown>
  116. </template>
  117. </el-input>
  118. </el-form-item>
  119. </el-col>
  120. </el-row>
  121. <template v-if="info.tplCategory == 'tree'">
  122. <h4 class="form-header">其他信息</h4>
  123. <el-row v-show="info.tplCategory == 'tree'">
  124. <el-col :span="12">
  125. <el-form-item>
  126. <template #label>
  127. 树编码字段
  128. <el-tooltip content="树显示的编码字段名, 如:dept_id" placement="top">
  129. <el-icon><question-filled /></el-icon>
  130. </el-tooltip>
  131. </template>
  132. <el-select v-model="info.treeCode" placeholder="请选择">
  133. <el-option
  134. v-for="(column, index) in info.columns"
  135. :key="index"
  136. :label="column.columnName + ':' + column.columnComment"
  137. :value="column.columnName"
  138. ></el-option>
  139. </el-select>
  140. </el-form-item>
  141. </el-col>
  142. <el-col :span="12">
  143. <el-form-item>
  144. <template #label>
  145. 树父编码字段
  146. <el-tooltip content="树显示的父编码字段名, 如:parent_Id" placement="top">
  147. <el-icon><question-filled /></el-icon>
  148. </el-tooltip>
  149. </template>
  150. <el-select v-model="info.treeParentCode" placeholder="请选择">
  151. <el-option
  152. v-for="(column, index) in info.columns"
  153. :key="index"
  154. :label="column.columnName + ':' + column.columnComment"
  155. :value="column.columnName"
  156. ></el-option>
  157. </el-select>
  158. </el-form-item>
  159. </el-col>
  160. <el-col :span="12">
  161. <el-form-item>
  162. <template #label>
  163. 树名称字段
  164. <el-tooltip content="树节点的显示名称字段名, 如:dept_name" placement="top">
  165. <el-icon><question-filled /></el-icon>
  166. </el-tooltip>
  167. </template>
  168. <el-select v-model="info.treeName" placeholder="请选择">
  169. <el-option
  170. v-for="(column, index) in info.columns"
  171. :key="index"
  172. :label="column.columnName + ':' + column.columnComment"
  173. :value="column.columnName"
  174. ></el-option>
  175. </el-select>
  176. </el-form-item>
  177. </el-col>
  178. </el-row>
  179. </template>
  180. <template v-if="info.tplCategory == 'sub'">
  181. <h4 class="form-header">关联信息</h4>
  182. <el-row>
  183. <el-col :span="12">
  184. <el-form-item>
  185. <template #label>
  186. 关联子表的表名
  187. <el-tooltip content="关联子表的表名, 如:sys_user" placement="top">
  188. <el-icon><question-filled /></el-icon>
  189. </el-tooltip>
  190. </template>
  191. <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
  192. <el-option
  193. v-for="(table, index) in tables"
  194. :key="index"
  195. :label="table.tableName + ':' + table.tableComment"
  196. :value="table.tableName"
  197. ></el-option>
  198. </el-select>
  199. </el-form-item>
  200. </el-col>
  201. <el-col :span="12">
  202. <el-form-item>
  203. <template #label>
  204. 子表关联的外键名
  205. <el-tooltip content="子表关联的外键名, 如:user_id" placement="top">
  206. <el-icon><question-filled /></el-icon>
  207. </el-tooltip>
  208. </template>
  209. <el-select v-model="info.subTableFkName" placeholder="请选择">
  210. <el-option
  211. v-for="(column, index) in subColumns"
  212. :key="index"
  213. :label="column.columnName + ':' + column.columnComment"
  214. :value="column.columnName"
  215. ></el-option>
  216. </el-select>
  217. </el-form-item>
  218. </el-col>
  219. </el-row>
  220. </template>
  221. </el-form>
  222. </template>
  223. <script setup>
  224. import { listMenu } from "@/api/system/menu";
  225. const subColumns = ref([]);
  226. const menuOptions = ref([]);
  227. const { proxy } = getCurrentInstance();
  228. const props = defineProps({
  229. info: {
  230. type: Object,
  231. default: null
  232. },
  233. tables: {
  234. type: Array,
  235. default: null
  236. }
  237. });
  238. // 表单校验
  239. const rules = ref({
  240. tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
  241. packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
  242. moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
  243. businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
  244. functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
  245. });
  246. function subSelectChange(value) {
  247. props.info.subTableFkName = "";
  248. }
  249. function tplSelectChange(value) {
  250. if (value !== "sub") {
  251. props.info.subTableName = "";
  252. props.info.subTableFkName = "";
  253. }
  254. }
  255. function setSubTableColumns(value) {
  256. for (var item in props.tables) {
  257. const name = props.tables[item].tableName;
  258. if (value === name) {
  259. subColumns.value = props.tables[item].columns;
  260. break;
  261. }
  262. }
  263. }
  264. /** 查询菜单下拉树结构 */
  265. function getMenuTreeselect() {
  266. listMenu().then(response => {
  267. menuOptions.value = proxy.handleTree(response.data, "menuId");
  268. });
  269. }
  270. watch(() => props.info.subTableName, val => {
  271. setSubTableColumns(val);
  272. });
  273. watch(() => props.info.tplWebType, val => {
  274. if (val === '') {
  275. props.info.tplWebType = "element-plus";
  276. }
  277. });
  278. getMenuTreeselect();
  279. </script>