feat(用户道具流水): 搜索功能参数调整

src/views/user/user-prop-list/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
+      <!-- 选择内容 -->
       <div class="filter-item">
         <el-autocomplete
           v-model="listQuery.origin"
@@ -11,16 +12,21 @@
           @select="handleSelect"
           @clear="handleSelect"
         >
-          <i
+          <i slot="suffix" class="el-icon-edit el-input__icon" />
-            slot="suffix"
-            class="el-icon-edit el-input__icon"
-          />
           <template slot-scope="{ item }">
             <span :label="item.name">{{ item.name }}</span>
-            <div :key="item.value" :value="item.value" style="font-size:12px; color:#d8d0d0">{{ item.value }}</div>
+            <div
+              :key="item.value"
+              :value="item.value"
+              style="font-size:12px; color:#d8d0d0"
+            >
+              {{ item.value }}
+            </div>
           </template>
         </el-autocomplete>
       </div>
+
+      <!-- 道具ID -->
       <el-input
         v-model.trim="listQuery.propsId"
         v-number
@@ -28,13 +34,18 @@
         style="width: 200px;"
         class="filter-item"
       />
+
+      <!-- 购买人ID -->
       <div class="filter-item">
         <account-input v-model="listQuery.buyerId" placeholder="购买人ID" />
       </div>
 
+      <!-- 接收人ID -->
       <div class="filter-item">
         <account-input v-model="listQuery.receiverId" placeholder="接收人ID" />
       </div>
+
+      <!-- 时间范围 -->
       <div class="filter-item">
         <el-date-picker
           v-model="rangeDate"
@@ -46,6 +57,8 @@
           end-placeholder="创建日期结束"
         />
       </div>
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -54,8 +67,9 @@
       >
         搜索
       </el-button>
-
     </div>
+
+    <!-- 表单 -->
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -63,19 +77,46 @@
       fit
       highlight-current-row
     >
+      <!-- 流水ID -->
       <!-- <el-table-column prop="id" label="流水ID" align="center" /> -->
+
+      <!-- 购买人 -->
       <el-table-column label="购买人" align="center" min-width="200">
         <template slot-scope="scope">
-          <user-table-exhibit :user-profile="scope.row.buyerUserProfile" :query-details="true" />
+          <user-table-exhibit
+            :user-profile="scope.row.buyerUserProfile"
+            :query-details="true"
+          />
         </template>
       </el-table-column>
-      <el-table-column prop="propsCandy" label="金额" align="center" min-width="100" />
+
+      <!-- 金额 -->
+      <el-table-column
+        prop="propsCandy"
+        label="金额"
+        align="center"
+        min-width="100"
+      />
+
+      <!-- 接收人信息 -->
       <el-table-column label="接收人" align="center" min-width="200">
         <template slot-scope="scope">
-          <user-table-exhibit :user-profile="scope.row.receiverUserProfile" :query-details="true" />
+          <user-table-exhibit
+            :user-profile="scope.row.receiverUserProfile"
+            :query-details="true"
+          />
         </template>
       </el-table-column>
-      <el-table-column prop="propsOriginDesc" label="来源描述" align="center" min-width="200" />
+
+      <!-- 来源 -->
+      <el-table-column
+        prop="propsOriginDesc"
+        label="来源描述"
+        align="center"
+        min-width="200"
+      />
+
+      <!-- 封面 -->
       <el-table-column label="封面" align="center" min-width="80">
         <template slot-scope="scope">
           <el-image
@@ -84,14 +125,37 @@
           />
         </template>
       </el-table-column>
-      <el-table-column prop="propsId" label="道具ID" align="center" min-width="200" />
+
-      <el-table-column prop="propsName" label="道具名称" align="center" min-width="200" />
+      <!-- 道具ID -->
-      <el-table-column prop="createTime" label="创建时间" align="center" width="200">
+      <el-table-column
+        prop="propsId"
+        label="道具ID"
+        align="center"
+        min-width="200"
+      />
+
+      <!-- 道具名称 -->
+      <el-table-column
+        prop="propsName"
+        label="道具名称"
+        align="center"
+        min-width="200"
+      />
+
+      <!-- 创建时间 -->
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        align="center"
+        width="200"
+      >
         <template slot-scope="scope">
           {{ scope.row.createTime | dateFormat }}
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页组件 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -100,28 +164,28 @@
       @pagination="renderData"
     />
 
+    <!-- 用户详情组件 -->
     <user-deatils-drawer
       v-if="userDeatilsDrawer"
       :user-id="thatSelectedUserId"
-      @close="userDeatilsDrawer=false"
+      @close="userDeatilsDrawer = false"
     />
-
   </div>
 </template>
 
 <script>
-import { userPropsTable } from '@/api/user'
+import { userPropsTable } from "@/api/user";
-import Pagination from '@/components/Pagination'
+import Pagination from "@/components/Pagination";
-import { pickerOptions } from '@/constant/el-const'
+import { pickerOptions } from "@/constant/el-const";
-import { propsOrigins } from '@/constant/type'
+import { propsOrigins } from "@/constant/type";
 export default {
-  name: 'UserPropsTable',
+  name: "UserPropsTable",
   components: { Pagination },
   data() {
     return {
       thatRow: {},
       userDeatilsDrawer: false,
-      thatSelectedUserId: '',
+      thatSelectedUserId: "",
       pickerOptions,
       propsOrigins,
       list: [],
@@ -130,15 +194,15 @@ export default {
       listQuery: {
         cursor: 1,
         limit: 20,
-        startCreateDate: '',
+        startTime: "",
-        endCreateDate: '',
+        endTime: "",
-        buyerAccount: '',
+        buyerAccount: "",
-        receiverAccount: '',
+        receiverAccount: "",
-        origin: ''
+        origin: ""
       },
       listLoading: true,
-      rangeDate: ''
+      rangeDate: ""
-    }
+    };
   },
   watch: {
     rangeDate: {
@@ -146,59 +210,68 @@ export default {
       deep: true,
       handler(newVal) {
         if (newVal && newVal.length > 0) {
-          this.listQuery.startCreateDate = newVal[0]
+          this.listQuery.startTime = newVal[0];
-          this.listQuery.endCreateDate = newVal[1]
+          this.listQuery.endTime = newVal[1];
-          return
+          return;
         }
-        this.listQuery.startCreateDate = ''
+        this.listQuery.startTime = "";
-        this.listQuery.endCreateDate = ''
+        this.listQuery.endTime = "";
       }
     }
   },
   created() {
-    this.renderData(true)
+    this.renderData(true);
   },
   methods: {
     handleImageUrl(row) {
-      return row.propsCover ? row.propsCover : ''
+      return row.propsCover ? row.propsCover : "";
     },
     renderData(isReset) {
-      const that = this
+      const that = this;
       if (isReset === true) {
-        that.listQuery.cursor = 1
+        that.listQuery.cursor = 1;
       }
-      that.listLoading = true
+      that.listLoading = true;
       userPropsTable(that.listQuery).then(res => {
-        const { body } = res
+        const { body } = res;
-        that.total = body.total || 0
+        that.total = body.total || 0;
-        that.list = body.records
+        that.list = body.records;
-        that.listLoading = false
+        that.listLoading = false;
-      })
+      });
     },
     queryUserDetails(userId) {
-      this.userDeatilsDrawer = true
+      this.userDeatilsDrawer = true;
-      this.thatSelectedUserId = userId
+      this.thatSelectedUserId = userId;
     },
     handleSearch() {
-      if (this.listQuery.origin !== '') {
+      if (this.listQuery.origin !== "") {
-        const origins = this.propsOrigins.filter(this.createFilter(this.listQuery.origin))
+        const origins = this.propsOrigins.filter(
-        this.listQuery.origin = origins.length > 0 ? origins[0].value : this.listQuery.origin
+          this.createFilter(this.listQuery.origin)
+        );
+        this.listQuery.origin =
+          origins.length > 0 ? origins[0].value : this.listQuery.origin;
       }
-      this.renderData(true)
+      this.renderData(true);
     },
     querySearch(queryString, cb) {
-      var restaurants = this.propsOrigins
+      var restaurants = this.propsOrigins;
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      var results = queryString
-      cb(results)
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants;
+      cb(results);
     },
     handleSelect(item) {
-      this.renderData(true)
+      this.renderData(true);
     },
     createFilter(queryString) {
-      return (restaurant) => {
+      return restaurant => {
-        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0) || (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
+        return (
-      }
+          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >=
+            0 ||
+          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+        );
+      };
     }
   }
-}
+};
 </script>