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="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("请选择公司");
    };

    return {
      companyFinance: {},
      companyInfo: {},
      form: {},
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
        echoId: "",
        echoName: "",
      },
      rules: {
        companyId: [
          { required: true, validator: validatorcompanyId, trigger: "change" },
        ],
        turnType: [
          { required: true, message: "请选择交易类型", trigger: "change" },
        ],
        transactionAmount: [
          { required: true, message: "请输入圈回金额", trigger: "blur" },
        ],
        reverseRemark: [
          { required: true, message: "请输入圈回说明", trigger: "blur" },
        ],
      },
      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 } = 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 = id
        ? { echoId: id, echoName: this.form.refineryName, isDisabled: true }
        : {
            echoId: "",
            echoName: "",
            isDisabled: false,
          };
      Object.assign(this.configAutocomplete, configUpdata);
    },
    // 公司财务信息
    companyChange(id) {
      if (id) {
        serve.getByCompanyId(id).then((res) => {
          this.companyFinance = res.data;
          this.getByCompanyId(res.data.companyId);
        });
      }
    },
    //
    getByCompanyId(id) {
      commonServe.getByCompanyId(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>