refinery-admin/src/views/financialCenter/enterpriseRecharge/components/addTurn.vue

<template>
  <el-drawer
    :title="controlWindows.addInfo.title"
    direction="ltr"
    size="50%"
    :visible.sync="controlWindows.addTurn"
    @opened="openDrawer"
    :before-close="closeWindow"
  >
    <div class="add">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="公司" prop="companyId">
          <autocomplete :params="form" :config="configAutocomplete" @change="companyChange" />
        </el-form-item>
        <el-form-item label="交易类型" prop="turnType">
          <el-select :disabled="!!form.id" v-model="form.turnType" placeholder="请选择交易类型">
            <el-option v-for="(item, index) in correspondTypeEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.turnType && form.companyId">
          <el-descriptions title="公司账户信息" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                公司名称
              </template>
              {{ companyInfo.companyName }}</el-descriptions-item
            >
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                {{ correspondTypeEnum.find(item => item.value == form.turnType).label }}
              </template>
              {{ companyInfo[correspondTypeEnum.find(item => item.value == form.turnType).valueKey] }}
            </el-descriptions-item>
            <!-- <el-descriptions-item label="赊销余额"></el-descriptions-item>
            <el-descriptions-item label="充值返利余额"></el-descriptions-item>
            <el-descriptions-item label="消费返利余额"></el-descriptions-item> -->
          </el-descriptions>
        </el-form-item>

        <el-form-item label="炼厂中心账户" prop="refineryCenterAccountId">
          <autocomplete :params="form" :config="accountNameAutocomplete" />
        </el-form-item>

        <el-form-item label="圈回金额" prop="transactionAmount">
          <el-input v-checkNum placeholder="圈回金额" v-model="form.transactionAmount"> </el-input>
        </el-form-item>

        <el-form-item label="圈回原因" prop="reverseRemark">
          <el-input type="textarea" :rows="2" placeholder="请输入圈回原因" v-model="form.reverseRemark"> </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="closeWindow">取消 </el-button>
      <el-button @click="submit">提交</el-button>
    </div>
  </el-drawer>
</template>

<script>
import serve from 'api/financialCenter/enterpriseRecharge.js'
import commonServe from 'api/common.js'

import autocomplete from 'components/autocomplete/index.vue'

export default {
  components: {
    autocomplete
  },
  props: {
    controlWindows: Object
  },
  data() {
    // let validatorcompanyId = (rule, value, callback) => {
    //   if (this.form.companyId) callback();
    //   else callback("请选择公司");
    // };
    let validatortransactionAmount = (rule, value, callback) => {
      let typeTarget = this.correspondTypeEnum.find(item => item.value == this.form.turnType)
      let superiorLimit = this.companyInfo[typeTarget.valueKey]
      if (value == '') callback('请输入圈回金额')
      if (value > superiorLimit) {
        callback(`圈回金额不可超过${typeTarget.label}`)
      }
      callback()
    }
    let validatorRefineryCenterAccountId = (rule, value, callback) => {
      if (this.form.refineryCenterAccountId) callback()
      else callback('请选择炼厂中心账户')
    }
    return {
      companyFinance: {},
      companyInfo: {},
      form: {},
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: 'name',
        labelKey: 'name',
        valueKey: 'id',
        placeholder: '企业名称',
        querykey: 'companyId',
        echoId: '',
        echoName: '',
        isDisabled: false
      },
      accountNameAutocomplete: {
        serveTarget: commonServe.findByEntity,
        autocompleteKey: 'accountName',
        labelKey: 'accountName',
        valueKey: 'id',
        placeholder: '炼厂中心账户',
        querykey: 'refineryCenterAccountId',
        echoId: '',
        echoName: '',
        isDisabled: false
      },
      rules: {
        // companyId: [
        //   { required: true, validator: validatorcompanyId, trigger: "change" },
        // ],
        turnType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
        transactionAmount: [
          {
            required: true,
            validator: validatortransactionAmount,
            trigger: 'blur'
          }
        ],
        reverseRemark: [{ required: true, message: '请输入圈回说明', trigger: 'blur' }],
        refineryCenterAccountId: [{ required: true, validator: validatorRefineryCenterAccountId, trigger: 'change' }]
      },
      correspondTypeEnum: [
        {
          value: 1,
          label: '充值余额',
          valueKey: 'rechargeBalance'
        }
        // {
        //   value: 2,
        //   label: "赊销余额",
        //   valueKey: "chargeRechargeBalance",
        // },
        // {
        //   value: 3,
        //   label: "充值返利余额",
        //   valueKey: "rechargeRebateBalance",
        // },
        // {
        //   value: 4,
        //   label: "消费返利余额",
        //   valueKey: "consumeRebateBalance",
        // },
      ]
    }
  },
  computed: {
    correspondingEnum() {}
  },
  methods: {
    openDrawer() {
      let { id, companyName, refineryCenterAccountId, refineryCenterAccountName } = this.controlWindows.addInfo
      //回显
      if (id) {
        this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo))
        this.form.transactionAmount = Math.abs(this.form.transactionAmount)
        this.companyChange(this.form.companyId)

        let configUpdata = {
          echoId: id || '',
          echoName: companyName || '',
          isDisabled: !!id
        }
        // ? { echoId: id || '', echoName: this.form.refineryName || '', isDisabled: !!id }
        // : {
        //     echoId: "",
        //     echoName: "",
        //     isDisabled: false,
        //   };
        let configUpdata2 = {
          echoId: refineryCenterAccountId || '',
          echoName: refineryCenterAccountName || '',
          isDisabled: !!refineryCenterAccountId
        }
        Object.assign(this.configAutocomplete, configUpdata)
        Object.assign(this.accountNameAutocomplete, configUpdata2)
        console.log('this.accountNameAutocomplete', this.accountNameAutocomplete)
      }
    },
    // 公司财务信息
    companyChange(id) {
      if (id) {
        serve.getByCompanyId(id).then(res => {
          this.companyFinance = res.data
          this.getByCompanyId(res.data.companyId)
        })
      }
    },
    //
    getByCompanyId(id) {
      commonServe.getByCompanyIdAccount(id).then(res => {
        this.companyInfo = res.data
      })
    },

    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let params = { transactionType: 'TURN', ...this.form }
          this.judgeInterface(params).then(res => {
            this.$message.success(res.msg)
            this.closeWindow()
          })
        }
      })
    },
    judgeInterface(form) {
      let { id } = this.controlWindows.addInfo
      if (id) return serve.update(form)
      else return serve.save(form)
    },
    closeWindow() {
      this.$emit('closeWindow')
      this.form = {}
      this.controlWindows.addInfo = {}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        this.controlWindows.addTurn = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  padding: 20px;
  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea,
  .el-autocomplete,
  .el-descriptions {
    width: 300px;
  }
}
.buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>