From 45c0e8b645bc6bb5d3403843cd642e44ddb8d5dd Mon Sep 17 00:00:00 2001
From: szdot <szdot@live.com>
Date: Fri, 10 Nov 2023 16:52:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DatePickerOrder.vue            | 16 ++--
 src/components/SearchOrder.vue                |  5 +-
 src/components/SelectionOrderBack.vue         |  4 +-
 src/components/SelectionOrderStatus.vue       |  4 +-
 src/components/SelectionPath.vue              |  4 +-
 src/components/SerchOrder.vue                 | 39 --------
 src/store/index.js                            |  1 +
 src/store/modules/app.js                      | 26 +++++-
 .../layout/components/main/category/index.vue | 12 +--
 .../layout/components/main/order/index.vue    | 90 +++++++------------
 .../components/main/product/spu/add.vue       |  2 +-
 src/views/login.vue                           |  4 +-
 12 files changed, 84 insertions(+), 123 deletions(-)
 delete mode 100644 src/components/SerchOrder.vue

diff --git a/src/components/DatePickerOrder.vue b/src/components/DatePickerOrder.vue
index 25bdbe7..f469ffc 100644
--- a/src/components/DatePickerOrder.vue
+++ b/src/components/DatePickerOrder.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
+  <el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"
     start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss">
   </el-date-picker>
 </template>
@@ -7,6 +7,9 @@
 <script>
 export default {
   data () {
+    const orderSearch = this.$store.getters['app/getOrderSerch']
+    const startTimestamp = orderSearch.start_time
+    const endTimestamp = orderSearch.end_time
     return {
       pickerOptions: {
         shortcuts: [
@@ -79,21 +82,22 @@ export default {
           }
         ]
       },
-      value1: '',
-      value2: ''
+      value: [startTimestamp, endTimestamp]
     }
   },
   watch: {
-    value2 (newVal) {
+    value (newVal) {
       if (newVal && newVal.length === 2) {
         const end = newVal[1]
         end.setHours(23, 59, 59, 999) // 设置结束日期为当天的23:59:59
         const startTimestamp = Math.floor(newVal[0].getTime() / 1000) // 转换毫秒为秒
         const endTimestamp = Math.floor(end.getTime() / 1000) // 转换毫秒为秒
-        this.$emit('dateRangepicked', { start: startTimestamp, end: endTimestamp })
+        this.$store.commit('app/setOrderSerch', { start_time: startTimestamp })
+        this.$store.commit('app/setOrderSerch', { end_time: endTimestamp })
       }
       if (newVal === null) {
-        this.$emit('dateRangepicked', { start: '', end: '' })
+        this.$store.commit('app/setOrderSerch', { start_time: '' })
+        this.$store.commit('app/setOrderSerch', { end_time: '' })
       }
     }
   }
diff --git a/src/components/SearchOrder.vue b/src/components/SearchOrder.vue
index 4a3ca33..ab916e7 100644
--- a/src/components/SearchOrder.vue
+++ b/src/components/SearchOrder.vue
@@ -14,16 +14,15 @@
 export default {
   data () {
     return {
-      value: ['orderId', '']
+      value: this.$store.getters['app/getOrderSerch'].search
     }
   },
   watch: {
     value (val) {
-      this.$emit('input', val)
+      this.$store.commit('app/setOrderSerch', { search: val })
     }
   },
   created () {
-    this.$emit('input', this.value)
   }
 }
 </script>
diff --git a/src/components/SelectionOrderBack.vue b/src/components/SelectionOrderBack.vue
index b652d15..ba54d4d 100644
--- a/src/components/SelectionOrderBack.vue
+++ b/src/components/SelectionOrderBack.vue
@@ -25,12 +25,12 @@ export default {
         value: 'actively',
         label: '商家发起退款'
       }],
-      value: []
+      value: this.$store.getters['app/getOrderSerch'].back
     }
   },
   watch: {
     value (val) {
-      this.$emit('selectedValuesChanged', val)
+      this.$store.commit('app/setOrderSerch', { back: val })
     }
   }
 }
diff --git a/src/components/SelectionOrderStatus.vue b/src/components/SelectionOrderStatus.vue
index 519863e..e46547b 100644
--- a/src/components/SelectionOrderStatus.vue
+++ b/src/components/SelectionOrderStatus.vue
@@ -28,12 +28,12 @@ export default {
         value: 'closed',
         label: '交易关闭'
       }],
-      value: []
+      value: this.$store.getters['app/getOrderSerch'].status
     }
   },
   watch: {
     value (val) {
-      this.$emit('selectedValuesChanged', val)
+      this.$store.commit('app/setOrderSerch', { status: val })
     }
   }
 }
diff --git a/src/components/SelectionPath.vue b/src/components/SelectionPath.vue
index 7d3f43a..6572839 100644
--- a/src/components/SelectionPath.vue
+++ b/src/components/SelectionPath.vue
@@ -5,8 +5,8 @@
       <span class="m-l-15">所有分类</span>
     </el-option>
     <el-option v-for="item in categoryListArr" :key="item.id" :label="item.name" :value="item.path">
-      <el-avatar v-if="item.bz_1 != ''" class="vm" shape="square" :size="25"
-        :src="$store.state.settings.host + '/Data/UploadFiles/category/' + item.bz_1">
+      <el-avatar v-if="item.photo != ''" class="vm" shape="square" :size="25"
+        :src="$store.state.settings.host + '/Data/UploadFiles/category/' + item.photo">
       </el-avatar>
       <el-avatar v-else :size="25" class="vm" shape="square" icon="iconfont icon-tuxiang"></el-avatar>
       <span v-for="element in item.pathLen" :key="element" class="m-l-30"></span>
diff --git a/src/components/SerchOrder.vue b/src/components/SerchOrder.vue
deleted file mode 100644
index e9bfcca..0000000
--- a/src/components/SerchOrder.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-select class="w-100" v-model="value" multiple placeholder="退款状态过滤：空置为不过滤（显示全部订单），可多选条件">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-    </el-option>
-  </el-select>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      options: [{
-        value: 'normal',
-        label: '从未申请'
-      }, {
-        value: 'requested',
-        label: '申请退款中'
-      }, {
-        value: 'refunded',
-        label: '已退款'
-      }, {
-        value: 'rejected',
-        label: '拒绝退款'
-      }, {
-        value: 'actively',
-        label: '商家发起退款'
-      }],
-      value: []
-    }
-  },
-  watch: {
-    value (val) {
-      this.$emit('selectedValuesChanged', val)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/store/index.js b/src/store/index.js
index 7dfca44..5d997fe 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,6 +6,7 @@ import user from './modules/user'
 import api from '@/utils/api'
 import { Message, MessageBox } from 'element-ui'
 
+// 把vuex作为插件引入到Vue示例中 ps:注册
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 1ea3db4..990519a 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -3,7 +3,8 @@ const state = {
   isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
   isMobile: null, // 是否是pc端 true电脑端 false为移动端
   defaultLngLat: null, // 地图默认经纬度
-  defaultZoom: null // 地图默认缩放
+  defaultZoom: null, // 地图默认缩放
+  orderSerch: null// 订单列表页搜索条件
 }
 
 const mutations = {
@@ -38,6 +39,16 @@ const mutations = {
   setDefaultZoom (state, zoom) {
     state.defaultZoom = zoom
     localStorage.setItem('defaultZoom', zoom)
+  },
+  // 设置订单页面搜索默认值
+  setOrderSerch (state, partialSerchObj) {
+    state.orderSerch = state.orderSerch || {} // 设置默认值
+
+    // 深层合并传递的部分对象到当前的 state.orderSerch
+    state.orderSerch = { ...state.orderSerch, ...partialSerchObj }
+
+    // 存储到 localStorage
+    localStorage.setItem('orderSerch', JSON.stringify(state.orderSerch))
   }
 }
 
@@ -51,6 +62,19 @@ const getters = {
   // 获取地图默认缩放值 缓存中没有从 localStorage中获取 也没有设置为1
   getDefaultZoom () {
     return state.defaultZoom !== null ? state.defaultZoom : localStorage.getItem('defaultZoom') !== null ? localStorage.getItem('defaultZoom') : 1
+  },
+  // 获取订单页面搜索条件
+  getOrderSerch (state) {
+    const defaultValues = {
+      start_time: '', // 搜索条件 起始时间
+      end_time: '', // 搜索条件 结束时间
+      status: [], // 搜索条件 订单状态
+      back: [], // 搜索条件 退款状态
+      search: ['orderId', '']// 搜索条件 搜索
+    }
+    // 深层合并 state.orderSerch 和默认值 取值得时候对象里面如果有得属性 会被保留 没有得会用defaultValues的属性进行填充
+    // 缓存中没有 从本地拿 本地也没有  给一个默认空对象
+    return { ...defaultValues, ...state.orderSerch } || JSON.parse(localStorage.getItem('orderSerch')) || defaultValues
   }
 }
 
diff --git a/src/views/layout/components/main/category/index.vue b/src/views/layout/components/main/category/index.vue
index cdd51f0..326a40a 100644
--- a/src/views/layout/components/main/category/index.vue
+++ b/src/views/layout/components/main/category/index.vue
@@ -17,7 +17,7 @@
             </el-button-group>
             <!-- 分类树 -->
             <div>
-              <el-button type="text" @click="openWin('添加根分类', { id: 0, path: '', bz_1: '' })">
+              <el-button type="text" @click="openWin('添加根分类', { id: 0, path: '', photo: '' })">
                 添加根分类
               </el-button>
             </div>
@@ -26,7 +26,7 @@
                 <span :class="data.show == 0 ? 'hideColor' : ''">{{ data.name }}</span>
                 <span>
                   <el-button type="text" @click.stop=""
-                    @click="openWin(`${data.name} : 添加子分类`, { id: data.id, path: data.path, bz_1: '' })">
+                    @click="openWin(`${data.name} : 添加子分类`, { id: data.id, path: data.path, photo: '' })">
                     添加子分类
                   </el-button>
                   <el-button type="text" class="textEditBut" @click.stop="" @click="openWin(`${data.name} : 编辑`, data)">
@@ -77,7 +77,7 @@
                     :src="$store.state.settings.host + '/Data/UploadFiles/category/' + form.oldFile" class="avatar" />
                   <template v-else>
                     <i class="el-icon-plus f-s-30 m-t-70 seatFontColor"></i>
-                    <div class="el-upload__text"><em>建议100*100像素 <br> jpg png gif </em></div>
+                    <div class="el-upload__text"><em>建议40*40像素 <br>svg jpg png gif </em></div>
                   </template>
                 </el-upload>
               </el-form-item>
@@ -177,9 +177,9 @@ export default {
       }
     },
     beforeAvatarUpload (file) {
-      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/svg+xml'
       if (!isJPG) {
-        this.$message.error('上传图片只能是JPG|PNG|GIF格式!')
+        this.$message.error('上传图片只能是SVG|JPG|PNG|GIF格式!')
       }
       return isJPG
     },
@@ -198,7 +198,7 @@ export default {
       this.form.sort = data.sort
       this.form.show = data.show === '1'
       this.form.desc = data.desc
-      this.form.oldFile = data.bz_1
+      this.form.oldFile = data.photo
       this.form.upFile = ''
       if (Object.keys(data).length === 0) {
         this.$message.warning('清空表单')
diff --git a/src/views/layout/components/main/order/index.vue b/src/views/layout/components/main/order/index.vue
index 0fa3429..e6796dd 100644
--- a/src/views/layout/components/main/order/index.vue
+++ b/src/views/layout/components/main/order/index.vue
@@ -5,19 +5,19 @@
       <el-col :span="4">
         <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
       </el-col>
-      <el-col :span="9">
-        <DatePickerOrder class="w-100" @dateRangepicked="handleDateRangePicked" />
+      <el-col :span="10">
+        <DatePickerOrder class="w-100" />
       </el-col>
-      <el-col :span="11">
-        <SearchOrder class="w-100" @input="handleSearchChange" />
+      <el-col :span="10">
+        <SearchOrder class="w-100" />
       </el-col>
     </el-row>
     <el-row :gutter="15">
       <el-col :span="13">
-        <SelectionOrderStatus @selectedValuesChanged="handleOrderStatusChange" />
+        <SelectionOrderStatus />
       </el-col>
       <el-col :span="11">
-        <SelectionOrderBack @selectedValuesChanged="handleOrderBackChange" />
+        <SelectionOrderBack />
       </el-col>
     </el-row>
     <!-- 订单列表 -->
@@ -36,7 +36,7 @@
           {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
         </template>
       </el-table-column>
-      <el-table-column prop="controler" label="操作" width="400" min-width="400">
+      <el-table-column prop="controler" label="操作" width="380" min-width="380">
         <template slot-scope="scope">
           <el-button-group>
             <el-button type="warning" icon="el-icon-edit">同意退款</el-button>
@@ -69,12 +69,7 @@ export default {
     return {
       pageSize: 50, // 每页显示记录条数
       currentPage: 1, // 当前页
-      shop_id: '', // 搜索条件 商铺id
-      start_time: '', // 搜索条件 起始时间
-      end_time: '', // 搜索条件 结束时间
-      status: [], // 搜索条件 订单状态
-      back: [], // 搜索条件 退款状态
-      search: [] // 搜索条件 搜索
+      shop_id: '' // 搜索条件 商铺id
     }
   },
   components: {
@@ -89,6 +84,10 @@ export default {
     orderList () {
       return this.$store.state.orderList
     },
+    // 获取搜索条件 对象(从缓存拿 缓存没有从本地拿 也没有 给对象的所有搜索属性空值)
+    orderSerch () {
+      return this.$store.getters['app/getOrderSerch']
+    },
     // 过滤订单列表组
     orderListArr () {
       if (this.orderList.length > 0) {
@@ -98,41 +97,41 @@ export default {
           filteredList = filteredList.filter(order => order.shop_id === this.shop_id)
         }
         // 过滤时间
-        if (this.start_time !== '' && this.end_time !== '') {
-          const startTime = parseInt(this.start_time)
-          const endTime = parseInt(this.end_time)
+        if (this.orderSerch.start_time !== '' && this.orderSerch.end_time !== '') {
+          const startTime = parseInt(this.orderSerch.start_time)
+          const endTime = parseInt(this.orderSerch.end_time)
           filteredList = filteredList.filter(order => {
             const orderTime = parseInt(order.addtime)
             return startTime < orderTime && orderTime < endTime
           })
         }
         // 过滤订单状态
-        if (this.status.length > 0) {
+        if (this.orderSerch.status.length > 0) {
           filteredList = filteredList.filter(order => {
             // 检查订单状态是否在this.status数组中
-            return this.status.includes(order.status)
+            return this.orderSerch.status.includes(order.status)
           })
         }
         // 过滤订单状态
-        if (this.back.length > 0) {
+        if (this.orderSerch.back.length > 0) {
           filteredList = filteredList.filter(order => {
             // 检查订单状态是否在this.status数组中
-            return this.back.includes(order.back)
+            return this.orderSerch.back.includes(order.back)
           })
         }
         // 搜索条件过滤
-        if (this.search[1] !== '') {
+        if (this.orderSerch.search[1] !== '') {
           filteredList = filteredList.filter(order => {
-            if (this.search[0] === 'orderId') {
-              return order.order_sn.indexOf(this.search[1]) >= 0
-            } else if (this.search[0] === 'name') {
-              return order.receiver.indexOf(this.search[1]) >= 0
-            } else if (this.search[0] === 'tel') {
-              return order.tel.indexOf(this.search[1]) >= 0
-            } else if (this.search[0] === 'remark') {
-              return order.remark.indexOf(this.search[1]) >= 0
-            } else if (this.search[0] === 'desc') {
-              return order.describe.indexOf(this.search[1]) >= 0
+            if (this.orderSerch.search[0] === 'orderId') {
+              return order.order_sn.indexOf(this.orderSerch.search[1]) >= 0
+            } else if (this.orderSerch.search[0] === 'name') {
+              return order.receiver.indexOf(this.orderSerch.search[1]) >= 0
+            } else if (this.orderSerch.search[0] === 'tel') {
+              return order.tel.indexOf(this.orderSerch.search[1]) >= 0
+            } else if (this.orderSerch.search[0] === 'remark') {
+              return order.remark.indexOf(this.orderSerch.search[1]) >= 0
+            } else if (this.orderSerch.search[0] === 'desc') {
+              return order.describe.indexOf(this.orderSerch.search[1]) >= 0
             }
           })
         }
@@ -141,36 +140,9 @@ export default {
         return []
       }
     }
-
   },
   methods: {
-    countSelIdArr,
-    /**
-     * @description: 日期组件绑定事件
-     */
-    handleDateRangePicked (dateRange) {
-      // 在这里处理从日期选择器组件传递过来的时间戳数据
-      this.start_time = dateRange.start
-      this.end_time = dateRange.end
-    },
-    /**
-     * @description: 订单状态选择组件绑定事件
-     */
-    handleOrderStatusChange (val) {
-      this.status = val
-    },
-    /**
-     * @description: 退货选择组件绑定事件
-     */
-    handleOrderBackChange (val) {
-      this.back = val
-    },
-    /**
-     * @description: 搜索组件绑定事件
-     */
-    handleSearchChange (val) {
-      this.search = val
-    }
+    countSelIdArr
   },
   watch: {
   },
diff --git a/src/views/layout/components/main/product/spu/add.vue b/src/views/layout/components/main/product/spu/add.vue
index f8ebed1..08b37dd 100644
--- a/src/views/layout/components/main/product/spu/add.vue
+++ b/src/views/layout/components/main/product/spu/add.vue
@@ -60,7 +60,7 @@
                     :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + form.oldFile" class="avatar" />
                   <template v-else>
                     <i class="el-icon-plus f-s-30 m-t-70 seatFontColor"></i>
-                    <div class="el-upload__text"><em>建议400*400像素 <br> jpg png </em></div>
+                    <div class="el-upload__text"><em>建议288*216像素 <br> jpg png </em></div>
                   </template>
                 </el-upload>
               </el-form-item>
diff --git a/src/views/login.vue b/src/views/login.vue
index 0699063..34967bb 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -9,7 +9,7 @@
       <h3 class="f-s-30 m-b-15 fc">Authorize</h3>
       <el-form-item prop="username">
         <span class="svg-container"><i class="iconfont icon-yonghuziliao f-s-24"></i></span>
-        <el-input ref="username" v-model="loginForm.username" placeholder="用户" name="username" type="text" tabindex="1"
+        <el-input ref="username" class="usernameBox" v-model="loginForm.username" placeholder="用户" name="username" type="text" tabindex="1"
           auto-complete="on" />
       </el-form-item>
       <el-form-item prop="password">
@@ -115,7 +115,7 @@ $cursor: #fff;
 <style lang="scss" scoped>
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
-$light_gray: #eee;
+$light_gray: #efefef;
 
 h3 {
   color: $light_gray;