管理后台添加意见反馈页

litemall-admin/src/api/feedback.js

+import request from '@/utils/request'
+
+export function listFeedback(query) {
+  return request({
+    url: '/feedback/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function createFeedback(data) {
+  return request({
+    url: '/feedback/create',
+    method: 'post',
+    data
+  })
+}
+
+export function readFeedback(data) {
+  return request({
+    url: '/feedback/read',
+    method: 'get',
+    data
+  })
+}
+
+export function updateFeedback(data) {
+  return request({
+    url: '/feedback/update',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteFeedback(data) {
+  return request({
+    url: '/feedback/delete',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

litemall-admin/src/router/index.js

@@ -65,7 +65,8 @@ export const asyncRouterMap = [
       { path: 'address', component: _import('user/address'), name: 'address', meta: { title: '收货地址', noCache: true }},
       { path: 'collect', component: _import('user/collect'), name: 'collect', meta: { title: '会员收藏', noCache: true }},
       { path: 'footprint', component: _import('user/footprint'), name: 'footprint', meta: { title: '会员足迹', noCache: true }},
-      { path: 'history', component: _import('user/history'), name: 'history', meta: { title: '搜索历史', noCache: true }}
+      { path: 'history', component: _import('user/history'), name: 'history', meta: { title: '搜索历史', noCache: true }}，
+	  { path: 'feedback', component: _import('user/feedback'), name: 'feedback', meta: { title: '意见反馈', noCache: true }}
     ]
   },
 

litemall-admin/src/views/user/feedback.vue

+<template>
+  <div class="app-container calendar-list-container">
+
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入用户名" v-model="listQuery.username">
+      </el-input>
+      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入反馈ID" v-model="listQuery.id">
+      </el-input>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload" :loading="downloadLoading">导出</el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+
+      <el-table-column align="center" label="反馈ID" prop="id">
+      </el-table-column>
+
+      <el-table-column align="center" label="用户名" prop="username">
+      </el-table-column>
+
+      <el-table-column align="center" label="手机号码" prop="mobile">
+      </el-table-column>
+
+      <el-table-column align="center" label="反馈类型" prop="feedType">
+      </el-table-column>
+
+      <el-table-column align="center" label="反馈内容" prop="content">
+      </el-table-column>      
+
+      <el-table-column align="center" label="反馈图片" prop="picUrls">
+        <template slot-scope="scope">
+          <img v-for="item in scope.row.picUrls" :key="item" :src="item" width="40"/>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="时间" prop="addTime">
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+        :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+     
+        <el-form-item label="反馈ID" prop="id">
+          <el-input v-model="dataForm.id"></el-input>
+        </el-form-item>
+
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="dataForm.username"></el-input>
+        </el-form-item>
+
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input v-model="dataForm.mobile" type="textarea" :rows="1"></el-input>
+        </el-form-item>        
+
+        <el-form-item label="反馈类型" prop="feedType">
+          <el-input v-model="dataForm.feedType" type="textarea" :rows="4"></el-input>
+        </el-form-item>   
+
+        <el-form-item label="反馈内容" prop="content">
+          <el-input v-model="dataForm.content" type="textarea" :rows="4"></el-input>
+        </el-form-item>
+        <el-form-item label="反馈时间" prop="addTime">
+          <el-date-picker v-model="dataForm.addTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="反馈图片" prop="picUrls">
+          <!-- <el-input v-model="dataForm.picUrls"></el-input>           -->
+          <el-upload action="#" list-type="picture" :headers="headers" :show-file-list="false" :limit="5" :http-request="uploadPicUrls">
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
+        <el-button v-else type="primary" @click="updateData">确定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<style>
+  .demo-table-expand {
+    font-size: 0;
+  }
+  .demo-table-expand label {
+    width: 200px;
+    color: #99a9bf;
+  }
+  .demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+</style>
+
+<script>
+import { listFeedback, createFeedback, updateFeedback, deleteFeedback } from '@/api/Feedback'
+import { createStorage } from '@/api/storage'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'Feedback',
+  computed: {
+    headers() {
+      return {
+        'Admin-Token': getToken()
+      }
+    }
+  },
+  data() {
+    return {
+      list: undefined,
+      total: undefined,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        username: undefined,
+        sort: 'add_time',
+        order: 'desc'
+      },
+      dataForm: {
+        id: undefined,
+        username: undefined,
+        mobile: undefined,
+        feedType: undefined,
+        content: undefined,
+        hasPicture: false,
+        picUrls: []
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      rules: {
+        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+        // valueId: [{ required: true, message: '反馈ID不能为空', trigger: 'blur' }],
+        content: [{ required: true, message: '反馈内容不能为空', trigger: 'blur' }]
+      },
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      listFeedback(this.listQuery).then(response => {
+        this.list = response.data.data.items
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch(() => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    },
+    resetForm() {
+      this.dataForm = {
+        id: undefined,
+        username: undefined,
+        mobile: undefined,
+        feedType: undefined,
+        content: undefined,
+        picUrls: []
+      }
+    },
+    handleCreate() {
+      this.resetForm()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    uploadPicUrls(item) {
+      const formData = new FormData()
+      formData.append('file', item.file)
+      createStorage(formData).then(res => {
+        this.dataForm.picUrls.push(res.data.data.url)
+        this.dataForm.hasPicture = true
+      }).catch(() => {
+        this.$message.error('上传失败，请重新上传')
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createFeedback(this.dataForm).then(response => {
+            this.list.unshift(response.data.data)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '创建成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.dataForm = Object.assign({}, row)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateFeedback(this.dataForm).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.dataForm.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.dataForm)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      deleteFeedback(row).then(response => {
+        this.$notify({
+          title: '成功',
+          message: '删除成功',
+          type: 'success',
+          duration: 2000
+        })
+        const index = this.list.indexOf(row)
+        this.list.splice(index, 1)
+      })
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['反馈ID', '用户名称', '反馈内容', '反馈图片列表', '反馈时间']
+        const filterVal = ['id', 'username', 'content', 'picUrls', 'addTime']
+        excel.export_json_to_excel2(tHeader, this.list, filterVal, '意见反馈信息')
+        this.downloadLoading = false
+      })
+    }
+  }
+}
+</script>