hxgksystemapp/.history/src/views/knowledge/exam/dd_20231019150810.vue

<!--
@ 作者: 鲁智强
@ 时间: 2023-08-15 11:34:38
@ 备注: 
-->
<template>
	<div class="box">
	  	<el-button type="danger" class="button-margin" size="large" @click="handleBatchDelete">批量删除</el-button>
	  	<el-button class="new_btn" type="success" size="large" @click="handleNewac">添加</el-button>
	  	<el-button type="warning" :icon="Star" circle size="large"><el-icon><RefreshRight /></el-icon></el-button>
	  	<span class="aaa">
			<el-form-item label="" style="width: 50">
		  		<el-select v-model="form.region" placeholder="请选分厂" size="large">
				<el-option label="请选分厂" value="0"></el-option>
				<el-option label="甲醇分厂" value="1"></el-option>
				<el-option label="化产分厂" value="2"></el-option>
				<el-option label="动力分厂" value="3"></el-option>
				<el-option label="机焦车间" value="4"></el-option>
				<el-option label="质检中心" value="5"></el-option>
				<el-option label="安环部" value="6"></el-option>
				<el-option label="备煤车间" value="7"></el-option>
				<el-option label="保卫部" value="8"></el-option>
				<el-option label="企管部" value="9"></el-option>
				<el-option label="高管" value="10"></el-option>
				<el-option label="综合办" value="11"></el-option>
				<el-option label="人力资源部" value="12"></el-option>
				<el-option label="财务部" value="13"></el-option>
				<el-option label="营销部" value="14"></el-option>
				<el-option label="生产部" value="15"></el-option>
				<el-option label="仓储中心" value="16"></el-option>
				<el-option label="物流中心" value="17"></el-option>
				<el-option label="办公室" value="18"></el-option>
				<el-option label="审计监察部" value="19"></el-option>
				<el-option label="法律事务部" value="20"></el-option>
				<el-option label="财务部" value="21"></el-option>
				<el-option label="供应部" value="22"></el-option>
				<el-option label="销售部" value="23"></el-option>
				<el-option label="生产计划部" value="24"></el-option>
		  		</el-select>
			</el-form-item>
			<el-form-item label="">
		  		<el-select v-model="form.section" placeholder="请选工段" size="large"> </el-select>
			</el-form-item>
			<el-form-item label="">
		  		<el-select v-model="form.position" placeholder="请选职务" size="large"> </el-select>
			</el-form-item>
			<el-form-item label="">
		  	<el-select v-model="form.column" placeholder="请选栏目" size="large">
				<el-option label="请选栏目" value="0"></el-option>
				<el-option label="流程制度" value="1"></el-option>
				<el-option label="工艺技术" value="2"></el-option>
				<el-option label="设备管理" value="3"></el-option>
				<el-option label="仪控仪表" value="4"></el-option>
				<el-option label="机电维修" value="5"></el-option>
				<el-option label="安全生产" value="6"></el-option>
				<el-option label="质量管理" value="7"></el-option>
				<el-option label="财务管理" value="8"></el-option>
				<el-option label="人力资源" value="9"></el-option>
				<el-option label="仓储物流" value="10"></el-option>
				<el-option label="营销采购" value="11"></el-option>
			</el-select>
			</el-form-item>
			<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>
	    </span>
	  	<el-table
		ref="multipleTableRef"
		:data="studentInfo"
		border
		style="width: 100%"
		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="考试名称" width="250" />
		<el-table-column prop="sex" label="归属" width="100" />
		<el-table-column prop="age" label="考试范围" />
		<el-table-column prop="num" label="考试时长" width="100"/>
		<el-table-column prop="abc" label="考题总数"/>
		<el-table-column prop="abg" label="及格线"/>
		<el-table-column prop="acd" label="开始&结束"/>
		<el-table-column prop="acc" label="发起人"/>
		<el-table-column prop="ace" label="创建时间"/>
		<el-table-column prop="acf" label="状态">
		  <template #default="row">
			<el-switch v-model="row.row.status" />
		  </template>
		</el-table-column>
		<el-table-column prop="acg" label="考试人数">
			<el-button class="new_btn" type="primary" size="large" @click="handleEdit"
		>人数</el-button
	  >
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="200">
		  <template #default="{ row }">
			<el-button type="danger" size="LARGE" @click="handleDel(row)"
			  >结束考试</el-button
			>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 新建/编辑弹框 -->
	  <Dialog
		v-if="dialogShow"
		v-model:dialogShow="dialogShow"
		:row-info="rowInfo"
		:title="title"
		:array-num="studentInfo.length"
		@add-row = "addRow"
		@edit-row="editRow"
		@image-uploaded="handleImageUploaded"
	  />
	  <!-- 详情弹窗 -->
	  <Diaail
		v-if="detailShow"
		v-model:detailShow="detailShow"
		:row-info="rowInfo"
		:title="title"
		:array-num="studentInfo.length"
		@add-row = "addRow"
		@edit-row="editRow"
	  />
	</div>
  </template>
  
  <script>
  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"; // 导入公理函数库
  import Dialog from "./dialog.vue";
  import Diaail from "./detail.vue";
  export default {
	// eslint-disable-next-line vue/no-reserved-component-names
	components: { Dialog,Diaail },
	setup() {
	  const data = reactive({
		dialogShow: false, // 新增/编辑弹框
		detailShow: 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 method = reactive({
		handleNew() {
		  data.title = "查看";
		  data.rowInfo = {};
		  data.dialogShow = true;
		},
		handleDetail(val) {
		  data.detailShow = true;
		  data.rowInfo = val;
		},
		handleEdit(val) {
		  data.title = "修改";
		  data.dialogShow = true;
		  data.rowInfo = val;
		},
		handleDel(val) {
		  ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning",
		  })
			.then(() => {
			  method.handleSure(val);
			})
			.catch(() => {
			  // 捕获错误
			});
		},
		handleSure(val) {
		  this.dialogVisible = false;
		  const index = data.studentInfo.findIndex((item) => item.id === val.id);
		  data.studentInfo.splice(index, 1);
		},
		// 添加行
		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); // 将新数据添加到阵列
		},
		handleNewac() {
		  data.title = "添加";
		  data.rowInfo = {};
		  data.detailShow = true;
		},
		async getUserList() {
		  // 这里调用接口来获取新的数据
		  try {
			const response = await axios.get("your_api_url", {
			  params: {
				query: searchName.value, // 传递查询条件
			  },
			});
  
			// 更新 data.studentInfo 或其他操作，例如：
			data.studentInfo = response.data;
		  } catch (error) {
			// 处理错误
		  }
		},
  });
	  return { ...toRefs(data), ...method, ...filterTableData, searchName,imageUrl,handleImageUploaded,};
	},
  };
  </script>
  <style lang="scss" scoped>
  
 *{
    font-weight: bolder;
	font-size:15px;
 } 
 .aaa {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 五列 */
	align-items: start; /* 顶格对齐 */
	float: right;
	width: 700px;
	height: 30px;
	  margin: 5px 0;
  }
  .button-margin {
	margin: 5px 0; /* 设置右侧外边距，调整按钮之间的间距 */
  }
  :deep(.el-table th) {
  font-weight: bold; /* 设置表头字体加粗 */
  color: #333; /* 设置表头字体颜色 */
}
  </style>