yos_web/src/Form/Creditbilladj/edit.vue

<template>
  <div>
    <el-button size="mini" type="text" @click="onShow">编 辑</el-button>
    <el-dialog title="编 辑" :visible.sync="dialogFormVisible">
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" label-width="90px" label-position="left" size="mini">
          <el-col :span="24">
            <el-form-item label="企业名称" prop="sys_enterpriseid">
              <el-select v-model="form.sys_enterpriseid" placeholder="请选择企业" @change="enterpriseChange">
                <el-option
                  v-for="item in enterpriseData"
                  :key="item.sys_enterpriseid"
                  :label="item.enterprisename"
                  :value="item.sys_enterpriseid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户类型" prop="sa_accountclassid">
              <el-select v-model="form.sa_accountclassid" placeholder="请选择账户类型">
                <el-option
                  v-for="item in accountClassData"
                  :key="item.sa_accountclassid"
                  :label="item.accountname"
                  :value="item.sa_accountclassid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信用额度" prop="creditquota">
              <el-input v-model="form.creditquota" placeholder="输入信用额度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="备注" prop="address">
              <el-input v-model="form.address" type="textarea" :rows="3" placeholder="输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  props:['data'],
  data () {
    return {
      dialogFormVisible:false,
      enterpriseData:[],
      accountClassData:[],
      form:{
        sa_creditbillid:0,
        sys_enterpriseid:'',
        sa_accountclassid:'',
        creditquota:'',
        remarks:''
      },
      rules:{
        sys_enterpriseid: [
          { required: true, message: '请选择企业名称', trigger: 'blur' },
        ],
        sa_accountclassid: [
          { required: true, message: '请选择账户类型', trigger: 'blur' },
        ],
        creditquota: [
          { required: true, message: '请填写信用额度', trigger: 'change' },
        ],
      }
    }
  },
  methods:{
    /* 获取企业档案 */
    async getEnterpriseData() {
      let res = await this.$api.requested({
        "id": "20221008164103",
        "version":1,
        "content": {
          "where":{
              "condition":""
          }
        }
      })
      this.enterpriseData = res.data
      console.log(this.enterpriseData);
      
    },
    /* 企业选择变化 */
    async enterpriseChange() {
      console.log(this.form.sys_enterpriseid);
      let res = await this.$api.requested({
        "id": "20221008164203",
        "version":1,
        "content": {
          "sys_enterpriseid":this.form.sys_enterpriseid
        }
      })
      this.form.sa_accountclassid = ''
      this.accountClassData = res.data
      console.log(this.accountClassData);
      
    },
    cascaderChange (val) {
      if (val.length === 1) 
        return this.form = Object.assign({},this.form,{province:val[0],city:'',county:''})

      this.form = Object.assign({},this.form,{province:val[0],city:val[1],county:val[2]})
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
        "id": "20221008155003",
        "version":1,
        "content": this.form
      })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
     })
    },
    async onShow () {
      this.form = Object.assign({},this.form,this.data)
      console.log(this.form);
      
      if( this.data ) {
        let res = await this.$api.requested({
          "id": "20221008164203",
          "version":1,
          "content": {
            "sys_enterpriseid":this.form.sys_enterpriseid
          }
        })
        this.accountClassData = res.data
      }
      this.dialogFormVisible = true
    }
  },
  created() {
    this.getEnterpriseData()
  },
  mounted () {
  }
}

</script>
<style scoped>
/deep/.el-select {
  width: 100% !important;
}
</style>