feat: #第一个页面demo

src/api/help/type.js

@@ -0,0 +1,12 @@
+import api from '@/utils/request';
+
+export const getList = params =>
+  api.post(`/yxl-back-end/framework/help/group/page`, params);
+export const getItem = ({ id, params }) =>
+  api.get(`/yxl-back-end/framework/help/group/${id}`, params);
+export const saveItem = params =>
+  api.post(`/yxl-back-end/framework/help/group/save`, params);
+export const delItem = ({ id, params }) =>
+  api.del(`/yxl-back-end/framework/help/group/${id}`, params);
+// export const getSMSCode = params =>
+//   api.post(`/yxl-back-end/framework/uiac/admin/mobile-number-sms/code`, params);

src/main.js

@@ -18,6 +18,8 @@ import '@/permission'; // permission control
 import './components';
 import './containers';
 
+import 'utils/dialog-helper';
+
 import message from '@/utils/message';
 
 /**

src/mixins/filterList.js

@@ -40,8 +40,8 @@ const filterList = (params = {}) => ({
         size: this.pagination.pageSize
       };
 
-      const { data, message } = await this.apiList(inParams);
-      if (data) {
+      const { data, msg } = await this.apiList(inParams);
+      if (data in data) {
         const items = data.data;
         const total = {
           page: data.page,
@@ -57,7 +57,7 @@ const filterList = (params = {}) => ({
         this.loadCallBack(data);
       } else {
         Message({
-          message: message,
+          message: msg,
           type: 'error',
           duration: 5 * 1000
         });

src/store/modules/user.js

@@ -37,53 +37,82 @@ const actions = {
     console.log(userInfo);
     const { phone, code } = userInfo;
     return new Promise((resolve, reject) => {
-      login({
-        account: phone,
-        signInType: 'MOBILE_NUMBER_SMS',
-        smsCode: code
-      })
-        .then(response => {
-          const { data } = response;
-          if (data.token) {
-            commit('SET_TOKEN', data.token);
-            setToken(data.token);
-            resolve();
-          } else {
-            reject(data.message);
-          }
-        })
-        .catch(error => {
-          reject(error);
-        });
+      const data = {
+        token: 'admin-token'
+      };
+      commit('SET_TOKEN', data.token);
+      setToken(data.token);
+      resolve();
     });
+    // return new Promise((resolve, reject) => {
+    //   login({
+    //     data: {
+    //       account: phone,
+    //       signInType: 'MOBILE_NUMBER_SMS',
+    //       smsCode: code
+    //     }
+    //   })
+    //     .then(response => {
+    //       const { data } = response;
+
+    //       if (data.token) {
+    //         commit('SET_TOKEN', data.token);
+    //         setToken(data.token);
+    //         resolve();
+    //       } else {
+    //         reject(data.message);
+    //       }
+    //     })
+    //     .catch(error => {
+    //       reject(error);
+    //     });
+    // });
   },
 
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token)
-        .then(async response => {
-          const { data } = response;
+      const data = {
+        roles: ['admin'],
+        introduction: 'I am a super administrator',
+        avatar: 'https://picsum.photos/id/237/200/300',
+        name: 'Super Admin'
+      };
+      const { name, avatar, roles } = data;
 
-          if (!data) {
-            return reject('Verification failed, please Login again.');
-          }
+      // const roles = [];
 
-          const { name, avatar, roles } = data;
+      commit('SET_ROLES', roles);
+      commit('SET_NAME', name);
+      commit('SET_AVATAR', avatar);
 
-          // const roles = [];
+      // dispatch('permission/generateRoutes');
+      resolve(data);
+    });
+    // return new Promise((resolve, reject) => {
+    //   getInfo(state.token)
+    //     .then(async response => {
+    //       const { data } = response;
 
-          commit('SET_ROLES', roles);
-          commit('SET_NAME', name);
-          commit('SET_AVATAR', avatar);
+    //       if (!data) {
+    //         return reject('Verification failed, please Login again.');
+    //       }
 
-          // dispatch('permission/generateRoutes');
-          resolve(data);
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
+    //       const { name, avatar, roles } = data;
+
+    //       // const roles = [];
+
+    //       commit('SET_ROLES', roles);
+    //       commit('SET_NAME', name);
+    //       commit('SET_AVATAR', avatar);
+
+    //       // dispatch('permission/generateRoutes');
+    //       resolve(data);
+    //     })
+    //     .catch(error => {
+    //       reject(error);
+    //     });
+    // });
   },
 
   // user logout

src/utils/dialog-helper.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import store from 'store';
+import IssueTypeItem from 'views/helpInfo/issueType/modal/ItemModal.vue';
+
+const modal = (Component, props) => {
+  let _component = null;
+  const Instance = new Vue({
+    props,
+    store,
+    render(h) {
+      return h(Component, {
+        props: props,
+        on: {
+          cancel: () => {
+            Instance.$destroy();
+            document.body.removeChild(_component.$el);
+          }
+        }
+      });
+    }
+  });
+  _component = Instance.$mount();
+  document.body.appendChild(_component.$el);
+};
+
+let IssueTypeItemModal = data => {
+  modal(IssueTypeItem, data);
+};
+Vue.prototype.$IssueTypeItemModal = params => {
+  IssueTypeItemModal(params);
+};

src/views/ItemModal.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    width="80%"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <span>这是一段信息</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="modal = false">取消</el-button>
+      <el-button type="primary" @click="modal = false">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+
+
+export default {
+  name: 'ItemModal',
+
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      modal: true,
+      title: '',
+    };
+  },
+
+
+  mounted() {
+  },
+
+  methods: {
+
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/dashboard/index.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="dashboard-container">
     <!-- <div class="dashboard-text">name: {{ name }}</div> -->
-    <div class="bg-w p-20 br-10">
-      <toolbar-container :fields="fields" @on-filter="eee" />
-      <base-table
-        :columns="columns"
-        :items="items"
-        :pagination="pagination"
-        :page-change="pageChange"
-      />
-    </div>
+    <div class="bg-w p-20 br-10"></div>
   </div>
 </template>
 
@@ -20,88 +12,13 @@ import mxFilterList from '@/mixins/filterList';
 export default {
   name: 'Dashboard',
 
-  mixins: [
-    mxFilterList({
-      fetchList: () => {}
-    })
-  ],
-
   computed: {
     ...mapGetters(['name'])
   },
   data() {
-    return {
-      fields: [
-        {
-          type: 'dateArray',
-          name: 'paidTime',
-          label: '收款时间',
-          apiName: ['start', 'end'],
-          defaultValue: [,]
-        },
-
-        {
-          type: 'text',
-          name: 'paidTime2',
-          label: '收款时间',
-          defaultValue: 'fick'
-        },
-        {
-          type: 'text',
-          name: 'paidTime3',
-          label: '收款时间',
-          defaultValue: 'fick'
-        }
-      ],
-      columns: [
-        {
-          key: 'region',
-          name: '大区',
-          width: '120'
-        },
-        {
-          key: 'province',
-          name: '省',
-          width: '120'
-        },
-        {
-          key: 'city',
-          name: '市',
-          width: '150'
-        },
-        {
-          key: 'area',
-          name: '区',
-          minWidth: '100'
-        },
-        {
-          key: 'storeChain',
-          name: '连锁',
-          minWidth: '100'
-        },
-        {
-          key: 'storeName',
-          name: '门店',
-          minWidth: '100'
-        },
-        {
-          key: 'coupons',
-          name: '发行码数',
-          width: '100'
-        },
-        {
-          key: 'writeoff',
-          name: '核销数',
-          width: '100'
-        }
-      ]
-    };
+    return {};
   },
-  methods: {
-    eee() {
-      console.warn('-------');
-    }
-  }
+  methods: {}
 };
 </script>
 

src/views/helpInfo/issueType/index.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="">
-    <toolbar @onSearch="filterData" />
+    <toolbar @on-filter="filterData" @on-reset="filterData" />
 
     <div class="m-10 bg-w p-20 br-10">
-      <el-button type="primary" icon="el-icon-plus" @click="handleSubmit"
+      <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
         >新增</el-button
       >
       <base-table
+        row-key="id"
         :columns="columns"
         :items="items"
         :pagination="pagination"
         :page-change="pageChange"
       />
+      {{ items }}
     </div>
   </div>
 </template>
@@ -19,6 +21,7 @@
 <script>
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
+import { getList, delItem } from '@/api/help/type';
 
 export default {
   name: 'IssueType',
@@ -27,7 +30,7 @@ export default {
 
   mixins: [
     mxFilterList({
-      // fetchList: iGetList // 在下方data再声明一个 fetchList: iGetList 同等效果
+      fetchList: getList // 在下方data再声明一个 fetchList: iGetList 同等效果
     })
   ],
 
@@ -35,44 +38,144 @@ export default {
     return {
       columns: [
         {
-          key: 'photo',
+          key: 'id',
           name: 'ID',
           width: '160'
         },
         {
-          key: 'region',
+          key: 'name',
           name: '分类名称',
-          width: '180'
+          minWidth: '180'
         },
         {
-          key: 'region',
+          key: 'sort',
           name: '排序',
-          minWidth: '120'
+          width: '120'
         },
+        // {
+        //   key: 'region',
+        //   name: '创建时间',
+        //   width: '180'
+        // },
+        // {
+        //   key: 'region',
+        //   name: '备注',
+        //   width: '180'
+        // },
+        // {
+        //   key: 'region',
+        //   name: '状态',
+        //   width: '180'
+        // },
         {
-          key: 'region',
-          name: '创建时间',
-          width: '180'
-        },
-        {
-          key: 'region',
-          name: '备注',
-          width: '180'
-        },
-        {
-          key: 'region',
-          name: '状态',
-          width: '180'
-        },
-        {
-          key: 'region',
+          key: 'action',
           name: '操作',
-          width: '180'
+          width: '180',
+          render: (h, { row }) => {
+            const action = [];
+            action.push(
+              h(
+                'el-button',
+                {
+                  props: {
+                    type: 'text'
+                  },
+                  on: {
+                    click: () =>
+                      this.$IssueTypeItemModal({
+                        id: row.id,
+                        parentId: row.parentId
+                      })
+                  }
+                },
+                '编辑'
+              )
+            );
+            action.push(
+              h(
+                'el-button',
+                {
+                  props: {
+                    type: 'text'
+                  },
+                  on: {
+                    click: () =>
+                      this.$IssueTypeItemModal({
+                        parentId: row.parentId
+                      })
+                  }
+                },
+                '添加下级分类'
+              )
+            );
+            action.push(
+              h(
+                'el-button',
+                {
+                  props: {
+                    type: 'text'
+                  },
+                  on: {
+                    click: () => this.handleDelItem(row)
+                  }
+                },
+                '删除'
+              )
+            );
+            return h('div', action);
+          }
         }
       ]
     };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      this.items = [
+        {
+          id: 998,
+          name: 'sex',
+          sort: 10,
+          children: [
+            {
+              id: 31,
+              name: 'man',
+              sort: 9,
+              children: [
+                {
+                  id: 312,
+                  name: 'man',
+                  sort: 9
+                }
+              ]
+            },
+            {
+              id: 9,
+              name: 'woman',
+              sort: 7
+            }
+          ]
+        }
+      ];
+    }, 1000);
+  },
+
+  methods: {
+    handleAdd() {
+      this.$IssueTypeItemModal();
+    },
+    async handleDelItem(item) {
+      const { success, msg } = await delItem({
+        id: item.id
+      });
+      if (success) {
+        this.$success('删除成功！');
+      } else {
+        this.$error(msg);
+      }
+    }
   }
 };
 </script>
 
-<style type="scss" scoped></style>
+<style lang="scss" scoped></style>

src/views/helpInfo/issueType/modal/ItemModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    width="500px"
+    :close-on-click-modal="false"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="状态">
+        <!-- <el-switch
+          v-model="form.isShow"
+          active-text="显示"
+          inactive-text="隐藏"
+        /> -->
+        <el-radio-group v-model="form.isShow" prop="isShow">
+          <el-radio :label="true">显示</el-radio>
+          <el-radio :label="false">隐藏</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number
+          v-model="form.sort"
+          :min="1"
+          :max="10"
+          label="序号"
+        ></el-input-number>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="modal = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getItem, saveItem } from '@/api/help/type';
+
+export default {
+  name: 'IssueTypeItemModal',
+
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    parentId: {
+      type: String,
+      default: '-1'
+    }
+  },
+
+  data() {
+    return {
+      modal: true,
+
+      form: {
+        name: '',
+        isShow: false,
+        sort: 1
+      },
+      rules: {
+        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
+      }
+    };
+  },
+
+  computed: {
+    title() {
+      if (this.id) {
+        return '编辑分类';
+      } else {
+        return '新增分类';
+      }
+    }
+  },
+
+  watch: {
+    id: {
+      handler(id) {
+        id && this.loadData();
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {},
+
+  methods: {
+    async loadData() {
+      const { success, data, msg } = await getItem({
+        id: this.id
+      });
+      if (success) {
+        this.form = data;
+      } else {
+        this.$error(msg);
+      }
+    },
+
+    handleConfirm() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          const params = Object.assign({}, this.form);
+          if (this.id) params.id = this.id;
+          if (!this.form.parentId) {
+            params.parentId = this.parentId;
+          }
+          const { success, msg } = await saveItem({ data: params });
+          if (success) {
+            this.$success('保存成功！');
+            this.modal = false;
+          } else {
+            this.$error(msg);
+          }
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/login/index.vue

@@ -65,12 +65,14 @@
 
     <el-dialog title="真人验证" :visible.sync="dialogVisible" width="20%">
       <div class="f-c-c f-col">
-        <img :src="info.base64Img" class="info-img" />
+        <img :src="info.base64Img" class="info-img" @click="loadCheckImg" />
         <el-input placeholder="请输入验证码" v-model="point" clearable />
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleGetSMS">获取验证码</el-button>
+        <el-button type="primary" @click="handleGetSMS"
+          >获取短信验证码</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -124,16 +126,7 @@ export default {
     },
     dialogVisible: {
       handler(b) {
-        if (b) {
-          getImgCode().then(response => {
-            const { data, success } = response;
-            if (success) {
-              this.info = data;
-            } else {
-              this.$error('加载失败，请稍后重试~');
-            }
-          });
-        }
+        b && this.loadCheckImg();
       },
       immediate: true
     }
@@ -157,12 +150,22 @@ export default {
               this.loading = false;
             });
         } else {
+          this.$error('尚未填写完成');
           console.log('error submit!!');
           return false;
         }
       });
     },
 
+    async loadCheckImg() {
+      const { success, msg, data } = await getImgCode();
+      if (success) {
+        this.info = data;
+      } else {
+        this.$error('加载失败，请稍后重试~');
+      }
+    },
+
     async handleGetSMS() {
       const { success, msg } = await getSMSCode({
         code: this.point,