1

src/store/column.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  columnInfo: `/api/affairs/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/index.js

@@ -5,6 +5,8 @@ import * as umutations from './user/mutations';
 import login from './login';
 import link from './link';
 import site from './site';
+import column from './column';
+import news from './news';
 
 Vue.use(Vuex);
 
@@ -16,5 +18,7 @@ export default new Vuex.Store({
     login,
     link,
     site,
+    column,
+    news,
   },
 });

src/store/news.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  newsInfo: `/api/affairs/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/index.vue

@@ -1,31 +1,252 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>index</p>
+      <el-col :span="24" class="main">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container">
+          <el-col :span="6" class="column">
+            <el-col :span="6" class="txt">
+              栏目列表
+            </el-col>
+            <el-col :span="18" class="btn">
+              <el-button type="primary" size="mini" @click="coldialog = true"><i class="el-icon-plus"></i></el-button>
+            </el-col>
+            <el-col :span="24">
+              <data-table
+                :fields="columnfields"
+                :opera="columnopera"
+                :data="column"
+                @view="coltoView"
+                @edit="coltoEdit"
+                @delete="coltoDelete"
+                :usePage="false"
+              ></data-table>
+            </el-col>
+          </el-col>
+          <el-col :span="18" class="news">
+            <el-col :span="6" class="txt">
+              信息列表
+            </el-col>
+            <el-col :span="18" class="btn">
+              <el-button type="primary" size="mini" @click="newdialog = true"><i class="el-icon-plus"></i></el-button>
+            </el-col>
+            <el-col :span="24">
+              <data-table :fields="newfields" :opera="newopera" :data="newslist" :total="total" @edit="newtoEdit" @delete="newtoDelete"></data-table>
+            </el-col>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog :visible.sync="coldialog" title="栏目" @close="coltoClose" width="30%">
+      <data-form :data="colform" :fields="turnBedRoomFields" :rules="{}" @save="turnSave">
+        <template #options="{item}">
+          <template v-if="item.model === 'site'">
+            <el-option label="图片新闻" value="tpxw"></el-option>
+            <el-option label="创新吉林" value="cxjl"></el-option>
+            <el-option label="国内动态" value="gndt"></el-option>
+            <el-option label="政务活动" value="zwhd"></el-option>
+            <el-option label="媒体聚焦" value="mtjj"></el-option>
+            <el-option label="通知公告" value="tzgg"></el-option>
+            <el-option label="asdasdasd" value="dasda"></el-option>
+          </template>
+        </template>
+      </data-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import breadcrumb from '@c/common/breadcrumb.vue';
+import dataTable from '@/components/frame/filter-page-table.vue';
+import dataForm from '@/components/frame/form.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapColumn } = createNamespacedHelpers('column');
+const { mapActions: mapNews } = createNamespacedHelpers('news');
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    breadcrumb,
+    dataTable,
+    dataForm,
+  },
   data: function() {
-    return {};
+    return {
+      // 栏目
+      columnopera: [
+        {
+          label: '查询信息',
+          icon: 'el-icon-view',
+          method: 'view',
+        },
+        {
+          label: '修改',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+        },
+      ],
+      columnfields: [{ label: '名称', prop: 'name' }],
+      column: [],
+      coldialog: false,
+      colform: {},
+      turnBedRoomFields: [
+        { label: '名称', model: 'name' },
+        { label: '所在位置', model: 'site', type: 'select' },
+      ],
+      // 信息
+      newopera: [
+        {
+          label: '修改',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+        },
+      ],
+      newfields: [
+        { label: '名称', model: 'title' },
+        { label: '所属栏目', model: 'column_name' },
+      ],
+      newslist: [],
+      total: 0,
+      column_id: '',
+    };
+  },
+  created() {
+    this.searchcolumn();
+  },
+  methods: {
+    ...mapColumn({ colquery: 'query', colfetch: 'fetch', coldelete: 'delete', colcreate: 'create', colupdate: 'update' }),
+    ...mapNews({ newquery: 'query', newfetch: 'fetch', newdelete: 'delete', newcreate: 'create', newupdate: 'update' }),
+    // 查询栏目
+    async searchcolumn() {
+      const res = await this.colquery();
+      if (this.$checkRes(res)) {
+        this.$set(this, `column`, res.data);
+      }
+    },
+    // 栏目修改
+    coltoEdit({ data }) {
+      this.coldialog = true;
+      this.$set(this, `colform`, data);
+    },
+    // 栏目删除
+    async coltoDelete({ data }) {
+      const res = await this.coldelete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '刪除成功',
+          type: 'success',
+        });
+        this.coltoClose();
+      }
+    },
+    // 栏目添加
+    async turnSave({ data }) {
+      if (data.id) {
+        const res = await this.colupdate(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+          this.coltoClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      } else {
+        const res = await this.colcreate(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '添加成功',
+            type: 'success',
+          });
+          this.coltoClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      }
+    },
+    // 栏目取消
+    coltoClose() {
+      this.form = {};
+      this.coldialog = false;
+      this.searchcolumn();
+    },
+    // 查询信息
+    coltoView({ data }) {
+      this.$set(this, `column_id`, data.id);
+      this.searchnews();
+    },
+    async searchnews({ skip = 0, limit = 10 } = {}) {
+      let res = await this.newquery({ skip, limit, column_id: this.column_id });
+      if (this.$checkRes(res)) {
+        for (const val of res.data) {
+          let result = await this.colfetch(val.column_id);
+          val.column_name = result.data.name;
+        }
+        console.log(res.data);
+        this.$set(this, `newslist`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 修改信息
+    newtoEdit({ data }) {
+      console.log(data);
+    },
+    // 删除信息
+    newtoDelete({ data }) {
+      console.log(data);
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .column {
+    min-height: 850px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    .txt {
+      margin: 0 0 15px 0;
+    }
+    .btn {
+      text-align: right;
+      margin: 0 0 15px 0;
+    }
+  }
+  .news {
+    min-height: 850px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    .txt {
+      margin: 0 0 15px 0;
+    }
+    .btn {
+      text-align: right;
+      margin: 0 0 15px 0;
+    }
+  }
+}
+</style>