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.
324 lines
9.2 KiB
324 lines
9.2 KiB
<!--
|
|
@ 作者: 鲁智强
|
|
@ 时间: 2023-08-15 11:34:38
|
|
@ 备注:
|
|
-->
|
|
<template>
|
|
<div class="box">
|
|
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
|
|
<el-button class="new_btn" type="primary" @click="handleNew"
|
|
>新增</el-button
|
|
>
|
|
<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-select v-model="form.region" placeholder="请选分厂">
|
|
<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="请选工段"> </el-select>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-select v-model="form.position" placeholder="请选职务"> </el-select>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-select v-model="form.column" placeholder="请选栏目">
|
|
<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="studentInfo.name"
|
|
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="类型" width="60"/>
|
|
<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"
|
|
@save="handleSave"
|
|
@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 Axios library
|
|
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",//文档正文
|
|
dialogVis: "",
|
|
dialogImageUrl: "",
|
|
imageUrl:"",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "",
|
|
sex: "",
|
|
age: "",
|
|
num: "",
|
|
iop: "",
|
|
ccc: "",
|
|
ade: "",
|
|
ddd: "",
|
|
editContvalue:"",
|
|
dialogVis: "",
|
|
dialogImageUrl: "",
|
|
imageUrl:"",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "",
|
|
sex: "",
|
|
age: "",
|
|
num: "",
|
|
iop: "",
|
|
ccc: "",
|
|
ade: "",
|
|
ddd: "",
|
|
editContvalue:"",
|
|
dialogVis: "",
|
|
dialogImageUrl: "",
|
|
imageUrl:"",
|
|
},
|
|
],
|
|
});
|
|
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); // 将新数据添加到阵列
|
|
},
|
|
});
|
|
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>
|
|
|