更新科技政策（详情未完）

src/components/policy/detail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="policy">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="fenlei">
+            <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
+          </el-col>
+          <el-col :span="19" class="rightcont">
+            <rightcont :columnName="columnName" :contentList="contentList" :total="total"></rightcont>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import logo from '@/layout/index/logo.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import foot from '@/layout/index/foot.vue';
+import fenlei from '@/layout/policy/fenlei.vue';
+import rightcont from '@/layout/policy/rightcont.vue';
+
+export default {
+  name: 'policy',
+  props: {
+    info: null, //站点信息
+    liebiaoList: null,
+    columnName: null, //栏目标题
+    contentList: null, //内容
+    total: null,
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    fenlei, //左边分类
+    rightcont, //右边栏
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    clickList({ id }) {
+      console.log(id);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+.main {
+  min-height: 600px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .fenlei {
+  float: left;
+  width: 240px;
+  min-height: 600px;
+  margin: 0 10px 0 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.main .rightcont {
+  float: left;
+  width: 950px;
+  min-height: 600px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.main .link {
+  float: left;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/components/policy/policy.vue

@@ -17,10 +17,10 @@
       <el-col :span="24" class="main">
         <div class="w_1200">
           <el-col :span="5" class="fenlei">
-            <fenlei></fenlei>
+            <fenlei :liebiaoList="liebiaoList" v-on="$listeners"></fenlei>
           </el-col>
           <el-col :span="19" class="rightcont">
-            <rightcont :zongheList="zongheList" :contentList="contentList"></rightcont>
+            <rightcont :columnName="columnName" :contentList="contentList" :total="total"></rightcont>
           </el-col>
         </div>
       </el-col>
@@ -45,8 +45,10 @@ export default {
   name: 'policy',
   props: {
     info: null, //站点信息
-    zongheList: null, //标题
+    liebiaoList: null,
+    columnName: null, //栏目标题
     contentList: null, //内容
+    total: null,
   },
   components: {
     top, //头部
@@ -59,7 +61,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    clickList({ id }) {
+      console.log(id);
+    },
+  },
 };
 </script>
 

src/layout/policy/fenlei.vue

@@ -6,16 +6,18 @@
     </el-col>
     <el-col>
       <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
-        <el-menu-item index="1"><span slot="title">综合政策指导</span></el-menu-item>
-        <el-menu-item index="2"><span slot="title">科技成果转化</span></el-menu-item>
-        <el-menu-item index="3"><span slot="title">科技人才</span></el-menu-item>
-        <el-menu-item index="4"><span slot="title">知识产权</span></el-menu-item>
-        <el-menu-item index="5"><span slot="title">税收与金融</span></el-menu-item>
-        <el-menu-item index="6"><span slot="title">创新平台园区</span></el-menu-item>
-        <el-menu-item index="7"><span slot="title">政策解读</span></el-menu-item>
-        <el-menu-item index="8"><span slot="title">政策书籍</span></el-menu-item>
-        <el-menu-item index="9"><span slot="title">政策报告</span></el-menu-item>
-        <el-menu-item index="10"><span slot="title">政策卡片</span></el-menu-item>
+        <el-menu-item index="1" v-for="(item, index) in liebiaoList" :key="index"
+          ><span slot="title" @click="clickUrl(item.id)">{{ item.name }}</span></el-menu-item
+        >
+        <!-- <el-menu-item index="2"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="3"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="4"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="5"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="6"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="7"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="8"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="9"><span slot="title"></span></el-menu-item>
+        <el-menu-item index="10"><span slot="title"></span></el-menu-item> -->
       </el-menu>
     </el-col>
   </div>
@@ -24,7 +26,9 @@
 <script>
 export default {
   name: 'fenlei',
-  props: {},
+  props: {
+    liebiaoList: null,
+  },
   components: {},
   data: () => ({
     src: require('@/assets/swfl.png'),
@@ -32,6 +36,9 @@ export default {
   created() {},
   computed: {},
   methods: {
+    clickUrl(id) {
+      this.$emit('clickLists', { id });
+    },
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },

src/layout/policy/rightcont.vue

@@ -2,13 +2,15 @@
   <div id="rightcont">
     <el-col class="zhengce">
       <el-col :span="24" class="topTitle">
-        {{ zongheList.title }}
+        {{ columnName }}
       </el-col>
       <el-col :span="24" class="info">
         <ul>
-          <li v-for="(item, index) in contentList" :key="index">
+          <li v-for="(item, index) in contentList" :key="index" @click="$router.push({ path: '/policy/detail', query: { id: item.id } })">
             <el-col :span="21" class="title textOver">{{ item.title }}</el-col>
-            <el-col :span="3" class="date">{{ item.date }}</el-col>
+            <el-col :span="3" class="date">
+              {{ item.meta && item.meta.createdAt ? new Date(item.meta.createdAt).toLocaleDateString() : '' || '' }}
+            </el-col>
           </li>
         </ul>
         <el-col class="page" :span="24">
@@ -17,7 +19,7 @@
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             layout="total,  prev, pager, next, jumper"
-            :total="1"
+            :total="total"
           >
           </el-pagination>
         </el-col>
@@ -30,8 +32,9 @@
 export default {
   name: 'rightcont',
   props: {
-    zongheList: null,
+    columnName: null,
     contentList: null,
+    total: null,
   },
   components: {},
   data: () => ({

src/router/index.js

@@ -21,6 +21,11 @@ const routes = [
     name: 'policy',
     component: () => import('../views/policy/policy.vue'),
   },
+  {
+    path: '/policy/detail',
+    name: 'detail',
+    component: () => import('../views/policy/detail.vue'),
+  },
   // 科技超市
   {
     path: '/supermaket/supermarket',

src/store/index.js

@@ -2,13 +2,16 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import site from './site';
 import link from './link';
-
+import policyColumn from './policyColumn';
+import policyNews from './policyNews';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
     site,
     link,
+    policyColumn,
+    policyNews,
   },
   state: {},
   mutations: {},

src/store/policyColumn.js

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

src/store/policyNews.js

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

src/views/government/government.vue

@@ -176,7 +176,7 @@ export default {
         this.$message.error(res.errmsg ? res.errmsg : 'error');
       }
     },
-    // 查询友情链接
+    //查询标题
     async searchLink({ ...info } = {}) {
       const res = await this.query({ ...info });
       if (this.$checkRes(res)) {

src/views/policy/detail.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="detail">
+    <policy-detail
+      :info="info"
+      :zongheList="zongheList"
+      :contentList="contentList"
+      :total="total"
+      :columnName="columnName"
+      :liebiaoList="liebiaoList"
+      @clickLists="submit"
+    ></policy-detail>
+  </div>
+</template>
+
+<script>
+import policyDetail from '@/components/policy/policy.vue';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: mapSite } = createNamespacedHelpers('site');
+const { mapActions: mappolicyColumn } = createNamespacedHelpers('policyColumn');
+const { mapActions: mappolicyNews } = createNamespacedHelpers('policyNews');
+export default {
+  name: 'detail',
+  props: {},
+
+  components: {
+    policyDetail,
+  },
+  data: () => ({
+    liebiaoList: [],
+    info: {},
+    zongheList: {},
+    contentList: [],
+    total: 1,
+    leftId: '',
+    columnName: '',
+  }),
+  created() {
+    this.searchSite();
+    this.policyColumn();
+  },
+  computed: {},
+  methods: {
+    ...mapSite(['showInfo']),
+    ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
+    ...mappolicyNews({ policyNew: 'query' }),
+    // 查询站点信息
+    async searchSite() {
+      let res = await this.showInfo();
+      let object = JSON.parse(JSON.stringify(res.data));
+      if (object) {
+        this.$set(this, `info`, res.data);
+      } else {
+        this.$message.error(res.errmsg ? res.errmsg : 'error');
+      }
+    },
+    async policyColumn({ ...info } = {}) {
+      const res = await this.policyColumns({ ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `liebiaoList`, res.data);
+      }
+    },
+    submit({ id }) {
+      this.$set(this, `leftId`, id);
+      this.searchRight();
+    },
+    async searchRight({ skip = 0, limit = 10, column_id } = {}) {
+      const res = await this.policyNew({ skip, limit, column_id: this.leftId });
+      for (const val of res.data) {
+        const result = await this.policyfetch(val.column_id);
+        val.column_name = result.data.name;
+      }
+      this.$set(this, `contentList`, res.data);
+      this.$set(this, `total`, res.data.length);
+      for (const val of res.data) {
+        this.$set(this, `columnName`, val.column_name);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/policy/policy.vue

@@ -1,45 +1,81 @@
 <template>
   <div id="policy">
-    <policy-detail :info="info" :zongheList="zongheList" :contentList="contentList"></policy-detail>
+    <policy-detail
+      :info="info"
+      :zongheList="zongheList"
+      :contentList="contentList"
+      :total="total"
+      :columnName="columnName"
+      :liebiaoList="liebiaoList"
+      @clickLists="submit"
+    ></policy-detail>
   </div>
 </template>
 
 <script>
 import policyDetail from '@/components/policy/policy.vue';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: mapSite } = createNamespacedHelpers('site');
+const { mapActions: mappolicyColumn } = createNamespacedHelpers('policyColumn');
+const { mapActions: mappolicyNews } = createNamespacedHelpers('policyNews');
 export default {
   name: 'policy',
   props: {},
+
   components: {
     policyDetail,
   },
   data: () => ({
-    info: {
-      logo: require('@/assets/logo.png'),
-      banquan: '版权所有：吉林省计算中心',
-      jishu: '技术支持：长春市福瑞科技有限公司',
-      youbian: '邮编：130000',
-      chuanzhen: '传真：239823982',
-      address: '地址：吉林省长春市朝阳区前进大街1244号',
-      phone: '电话：0431-1234567',
-      email: '邮箱：123456@163.com',
-    },
-    zongheList: {
-      title: '综合指导政策',
-    },
-    contentList: [
-      {
-        title: '标题',
-        date: '2019-01-01',
-      },
-      {
-        title: '14条数据',
-        date: '2019-01-01',
-      },
-    ],
+    liebiaoList: [],
+    info: {},
+    zongheList: {},
+    contentList: [],
+    total: 1,
+    leftId: '',
+    columnName: '',
   }),
-  created() {},
+  created() {
+    this.searchSite();
+    this.policyColumn();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...mapSite(['showInfo']),
+    ...mappolicyColumn({ policyColumns: 'query', policyfetch: 'fetch' }),
+    ...mappolicyNews({ policyNew: 'query' }),
+    // 查询站点信息
+    async searchSite() {
+      let res = await this.showInfo();
+      let object = JSON.parse(JSON.stringify(res.data));
+      if (object) {
+        this.$set(this, `info`, res.data);
+      } else {
+        this.$message.error(res.errmsg ? res.errmsg : 'error');
+      }
+    },
+    async policyColumn({ ...info } = {}) {
+      const res = await this.policyColumns({ ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `liebiaoList`, res.data);
+      }
+    },
+    submit({ id }) {
+      this.$set(this, `leftId`, id);
+      this.searchRight();
+    },
+    async searchRight({ skip = 0, limit = 10, column_id } = {}) {
+      const res = await this.policyNew({ skip, limit, column_id: this.leftId });
+      for (const val of res.data) {
+        const result = await this.policyfetch(val.column_id);
+        val.column_name = result.data.name;
+      }
+      this.$set(this, `contentList`, res.data);
+      this.$set(this, `total`, res.data.length);
+      for (const val of res.data) {
+        this.$set(this, `columnName`, val.column_name);
+      }
+    },
+  },
 };
 </script>