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

<template>
  <el-drawer
    :title="controlWindows.addInfo.title"
    direction="ltr"
    size="50%"
    :visible="controlWindows.add"
    @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="transactionType">
          <el-select
            :disabled="form.id"
            v-model="form.transactionType"
            placeholder="请选择交易类型"
            @change="changeTransactionType"
          >
            <el-option label="充值" value="RECHARGE" />
            <!-- <el-option label="赊销" value="CHARGE_SALES" />
            <el-option label="消费返利" value="CONSUME_REBATE" /> -->
          </el-select>
        </el-form-item>

        <template
          v-if="
            companyFinance.settlementModes === 1 ||
            companyFinance.settlementModes === 3
          "
        >
          <el-form-item label="充值返利比例">
            <el-input
              disabled
              v-model="companyFinance.rechargeRebate"
            ></el-input>
          </el-form-item>
          <el-form-item label="预计充值返利金额">
            <el-input disabled v-model="rechargeRebateAmount"></el-input>
          </el-form-item>
        </template>

        <el-form-item label="交易金额" prop="transactionAmount">
          <el-input
            v-checkNum
            v-model="form.transactionAmount"
            placeholder="请输入交易金额"
          ></el-input>
        </el-form-item>

        <template v-if="form.transactionType === 'RECHARGE'">
          <el-form-item label="企业收款账户" prop="companyBankCardArr">
            <el-cascader
              :options="cascaderList"
              v-model="form.companyBankCardArr"
              filterable
              clearable
            ></el-cascader>
          </el-form-item>

          <el-form-item label="线下汇款公司账户" prop="offlinePaymentCompany">
            <el-input
              v-model="form.offlinePaymentCompany"
              placeholder="请输入线下汇款公司账户"
            ></el-input>
          </el-form-item>

          <el-form-item label="线下交易发起时间" prop="offlineStartTime">
            <el-date-picker
              v-model="form.offlineStartTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="线下交易完成时间" prop="offlineCompleteTime">
            <el-date-picker
              v-model="form.offlineCompleteTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="23:59:59"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </template>

        <el-form-item
          v-if="
            form.transactionType === 'CONSUME_REBATE' ||
            form.transactionType === 'RECHARGE'
          "
          label="线下交易凭证"
          prop="offlineTransactionProof"
        >
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="imgDialog" :modal="false">
            <img width="100%" :src="form.offlineTransactionProof" alt="" />
          </el-dialog>
        </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";

import utils from "utils/encode";
const JSESSIONID = utils.uuid();

export default {
  components: {
    autocomplete,
  },
  props: {
    controlWindows: Object,
  },
  data() {
    let validatorcompanyId = (rule, value, callback) => {
      if (this.form.companyId) callback();
      else callback("请选择公司");
    };
    let validatorofflineTransactionProof = (rule, value, callback) => {
      if (this.form.offlineTransactionProof) callback();
      else callback("请上传凭证");
    };
    return {
      uploadUrl:
        process.env.VUE_APP_ENV === "development"
          ? "/api/oil-oss/obejct/uploadFile"
          : "/adminapi/oil-oss/obejct/uploadFile",
      imgDialog: false,
      headers: {
        dataSources: "WEB",
        Authorization: localStorage.getItem("token"),
        JSESSIONID: JSESSIONID,
        token: utils.bcrypt(JSESSIONID),
      },
      cascaderList: [],
      companyFinance: {},
      form: {},
      refineryList: [],
      configAutocomplete: {
        serveTarget: serve.getLikeByNameSuccess,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
        echoId: "",
        echoName: "",
      },
      rules: {
        companyId: [
          { required: true, validator: validatorcompanyId, trigger: "change" },
        ],
        transactionType: [
          { required: true, message: "请选择交易类型", trigger: "change" },
        ],
        transactionAmount: [
          { required: true, message: "请输入交易金额", trigger: "blur" },
        ],
        offlineTransactionProof: [
          {
            required: true,
            validator: validatorofflineTransactionProof,
            trigger: "change",
          },
        ],
        offlinePaymentCompany: [
          {
            required: true,
            message: "请输入线下汇款公司账户",
            trigger: "blur",
          },
        ],
        offlineStartTime: [
          {
            required: true,
            message: "请选择线下交易发起时间",
            trigger: "change",
          },
        ],
        offlineCompleteTime: [
          {
            required: true,
            message: "请选择线下交易完成时间",
            trigger: "change",
          },
        ],
        offlineCompleteTime: [
          {
            required: true,
            message: "请选择企业收款账户",
            trigger: "change",
          },
        ],
        reverseRemark: [
          { required: true, message: "请输入交易说明", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    rechargeRebateAmount() {
      if (
        this.companyFinance.settlementModes === 1 ||
        this.companyFinance.settlementModes === 3
      ) {
        return (
          (this.form.transactionAmount || 0) *
          this.companyFinance.rechargeRebate
        );
      } else return this.companyFinance.rechargeRebateAmount;
    },
  },
  created() {
    this.getCascaderList();
  },
  methods: {
    openDrawer() {
      let { id } = this.controlWindows.addInfo;
      //回显
      id &&
        (this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo)));
      let configUpdata = id
        ? { echoId: id, echoName: this.form.refineryName, isDisabled: true }
        : {
            echoId: "",
            echoName: "",
            isDisabled: false,
          };
      Object.assign(this.configAutocomplete, configUpdata);
    },
    // 公司change
    companyChange(id) {
      if (id) {
        serve.getByCompanyIdSec(id).then((res) => {
          this.companyFinance = res.data;
        });
      }
    },
    // 交易类型 change
    changeTransactionType(val) {
      if (val === "CHARGE_SALES") {
        this.handleRemove();
      }
    },
    //img大图
    handlePictureCardPreview(file) {
      this.form.offlineTransactionProof = file.url;
      this.imgDialog = true;
    },
    // img remove
    handleRemove(file, fileList) {
      this.form.offlineTransactionProof = "";
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      if (response.code === 20000) {
        this.form.offlineTransactionProof = response.data.publicUrl;
      }
    },
    //企业收款账户
    getCascaderList() {
      serve.getCascaderList().then((res) => {
        this.cascaderList = res.data;
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = { transactionType: "RECHARGE", ...this.form };
          this.judgeInterface(this.form).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.add = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  padding: 20px;
  .el-input,
  .el-select,
  .el-cascader,
  .el-textarea,
  .el-autocomplete {
    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>