paymentVoucher.vue

<template>
  <div class="app-container">
    <div slot="header" class="card-title">{{ $t('付款单') }}</div>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch" class="card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
        class="card"
      >
        <el-row :span="24">
          <el-form-item :label="$t('柜号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              :placeholder="$t('请输入收款单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('自编号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              :placeholder="$t('请输入收款单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('付款单号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              :placeholder="$t('请输入付款单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('供应商')">
            <el-select
              v-model="queryParams.supplierId"
              :placeholder="$t('请选择供应商')"
            >
              <el-option
                v-for="supplier in allSupplier"
                :key="supplier.id"
                :label="supplier.companyZh"
                :value="supplier.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('状态')">
            <dict-selector :type="DICT_TYPE.ECW_PAYMENT_STATE" v-model="queryParams.state" />
          </el-form-item>
        </el-row>
        <el-row :span="24">
          <el-form-item :label="$t('业务员')">
            <el-select v-model="form.salesmanId" :placeholder="$t('请选择业务员')">
              <el-option
                v-for="item in creatorData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('创建时间')">
            <el-date-picker
              v-model="queryParams.beginCreateTime"
              type="datetimerange"
              value-format="yyyy-MM-dd"
              range-separator="到"
              :start-placeholder="$t('请选择日期')"
              :end-placeholder="$t('请选择日期')">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('发票状态')">
            <el-select
              v-model="queryParams.invoiceStatus"
              :placeholder="$t('请选择是否开票')"
            >
              <el-option :label="$t('未开票')" value="0" />
              <el-option :label="$t('已开票')" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t('查找') }}</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('付款单号')" align="center" prop="paymentNo" >
       <template slot-scope="scope">
            <span style="color: #1890ff;" @click="paymentDetail(scope.row)">{{scope.row.paymentNo}}</span>
          </template>
        </el-table-column>
      <el-table-column :label="$t('供应商')" align="center" prop="supplierName" />
      <el-table-column :label="$t('创建时间')" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('最后付款时间')" align="center" prop="latestPayAt">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.latestPayAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('发票')" align="center" prop="invoiceStatus">
        <template slot-scope="scope">
          <span>{{ scope.row.invoiceStatus === 0 ? $t('未开票') : $t('已开票') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('状态')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.ECW_PAYMENT_STATE"
            :value="scope.row.state"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" @click="handleAdd(scope.row.id)" type="text">{{ $t('编辑') }}</el-button>
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text" @click="examineClick(scope.row.id)">{{ $t('审核') }}</el-button>

          <el-button v-if="scope.row.state == 2" size="mini" type="text" @click="verifyCancelClick(scope.row)">{{ $t('反审核') }}</el-button>
          <el-button v-if="scope.row.state == 2" size="mini" type="text" @click="verificationClick(scope.row)">{{ $t('核销') }}</el-button>

          <el-button v-if="scope.row.state == 4" size="mini" type="text" @click="verificationCancelClick(scope.row)">{{ $t('反核销') }}</el-button>
          <!-- <el-button v-if="scope.row.state == 3" size="mini" type="text">开票</el-button> -->

          <el-button size="mini" type="text" @click="toprint(scope.row.id)">{{ $t('打印') }}</el-button>
          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text" @click="deleteClick(scope.row)">{{ $t('删除') }}</el-button>
          <!-- <el-button size="mini" type="text" @click="open = true">导出订单</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="$t('导出账单')"
      :visible.sync="open"
      width="500px"
      style="margin-top: 20vh !important"
      append-to-body
    >
      <div
        slot="header"
        class="card-title"
        style="border-bottom: 2px solid #f8f8f8"
      >
        <span>{{ $t('导出账单') }}</span>
        <i class="el-icon-close" @click="cancel"></i>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" style="width: 130px" @click="submitForm"
          >{{ $t('国内账单') }}</el-button
        >
        <el-button
          plain
          type="primary"
          style="width: 130px; margin: 0"
          @click="submitForm"
          >Debite note</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import CustomerSelector from "@/components/CustomerSelector";
import { getSupplierPage } from "@/api/ecw/supplier";
import { getPaymentList, deletePayment, paymentVerification, paymentVerificationCancel, paymentVerifyCancel } from "@/api/ecw/financial"

export default {
  name: "paymentVoucher",
  components: {
    CustomerSelector,
  },
  data() {
    return {
      open: false,
      showSearch: true,
      loadings: false,
      form: {},
      creatorData: [],
      allSupplier: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      // params: {
      //   page: 1,
      //   rows: 20,
      // },
      // 查询参数
      queryParams: {
        page: 1,
        rows: 20,
        dateType: null,
        date: null,
        originId: null,
        destinationId: null,
        transportId: null,
        isCargoControl: null,
        orderExceptionStatus: null,
        orderExceptionType: null,
        orderNo: null,
        consignorId: null,
        marks: null,
        prodId: null,
        productRecord: null,
        followUpSalesmanId: null,
      },
    };
  },
  created() {
    let that = this;
    userList("salesman").then((res) => (that.creatorData = res.data));
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.queryParams.beginCreateTime, "createTime");
      // 执行查询
      getPaymentList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    paymentDetail(row){
      const id = row.id;
      return this.$router.push("paymentDetail?id=" + id);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    stateMap(state) {
      switch (state) {
        case 1:
          return this.$t('待审核')
        case 2:
          return this.$t('已审核待核销')
        case 3:
          return this.$t('审批驳回')
        case 4:
          return this.$t('已核销')
      }
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatPayment?id=" + id);
    },
    examineClick(id) {
      return this.$router.push("paymentExamine?id=" + id);
    },
    deleteClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('是否确认删除该付款单?')).then(function() {
        return deletePayment(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('删除成功'));
      }).catch(() => {});
    },
    verificationClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('您确认要核销吗?')).then(function() {
        return paymentVerification(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('核销成功'));
      }).catch(() => {});
    },
    verificationCancelClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('您确认要反核销吗?')).then(function() {
        return paymentVerificationCancel(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('反核销成功'));
      }).catch(() => {});
    },
    verifyCancelClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('您确认要反审核吗?')).then(function() {
        return paymentVerifyCancel(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('反审核成功'));
      }).catch(() => {});
    },
    toprint(id) {
      return this.$router.push("printPaymentVoucher?id=" + id);
    },
    submitForm() {
      this.open = false;
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
    },
  },
};
</script>

 <style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 160px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
</style>