update

.env

@@ -1,2 +1,3 @@
 VUE_APP_AXIOS_BASE_URL = ''
-VUE_APP_ROUTER="/www"
+VUE_APP_ROUTER="/www"
+VUE_APP_LIMIT = 10

src/components/data-table.vue

@@ -3,7 +3,7 @@
     <el-form :model="searchInfo" :inline="true" style="padding:0.9rem 1.875rem ;" size="mini" v-if="useFilter">
       <el-form-item v-for="(item, index) in filterList" :key="index">
         <template v-if="item.filter === 'select'">
-          <el-select v-model="searchInfo[item.prop]" size="mini" clearable filterable :placeholder="`请选择${item.label}`">
+          <el-select v-model="searchInfo[item.prop]" size="mini" clearable filterable :placeholder="`请选择${item.label}`" @clear="toClear(item.prop)">
             <slot name="options" v-bind="{ item }"></slot>
           </el-select>
         </template>
@@ -21,7 +21,7 @@
           </el-date-picker>
         </template>
         <template v-else>
-          <el-input v-model="searchInfo[item.prop]" clearable size="mini" :placeholder="`请输入${item.label}`"></el-input>
+          <el-input v-model="searchInfo[item.prop]" clearable size="mini" :placeholder="`请输入${item.label}`" @clear="toClear(item.prop)"></el-input>
         </template>
       </el-form-item>
       <el-form-item>
@@ -241,6 +241,9 @@ export default {
     rowClick(row, column, event) {
       this.$emit(`rowClick`, row);
     },
+    toClear(prop) {
+      delete this.searchInfo[prop];
+    },
   },
   watch: {
     selected: {

src/layout/layout-part/menus.vue

@@ -34,6 +34,7 @@
       <el-menu-item index="/links/index"> <i class="el-icon-attract"></i>友情链接管理</el-menu-item>
       <!-- <el-menu-item index="/supermaket/chanpinType"> <i class="el-icon-s-grid"></i>产品类型字典表</el-menu-item> -->
       <el-menu-item index="/dictionary"> <i class="el-icon-attract"></i>平台字典管理</el-menu-item>
+      <el-menu-item index="/present"> <i class="el-icon-attract"></i>礼物管理</el-menu-item>
     </el-menu>
   </div>
 </template>

src/router/index.js

@@ -174,5 +174,10 @@ export default new Router({
       meta: { title: '字典管理' },
       component: () => import('../views/dictionary/index.vue'),
     },
+    {
+      path: '/present',
+      meta: { title: '礼物管理' },
+      component: () => import('../views/present/index.vue'),
+    },
   ],
 });

src/store/index.js

@@ -20,6 +20,7 @@ import dictionary from './dictionary';
 import protype from './protype';
 
 import marketproject from './marketproject';
+import present from './present';
 
 import users from './user';
 import codeCategory from './code-category';
@@ -51,6 +52,7 @@ export default new Vuex.Store({
     codeCategory,
     codeItem,
     marketproject,
+    present,
   },
   state: { ...ustate },
   mutations: { ...umutations },

src/store/present.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/live/present`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+    const res = await this.$axios.$get(api.interface, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.interface}/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/present/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="topTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="search" style="text-align:right">
+          <el-button size="mini" type="primary" @click="toAdd" icon="el-icon-plus">添加礼物</el-button>
+        </el-col>
+        <el-col :span="24" class="main">
+          <!-- <mainData :tableData="tableData" :total="total" @delete="deleteData"></mainData> -->
+          <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :total="total" @query="search"></data-table>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-drawer title=";礼物信息" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
+      <data-form :fields="fields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew"></data-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import dataForm from '@/components/form.vue';
+import dataTable from '@/components/data-table.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: present } = createNamespacedHelpers('present');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    dataTable,
+    dataForm,
+  },
+  data: () => ({
+    drawer: false,
+    form: {},
+    drawerIsNew: true,
+    topTitle: '礼物管理',
+    opera: [
+      {
+        label: '编辑',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+    fields: [
+      { label: '礼物', prop: 'name', model: 'name', filter: 'input' },
+      { label: '金额', prop: 'price', model: 'price' },
+    ],
+    list: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
+  computed: {},
+  methods: {
+    ...present(['query', 'delete', 'update', 'create']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    toAdd() {
+      this.drawer = true;
+    },
+    toEdit({ data }) {
+      this.$set(this, 'form', data);
+      this.drawer = true;
+      this.drawerIsNew = false;
+    },
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        res = await this.create(data);
+        msg = '礼物创建成功';
+      } else {
+        res = await this.update(data);
+        msg = '礼物修改成功';
+      }
+      if (this.$checkRes(res, msg, res.errmsg)) {
+        this.handleClose();
+        this.search();
+      }
+    },
+    handleClose() {
+      this.drawer = false;
+      this.form = {};
+      this.drawerIsNew = true;
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: #f5f5f5;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+}
+.main {
+  width: 97%;
+  margin: 0 15px;
+}
+</style>