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-form-item :label="$t('付款单号')">
          <el-input
            style="max-width: 188px"
            v-model="queryParams.paymentNo"
            :placeholder="$t('请输入付款单号')"
            clearable
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('供应商')">
          <el-select
            clearable
            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('业务员')">
          <el-select
            v-model="queryParams.salesmanName"
            filterable
            :placeholder="$t('请选择业务员')"
            clearable
          >
            <el-option
              v-for="item in creatorData"
              :key="item.id"
              :label="item.nickname"
              :value="item.nickname"
            />
          </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('状态')">
          <dict-selector
            clearable
            :type="DICT_TYPE.ECW_PAYMENT_STATE"
            v-model="queryParams.state"
          ></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('发票状态')">
          <el-select
            clearable
            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>
          <!--lanbm 2024-05-06 改 “新增请款单” 为 “新增付款单” -->
          <el-button
            style="margin-left: 10px"
            type="success"
            v-hasPermi="['ecw:paymentVoucher:create']"
            @click="handleAdd(0)"
            >{{ $t("新增付款单") }}
          </el-button>
        </el-form-item>
      </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="sjfkdate"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sjfkdate, "{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"
          />
          <span
            v-if="[2, 4, 6].includes(scope.row.state) && scope.row.comment"
            :title="scope.row.comment"
            ><i class="el-icon-question"></i
          ></span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template v-slot="{ row }">
          <el-button
            v-if="[0, 2].includes(row.state)"
            size="mini"
            @click="handleAdd(row.id)"
            v-hasPermi="['ecw:paymentVoucher:edit']"
            type="text"
            >{{ $t("编辑") }}
          </el-button>
          <!--          <el-button v-if="[1,3].includes(row.state)" size="mini" v-hasPermi="['ecw:paymentVoucher:process']" type="text" @click="examineClick(scope.row.id)">{{ $t('审核') }}</el-button>-->
          <el-button
            size="mini"
            type="text"
            v-show="[1].includes(row.state)"
            v-hasPermi="['ecw:paymentVoucher:Unapprove']"
            @click="bridgeFn(1, $t('取消审核'), row)"
          >
            {{ $t("取消审核") }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            v-show="[7, 3, 1, 5].includes(row.state)"
            v-hasPermi="['ecw:paymentVoucher:details']"
            @click="
              $router.push({
                path: '/bpm/process-instance/detail',
                query: { id: row.bmpId },
              })
            "
            >{{ $t("审核详情") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="[3].includes(row.state)"
            v-hasPermi="['ecw:paymentVoucher:Cancel-De-approval']"
            @click="bridgeFn(2, $t('取消付款单反审核'), row)"
            >{{ $t("取消反审核") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="[5].includes(row.state)"
            v-hasPermi="['ecw:paymentVoucher:Cancel-Write-off']"
            @click="bridgeFn(3, $t('取消付款单核销'), row)"
            >{{ $t("取消核销") }}</el-button
          >

          <el-button
            v-if="[4].includes(row.state)"
            size="mini"
            type="text"
            v-hasPermi="['ecw:paymentVoucher:De-approval']"
            @click="bridgeFn(4, $t('反审核'), row)"
            >{{ $t("反审核") }}
          </el-button>
          <el-button
            v-if="[4].includes(row.state)"
            size="mini"
            type="text"
            v-hasPermi="['ecw:paymentVoucher:writeOff']"
            @click="bridgeFn(5, $t('核销'), row)"
            >{{ $t("核销") }}
          </el-button>

          <el-button
            v-if="[6].includes(row.state)"
            size="mini"
            type="text"
            v-hasPermi="['ecw:paymentVoucher:cancelWriteOff']"
            @click="bridgeFn(6, $t('反核销'), row)"
          >
            {{ $t("反核销") }}
          </el-button>
          <el-button
            v-if="[7].includes(row.state)"
            v-hasPermi="['ecw:paymentVoucher:Cancel-Cancelling-Write-off']"
            size="mini"
            type="text"
            @click="bridgeFn(7, $t('取消付款单反核销'), row)"
          >
            {{ $t("取消反核销") }}</el-button
          >
          <el-button
            v-if="[6, 4].includes(row.state)"
            size="mini"
            type="text"
            @click="toprint(row.id)"
            v-hasPermi="['ecw:paymentVoucher:print']"
            >{{ $t("打印") }}
          </el-button>
          <el-button
            v-if="[0, 2].includes(row.state)"
            size="mini"
            type="text"
            v-hasPermi="['ecw:paymentVoucher:delete']"
            @click="deleteClick(row)"
            >{{ $t("删除") }}
          </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>
    <!--对话框 审核 -->
    <el-dialog
      width="30%"
      @close="cancelReason = ''"
      :title="examineTitle"
      :visible.sync="examineShow"
    >
      <div class="cancel_content">
        <!--lanbm 2024-05-17 修改-->
        <span>{{ $t("付款备注") }}</span>
        <el-input
          type="textarea"
          :rows="6"
          v-model="cancelReason"
          :placeholder="$t('请输入付款备注')"
        ></el-input>
        <span>{{ $t("实际付款日期") }}</span>
        <el-date-picker
          v-model="sjfkdate"
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd"
          type="datetime"
          placeholder="实际付款日期"
        />
      </div>
      <span slot="footer" class="dialog-footers">
        <el-button type="primary" @click="cancelWriteOffClick()">{{
          $t("提交")
        }}</el-button>
        <el-button @click="examineShow = false">{{ $t("取消") }}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="30%"
      @close="cancelReason = ''"
      :title="examineTitle"
      :visible.sync="fhxShow"
    >
      <div class="cancel_content">
        <span>{{ $t("申请理由") }}</span>
        <el-input
          type="textarea"
          :rows="6"
          v-model="cancelReason"
          :placeholder="$t('申请理由')"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footers">
        <el-button type="primary" @click="cancelWriteOffClick2()">{{
          $t("提交")
        }}</el-button>
        <el-button @click="cancelWriteOffClick2_Close">{{
          $t("取消")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userList, listSimpleUsers } 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,
  cancelFinancePaymentApproval,
  cancelFinancePaymentApprovalNo,
  cancelFinancePaymentWriteOff,
  cancelFinancePaymentWriteOffNo,
  paymentCancelFinancePaymentWriteOffNo,
} from "@/api/ecw/financial";

export default {
  name: "EcwFinancialPaymentvoucher",
  components: {
    CustomerSelector,
  },
  data() {
    return {
      examineShow: false,
      fhxShow: false,
      textTip:undefined,
      examineTitle: "",
      examineIndex: 0,
      examineData: {},
      cancelReason: "",
      //实际付款日期 lanbm 2024-05-17 add
      sjfkdate: undefined,
      open: false,
      showSearch: true,
      loadings: false,
      form: {},
      creatorData: [],
      allSupplier: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      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,
      },
    };
  },
  activated() {
    this.handleQuery();
  },
  created() {
    let that = this;
    listSimpleUsers().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;
    },
    bridgeFn(index, title, row) {
      this.examineIndex = index;
      this.examineTitle = title;
      this.textTip=title;//lanbm2024-05-16 add
      this.examineData = row;
      if (index == 5) {
        //核销
        this.examineShow = true;
      } else {
        //lanbm 2024-05-17 add
        this.fhxShow = true;
      }
    },
    //lanbm 2024-05-17 add
    cancelWriteOffClick2_Close() {
      this.fhxShow = false;
    },
    cancelWriteOffClick2() {
      //反核销对话框
      if (!this.cancelReason) {
        return this.$message.warning(this.$t("请输入申请理由！"));
      }
      let resolve = (val = this.$t("操作成功吗！")) => {
        this.getList();
        this.$message.success(val);
        this.fhxShow = false;
      };
      let reject = () => {
        this.fhxShow = false;
      };
      let { id: paymentId, paymentNo } = this.examineData;
      let p = {
        paymentId,
        remark: this.cancelReason,
        paymentNo,
        reason: this.cancelReason,
        //时间付款时间 lanbm 2024-05-17 add
        sjfkdate: this.sjfkdate,
      };
      switch (this.examineIndex) {
        case 1:
          // 取消审核
          cancelFinancePaymentApproval(p).then(
            () => resolve(this.$t("取消付款单审核成功！")),
            reject
          );
          break;
        // 取消付款单反审核
        case 2:
          cancelFinancePaymentApprovalNo(p).then(
            () => resolve(this.$t("取消付款单反审核成功！")),
            reject
          );
          break;
        case 3:
          //取消付款单核销
          cancelFinancePaymentWriteOffNo(p).then(
            () => resolve(this.$t("取消付款单核销成功！")),
            reject
          );
          break;
        case 4:
          // 反审核
          paymentVerifyCancel(p).then(
            () => resolve(this.$t("提交付款单反审核成功，请耐心等待审核结果!")),
            reject
          );
          break;
        case 5:
          // 核销
          paymentVerification(p).then(
            () => resolve(this.$t("提交付款单核销成功，请耐心等待审核结果！")),
            reject
          );
          break;
        case 6:
          // 反核销
          paymentVerificationCancel(p).then(
            () => resolve(this.$t("提交付款单反核销成功，请耐心等待审核结果!")),
            reject
          );
          break;
        case 7:
          //  取消反核销
          paymentCancelFinancePaymentWriteOffNo(p).then(
            () => resolve(this.$t("取消付款单反核销成功！")),
            reject
          );
          break;
      }
    },
    cancelWriteOffClick() {
      if (!this.cancelReason) {
        return this.$message.warning(this.$t("请输入申请理由！"));
      }
      let resolve = (val = this.$t("操作成功吗！")) => {
        this.getList();
        this.$message.success(val);
        this.examineShow = false;
      };
      let reject = () => {
        this.examineShow = false;
      };
      let { id: paymentId, paymentNo } = this.examineData;
      let p = {
        paymentId,
        remark: this.cancelReason,
        paymentNo,
        reason: this.cancelReason,
        //时间付款时间 lanbm 2024-05-17 add
        sjfkdate: this.sjfkdate,
      };
      switch (this.examineIndex) {
        case 1:
          // 取消审核
          cancelFinancePaymentApproval(p).then(
            () => resolve(this.$t("取消付款单审核成功！")),
            reject
          );
          break;
        // 取消付款单反审核
        case 2:
          cancelFinancePaymentApprovalNo(p).then(
            () => resolve(this.$t("取消付款单反审核成功！")),
            reject
          );
          break;
        case 3:
          //取消付款单核销
          cancelFinancePaymentWriteOffNo(p).then(
            () => resolve(this.$t("取消付款单核销成功！")),
            reject
          );
          break;
        case 4:
          // 反审核
          paymentVerifyCancel(p).then(
            () => resolve(this.$t("提交付款单反审核成功，请耐心等待审核结果!")),
            reject
          );
          break;
        case 5:
          // 核销
          paymentVerification(p).then(
            () => resolve(this.$t("提交付款单核销成功，请耐心等待审核结果！")),
            reject
          );
          break;
        case 6:
          // 反核销
          paymentVerificationCancel(p).then(
            () => resolve(this.$t("提交付款单反核销成功，请耐心等待审核结果!")),
            reject
          );
          break;
        case 7:
          //  取消反核销
          paymentCancelFinancePaymentWriteOffNo(p).then(
            () => resolve(this.$t("取消付款单反核销成功！")),
            reject
          );
          break;
      }
    },
  },
};
</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>