vue2 table 页面 + 功能 展示

阿金要当大魔王~~2024-03-24 12:48

首页代码

复制代码 
<!-- 首页展示页面 + 弹框展示  -->
<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-picker
                  type="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-input
                type="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-picker
            v-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-column
            type="index"
            label="序号"
            width="200px"
          ></el-table-column>

          <el-table-column
            prop="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-column
            prop="expectedEndTime"
            label="预期结束时间"
              width="300px"
          ></el-table-column>
          <el-table-column
            prop="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-button
                type="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-picker
                  type="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-input
                type="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-input
                v-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-picker
                  type="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-input
                type="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-item
                v-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; // 将当前行的数据保存到 currentRowData
      this.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-upload
              class="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-picker
                type="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-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>

        <el-table-column
          prop="description"
          label="描述"
          width="300px"
          class-name="ellipsis-column"
        ></el-table-column>

        <el-table-column
          label="附件"
          width="200px"
          class-name="ellipsis-column"
        >
          <template slot-scope="scope">
            <el-button
              type="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-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-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-upload
              class="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-picker
                type="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-input
              type="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-upload
              class="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-picker
                type="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-item
              v-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; // 将当前行的数据保存到 currentRowData
      this.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
相关推荐
李少兄6 分钟前
简单讲讲 SVG：前端开发中的矢量图形
前端·svg
前端小万8 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭8 分钟前
Flutter 3.38.1 之后，因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo12 分钟前
Flutter 需要 Hooks 吗？
前端
光影少年22 分钟前
前端如何虚拟列表优化？
前端·react native·react.js
Moment23 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
invicinble41 分钟前
对于前端数据的生命周期的认识
前端
PieroPc1 小时前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
hunter14501 小时前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少1 小时前
Android 深入剖析Android内存泄漏：ViewPager2与Fragment的生命周期陷阱
android·前端·app
热门推荐
01GitHub 镜像站点02手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04jdk21下载、安装（Windows、Linux、macOS）05Linux下V2Ray安装配置指南062025 最新教程：注册并切换到美区 Apple ID07Claude Code Skills 实用使用手册08UV安装并设置国内源09Labelme从安装到标注：零基础完整指南10GitLab 零基础入门指南：从安装到项目管理全流程