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