You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
6.5 KiB
275 lines
6.5 KiB
<!--
|
|
@ 作者: 鲁智强
|
|
@ 时间: 2023-08-15 11:34:38
|
|
@ 备注:
|
|
-->
|
|
<template>
|
|
<div class="box">
|
|
<el-button type="warning" :icon="Star" circle
|
|
><el-icon><RefreshRight /></el-icon
|
|
></el-button>
|
|
<span class="aaa">
|
|
<el-form-item label="" style="width: 50">
|
|
</el-form-item>
|
|
<el-input
|
|
v-model="searchName"
|
|
style="width: 170px"
|
|
placeholder="问题"
|
|
></el-input>
|
|
<el-button type="primary" style="width: 80px" @click="getUserList"
|
|
>查询</el-button
|
|
>
|
|
</span>
|
|
<el-table
|
|
ref="multipleTableRef"
|
|
:data="studentInfo"
|
|
border
|
|
style="width: 100%"
|
|
stripe
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column prop="name" label="文章标题" />
|
|
<el-table-column prop="sex" label="所属栏目" />
|
|
<el-table-column prop="age" label="可见范围" />
|
|
<el-table-column prop="num" label="访问数据" width="440" />
|
|
<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 fixed="right" label="操作">
|
|
<template #default="{ row }">
|
|
<el-button type="success" size="small" @click="handleEdit(row)"
|
|
>修改</el-button
|
|
>
|
|
<el-button type="danger" size="small" @click="handleDel(row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 新建/编辑弹框 -->
|
|
<Dialog
|
|
class="add"
|
|
v-if="dialogShow"
|
|
v-model:dialogShow="dialogShow"
|
|
:row-info="rowInfo"
|
|
:title="title"
|
|
:array-num="studentInfo.length"
|
|
@addRow="addRow"
|
|
@editRow="editRow"
|
|
@image-uploaded="handleImageUploaded"
|
|
/>
|
|
<!-- 详情弹窗 -->
|
|
<Detail v-if="detailShow" :row-info="rowInfo" @closeDetail="closeDetail" />
|
|
</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 Detail from "./detail.vue";
|
|
export default {
|
|
// eslint-disable-next-line vue/no-reserved-component-names
|
|
components: { Dialog, Detail },
|
|
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: [
|
|
{
|
|
id: 1,
|
|
name: "",//文章标题
|
|
sex: "",//所属栏目
|
|
age: "",//可见范围
|
|
num: "",//访问数据
|
|
iop: "",//文档来源
|
|
ccc: "",//文档标签
|
|
ade: "",//文档描述
|
|
ddd: "",//排序
|
|
editContvalue:"dsdd",//文档正文
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "",
|
|
sex: "",
|
|
age: "",
|
|
num: "",
|
|
iop: "",
|
|
ccc: "",
|
|
ade: "",
|
|
ddd: "",
|
|
editContvalue:"",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "",
|
|
sex: "",
|
|
age: "",
|
|
num: "",
|
|
iop: "",
|
|
ccc: "",
|
|
ade: "",
|
|
ddd: "",
|
|
editContvalue:"",
|
|
},
|
|
],
|
|
});
|
|
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); // 将新数据添加到阵列
|
|
},
|
|
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>
|
|
.aab {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr); /* 五列 */
|
|
align-items: start; /* 顶格对齐 */
|
|
float: right;
|
|
width: 800px;
|
|
height: 30px;
|
|
background-color: burlywood;
|
|
}
|
|
|
|
.aaa {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr); /* 五列 */
|
|
align-items: start; /* 顶格对齐 */
|
|
float: right;
|
|
width: 700px;
|
|
height: 30px;
|
|
}
|
|
</style>
|
|
|