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

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0.6%">
      <div class="text item">
        <el-form ref="bill" label-width="auto" :inline="true">
          <el-form-item label="创建人：" style="float: right">{{
            form.createUser
          }}</el-form-item>
          <el-form-item label="创建时间：" style="float: right">{{
            parseTime(new Date(form.createTime))
          }}</el-form-item>
          <el-form-item label="编号：" style="float: right">{{
            form.zbiNumber
          }}</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="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" :disabled="true">
              <el-radio-button label="00" v-if="type == '00'"
                >应付账款</el-radio-button
              >
              <el-radio-button label="01" v-if="type == '01'"
                >应收账款</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="账款名称" prop="zbiName">
            <el-input
              v-model="form.zbiName"
              placeholder="请输入账款名称"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="应付方" prop="zbiPayerId">
            <el-input
              v-model="form.payerName"
              maxlength="20"
              style="width: 300px"
              :disabled="true"
              v-if="
                company.scyId != form.zbiPayerId &&
                company.scyId != form.zbiPayeeId
              "
            />
            <el-select
              style="width: 300px"
              v-model="form.zbiPayerId"
              :disabled="true"
              filterable
              remote
              v-if="
                (type == '00' && company.scyId == form.zbiPayerId) ||
                (type == '00' && company.scyId == form.zbiPayeeId)
              "
            >
              <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' && company.scyId == form.zbiPayerId) ||
                (type == '01' && company.scyId == form.zbiPayeeId)
              "
            >
              <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"
              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"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptionsEnd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="应收方" prop="zbiPayeeId">
            <el-input
              v-model="form.payeeName"
              maxlength="20"
              style="width: 300px"
              :disabled="true"
              v-if="
                company.scyId != form.zbiPayerId &&
                company.scyId != form.zbiPayeeId
              "
            />
            <el-select
              style="width: 300px"
              v-model="form.zbiPayeeId"
              :disabled="true"
              filterable
              remote
              v-if="
                (type == '01' && company.scyId == form.zbiPayerId) ||
                (type == '01' && company.scyId == form.zbiPayeeId)
              "
            >
              <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' && company.scyId == form.zbiPayerId) ||
                (type == '00' && company.scyId == form.zbiPayeeId)
              "
            >
              <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="金额">
            <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"
              placeholder="请输入合同编号"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="账款服务">
            <el-input
              v-model="form.zbiService"
              placeholder="请输入账款服务"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送订单">
            <el-input
              v-model="form.zbiOrderNo"
              placeholder="请输入配送订单"
              maxlength="20"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="配送企业">
            <el-input
              v-model="form.zbiDistributor"
              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="合计：">{{
            handleInput(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
          stripe
          :data="fileList"
          @selection-change="handleInvoiceSelectionChange"
          row-key="ziiId"
          default-expand-all
          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-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">
                <el-checkbox-group
                  v-model="checkedInvoice"
                  @change="handleInvoiceSelectionChange"
                >
                  <el-checkbox
                    v-for="(item, index) in fileList"
                    :label="item"
                    :key="index"
                    style="width: 100%"
                    ><label @click="changeInvoice(item)"
                      ><el-link :underline="false">{{
                        item.name
                      }}</el-link></label
                    ><i
                      class="el-icon-success"
                      style="color: green"
                      v-if="item.ziiCheckStt == '1'"
                    ></i>
                    <i
                      class="el-icon-error"
                      style="color: red"
                      v-if="item.ziiCheckStt == '2' || item.ziiCheckStt == '3'"
                      >{{ checkSttFormat(item) }}</i
                    >
                  </el-checkbox>
                </el-checkbox-group>
              </el-main>
              <div style="text-align: center; margin-top: 20px">
                <el-button type="primary" @click="delInvoice">删除</el-button>
                <el-button type="primary" @click="toCheckAgian()"
                  >重新验真</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"
                >
                  <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="16" />
                  </el-form-item>
                  <el-form-item label="税价金额：">
                    <el-input v-model="invoice.ziiAmount" maxlength="16" />
                  </el-form-item>
                </el-form>
              </el-main>
              <el-footer>
                <el-button
                  type="primary"
                  @click="submitCheck()"
                  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,.tif"
          :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,.tif"
          :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,.tif"
          :before-upload="beforeUpload"
          :on-preview="invoicePictureCardPreview"
          :before-remove="beforeRemove"
          :on-remove="handleRemoveOther"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-card>

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

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

<script>
import {
  getBill,
  getInvoice,
  addBill,
  getInvoiceText,
  invoiceVerification,
  delInvoice,
  uploadBillFile,
  getFile,
  delFile,
  commitBill,
  getAmount,
} 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: "billEdit",
  components: {},
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 是否显示弹出层
      open: false,
      uploadOpen: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        zbiName: [
          {
            required: true,
            message: "账款名称不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
            message: "账款名称只能包含中文、英文、数字",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayerId: [
          {
            required: true,
            message: "应付方不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiDate: [
          {
            required: true,
            message: "贸易日期不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayDate: [
          {
            required: true,
            message: "预计收/付款日期不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiPayeeId: [
          {
            required: true,
            message: "应收方不能为空",
            trigger: ["blur", "change"],
          },
        ],
        zbiAmount: [
          {
            required: true,
            message: "贸易金额不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(?:0|[1-9]\d{0,13})(?:\.\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: {},
      pickerOptionsStart: {
          disabledDate: time => {
                if (this.form.zbiPayDate) {
                        return time.getTime() > new Date(this.form.zbiPayDate).getTime()
                }
            }
      },
      pickerOptionsEnd: {
          disabledDate: time => {
                if (this.form.zbiDate) {
                        return time.getTime() < new Date(this.form.zbiDate).getTime()
                }
            }
      },
    };
  },
  created() {
    const zbiId = this.$route.params && this.$route.params.zbiId;
    this.fullscreenLoading = true;
    getOwnCompany().then((response) => {
      this.company = response.data;
    });
    this.getCompanyRel();
    this.getDetail(zbiId);
    getInvoice(zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.fileList = response.data;
      this.invoice = this.fileList[0] ? this.fileList[0] : {};
      this.ids = [];
    });
    getFile("0", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.contractList = response.data;
    });
    //查询物流
    getFile("1", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.logisticsList = response.data;
    });
    //查询其他附件
    getFile("2", zbiId).then((response) => {
      response.data.forEach((element) => {
        element.url = element.url + "/" + getToken();
      });
      this.otherList = response.data;
    });
    this.getDicts("zc_invoice_checkStt").then((response) => {
      this.checkSttOptions = response.data;
    });
  },
  activated() {},
  methods: {
    //查询往来账款详情
    getDetail(zbiId) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getBill(zbiId).then((response) => {
        this.form = response.data;
        if (this.form.zbiPayerId == this.company.scyId) {
          this.type = "00";
        } else {
          this.type = "01";
        }
          loading.close();
      })
        .catch(() => {
          loading.close();
        });
    },
    //切换账款类型
    changePayer(val) {
      if (val == "00") {
        this.form.zbiPayerId = this.company.scyId;
        this.form.zbiPayeeId = null;
      } else if (val == "01") {
        this.form.zbiPayerId = null;
        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.uploadOpen = true;
    },
    //上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //去验真
    toCheck() {
      this.uploadOpen = false;
      this.open = true;
      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 fd = new FormData(); // FormData 对象
      fd.append("fileList", JSON.stringify(this.checkedInvoice)); // 文件对象
      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();
        });
    },
    //切换发票
    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();
          this.fileList.push(response.data);
          loading.close();
        })
        .catch(() => {
          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';
      const extension4 = testmsg === 'tif';
      if(!extension && !extension2 && !extension3 && !extension4){
        this.$message.warning(`请选择图片格式文件`);
      }
      return extension || extension2 || extension3 || extension4;
    },
    //上传前校验
    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(() => {
          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(() => {
          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(() => {
          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 (self.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();
                this.msgSuccess("删除成功");
              })
              .catch(() => {
                loading.close();
              });
          }
        });
      }
    },
    //删除发票
    delInvoice(row) {
      var self = this;
      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.00];
      for (let i in this.fileList) {
        strarr.push(this.fileList[i]["ziiAmount"]);
      }
      return (Math.floor(eval(strarr.join("+")) * 100) / 100).toFixed(2); //结果
      // return this.handleInput(eval(strarr.join("+"))); //结果
    },
    // 结束
    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)'
          });
          commitBill(this.form)
            .then((response) => {
                loading.close();
              this.msgSuccess("修改账款成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1);
            })
            .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>