搜索控件，订单状态selection控件，退款状态selection控件，日期分为控件；

订单列表页ui,订单详情页
2023-11-07 21:22:37 +08:00 · 2023-11-07 21:22:37 +08:00 · de49b35640
commit de49b35640
parent 200094ebd6
7 changed files with 330 additions and 18 deletions
--- a/src/components/DatePickerOrder.vue
+++ b/src/components/DatePickerOrder.vue
@ -0,0 +1,71 @@
+<template>
+  <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
+    start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+  </el-date-picker>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '今天',
+            onClick (picker) {
+              // 设置日期范围为今天
+              const end = new Date()
+              const start = new Date()
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '上月',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setMonth(end.getMonth() - 1)
+              start.setDate(1)
+              end.setDate(0)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近一周',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近一个月',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近三个月',
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      },
+      value1: '',
+      value2: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-date-editor .el-range__close-icon {
+  display: block !important;
+}
+</style>
--- a/src/components/SelectionOrderBack.vue
+++ b/src/components/SelectionOrderBack.vue
@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-360px" v-model="value" multiple placeholder="退款状态：请选择，可多选">
+  <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>
@ -11,10 +11,10 @@ export default {
    return {
      options: [{
        value: 'normal',
-        label: '无申请'
+        label: '从未申请'
      }, {
        value: 'requested',
-        label: '申请退款'
+        label: '申请退款中'
      }, {
        value: 'refunded',
        label: '已退款'
--- a/src/components/SelectionOrderStatus.vue
+++ b/src/components/SelectionOrderStatus.vue
@ -1,5 +1,5 @@
 <template>
-  <el-select class="w-500px" v-model="value" multiple placeholder="订单状态：请选择，可多选">
+  <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>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -417,6 +417,17 @@ const routes = [
          roles: ['admin', 'editor'],
          tapName: 'admin'
        }
+      },
+      {
+        path: '/order/show:id',
+        component: () => import('@/views/layout/components/main/order/show'),
+        meta: {
+          title: '订单详情',
+          icon: 'iconfont icon-a-SalesOrderManagement',
+          roles: ['admin', 'editor'],
+          tapName: 'admin',
+          hidden: true
+        }
      }
    ]
  },
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -246,7 +246,7 @@ $mark: (
    $val: $i * 10;

    .#{nth($item,1)}-#{$val} {
-      #{nth($item,2)}: #{$val}#{$mark};
+      #{nth($item,2)}: #{$val}#{$mark} !important;
    }
  }
 }
@ -262,7 +262,7 @@ $type: (
    $val: $i*10;

    .#{nth($item,1)}-#{$val}px {
-      #{nth($item,2)}: #{$val}px;
+      #{nth($item,2)}: #{$val}px !important;
    }
  }
 }
--- a/src/views/layout/components/main/order/index.vue
+++ b/src/views/layout/components/main/order/index.vue
@ -1,13 +1,32 @@
 <template>
  <div class="app-container">
    <!-- 用户select选项 -->
-    <el-button-group class="m-b-15">
-      <SelectionOrderStatus class="m-r-20" />
-      <SelectionOrderBack />
-    </el-button-group>
-    <el-button-group class="m-r-20">
-      <SelectionShopId v-model="form.shop_id" :allSel="true" />
-    </el-button-group>
+    <el-row :gutter="15" class="m-t-0">
+      <el-col :span="4">
+        <SelectionShopId class="w-100" v-model="form.shop_id" :allSel="true" />
+      </el-col>
+      <el-col :span="8">
+        <DatePickerOrder class="w-100" />
+      </el-col>
+      <el-col :span="12">
+        <el-input placeholder="请输入内容" v-model="input3" class="w-100">
+          <el-select v-model="select" slot="prepend" placeholder="请选择" class="w-120px">
+            <el-option label="餐厅名" value="1"></el-option>
+            <el-option label="订单号" value="2"></el-option>
+            <el-option label="用户电话" value="3"></el-option>
+          </el-select>
+          <el-button slot="append" icon="el-icon-search"></el-button>
+        </el-input>
+      </el-col>
+    </el-row>
+    <el-row :gutter="15">
+      <el-col :span="14">
+        <SelectionOrderStatus />
+      </el-col>
+      <el-col :span="10">
+        <SelectionOrderBack />
+      </el-col>
+    </el-row>
    <!-- 订单列表 -->
    <el-table class="m-t-20 w-100" ref="myTable"
      :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
@ -24,12 +43,13 @@
          {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
-      <el-table-column prop="controler" label="操作" width="200" min-width="200">
+      <el-table-column prop="controler" label="操作" width="290" min-width="290">
        <template slot-scope="scope">
          <el-button-group>
-            <el-button type="warning" icon="el-icon-edit"
-              @click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
-            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
+            <el-button type="warning" icon="el-icon-edit">同意退款</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">拒绝退款</el-button>
+            <el-button type="primary" icon="el-icon-search"
+              @click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
          </el-button-group>
        </template>
      </el-table-column>
@ -47,6 +67,7 @@ import { countSelIdArr, parseTime } from '@/utils'
 import SelectionShopId from '@/components/SelectionShopId'
 import SelectionOrderStatus from '@/components/SelectionOrderStatus'
 import SelectionOrderBack from '@/components/SelectionOrderBack'
+import DatePickerOrder from '@/components/DatePickerOrder'

 export default {
  name: 'Order',
@ -62,7 +83,8 @@ export default {
  components: {
    SelectionShopId,
    SelectionOrderStatus,
-    SelectionOrderBack
+    SelectionOrderBack,
+    DatePickerOrder
  },
  computed: {
    // 获取订单列表
--- a/src/views/layout/components/main/order/show.vue
+++ b/src/views/layout/components/main/order/show.vue
@ -0,0 +1,208 @@
+<template>
+  <div class="app-container">
+    <el-row class="m-t-0">
+      <el-col :span="24">
+        <el-container>
+          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+            <div class="l">
+              <i v-if="pageState === 'add'" class="iconfont el-icon-plus f-s-20"></i>
+              <i v-else class="iconfont el-icon-edit f-s-20"></i>
+              <font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
+            </div>
+          </el-header>
+          <el-main class="border p-20">
+            <el-form ref="form" :model="form" label-width="120px">
+              <el-form-item v-if="pageState === 'add'" label="所属商铺">
+                <SelectionShopId v-model="form.shop_id" />
+              </el-form-item>
+              <el-form-item label="账号">
+                <el-input v-model="form.name" placeholder="账号" :disabled="adminId == undefined ? false : true" />
+              </el-form-item>
+              <el-form-item label="昵称">
+                <el-input v-model="form.uname" placeholder="用户昵称" />
+              </el-form-item>
+              <el-form-item label="头像">
+                <el-upload class="avatar-uploader" drag name="file" :action="action" :headers="myheader"
+                  :show-file-list="false" :on-success="handleUpSuccess" :on-error="handleUpErr"
+                  :before-upload="beforeAvatarUpload">
+                  <img v-if="form.upFile != ''"
+                    :src="$store.state.settings.host + '/Data/UploadFiles/temp/' + form.upFile" class="avatar" />
+                  <img v-else-if="form.oldFile != '' && form.upFile == ''"
+                    :src="$store.state.settings.host + '/Data/UploadFiles/photo/' + 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>
+                  </template>
+                </el-upload>
+              </el-form-item>
+              <el-form-item :label="adminId == undefined ? '初始密码' : '新密码'">
+                <el-input show-password v-model="form.pwd" :placeholder="adminId == undefined ? '密码' : '空置则为保持原密码'" />
+              </el-form-item>
+              <el-form-item v-if="pageState == 'add' ? true : false">
+                <el-button type="primary" icon="el-icon-plus" @click="addAdmin">创建</el-button>
+                <el-button @click="setForm({ shop_id: form.shop_id, oldFile: '' }); form.upFile = ''"
+                  class="iconfont icon-qingchu">
+                  <font class="m-l-5">重填</font>
+                </el-button>
+              </el-form-item>
+              <el-form-item v-else>
+                <el-button type="primary" icon="el-icon-edit" @click="saveAdmin">更新</el-button>
+              </el-form-item>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SelectionShopId from '@/components/SelectionShopId'
+
+export default {
+  name: 'AdminAdd',
+  data () {
+    return {
+      action: this.$store.state.settings.baseURL + this.$store.state.settings.apiAdminPath + 'upImgFile',
+      myheader: { token: this.$store.state.user.token },
+      form: {
+        shop_id: '',
+        name: '',
+        uname: '',
+        upFile: '',
+        oldFile: '',
+        pwd: ''
+      },
+      adminId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
+      pageState: 'add', // 页面状态
+      admin: null
+    }
+  },
+  components: {
+    SelectionShopId
+  },
+  computed: {
+    /**
+     * @description: 获取管理员列表
+     */
+    adminList () {
+      return this.$store.state.adminList
+    }
+  },
+  methods: {
+    /* 文件上传表单 */
+    handleUpSuccess (res) {
+      if (res.status === 0) {
+        this.$message.error(res.msg)
+      } else {
+        this.form.upFile = res.data
+        this.$message.success(res.msg)
+      }
+    },
+    beforeAvatarUpload (file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
+      if (!isJPG) {
+        this.$message.error('上传图片只能是JPG|PNG|GIF格式!')
+      }
+      return isJPG
+    },
+    handleUpErr () {
+      this.$message.error('接口访问失败')
+    },
+    // 设置表单
+    setForm (data) {
+      this.form.shop_id = data.shop_id
+      this.form.name = data.name
+      this.form.uname = data.uname
+      this.form.oldFile = data.oldFile
+      if (Object.keys(data).length === 0) {
+        this.$message.warning('清空表单')
+      }
+    },
+    // 初始化页面 添加or编辑
+    initPage () {
+      if (this.adminId === undefined) {
+        this.pageState = 'add'
+      } else {
+        this.pageState = 'edit'
+        this.admin = this.adminList.find((item) => item.id === this.adminId)
+        if (this.admin) {
+          const data = {
+            name: this.admin.name,
+            uname: this.admin.uname,
+            oldFile: this.admin.photo,
+            shop_id: this.admin.shop_id
+          }
+          this.setForm(data)
+        }
+      }
+    },
+    /**
+     * @description: 创建新账号
+     */
+    async addAdmin () {
+      const res = await this.$store.dispatch('fetchAddAdmin', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/admin/index')
+      }
+    },
+    /**
+     * @description: 更新账号
+     */
+    async saveAdmin () {
+      this.form.id = this.adminId
+      const res = await this.$store.dispatch('fetchSaveAdmin', this.form)
+      if (res.data.status === 1) {
+        this.$router.push('/admin/index')
+      }
+    }
+  },
+  watch: {
+    adminList () {
+      this.initPage()// 初始化页面
+    }
+  },
+  created () {
+    if (this.adminList.length > 0) {
+      this.initPage()// 初始化页面
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line {
+  text-align: center;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.el-upload__text {
+  line-height: 1.2em !important;
+}
+</style>