contract-business-web/src/views/contract/paymentPlan.vue

<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="付款计划">
      <div slot="content" />
      <slot>
        <div class="selects">
          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              付款计划日期
            </span>
            <DatePicker
              :value="[select.start,select.end]"
              placeholder="请选择日期"
              placement="bottom-start"
              style="width: 200px"
              type="daterange"
              @on-change="datePick"
            />
          </div>

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px" />
          </div>

          <Button
            style="margin-left: 10px"
            type="primary"
            @click="select={showDate:'',start:'',end:'',pageIndex:1,keyword:''}"
          >重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="getSignPlan">查询</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table
      :list="list"
      :table-item="table"
      @delete="deleteContractSign"
      @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}"
    >
      <template v-if="type==0" v-slot:btns />
    </xy-table>

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

    <detailContractSign ref="detailContractSign" @editorSuccess="getSignPlan" />
  </div>
</template>

<script>
import {
  getContractSign,
  delContractSign
} from '@/api/contractSign/contractSign'
import {
  parseTime
} from '@/utils'
import {
  Message
} from 'element-ui'

import detailContractSign from '@/views/contract/components/detailContractSign'

export default {
  components: {
    detailContractSign
  },
  data() {
    return {
      select: {
        start: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
        end: `${new Date().getFullYear()}-${new Date().getMonth() + 2}-${new Date().getDate()}`,
        pageIndex: 1,
        keyword: '',
        is_auth: 1
      },
      total: 0,
      list: [],
      table: [{
        prop: 'contract.name',
        label: '项目名称',
        width: 240,
        align: 'left',
        fixed: 'left'
      },
      {
        prop: 'money',
        label: '计划付款金额（元）',
        align: 'right',
        width: 170,
        formatter: (v1, v2, value) => {
          return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
        }
      },
      {
        prop: 'date',
        label: '计划付款日期',
        width: 180
      },
      {
        prop: 'content',
        label: '内容',
        minWidth: 180,
        align: 'left'
      },
      {
        prop: 'contract.created_at',
        label: '合同签订日期',
        width: 180,
        formatter: (v1, v2, value) => {
          return parseTime(new Date(value), '{y}-{m}-{d}')
        }
      },
      {
        prop: 'contract.supply',
        label: '受款单位',
        width: 140
      },
      {
        prop: 'admin.name',
        label: '经办人',
        width: 140
      },
      {
        prop: 'department.name',
        label: '经办科室',
        width: 140
      },
      {
        prop: 'created_at',
        label: '创建信息',
        width: 160,
        formatter: (v1, v2, value) => {
          return parseTime(new Date(value), '{y}-{m}-{d}')
        }
      }
      ]
    }
  },
  mounted() {
    this.getSignPlan()
  },
  created() {
    const type = parseInt(this.$route.path.split('_')[1])
    this.type = this.select.is_auth = type
  },
  methods: {
    pageSizeChange(e) {
      this.select.pageSize = e
      this.select.pageIndex = 1
      this.getSignPlan()
    },
    async getSignPlan() {
      const res = await getContractSign({
        page_size: this.select.pageSize,
        page: this.select.pageIndex,
        keyword: this.select.keyword,
        start_date: this.select.start,
        end_date: this.select.end,
        is_auth: this.select.is_auth
      })
      this.total = res.total
      this.list = res.data
    },
    deleteContractSign(row) {
      delContractSign({
        id: row.id
      }).then(res => {
        this.getSignPlan()
        Message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    datePick(e) {
      this.select.start = e[0]
      this.select.end = e[1]
    },
    pageChange(e) {
      this.select.pageIndex = e
      this.getSignPlan()
    }
  }
}
</script>

<style lang="scss" scoped>
  .selects {
    display: flex;
    flex-wrap: wrap;

    &>div {
      margin-bottom: 6px;
    }
  }
</style>