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