dvcp_v2_webapp/packages/work/AppForm/components/BasicInfo.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>