友情链接更新

src/components/upload.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      list-type="picture-card"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleRemove"
+      :on-success="onSuccess"
+      accept=".jpg,.jpeg,.png,.bmp,.gif,.svg"
+    >
+      <template>
+        <i class="el-icon-plus"></i>
+      </template>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+  },
+  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 = true;
+    },
+    handleRemove(file) {
+      return true;
+    },
+    outLimit() {
+      this.$message.error('只允许上传1张图片');
+    },
+    onSuccess(response, file, fileList) {
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: response });
+    },
+    defalutProcess(val) {
+      this.$set(this, `fileList`, [{ name: this.type, url: `${this.data}?${new Date().getTime()}` }]);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/links/linksData.vue

@@ -4,21 +4,18 @@
       <el-col :span="24" class="linksData">
         <el-table :data="tableData" style="width: 100%" border>
           <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
-          <el-table-column prop="title" label="名称" width="80" align="left"> </el-table-column>
-          <el-table-column prop="url" label="相关链接" width="180" align="left"> </el-table-column>
+          <el-table-column prop="name" label="名称" width="215" align="left"> </el-table-column>
+          <el-table-column prop="url" label="相关链接" width="215" align="left"> </el-table-column>
           <el-table-column prop="pic" label="图片地址" width="365" align="left"> </el-table-column>
-          <el-table-column prop="state" label="目前状态" width="80" align="left"> </el-table-column>
-          <el-table-column label="状态操作" width="90" align="left">
-            <template slot-scope="">
-              <el-link :underline="false">开启</el-link>&nbsp;
-              <el-link :underline="false">关闭</el-link>
-            </template>
-          </el-table-column>
           <el-table-column label="操作" width="200" align="left">
             <template slot-scope="scoped">
-              <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
-              <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
-              <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit"
+                @click="$router.push({ path: '/links/detail', query: { id: scoped.row.id } })"
+              ></el-button>
+              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scoped.row)"></el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -28,18 +25,12 @@
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             layout="total, prev, pager, next, jumper"
-            :total="1"
+            :total="total"
           >
           </el-pagination>
         </el-col>
       </el-col>
     </el-row>
-    <el-dialog title="详细信息" :visible.sync="dialog">
-      <p class="text">名称：{{ info.title }}</p>
-      <p class="text">相关链接：{{ info.url }}</p>
-      <p class="text">图片地址：{{ info.pic }}</p>
-      <p class="text">状态：{{ info.state }}</p>
-    </el-dialog>
   </div>
 </template>
 
@@ -48,13 +39,11 @@ export default {
   name: 'linksData',
   props: {
     tableData: null,
+    total: null,
   },
   components: {},
   data: () => ({
     currentPage: 1,
-    dialog: false,
-    info: {},
-    pic: require('@/assets/logo.png'),
   }),
   created() {},
   computed: {},
@@ -65,24 +54,8 @@ export default {
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
     },
-    addData(index) {
-      if (index !== undefined) {
-        let data = this.tableData[index];
-      } else {
-        this.form = {};
-      }
-      this.$router.push({ path: './detail' });
-    },
-    deleteRow(index, rows) {
-      rows.splice(index, 1);
-    },
-    openDialog(index) {
-      if (index !== undefined) {
-        let data = JSON.parse(JSON.stringify(this.tableData[index]));
-        data[`index`] = index;
-        this.$set(this, `info`, data);
-      }
-      this.dialog = true;
+    handleDelete(item) {
+      this.$emit('delete', item);
     },
   },
 };

src/layout/links/linksForm.vue

@@ -4,24 +4,13 @@
       <el-col :span="24" class="linksForm">
         <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="名称">
-            <el-input v-model="form.title" placeholder="请输入名称"></el-input>
+            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
           </el-form-item>
           <el-form-item label="相关链接">
             <el-input v-model="form.url" placeholder="请输入相关链接"></el-input>
           </el-form-item>
-          <el-form-item label="图片地址">
-            <el-upload
-              class="upload-demo"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :before-remove="beforeRemove"
-              multiple
-              :limit="1"
-              :file-list="fileList"
-            >
-              <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
+          <el-form-item label="网站logo" prop="pic">
+            <upload :limit="1" :data="form.pic" type="pic" :url="'/files/links/upload'" @upload="uploadSuccess"></upload>
           </el-form-item>
           <el-form-item>
             <el-button @click="handleCancel">返回</el-button>
@@ -34,12 +23,15 @@
 </template>
 
 <script>
+import upload from '@/components/upload.vue';
 export default {
   name: 'linksForm',
   props: {
     form: null,
   },
-  components: {},
+  components: {
+    upload,
+  },
   data: () => ({
     fileList: [],
   }),
@@ -47,10 +39,10 @@ export default {
   computed: {},
   methods: {
     handleEdit() {
-      this.handleCancel();
+      this.$emit('submitDate', { data: this.form, id: this.form.id });
     },
     handleCancel() {
-      this.$router.push({ path: './index' });
+      this.$router.push({ path: '/links/index' });
     },
     handleRemove(file, fileList) {
       console.log(file, fileList);
@@ -61,6 +53,9 @@ export default {
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`);
     },
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
   },
 };
 </script>

src/layout/links/searchInfo.vue

@@ -27,7 +27,7 @@ export default {
   computed: {},
   methods: {
     addData() {
-      this.$router.push({ path: './detail' });
+      this.$router.push({ path: '/links/detail' });
     },
   },
 };

src/layout/site/siteMain.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="siteMain">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="网站logo" prop="logo">
+            <upload
+              :limit="1"
+              :data="form.logo"
+              type="banner"
+              :url="`/files/admin/site/banner_${new Date().getTime()}/upload`"
+              @upload="uploadSuccess"
+            ></upload>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="content">
+            <wang-editor v-model="form.content" placeholder="请输入联系方式"></wang-editor>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submit()">保存</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload.vue';
+import WangEditor from '@/components/wang-editor.vue';
+export default {
+  name: 'siteMain',
+  props: {
+    form: null,
+  },
+  components: {
+    WangEditor,
+    upload,
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+    submit() {
+      console.log('保存成功');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/router/index.js

@@ -16,6 +16,11 @@ export default new Router({
       path: '/government/index',
       component: () => import('../views/government/index.vue'),
     },
+    // 站点信息
+    {
+      path: '/site/index',
+      component: () => import('../views/site/index.vue'),
+    },
     // 友情链接管理
     {
       path: '/links/index',

src/store/index.js

@@ -1,11 +1,14 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import link from './link';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  modules: {
+    link,
+  },
   state: {},
   mutations: {},
   actions: {},
-  modules: {},
 });

src/store/link.js

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

src/util/axios-wrapper.js

@@ -46,6 +46,10 @@ export default class AxiosWrapper {
     return this.$request(uri, data, query, options);
   }
 
+  $delete(uri, data = {}, router, query, options = {}) {
+    options = { ...options, method: 'delete' };
+    return this.$request(uri, data, query, options, router);
+  }
   async $request(uri, data, query, options) {
     // TODO: 合并query和options
     if (_.isObject(query) && _.isObject(options)) {

src/views/links/detail.vue

@@ -6,7 +6,7 @@
           <topInfo :topTitle="topTitle"></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <linksForm :form="form"></linksForm>
+          <linksForm :form="form" @submitDate="updateDate"></linksForm>
         </el-col>
       </el-col>
     </el-row>
@@ -16,6 +16,8 @@
 <script>
 import topInfo from '@/layout/public/top.vue';
 import linksForm from '@/layout/links/linksForm.vue';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('link');
 export default {
   name: 'detail',
   props: {},
@@ -27,9 +29,41 @@ export default {
     topTitle: '友情链接编辑',
     form: {},
   }),
-  created() {},
-  computed: {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
+  },
+  methods: {
+    ...mapActions(['fetch', 'create', 'update']),
+    async search() {
+      if (this.$route.query.id) {
+        const res = await this.fetch(this.id);
+        this.$set(this, `form`, res.data);
+      }
+    },
+    async updateDate({ id, data }) {
+      console.log(id, data);
+      let res;
+      let msg;
+      if (id) {
+        res = await this.update(data);
+        msg = `${this.keyWord}修改成功`;
+      } else {
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
+      }
+      if (this.$checkRes(res, msg)) this.$router.push({ path: '/links/index' });
+    },
+  },
 };
 </script>
 

src/views/links/index.vue

@@ -9,7 +9,7 @@
           <searchInfo></searchInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <linksData :tableData="tableData"></linksData>
+          <linksData :tableData="tableData" :total="total" @delete="deleteData"></linksData>
         </el-col>
       </el-col>
     </el-row>
@@ -20,6 +20,8 @@
 import topInfo from '@/layout/public/top.vue';
 import searchInfo from '@/layout/links/searchInfo.vue';
 import linksData from '@/layout/links/linksData.vue';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('link');
 export default {
   name: 'index',
   props: {},
@@ -30,24 +32,29 @@ export default {
   },
   data: () => ({
     topTitle: '友情链接管理',
-    tableData: [
-      {
-        title: '百度',
-        url: 'http://www.baidu.com',
-        pic: '/LINKS_PATH/20170512/20170512152818.jpg',
-        state: '关闭',
-      },
-      {
-        title: '十条数据',
-        url: 'http://www.baidu.com',
-        pic: '/LINKS_PATH/20170512/20170512152818.jpg',
-        state: '关闭',
-      },
-    ],
+    tableData: [],
+    total: 0,
   }),
-  created() {},
+  created() {
+    this.search();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...mapActions(['query', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `tableData`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    async deleteData(item) {
+      console.log(item.id);
+      const res = await this.delete(item.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
+  },
 };
 </script>
 

src/views/site.vue/index.vue

@@ -1,19 +0,0 @@
-<template>
-  <div id="index">
-    <p>index</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'index',
-  props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/site/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="top">
+        <topInfo :topTitle="topTitle"></topInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <siteMain :form="form"></siteMain>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import siteMain from '@/layout/site/siteMain.vue';
+
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //头部信息
+    siteMain, //站点信息
+  },
+  data: () => ({
+    topTitle: '站点信息管理',
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 20px;
+  margin: 10px 20px;
+  border: 1px solid #ccc;
+  width: 96%;
+}
+</style>

vue.config.js

@@ -22,6 +22,14 @@ module.exports = {
         changeOrigin: true,
         ws: true,
       },
+      '/files': {
+        target: 'http://smart.cc-lotus.info',
+      },
+      '/api': {
+        target: 'http://10.16.9.108:9000',
+        changeOrigin: true,
+        ws: true,
+      },
     },
   },
 };