Files
dvcp_v2_webapp/packages/2.0.5/AppForm/components/BasicInfo.vue
yanran200730 610631133a 特殊人群
2022-03-10 12:27:52 +08:00

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>