hxgksystemapp/.history/src/views/knowledge/ask/cc_20231025093907.vue

<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<div>
		<el-button type="danger" class="button-margin" size="large" @click="handleBatchDelete">批量删除</el-button>
	  <el-button type="warning" :icon="Star" circle size="large"
		><el-icon><RefreshRight /></el-icon
	  ></el-button>
	  <span>
		<el-form-item label="问题：" class="aaa" style="font-size:100px;">
		<el-input
		  v-model="searchName"
		  style="width: 170px"
		  placeholder="问题"
			size="large"
		></el-input>
		<el-button type="success" style="width: 80px" size="large" @click="getUserList"
		  >查询</el-button
		>
	</el-form-item>
	  </span>
	  <el-table 
		ref="multipleTableRef" 
		:data="studentInfo" border  
		stripe 
		:header-cell-style="{'width':'100%','background':'#F2F2F2','text-align':'center'}" 
		@selection-change="handleSelectionChange" >
		<el-table-column type="selection"/>
		<el-table-column prop="name" label="问题" />
		<el-table-column prop="sex" label="提问人" />
		<el-table-column prop="age" label="阅读量" />
		<el-table-column prop="abe" label="赞" />
		<el-table-column prop="ade" label="踩" />
		<el-table-column prop="age" label="评论" />
		<el-table-column prop="age" label="回答人数" />
		<el-table-column prop="abc" label="状态" width="120">
		  <template #default="row">
			<el-switch v-model="row.row.status" />
		  </template>
		</el-table-column>
		<el-table-column prop="num" label="时间"/>
		<el-table-column fixed="right" label="操作">
		  <template #default="{ row }">
			<div class="button-container">
			<el-button type="success" size="default" class="button-margin" @click="handleEdit(row)" 
			  >查看答案列表</el-button
			>
			<span>
			<el-button type="danger" size="default" class="button-margin"
			  >下架</el-button
			>
		    </span>
			<div class="ooo">
			<el-button type="danger" size="default" class="button-margin" @click="handleDel(row)" 
			  >删除</el-button
			>
			</div>
		</div>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 详情弹窗 -->
	</div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, toRefs, computed, onMounted } from "vue";
  import { countdownEmits, ElMessageBox, ElTable } from "element-plus";
  import { Timer } from "@element-plus/icons-vue";
  import axios from "axios"; // 导入公理函数库
	// eslint-disable-next-line vue/no-reserved-component-names
	  const data = reactive({
		dialogShow: false, // 新增/编辑弹框
		rowInfo: {}, // 新增/编辑的数据
		title: "", // 是新建还是修改
			  queryInfo:{
		  query:'',
				  pagenum:1,
				  pagesize:'',
			  },
		form: {
		  name: "",
		  region: "",
		  date1: "",
		  date2: "",
		  delivery: false,
		  type: [],
		  resource: "",
		  desc: "",
		  section: "",
		  position: "",
		  column: "",
		},
		studentInfo: studentInfo,
	  });
	  const imageUrl = ref('');
    // 处理子组件传递的图片数据
    const handleImageUploaded = (imageUrlFromChild) => {
	  // 将传递的图片数据存储到状态中
	   imageUrl.value = imageUrlFromChild;
};
    const jokeMes = ref([]) // 表格数据
    const temJokeMes = ref([]) // 临时表格数据
    const searchName = ref(""); // 用于查询的输入值
    const filterTableData = computed(() =>
      data.studentInfo.filter(
        (item) => !searchName.value || item.name.includes(searchName.value)
      )
    );
    const multipleSelection = ref([]);
     const handleNew=()=> {
        data.title = "新增";
        data.rowInfo = {};
        data.dialogShow = true;
      }
      const handleEdit=(val)=> {
        data.title = "答案列表";
        data.dialogShow = true;
        data.rowInfo = val;
      }
      const handleDel=(val)=> {
        ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            method.handleSure(val);
          })
          .catch(() => {
            // 捕获错误
          });
      }
      const handleSure=(val)=> {
        this.dialogVisible = false;
        const index = data.studentInfo.findIndex((item) => item.id === val.id);
        data.studentInfo.splice(index, 1);
      }
      // 添加行
      const addRow=(val) {
        data.studentInfo.push(val);
      },
      // 编辑行
      editRow(val) {
        let index = data.studentInfo.findIndex(
          (item, index) => item.id === val.id
        );
        data.studentInfo.splice(index, 1, val);
      },
      // 关闭详情弹窗
      closeDetail() {
        data.detailShow = false;
      },
      handleSelectionChange(val) {
        multipleSelection.value = val;
      },
      handleBatchDelete() {
        if (multipleSelection.value.length === 0) {
          ElMessageBox.alert("请选择要删除的数据", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }

        ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            data.studentInfo = data.studentInfo.filter(
              (item) => !multipleSelection.value.includes(item)
            );
            multipleSelection.value = []; // 清除选择
          })
          .catch(() => {
            // 用户取消删除
          });
      },
      handleSave(formData) {
        formData.id = this.studentInfo.length + 1; //生成唯一ID
        data.studentInfo.push(formData); // 将新数据添加到阵列
      },
			async getUserList() {
        // 这里调用接口来获取新的数据
        try {
          const response = await axios.get("your_api_url", {
            params: {
              query: searchName.value, // 传递查询条件
            },
          });

          // 更新 data.studentInfo 或其他操作，例如：
          data.studentInfo = response.data;
        } catch (error) {
          // 处理错误
        }
      },
});
</script>
  <style lang="scss" scoped>
	*{
    font-weight: bolder;
	  font-size:15px;
 } 
  .aaa {
    position: absolute;
	  left: 1350px;
		top: 0px;
	  margin: 10px 0;
		font-weight: bolder;
  }
.button-margin {
  margin: 10px 0; /* 设置右侧外边距，调整按钮之间的间距 */
}
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对齐 */
}
:deep(.el-table th){
  font-weight: bold; /* 设置表头字体加粗 */
  color: #333; /* 设置表头字体颜色 */
}
  </style>