上报

zxl

3 天以前 4456440a36c8796cbfb6dc8df67367ea73659451

上报

 src/views/report/index.vue

New file
@@ -0,0 +1,270 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="支持模糊查询" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
          <el-option label="待审核" value="PendingReview" />
          <el-option label="已通过" value="Approved" />
          <el-option label="已驳回" value="Reject" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="datetimerange"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="编号" align="center" prop="id" width="100" />
      <el-table-column label="项目" align="center" prop="projectName" :show-overflow-tooltip="true" min-width="220" />
      <el-table-column label="用户" align="center" prop="userName" :show-overflow-tooltip="true" min-width="260" />
      <el-table-column label="时间" align="center" prop="gmtCreate" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <el-tag :type="statusTagType(scope.row)">{{ statusText(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleApprove(scope.row)" :disabled="statusText(scope.row) !== '待审核'">通过</el-button>
          <el-button size="mini" type="text" icon="el-icon-close" @click="handleReject(scope.row)" :disabled="statusText(scope.row) !== '待审核'">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="detailOpen" width="700px" append-to-body>
      <el-form ref="detailForm" :model="detail" label-width="80px" v-loading="detailLoading">
        <el-form-item label="项目:">
          <el-input v-model="detail.projectName" readonly />
        </el-form-item>
        <el-form-item label="上报人:">
          <el-input v-model="detail.userName" readonly />
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="detail.content" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="detail.remake" readonly />
        </el-form-item>

        <el-form-item label="时间:">
          <el-input v-model="detail.gmtCreate" readonly />
        </el-form-item>

        <el-form-item label="附件:">
          <div class="file-upload-view-only">
            <FileUpload v-model="detail.fileUrl" :isShowTip="false" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="detailOpen=false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
  </template>

<script>
import { reportPage,review } from "@/api/report/report";

export default {
  name: "ReportList",
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      datetimerange: [],
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        projectName:"",
        status:"",
        startDate:null,
        endDate:null
      },
      detailOpen: false,
      title:"",
      detailLoading: false,
      detail: {
        id: "",
        projectName: "",
        content: "",
        gmtCreate: "",
        fileUrl: [],
        remake:"",
        status:"",
      },
      baseUrl: process.env.VUE_APP_BASE_API
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      reportPage(this.queryParams).then(res => {
         this.loading = false;
          if (res.code === 200){
            this.list = res.data;
            this.total = res.total;
          }
      }).catch(() => {
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        pageSize: 10,
        projectName: "",
        status: "",
        startDate: null,
        endDate: null
      };
      this.datetimerange = [];
      this.getList();
    },
    handleDateChange(val) {
      if (val && val.length === 2) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];
      } else {
        this.queryParams.startDate = null;
        this.queryParams.endDate = null;
      }
      this.handleQuery();
    },
    statusText(row) {
      const s = row.status;
      if (s === 'Approved') return '已通过';
      if (s === 'Reject') return '已驳回';
      return '待审核';
    },
    statusTagType(row) {
      const t = this.statusText(row);
      if (t === '已通过') return 'success';
      if (t === '已驳回') return 'danger';
      return 'warning';
    },
    handleView(row) {
      const id = row.id;
      // 先用行数据展示，提升响应速度
      this.detailLoading = true;
      this.detailOpen = true;
      this.title = "查看";
      this.detailLoading = false;
      this.detail.id = row.id;
      this.detail.content = row.content;
      this.detail.gmtCreate = row.gmtCreate;
      this.detail.projectName = row.projectName;
      this.detail.fileUrl = row.fileUrlArray;
      this.detail.userName = row.userName;
      this.detail.remake = row.remake;


    },
    handleApprove(row) {
      this.$prompt('请输入备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入备注'
      }).then(({ value}) =>{
        const params ={
          id:row.id,
          status:"Approved",
          remake:value
        }
        review(params).then(res => {
          this.$message.success('已通过');
          this.getList();
        })
      })


    },
    handleReject(row) {
      this.$prompt('请输入驳回原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入原因'
      }).then(({ value }) => {
        const params ={
          id:row.id,
          status:"Reject",
          remake:value
        }
        review(params).then(() => {
          this.$message.success('已驳回');
          this.getList();
        })
      }).catch(() => {})
    },
    fileHref(f) {
      if (typeof f === 'string') return this.baseUrl + f;
      if (f && f.url) return this.baseUrl + f.url;
      return '';
    },
    fileName(f) {
      const n = typeof f === 'string' ? f : f.name || f.url || '';
      const idx = n.lastIndexOf('/');
      return idx > -1 ? n.slice(idx + 1) : n;
    }
  }
}
</script>

<style scoped>
/* 样式穿透：覆盖组件内的上传按钮和删除按钮 */
.file-upload-view-only >>> .upload-file-uploader {
  display: none; /* 隐藏上传按钮区域（包含上传按钮和提示文字） */
}

.file-upload-view-only >>> .ele-upload-list__item-content-action {
  display: none; /* 隐藏删除按钮 */
}
.mb8 {
  margin-bottom: 8px;
}
</style>