admin/src/views/web/news/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <c-search :is_search="true" :fields="fields" @search="btSearch">
            <template #type>
              <el-option v-for="i in typeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #place>
              <el-option v-for="i in placeList" :key="i._id" :label="i.label" :value="i.value"></el-option>
            </template>
          </c-search>
        </el-col>
        <el-col :span="24" class="two">
          <c-button @toAdd="toAdd"></c-button>
        </el-col>
        <el-col :span="24" class="thr">
          <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @edit="toEdit" @del="toDel"> </data-table>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('news');
const { mapActions: dictdata } = createNamespacedHelpers('dictdata');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      // 查询
      searchInfo: {},
      fields: [
        { label: '序号', options: { type: 'index' } },
        {
          label: '新闻类型',
          model: 'type',
          type: 'select',
          format: (i) => {
            let data = this.typeList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
          isSearch: true,
        },
        { label: '名称', model: 'title', isSearch: true },
        { label: '来源', model: 'origin' },
        { label: '发布时间', model: 'create_time' },
        {
          label: '展示位置',
          model: 'place',
          type: 'select',
          format: (i) => {
            let data = this.placeList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
          isSearch: true,
        },
        {
          label: '是否启用',
          model: 'is_use',
          format: (i) => {
            let data = this.isuseList.find((r) => r.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      list: [],
      total: 0,
      // 字典
      // 是否启用
      isuseList: [],
      // 展示位置
      placeList: [],
      // 新闻类型
      typeList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'delete']),
    ...dictdata({ dQuery: 'query' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info, ...this.searchInfo });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    btSearch(query) {
      this.$set(this, `searchInfo`, query);
      this.search();
    },
    // 新增
    toAdd() {
      this.$router.push({ path: '/web/news/add' });
    },
    // 修改
    toEdit({ data }) {
      this.$router.push({ path: '/web/news/add', query: { id: data._id } });
    },
    async toDel({ data }) {
      let res = await this.delete(data._id);
      if (this.$checkRes(res, '删除信息成功', res.errmsg)) this.search();
    },
    // 字典表
    async searchOther() {
      let res;
      // 是否启用
      res = await this.dQuery({ type: 'is_use' });
      if (this.$checkRes(res)) {
        this.$set(this, `isuseList`, res.data);
      }
      // 展示位置
      res = await this.dQuery({ type: 'banner_place' });
      if (this.$checkRes(res)) {
        this.$set(this, `placeList`, res.data);
      }
      // 新闻类型
      res = await this.dQuery({ type: 'news_type' });
      if (this.$checkRes(res)) {
        this.$set(this, `typeList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>