vue2 table 页面 + 功能展示

首页代码

<!-- 首页展示页面 + 弹框展示  -->
<template><div style><el-button type="text" size="small" @click="dailys()">测试跳转</el-button><!-- <div class="dingwei"><a href="#"><el-image:src="require('../assets/glxt.png')"@click="showAddDialog"></el-image></a></div> --><div style="text-align: center"><el-image :src="require('../assets/logonew.png')" class="imgnew" /></div><div class="contentnew"><el-button type="primary" @click="showAddDialog">新增内容</el-button><div class="linetit"><el-dialog :visible.sync="adddialogVisible" title="新增"><el-form ref="form" :model="form" label-width="80px" :rules="rules"><el-form-item label="项目名称" prop="projectName"><el-input v-model="form.projectName"></el-input></el-form-item><el-form-item label="项目类型" prop="projectType"><el-radio-group v-model="form.projectType"><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="projectStatus"><el-radio-group v-model="form.projectStatus"><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="expectedEndTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.expectedEndTime"style="width: 100%"value-format="yyyy-MM-dd"></el-date-picker></el-col></el-form-item><el-form-item label="项目描述" prop="projectContent"><el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="form.projectContent"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit('form')">立即创建</el-button><!-- <el-button >取消</el-button> --></el-form-item></el-form></el-dialog><span class="xiala">类型：</span><el-dropdown @command="handleCommand"><span class="el-dropdown-link" id="type1">请选择类型<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="统建">统建</el-dropdown-item><el-dropdown-item command="自建">自建</el-dropdown-item><el-dropdown-item command="应用支撑">应用支撑</el-dropdown-item></el-dropdown-menu></el-dropdown><span class="xiala">状态：</span><el-dropdown @command="handleCommand2"><span class="el-dropdown-link" id="status1">请选择状态<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="立项">立项</el-dropdown-item><el-dropdown-item command="进行">进行</el-dropdown-item><el-dropdown-item command="验收">验收</el-dropdown-item><el-dropdown-item command="结束">结束</el-dropdown-item></el-dropdown-menu></el-dropdown><div style="display: inline-block; margin-left: 10px"><span class="xiala">日期筛选：</span><el-date-pickerv-model="value1"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="handleTime"value-format="yyyy-MM-dd"></el-date-picker></div></div><div class="linetable"><el-table :data="tableData"><el-table-columntype="index"label="序号"width="200px"></el-table-column><el-table-columnprop="projectName"label="项目名称"width="300px"class-name="ellipsis-column"></el-table-column><el-table-column prop="projectType" label="类型"></el-table-column><el-table-column prop="projectStatus" label="状态"></el-table-column><el-table-column label="进展情况"   width="200px"><template slot-scope="scope"><el-button type="text" size="small" @click="showUpdate(scope.row)">查看进展</el-button></template></el-table-column><el-table-columnprop="expectedEndTime"label="预期结束时间"width="300px"></el-table-column><el-table-columnprop="projectContent"label="项目描述"width="300px"class-name="ellipsis-column"></el-table-column><el-table-column label="操作" width="200px"><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-buttontype="text"size="small"@click="showDeleteDialog(scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20]":page-size="pageSize":total="total"></el-pagination><!-- 删除 --><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="projectName"><el-input v-model="editForm.projectName"></el-input></el-form-item><el-form-item label="项目类型" prop="projectType"><el-radio-group v-model="editForm.projectType"><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="projectStatus"><el-radio-group v-model="editForm.projectStatus"><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="expectedEndTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="editForm.expectedEndTime"style="width: 100%"value-format="yyyy-MM-dd"></el-date-picker></el-col></el-form-item><el-form-item label="项目描述" prop="projectContent"><el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="editForm.projectContent"></el-input></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="projectName"><el-inputv-model="editForm.projectName":disabled="true"></el-input></el-form-item><el-form-item label="项目类型" prop="projectType"><el-radio-group v-model="editForm.projectType"><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="projectStatus"><el-radio-group v-model="editForm.projectStatus"><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="expectedEndTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="editForm.expectedEndTime"style="width: 100%"value-format="yyyy-MM-dd"disabled></el-date-picker></el-col></el-form-item><el-form-item label="项目描述" prop="projectContent"><el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="editForm.projectContent"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><!-- <el-button @click="browse = false">取消</el-button> --><el-button type="primary" @click="browse = false">关闭</el-button></span></el-dialog><el-dialog:visible.sync="updateVisible"title="全部进展信息"width="50%":before-close="handleClose"><div class="block"><el-timeline :reverse="reverse"><el-timeline-itemv-for="(activity, index) in activities":key="index":timestamp="activity.timestamp">{{ activity.content }}</el-timeline-item></el-timeline></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="updateVisible = false">关闭</el-button></span></el-dialog></div></div></div>
</template><script>import daily from "./daily.vue";
import { fetchData } from "../api/index";
import { deleteData } from "../api/index";
import { editData } from "../api/index";
import { selectbytypeData } from "../api/index";
import { addData } from "../api/index";
export default {components: {daily,},data() {return {// 删除deletedata: false,value1: "",total: 0,tableData: [],currentPage: 1,pageSize: 10,dialogVisible: false,// 查看browse: false,updateVisible: false,updateContent: "",adddialogVisible: false,editForm: {},params: {type: "",status: "",page: 1,size: 10,startDate: "",endDate: "",},form: {projectName: "",projectType: "",projectStatus: "",expectedEndTime: "",projectContent: "",},rules: {projectName: [{ required: true, message: "请填写项目名称" }],projectType: [{ required: true, message: "请选择项目类型" }],projectStatus: [{ required: true, message: "请选择项目状态" }],expectedEndTime: [{ required: true, message: "请选择项目预计结束时间" },],projectContent: [{ required: true, message: "请选择项目描述" }],},reverse: true,activities: [{content: "活动按期开始",timestamp: "2018-04-15",},{content: "通过审核",timestamp: "2018-04-13",},{content: "创建成功",timestamp: "2018-04-11",},],};},computed: {currentPageData() {const start = this.currentPage * this.pageSize;const end = start + this.pageSize;return this.tableData.slice(start, end);},},methods: {// 跳转dailys(row) {window.open("http://localhost:8080/#/daily/");},// 类型handleCommand(command) {// console.log("选中的值为:", command);document.getElementById("type1").innerText = command;this.params.type = command;// console.log(this.params);// 在这里可以对选中的值进行处理selectbytypeData("/projects/search", this.params).then((response) => {// 请求成功处理// console.log(response.data.content);this.tableData = response.data.content;for (let index = 0; index < this.tableData.length; index++) {const row = this.tableData[index];// console.log(row.expectedEndTime.substring(0, 10));this.tableData[index].expectedEndTime = row.expectedEndTime.substring(0,10);}});},// 状态handleCommand2(command) {// console.log("选中的值为:", command);this.params.status = command;document.getElementById("status1").innerText = command;// console.log(this.params);// 在这里可以对选中的值进行处理selectbytypeData("/projects/search", this.params).then((response) => {// 请求成功处理// console.log(response.data.content);this.tableData = response.data.content;for (let index = 0; index < this.tableData.length; index++) {const row = this.tableData[index];// console.log(row.expectedEndTime.substring(0, 10));this.tableData[index].expectedEndTime = row.expectedEndTime.substring(0,10);}});},// 时间控件handleTime() {this.params.startDate = this.value1[0];this.params.endDate = this.value1[1];selectbytypeData("/projects/search", this.params).then((response) => {// 请求成功处理// console.log(response.data.content);this.tableData = response.data.content;for (let index = 0; index < this.tableData.length; index++) {const row = this.tableData[index];// console.log(row.expectedEndTime.substring(0, 10));this.tableData[index].expectedEndTime = row.expectedEndTime.substring(0,10);}});},// 图片showAddDialog() {this.adddialogVisible = true;},// 查看 弹框browses(row) {// console.log(row,'nihO')this.editForm = Object.assign({}, row);this.browse = true;},// 编辑 弹框handleEdit(row) {this.editForm = Object.assign({}, row);this.dialogVisible = true;},// 删除确认  按钮handleDelete(row) {const index = this.tableData.indexOf(row);// console.log("row is", row.id);deleteData("/projects", row.id).then((response) => {// 请求成功处理});if (index !== -1) {this.tableData.splice(index, 1);}this.deletedata = false; // 关闭对话框},// 删除 弹框showDeleteDialog(row) {this.currentRowData = row; // 将当前行的数据保存到 currentRowDatathis.deletedata = true; // 打开对话框},// 保存按钮saveEdit(editForm) {// 在这里保存编辑后的数据this.$refs[editForm].validate((valid) => {if (valid) {editData("/projects", this.editForm.id, this.editForm).then// response => {//   // 请求成功处理// }();this.dialogVisible = false;window.location.reload();} else {console.log("error submit!!");return false;}});},// 分页handleSizeChange(val) {this.pageSize = val;},// 分页handleCurrentChange(val) {this.currentPage = val;this.params.page = val;console.log(this.params, " this.params.page ");if (this.value1) {this.params.startDate = this.value1[0];this.params.endDate = this.value1[1];}fetchData("/projects", this.params).then((response) => {// 请求成功处理const currentPage = 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.expectedEndTime.substring(0, 10));this.tableData[index].expectedEndTime = row.expectedEndTime.substring(0,10);}this.$forceUpdate();});},// 查看进展showUpdate(row) {// 在这里获取id参数，假设id字段在row对象中const id = row.id;// 序列化rowa对象const rowaJson = JSON.stringify(row);// 在新标签页中打开链接，携带序列化后的对象window.open(`http://localhost:8080/#/progess/${id}?data=${encodeURIComponent(rowaJson)}`,"_blank");console.log(rowaJson, "rowaJson");},handleClose(done) {this.updateContent = "";done();},// 立即创建onSubmit(form) {this.$refs[form].validate((valid) => {if (valid) {addData("/projects", this.form);this.adddialogVisible = false;window.location.reload();} else {console.log("error submit!!");return false;}});},},mounted() {// 获取信息fetchData("/projects", this.params).then((response) => {// 请求成功处理this.params.page = this.currentPage;this.tableData = response.data.content;console.log(response, "首次获取数据");for (let index = 0; index < this.tableData.length; index++) {const row = this.tableData[index];// console.log(row.expectedEndTime,'row')// console.log(row.expectedEndTime.substring(0, 10));this.tableData[index].expectedEndTime = row.expectedEndTime.substring(0,10);}this.total = response.data.totalElements;});},
};
</script>
<style>
.ellipsis-column .cell {display: block; /* 或者 inline-block，取决于你的布局需求 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.el-form-item__label {width: 120px !important;
}
.el-form-item__content {margin-left: 120px !important;
}
.el-pagination__rightwrapper {float: left !important;
}
.dingwei {margin-top: 100px;position: fixed;/* bottom: 150px;right: 40px;z-index: 999; */
}
.xiala {font-size: 16px;margin-left: 30px;
}
.linetit {float: left;width: 100%;text-align: left;line-height: 60px;border-bottom: 2px solid #d9ecff;background-color: #fff8f8;
}
.linetable {width: 100%;margin: 0px auto;
}
.el-dropdown-link {border: 1px solid #dcdfe6;background-color: #fff;color: #606266 !important;
}
.contentnew {width: 1800px;margin: 20px auto 0 auto;
}
.el-dropdown-link {cursor: pointer;font-size: 16px;padding: 6px 10px;line-height: 30px;border-radius: 8px;
}.el-pagination {margin-top: 20px;
}.el-icon-arrow-down {font-size: 12px;
}.el-table .el-table__cell {text-align: center !important;color: #333 !important;font-size: 16px !important;font-weight: normal !important;
}
.el-table th {background-color: #ecf5ff !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
.el-table__body tr td {background-color: #fff !important;
}
.imgnew {margin: 90px auto;
}
.el-button--small {font-size: 15px !important;
}.btnnew {border: none !important;font-size: 22px !important;font-weight: bold !important;padding: 0 15px !important;
}#myButton {opacity: 0.5; /* 置灰 */pointer-events: none; /* 禁止点击 */
}
</style>

接受路由参数页面

<template><div><!-- <div class="dingwei"><a href="#"><el-image:src="require('../assets/glxt.png')"@click="showAddDialog"></el-image></a></div> --><div style="text-align: center"><el-image :src="require('../assets/jzqk.png')" class="imgnew" /></div><div class="contentnew"><div><p><span>项目名称</span>: {{ this.projectName }}</p><p><span>项目类型</span>: {{ this.projectType }}</p><p><span>项目状态</span>: {{ this.projectStatus }}</p><p><span>项目时间</span>: {{ this.expectedEndTime }}</p><p><span>项目描述</span>: {{ this.projectContent }}</p></div><el-dialog :visible.sync="adddialogVisible" title="新增进程"><el-form ref="form" :model="form" label-width="80px" :rules="rules"><el-form-item label="标题" prop="title"><el-input v-model="form.title"></el-input></el-form-item><el-form-item label="描述"><el-input type="textarea" v-model="form.description"></el-input></el-form-item><el-form-item label="负责人" prop="responsiblePerson"><el-input v-model="form.responsiblePerson"></el-input></el-form-item><el-form-item label="附件"><el-uploadclass="upload-demo"action="http://192.168.7.1:10020/project-updates/upload":on-success="handleSuccess":on-error="handleError"><el-button slot="trigger" size="small" type="primary">选择文件</el-button></el-upload></el-form-item><el-form-item label="时间" prop="updateTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="form.updateTime"style="width: 100%"value-format="yyyy-MM-dd"></el-date-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit('form')">立即创建</el-button></el-form-item></el-form></el-dialog><el-button type="primary" @click="showAddDialog">新增内容</el-button><el-table :data="tableData"><el-table-columntype="index"label="序号"width="100"></el-table-column><el-table-columnprop="description"label="描述"width="300px"class-name="ellipsis-column"></el-table-column><el-table-columnlabel="附件"width="200px"class-name="ellipsis-column"><template slot-scope="scope"><el-buttontype="text"size="small"@click="showUpdate(scope.row)"id="download":style="{ color: scope.row.attachment ? '#409eff' : 'grey' }">{{ scope.row.title }}</el-button></template></el-table-column><el-table-column prop="updateTime" label="时间"></el-table-column><el-table-column label="操作"><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-buttontype="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-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20]":page-size="pageSize":total="total"></el-pagination><el-dialog:visible.sync="dialogVisible"title="编辑信息"@close="dialogVisible = false"><el-form:model="editForm"label-width="80px"ref="editForm":rules="rules"><el-form-item label="标题" prop="title"><el-input v-model="editForm.title"></el-input></el-form-item><el-form-item label="描述" prop="description"><el-input type="textarea" v-model="editForm.description"></el-input></el-form-item><el-form-item label="负责人" prop="responsiblePerson"><el-input v-model="editForm.responsiblePerson"></el-input></el-form-item><el-form-item label="附件" prop="attachment"><el-uploadclass="upload-demo"action="http://192.168.1.1:10020/project-updates/upload":on-success="handleSuccess":on-error="handleError":file-list="fileList":limit="1"><el-button slot="trigger" size="small" type="primary">选择文件</el-button><div slot="tip" class="el-upload__tip" style="color: red">只允许上传一个文件，请删除原文件后再上传</div></el-upload></el-form-item><el-form-item label="时间" prop="updateTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="editForm.updateTime"style="width: 100%"></el-date-picker></el-col></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"ref="editForm":rules="rules"><el-form-item label="标题" prop="title"><el-input v-model="editForm.title" disabled></el-input></el-form-item><el-form-item label="描述" prop="description"><el-inputtype="textarea"v-model="editForm.description"disabled></el-input></el-form-item><el-form-item label="负责人" prop="responsiblePerson"><el-input v-model="editForm.responsiblePerson" disabled></el-input></el-form-item><el-form-item label="附件" prop="attachment"><el-uploadclass="upload-demo"action="http://192.168.7.1:10020/project-updates/upload":on-success="handleSuccess":on-error="handleError":file-list="fileList":limit="1"disabled><el-button slot="trigger" size="small" type="primary">选择文件</el-button><div slot="tip" class="el-upload__tip" style="color: red">只允许上传一个文件，请删除原文件后再上传</div></el-upload></el-form-item><el-form-item label="时间" prop="updateTime"><el-col :span="11"><el-date-pickertype="date"placeholder="选择日期"v-model="editForm.updateTime"style="width: 100%"disabled></el-date-picker></el-col></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="updateVisible"title="全部进展信息"width="50%":before-close="handleClose"><div class="block"><el-timeline :reverse="reverse"><el-timeline-itemv-for="(activity, index) in activities":key="index":timestamp="activity.timestamp">{{ activity.content }}</el-timeline-item></el-timeline></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="updateVisible = false">关闭</el-button></span></el-dialog></div></div>
</template><script>
import { fetchData } from "../api/detail";
import { deleteData } from "../api/detail";
import { editData } from "../api/detail";
import { selectbytypeData } from "../api/detail";
import { addData } from "../api/detail";
export default {data() {return {// 删除deletedata: false,namefu: [],namefuArray: [],routerdata: "",dataParam: "",// 查看browse: false,projectName: "",projectType: "",projectStatus: "",expectedEndTime: "",projectContent: "",fileList: [],tableData: [],total: 0,currentPage: 1,pageSize: 10,dialogVisible: false,updateVisible: false,updateContent: "",adddialogVisible: false,id: "",editForm: {},params: {type: "",status: "",page: 1,size: 10,},form: {projectId: "",title: "",description: "",attachment: "",responsiblePerson: "",// projectStatus: "",updateTime: "",},rules: {title: [{ required: true, message: "请输入标题", trigger: "blur" }],responsiblePerson: [{ required: true, message: "请输入负责人姓名", trigger: "change" },],updateTime: [{ required: true, message: "请选择时间", trigger: "change" },],},reverse: true,activities: [{content: "活动按期开始",timestamp: "2018-04-15",},{content: "通过审核",timestamp: "2018-04-13",},{content: "创建成功",timestamp: "2018-04-11",},],};},computed: {},methods: {// 附件handleSuccess(response, file, fileList) {// 处理上传成功的逻辑this.fileList = [];this.fileList = response;this.form.attachment = response;console.log(this.form.attachment);},handleError() {"文件上传失败";},// 图片弹框showAddDialog() {this.adddialogVisible = true;},// 查看browses(row) {// console.log(row,'nihO')this.editForm = Object.assign({}, row);this.browse = true;},// 编辑 按钮handleEdit(row) {this.editForm = Object.assign({}, row);//   this.editForm.attachment = "111";console.log(row.attachment);if (row.attachment) {const obj = {};obj.name = row.attachment.substring(52);obj.url = row.attachment;this.fileList = [];this.fileList.push(obj);}this.dialogVisible = true;},// 删除 弹框showDeleteDialog(row) {this.currentRowData = row; // 将当前行的数据保存到 currentRowDatathis.deletedata = true; // 打开对话框},// 删除 按钮handleDelete(row) {const index = this.tableData.indexOf(row);// console.log("row is", row.id);deleteData("/project-updates", row.id).then((response) => {// 请求成功处理});if (index !== -1) {this.tableData.splice(index, 1);}this.deletedata = false; // 关闭对话框},// 保存  编辑saveEdit(form) {// 在这里保存编辑后的数据console.log("保存编辑后的数据", this.editForm.id);this.$refs[form].validate((valid) => {if (valid) {this.editForm.attachment=this.fileList;this.projectId = this.$route.params.id;console.log(this.projectId);console.log(form, "from");editData("/project-updates", this.editForm.id, this.editForm).then((response) => {// 请求成功处理});this.dialogVisible = false;window.location.reload();} else {console.log("error submit!!");return false;}});},// 分页handleSizeChange(val) {this.pageSize = val;},handleCurrentChange(val) {this.currentPage = val;this.params.page = val;fetchData("/project-updates/projectPage",this.$route.params.id,this.params).then((response) => {// 请求成功处理const currentPage = 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.expectedEndTime.substring(0, 10));this.tableData[index].updateTime = row.updateTime.substring(0, 10);}this.$forceUpdate();});},// 附件showUpdate(row) {// 在这里获取id参数，假设id字段在row对象中const lianjie = row.attachment;const downloadElement = this.$el.querySelector("#download");if (lianjie) {window.open(lianjie, "_blank");} else {downloadElement.classList.add("grey");}},handleClose(done) {this.updateContent = "";done();},// 立即创建onSubmit(form) {// console.log(this.form,'from')this.$refs[form].validate((valid) => {if (valid) {// alert("submit!");this.form.projectId = this.id;// this.form.attachment=this.fileList;addData("/project-updates", this.form);this.adddialogVisible = false;window.location.reload();console.log(this.form, "this.form");} else {console.log("error submit!!");return false;}});},},created() {fetchData("/project-updates/projectPage",// 接受上一个页面传过来的路由值this.$route.params.id,this.params).then((response) => {if (response) {// 请求成功处理console.log(response.data,'response');this.tableData = response.data.content;this.routerid = this.$route.params.id;this.routerdata = this.$route.query.data;this.projectName = JSON.parse(this.routerdata).projectName;this.projectType = JSON.parse(this.routerdata).projectType;this.projectStatus = JSON.parse(this.routerdata).projectStatus;this.expectedEndTime = JSON.parse(this.routerdata).expectedEndTime;this.projectContent = JSON.parse(this.routerdata).projectContent;for (let index = 0; index < this.tableData.length; index++) {const row = this.tableData[index];this.namefu = row.description;this.namefuArray.push(this.namefu); // 将每次的namefu值保存到数组中this.tableData[index].updateTime = row.updateTime.substring(0, 10);}this.total = response.data.totalElements;}});},mounted() {this.id = this.$route.params.id;// console.log("获取到的id参数为：", this.id);},
};
</script>
<style>
.ellipsis-column .cell {display: block; /* 或者 inline-block，取决于你的布局需求 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.el-form-item__label {width: 120px !important;
}
.el-pagination__rightwrapper {float: left !important;
}
.el-form-item__content {margin-left: 120px !important;
}
.dingwei {position: fixed;bottom: 150px;right: 40px;z-index: 999;
}
.xiala {font-size: 16px;margin-left: 30px;
}
.linetit {float: left;width: 100%;text-align: left;line-height: 60px;border-bottom: 2px solid #d9ecff;background-color: #fff8f8;
}
.linetable {width: 100%;margin: 0px auto;
}
.el-dropdown-link {border: 1px solid #dcdfe6;background-color: #fff;color: #606266 !important;
}
.contentnew {width: 1800px;margin: 20px auto 0 auto;
}
.el-dropdown-link {cursor: pointer;font-size: 16px;padding: 6px 10px;line-height: 30px;border-radius: 8px;
}.el-pagination {margin-top: 20px;
}.el-icon-arrow-down {font-size: 12px;
}.el-table .el-table__cell {text-align: center !important;color: #333 !important;font-size: 16px !important;font-weight: normal !important;
}
.el-table th {background-color: #ecf5ff !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
.el-table__body tr td {background-color: #fff !important;
}
.imgnew {margin: 90px auto;
}
.el-button--small {font-size: 15px !important;
}.btnnew {border: none !important;font-size: 22px !important;font-weight: bold !important;padding: 0 15px !important;
}
</style>

api页面

import axios from 'axios';const BASE_URL = 'http://192.168.1.1:10020';const api = axios.create({baseURL: BASE_URL,timeout: 10000,headers: {'Access-Control-Allow-Origin': "*"}
});// ----------------- 日报--------------------------------//获取全部数据，分页情况params是分页参数page size
export const dailyfetchData = (endpoint, params) => {return api.get(`${endpoint}?page=${params.page}&size=${params.size}`);
};//新增
export const dailyaddData = (endpoint, params) => {console.log('api')return api.post(endpoint, params);
};//删除 
export const dailydeleteData = (endpoint, id) => {return api.delete(`${endpoint}/${id}`);
};//修改
export const dailyeditData = (endpoint, id, params) => {return api.put(`${endpoint}/${id}`, params);
};// -------------------------------------------------//获取全部数据，分页情况params是分页参数page size
export const fetchData = (endpoint, params) => {return api.get(`${endpoint}?page=${params.page}&size=${params.size}`);
};
//删除
export const deleteData = (endpoint, id) => {return api.delete(`${endpoint}/${id}`);
};
//修改
export const editData = (endpoint, id, params) => {return api.put(`${endpoint}/${id}`, params);
};
//查询
export const searchData = (endpoint, id) => {return api.get(`${endpoint}/${id}`);
};
//新增
export const addData = (endpoint, params) => {return api.post(endpoint, params);
};
//通过类型查询
export const selectbytypeData = (endpoint, params) => {if (!params.status && params.type && params.startDate) {return api.get(`${endpoint}?type=${params.type}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);} else if (!params.type && params.status && params.startDate) {return api.get(`${endpoint}?status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);} else if (!params.startDate && params.type && params.status) {return api.get(`${endpoint}?type=${params.type}&status=${params.status}&page=${params.page}&size=${params.size}`);} else if (!params.status && !params.type && params.startDate) {return api.get(`${endpoint}?startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);} else if (!params.status && !params.startDate && params.type) {return api.get(`${endpoint}?type=${params.type}&page=${params.page}&size=${params.size}`);} else if (!params.type && !params.startDate && params.status) {return api.get(`${endpoint}?status=${params.status}&page=${params.page}&size=${params.size}`);} else {return api.get(`${endpoint}?type=${params.type}&status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);}// return api.get(`${endpoint}?type=${params.type}&status=${params.status}&startDate=${params.startDate}&endDate=${params.endDate}&page=${params.page}&size=${params.size}`);
};

router页面

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',beforeEnter: (to, from, next) => {document.title = '信息化项目管理系统';next();},component: () => import(/* webpackChunkName: "about" */ '../views/MyVue.vue')},{path: '/daily',name: 'daily',beforeEnter: (to, from, next) => {document.title = '信息化项目管理系统';next();},component: () => import(/* webpackChunkName: "about" */ '../views/daily.vue')},{path: '/progess/:id',name: 'progess',beforeEnter: (to, from, next) => {document.title = '信息化项目管理系统';next();},// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/progess.vue')}
]const router = new VueRouter({routes
})export default router