web-cms/src/views/news/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="6" class="left">
          <el-col :span="24" class="top">
            <el-col :span="18" class="title">
              栏目信息
            </el-col>
            <el-col :span="6" class="btn">
              <el-button type="primary" size="mini" @click="dialog = true">添加栏目</el-button>
            </el-col>
          </el-col>
          <el-col :span="24" class="down">
            <data-table
              :fields="fields"
              :opera="opera"
              :data="columnList"
              :usePage="false"
              @query="search"
              @views="toViews"
              @edit="toEdit"
              @delete="toDelete"
            ></data-table>
          </el-col>
        </el-col>
        <el-col :span="18" class="right">
          <el-col :span="24" class="top">
            <el-col :span="18" class="title">
              新闻信息
            </el-col>
            <el-col :span="6" class="btn">
              <el-button type="primary" size="mini" @click="$router.push({ path: '/news/detail' })">添加信息</el-button>
            </el-col>
          </el-col>
          <el-col :span="24" class="down">
            <data-table
              :fields="newsfields"
              :opera="newsopera"
              :data="list"
              :total="total"
              @query="newsSearch"
              @edit="newsEdit"
              @delete="newsDelete"
            ></data-table>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="栏目信息管理" width="40%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
      <data-form :data="form" :fields="fields" :rules="{}" @save="toSave">
        <template #options="{item}">
          <template v-if="item.model === 'site'">
            <el-option v-for="(i, index) in siteList" :key="index" :label="i.name" :value="i.site"></el-option>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
import dataTable from '@common/src/components/frame/filter-page-table.vue';
import dataForm from '@common/src/components/frame/form.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: column } = createNamespacedHelpers('column');
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: { dataTable, dataForm },
  data: function() {
    return {
      // 栏目列表
      opera: [
        {
          label: '查看信息',
          method: 'views',
        },
        {
          label: '编辑',
          method: 'edit',
        },
        {
          label: '删除',
          method: 'delete',
        },
      ],
      fields: [
        { label: '栏目名称', prop: 'name', model: 'name' },
        { label: '栏目位置', prop: 'site', model: 'site', type: 'select' },
      ],
      columnList: [],
      dialog: false,
      form: {},
      // 位置信息
      siteList: [
        { name: '问卷调查', site: 'wjdc' },
        { name: '行业研究', site: 'hyyj' },
        { name: '科技咨讯', site: 'kjzx' },
        { name: '工作动态', site: 'gzdt' },
        { name: '通知通告', site: 'tgtg' },
        { name: '技术前沿', site: 'jsqy' },
        { name: '政策解读', site: 'zcjd' },
        { name: '科技培训', site: 'kjpx' },
        { name: '科研动态', site: 'kydt' },
        { name: '学术交流', site: 'xsjl' },
        { name: '院地合作', site: 'ydhz' },
        { name: '热点事件', site: 'rdsj' },
        { name: '省内动态', site: 'sndt' },
      ],
      // 信息列表
      newsopera: [
        {
          label: '编辑',
          method: 'edit',
        },
        {
          label: '删除',
          method: 'delete',
        },
      ],
      newsfields: [
        { label: '所属栏目', prop: 'column_name' },
        { label: '信息标题', prop: 'title' },
        { label: '信息来源', prop: 'origin' },
        { label: '发布时间', prop: 'publish_time' },
      ],
      list: [],
      total: 0,
    };
  },
  async created() {
    await this.search();
    await this.newsSearch();
  },
  methods: {
    ...column({ columnQuery: 'query', columnFetch: 'fetch', columnCreate: 'create', columnUpdate: 'update', columnDelete: 'delete' }),
    ...news(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询栏目数据
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.columnQuery({ skip, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `columnList`, res.data);
      }
    },
    // 修改栏目数据
    toEdit({ data }) {
      this.$set(this, `form`, data);
      this.dialog = true;
    },
    // 删除栏目数据
    async toDelete({ data }) {
      let res = await this.columnDelete(data.id);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息删除成功',
          type: 'success',
        });
        this.search();
      }
    },
    // 保存栏目数据
    async toSave({ data }) {
      if (data.id) {
        let res = await this.columnUpdate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '信息修改成功',
            type: 'success',
          });
          this.handleClose();
        }
      } else {
        let res = await this.columnCreate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '信息创建成功',
            type: 'success',
          });
          this.handleClose();
        }
      }
    },
    // 取消栏目数据
    handleClose() {
      this.form = {};
      this.dialog = false;
      this.search();
    },
    // 查看信息
    toViews({ data }) {
      this.newsSearch({ column_id: data.id });
    },
    // 新闻信息列表
    async newsSearch({ skip = 0, limit = 10, column_id, ...info } = {}) {
      if (column_id) info.column_id = column_id;
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 修改
    newsEdit({ data }) {
      this.$router.push({ path: '/news/detail', query: { id: data.id } });
    },
    // 删除
    async newsDelete({ data }) {
      let res = await this.delete(data.id);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息删除成功',
          type: 'success',
        });
        this.newsSearch();
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .left {
    border: 1px solid #ccc;
    .top {
      height: 50px;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      .title {
        padding: 2px 0;
        font-size: 18px;
        font-weight: bold;
      }
      .btn {
        text-align: right;
      }
    }
    .down {
      min-height: 670px;
    }
  }
  .right {
    border: 1px solid #ccc;
    .top {
      height: 50px;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      .title {
        padding: 2px 0;
        font-size: 18px;
        font-weight: bold;
      }
      .btn {
        text-align: right;
      }
    }
    .down {
      min-height: 670px;
    }
  }
}
</style>