<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column
prop="id"
label="ID"
width="100"
></el-table-column>
<el-table-column
prop="serviceLocation"
label="服务地点"
width="180"
></el-table-column>
<!-- 其他列 -->
</el-table>
<el-button @click="getCheckedIds">导出</el-button>
</div>
</template>
<script>
import excel from './excel'
export default {
data() {
return {
cos:[],
tableData: [
{ id: 1, serviceLocation: '地点A' },
{ id: 2, serviceLocation: '地点B' },
{ id: 3, serviceLocation: '地点C' },
// ... 其他数据
],
multipleSelection: [], // 存储被选中的行的数据
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
getCheckedIds() {
const checkedIds = this.multipleSelection.map(row => row.id);
this.cos = checkedIds
const params = {
title: ['订单号', '订单来源', '车牌号'],
key: ['id', 'serviceLocation', 'resolvedByThreeMembers'],
data: this.multipleSelection, // 数据源
autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
filename: '清单'
}
excel.exportArrayToExcel(params)
console.log('勾选项的ID:',this.multipleSelection);
// 这里可以进一步处理，比如发送到服务器等
},
},
};
</script>
<template>
<div class="nav">
<!-- 搜索 -->
<!-- <div class="title">
<p>
<span class="text">时间:</span>
<el-input
v-model="input"
placeholder="请输入内容"
class="input"
></el-input>
</p>
<p>
<span class="text">服务:</span>
<el-input
v-model="input"
placeholder="请输入内容"
class="input"
></el-input>
</p>
</div> -->
<!-- 按钮 -->
<div class="but">
<el-button type="primary" @click="add()">添加</el-button>
<el-button type="primary" @click="toggleSelection()">取消选择</el-button>
<el-button type="primary" @click="daoru()">导入</el-button>
<el-button type="primary" @click="exportExcel">导出</el-button>
</div>
<!-- 列表 -->
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" width="50px"></el-table-column>
<el-table-column
prop="serviceLocation"
label="服务地点"
width="150"
></el-table-column>
<el-table-column prop="serviceCategory" label="服务大类" width="120">
</el-table-column>
<el-table-column
prop="serviceContent"
label="服务内容"
width="120"
class-name="ellipsis-column"
></el-table-column>
<el-table-column prop="department" label="部门" width="120">
</el-table-column>
<el-table-column prop="serviceType" label="服务类型" width="150">
</el-table-column>
<el-table-column prop="serviceDate" label="服务日期" width="150">
</el-table-column>
<el-table-column prop="startTime" label="开始时间" width="150">
</el-table-column>
<el-table-column prop="endTime" label="结束时间" width="150">
</el-table-column>
<el-table-column prop="duration" label="用时" width="150">
</el-table-column>
<el-table-column
prop="serviceCalls"
label="服务台次"
width="150"
class-name="ellipsis-column"
>
</el-table-column>
<el-table-column
prop="servicePerson"
label="服务人员"
width="150"
class-name="ellipsis-column"
>
</el-table-column>
<el-table-column
prop="resolvedByThreeMembers"
label="三员解决"
width="150"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="text" size="small" @click="browses(scope.row)"
>查看</el-button
>
<el-button type="text" size="small" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="showDeleteDialog(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 删除 -->
<el-dialog
:visible.sync="deletedata"
title="删除信息"
@close="deletedata = false"
>
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<p>确定删除吗？</p>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="deletedata = false">取消</el-button>
<el-button type="primary" @click="handleDelete(currentRowData)"
>删除</el-button
>
</span>
</el-dialog>
<!-- 编辑 -->
<el-dialog
:visible.sync="dialogVisible"
title="编辑信息"
@close="dialogVisible = false"
>
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="editForm.serviceLocation">
<el-radio label="委机关"></el-radio>
<el-radio label="巡视办"></el-radio>
<el-radio label="派驻机构"></el-radio>
<el-radio label="吉莲大厦"></el-radio>
<el-radio label="长春净月基地"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="editForm.serviceCategory">
<el-radio label="技术"></el-radio>
<el-radio label="管理"></el-radio>
<el-radio label="设备"></el-radio>
<el-radio label="服务"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="editForm.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="editForm.department">
<el-radio label="SJW"></el-radio>
<el-radio label="长春市JW"></el-radio>
<el-radio label="通化市JW"></el-radio>
<el-radio label="白山市JW"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="editForm.serviceType">
<el-radio label="单机外设"></el-radio>
<el-radio label="实施指导"></el-radio>
<el-radio label="门禁系统"></el-radio>
<el-radio label="软件开发"></el-radio>
<el-radio label="网络维护"></el-radio>
<el-radio label="厂家对接"></el-radio>
<br />
<el-radio label="软件维护"></el-radio>
<el-radio label="文本文档"></el-radio>
<el-radio label="自主学习"></el-radio>
<el-radio label="会议调试"></el-radio>
<el-radio label="本地会议"></el-radio>
<el-radio label="视频会议"></el-radio>
<br />
<el-radio label="其他工作"></el-radio>
<el-radio label="机房巡检"></el-radio>
<el-radio label="主机维护"></el-radio>
<el-radio label="存储维护"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="editForm.serviceCalls"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input v-model="editForm.servicePerson"></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="editForm.resolvedByThreeMembers">
<el-radio label="系统管理员"></el-radio>
<el-radio label="安全保密员"></el-radio>
<el-radio label="安全审计员"></el-radio>
<el-radio label="运维团队处理"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveEdit('editForm')">保存</el-button>
</span>
</el-dialog>
<!-- 查看 -->
<el-dialog :visible.sync="browse" title="查看信息" @close="browse = false">
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="editForm.serviceLocation">
<el-radio label="委机关" disabled></el-radio>
<el-radio label="巡视办" disabled></el-radio>
<el-radio label="派驻机构" disabled></el-radio>
<el-radio label="吉莲大厦" disabled></el-radio>
<el-radio label="长春净月基地" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="editForm.serviceCategory">
<el-radio label="技术" disabled></el-radio>
<el-radio label="管理" disabled></el-radio>
<el-radio label="设备" disabled></el-radio>
<el-radio label="服务" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
:disabled="true"
v-model="editForm.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="editForm.department">
<el-radio label="SJW" disabled></el-radio>
<el-radio label="长春市JW" disabled></el-radio>
<el-radio label="通化市JW" disabled></el-radio>
<el-radio label="白山市JW" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="editForm.serviceType">
<el-radio label="单机外设" disabled></el-radio>
<el-radio label="实施指导" disabled></el-radio>
<el-radio label="门禁系统" disabled></el-radio>
<el-radio label="软件开发" disabled></el-radio>
<el-radio label="网络维护" disabled></el-radio>
<el-radio label="厂家对接" disabled></el-radio>
<br />
<el-radio label="软件维护" disabled></el-radio>
<el-radio label="文本文档" disabled></el-radio>
<el-radio label="自主学习" disabled></el-radio>
<el-radio label="会议调试" disabled></el-radio>
<el-radio label="本地会议" disabled></el-radio>
<el-radio label="视频会议" disabled></el-radio>
<br />
<el-radio label="其他工作" disabled></el-radio>
<el-radio label="机房巡检" disabled></el-radio>
<el-radio label="主机维护" disabled></el-radio>
<el-radio label="存储维护" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="editForm.serviceCalls" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input
v-model="editForm.servicePerson"
:disabled="true"
></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="editForm.resolvedByThreeMembers">
<el-radio label="系统管理员" disabled></el-radio>
<el-radio label="安全保密员" disabled></el-radio>
<el-radio label="安全审计员" disabled></el-radio>
<el-radio label="运维团队处理" disabled></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="browse = false">关闭</el-button>
</span>
</el-dialog>
<!-- 新增 -->
<el-dialog :visible.sync="adddialogVisible" title="新增信息">
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="form.serviceLocation">
<el-radio label="委机关"></el-radio>
<el-radio label="巡视办"></el-radio>
<el-radio label="派驻机构"></el-radio>
<el-radio label="吉莲大厦"></el-radio>
<el-radio label="长春净月基地"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="form.serviceCategory">
<el-radio label="技术"></el-radio>
<el-radio label="管理"></el-radio>
<el-radio label="设备"></el-radio>
<el-radio label="服务"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="form.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="form.department">
<el-radio label="SJW"></el-radio>
<el-radio label="长春市JW"></el-radio>
<el-radio label="通化市JW"></el-radio>
<el-radio label="白山市JW"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="form.serviceType">
<el-radio label="单机外设"></el-radio>
<el-radio label="实施指导"></el-radio>
<el-radio label="门禁系统"></el-radio>
<el-radio label="软件开发"></el-radio>
<el-radio label="网络维护"></el-radio>
<el-radio label="厂家对接"></el-radio>
<br />
<el-radio label="软件维护"></el-radio>
<el-radio label="文本文档"></el-radio>
<el-radio label="自主学习"></el-radio>
<el-radio label="会议调试"></el-radio>
<el-radio label="本地会议"></el-radio>
<el-radio label="视频会议"></el-radio>
<br />
<el-radio label="其他工作"></el-radio>
<el-radio label="机房巡检"></el-radio>
<el-radio label="主机维护"></el-radio>
<el-radio label="存储维护"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="form.serviceCalls"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input v-model="form.servicePerson"></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="form.resolvedByThreeMembers">
<el-radio label="系统管理员"></el-radio>
<el-radio label="安全保密员"></el-radio>
<el-radio label="安全审计员"></el-radio>
<el-radio label="运维团队处理"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="adddialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
</span>
</el-dialog>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import * as XLSX from "xlsx";
import excel from "./excel";
import {
dailydeleteData,
dailyfetchData,
dailyaddData,
dailyeditData,
daoruRow,
daocuRow,
} from "../api/index";
export default {
data() {
return {
dataList: [],
multipleSelection: [], // 存储被选中的行的数据
deletedata: false,
input: "",
value1: "",
total: 0,
tableData: [],
currentPage: 1,
pageSize: 10,
dialogVisible: false,
// 查看
browse: false,
adds: false,
updateVisible: false,
updateContent: "",
adddialogVisible: false,
editForm: {},
//
form: {
serviceLocation: "",
serviceCategory: "",
department: "",
serviceType: "",
serviceDate: "",
startTime: "",
endTime: "",
// duration:'',
serviceCalls: "",
servicePerson: "",
resolvedByThreeMembers: "",
serviceContent: "",
},
params: {
type: "",
status: "",
page: 1,
size: 10,
startDate: "",
endDate: "",
},
rules: {
serviceLocation: [{ required: true, message: "请填写服务地点" }],
serviceCategory: [{ required: true, message: "请填写服务大类" }],
serviceContent: [{ required: true, message: "请填写服务内容" }],
department: [{ required: true, message: "请填写部门" }],
serviceType: [{ required: true, message: "请填写服务类型" }],
serviceDate: [{ required: true, message: "请填写服务日期" }],
startTime: [{ required: true, message: "请填写开始时间" }],
endTime: [{ required: true, message: "请填写结束时间" }],
serviceCalls: [{ required: true, message: "请填写服务台次" }],
servicePerson: [{ required: true, message: "请填写服务人员" }],
resolvedByThreeMembers: [{ required: true, message: "请填写三员解决" }],
},
};
},
mounted() {
dailyfetchData("/service-records/getpage", this.params).then((response) => {
this.params.page = this.currentPage;
console.log(this.currentPage, "当前页码");
console.log(response.data, "data");
this.dataList = response.data.content;
// console.log(this.dataList,'this.dataList')
// 假设 response.data.content 是一个包含多个对象的数组
this.tableData = response.data.content.map((item) => {
// 开始时间
const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
const dateStr = datetimeStr.substring(0, 10); // 截取日期部分
// 结束时间
const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
const endTimestars = endTimestar.substring(0, 10); // 截取日期部分
// 服务日期
const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
// 返回一个新的对象，其中 startTime 属性被替换为 dateStr
return {
...item, // 复制当前对象的所有其他属性
startTime: dateStr, // 将 startTime 属性设置为日期字符串
endTime: endTimestars,
serviceDate: serviceDatestars,
};
});
console.log(this.tableData, "sasa");
for (let index = 0; index < this.tableData.length; index++) {
const row = this.tableData[index];
// console.log(row.department,'row')
// console.log(row.department.substring(0, 10),'saa');
this.tableData[index].department = row.department.substring(0, 10);
}
this.total = response.data.totalElements;
});
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 导出
// 页面上有个按钮 点击调用exportExcel
exportExcel() {
const params = {
title: ['服务大类', '部门', '服务类型','服务日期', '开始时间', '结束时间'],
// key: ['serviceContent', 'department', 'serviceType','serviceDate','startTime','endTime'],
data: this.multipleSelection, // 数据源
autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
filename: "数据导出",
};
// 创建一个新的工作簿
const wb = XLSX.utils.book_new();
// 将数据转换为工作表
const ws = XLSX.utils.json_to_sheet(params.data, {
header: params.title,
defval: "",
});
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 生成Excel文件
XLSX.writeFile(wb, `${params.filename}.xlsx`);
// excel.exportArrayToExcel(params)
},
// 导入
// 添加页面
add() {
this.editForm = Object.assign({});
this.adddialogVisible = true;
console.log("tianji");
},
// 点击添加
onSubmit(form) {
// console.log('++++++创建',this.form)
this.$refs[form].validate((valid) => {
if (valid) {
// console.log('++++++创建',this.form)
dailyaddData("/service-records/serviceadd", this.form);
this.adddialogVisible = false;
window.location.reload();
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改保存
saveEdit(editForm) {
// 在这里保存编辑后的数据
this.$refs[editForm].validate((valid) => {
if (valid) {
dailyeditData(
"/service-records",
this.editForm.id,
this.editForm
)
this.dialogVisible = false;
window.location.reload();
} else {
console.log("error submit!!");
return false;
}
});
},
// 查看 弹框
browses(row) {
// console.log(row,'nihO')
this.editForm = Object.assign({}, row);
this.browse = true;
},
// 编辑 弹框
handleEdit(row) {
this.editForm = Object.assign({}, row);
this.dialogVisible = true;
},
// 删除弹框
showDeleteDialog(row) {
this.currentRowData = row; // 将当前行的数据保存到 currentRowData
this.deletedata = true; // 打开对话框
},
// 删除按钮
handleDelete(row) {
console.log("测试删除");
const index = this.tableData.indexOf(row);
console.log("row is", row.id);
dailydeleteData("/service-records", row.id).then((response) => {
// 请求成功处理
console.log("shanchu");
});
if (index !== -1) {
this.tableData.splice(index, 1);
}
this.deletedata = false; // 关闭对话框
},
// 分页
handleSizeChange(val) {
console.log(val, `每页 ${val} 条`);
this.pageSize = val;
console.log(this.pageSize, "this.page");
},
//分页
handleCurrentChange(val) {
console.log(val, `当前页: ${val}`);
this.currentPage = val;
this.params.page = val;
// console.log(this.currentPage, " this.currentPage ");
// console.log(this.params.page, " this.params.page ");
if (this.value1) {
this.params.startDate = this.value1[0];
this.params.endDate = this.value1[1];
// console.log( this.params.startDate,' this.params.startDate')
// console.log( this.params.endDate,' this.params.endDate')
}
dailyfetchData("/service-records/getpage", this.params).then(
(response) => {
this.params.page = this.currentPage;
// console.log(this.currentPage, "当前页码");
// console.log(response.data, "data");
// 假设 response.data.content 是一个包含多个对象的数组
this.tableData = response.data.content.map((item) => {
// 开始时间
const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
const dateStr = datetimeStr.substring(0, 10); // 截取日期部分
// 结束时间
const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
const endTimestars = endTimestar.substring(0, 10); // 截取日期部分
// 服务日期
const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
// 返回一个新的对象，其中 startTime 属性被替换为 dateStr
return {
...item, // 复制当前对象的所有其他属性
startTime: dateStr, // 将 startTime 属性设置为日期字符串
endTime: endTimestars,
serviceDate: serviceDatestars,
};
});
console.log(this.tableData, "sasa");
for (let index = 0; index < this.tableData.length; index++) {
const row = this.tableData[index];
// console.log(row.department,'row')
// console.log(row.department.substring(0, 10),'saa');
this.tableData[index].department = row.department.substring(0, 10);
}
// // 请求成功处理
// const currentPage = this.params.page;
// console.log(this.params.page, "this.params.page");
// this.currentPage = currentPage;
// this.tableData = response.data.content;
// for (let index = 0; index < this.tableData.length; index++) {
// const row = this.tableData[index];
// console.log(row.department,'row.department');
// this.tableData[index].department = row.department.substring(0, 10);
// }
this.$forceUpdate();
}
);
},
// 取消选择
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
};
</script>
<style>
.ellipsis-column .cell {
display: block; /* 或者 inline-block，取决于你的布局需求 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* .title {
display: flex;
} */
/* .input {
width: 200px;
} */
.nav {
width: 1450px;
/* height: 600px; */
/* background-color: rgb(46, 18, 129); */
margin: 2%;
margin-top: 100px;
position: absolute;
background-color: rgb(255 255 255);
}
.text {
font-size: 20px;
margin: 20px;
/* color: azure; */
}
.but {
margin: 10px;
}
</style>
<template>
<div class="nav">
<!-- 搜索 -->
<!-- <div class="title">
<p>
<span class="text">时间:</span>
<el-input
v-model="input"
placeholder="请输入内容"
class="input"
></el-input>
</p>
<p>
<span class="text">服务:</span>
<el-input
v-model="input"
placeholder="请输入内容"
class="input"
></el-input>
</p>
</div> -->
<!-- 按钮 -->
<div class="but">
<el-button type="primary" @click="add()">添加</el-button>
<el-button type="primary" @click="toggleSelection()">取消选择</el-button>
<el-button type="primary" @click="daoru()">导入</el-button>
<el-button type="primary" @click="exportExcel()">导出</el-button>
</div>
<!-- 列表 -->
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" width="50px"></el-table-column>
<el-table-column
prop="serviceLocation"
label="服务地点"
width="150"
></el-table-column>
<el-table-column prop="serviceCategory" label="服务大类" width="120">
</el-table-column>
<el-table-column
prop="serviceContent"
label="服务内容"
width="120"
class-name="ellipsis-column"
></el-table-column>
<el-table-column prop="department" label="部门" width="120">
</el-table-column>
<el-table-column prop="serviceType" label="服务类型" width="150">
</el-table-column>
<el-table-column prop="serviceDate" label="服务日期" width="150">
</el-table-column>
<el-table-column prop="startTime" label="开始时间" width="150">
</el-table-column>
<el-table-column prop="endTime" label="结束时间" width="150">
</el-table-column>
<el-table-column prop="duration" label="用时" width="150">
</el-table-column>
<el-table-column
prop="serviceCalls"
label="服务台次"
width="150"
class-name="ellipsis-column"
>
</el-table-column>
<el-table-column
prop="servicePerson"
label="服务人员"
width="150"
class-name="ellipsis-column"
>
</el-table-column>
<el-table-column
prop="resolvedByThreeMembers"
label="三员解决"
width="150"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="text" size="small" @click="browses(scope.row)"
>查看</el-button
>
<el-button type="text" size="small" @click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="showDeleteDialog(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 删除 -->
<el-dialog
:visible.sync="deletedata"
title="删除信息"
@close="deletedata = false"
>
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<p>确定删除吗？</p>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="deletedata = false">取消</el-button>
<el-button type="primary" @click="handleDelete(currentRowData)"
>删除</el-button
>
</span>
</el-dialog>
<!-- 导出数据 -->
<el-dialog
:visible.sync="daochu"
title="导出信息"
@close="daochu = false"
>
<el-form
label-width="80px"
:rules="rules"
>
<p>请先勾选要导出的数据内容，在进行导出操作。</p>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="daochu = false">取消</el-button>
</span>
</el-dialog>
<!-- 编辑 -->
<el-dialog
:visible.sync="dialogVisible"
title="编辑信息"
@close="dialogVisible = false"
>
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="editForm.serviceLocation">
<el-radio label="委机关"></el-radio>
<el-radio label="巡视办"></el-radio>
<el-radio label="派驻机构"></el-radio>
<el-radio label="吉莲大厦"></el-radio>
<el-radio label="长春净月基地"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="editForm.serviceCategory">
<el-radio label="技术"></el-radio>
<el-radio label="管理"></el-radio>
<el-radio label="设备"></el-radio>
<el-radio label="服务"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="editForm.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="editForm.department">
<el-radio label="SJW"></el-radio>
<el-radio label="长春市JW"></el-radio>
<el-radio label="通化市JW"></el-radio>
<el-radio label="白山市JW"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="editForm.serviceType">
<el-radio label="单机外设"></el-radio>
<el-radio label="实施指导"></el-radio>
<el-radio label="门禁系统"></el-radio>
<el-radio label="软件开发"></el-radio>
<el-radio label="网络维护"></el-radio>
<el-radio label="厂家对接"></el-radio>
<br />
<el-radio label="软件维护"></el-radio>
<el-radio label="文本文档"></el-radio>
<el-radio label="自主学习"></el-radio>
<el-radio label="会议调试"></el-radio>
<el-radio label="本地会议"></el-radio>
<el-radio label="视频会议"></el-radio>
<br />
<el-radio label="其他工作"></el-radio>
<el-radio label="机房巡检"></el-radio>
<el-radio label="主机维护"></el-radio>
<el-radio label="存储维护"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="editForm.serviceCalls"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input v-model="editForm.servicePerson"></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="editForm.resolvedByThreeMembers">
<el-radio label="系统管理员"></el-radio>
<el-radio label="安全保密员"></el-radio>
<el-radio label="安全审计员"></el-radio>
<el-radio label="运维团队处理"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveEdit('editForm')">保存</el-button>
</span>
</el-dialog>
<!-- 查看 -->
<el-dialog :visible.sync="browse" title="查看信息" @close="browse = false">
<el-form
:model="editForm"
label-width="80px"
:rules="rules"
ref="editForm"
>
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="editForm.serviceLocation">
<el-radio label="委机关" disabled></el-radio>
<el-radio label="巡视办" disabled></el-radio>
<el-radio label="派驻机构" disabled></el-radio>
<el-radio label="吉莲大厦" disabled></el-radio>
<el-radio label="长春净月基地" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="editForm.serviceCategory">
<el-radio label="技术" disabled></el-radio>
<el-radio label="管理" disabled></el-radio>
<el-radio label="设备" disabled></el-radio>
<el-radio label="服务" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
:disabled="true"
v-model="editForm.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="editForm.department">
<el-radio label="SJW" disabled></el-radio>
<el-radio label="长春市JW" disabled></el-radio>
<el-radio label="通化市JW" disabled></el-radio>
<el-radio label="白山市JW" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="editForm.serviceType">
<el-radio label="单机外设" disabled></el-radio>
<el-radio label="实施指导" disabled></el-radio>
<el-radio label="门禁系统" disabled></el-radio>
<el-radio label="软件开发" disabled></el-radio>
<el-radio label="网络维护" disabled></el-radio>
<el-radio label="厂家对接" disabled></el-radio>
<br />
<el-radio label="软件维护" disabled></el-radio>
<el-radio label="文本文档" disabled></el-radio>
<el-radio label="自主学习" disabled></el-radio>
<el-radio label="会议调试" disabled></el-radio>
<el-radio label="本地会议" disabled></el-radio>
<el-radio label="视频会议" disabled></el-radio>
<br />
<el-radio label="其他工作" disabled></el-radio>
<el-radio label="机房巡检" disabled></el-radio>
<el-radio label="主机维护" disabled></el-radio>
<el-radio label="存储维护" disabled></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="editForm.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
disabled
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="editForm.serviceCalls" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input
v-model="editForm.servicePerson"
:disabled="true"
></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="editForm.resolvedByThreeMembers">
<el-radio label="系统管理员" disabled></el-radio>
<el-radio label="安全保密员" disabled></el-radio>
<el-radio label="安全审计员" disabled></el-radio>
<el-radio label="运维团队处理" disabled></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="browse = false">关闭</el-button>
</span>
</el-dialog>
<!-- 新增 -->
<el-dialog :visible.sync="adddialogVisible" title="新增信息">
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
<el-form-item label="服务地点" prop="serviceLocation">
<el-radio-group v-model="form.serviceLocation">
<el-radio label="委机关"></el-radio>
<el-radio label="巡视办"></el-radio>
<el-radio label="派驻机构"></el-radio>
<el-radio label="吉莲大厦"></el-radio>
<el-radio label="长春净月基地"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务大类" prop="serviceCategory">
<el-radio-group v-model="form.serviceCategory">
<el-radio label="技术"></el-radio>
<el-radio label="管理"></el-radio>
<el-radio label="设备"></el-radio>
<el-radio label="服务"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务内容" prop="serviceContent">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="form.serviceContent"
></el-input>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-radio-group v-model="form.department">
<el-radio label="SJW"></el-radio>
<el-radio label="长春市JW"></el-radio>
<el-radio label="通化市JW"></el-radio>
<el-radio label="白山市JW"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务类型" prop="serviceType">
<el-radio-group v-model="form.serviceType">
<el-radio label="单机外设"></el-radio>
<el-radio label="实施指导"></el-radio>
<el-radio label="门禁系统"></el-radio>
<el-radio label="软件开发"></el-radio>
<el-radio label="网络维护"></el-radio>
<el-radio label="厂家对接"></el-radio>
<br />
<el-radio label="软件维护"></el-radio>
<el-radio label="文本文档"></el-radio>
<el-radio label="自主学习"></el-radio>
<el-radio label="会议调试"></el-radio>
<el-radio label="本地会议"></el-radio>
<el-radio label="视频会议"></el-radio>
<br />
<el-radio label="其他工作"></el-radio>
<el-radio label="机房巡检"></el-radio>
<el-radio label="主机维护"></el-radio>
<el-radio label="存储维护"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="服务日期" prop="serviceDate">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.serviceDate"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.startTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.endTime"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="服务台次" prop="serviceCalls">
<el-input v-model="form.serviceCalls"></el-input>
</el-form-item>
<el-form-item label="服务人员" prop="servicePerson">
<el-input v-model="form.servicePerson"></el-input>
</el-form-item>
<el-form-item label="三员解决" prop="resolvedByThreeMembers">
<el-radio-group v-model="form.resolvedByThreeMembers">
<el-radio label="系统管理员"></el-radio>
<el-radio label="安全保密员"></el-radio>
<el-radio label="安全审计员"></el-radio>
<el-radio label="运维团队处理"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="adddialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
</span>
</el-dialog>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import * as XLSX from "xlsx";
import excel from "./excel";
import {
dailydeleteData,
dailyfetchData,
dailyaddData,
dailyeditData,
daoruRow,
daocuRow,
} from "../api/index";
export default {
data() {
return {
dataList: [],
multipleSelection: [], // 存储被选中的行的数据
deletedata: false,
input: "",
value1: "",
total: 0,
tableData: [],
currentPage: 1,
pageSize: 10,
dialogVisible: false,
daochu: false,
// 查看
browse: false,
adds: false,
updateVisible: false,
updateContent: "",
adddialogVisible: false,
editForm: {},
//
form: {
serviceLocation: "",
serviceCategory: "",
department: "",
serviceType: "",
serviceDate: "",
startTime: "",
endTime: "",
// duration:'',
serviceCalls: "",
servicePerson: "",
resolvedByThreeMembers: "",
serviceContent: "",
},
params: {
type: "",
status: "",
page: 1,
size: 10,
startDate: "",
endDate: "",
},
rules: {
serviceLocation: [{ required: true, message: "请填写服务地点" }],
serviceCategory: [{ required: true, message: "请填写服务大类" }],
serviceContent: [{ required: true, message: "请填写服务内容" }],
department: [{ required: true, message: "请填写部门" }],
serviceType: [{ required: true, message: "请填写服务类型" }],
serviceDate: [{ required: true, message: "请填写服务日期" }],
startTime: [{ required: true, message: "请填写开始时间" }],
endTime: [{ required: true, message: "请填写结束时间" }],
serviceCalls: [{ required: true, message: "请填写服务台次" }],
servicePerson: [{ required: true, message: "请填写服务人员" }],
resolvedByThreeMembers: [{ required: true, message: "请填写三员解决" }],
},
};
},
mounted() {
dailyfetchData("/service-records/getpage", this.params).then((response) => {
this.params.page = this.currentPage;
console.log(this.currentPage, "当前页码");
console.log(response.data, "data");
this.dataList = response.data.content;
// console.log(this.dataList,'this.dataList')
// 假设 response.data.content 是一个包含多个对象的数组
this.tableData = response.data.content.map((item) => {
// 开始时间
const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
const dateStr = datetimeStr.substring(0, 10); // 截取日期部分
// 结束时间
const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
const endTimestars = endTimestar.substring(0, 10); // 截取日期部分
// 服务日期
const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
// 返回一个新的对象，其中 startTime 属性被替换为 dateStr
return {
...item, // 复制当前对象的所有其他属性
startTime: dateStr, // 将 startTime 属性设置为日期字符串
endTime: endTimestars,
serviceDate: serviceDatestars,
};
});
console.log(this.tableData, "sasa");
for (let index = 0; index < this.tableData.length; index++) {
const row = this.tableData[index];
// console.log(row.department,'row')
// console.log(row.department.substring(0, 10),'saa');
this.tableData[index].department = row.department.substring(0, 10);
}
this.total = response.data.totalElements;
});
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 导出
// 页面上有个按钮 点击调用exportExcel
exportExcel() {
if (this.multipleSelection == '') {
// console.log('输出空')
// alert("请先勾选数据")
this.daochu = true;
} else {
const params = {
title: ["序号", "服务地点", "服务大类","服务内容", "部门", "服务类型","服务日期",'开始时间','结束时间','服务台次','服务人员'],
key: ["index", "serviceLocation", "serviceCategory","serviceContent","department",'serviceType','serviceDate','startTime','endTime','serviceCalls','servicePerson'],
data: this.multipleSelection, // 数据源
autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
filename: "清单",
};
excel.exportArrayToExcel(params);
console.log("勾选项的ID:", this.multipleSelection);
// 这里可以进一步处理，比如发送到服务器等
}
},
// 导入
daoru(){
console.log('导入')
},
// 添加页面
add() {
this.editForm = Object.assign({});
this.adddialogVisible = true;
console.log("tianji");
},
// 点击添加
onSubmit(form) {
// console.log('++++++创建',this.form)
this.$refs[form].validate((valid) => {
if (valid) {
// console.log('++++++创建',this.form)
dailyaddData("/service-records/serviceadd", this.form);
this.adddialogVisible = false;
window.location.reload();
} else {
console.log("error submit!!");
return false;
}
});
},
// 修改保存
saveEdit(editForm) {
// 在这里保存编辑后的数据
this.$refs[editForm].validate((valid) => {
if (valid) {
dailyeditData("/service-records", this.editForm.id, this.editForm);
this.dialogVisible = false;
window.location.reload();
} else {
console.log("error submit!!");
return false;
}
});
},
// 查看 弹框
browses(row) {
// console.log(row,'nihO')
this.editForm = Object.assign({}, row);
this.browse = true;
},
// 编辑 弹框
handleEdit(row) {
this.editForm = Object.assign({}, row);
this.dialogVisible = true;
},
// 删除弹框
showDeleteDialog(row) {
this.currentRowData = row; // 将当前行的数据保存到 currentRowData
this.deletedata = true; // 打开对话框
},
// 删除按钮
handleDelete(row) {
console.log("测试删除");
const index = this.tableData.indexOf(row);
console.log("row is", row.id);
dailydeleteData("/service-records", row.id).then((response) => {
// 请求成功处理
console.log("shanchu");
});
if (index !== -1) {
this.tableData.splice(index, 1);
}
this.deletedata = false; // 关闭对话框
},
// 分页
handleSizeChange(val) {
console.log(val, `每页 ${val} 条`);
this.pageSize = val;
console.log(this.pageSize, "this.page");
},
//分页
handleCurrentChange(val) {
console.log(val, `当前页: ${val}`);
this.currentPage = val;
this.params.page = val;
// console.log(this.currentPage, " this.currentPage ");
// console.log(this.params.page, " this.params.page ");
if (this.value1) {
this.params.startDate = this.value1[0];
this.params.endDate = this.value1[1];
// console.log( this.params.startDate,' this.params.startDate')
// console.log( this.params.endDate,' this.params.endDate')
}
dailyfetchData("/service-records/getpage", this.params).then(
(response) => {
this.params.page = this.currentPage;
// console.log(this.currentPage, "当前页码");
// console.log(response.data, "data");
// 假设 response.data.content 是一个包含多个对象的数组
this.tableData = response.data.content.map((item) => {
// 开始时间
const startTime = item.startTime; // 获取当前遍历到的对象的 startTime
const datetimeStr = startTime; // 将 startTime 赋值给 datetimeStr
const dateStr = datetimeStr.substring(0, 10); // 截取日期部分
// 结束时间
const endTime = item.endTime; // 获取当前遍历到的对象的 startTime
const endTimestar = endTime; // 将 startTime 赋值给 datetimeStr
const endTimestars = endTimestar.substring(0, 10); // 截取日期部分
// 服务日期
const serviceDate = item.serviceDate; // 获取当前遍历到的对象的 startTime
const serviceDatestar = serviceDate; // 将 startTime 赋值给 datetimeStr
const serviceDatestars = serviceDatestar.substring(0, 10); // 截取日期部分
// 返回一个新的对象，其中 startTime 属性被替换为 dateStr
return {
...item, // 复制当前对象的所有其他属性
startTime: dateStr, // 将 startTime 属性设置为日期字符串
endTime: endTimestars,
serviceDate: serviceDatestars,
};
});
console.log(this.tableData, "sasa");
for (let index = 0; index < this.tableData.length; index++) {
const row = this.tableData[index];
// console.log(row.department,'row')
// console.log(row.department.substring(0, 10),'saa');
this.tableData[index].department = row.department.substring(0, 10);
}
// // 请求成功处理
// const currentPage = this.params.page;
// console.log(this.params.page, "this.params.page");
// this.currentPage = currentPage;
// this.tableData = response.data.content;
// for (let index = 0; index < this.tableData.length; index++) {
// const row = this.tableData[index];
// console.log(row.department,'row.department');
// this.tableData[index].department = row.department.substring(0, 10);
// }
this.$forceUpdate();
}
);
},
// 取消选择
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
};
</script>
<style>
.ellipsis-column .cell {
display: block; /* 或者 inline-block，取决于你的布局需求 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* .title {
display: flex;
} */
/* .input {
width: 200px;
} */
.nav {
width: 1450px;
/* height: 600px; */
/* background-color: rgb(46, 18, 129); */
margin: 2%;
margin-top: 100px;
position: absolute;
background-color: rgb(255 255 255);
}
.text {
font-size: 20px;
margin: 20px;
/* color: azure; */
}
.but {
margin: 10px;
}
</style>
<template>
<div>
<button @click="triggerFileUpload">点击导入Excel文件</button>
<input type="file" ref="fileInput" style="display: none" @change="handleFileUpload" accept=".xlsx, .xls" />
<!-- 这里可以添加用于显示导入状态或错误消息的UI元素 -->
</div>
</template>
<script>
import XLSX from 'xlsx';
import axios from 'axios';
export default {
data() {
return {
// ...你的其他数据属性
};
},
methods: {
triggerFileUpload() {
this.$refs.fileInput.click();
},
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const worksheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[worksheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
console.log('解析后的数据:', jsonData);
this.processImportedData(jsonData);
};
reader.readAsArrayBuffer(file);
} else {
alert('未选择文件');
}
},
processImportedData(jsonData) {
// 发送POST请求到后端
axios.post('/importFromExcel', jsonData)
.then(response => {
console.log('发送成功', response);
// 处理成功响应，比如更新UI等
this.handleSuccess(response.data);
})
.catch(error => {
console.error('发送失败', error);
// 处理错误，比如显示错误消息等
this.handleError(error);
});
},
handleSuccess(data) {
// 处理后端返回的成功数据
console.log('后端返回的成功数据:', data);
// 根据需要更新UI或执行其他操作
},
handleError(error) {
// 处理发送数据时的错误
console.error('后端返回的错误:', error);
// 显示错误消息给用户
alert('导入数据失败，请检查您的数据或联系管理员。');
}
}
};
</script>
5894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
