定制项目模块界面完成
This commit is contained in:
		
							
								
								
									
										36
									
								
								project/oms/apps/AppDeployCustom/AppDeployCustom.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										36
									
								
								project/oms/apps/AppDeployCustom/AppDeployCustom.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,36 @@ | |||||||
|  | <template> | ||||||
|  |   <section class="AppDeployCustom"> | ||||||
|  |     <component :is="currentPage" v-bind="$props"/> | ||||||
|  |   </section> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | import List from "./list"; | ||||||
|  | import Add from "./add"; | ||||||
|  |  | ||||||
|  | export default { | ||||||
|  |   name: "AppDeployCustom", | ||||||
|  |   components: {Add, List}, | ||||||
|  |   label: "定制项目", | ||||||
|  |   props: { | ||||||
|  |     instance: Function, | ||||||
|  |     dict: Object, | ||||||
|  |     permissions: Function | ||||||
|  |   }, | ||||||
|  |   computed: { | ||||||
|  |     currentPage() { | ||||||
|  |       let {hash} = this.$route | ||||||
|  |       return hash == "#add" ? Add : List | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   created() { | ||||||
|  |     this.dict.load('yesOrNo','systemType') | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .AppDeployCustom { | ||||||
|  |   height: 100%; | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										110
									
								
								project/oms/apps/AppDeployCustom/add.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										110
									
								
								project/oms/apps/AppDeployCustom/add.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,110 @@ | |||||||
|  | <template> | ||||||
|  |   <section class="add"> | ||||||
|  |     <ai-detail> | ||||||
|  |       <ai-title slot="title" :title="pageTitle" isShowBottomBorder/> | ||||||
|  |       <template #content> | ||||||
|  |         <el-form ref="AddForm" :model="form" size="small" label-width="120px" :rules="rules"> | ||||||
|  |           <ai-card title="基本信息"> | ||||||
|  |             <template #content> | ||||||
|  |               <el-form-item label="项目/系统名称" prop="name"> | ||||||
|  |                 <el-input v-model="form.name" placeholder="请输入" clearable/> | ||||||
|  |               </el-form-item> | ||||||
|  |               <el-row type="flex"> | ||||||
|  |                 <el-form-item label="系统类型" prop="type" class="half"> | ||||||
|  |                   <ai-select v-model="form.type" :selectList="dict.getDict('systemType')"/> | ||||||
|  |                 </el-form-item> | ||||||
|  |                 <el-form-item label="定制项目根目录" prop="customPath" class="half"> | ||||||
|  |                   <el-input v-model="form.customPath" placeholder="请输入" clearable/> | ||||||
|  |                 </el-form-item> | ||||||
|  |               </el-row> | ||||||
|  |             </template> | ||||||
|  |           </ai-card> | ||||||
|  |           <ai-card title="主库应用"> | ||||||
|  |             <template #content> | ||||||
|  |               <el-form-item label-width="0" prop="apps"> | ||||||
|  |                 <ai-table-select v-if="form.type" v-model="form.apps" :instance="instance" :action="`/node/wechatapps/list?type=${form.type}`" | ||||||
|  |                                  nodeName="label" extra="libPath" multiple/> | ||||||
|  |                 <ai-empty v-else>请先选择系统类型</ai-empty> | ||||||
|  |               </el-form-item> | ||||||
|  |             </template> | ||||||
|  |           </ai-card> | ||||||
|  |         </el-form> | ||||||
|  |       </template> | ||||||
|  |       <template #footer> | ||||||
|  |         <el-button @click="back">取消</el-button> | ||||||
|  |         <el-button type="primary" @click="submit">提交</el-button> | ||||||
|  |       </template> | ||||||
|  |     </ai-detail> | ||||||
|  |   </section> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: "add", | ||||||
|  |   props: { | ||||||
|  |     instance: Function, | ||||||
|  |     dict: Object, | ||||||
|  |     permissions: Function | ||||||
|  |   }, | ||||||
|  |   computed: { | ||||||
|  |     isEdit: v => !!v.$route.query.id, | ||||||
|  |     pageTitle: v => v.isEdit ? "编辑定制项目" : "新增定制项目", | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       form: {apps: []}, | ||||||
|  |       rules: { | ||||||
|  |         name: {required: true, message: "请输入"}, | ||||||
|  |         type: {required: true, message: "请选择"}, | ||||||
|  |         customPath: {required: true, message: "请输入"}, | ||||||
|  |         apps: {required: true, message: "请选择"}, | ||||||
|  |       }, | ||||||
|  |       mainLibApps: [] | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     getDetail() { | ||||||
|  |       let {id} = this.$route.query | ||||||
|  |       id && this.instance.post("/node/custom/detail", null, { | ||||||
|  |         params: {id} | ||||||
|  |       }).then(res => { | ||||||
|  |         if (res?.data) { | ||||||
|  |           this.form = res.data | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|  |     }, | ||||||
|  |     back() { | ||||||
|  |       this.$router.push({}) | ||||||
|  |     }, | ||||||
|  |     submit() { | ||||||
|  |       this.$refs.AddForm.validate(v => { | ||||||
|  |         if (v) { | ||||||
|  |           this.instance.post("/node/custom/addOrUpdate", this.form).then(res => { | ||||||
|  |             if (res?.code == 0) { | ||||||
|  |               this.$message.success("提交成功!") | ||||||
|  |               this.back() | ||||||
|  |             } | ||||||
|  |           }) | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   created() { | ||||||
|  |     this.getDetail() | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .add { | ||||||
|  |   height: 100%; | ||||||
|  |  | ||||||
|  |   .half { | ||||||
|  |     width: 50%; | ||||||
|  |  | ||||||
|  |     & + .half { | ||||||
|  |       margin-left: 16px; | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
							
								
								
									
										85
									
								
								project/oms/apps/AppDeployCustom/list.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								project/oms/apps/AppDeployCustom/list.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,85 @@ | |||||||
|  | <template> | ||||||
|  |   <section class="list"> | ||||||
|  |     <ai-list> | ||||||
|  |       <ai-title slot="title" title="定制项目" isShowBottomBorder/> | ||||||
|  |       <template #content> | ||||||
|  |         <ai-search-bar> | ||||||
|  |           <template #left> | ||||||
|  |             <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd()">添加</el-button> | ||||||
|  |           </template> | ||||||
|  |           <template #right> | ||||||
|  |             <el-input size="small" placeholder="搜索" v-model="search.name" clearable @change="page.current=1,getTableData()"/> | ||||||
|  |           </template> | ||||||
|  |         </ai-search-bar> | ||||||
|  |         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" | ||||||
|  |                   @getList="getTableData" :col-configs="colConfigs" :dict="dict"> | ||||||
|  |           <el-table-column slot="options" label="操作" fixed="right" align="center" width="300"> | ||||||
|  |             <template slot-scope="{row}"> | ||||||
|  |               <el-button type="text" @click="handleAdd(row.id)">编辑</el-button> | ||||||
|  |               <el-button type="text" @click="handleDelete(row.id)">删除</el-button> | ||||||
|  |             </template> | ||||||
|  |           </el-table-column> | ||||||
|  |         </ai-table> | ||||||
|  |       </template> | ||||||
|  |     </ai-list> | ||||||
|  |   </section> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | export default { | ||||||
|  |   name: "list", | ||||||
|  |   props: { | ||||||
|  |     instance: Function, | ||||||
|  |     dict: Object, | ||||||
|  |     permissions: Function | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       search: {name: ""}, | ||||||
|  |       page: {current: 1, size: 10, total: 0}, | ||||||
|  |       tableData: [], | ||||||
|  |       colConfigs: [ | ||||||
|  |         {prop: "name", label: "项目/系统名称"}, | ||||||
|  |         {prop: "customPath", label: "产品定制内容根路径"}, | ||||||
|  |         {prop: "type", label: "系统类型", dict: 'systemType'} | ||||||
|  |       ], | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     getTableData() { | ||||||
|  |       this.instance.post("/node/custom/list", null, { | ||||||
|  |         params: {...this.page, ...this.search} | ||||||
|  |       }).then(res => { | ||||||
|  |         if (res?.data) { | ||||||
|  |           this.tableData = res.data.records | ||||||
|  |           this.page.total = res.data.total | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|  |     }, | ||||||
|  |     handleAdd(id) { | ||||||
|  |       this.$router.push({hash: "#add", query: {id}}) | ||||||
|  |     }, | ||||||
|  |     handleDelete(ids) { | ||||||
|  |       this.$confirm("是否要删除?").then(() => { | ||||||
|  |         this.instance.post("/node/custom/delete", null, { | ||||||
|  |           params: {ids} | ||||||
|  |         }).then(res => { | ||||||
|  |           if (res?.code == 0) { | ||||||
|  |             this.$message.success("删除成功") | ||||||
|  |             this.getTableData() | ||||||
|  |           } | ||||||
|  |         }) | ||||||
|  |       }).catch(() => 0) | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   created() { | ||||||
|  |     this.getTableData() | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .list { | ||||||
|  |   height: 100%; | ||||||
|  | } | ||||||
|  | </style> | ||||||
		Reference in New Issue
	
	Block a user