更新

src/components/common/Sidebar.vue

@@ -74,6 +74,11 @@ export default {
           index: 'lunbo',
           title: '轮播测试',
         },
+        {
+          icon: 'el-icon-s-home',
+          index: 'index',
+          title: '公司测试',
+        },
       ],
     };
   },

src/components/frame/upload.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :list-type="listType"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleRemove"
+      :on-success="onSuccess"
+      :before-upload="beforeUpload"
+      :show-file-list="showList"
+      :accept="accept"
+    >
+      <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
+      <template v-else-if="uploadBtn">
+        <el-button type="danger">选择文件</el-button>
+      </template>
+      <template v-else>
+        <i class="el-icon-plus"></i>
+      </template>
+      <template #tip v-if="tip">
+        {{ tip }}
+      </template>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+    isBtn: { type: Boolean, default: false },
+    uploadBtn: { type: Boolean, default: false },
+    showList: { type: Boolean, default: true },
+    accept: { type: String, default: '' },
+    tip: { type: String, default: undefined },
+    listType: { type: String, default: 'picture-card' },
+  },
+  components: {},
+  data: () => ({
+    dialogVisible: false,
+    dialogImageUrl: '',
+    fileList: [],
+  }),
+  created() {
+    if (this.data) {
+      this.defalutProcess(this.data);
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.defalutProcess(val);
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = false;
+    },
+    handleRemove(file, fileList) {
+      let index = fileList.findIndex(f => _.isEqual(f, file));
+      this.$emit('delete', index);
+      return false;
+    },
+    outLimit() {
+      this.$message.error(`只允许上传${this.limit}个文件`);
+    },
+    onSuccess(response, file, fileList) {
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: { ...response, name: file.name } });
+    },
+    beforeUpload(file) {
+      const sizeLimit = file.size / 1024 / 1024 < 10;
+      if (sizeLimit) return true;
+      else {
+        this.$message.error('文件超出10M！');
+        return false;
+      }
+    },
+    defalutProcess(val) {
+      if (_.isArray(val)) {
+        let newArr = val.map(item => {
+          let object = {};
+          object.name = item.name;
+          object.url = item.url;
+          return object;
+        });
+        this.$set(this, `fileList`, newArr);
+      } else if (_.isObject(val)) {
+        let object = {};
+        if (_.get(val, `url`)) {
+          object.name = val.name;
+          object.url = val.url;
+          this.$set(this, `fileList`, [object]);
+        }
+      } else if (typeof val === 'string') {
+        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/router/index.js

@@ -41,6 +41,16 @@ export default new Router({
           component: () => import('../views/lunbo/index.vue'),
           meta: { title: '轮播测试' },
         },
+        {
+          path: '/index',
+          component: () => import('../views/company/index.vue'),
+          meta: { title: '公司' },
+        },
+        {
+          path: '/indexDetail',
+          component: () => import('../views/company/indexDetail.vue'),
+          meta: { title: '公司页面跳转' },
+        },
       ],
     },
     {

src/store/company.js

@@ -0,0 +1,54 @@
+//第一步
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  //接口地址
+  company: `/api/huanqi/company`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  //查询列表 skip:第一页,limit:第一页显示的数据，info:其余查询参数
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    //连接接口。。。。
+    const res = await this.$axios.$get(`${api.company}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    //把数据集合res返回
+    return res;
+  },
+  //创建数据  payload是添加form表单中的数据集合  创建数据的时候需要拿到form表单里面的数据
+  async create({ commit }, payload) {
+    //通过$axios提交post请求????
+    const res = await this.$axios.$post(`${api.company}`, payload);
+    return res;
+  },
+  //查询详情，payload：参数位，一般传当前数据id
+  async fetch({ commit }, payload) {
+    //有/一般都是路径
+    const res = await this.$axios.$get(`${api.company}/${payload}`);
+    return res;
+  },
+  //修改：id: 当前数据id, data: 当前修改数据的新form表单
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.company}/update/${id}`, data);
+    return res;
+  },
+  //删除：payload：参数位，一般传当前数据id
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.company}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -5,6 +5,7 @@ import * as umutations from './user/mutations';
 import login from './login';
 //第二步引入自己创建的文件
 import lunbo from './lunbo';
+import company from './company';
 
 Vue.use(Vuex);
 
@@ -16,5 +17,6 @@ export default new Vuex.Store({
     login,
     //声明引用文件
     lunbo,
+    company,
   },
 });

src/views/company/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" style="margin:15px 0;text-align:right">
+          <el-button type="primary" size="mini" @click="increase()">添加</el-button>
+        </el-col>
+        <el-col :span="24" class="contain">
+          <template>
+            <el-table :data="list">
+              <el-table-column prop="company" label="企业名称" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="engCompany" label="英文名称" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="brief" label="简介" width="150" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="mobile" label="统一热线" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="aaddress" label="地址" width="150" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="weixin" label="微信" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="gzh" label="公众号" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="weibo" label="微博" width="120" show-overflow-tooltip> </el-table-column>
+              <el-table-column prop="beian" label="备案" width="150" show-overflow-tooltip> </el-table-column>
+              <el-table-column fixed="right" label="操作" width="145">
+                <template slot-scope="scope">
+                  <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import breadcrumb from '@c/common/breadcrumb.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: company } = createNamespacedHelpers('company');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {
+    breadcrumb,
+  },
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...company(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    async handleDelete(data) {
+      let res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    increase() {
+      this.$router.push({ path: '/indexDetail' });
+    },
+    handleEdit(data) {
+      this.$router.push({ path: '/indexDetail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/company/indexDetail.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="indexDetail">
+    <el-row>
+      <el-col :span="24">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" style="margin:0 0 15px 0;text-align:right;">
+          <el-button type="primary" size="mini" @click="back()">返回</el-button>
+        </el-col>
+        <el-col :span="24" class="contain">
+          <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="企业名称" prop="company">
+              <el-input v-model="form.company"></el-input>
+            </el-form-item>
+            <el-form-item label="英文名称" prop="engCompany">
+              <el-input v-model="form.engCompany"></el-input>
+            </el-form-item>
+            <el-form-item label="简介" prop="brief">
+              <el-input type="textarea" v-model="form.brief"></el-input>
+            </el-form-item>
+            <el-form-item label="图片">
+              <upload
+                :limit="6"
+                :data="form.image"
+                :uploadBtn="true"
+                type="image"
+                :url="`/files/image/upload`"
+                @upload="uploadSuccess"
+                @delete="uploadDelete"
+              ></upload>
+            </el-form-item>
+            <el-form-item label="统一热线" prop="mobile">
+              <el-input v-model="form.mobile"></el-input>
+            </el-form-item>
+            <el-form-item label="地址" prop="aaddress">
+              <el-input v-model="form.aaddress"></el-input>
+            </el-form-item>
+            <el-form-item label="微信" prop="wexin">
+              <el-input v-model="form.weixin"></el-input>
+            </el-form-item>
+            <el-form-item label="公众号" prop="gzh">
+              <el-input v-model="form.gzh"></el-input>
+            </el-form-item>
+            <el-form-item label="微博" prop="weibo">
+              <el-input v-model="form.weibo"></el-input>
+            </el-form-item>
+            <el-form-item label="备案" prop="beian">
+              <el-input v-model="form.beian"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('form')">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/frame/uploadone.vue';
+import breadcrumb from '@c/common/breadcrumb.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: company } = createNamespacedHelpers('company');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'indexDetail',
+  props: {},
+  components: {
+    upload,
+    breadcrumb,
+  },
+  data: function() {
+    return {
+      form: {},
+      rules: {
+        company: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        engCompany: [{ required: true, message: '请输入企业英文名称', trigger: 'blur' }],
+        brief: [{ required: true, message: '请输入企业简介', trigger: 'blur' }],
+        mobile: [{ required: true, message: '请输入热线', trigger: 'blur' }],
+        weixin: [{ required: true, message: '请输入微信', trigger: 'blur' }],
+        gzh: [{ required: true, message: '请输入公众号', trigger: 'blur' }],
+        weibo: [{ required: true, message: '请输入微博', trigger: 'blur' }],
+        beian: [{ required: true, message: '请输入备案', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...company(['query', 'fetch', 'create', 'update', 'delete']),
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `form`, res.data);
+        }
+      }
+    },
+    submitForm(formName) {
+      // element表单验证
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          let data = this.form;
+          if (data.id) {
+            let res = await this.update(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '修改成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          } else {
+            let res = await this.create(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '创建成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    back() {
+      this.$set(this, `form`, {});
+      this.$router.push({ path: '/index' });
+    },
+    uploadSuccess({ type, data }) {
+      let arr = _.get(this.form, type);
+      if (_.isArray(arr)) {
+        let datas = { name: data.name, url: data.uri };
+        this.form[type].push({ name: data.name, url: data.uri });
+      } else {
+        let newArr = [{ name: data.name, url: data.uri }];
+        this.$set(this.form, `${type}`, newArr);
+      }
+    },
+    // 删除图片
+    uploadDelete(index) {
+      this.form.image.splice(index, 1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/lunbo/index.vue

@@ -57,7 +57,7 @@ import breadcrumb from '@c/common/breadcrumb.vue';
 const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
 export default {
   metaInfo() {
-    return { title: this.route.meta.title };
+    return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
@@ -84,15 +84,10 @@ export default {
         this.$set(this, `list`, res.data);
       }
     },
-    hide() {
-      dialogFormVisible = false;
-      form = {};
-    },
-    async onSubmit() {
-      // this.form的数据集合用data变量接收
-      let data = this.form; // 判断data中有无id,有id:走修改，无id:走创建
+   async onSubmit() {
+      let data = this.form;
       if (data.id) {
-        const res = await this.update(data);
+        let res = await this.update(data);
         if (this.$checkRes(res)) {
           this.$message({
             message: '修改成功',
@@ -100,15 +95,20 @@ export default {
           });
         }
       } else {
-        const res = await this.create(data);
+        let res = await this.create(data);
         if (this.$checkRes(res)) {
           this.$message({
-            message: '修改成功',
+            message: '创建成功',
             type: 'success',
           });
         }
       }
       this.hide();
+      this.search();
+    },
+    hide() {
+      this.form = {};
+      this.dialogFormVisible = false;
     },
     async handleDelete(data) {
       let res = await this.delete(data.id);

src/views/test/routeDetail.vue

@@ -69,6 +69,7 @@ export default {
     },
     // 提交
     submitForm(formName) {
+      // element表单验证
       this.$refs[formName].validate(async valid => {
         if (valid) {
           let data = this.form;
@@ -102,8 +103,10 @@ export default {
       this.$set(this, `form`, {});
       this.$router.push({ path: '/route' });
     },
-    // 图片
+    // 图片上传成功调用的方法
     uploadSuccess({ type, data }) {
+      // console.log(data);
+      // console.log(type);
       this.$set(this.form, `${type}`, data.uri);
     },
   },