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