152 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			152 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="basicInfo">
 | |
|     <el-form ref="form" :model="form" label-width="110px" label-position="right">
 | |
|       <ai-card title="基本信息">
 | |
|         <template #content>
 | |
|           <div class="ai-form">
 | |
|             <el-form-item label="所属平台" prop="saasPlatformId" style="width: 100%;" :rules="[{ required: true, message: '请选择所属平台', trigger: 'change' }]">
 | |
|               <el-select
 | |
|                 size="small"
 | |
|                 style="width: 100%;"
 | |
|                 placeholder="请选择所属平台"
 | |
|                 clearable
 | |
|                 @change="onChange"
 | |
|                 v-model="form.saasPlatformId">
 | |
|                 <el-option
 | |
|                   v-for="(item, index) in sassList"
 | |
|                   :key="index"
 | |
|                   :label="item.name"
 | |
|                   :value="item.id">
 | |
|                 </el-option>
 | |
|               </el-select>
 | |
|             </el-form-item>
 | |
|             <el-form-item v-if="form.saasPlatformId" style="width: 100%;" label="所属企业" prop="corpId" :rules="[{ required: true, message: '请选择所属企业', trigger: 'change' }]">
 | |
|               <ai-select
 | |
|                 v-model="form.corpId"
 | |
|                 placeholder="请选择所属企业"
 | |
|                 clearable
 | |
|                 @change="onCompanyChange"
 | |
|                 :selectList="companyList">
 | |
|               </ai-select>
 | |
|             </el-form-item>
 | |
|             <el-form-item  style="width: 100%;" label="一级菜单名称" prop="menuLevel1Name" :rules="[{ required: true, message: '请输入一级菜单名称', trigger: 'change' }]">
 | |
|               <el-input size="small" placeholder="请输入一级菜单名称" :maxlength="8" v-model="form.menuLevel1Name"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%;" label="二级菜单名称" prop="menuLevel2Name" :rules="[{ required: true, message: '请输入二级菜单名称', trigger: 'change' }]">
 | |
|               <el-input size="small" placeholder="请输入二级菜单名称" :maxlength="8" v-model="form.menuLevel2Name"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%;" label="三级菜单名称" prop="menuLevel3Name">
 | |
|               <el-input size="small" placeholder="请输入三级菜单名称" :maxlength="8" v-model="form.menuLevel3Name"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%;" label="应用类型" prop="appType">
 | |
|               <ai-select
 | |
|                 v-model="form.appType"
 | |
|                 placeholder="请选择应用类型"
 | |
|                 clearable
 | |
|                 :selectList="dict.getDict('diyAppType')">
 | |
|               </ai-select>
 | |
|             </el-form-item>
 | |
|           </div>
 | |
|         </template>
 | |
|       </ai-card>
 | |
|     </el-form>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   export default {
 | |
|     name: 'basicInfo',
 | |
| 
 | |
|     model: {
 | |
|       prop: 'value',
 | |
|       event: 'change',
 | |
|     },
 | |
| 
 | |
|     props: {
 | |
|       instance: Function,
 | |
|       dict: Object,
 | |
|       value: Object
 | |
|     },
 | |
| 
 | |
|     data () {
 | |
|       return {
 | |
|         form: {
 | |
|           saasPlatformId: '',
 | |
|           menuLeve1Style: '',
 | |
|           saasPlatformName: '',
 | |
|           menuLevel1Name: '',
 | |
|           menuLevel2Name: '',
 | |
|           menuLevel3Name: '',
 | |
|           appType: '',
 | |
|           corpId: '',
 | |
|           corpName: ''
 | |
|         },
 | |
|         companyList: [],
 | |
|         sassList: []
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     watch: {
 | |
|       value (v) {
 | |
|         this.form = JSON.parse(JSON.stringify(v))
 | |
|         if (this.form.saasPlatformId) {
 | |
|           this.getCompanyList()
 | |
|         }
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     created () {
 | |
|       this.dict.load('diyAppType')
 | |
|     },
 | |
| 
 | |
|     mounted () {
 | |
|       this.getSassList()
 | |
|       this.form = JSON.parse(JSON.stringify(this.value))
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|       onChange (e) {
 | |
|         this.form.saasPlatformName = this.sassList.filter(v => v.id === e)[0].name
 | |
|         this.form.saasPlatformId && this.getCompanyList()
 | |
|       },
 | |
| 
 | |
|       validate () {
 | |
|         let result = false
 | |
|         this.$refs.form.validate(valid => {
 | |
|           result = valid
 | |
|         })
 | |
|         this.$emit('change', this.form)
 | |
|         return result 
 | |
|       },
 | |
| 
 | |
|       onCompanyChange (e) {
 | |
|         this.form.corpName = this.companyList.filter(v => v.dictValue === e)[0].dictName
 | |
|       },
 | |
| 
 | |
|       getCompanyList () {
 | |
|         this.instance.post(`/app/appCorp/page?current=1&size=1000&saasId=${this.form.saasPlatformId}`).then(res => {
 | |
|           if (res.data.records.length) {
 | |
|             this.companyList = res.data.records.map(v => {
 | |
|               return {
 | |
|                 dictValue: v.corpId,
 | |
|                 dictName: v.name
 | |
|               }
 | |
|             })
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       getSassList () {
 | |
|         this.instance.post(`/app/appSaas/listAll`).then(res => {
 | |
|           if (res.data) {
 | |
|             this.sassList = res.data
 | |
|           }
 | |
|         })
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
| </style>
 |