update

src/components/usual/c-btnbar.vue

@@ -3,8 +3,7 @@
     <el-row class="rows">
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
-          <el-button v-for="i in list" :key="i.method" :type="i.type ? i.type : 'primary'" plain size="mini" @click="toOpera(i)">{{ i.label }}</el-button>
-          <slot></slot>
+          <el-button v-for="i in fields" :key="i.method" :type="i.type ? i.type : 'primary'" plain size="mini" @click="toOpera(i)">{{ i.label }}</el-button>
         </el-col>
       </el-col>
     </el-row>
@@ -15,7 +14,7 @@
 export default {
   name: 'c-btnbar',
   props: {
-    list: { type: Array, default: () => [] },
+    fields: { type: Array, default: () => [] },
   },
   data: function () {
     return {};

src/components/usual/c-form.vue

@@ -1,101 +1,111 @@
 <template>
   <div id="c-form">
-    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" class="form" size="small" @submit.native.prevent>
-      <template v-for="(item, index) in fields">
-        <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
-          <template v-if="!item.custom">
-            <template v-if="item.type === `date` || item.type === `datetime`">
-              <el-date-picker
-                v-model="form[item.model]"
-                :type="item.type"
-                placeholder="请选择"
-                :format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
-                :value-format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
-                v-bind="item.options"
-                style="width: 100%"
-                @change="dataChange(item.model)"
-              >
-              </el-date-picker>
-            </template>
-            <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
-              <el-date-picker
-                v-model="form[item.model]"
-                :type="item.type"
-                placeholder="请选择"
-                :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-                :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
-                v-bind="item.options"
-                style="width: 100%"
-                @change="dataChange(item.model)"
-              >
-              </el-date-picker>
-            </template>
-            <template v-else-if="item.type === 'time'">
-              <el-time-picker
-                v-model="form[item.model]"
-                placeholder="请选择时间"
-                format="HH:mm"
-                value-format="HH:mm"
-                @change="dataChange(item.model)"
-              ></el-time-picker>
-            </template>
-            <template v-else-if="item.type === 'radio'">
-              <el-radio-group v-model="form[item.model]" size="mini" @change="dataChange(item.model)" v-bind="item.options">
+    <el-row type="flex" justify="space-around">
+      <el-col :span="span">
+        <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" class="form" size="small" @submit.native.prevent>
+          <template v-for="(item, index) in fields">
+            <el-form-item v-if="display(item)" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
+              <template v-if="!item.custom">
+                <template v-if="item.type === `date` || item.type === `datetime`">
+                  <el-date-picker
+                    v-model="form[item.model]"
+                    :type="item.type"
+                    placeholder="请选择"
+                    :format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
+                    :value-format="item.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'"
+                    v-bind="item.options"
+                    style="width: 100%"
+                    @change="dataChange(item.model)"
+                  >
+                  </el-date-picker>
+                </template>
+                <template v-else-if="item.type === `year` || item.type === `week` || item.type === `day`">
+                  <el-date-picker
+                    v-model="form[item.model]"
+                    :type="item.type"
+                    placeholder="请选择"
+                    :format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                    :value-format="`${item.type === 'year' ? 'yyyy' : item.type === 'week' ? 'MM' : 'dd'}`"
+                    v-bind="item.options"
+                    style="width: 100%"
+                    @change="dataChange(item.model)"
+                  >
+                  </el-date-picker>
+                </template>
+                <template v-else-if="item.type === 'time'">
+                  <el-time-picker
+                    v-model="form[item.model]"
+                    placeholder="请选择时间"
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    @change="dataChange(item.model)"
+                  ></el-time-picker>
+                </template>
+                <template v-else-if="item.type === 'radio'">
+                  <el-radio-group v-model="form[item.model]" size="mini" @change="dataChange(item.model)" v-bind="item.options">
+                    <slot :name="item.model" v-bind="{ item }"></slot>
+                  </el-radio-group>
+                </template>
+                <template v-else-if="item.type === 'checkbox'">
+                  <el-checkbox-group v-model="form[item.model]" @change="dataChange(item.model)" v-bind="item.options">
+                    <slot :name="item.model" v-bind="{ item }"></slot>
+                  </el-checkbox-group>
+                </template>
+                <template v-else-if="item.type === 'select'">
+                  <el-select
+                    v-model="form[item.model]"
+                    v-bind="item.options"
+                    filterable
+                    clearable
+                    @change="dataChange(item.model)"
+                    style="width: 100%"
+                    :disabled="item.readonly"
+                  >
+                    <slot :name="item.model" v-bind="{ item }"></slot>
+                  </el-select>
+                </template>
+                <template v-else-if="item.type === 'textarea'">
+                  <el-input
+                    clearable
+                    v-model="form[item.model]"
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 5 }"
+                    @change="dataChange(item.model)"
+                  ></el-input>
+                </template>
+                <template v-else-if="item.type === 'upload'">
+                  <c-upload :url="item.url" v-model="form[item.model]"></c-upload>
+                </template>
+                <template v-else>
+                  <el-input
+                    clearable
+                    v-model="form[item.model]"
+                    :type="getField('type', item)"
+                    :placeholder="getField('placeholder', item)"
+                    :show-password="getField('type', item) === 'password'"
+                    v-bind="item.options"
+                    :readonly="item.readonly"
+                    @change="dataChange(item.model)"
+                  ></el-input>
+                </template>
+              </template>
+              <template v-else>
                 <slot :name="item.model" v-bind="{ item }"></slot>
-              </el-radio-group>
-            </template>
-            <template v-else-if="item.type === 'checkbox'">
-              <el-checkbox-group v-model="form[item.model]" @change="dataChange(item.model)" v-bind="item.options">
-                <slot :name="item.model" v-bind="{ item }"></slot>
-              </el-checkbox-group>
-            </template>
-            <template v-else-if="item.type === 'select'">
-              <el-select
-                v-model="form[item.model]"
-                v-bind="item.options"
-                filterable
-                clearable
-                @change="dataChange(item.model)"
-                style="width: 100%"
-                :disabled="item.readonly"
-              >
-                <slot :name="item.model" v-bind="{ item }"></slot>
-              </el-select>
-            </template>
-            <template v-else-if="item.type === 'textarea'">
-              <el-input clearable v-model="form[item.model]" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" @change="dataChange(item.model)"></el-input>
-            </template>
-            <template v-else-if="item.type === 'upload'">
-              <c-upload :url="item.url" v-model="form[item.model]"></c-upload>
-            </template>
-            <template v-else>
-              <el-input
-                clearable
-                v-model="form[item.model]"
-                :type="getField('type', item)"
-                :placeholder="getField('placeholder', item)"
-                :show-password="getField('type', item) === 'password'"
-                v-bind="item.options"
-                :readonly="item.readonly"
-                @change="dataChange(item.model)"
-              ></el-input>
-            </template>
-          </template>
-          <template v-else>
-            <slot :name="item.model" v-bind="{ item }"></slot>
+              </template>
+            </el-form-item>
           </template>
-        </el-form-item>
-      </template>
-      <el-form-item label="" class="btn">
-        <slot name="submit">
-          <el-row type="flex" align="middle" justify="start">
-            <el-col :span="6">
-              <el-button type="primary" @click="save">{{ submitText }}</el-button>
-            </el-col>
-          </el-row>
-        </slot>
-      </el-form-item>
-    </el-form>
+          <el-form-item label="" class="btn">
+            <slot name="submit">
+              <el-row type="flex" align="middle" justify="start">
+                <el-col :span="6">
+                  <el-button type="primary" @click="save">{{ submitText }}</el-button>
+                </el-col>
+              </el-row>
+            </slot>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -110,6 +120,7 @@ export default {
     submitText: { type: String, default: '保存' },
     form: null,
     reset: { type: Boolean, default: false },
+    span: { type: Number, default: 24 }, // 限制两侧的距离,24就是整行全用
   },
   model: {
     prop: 'form',

src/components/usual/c-search.vue

@@ -5,7 +5,9 @@
         <el-col :span="6" v-for="i in fields" :key="i.model">
           <el-form-item :label="i.label">
             <template v-if="i.type === 'select'">
-              <slot :name="i.model"></slot>
+              <el-select v-model="form[i.model]" filterable clearable style="width: 100%">
+                <slot :name="i.model"></slot>
+              </el-select>
             </template>
             <template v-else>
               <el-input v-model="form[i.model]" :placeholder="`输入${i.label}`"></el-input>
@@ -41,8 +43,8 @@ export default {
       this.$emit('query');
     },
     toReset() {
-      this.form = {};
-      this.$emit(query);
+      this.$emit('change', {});
+      this.$emit('query');
     },
   },
 };

src/layout/Sidebar.vue

@@ -3,7 +3,7 @@
     <el-row class="sidebar">
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
-          <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" unique-opened router>
+          <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="false" unique-opened router>
             <template v-for="item in items">
               <!-- 二级菜单 -->
               <template v-if="item.type === '0'">
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-const { system, adminMenu } = require('./data/menu');
+const { system, adminMenu, devMenu } = require('./data/menu');
 const { menuInfo } = require('./data/site');
 import { mapState, createNamespacedHelpers } from 'vuex';
 import _ from 'lodash';
@@ -84,6 +84,7 @@ export default {
         console.warn('获取菜单:解析base错误');
         return;
       }
+      if (this.$dev_env) this.items.unshift(...devMenu);
     },
   },
   computed: {

src/layout/data/menu.js

@@ -61,3 +61,20 @@ export const adminMenu = [
     ],
   },
 ];
+export const devMenu = [
+  {
+    icon: 'icon-shouye',
+    // path: '/',
+    name: '开发设置',
+    index: '100',
+    type: '0',
+    children: [
+      {
+        icon: 'icon-rencai',
+        path: '/dev/dict',
+        name: '字典管理',
+        index: '100-1',
+      },
+    ],
+  },
+];

src/router/guard.js

@@ -1,8 +1,13 @@
 import store from '@/store/index';
 const _ = require('lodash');
 const jwt = require('jsonwebtoken');
+let $dev_env = process.env.NODE_ENV === 'development';
+
 export default (router) => {
   router.beforeEach((to, from, next) => {
+    if (to.path.includes('dev')) {
+      if (!$dev_env) next('/');
+    }
     // 检查是不是登陆,登陆页面放过
     if (to.path === '/login') {
       next();

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import gurad from './guard';
 import selfShop from './module/selfShop';
 import system from './module/system';
+import dev from './module/dev';
 Vue.use(VueRouter);
 
 const routes = [
@@ -25,6 +26,7 @@ const routes = [
         meta: { title: '首页' },
         component: () => import(/* webpackChunkName: "home" */ '@/views/index.vue'),
       },
+      ...dev,
       ...system,
       ...selfShop,
     ],

src/router/module/dev.js

@@ -0,0 +1,14 @@
+export default [
+  {
+    path: '/dev/dict',
+    name: 'dev_dict',
+    meta: { title: '开发设置-字典目录' },
+    component: () => import(/* webpackChunkName: "dev_dict" */ '@/views/dev/dict/index.vue'),
+  },
+  {
+    path: '/dev/dict/data',
+    name: 'dev_dict_data',
+    meta: { title: '开发设置-字典内容' },
+    component: () => import(/* webpackChunkName: "dev_dict_data" */ '@/views/dev/dict/data.vue'),
+  },
+];

src/store/index.js

@@ -5,6 +5,8 @@ import * as umutations from './module/user/mutations';
 import admin from './module/user/action';
 import selfShop from './module/shop/selfShop';
 import goods from './module/shop/goods';
+import dictIndex from './module/dev/dictIndex';
+import dictData from './module/dev/dictData';
 
 Vue.use(Vuex);
 
@@ -12,5 +14,5 @@ export default new Vuex.Store({
   state: { ...ustate },
   mutations: { ...umutations },
   actions: {},
-  modules: { admin, selfShop, goods },
+  modules: { admin, selfShop, goods, dictIndex, dictData },
 });

src/store/module/dev/dictData.js

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

src/store/module/dev/dictIndex.js

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

src/store/module/shop/goods.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+const _ = require('lodash');
 Vue.use(Vuex);
 const api = {
   url: '/point/v1/api/goods',
@@ -17,12 +18,17 @@ const actions = {
     });
     return res;
   },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}`, payload);
+    return res;
+  },
   async fetch({ commit }, payload) {
     const res = await this.$axios.$get(`${api.url}/${payload}`);
     return res;
   },
-  async update({ commit }, { _id, ...info } = {}) {
-    const res = await this.$axios.$post(`${api.url}/${_id}`, { ...info });
+  async update({ commit }, payload) {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await this.$axios.$post(`${api.url}/${id}`, payload);
     return res;
   },
   async delete({ commit }, payload) {

src/store/module/shop/selfShop.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+const _ = require('lodash');
 Vue.use(Vuex);
 const api = {
   url: '/point/v1/api/selfShop',
@@ -21,8 +22,9 @@ const actions = {
     const res = await this.$axios.$get(`${api.url}`);
     return res;
   },
-  async update({ commit }, { _id, ...info } = {}) {
-    const res = await this.$axios.$post(`${api.url}/${_id}`, { ...info });
+  async update({ commit }, payload) {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await this.$axios.$post(`${api.url}/${id}`, payload);
     return res;
   },
   async delete({ commit }, payload) {

src/util/opera.js

@@ -0,0 +1,56 @@
+const _ = require('lodash');
+export default {
+  //执行查询
+  async search({ skip = 0, limit = this.limit || 10, ...others } = {}) {
+    let query = { skip, limit, ...others };
+    if (this.searchInfo && Object.keys(this.searchInfo).length > 0) query = { ...query, ...this.searchInfo };
+    if (this.defaultSearch && Object.keys(this.defaultSearch).length > 0) query = { ...query, ...this.defaultSearch };
+    const res = await this.query(query);
+    if (this.$checkRes(res)) {
+      this.$set(this, `list`, res.data);
+      this.$set(this, `total`, res.total);
+    }
+  },
+  // 去添加
+  async toAdd() {
+    this.initAddData();
+    this.view = 'info';
+  },
+  // 初始化添加数据,重写用
+  initAddData() {},
+  // 去编辑
+  async toEdit({ data }) {
+    const res = await this.fetch(data._id);
+    if (this.$checkRes(res)) {
+      this.$set(this, `form`, res.data);
+      this.view = 'info';
+    } else {
+      this.$message.error('未找到指定数据');
+    }
+  },
+  // 执行删除
+  async toDelete({ data }) {
+    const res = await this.delete(data._id);
+    if (this.$checkRes(res, '操作成功', '操作失败')) this.toResearch();
+  },
+  // 执行返回
+  toBack() {
+    this.form = {};
+    this.view = 'list';
+  },
+  //执行保存
+  async toSave({ data }) {
+    const id = _.get(data, 'id', _.get(data, '_id'));
+    let res;
+    if (id) res = await this.update(data);
+    else res = await this.create(data);
+    if (this.$checkRes(res, '操作成功', '操作失败')) {
+      this.view = 'list';
+      this.toResearch();
+    }
+  },
+  //执行再查询
+  toResearch() {
+    if (this.search) this.search();
+  },
+};

src/views/dev/dict/data.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="data">
+    <template v-if="view === 'list'">
+      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
+        <template #status>
+          <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
+        </template>
+      </data-search>
+      <data-btn :fields="btnFields" @add="toAdd" />
+      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete"> </data-table>
+    </template>
+    <template v-else>
+      <el-row>
+        <el-col :span="24">
+          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
+        </el-col>
+        <el-col :span="24">
+          <data-form :span="12" :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
+            <template #status>
+              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
+            </template>
+          </data-form>
+        </el-col>
+      </el-row>
+    </template>
+  </div>
+</template>
+
+<script>
+import methodUtil from '@/util/opera';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('dictData');
+export default {
+  name: 'dictData',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      view: 'list',
+      fields: [
+        { label: '显示内容', model: 'label' },
+        { label: '值', model: 'value' },
+        { label: '顺序', model: 'sort' },
+        { label: '状态', model: 'status', format: (i) => (i === '0' ? '使用中' : '已禁用') },
+      ],
+      opera: [
+        { label: '修改', method: 'edit' },
+        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
+      ],
+      list: [],
+      total: 0,
+      limit: 20,
+      btnFields: [{ label: '添加', method: 'add' }],
+      defaultSearch: {},
+      searchInfo: {},
+      searchFields: [
+        { label: '显示内容', model: 'label' },
+        { label: '值', model: 'value' },
+        { label: '状态', model: 'status', type: 'select' },
+      ],
+
+      statusList: [
+        { label: '使用', value: '0' },
+        { label: '禁用', value: '1' },
+      ],
+
+      infoFields: [
+        { label: '显示内容', model: 'label' },
+        { label: '值', model: 'value' },
+        { label: '顺序', model: 'sort', type: 'number' },
+        { label: '状态', model: 'status', type: 'select' },
+      ],
+      rules: {},
+      form: {},
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+    code() {
+      return this.$route.query.code;
+    },
+  },
+  created() {
+    this.defaultSearch.code = this.code;
+    this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    ...methodUtil,
+    initAddData() {
+      this.form.code = this.code;
+      this.form.status = '0';
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/dev/dict/index.vue

@@ -1,23 +1,96 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <template v-if="view === 'list'">
+      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
+        <template #status>
+          <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
+        </template>
+      </data-search>
+      <data-btn :fields="btnFields" @add="toAdd" />
+      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete">
+        <template #code="{ row, item }">
+          <el-link type="primary" @click="toData(row)">{{ row[item.model] }}</el-link>
+        </template>
+      </data-table>
+    </template>
+    <template v-else>
+      <el-row>
+        <el-col :span="24">
+          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
+        </el-col>
+        <el-col :span="24">
+          <data-form :span="12" :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
+            <template #status>
+              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
+            </template>
+          </data-form>
+        </el-col>
+      </el-row>
+    </template>
   </div>
 </template>
 
 <script>
+import methodUtil from '@/util/opera';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('dictIndex');
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function () {
-    return {};
+    return {
+      view: 'list',
+      fields: [
+        { label: '目录名称', model: 'name' },
+        { label: '目录编码', model: 'code', custom: true },
+        { label: '状态', model: 'status', format: (i) => (i === '0' ? '使用中' : '已禁用') },
+      ],
+      opera: [
+        { label: '修改', method: 'edit' },
+        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
+      ],
+      list: [],
+      total: 0,
+      limit: 20,
+      btnFields: [{ label: '添加', method: 'add' }],
+      searchInfo: {},
+      searchFields: [
+        { label: '目录名称', model: 'name' },
+        { label: '目录编码', model: 'code' },
+        { label: '状态', model: 'status', type: 'select' },
+      ],
+
+      statusList: [
+        { label: '使用', value: '0' },
+        { label: '禁用', value: '1' },
+      ],
+
+      infoFields: [
+        { label: '目录名称', model: 'name' },
+        { label: '目录编码', model: 'code' },
+        { label: '状态', model: 'status', type: 'select' },
+      ],
+      rules: {},
+      form: {},
+    };
   },
   computed: {
     ...mapState(['user']),
   },
-  created() {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  methods: {
+    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
+    ..._.cloneDeep(methodUtil),
+    initAddData() {
+      this.form.status = '0';
+    },
+    toData(row) {
+      this.$router.push({ path: '/dev/dict/data', query: { code: row.code } });
+    },
+  },
   metaInfo() {
     return { title: this.$route.meta.title };
   },

src/views/selfShop/goods/index.vue

@@ -2,8 +2,8 @@
   <div id="goods">
     <template v-if="view === 'list'">
       <data-search :fields="searchFields" v-model="searchInfo" @query="search"></data-search>
-      <data-btn :list="btnList" @add="toAdd"></data-btn>
-      <data-table ref="ctable" :fields="fields" :opera="opera" :data="list" :total="total" :limit="limit" @query="search"></data-table>
+      <data-btn :fields="btnList" @add="toAdd"></data-btn>
+      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" :limit="limit" @query="search"></data-table>
     </template>
     <template v-else>
       <el-row>
@@ -19,11 +19,7 @@
 </template>
 
 <script>
-// import csearch from '@/components/usual/c-search.vue';
-// import cbtn from '@/components/usual/c-btnbar.vue';
-// import ctable from '@/components/usual/c-table.vue';
-// import cform from '@/components/usual/c-form.vue';
-import methodsUtil from './opera';
+import methodsUtil from '@/util/opera';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: selfShop } = createNamespacedHelpers('selfShop');
 const { mapActions: goods } = createNamespacedHelpers('goods');

src/views/selfShop/goods/opera.js

@@ -1,24 +0,0 @@
-export default {
-  async toAdd() {
-    this.view = 'info';
-  },
-  async toEdit({ data }) {
-    const res = await this.fetch(data._id);
-    if (this.$checkRes(res)) {
-      this.$set(this, `form`, res.data);
-      this.view = 'info';
-    } else {
-      this.$message.error('未找到指定数据');
-    }
-  },
-  async toDelete({ data }) {
-    const res = await this.delete(data._id);
-    if (this.$checkRes(res, '操作成功', '操作失败')) {
-      this.$refs.ctable.changePage();
-    }
-  },
-  toBack() {
-    this.form = {};
-    this.view = 'list';
-  },
-};