|
@@ -0,0 +1,99 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="index">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24" class="top">
|
|
|
|
+ <topInfo :topTitle="topTitle"></topInfo>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="24" class="main">
|
|
|
|
+ <el-col :span="7" class="column">
|
|
|
|
+ <column :columnInfo="columnInfo" @delete="deleteData" @list="handleList"></column>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="17" class="message">
|
|
|
|
+ <messageInfo :message="message" :total="total" @delete="deleteMess"></messageInfo>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import topInfo from '@/layout/public/top.vue';
|
|
|
|
+import column from '@/layout/record/column.vue';
|
|
|
|
+import messageInfo from '@/layout/record/messageInfo.vue';
|
|
|
|
+import { createNamespacedHelpers, mapGetters } from 'vuex';
|
|
|
|
+const { mapActions: mapColumn } = createNamespacedHelpers('recordColumn');
|
|
|
|
+const { mapActions: mapNews } = createNamespacedHelpers('recordNews');
|
|
|
|
+export default {
|
|
|
|
+ name: 'index',
|
|
|
|
+ props: {},
|
|
|
|
+ components: {
|
|
|
|
+ topInfo, //头部信息
|
|
|
|
+ column, //栏目列表
|
|
|
|
+ messageInfo, //信息列表
|
|
|
|
+ },
|
|
|
|
+ data: () => ({
|
|
|
|
+ topTitle: '科技数据',
|
|
|
|
+ columnInfo: [],
|
|
|
|
+ message: [],
|
|
|
|
+ total: 0,
|
|
|
|
+ leftId: null,
|
|
|
|
+ }),
|
|
|
|
+ created() {
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ computed: {},
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapColumn(['query', 'delete', 'fetch']),
|
|
|
|
+ ...mapNews({ queryList: 'query', deleteList: 'delete' }),
|
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
|
+ const res = await this.query({ skip, limit, ...info });
|
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
|
+ this.$set(this, `columnInfo`, res.data);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async deleteData(item) {
|
|
|
|
+ const res = await this.delete(item.id);
|
|
|
|
+ this.$checkRes(res, '删除成功', '删除失败');
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ handleList({ data }) {
|
|
|
|
+ this.$set(this, `leftId`, data.id);
|
|
|
|
+ this.searchRight();
|
|
|
|
+ },
|
|
|
|
+ async searchRight({ skip = 0, limit = 10, column_id } = {}) {
|
|
|
|
+ const res = await this.queryList({ skip, limit, column_id: this.leftId });
|
|
|
|
+ for (const val of res.data) {
|
|
|
|
+ const result = await this.fetch(val.column_id);
|
|
|
|
+ val.column_name = result.data.name;
|
|
|
|
+ }
|
|
|
|
+ this.$set(this, `message`, res.data);
|
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
|
+ },
|
|
|
|
+ async deleteMess(item) {
|
|
|
|
+ const res = await this.deleteList(item.id);
|
|
|
|
+ this.$checkRes(res, '删除成功', '删除失败');
|
|
|
|
+ this.search();
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.main {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ margin: 10px 20px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ width: 96%;
|
|
|
|
+}
|
|
|
|
+.column {
|
|
|
|
+ width: 258px;
|
|
|
|
+ min-height: 500px;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ margin: 0 20px 0 0;
|
|
|
|
+}
|
|
|
|
+.message {
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ min-height: 500px;
|
|
|
|
+ width: 715px;
|
|
|
|
+}
|
|
|
|
+</style>
|