修改界面

src/api/ldt_bills/frozenrec.js

@@ -48,3 +48,16 @@ export const update = (row) => {
   })
 }
 
+export const generateList = (current, size, params) => {
+  return request({
+    url: '/api/ldt_bills/frozenrec/generateList',
+    method: 'post',
+    responseType:"blob",
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+

src/views/ldt_bills/frozenrec.vue

@@ -18,28 +18,69 @@
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad">
-      <!--      <template slot="menuLeft">-->
-      <!--        <el-button type="danger"-->
-      <!--                   size="small"-->
-      <!--                   icon="el-icon-delete"-->
-      <!--                   plain-->
-      <!--                   v-if="permission.frozenrec_delete"-->
-      <!--                   @click="handleDelete">删 除-->
-      <!--        </el-button>-->
-      <!--      </template>-->
+      <template slot-scope="{type,size}" slot="createTimeSearch">
+        <el-radio-group v-model="query.createTime" :size="size" style="float: left">
+          <el-radio-button @click="searchStateChange" :label="-1">全部</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="1">今天</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="2">昨天</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="3">最近七天</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="4">最近30天</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="5">本月</el-radio-button>
+          <el-radio-button @click="searchStateChange" :label="6">本年</el-radio-button>
+        </el-radio-group>
+        <avue-date v-model="query.createTimeRange" type="datetimerange" format="yyyy年MM月dd日 hh:mm:ss"
+                   value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择日期"
+                   :size="size"
+                   @change="searchStateChange"
+                   style="width: 280px;margin-left:5px;float: left"
+                   range-separator="-"
+                   start-placeholder="开始日期"
+                   end-placeholder="结束日期"></avue-date>
+      </template>
+      <template slot-scope="{type,size}" slot="frozenTypeSearch">
+        <el-radio-group v-model="query.frozenType" :size="size" @change="searchStateChange">
+          <el-radio-button :label="select.value" v-for="(select,index) in option.column.find(ele=>{
+            return ele.prop==='frozenType';
+          }).dicData" :key="index">{{ select.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </template>
+      <template slot-scope="{type,size}" slot="frozenSatusSearch">
+        <el-radio-group v-model="query.frozenSatus" :size="size" @change="searchStateChange">
+          <el-radio-button :label="select.value" v-for="(select,index) in option.column.find(ele=>{
+            return ele.prop==='frozenSatus';
+          }).dicData" :key="index">{{ select.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </template>
+      <template slot-scope="{type,size}" slot="keySearch">
+        <el-input type="text" placeholder="订单ID" v-model="query.key" :size="size"
+                  style="width: 300px;margin: 1px 5px 1px 0;">
+          <el-button type="primary" :size="size" icon="el-icon-search" slot="append"
+                     @click="searchStateChange"></el-button>
+        </el-input>
+        <el-button type="primary" :size="size" icon="el-icon-top" @click="generateListAndDownload">生成列表</el-button>
+      </template>
     </avue-crud>
   </basic-container>
 </template>
 
 <script>
-import {add, getDetail, getList, remove, update} from "@/api/ldt_bills/frozenrec";
+import {add, generateList, getDetail, getList, remove, update} from "@/api/ldt_bills/frozenrec";
 import {mapGetters} from "vuex";
+import moment from "moment";
+import FileUtil from "@/util/fileUtil";
 
 export default {
   data() {
     return {
       form: {},
-      query: {},
+      query: {
+        createTime: -1,
+        createTimeRange: [],
+        frozenType: -1,
+        frozenSatus: -1,
+      },
       loading: true,
       page: {
         pageSize: 10,
@@ -61,11 +102,13 @@ export default {
         editBtn: false,
         delBtn: false,
         selection: true,
+        searchBtn: false,
+        emptyBtn: false,
         dialogClickModal: false,
         column: [
           {
-            label: "订单号",
-            prop: "tradeNo",
+            label: "冻结记录号",
+            prop: "id",
             rules: [{
               required: true,
               message: "请输入订单号",
@@ -82,9 +125,27 @@ export default {
             }]
           },
           {
-            label: "冻结账户类型",
+            label: "账户类型",
             prop: "frozenType",
             labelWidth: 100,
+            search: true,
+            type: "select",
+            searchSpan: 24,
+            searchOrder: 1,
+            dicData: [
+              {
+                label: "全部",
+                value: -1
+              },
+              {
+                label: "渠道积分",
+                value: "POINT"
+              },
+              {
+                label: "普通积分",
+                value: "BALANCE"
+              }
+            ],
             rules: [{
               required: true,
               message: "请输入冻结账户类型",
@@ -112,12 +173,54 @@ export default {
           {
             label: "冻结状态",
             prop: "frozenSatus",
+            search: true,
+            type: "select",
+            searchSpan: 24,
+            searchOrder: 2,
+            dicData: [
+              {
+                label: "全部",
+                value: -1
+              },
+              {
+                label: "已完成",
+                value: "SUCCEED_FROZEN"
+              },
+              {
+                label: "已退回",
+                value: "RETURNED_FROZEN"
+              }
+            ],
             rules: [{
               required: true,
               message: "请输入冻结状态",
               trigger: "blur"
             }]
           },
+          {
+            label: "交易时间",
+            prop: "createTime",
+            type: "datetime",
+            format: "yyyy-MM-dd hh:mm:ss",
+            valueFormat: "yyyy-MM-dd hh:mm:ss",
+            searchRange: true,
+            addDisplay: false,
+            editDisplay: false,
+            search: true,
+            searchSpan: 24,
+            searchOrder: 0,
+            searchslot: true,
+          },
+          {
+            label: "关键字",
+            prop: "key",
+            hide: true,
+            search: true,
+            searchslot: true,
+            searchOrder: 3,
+            searchSpan: 24,
+            editDisplay: false,
+          },
         ]
       },
       data: []
@@ -141,6 +244,60 @@ export default {
       return ids.join(",");
     }
   },
+  watch: {
+    //监听创建时间变化
+    "query.createTime": {
+      handler(value) {
+        //防止重复调用
+        if (value !== undefined) {
+          this.query.createTimeRange = [];
+          switch (value) {
+            case -1:
+              this.query.createTimeStart = undefined;
+              this.query.createTimeEnd = undefined;
+              break;
+            case 1: //今天
+              this.query.createTimeStart = moment().format("yyyy-MM-DD 00:00:00");
+              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
+              break;
+            case 2: //昨天
+              this.query.createTimeStart = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
+              this.query.createTimeEnd = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
+              break;
+            case 3: //近7天
+              this.query.createTimeStart = moment().subtract(7, 'days').format("yyyy-MM-DD HH:mm:ss");
+              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
+              break;
+            case 4: //近30天
+              this.query.createTimeStart = moment().subtract(30, 'days').format("yyyy-MM-DD HH:mm:ss");
+              this.query.createTimeEnd = moment().format("yyyy-MM-DD HH:mm:ss");
+              break;
+            case 5: //本月
+              this.query.createTimeStart = moment().format("yyyy-MM-01 00:00:00");
+              this.query.createTimeEnd = moment().format(`yyyy-MM-DD HH:mm:ss`);
+              break;
+            case 6: //本年
+              this.query.createTimeStart = moment().format("yyyy-01-01 00:00:00");
+              this.query.createTimeEnd = moment().format(`yyyy-MM-DD HH:mm:ss`);
+              break;
+            default:
+              break;
+          }
+        }
+      }
+    },
+    //监听创建时间变化
+    "query.createTimeRange": {
+      handler(value) {
+        //防止重复调用
+        if (value != null && value.length === 2) {
+          this.query.createTimeStart = value[0];
+          this.query.createTimeEnd = value[1];
+          this.query.createTime = undefined;
+        }
+      }
+    },
+  },
   methods: {
     rowSave(row, done, loading) {
       add(row).then(() => {
@@ -242,15 +399,59 @@ export default {
       this.onLoad(this.page, this.query);
     },
     onLoad(page, params = {}) {
+      let values = {
+        ...params,
+      };
+      values.createTime = null;
+      values.createTimeRange = null;
       this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+      getList(page.currentPage, page.pageSize, values).then(res => {
         const data = res.data.data;
         this.page.total = data.total;
         this.data = data.records;
         this.loading = false;
         this.selectionClear();
       });
-    }
+    },
+    //搜索状态改变
+    searchStateChange() {
+      setTimeout(() => {
+        const newQuery = {};
+        this.page.currentPage = 1;
+        for (const item in this.query) {
+          if (this.query[item] !== undefined && this.query[item] !== -1) {
+            newQuery[item] = this.query[item];
+          }
+        }
+        this.onLoad(this.page, newQuery);
+      }, 100);
+    },
+    //生成列表并到处
+    generateListAndDownload() {
+      const newQuery = {};
+      for (const item in this.query) {
+        if (this.query[item] !== undefined && this.query[item] !== -1) {
+          newQuery[item] = this.query[item];
+        }
+      }
+      newQuery.createTime = null;
+      newQuery.createTimeRange = null;
+      //获取列表键值对
+      newQuery.keyValue = {};
+      this.option.column.forEach(ele => {
+        newQuery.keyValue[ele.prop] = ele.label;
+      });
+      newQuery.keyValue = JSON.stringify(newQuery.keyValue);
+      this.loading = true;
+      //生成列表
+      generateList(this.page.currentPage, this.page.pageSize, newQuery).then(res => {
+        FileUtil.download(res.data, {
+          type: "application/vnd.ms-excel"
+        }, `生成冻结记录-${moment().format("yyyy-MM-DD HH:mm:ss")}.xls`);
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
   }
 };
 </script>