yos_web/src/Form/recvoucher/edit.vue

<template>
  <div>
    <el-button  :disabled="data.status !== '新建'"   size="mini" :type="data.status === '新建'?primary:text" @click="onShow">编 辑</el-button>
    <el-drawer
        title="编辑收入凭证"
        :visible.sync="dialogFormVisible"
        size="25%"
        direction="rtl"
        append-to-body
        @close="dialogFormVisible = false">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="90px" label-position="right" size="mini">
            <el-col :span="12">
              <el-form-item label="选择企业:" prop="enterprisename">
                <el-input v-model="form.enterprisename"  placeholder="选择企业" @focus="enterpriseList"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="账户类型:" prop="sa_accountclassid">
                <el-select v-model="form.sa_accountclassid" placeholder="请选择账户类型" style="width: 100%">
                  <el-option

                      v-for="item in accountclass"
                      :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="amount">
                <el-input v-model="form.amount" placeholder="请输入收入金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态:" >
                <el-input v-model="form.status" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:" >
                <el-select v-model="form.class" placeholder="请选择分类" style="width: 100%" @change="classChange">
                  <el-option
                      v-for="item in classData"
                      :key="item.rowindex"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类明细:" >
                <el-select v-model="form.subclass" placeholder="请选择分类明细" style="width: 100%">
                  <el-option
                      v-for="item in subClass"
                      :key="item.rowindex"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" >
                <el-input v-model="form.remarks" type="textarea" rows="5" placeholder="请输入备注信息"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
    <enterprise
        :visible="visibleEnterprise"
        :index="index"
        :sa_projectid="form.sa_projectid"
        v-if="visibleEnterprise"
        @onEnterprise="onEnterprise">
    </enterprise>
  </div>
</template>

<script>
import enterprise from '@/HDrpManagement/payvoucher/components/enterprise'
export default {
  name: "edit",
  props:["data","btnType"],
  components:{enterprise},
  data(){
    return {
      dialogFormVisible:false,
      visibleEnterprise:false,
      primary:'primary',
      text:'',
      form:{},
      enterprises:[],
      accountclass:[],
      rules:{
        enterprisename:[
          { required: true, message: '未选择经销商', trigger: 'change'},
        ],
        sa_accountclassid:[
          { required: true, message: '未选择账户类型', trigger: 'change'},
        ],
        amount:[
          { required: true, message: '收入金额不可为空', trigger: 'blur'},
        ],
      },
      classData:[],
      subClass:[]
    }
  },
  methods:{
    onShow(){
      this.dialogFormVisible = true
      console.log(this.data)
      this.form = this.data
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221009102803",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields()
          this.dialogFormVisible = false
        })
      })
    },
    enterpriseList(){

      this.visibleEnterprise = true
    },
    /*经销商列表*/
    onEnterprise(data){
      this.visibleEnterprise = false
      console.log("企业信息",data)
      this.form.sys_enterpriseid = data.sys_enterpriseid
      this.form.enterprisename = data.enterprisename

    },
    /*账户类型*/
    async accountList(id){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "cashbillaccountclassselect",
          "parameter": {
            "sys_enterpriseid":id
          }
        }
      })
      console.log(res)
      this.accountclass = res.data
    },
    /*分类*/
    async classList(){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "cashbillpaytype",
          "parameter": {
          }
        }
      })
      console.log("支出凭证分类",res)
      this.classData = res.data
      console.log(this.classData)
    },
    classChange(res){
      console.log("选择",res)
      console.log("明细",this.classData[res-1])
      this.form.class = this.classData[res-1].value
      this.subClass = this.classData[res-1].subvalues
      console.log("form",this.form)
    }
  },
  created() {
    this.classList()
    this.form = this.data
  },
  watch:{
    "form.sys_enterpriseid":function (val){
      console.log(val)
      this.accountList(val)
    }
  }
}
</script>

<style scoped>

</style>