inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="编辑代码生成配置"
4     :width="900"
5     :visible="visible"
6     :confirmLoading="confirmLoading"
7     @ok="handleSubmit"
8     @cancel="handleCancel"
9   >
10     <a-spin :spinning="confirmLoading">
11       <a-form :form="form">
12         <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
13         <a-row :gutter="24">
14           <a-col :md="12" :sm="24">
15             <a-form-item
16               :labelCol="labelCol"
17               :wrapperCol="wrapperCol"
18               label="生成表"
19               has-feedback
20             >
21               <a-select style="width: 100%" placeholder="请选择数据库表" v-decorator="['tableName', {rules: [{ required: true, message: '请选择数据库表!' }]}]" >
22                 <a-select-option v-for="(item,index) in tableNameData" :key="index" :value="item.tableName" @click="tableNameSele(item)">{{ item.tableName }}</a-select-option>
23               </a-select>
24             </a-form-item>
25           </a-col>
26           <a-col :md="12" :sm="24">
27             <a-form-item
28               :labelCol="labelCol"
29               :wrapperCol="wrapperCol"
30               label="移除前缀"
31             >
32               <a-radio-group v-decorator="['tablePrefix',{rules: [{ required: true, message: '请选择是否移除前缀!' }]}]" >
33                 <a-radio v-for="(item,index) in tablePrefixData" :key="index" :value="item.code" @click="tablePrefixRadio(item.code)">{{ item.name }}</a-radio>
34               </a-radio-group>
35             </a-form-item>
36           </a-col>
37         </a-row>
38         <a-row :gutter="24">
39           <a-col :md="12" :sm="24">
40             <a-form-item
41               label="功能名"
42               :labelCol="labelCol"
43               :wrapperCol="wrapperCol"
44               has-feedback
45             >
46               <a-input placeholder="请输入功能名" v-decorator="['tableComment', {rules: [{required: true, message: '请输入功能名!'}]}]" />
47             </a-form-item>
48           </a-col>
49           <a-col :md="12" :sm="24">
50             <a-form-item
51               label="类名"
52               :labelCol="labelCol"
53               :wrapperCol="wrapperCol"
54               has-feedback
55             >
56               <a-input placeholder="请输入类名" v-decorator="['className', {rules: [{required: true, message: '请输入类名!'}]}]" />
57             </a-form-item>
58           </a-col>
59         </a-row>
60         <a-row :gutter="24">
61           <a-col :md="12" :sm="24">
62             <a-form-item
63               label="业务名"
64               :labelCol="labelCol"
65               :wrapperCol="wrapperCol"
66               has-feedback
67             >
68               <a-input placeholder="请输入业务名" v-decorator="['busName', {rules: [{required: true, message: '请输入业务名!'}]}]" />
69             </a-form-item>
70           </a-col>
71           <a-col :md="12" :sm="24">
72             <a-form-item
73               :labelCol="labelCol"
74               :wrapperCol="wrapperCol"
75               label="生成方式"
76             >
77               <a-radio-group v-decorator="['generateType',{rules: [{ required: true, message: '请选择生成方式!' }]}]" >
78                 <a-radio v-for="(item,index) in generateTypeData" :key="index" :value="item.code" @click="generateTypeRadio(item.code)">{{ item.name }}</a-radio>
79               </a-radio-group>
80             </a-form-item>
81           </a-col>
82         </a-row>
83         <a-row :gutter="24">
84           <a-col :md="12" :sm="24">
85             <a-form-item
86               :labelCol="labelCol"
87               :wrapperCol="wrapperCol"
88               label="所属应用"
89               has-feedback
90             >
91               <a-select style="width: 100%" placeholder="请选择应用分类" v-decorator="['appCode', {rules: [{ required: true, message: '请选择应用分类!' }]}]" >
92                 <a-select-option v-for="(item,index) in appData" :key="index" :value="item.code" @click="changeApplication(item.code)">{{ item.name }}</a-select-option>
93               </a-select>
94             </a-form-item>
95           </a-col>
96           <a-col :md="12" :sm="24">
97             <a-form-item
98               :labelCol="labelCol"
99               :wrapperCol="wrapperCol"
100               label="父级菜单"
101               has-feedback
102             >
103               <a-tree-select
104                 v-decorator="['menuPid', {rules: [{ required: true, message: '请选择父级菜单!' }]}]"
105                 style="width: 100%"
106                 :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
107                 :treeData="menuTreeData"
108                 placeholder="请选择父级菜单"
109                 treeDefaultExpandAll
110               >
111                 <span slot="title" slot-scope="{ id }">{{ id }}
112                 </span>
113               </a-tree-select>
114             </a-form-item>
115           </a-col>
116         </a-row>
117         <a-row :gutter="24">
118           <a-col :md="12" :sm="24">
119             <a-form-item
120               label="作者姓名"
121               :labelCol="labelCol"
122               :wrapperCol="wrapperCol"
123               has-feedback
124             >
125               <a-input placeholder="请输入作者姓名" v-decorator="['authorName', {rules: [{required: true, message: '请输入作者姓名!'}]}]" />
126             </a-form-item>
127           </a-col>
128           <a-col :md="12" :sm="24" v-show="packageNameShow">
129             <a-form-item
130               label="代码包名"
131               :labelCol="labelCol"
132               :wrapperCol="wrapperCol"
133               has-feedback
134             >
135               <a-input placeholder="请输入代码包名" v-decorator="['packageName', {rules: [{required: true, message: '请输入代码包名!'}]}]" />
136             </a-form-item>
137           </a-col>
138         </a-row>
139       </a-form>
140     </a-spin>
141   </a-modal>
142 </template>
143
144 <script>
145   import { codeGenerateInformationList, codeGenerateEdit } from '@/api/modular/gen/codeGenerateManage'
146   import { getAppList } from '@/api/modular/system/appManage'
147   import { getMenuTree } from '@/api/modular/system/menuManage'
148   export default {
149     data () {
150       return {
151         labelCol: {
152           xs: { span: 24 },
153           sm: { span: 5 }
154         },
155         wrapperCol: {
156           xs: { span: 24 },
157           sm: { span: 15 }
158         },
159         visible: false,
160         tableNameData: [],
161         tablePrefixData: [],
162         generateTypeData: [],
163         confirmLoading: false,
164         tablePrefixValue: 'N',
165         tableNameValue: '',
166         packageNameShow: true,
167         appData: [],
168         menuTreeData: [],
169         form: this.$form.createForm(this)
170       }
171     },
172     methods: {
173       // 初始化方法
174       edit (record) {
175         this.visible = true
176         this.codeGenerateInformationList()
177         this.dataTypeItem()
178         this.getSysApplist()
179         setTimeout(() => {
180           this.form.setFieldsValue(
181             {
182               id: record.id,
183               tableName: record.tableName,
184               tablePrefix: record.tablePrefix,
185               tableComment: record.tableComment,
186               className: record.className,
187               busName: record.busName,
188               generateType: record.generateType,
189               authorName: record.authorName,
190               packageName: record.packageName,
191               appCode: record.appCode,
192               menuPid: record.menuPid
193             }
194           )
195         }, 100)
196         this.changeApplication(record.appCode)
197         this.tableNameValue = record.tableName
198         this.tablePrefixValue = record.tablePrefix
199       },
200       /**
201        * 获得所有数据库的表
202        */
203       codeGenerateInformationList () {
204         codeGenerateInformationList().then((res) => {
205           this.tableNameData = res.data
206         })
207       },
208       /**
209        * 获取应用列表
210        */
211       getSysApplist () {
212         return getAppList().then((res) => {
213           if (res.success) {
214             this.appData = res.data
215           } else {
216             this.$message.warning(res.message)
217           }
218         })
219       },
220       /**
221        * 通过应用获取菜单
222        */
223       changeApplication (value) {
224         this.form.resetFields(`menuPid`, [])
225         getMenuTree({ 'application': value }).then((res) => {
226           if (res.success) {
227             this.menuTreeData = [{
228               'id': '-1',
229               'parentId': '0',
230               'title': '顶级',
231               'value': '0',
232               'pid': '0',
233               'children': res.data
234             }]
235           } else {
236             this.$message.warning(res.message)
237           }
238         })
239       },
240       /**
241        * 获取字典数据
242        */
243       dataTypeItem () {
244         this.tablePrefixData = this.$options.filters['dictData']('yes_or_no')
245         this.generateTypeData = this.$options.filters['dictData']('code_gen_create_type')
246       },
247       /**
248        * 提交表单
249        */
250       handleSubmit () {
251         const { form: { validateFields } } = this
252         validateFields((errors, values) => {
253           if (!errors) {
254             this.confirmLoading = true
255             codeGenerateEdit(values).then((res) => {
256               if (res.success) {
257                 this.$message.success('编辑成功')
258                 this.$emit('ok', values)
259                 this.handleCancel()
260               } else {
261                 this.$message.error('编辑失败' + res.message)
262               }
263             }).finally((res) => {
264               this.confirmLoading = false
265             })
266           }
267         })
268       },
269       handleCancel () {
270         this.form.resetFields()
271         this.visible = false
272       },
273       /**
274        * 选择数据库列表
275        */
276       tableNameSele (item) {
277         this.tableNameValue = item.tableName
278         this.form.setFieldsValue({ className: item.tableComment })
279         this.settingDefaultValue()
280       },
281       /**
282        * 选择是否移除前缀触发
283        */
284       tablePrefixRadio (tablePrefixType) {
285         this.tablePrefixValue = tablePrefixType
286         this.settingDefaultValue()
287       },
288       /**
289        * 设置默认值
290        */
291       settingDefaultValue () {
292         const tableName = this.classNameToHump()
293         this.form.setFieldsValue(
294           {
295             className: tableName,
296             busName: tableName.toLowerCase()
297           }
298         )
299       },
300       /**
301        * 设置类名为数据库表的驼峰命名
302        */
303       classNameToHump () {
304         const arr = this.tableNameValue.toLowerCase().split('_')
305         if (this.tablePrefixValue === 'Y') {
306           arr.splice(0, 1)
307         }
308         for (let i = 0; i < arr.length; i++) {
309           // charAt()方法得到第一个字母,slice()得到第二个字母以后的字符串
310           arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
311         }
312         return arr.join('')
313       },
314       /**
315        * 选择生成方式
316        */
317       generateTypeRadio (generateType) {
318         if (generateType === '1') {
319           this.packageNameShow = true
320         } else {
321           this.packageNameShow = false
322           this.form.setFieldsValue({ packageName: 'vip.xiaonuo' })
323         }
324       }
325     }
326   }
327 </script>