yos_web/src/Form/remitvoucher/edit.vue

<template>
  <div>
    <el-button :disabled="disabled" size="mini" type="primary" @click="editBtn">编 辑</el-button>
    <el-dialog :visible.sync="drawer2" title="选择财务信息" append-to-body width="50%">
      <el-table
        ref="multipleTable"
        :data="moneyInfo"
        style="width: 100%"
        size="mini"
        border>
        <el-table-column
          prop="bank"
          label="银行"
          width="180">
        </el-table-column>
        <el-table-column
          prop="bankcardno"
          label="银行编号"
          width="180">
        </el-table-column>
         <el-table-column
          prop="enterprisename"
          label="经销商"
          width="150">
        </el-table-column>
        <el-table-column
          prop="phonenumber"
          label="手机号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          label="操作"
          width="90"
          fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="selectInfoRow(scope.row)">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-footer" style="margin-top:20px">
        <el-button size="small" @click="drawer2=false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer title="新建打款凭证" append-to-body :visible.sync="dialogFormVisible" size="30%">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="right" size="mini">
            <el-col :span="24">
              <el-form-item label="经销商:" prop="enterprisename">
                <el-popover
                  placement="bottom"
                  trigger="click"
                  v-model="visible">
                  <selectAgentInfo ref="UseAgent" @selectRow="selectRow"></selectAgentInfo>
                  <el-input readonly slot="reference" v-model="form.enterprisename"  suffix-icon="el-icon-arrow-down" placeholder="经销商"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款人:" prop="payer">
                <el-input readonly v-model="form.payer" placeholder="付款人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行账号:" prop="bankcardno">
                <el-input readonly v-model="form.bankcardno" placeholder="银行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="银行:" prop="bank">
                <el-input readonly v-model="form.bank" placeholder="银行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款时间:" prop="paydate">
                <el-date-picker
                  v-model="form.paydate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="付款时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="打款总金额:" prop="amount">
                <el-input v-model="form.amount" placeholder="请输入打款总金额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="转入银行:" prop="inbank">
                <el-input v-model="form.inbank" placeholder="转入银行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="转入账号:" prop="inbankcardno">
                <el-input v-model="form.inbankcardno" placeholder="转入账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="remarks">
                <el-input v-model="form.remarks" 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>
  </div>
</template>

<script>
import selectAgentInfo from '@/HDrpManagement/remitvoucher/components/selectAgentInfo'
import selectTable from '@/components/selectTable/index'
import remitDetail from "@/HDrpManagement/remitvoucher/modules/remitDetail"
import Del from "@/HDrpManagement/remitvoucher/modules/delDetail"

export default {
  props:['data','disabled'],
  name: "add",
  components: {selectAgentInfo,selectTable,remitDetail,Del},
  data(){
    return {
      dialogFormVisible:false,
      visible:false,
      drawer2:false,
      moneyInfo:[],
      list:[],
      tablecols:[],
      result:'',
      form:{
        "sa_paybillid": 0,
        "sys_enterpriseid": '',
        "payer": "",
        "paydate": "",
        "period": "",
        "amount": "",
        "remarks": "",
        "bank": "",
        "bankcardno": "",
        "inbankcardno":'',
        "inbank":'',
        "enterprisename":''
      },
      rules:{
        enterprisename:[
          { required: true, message: '请选择经销商', trigger: 'change'},
        ],
        payer:[
          { required: true, message: '付款人', trigger: 'blur'}
        ],
        paydate:[
          { required: true, message: '付款时间', trigger: 'blur'},
        ],
        bank:[
          { required: true, message: '银行', trigger: 'blur'}
        ],
        bankcardno:[
          { required: true, message: '银行编号', trigger: 'blur'},
        ],
        amount:[
          { required: true, message: '凭证总金额', trigger: 'blur'},
        ],
      }
    }
  },
  watch: {
    dialogFormVisible (val) {
      if (!val) {
        this.$refs.form.resetFields()
      }
    }
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name).accountTable.tablecols.splice(0,3)
  },
  methods:{
    editBtn () {
      this.form = Object.assign({},this.form,this.data)
      this.dialogFormVisible = true
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221226153004",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,async ()=>{
          this.$emit('onSuccess')
          this.dialogFormVisible = false
        })
      })
    },
    selectRow (data) {
      this.form.enterprisename = data.enterprisename
      this.form.sys_enterpriseid = data.sys_enterpriseid
      this.visible = false
      console.log(data);
      this.queryMoneyInfo(data.sys_enterpriseid)
    },
    /* 获取财务信息 */
    async queryMoneyInfo (id) {
      let res = await this.$api.requested({
        "id": 20221013160602,
        "content": {
            "sys_enterpriseid":id,
            "pageNumber": 1,
            "pageSize": 20,
            "where": {
                "condition": ""
            }
        },
      })
      this.moneyInfo = res.data
      if (this.moneyInfo.length > 1) {
        this.drawer2 = true
      } else {
        this.form.payer = this.moneyInfo[0].enterprisename
        this.form.bank = this.moneyInfo[0].bank
        this.form.bankcardno = this.moneyInfo[0].bankcardno
      }
    },
    /* 选中财务信息 */
    selectInfoRow (data) {
      this.form.payer = data.enterprisename
      this.form.bank = data.bank
      this.form.bankcardno = data.bankcardno
      this.drawer2 = false
    },
    upDateData (data) {

    },
  } 
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
</style>