feat(bonusDelay): 拓展延缓页面

package.json

@@ -18,6 +18,7 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "dayjs": "^1.11.13",
     "echarts": "^5.4.2",
     "element-ui": "2.13.2",
     "file-saver": "^2.0.5",

src/api/settle.js

@@ -10,7 +10,7 @@ import request from '@/utils/request'
 export function accountList() {
   return request({
     url: '/system/pub/enums/account',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -18,7 +18,7 @@ export function accountList() {
 export function currencyType() {
   return request({
     url: '/system/pub/enums/currency-type',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -26,7 +26,7 @@ export function currencyType() {
 export function vertexList() {
   return request({
     url: '/system/manage/vertex/find-all',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -34,7 +34,7 @@ export function vertexList() {
 export function memberTeam() {
   return request({
     url: '/member/manage/member-team/list',
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -110,7 +110,6 @@ export function makerSpaceReject(data) {
   })
 }
 
-
 // 获取创客空间详情
 export function markerSpaceDetail(params) {
   return request({
@@ -403,7 +402,7 @@ export function queryTitle(params) {
   })
 }
 
-//顶点下拉选
+// 顶点下拉选
 export function topVertexList(params) {
   return request({
     url: '/member/manage/bonus-vertex-statis/vertexList',
@@ -469,4 +468,13 @@ export function bonusLenStatis(params) {
     method: 'get',
     params
   })
-}
+}
+
+// 拓展延缓列表
+export function expansionDelayList(params) {
+  return request({
+    url: '/bonus/manage/bonus-delay/delay-list',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -931,6 +931,12 @@ export const constantRoutes = [
         component: () => import('@/views/settlementCenter/recommendData/index'),
         meta: { title: '推荐数据' }
       },
+      {
+        path: 'bonus/expansionDelay',
+        name: 'BonusExpansionDelay',
+        component: () => import('@/views/settlementCenter/bonus/expansion-delay/index.vue'),
+        meta: { title: '拓展延缓' }
+      },
       {
         path: 'recommendDatas',
         name: 'recommendDatas',

src/utils/date.js

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs'
+
+export function getBeforeDays(n = 1) {
+  return dayjs().subtract(n, 'day').format('YYYY-MM-DD')
+}
+

src/views/settlementCenter/bonus/expansion-delay/index.vue

@@ -0,0 +1,371 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: kBank
+ * @Date: 2022-10-24 15:45:01
+-->
+<template>
+  <div class="page">
+    <div class="main">
+      <el-form
+        ref="select"
+        style="padding:0 10px 0 10px;background: #fff"
+        label-width="auto"
+      >
+        <el-row :gutter="20">
+          <!-- 一层 -->
+          <el-col :span="6">
+            <el-form-item label="会员编号">
+              <el-input
+                v-model="form.memberCode"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="结算时间范围">
+              <el-date-picker
+                v-model="dateRange"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                format="yyyy-MM-dd"
+                :range-separator="'至'"
+                :start-placeholder="'开始日期'"
+                :end-placeholder="'结束日期'"
+                clearable
+                :picker-options="pickerOptions"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col
+            :span="4"
+          >
+            <el-button
+              type="primary"
+              size="small"
+              class="my_search"
+              @click="getDataList"
+            > {{ '搜索' }}</el-button>
+            <el-button
+              class="my_reset"
+              @click="reset"
+            > {{ '重置' }}</el-button>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <!-- <div class="maintop">
+        <div class="mainbtn">
+          <el-button
+            size="small"
+            class="thebtn2"
+            :disabled="true"
+            @click="handleExport"
+          > 导出</el-button>
+        </div>
+      </div> -->
+      <div class="mainTable">
+        <div class="itemTrading">
+          <el-table
+            ref="mainTable"
+            v-loading="loading"
+            :data="tableData"
+            height="730px"
+            style="width: 100%"
+            :header-cell-style="{ background: '#EEEEEE' }"
+            :row-class-name="tableRowClassName"
+            show-summary
+          >
+            <!-- <el-table-column
+              type="selection"
+              width="55"
+            /> -->
+            <el-table-column
+              align="center"
+              prop="period"
+              width="150"
+              label="结算期数"
+            />
+            <el-table-column
+              align="center"
+              prop="settleDate"
+              width="auto"
+              label="结算日期"
+            />
+            <el-table-column
+              align="center"
+              prop="memberCode"
+              width="150"
+              label="会员编号"
+            />
+            <el-table-column
+              align="center"
+              prop="memberName"
+              width="150"
+              label="会员姓名"
+            />
+
+            <el-table-column
+              align="center"
+              prop="beforeGrantIncome"
+              :formatter="stateFormat"
+              width="auto"
+              :label="'拓展延缓期初'+`(${isLocalSymbol()})`"
+            />
+            <el-table-column
+              align="center"
+              prop="afterGrantIncome"
+              :formatter="stateFormat"
+              width="auto"
+              :label="'拓展延缓期末'+`(${isLocalSymbol()})`"
+            />
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getDataList"
+    />
+
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/settle.js'
+import { isLocalSymbol, stateFormat, toThousandthAndKeepDecimal } from '@/utils/numberToCurrency'
+import { mapGetters } from 'vuex'
+import dayjs from 'dayjs'
+import { getBeforeDays } from '@/utils/date'
+export default {
+  name: 'BonusExpansionDelay',
+  data() {
+    return {
+      dateRange: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50
+      },
+      total: 0,
+      tableData: [],
+      loading: false,
+      form: {
+        memberCode: '',
+        startDate: '',
+        endDate: ''
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > new Date(getBeforeDays()).getTime()
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['getUser'])
+  },
+  mounted() {
+    // 获取下拉
+    // 使用dayjs获取昨天的日期
+    const yesterday = getBeforeDays()
+    this.dateRange = [yesterday, yesterday]
+    // 获取列表
+    this.getDataList()
+  },
+  methods: {
+    isLocalSymbol,
+    toThousandthAndKeepDecimal,
+    stateFormat,
+    reset() {
+      this.form = {
+        memberCode: ''
+      }
+      const yesterday = getBeforeDays()
+      this.dateRange = [yesterday, yesterday]
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 50
+      this.getDataList()
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then((_) => {
+        this.download(
+          'member/manage/member-structure/export',
+          Object.assign({}, this.queryParams, this.form),
+          `拓展延缓-${new Date().getTime()}.xlsx`
+        )
+      })
+    },
+    getDataList() {
+      this.loading = true
+      const params = Object.assign({}, this.queryParams, this.form)
+      if (this.dateRange && this.dateRange.length > 0) {
+        Object.assign(params, {
+          startDate: this.dateRange[0],
+          endDate: this.dateRange[1]
+        })
+      }
+      api
+        .expansionDelayList(params)
+        .then((res) => {
+          this.tableData = res.rows
+          this.total = res.total
+        }).finally(() => {
+          this.loading = false
+        })
+    },
+
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'warning-row'
+      } else if (rowIndex % 2 === 0) {
+        return 'success-row'
+      }
+      return ''
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .el-range-editor.el-input__inner {
+  width: 100%;
+}
+::v-deep .el-button {
+  //height: 32px;
+  //line-height: 32px;
+  padding: 8px 20px;
+}
+::v-deep .el-date-editor .el-range__close-icon {
+  margin-top: -10px;
+}
+::v-deep .el-date-editor .el-range-separator {
+  margin-top: -10px;
+}
+::v-deep .el-date-editor .el-range__icon {
+  margin-top: -10px;
+}
+::v-deep .el-cascader input {
+  height: 32px !important;;
+  //line-height: 28px;
+}
+::v-deep .el-form-item {
+  margin-bottom: 0;
+}
+::v-deep .el-form-item__label {
+  color: #333;
+  font-weight: inherit;
+}
+
+::v-deep .el-table .warning-row {
+  background: #f9f9f9;
+}
+
+::v-deep .el-table .success-row {
+  background: #ffffff;
+}
+::v-deep .el-table thead {
+  color: #000000;
+}
+::v-deep .el-select {
+  width: 100%;
+}
+.uploadIcon ::v-deep .el-upload--picture-card {
+  display: none !important; /* 上传按钮隐藏 */
+}
+.page {
+  padding: 20px;
+  background: #f9f9f9;
+  font-size: 14px;
+  .main {
+    background: #f9f9f9;
+    //border-radius: 8px;
+    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .maintop {
+      display: flex;
+      //padding: 10px 20px;
+      //padding: 10px 0;
+      justify-content: space-between;
+      align-items: center;
+      .mainbtn {
+        .thebtn1 {
+          background: #3181e5;
+          color: #ffffff;
+        }
+        .thebtn2 {
+          background: #ffad41;
+          color: #ffffff;
+        }
+      }
+      .maintitle {
+        font-size: 10px;
+        font-family: MicrosoftYaHei;
+        color: #999999;
+      }
+    }
+    .mainTable{
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+  .tem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 28px;
+      height: 20px;
+      margin-right: 3px;
+    }
+  }
+  .isRed {
+    color: #ed1d25;
+  }
+  .isGreen {
+    color: #1ab62b;
+  }
+  .bgImg {
+    width: 48px;
+    height: 48px;
+  }
+}
+.openClose {
+  text-align: right;
+  margin-right: 10px;
+  color: #3181e5;
+}
+.kuang {
+  padding: 5px 20px;
+  background: rgba(255, 255, 255, 0);
+  border-radius: 4px;
+  border: 1px solid #cccccc;
+}
+.heji {
+  margin-top: 10px;
+  .dis {
+    display: flex;
+    justify-content: right;
+    padding: 5px 10px;
+    font-size: 14px;
+    color: #333333;
+    :nth-child(1) {
+      font-size: 14px;
+      font-weight: bold;
+      color: #333333;
+      margin-right: 20px;
+    }
+  }
+}
+</style>

theme/index.css

@@ -11316,7 +11316,7 @@
 }
 
 .el-date-table td.disabled div {
-    background-color: #c8161d;
+    background-color: #f5f7fa;
     opacity: 1;
     cursor: not-allowed;
     color: #ccc

vue.config.js

@@ -44,11 +44,11 @@ module.exports = {
     },
     proxy: {
       '/prod-api': {
-        target: 'http://t-mana.beida413.com',
+        target: 'http://192.168.0.104:8080/',
-        changeOrigin: true
+        changeOrigin: true,
-        // pathRewrite: {
+        pathRewrite: {
-        //   '^/prod-api': ''
+          '^/prod-api': ''
-        // }
+        }
       }
     }
     // before: require('./mock/mock-server.js')