hxgksystemapp/.history/src/views/knowledge/ask/cc_20231123134038.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" 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="问题"
		></el-input>
		<el-button type="success" style="width: 80px"
		  >查询</el-button
		>
	</el-form-item>
	  </span>
	  <el-table 
		ref="multipleTableRef" 
		border
		class="m-2"  
		stripe
		:data="tableData" 
		:header-cell-style="{'width':'100%','background':'#F2F2F2','text-align':'center'}" >
		<el-table-column type="selection"/>
		<el-table-column prop="name" label="问题" width="300" />
		<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="操作" width="300">
		  <template #default="{ row }">
			<el-button type="success" size="default" link  @click="handleEdit(row)" 
			  ><el-icon><ChatLineSquare /></el-icon>查看答案列表</el-button
			>
			<el-button type="danger" link size="default" 
			  ><el-icon><Lock /></el-icon>下架</el-button
			>
			<el-button type="danger" link size="default" @click="handleDel(row)" 
			  ><el-icon><Delete /></el-icon>删除</el-button
			>
		  </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: "",
	},
});
const tableData = [
  {
    sex: '张德银',
    name: '我公司的企业安全文化是什么？',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    sex: '杨吉方',
    name: 'DCS?',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    sex: '江金锋',
    name: '谈谈你对精益管理的理解？',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    sex: '江金锋',
    name: '为了避免6s活动流于形式,应该注意哪些事项?',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const imageUrl = ref('');
// 处理子组件传递的图片数据
const handleImageUploaded = (imageUrlFromChild:any) => {
// 将传递的图片数据存储到状态中
	imageUrl.value = imageUrlFromChild;
};
const jokeMes = ref([]) // 表格数据
const temJokeMes = ref([]) // 临时表格数据
const searchName = ref(""); // 用于查询的输入值
const multipleSelection = ref([]);
const handleNew=()=> {
	data.title = "新增";
	data.rowInfo = {};
	data.dialogShow = true;
}
const handleEdit=(val:any)=> {
	data.title = "答案列表";
	data.dialogShow = true;
	data.rowInfo = val;
}
const handleDel=(val:any)=> {
	ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
		})
		.catch(() => {
		// 捕获错误
		});
}
// 关闭详情弹窗
const handleSelectionChange=(val:any)=> {
	multipleSelection.value = val;
}
const handleBatchDelete=()=> {
	if (multipleSelection.value.length === 0) {
		ElMessageBox.alert("请选择要删除的数据", "提示", {
		confirmButtonText: "确定",
		});
		return;
}

	ElMessageBox.confirm("确定要批量删除所选数据吗？", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
})
	.then(() => {
	
	})
	.catch(() => {
	// 用户取消删除
	});
}

</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-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中对齐 */
}
:deep(.el-table th){
  font-weight: bold; /* 设置表头字体加粗 */
  color: #333; /* 设置表头字体颜色 */
}
  </style>