dvcp_v2_webapp/packages/party/AppPartyHistoryClass/AppPartyHistoryClass.vue

<template>
  <section class="AppFoundingHundred">
    <ai-list v-if="showList">
      <template #title>
        <ai-title title="党员学习" isShowBottomBorder></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template slot="left">
            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd"
              >添加</el-button
            >
          </template>
          <template slot="right">
            <el-input
              v-model="search.title"
              class="search-input"
              size="small"
              placeholder="请输入课程主题"
              clearable
              v-throttle="
                () => {
                  (search.current = 1), getList();
                }
              "
              @clear="(search.current = 1), (search.title = ''), getList()"
              suffix-icon="iconfont iconSearch"
            >
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          stripe
          :total="total"
          :current.sync="page.current"
          :size.sync="page.size"
          style="margin-top: 10px"
          @getList="getList"
        >
          <el-table-column
            slot="options"
            label="操作"
            align="center"
            width="230px"
            fixed="right"
          >
            <div slot-scope="{ row }" class="table-options">
              <el-button
                type="text"
                :title="row.status == 0 ? '发布' : '取消发布'"
                @click="handleChange(row)"
                >{{ row.status == 0 ? "发布" : "取消发布" }}</el-button
              >
              <el-button type="text" title="添加" @click="handleAddSeries(row)"
                >添加剧集</el-button
              >
              <el-button type="text" title="详情" @click="handleDetail(row)"
                >详情</el-button
              >
              <el-button type="text" title="编辑" @click="handleEdit(row)"
                >编辑</el-button
              >
              <el-button type="text" title="删除" @click="handleDelete(row)"
                >删除</el-button
              >
            </div>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <component
      :is="comp"
      v-else
      :row="row"
      :instance="instance"
      :dict="dict"
      :permissions="permissions"
      @back="back"
      :isEdit="isEdit"
    ></component>
  </section>
</template>

<script>
import partyClassAdd from "./components/partyClassAdd";
import seriesManage from "./components/seriesManage";
import { mapState } from "vuex";

export default {
  name: "AppPartyHistoryClass",
  label: "党员学习",
  components: { partyClassAdd, seriesManage },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      comp: "",
      tableData: [],
      total: 0,
      row: {},
      showList: true,
      search: {},
      topOrgId: "",
      partyList: [],
      treeData: [],
      organizationId: "",
      organizationName: "",
      isEdit: false,
      page: {
        current: 1,
        size: 10,
      },
    };
  },
  computed: {
    ...mapState(["user"]),
    colConfigs() {
      return [
        { label: "课程主题", prop: "title" },
        {
          label: "更新状态",
          render: (h, { row }) => [
            <span>
              {" "}
              {this.dict.getLabel(
                "classroomUpdateStatus",
                row.updateStatus
              )}{" "}
            </span>,
          ],
        },
        { label: "更新时间", prop: "updateDate" },
        { label: "发布时间", prop: "createDate" },
        {
          label: "发布状态",
          render: (h, { row }) => [
            <span> {this.dict.getLabel("newsCenterStatus", row.status)} </span>,
          ],
        },
        { label: "发布组织", prop: "organizationName" },
        { slot: "options" },
      ];
    },
  },
  methods: {
    handleChange(row) {
      this.$confirm(`是否确定要${row.status == 0 ? "发布" : "取消发布"}?`).then(
        (_) => {
          this.instance
            .post("/app/apppartyclassroom/addOrUpdate", {
              id: row.id,
              status: row.status == 0 ? 1 : 0,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success(
                  `${row.status == 0 ? "发布成功" : "取消发布成功"}`
                );
                this.getList();
              }
            });
        }
      );
    },
    handleAddSeries(row) {
      this.showList = false;
      this.comp = "seriesManage";
      this.row = row;
    },
    handleDelete({ id }) {
      this.$confirm("确定要删除吗？").then((_) => {
        this.instance
          .post("/app/apppartyclassroom/delete", null, {
            params: {
              ids: id,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
      });
    },
    handleEdit(row) {
      this.showList = false;
      this.isEdit = true;
      this.comp = "partyClassAdd";
      this.row = row;
    },
    handleDetail(row) {
      this.showList = false;
      this.isEdit = false;
      this.comp = "partyClassAdd";
      this.row = row;
    },
    changeParty(e) {
      if (!e.length) return;
      this.organizationName = e[0]?.name;
      this.resetSearch();
    },
    resetSearch() {
      this.page.current = 1;
      this.getList();
    },
    // 点击树节点
    handleNodeClick(data) {
      this.partyList = data;
    },
    back() {
      this.comp = "";
      this.showList = true;
      this.isEdit = false;

      this.getList();
    },
    handleAdd() {
      this.comp = "partyClassAdd";
      this.showList = false;
      this.isEdit = true;
      this.row = {};
    },
    getList() {
      this.instance
        .post("/app/apppartyclassroom/list", null, {
          params: {
            ...this.page,
            ...this.search,
          },
        })
        .then((res) => {
          if (res?.data) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        });
    },
  },
  created() {
    this.topOrgId = this.user.info?.organizationId;
    this.organizationId = this.user.info?.organizationId;
    this.organizationName = this.user.info?.organizationName;
    this.dict.load("classroomUpdateStatus", "newsCenterStatus");
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.AppFoundingHundred {
  height: 100%;
}
</style>