hjjc-workbench-web/src/views/contract/paymentRegistrationList.vue

<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" text="付款登记" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px;word-break: keep-all;">创建日期</span>
        <span>
          <DatePicker :value="selectDate" placeholder="请选择日期" type="date" placement="bottom-start" style="width: 180px"
            @on-change="(e)=>selectDate = e"></DatePicker>
        </span>

        <span style="padding: 0 6px;word-break: keep-all;">关键字</span>
        <span>
          <Input v-model="keywords" placeholder="请输入关键字" style="width: 180px"></Input>
        </span>
        <span style="padding: 0 6px;word-break: keep-all;">
          状态
        </span>
        <Select v-model="status" clearable placeholder="请选择" style="width:100px;">
          <Option v-for="item in [{label:'待审核',value:0},{label:'已审核',value:1}]" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
        <Button type="primary" style="margin-left: 10px" ghost
          @click="contractId = '',pageIndex = 1,keywords = '',selectDate = ''">重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="getFundLogs">查询</Button>
      </slot>
    </lx-header>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <el-table-column label="操作" fixed="right" width="200" header-align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 0&&type==1">
              <Poptip placement="bottom" confirm :transfer="true" title="确认要删除吗" @on-ok="deleteFundLog(scope.row)">
                <Button size="small" type="error" style="margin-left: 10px;margin-bottom: 4px" ghost>删除</Button>
              </Poptip>

              <Button size="small" type="primary" style="margin-left: 10px;margin-bottom: 4px"
                @click="$refs['detailPaymentRegistration'].getFundLog(scope.row.id),$refs['detailPaymentRegistration'].isShow = true">编辑</Button>
            </template>
            <Button size="small" type="primary" style="margin-left: 10px;margin-bottom: 4px"
              @click="$refs['printRegistration'].getDetailFundLog(scope.row.id),$refs['printRegistration'].isShow = true">打印</Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" show-elevator @on-change="pageChange" show-sizer @on-page-size-change="pageSizeChange" />
    </div>

    <printRegistration ref="printRegistration"></printRegistration>

    <detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration>
  </div>
</template>

<script>
  import {
    getFundLog,
    delFundLog
  } from "@/api/paymentRegistration/fundLog"
  import {
    parseTime
  } from "@/utils"
  import {
    Message
  } from "element-ui";

  import printRegistration from "./components/printRegistration";
  import detailPaymentRegistration from "./components/detailPaymentRegistration";
  export default {
    components: {
      printRegistration,
      detailPaymentRegistration
    },
    data() {
      return {
        selectDate: '',
        keywords: '',
        list: [],
        contractId: '',
        total: 0,
        pageIndex: 1,
        pageSize: 10,
        is_auth: 1,
        status: "",
        table: [{
            label: "项目名称",
            minWidth: 250,
            prop: 'contract.name',
            align: 'left',
            fixed: 'left'
          },
          {
            label: "付款申请金额(元)",
            prop: "apply_money",
            align: 'right',
            width: 180,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          },
          {
            label: '实际支付金额(元)',
            prop: "act_money",
            align: 'right',
            width: 180,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          },
          {
            label: "款项类型",
            prop: "type",
            width: 120
          },
          {
            label: "预算计划",
            width: 320,
            align: "left",
            customFn: (row) => {
              if (row.act_plan_link.length > 0) {
                return row.act_plan_link.map(item => {
                  return (
                    <div>
                      [{item.plan?.year}] - {item.plan?.name}
                      <br/>
                      [使用金额] {item.use_money}元 </div>
                  )
                })
              }
            }
          },
            {
              prop: 'status',
              label: '状态',
              width: 120,
              formatter: (cell, data, value) => {
                if (value === 0) return '待审核'
                else return '已审核'
              }
            },
            {
              label: "次数",
              prop: "pay_count",
              width: 95,
              formatter: (cell, data, value) => {
                return value + 1;
              }
            },
            {
              label: "是否为最后一笔",
              prop: "is_end",
              width: 145,
              formatter: (cell, data, value) => {
                return value == 1 ? "是" : "否"
              }
            },
            {
              label: "经办人",
              minWidth: 160,
              prop: 'admin.name',
              align: 'center'
            },
            {
              label: "业务科室",
              minWidth: 160,
              prop: 'department.name',
              align: 'center'
            },
            {
              label: "备注",
              minWidth: 460,
              prop: 'remark',
              align: 'left'
            },
            {
              label: "创建信息",
              prop: "created_at",
              width: 160,
              formatter: (cell, data, value) => {
                return parseTime(new Date(value), '{y}-{m}-{d}')
              }
            }
          ]
        }
      },
      methods: {
          pageSizeChange(e) {
            this.pageSize = e;
            this.pageIndex = 1;
            this.getFundLogs()
          },
          pageChange(e) {
            this.pageIndex = e
            this.getFundLogs()
          },

          async getFundLogs() {
            const res = await getFundLog({
              page_size: this.pageSize,
              page: this.pageIndex,
              contract_id: this.contractId,
              keyword: this.keywords,
              date: this.selectDate,
              is_auth: this.is_auth,
              status: this.status,
            })
            this.list = res.data
            this.total = res.total
          },

          deleteFundLog(row) {
            delFundLog({
              id: row.id
            }).then(res => {
              Message({
                type: 'success',
                message: '操作成功'
              })
              this.getFundLogs()
            })
          }
        },
        mounted() {
          this.contractId = this.$route.query.contractId

          this.getFundLogs()
        },
        created() {
          let type = parseInt(this.$route.path.split("_")[1]);
          this.type = this.is_auth = type;
        }
    }
</script>

<style scoped lang="scss">
</style>