Explorar el Código

新增应付结算记录页面

zhangdan hace 4 años
padre
commit
c80170c6c3

+ 167 - 0
src/views/FinancialManagement/PaySettlementRecords.vue

@@ -0,0 +1,167 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :lg="6" :sm="12">
+            <a-form-item label="结算时间:">
+              <a-range-picker style="width:100%" v-model="queryOrderDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :sm="12">
+            <a-form-item label="结算单号">
+              <a-input class="full-width" v-model="queryParam.number" :maxLength="11" placeholder="请输入" allowClear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :sm="12">
+            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-divider style="margin-top: 0;"/>
+    <!-- 合计 -->
+    <a-alert type="info" showIcon style="margin-bottom:15px">
+      <div class="ftext" slot="message">总计:<span>{{ 3 }}</span> 单,实收<span>¥{{ 2900 }}</span> 元</div>
+    </a-alert>
+    <!-- 列表 -->
+    <div>
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        bordered
+        :columns="columns"
+        :data="loadData">
+        <template slot="action" slot-scope="text, record">
+          <!-- <a-icon type="eye" title="查看" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)" /> -->
+          <a-button type="primary" @click="handleDetail(record)">查看</a-button>
+        </template>
+      </s-table>
+    </div>
+    <!-- 应收结算记录详情弹窗 -->
+    <pay-settlement-records-details-modal :itemId="itemId" :openModalDetails="openModalDetails" @close="openModalDetails=false"></pay-settlement-records-details-modal>
+  </a-card>
+</template>
+
+<script>
+import moment from 'moment'
+import {
+  STable,
+  VSelect
+} from '@/components'
+// import {
+//   listCustomerBundle
+// } from '@/api/customerBundle'
+import PaySettlementRecordsDetailsModal from './PaySettlementRecordsDetailsModal.vue'
+export default {
+  name: 'PaySettlementRecordsList',
+  components: {
+    VSelect,
+    STable,
+    PaySettlementRecordsDetailsModal
+  },
+  data () {
+    return {
+      loadData: parameter => {
+        // const searchData = Object.assign(parameter, this.queryParam)
+        // console.log(this.queryOrderDate, 'this.queryOrderDate')
+        // if (this.queryOrderDate && this.queryOrderDate.length) {
+        //   searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
+        //   searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
+        // } else {
+        //   searchData.beginDate = ''
+        //   searchData.endDate = ''
+        // }
+        // return listCustomerBundle(searchData).then(res => {
+        //   const no = (res.pageNo - 1) * res.pageSize
+        //   for (let i = 0; i < res.list.length; i++) {
+        //     const _item = res.list[i]
+        //     _item.no = no + i + 1
+        //   }
+        //   return res
+        // })
+      },
+      queryOrderDate: undefined,
+      queryParam: {
+        number: '',
+        beginDate: '',
+        endDate: '',
+        orderFlag: ''
+      },
+      itemId: null, // 每条数据id
+      openModalDetails: false, // 默认关闭详情弹窗
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: '60px',
+        align: 'center'
+      },
+      {
+        title: '结算单号',
+        dataIndex: 'aaa',
+        width: '150px',
+        align: 'center'
+      },
+      {
+        title: '结算时间',
+        dataIndex: 'orderDate',
+        width: '150px',
+        align: 'center'
+      },
+      {
+        title: '结算订单数',
+        dataIndex: 'custMobile',
+        width: '150px',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'userInfo'
+        }
+      },
+      {
+        title: '结算订单总金额(¥)',
+        dataIndex: 'bundleName',
+        align: 'center',
+        width: '150px'
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        width: '100px',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ]
+    }
+  },
+  methods: {
+    // 查看详情
+    handleDetail (record) {
+      this.itemId = record.id
+      console.log(this.itemId)
+      this.openModalDetails = true
+    },
+    // 重置
+    resetSearchForm () {
+      this.queryOrderDate = undefined
+      this.queryParam = {
+        number: '',
+        beginDate: '',
+        endDate: '',
+        orderFlag: '',
+        custMobile: '',
+        bundleName: '',
+        vehicleNumber: ''
+      }
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

+ 154 - 0
src/views/FinancialManagement/PaySettlementRecordsDetailsModal.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <a-modal
+      class="modalBox"
+      title="详情"
+      v-model="isshow"
+      @cancle="cancel"
+      :footer="null"
+      width="60%"
+      :centered="true">
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        bordered
+        :columns="columns"
+        :data="loadData">
+        <template slot="action" slot-scope="text, record">
+          <!-- <a-icon type="eye" title="查看" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleDetail(record)" /> -->
+          <a-button type="primary" @click="handleDetail(record)">查看</a-button>
+        </template>
+      </s-table>
+    </a-modal>
+    <!-- 核销详情弹窗 -->
+    <WriteOffDetailsModal :number="number" :openWriteOffModal="openWriteOffModal" @close="openWriteOffModal=false"></WriteOffDetailsModal>
+  </div>
+</template>
+
+<script>
+import {
+  STable
+} from '@/components'
+import WriteOffDetailsModal from './WriteOffDetailsModal.vue'
+// import {
+//   listCustomerBundle
+// } from '@/api/customerBundle'
+export default {
+  name: 'SettlementRecordsDetailsModal',
+  components: {
+    STable,
+    WriteOffDetailsModal
+  },
+  props: {
+    openModalDetails: {
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: Number,
+      default: null
+    }
+  },
+  data () {
+    return {
+      loadData: parameter => {
+        // const searchData = Object.assign(parameter, this.queryParam)
+        // console.log(this.queryOrderDate, 'this.queryOrderDate')
+        // if (this.queryOrderDate && this.queryOrderDate.length) {
+        //   searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
+        //   searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
+        // } else {
+        //   searchData.beginDate = ''
+        //   searchData.endDate = ''
+        // }
+        // return listCustomerBundle(searchData).then(res => {
+        //   const no = (res.pageNo - 1) * res.pageSize
+        //   for (let i = 0; i < res.list.length; i++) {
+        //     const _item = res.list[i]
+        //     _item.no = no + i + 1
+        //   }
+        //   return res
+        // })
+      },
+	  isshow: this.openModalDetails,
+	  number: '',	// 套餐名称
+	  openWriteOffModal: false, // 核销小青弹窗默认关闭
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: '60px',
+        align: 'center'
+      },
+      {
+        title: '订单号',
+        dataIndex: 'number',
+        width: '150px',
+        align: 'center'
+      },
+      {
+        title: '下单时间',
+        dataIndex: 'aaa',
+        width: '150px',
+        align: 'center'
+      },
+      {
+        title: '客户信息',
+        dataIndex: 'orderDate',
+        width: '150px',
+        align: 'center'
+      },
+      {
+        title: '套餐名称',
+        dataIndex: 'custMobile',
+        width: '150px',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'userInfo'
+        }
+      },
+      {
+        title: '结算金额(¥)',
+        dataIndex: 'bundleName',
+        align: 'center',
+        width: '150px'
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        width: '100px',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ]
+    }
+  },
+  methods: {
+    // 关闭弹窗
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+    // 查看核销详情
+    handleDetail (record) {
+      console.log(44444444444444)
+      this.number = record.number
+      this.openWriteOffModal = true
+    }
+  },
+  watch: {
+    openModalDetails (newValue, oldValue) {
+      this.isshow = newValue
+	  console.log(this.isshow)
+    },
+    isshow (newValue, oldValue) {
+
+    }
+  }
+}
+</script>
+
+<style>
+</style>

+ 130 - 0
src/views/FinancialManagement/WriteOffDetailsModal.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <a-modal
+      class="modalBox"
+      :title="title"
+      v-model="isshow"
+      @cancle="cancel"
+      :footer="null"
+      width="60%"
+      :centered="true">
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        bordered
+        :columns="columns"
+        :data="loadData">
+      </s-table>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable } from '@/components'
+export default {
+  components: {
+    STable
+  },
+  props: {
+    packageName: {
+      type: String,
+      default: ''
+    },
+    openWriteOffModal: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  data () {
+    return {
+      loadData: parameter => {
+		  // const searchData = Object.assign(parameter, this.queryParam)
+		  // console.log(this.queryOrderDate, 'this.queryOrderDate')
+		  // if (this.queryOrderDate && this.queryOrderDate.length) {
+		  //   searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
+		  //   searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
+		  // } else {
+		  //   searchData.beginDate = ''
+		  //   searchData.endDate = ''
+		  // }
+		  // return listCustomerBundle(searchData).then(res => {
+		  //   const no = (res.pageNo - 1) * res.pageSize
+		  //   for (let i = 0; i < res.list.length; i++) {
+		  //     const _item = res.list[i]
+		  //     _item.no = no + i + 1
+		  //   }
+		  //   return res
+		  // })
+      },
+      title: this.PackageName + '--' + '核销详情',
+      isshow: this.openWriteOffModal,
+	  columns: [{
+	    title: '序号',
+	    dataIndex: 'no',
+	    width: '60px',
+	    align: 'center'
+	  },
+	  {
+	    title: '核销单号',
+	    dataIndex: 'number',
+	    width: '150px',
+	    align: 'center'
+	  },
+	  {
+	    title: '核销时间',
+	    dataIndex: 'aaa',
+	    width: '150px',
+	    align: 'center'
+	  },
+	  {
+	    title: '客户信息',
+	    dataIndex: 'orderDate',
+	    width: '150px',
+	    align: 'center'
+	  },
+	  {
+	    title: '服务名称',
+	    dataIndex: 'custMobile',
+	    width: '150px',
+	    align: 'center',
+	    scopedSlots: {
+	      customRender: 'userInfo'
+	    }
+	  },
+	  {
+	    title: '结算金额',
+	    dataIndex: 'bundleName',
+	    align: 'center',
+	    width: '150px'
+	  },
+	  {
+	    title: '核销门店',
+	    dataIndex: 'action',
+	    width: '100px',
+	    align: 'center'
+	  }
+	  ]
+    }
+  },
+  methods: {
+	  // 关闭弹窗
+	  cancel (e) {
+	    this.clear()
+	    this.$emit('close')
+	  }
+  },
+  watch: {
+	  openWriteOffModal (newValue, oldValue) {
+		  this.isshow = newValue
+	  },
+	  isshow (newValue, oldValue) {
+
+	  }
+  }
+}
+</script>
+
+<style>
+</style>