xmhjc-front-end/src/views/XMHJC/topic/content/index.vue

<template>
  <div class="topicContent">
    <!-- <Banner /> -->
    <div class="content">
      <byTable
          :source="sourceList.data"
          :pagination="sourceList.pagination"
          :config="config"
          :loading="loading"
          highlight-current-row
          :action-list="[]"
          @get-list="getList">
        <template #slotName="{ item }">
          {{ item.createTime }}
        </template>
      </byTable>
    </div>
    <el-dialog title="回复列表" v-if="replyCommonModal" v-model="replyCommonModal" width="1000" class="replyCommonModal" v-loading="loading">
      <replyList :data="formData"></replyList>
      <template #footer>
        <el-button @click="replyCommonModal = false" size="large">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index.vue";
import { computed, ref } from "vue";
import replyList from "./replyList.vue";
const loading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
const replyCommonModal = ref(false);
const { proxy } = getCurrentInstance();
const config = computed(() => {
  return [
    {
        attrs: {
            label: "序号",
            prop: "id",
        },
    },
    {
      attrs: {
        label: "主题",
        prop: "title",
      },
    },
    {
      attrs: {
        label: "作者",
        prop: "authorName",
      },
    },
    {
      attrs: {
        label: "发帖时间",
        prop: "createTime",
        align: "center",
      },
    },
    {
      attrs: {
        label: "浏览量",
        prop: "views",
      }
    },
    {
      attrs: {
        label: "是否热门",
        prop: "toping",
      },
      render(type) {
        return type == "1" ? "是" : "否";
      },
    },
    {
      attrs: {
        label: "操作",
        width: "200",
        align: "right",
      },
      // 渲染 el-button，一般用在最后一列。
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "查看回复",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              openReplyModal(row);
            },
          },
          {
            attrs: {
              label: "删除",
              type: "danger",
              text: true,
            },
            el: "button",
            click() {
              prefixDel(row);
            },
          },
        ];
      },
    },
  ];
});

let formData = reactive({
  data: {},
  treeData: [],
  subCategoryList:[],
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
    proxy.post("/topicContent/page", sourceList.value.pagination).then((data) => {
    sourceList.value.data = data.rows;
    sourceList.value.pagination.total = data.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};


//打开回复列表弹窗
const openReplyModal = (row) => {
  formData.data = { ...row };
  replyCommonModal.value = true;
};

//删除
const prefixDel = (row) => {
  ElMessageBox.confirm("你是否删除此主题?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    proxy.post("/topicReplies/hasReply", { topicId: row.id }).then((res) => {
      if(res){
        ElMessageBox.confirm("此主题下有回复，删除后所有回复也将一并删除，是否确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          del(row.id)
        });
      }else{
        del(row.id)
      }
    });
  });
};

const del = (id) => {
  proxy.post("/topicContent/delete", { id: id }).then((res) => {
    ElMessage({
        message: "操作成功",
        type: "success",
    });
    getList();
  });
}



getList();
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
</style>