h5-service-web/src/views/PartyshistoryRecoder/studyQuestion.vue

<template>
  <div>
    <lx-header
      icon="md-apps"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="题库管理"
    >
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <div>
            <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
            <Input
              v-model="select.keyword"
              placeholder="请输入关键字"
              style="width: 180px"
            ></Input>
          </div>

          <Button
            style="margin-left: 10px"
            type="primary"
            @click="select = { page: 1, keyword: '' }"
            >重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="doSearch"
            >查询</Button
          >
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="$refs['addQuestions'].show()"
            >新增</Button
          >
        </div>
      </slot>
    </lx-header>

    <xy-table
      :list="list"
      :total="total"
      :table-item="table"
      @delete="deleteitem"
      @editor="
        (row) => {
          $refs['addQuestions'].setId(row.id);
          $refs['addQuestions'].setType('editor')
          $refs['addQuestions'].show();
        }
      "
      @pageSizeChange="pageSizeChange"
      @pageIndexChange="pageChange"
    >
      <template v-slot:btns v-if="type == 0"> </template>
    </xy-table>
    <addQuestions ref="addQuestions" @refresh="load"></addQuestions>
  </div>
</template>

<script>
import { index, destroy, show } from "@/api/party/studyQuestion";
import { index as activityIndex } from "@/api/activity/index";

import addQuestions from "@/views/PartyshistoryRecoder/components/addQuestions.vue";

export default {
  components: {
    addQuestions,
  },
  data() {
    return {
      select: {
        page: 1,
        page_size: 20,
        keyword: "",
        activity_list_id: 7,
      },
      listActivity: [],
      total: 0,
      list: [],
      table: [
        {
          prop: "title",
          label: "题目",
          minWidth: 220,
          align: "left",
        },
        {
          prop: "created_at",
          label: "创建信息",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          prop: "updated_at",
          label: "更新时间",
          align: "left",
          width: 190,
          formatter: (v1, v2, value) => {
            return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
    };
  },
  methods: {
    async loadActivity() {
      const res = await activityIndex({
        page: 1,
        page_size: 999,
      });
      this.listActivity = res.data;
    },
    doSearch() {
      this.select.page = 1;
      this.load();
    },

    pageSizeChange(e) {
      this.select.page_size = e;
      this.select.page = 1;
      this.load();
    },
    async load() {
      const res = await index(this.select);
      this.total = res.total;
      this.list = res.data;
    },
    deleteitem(row) {
      destroy({
        id: row.id,
      }).then((res) => {
        this.load();
        this.$Message.success("操作成功");
      });
    },
    pageChange(e) {
      this.select.page = e;
      this.load();
    },
  },
  mounted() {
    this.load();
    this.loadActivity();
  },
  created() {
    let type = parseInt(this.$route.path.split("_")[1] || 0);
    this.type = this.select.is_auth = type;
  },
};
</script>

<style lang="scss" scoped>
.selects {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-bottom: 6px;
  }
}
</style>