front/front-vue/src/views/service/bill/addBill.vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">基本信息</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="auto"
          label-position="top"
          :inline="true"
        >
          <el-form-item label="账款类型" prop="wplIsInput" style="width: 300px">
            <el-radio-group
              v-model="type"
              prop="type"
              @change="changePayer"
              :disabled="disabled"
            >
              <el-radio-button label="00" v-if="type != '01'"
                >应付账款</el-radio-button
              >
              <el-radio-button label="01" v-if="type != '00'"
                >应收账款</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账款名称" prop="zbiName">
            <el-input
              v-model="form.zbiName"
              clearable
              placeholder="请输入账款名称"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="应付方" prop="zbiPayerId">
            <el-select
              style="width: 300px"
              v-model="form.zbiPayerId"
              :disabled="true"
              filterable
              remote
              v-if="type == '00'"
            >
              <el-option :label="company.scyName" :value="company.scyId">
              </el-option>
            </el-select>
            <el-select
              style="width: 300px"
              v-model="form.zbiPayerId"
              filterable
              clearable
              remote
              v-if="type == '01'"
            >
              <el-option
                v-for="(item, index) in companyRelList"
                :key="index"
                :label="
                  item.launchScyId == company.scyId
                    ? item.receiveScyName
                    : item.launchScyName
                "
                :value="
                  item.launchScyId == company.scyId
                    ? item.receiveScyId
                    : item.launchScyId
                "
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应收方" prop="zbiPayeeId">
            <el-select
              style="width: 300px"
              v-model="form.zbiPayeeId"
              :disabled="true"
              filterable
              remote
              v-if="type == '01'"
            >
              <el-option :label="company.scyName" :value="company.scyId">
              </el-option>
            </el-select>
            <el-select
              style="width: 300px"
              v-model="form.zbiPayeeId"
              filterable
              clearable
              remote
              v-if="type == '00'"
            >
              <el-option
                v-for="(item, index) in companyRelList"
                :key="index"
                :label="
                  item.launchScyId == company.scyId
                    ? item.receiveScyName
                    : item.launchScyName
                "
                :value="
                  item.launchScyId == company.scyId
                    ? item.receiveScyId
                    : item.launchScyId
                "
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="贸易日期" prop="zbiDate">
            <el-date-picker
              style="width: 300px"
              v-model="form.zbiDate"
              clearable
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptionsStart"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="
              type == '00'
                ? '预计付款日期'
                : type == '01'
                ? '预计收款日期'
                : '预计收/付款日期'
            "
            prop="zbiPayDate"
          >
            <el-date-picker
              style="width: 300px"
              v-model="form.zbiPayDate"
              clearable
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptionsEnd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="账款金额">
            <el-input
              :disabled="true"
              :value="allAmount()"
              maxlength="20"
              style="width: 300px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="账款金额大写">
            <el-input
              :disabled="true"
              :value="smallToBig(allAmount())"
              style="width: 300px"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="贸易合同编号" prop="zbiContractNo">
            <el-input
              v-model="form.zbiContractNo"
              clearable
              placeholder="请输入贸易合同编号"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="贸易商品/服务">
            <el-input
              v-model="form.zbiService"
              clearable
              placeholder="请输入贸易商品/服务"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送企业">
            <el-input
              v-model="form.zbiDistributor"
              clearable
              placeholder="请输入配送企业"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送订单号">
            <el-input
              v-model="form.zbiOrderNo"
              clearable
              placeholder="请输入配送订单号"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.zbiRemark"
              placeholder="请输入备注"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="100"
              type="textarea"
              style="width: 615px"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">发票信息</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form ref="invoice" label-width="auto" :inline="true">
          <el-form-item label="合计：">{{ allAmount() }}</el-form-item>
          <el-form-item label="大写：">{{
            smallToBig(allAmount())
          }}</el-form-item>
          <el-form-item style="float: right"
            ><el-button type="primary" @click="delInvoice"
              >删除</el-button
            ></el-form-item
          >
          <el-form-item style="float: right"
            ><el-button type="primary" @click="openUpload()"
              >上传</el-button
            ></el-form-item
          >
        </el-form>

        <el-table
          :data="fileList"
          @selection-change="handleInvoiceSelectionChange"
          row-key="categoryId"
          default-expand-all
          :row-class-name="tableRowClassName"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="发票代码"
            align="center"
            prop="ziiNo"
            maxlength="10"
          />
          <el-table-column
            label="发票号码"
            align="center"
            prop="ziiNumber"
            maxlength="10"
          />
          <el-table-column label="开票日期" align="center" prop="ziiDate" />
          <el-table-column
            label="购方识别号"
            align="center"
            prop="ziiPurchaserNo"
          />
          <el-table-column
            label="销方识别号"
            align="center"
            prop="ziiSellerNo"
          />
          <el-table-column
            label="合计金额"
            align="center"
            prop="ziiTotalAmount"
          />
          <el-table-column label="价税合计" align="center" prop="ziiAmount" />
          <el-table-column
            label="校验结果"
            align="center"
            prop="ziiCheckStt"
            :formatter="checkSttFormat"
          />
          <el-table-column
            label="附件"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="invoicePictureCardPreview(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 上传附件 -->
        <el-dialog
          title="上传发票"
          :visible.sync="uploadOpen"
          width="500px"
          append-to-body
        >
          <el-upload
            class="upload-demo"
            drag
            ref="upload"
            :file-list="fileList"
            :auto-upload="true"
            :http-request="httpRequest"
            :before-remove="beforeRemove"
            :on-remove="invoiceRemove"
            :before-upload="beforeAvatarUpload"
            accept=".jpg,.jpeg,.png"
            action=""
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击选择文件</em>
            </div>
            <div class="el-upload__tip">
              按住Ctrl可同时多选，单个文件不能超过2mb
            </div>
            <div class="el-upload__tip">
              严禁上传包含色情、暴力、反动等相关违法信息的文件。
            </div>
          </el-upload>
          <!-- <el-button type="primary" @click="submitUpload()">点击上传</el-button> -->
          <el-button type="primary" @click="toCheck()">完成去验真</el-button>
        </el-dialog>

        <!-- 发票验真 -->
        <el-dialog
          title="发票验真"
          :visible.sync="open"
          width="1050px"
          append-to-body
        >
          <el-container>
            <el-aside width="300px" style="background-color: white">
              <el-button type="primary" @click="openUploadInvoice"
                >上传发票</el-button
              >
              <el-header style="background-color: #dfe2e8; text-align: center">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
                <label>已上传发票列表</label>
              </el-header>
              <el-main style="height: 550px; border: groove">
                <div
                  :style="
                    item.ziiCheckStt == '1'
                      ? { 'background-color': '#a8f87f' }
                      : {}
                  "
                  v-for="(item, index) in fileList"
                  :label="item"
                  :key="index"
                >
                  <i
                    class="el-icon-question"
                    style="color: blue"
                    v-if="item.ziiCheckStt == '0'"
                    ><label @click="changeInvoice(item)"
                      ><el-link :underline="false">{{
                        item.name
                      }}</el-link></label
                    ></i
                  >
                  <i
                    class="el-icon-success"
                    style="color: green"
                    v-if="item.ziiCheckStt == '1'"
                    ><label @click="changeInvoice(item)"
                      ><el-link :underline="false">{{
                        item.name
                      }}</el-link></label
                    ></i
                  >
                  <i
                    class="el-icon-error"
                    style="color: red"
                    v-if="item.ziiCheckStt == '2' || item.ziiCheckStt == '3'"
                    ><label @click="changeInvoice(item)"
                      ><el-link :underline="false">{{
                        item.name
                      }}</el-link></label
                    ><label>{{ checkSttFormat(item) }}</label></i
                  >
                  <el-link
                    style="float: right"
                    type="primary"
                    :underline="false"
                    @click="delInvoice(item)"
                    >删除</el-link
                  >
                </div>
              </el-main>
              <div style="text-align: center; margin-top: 20px">
                <el-button type="primary" @click="toCheckAgian()"
                  >再次验证</el-button
                >
                <el-button type="primary" @click="submitCheck()"
                  >保存并上传</el-button
                >
              </div>
            </el-aside>
            <el-container>
              <el-header height="300px">
                <el-image
                  style="width: 650px; height: 267px"
                  :src="invoice.url"
                  fit="scale-down"
                  @click="invoicePictureCardPreview(invoice)"
                ></el-image>
                <p
                  v-if="invoice.zbiName"
                  style="text-align: center; color: red"
                >
                  发票重复，已存在名称为“{{ invoice.zbiName }}”的往来账款中!
                </p>
              </el-header>
              <el-main>
                <el-form
                  ref="invoice"
                  label-width="auto"
                  :inline="true"
                  label-position="top"
                  :disabled="invoice.ziiCheckStt == '1'"
                >
                  <el-form-item label="发票代码：">
                    <el-input v-model="invoice.ziiNo" maxlength="20" />
                  </el-form-item>
                  <el-form-item label="发票号码：">
                    <el-input v-model="invoice.ziiNumber" maxlength="20" />
                  </el-form-item>
                  <el-form-item label="开票日期：">
                    <el-date-picker
                      v-model="invoice.ziiDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="购货纳税人编号：">
                    <el-input v-model="invoice.ziiPurchaserNo" maxlength="20" />
                  </el-form-item>
                  <el-form-item label="销货纳税人编号：">
                    <el-input v-model="invoice.ziiSellerNo" maxlength="20" />
                  </el-form-item>
                  <el-form-item label="发票金额：">
                    <el-input v-model="invoice.ziiTotalAmount" maxlength="20" />
                  </el-form-item>
                  <el-form-item label="税价金额：">
                    <el-input v-model="invoice.ziiAmount" maxlength="20" />
                  </el-form-item>
                </el-form>
              </el-main>
              <el-footer>
                <el-button
                  type="primary"
                  @click="queryDouble()"
                  style="float: right"
                  >确定</el-button
                >
              </el-footer>
            </el-container>
          </el-container>
        </el-dialog>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">合同附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form ref="contract" label-width="auto" :inline="true">
          <!-- <el-form-item style="float: right"
                      ><el-button type="primary" @click="submitUploadContract()"
                        >上传</el-button
                      ></el-form-item
                    > -->
        </el-form>
        <el-upload
          :file-list="contractList"
          :auto-upload="true"
          :http-request="httpRequestContract"
          action=""
          ref="contractUpload"
          list-type="picture-card"
          accept=".jpg,.jpeg,.png"
          :before-upload="beforeUpload"
          :on-preview="invoicePictureCardPreview"
          :before-remove="beforeRemove"
          :on-remove="handleRemoveContract"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">物流附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form ref="logistics" label-width="auto" :inline="true">
          <!-- <el-form-item style="float: right"
                      ><el-button type="primary" @click="submitUploadLogistics()"
                        >上传</el-button
                      ></el-form-item
                    > -->
        </el-form>
        <el-upload
          :file-list="logisticsList"
          :auto-upload="true"
          :http-request="httpRequestLogistics"
          action=""
          ref="logisticsUpload"
          list-type="picture-card"
          accept=".jpg,.jpeg,.png"
          :before-upload="beforeUpload"
          :on-preview="invoicePictureCardPreview"
          :before-remove="beforeRemove"
          :on-remove="handleRemoveLogistics"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 0.6%">
      <div slot="header" class="clearfix">
        <span style="color: #666ee8; font-weight: bold">其他附件</span>
      </div>
      <div class="text item" style="margin-bottom: 20px">
        <el-form ref="other" label-width="auto" :inline="true">
          <!-- <el-form-item style="float: right"
                      ><el-button type="primary" @click="submitUploadOther()"
                        >上传</el-button
                      ></el-form-item
                    > -->
        </el-form>
        <el-upload
          :file-list="otherList"
          :auto-upload="true"
          :http-request="httpRequestOther"
          action=""
          ref="otherUpload"
          list-type="picture-card"
          accept=".jpg,.jpeg,.png"
          :before-upload="beforeUpload"
          :on-preview="invoicePictureCardPreview"
          :before-remove="beforeRemove"
          :on-remove="handleRemoveOther"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-card>

    <div style="text-align: center">
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>

    <!-- 查看图片 -->
    <el-dialog :visible.sync="invoiceVisible" append-to-body>
      <img width="100%" :src="invoiceImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  addBill,
  getInvoiceText,
  invoiceVerification,
  getInvoice,
  uploadBillFile,
  getFile,
  delFile,
  commitBill,
  getAmount,
  queryDouble,
} from "@/api/service/bill/bill";
import { getOwnCompany, companyRelList } from "@/api/common/company";
import { amtformat } from "@/utils/amtCommon";
import { getToken } from "@/utils/auth";

export default {
  name: "billAdd",
  components: {},
  props: {
    // 正常的业务数据，对应echarts饼图配置中series[0].data
    companyId: {
      type: String,
      required: true,
      default: () => "",
    },
    // 表示需要特殊定制的配置
    // 一般UI会规定一个统一的设计规范（比如颜色，字体，图例格式，位置等）
    // 但不排除某个图标会和设计规范不同，需要特殊定制样式，所以开放这个配置，增强灵活性
    companyType: {
      type: String,
      required: true,
      default: () => "",
    },
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 是否显示弹出层
      open: false,
      uploadOpen: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {
        zbiAmount: 0.0,
      },
      // 表单校验
      rules: {
        zbiName: [
          {
            required: true,
            message: "账款名称不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
            message: "账款名称只能包含中文、英文、数字",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayerId: [
          {
            required: true,
            message: "应付方不能为空",
            trigger: ["blur"],
          },
        ],
        zbiDate: [
          {
            required: true,
            message: "贸易日期不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayDate: [
          {
            required: true,
            message: "预计收/付款日期不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayeeId: [
          {
            required: true,
            message: "应收方不能为空",
            trigger: ["blur"],
          },
        ],
        zbiAmount: [
          {
            required: true,
            message: "贸易金额不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(?:0|[1-9]\d{0,8})(?:\.\d{1,2})?$/,
            message: "请输入正确的金额",
            trigger: ["blur", "change"],
          },
        ],
        zbiContractNo: [
          {
            required: true,
            message: "合同编号不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "请输入数字或英文",
            trigger: ["blur", "change"],
          },
        ],
      },
      //类型
      type: "00",
      //合同附件
      contractList: [],
      //物流附件
      logisticsList: [],
      //其他附件
      otherList: [],
      //发票列表
      fileList: [],
      //全选状态
      checkAll: false,
      //全选状态
      isIndeterminate: false,
      //选中值
      checkedInvoice: [],
      //发票对象
      invoice: {},
      //合计金额
      totalPrice: 0,
      //验证结果
      checkSttOptions: [],
      //图片路径
      invoiceImageUrl: null,
      //图片显示
      invoiceVisible: false,
      //等待框
      fullscreenLoading: false,
      //链属企业
      companyRelList: [],
      //链属企业
      company: {},
      disabled: true,
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.zbiPayDate) {
            return (
              time.getTime() >
              new Date(this.form.zbiPayDate).getTime() -
                14 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.form.zbiDate) {
            return (
              time.getTime() <
              new Date(this.form.zbiDate).getTime() + 13 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
    };
  },
  created() {
    // debugger;
    const companyId = this.companyId;
    const type = this.companyType;
    getOwnCompany()
      .then((response) => {
        this.company = response.data;
      })
      .then((response) => {
        this.changePayer(type, companyId);
        this.type = type;
      });
    this.getCompanyRel();
    this.getDicts("zc_invoice_checkStt").then((response) => {
      this.checkSttOptions = response.data;
    });
  },
  activated() {},
  methods: {
    //切换账款类型
    changePayer(val, companyId) {
      if (val == "00") {
        this.$set(this.form, "zbiPayerId", this.company.scyId);
        this.$set(this.form, "zbiPayeeId", companyId);
      } else if (val == "01") {
        this.$set(this.form, "zbiPayerId", companyId);
        this.$set(this.form, "zbiPayeeId", this.company.scyId);
      }
    },
    //查询链属企业
    getCompanyRel(val) {
      this.queryParams.companyName = val;
      companyRelList(this.queryParams).then((response) => {
        this.companyRelList = response.data;
      });
    },
    //全选
    handleCheckAllChange(val) {
      this.checkedInvoice = val ? this.fileList : [];
      this.ids = val ? this.fileList.map((item) => item.id) : [];
      this.isIndeterminate = false;
    },
    // 多选框选中数据
    handleInvoiceSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //发票上传窗口
    openUpload() {
      this.open = true;
    },
    //上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //上传发票窗口
    openUploadInvoice() {
      this.uploadOpen = true;
    },
    //判重验证
    queryDouble() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (
        this.invoice &&
        this.invoice.ziiId &&
        this.invoice.ziiCheckStt != "1"
      ) {
        queryDouble(this.invoice).then((response) => {
          this.fileList.forEach((file) => {
            if (response.id == file.id) {
              file.ziiCheckStt = response.ziiCheckStt;
              file.zbiName = response.zbiName;
            }
          });
          // this.invoice = this.fileList[0] ? this.fileList[0] : {};
          loading.close();
        });
      }
    },
    //去验真
    toCheck() {
      this.uploadOpen = false;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fd = new FormData(); // FormData 对象
      fd.append("fileList", JSON.stringify(this.fileList)); // 文件对象
      invoiceVerification(fd)
        .then((response) => {
          response.forEach((element) => {
            this.fileList.forEach((file) => {
              if (element.id == file.id) {
                file.ziiCheckStt = element.ziiCheckStt;
                file.zbiName = element.zbiName;
              }
            });
          });
          this.invoice = this.fileList[0] ? this.fileList[0] : {};
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    //重新验真
    toCheckAgian() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let checkList = this.checkedInvoice.filter((element) => {
        return element.ziiCheckStt == "0";
      });
      let fd = new FormData(); // FormData 对象
      fd.append("fileList", JSON.stringify(checkList)); // 文件对象
      invoiceVerification(fd)
        .then((response) => {
          response.forEach((element) => {
            this.fileList.forEach((file) => {
              if (element.id == file.id) {
                file.ziiCheckStt = element.ziiCheckStt;
                file.zbiName = element.zbiName;
              }
            });
          });
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    //表格置灰
    tableRowClassName({ row, rowIndex }) {
      if (row.ziiCheckStt != "1") {
        return "warning-row";
      }
      return "";
    },
    //切换发票
    changeInvoice(item) {
      this.invoice = item;
    },
    //手动上传文件触发
    httpRequest(param) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("zbiId", this.form.zbiId); //文件类型
      getInvoiceText(fd)
        .then((response) => {
          response.data.url = response.data.url + "/" + getToken();
          var flag = true;
          this.fileList.forEach((element) => {
            if (element.ziiNo == response.data.ziiNo) {
              flag = false;
            }
          });
          if (flag) {
            this.fileList.push(response.data);
          } else {
            let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
            let idx = this.$refs.upload.uploadFiles.findIndex(
              (item) => item.uid === uid
            ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            this.$refs.upload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
            this.$message.error("检测发票重复上传，请检查后重试");
          }
          loading.close();
        })
        .catch(() => {
          let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.upload.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.upload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
          loading.close();
        });
    },
    beforeUpload(files) {
      var testmsg = files.name.substring(files.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg";
      const extension2 = testmsg === "jpeg";
      const extension3 = testmsg === "png";
      if (!extension && !extension2 && !extension3) {
        this.$message.warning(`请选择图片`);
      }
      return extension || extension2 || extension3;
    },
    //上传前校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB");
      }
      return isJPG && isLt2M;
    },
    //上传合同
    submitUploadContract() {
      this.$refs.contractUpload.submit();
    },
    //上传物流
    submitUploadLogistics() {
      this.$refs.logisticsUpload.submit();
    },
    //上传其他
    submitUploadOther() {
      this.$refs.otherUpload.submit();
    },
    //手动上传合同触发
    httpRequestContract(param) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("zbiId", this.form.zbiId); //文件类型
      fd.append("type", "0"); //文件类型
      uploadBillFile(fd)
        .then((response) => {
          response.data.url = response.data.url + "/" + getToken();
          this.contractList.push(response.data);
          loading.close();
        })
        .catch(() => {
          let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.contractUpload.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.contractUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
          loading.close();
        });
    },
    //手动上传物流触发
    httpRequestLogistics(param) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("zbiId", this.form.zbiId); //文件类型
      fd.append("type", "1"); //文件类型
      uploadBillFile(fd)
        .then((response) => {
          response.data.url = response.data.url + "/" + getToken();
          this.logisticsList.push(response.data);
          loading.close();
        })
        .catch(() => {
          let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.logisticsUpload.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.logisticsUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文
          loading.close();
        });
    },
    //手动上传其他触发
    httpRequestOther(param) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("zbiId", this.form.zbiId); //文件类型
      fd.append("type", "2"); //文件类型
      uploadBillFile(fd)
        .then((response) => {
          response.data.url = response.data.url + "/" + getToken();
          this.otherList.push(response.data);
          loading.close();
        })
        .catch(() => {
          let uid = fileObj.uid; // 关键作用代码，去除文件列表失败文件
          let idx = this.$refs.otherUpload.uploadFiles.findIndex(
            (item) => item.uid === uid
          ); // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
          this.$refs.otherUpload.uploadFiles.splice(idx, 1); // 关键作用代码，去除文件列表失败文件
          loading.close();
        });
    },
    //删除图片
    beforeRemove(file, fileList) {
      let a = true;
      if (file && file.status === "success") {
        a = this.$confirm(`确定移除 ${file.name}？`);
      }
      return a;
    },
    //删除合同附件
    handleRemoveContract(file, fileList) {
      var self = this;
      if (this.contractList) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        delFile(file.id)
          .then(function () {
            self.contractList = self.contractList.reduce((total, current) => {
              current.id !== file.id && total.push(current);
              return total;
            }, []);
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    //删除物流附件
    handleRemoveLogistics(file, fileList) {
      var self = this;
      if (this.logisticsList) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        delFile(file.id)
          .then(function () {
            self.logisticsList = self.logisticsList.reduce((total, current) => {
              current.id !== file.id && total.push(current);
              return total;
            }, []);
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    //删除其他附件
    handleRemoveOther(file, fileList) {
      var self = this;
      if (this.otherList) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        delFile(file.id)
          .then(function () {
            self.otherList = self.otherList.reduce((total, current) => {
              current.id !== file.id && total.push(current);
              return total;
            }, []);
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    //删除附件
    delFile(row) {
      var self = this;
      const ids = row.id || this.ids;
      self.fullscreenLoading = true;
      delFile(ids).then(function () {
        self.fullscreenLoading = false;
      });
    },
    //查看图片
    invoicePictureCardPreview(file) {
      this.invoiceImageUrl = file.url;
      this.invoiceVisible = true;
    },
    //删除发票
    invoiceRemove(file, fileList) {
      var self = this;
      if (file && file.status === "success") {
        this.fileList = this.fileList.filter((item) => {
          if (item.uid !== file.uid) {
            return item;
          } else {
            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            delFile(item.id)
              .then(function () {
                loading.close();
                self.msgSuccess("删除成功");
              })
              .catch(() => {
                loading.close();
              });
          }
        });
      }
    },
    //删除发票
    delInvoice(row) {
      var self = this;
      console.log(this.ids);
      const ids = [row.id] || this.ids;
      if (ids && ids.length != 0) {
        this.$confirm("是否确认删除此数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            self.fullscreenLoading = true;
            return delFile(ids);
          })
          .then(() => {
            self.fullscreenLoading = false;
            ids.forEach((element) => {
              self.fileList = self.fileList.reduce((total, current) => {
                current.id !== element && total.push(current);
                return total;
              }, []);
            });
            this.msgSuccess("删除成功");
          });
      }
    },
    //确认发票
    submitCheck() {
      this.open = false;
    },
    //发票合计
    allAmount() {
      var strarr = [0.0];
      for (let i in this.fileList) {
        if (this.fileList[i]["ziiCheckStt"] == "1") {
          strarr.push(this.fileList[i]["ziiAmount"]);
        }
      }
      return (Math.floor(eval(strarr.join("+")) * 100) / 100).toFixed(2); //结果
    },
    // 提交
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.zbiAmount = this.allAmount();
          this.form.fileList = this.fileList;
          this.form.contractList = this.contractList;
          this.form.logisticsList = this.logisticsList;
          this.form.otherList = this.otherList;
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          addBill(this.form)
            .then((response) => {
              loading.close();
              this.form.zbiId = response.data.zbiId;
              this.msgSuccess("新增账款成功");
              this.$emit("addClick", response.data.zbiId);
            })
            .catch(() => {
              loading.close();
            });
        }
      });
    },
    //校验结果字典
    checkSttFormat(row, column) {
      return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
    },
    /* 金额展示 */
    handleInput(str) {
      return amtformat(str, 2, ".", ",");
    },
    /* //  将数字金额转换为大写金额 */
    smallToBig(money) {
      //  将数字金额转换为大写金额
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      var parts; //分离金额后用的数组，预定义
      if (money == "" || money == null || money == undefined) {
        return "零元零角零分";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: rgb(223, 223, 223);
}
</style>