zhangyanpeng
2020-04-30 eb3241b59986de83f64ab747d2521bb78a1af0b6
src/views/list.vue
@@ -6,9 +6,12 @@
            <el-button type="primary" @click="addProject">新建项目</el-button>
            <el-button type="primary" v-if="editShow" @click="editProject">编辑项目</el-button>
            <el-button type="primary" @click="showDetail">查看详情</el-button>
            <el-button type="primary" @click="download">导出timeline</el-button>
         </div>
         <div style="width: 0px; height: 0px;">
            <iframe ref="frame_export" style="width: 0px; height: 0px; border: 0px;"></iframe>
         </div>
         <el-form label-width="80px" :inline="true" :label-position="labelPosition" :model="formInline" class="form-inline">
            <el-form-item label="项目名称">
               <el-input v-model="formInline.name" placeholder="项目名称"></el-input>
@@ -44,36 +47,52 @@
      </div>
      <el-table  highlight-current-row
            ref="data_table"
            @current-change="tableChange"
            v-loading="loading_table"
            align="center"
             max-height="280"
    :data="tableData" style="width: 100%; " :row-class-name="tableRowClassName">
         <el-table-column prop="name" label="项目名称" >
            size="small"
            :data="tableData"
            :header-cell-style="{'width': '100%', 'text-align': 'center'}"
            :row-class-name="tableRowClassName">
            <el-table-column type="index" width="50"> </el-table-column>
         <el-table-column prop="name" label="项目名称" width="120" show-overflow-tooltip>
         </el-table-column>
         <el-table-column prop="status" label="当前状态"  :formatter="status_">
         <el-table-column prop="status" label="当前状态" width="100" align="center" :formatter="status_">
         </el-table-column>
         <el-table-column prop="reseachType" label="研究类型" >
         <el-table-column prop="reseachType" label="研究类型" width="130">
         </el-table-column>
         <el-table-column prop="totalCnt" label="服务项目数" >
         <el-table-column prop="totalCnt" label="服务项目数" width="100" align="center">
         </el-table-column>
         <el-table-column prop="finishCnt" label="已完成项目" >
         <el-table-column prop="finishCnt" label="已完成项目" width="100" align="center">
         </el-table-column>
         <el-table-column prop="delayCnt" label="延期项目" >
         <el-table-column prop="delayCnt" label="延期项目" width="100" align="center">
         </el-table-column>
         <el-table-column prop="startTime" label="开始时间" :formatter="dateFormat_">
         <el-table-column prop="startTime" label="开始时间" width="100" align="center" :formatter="dateFormat_">
         </el-table-column>
         <el-table-column prop="endTime" label="结束时间" :formatter="dateFormat_" >
         <el-table-column prop="endTime" label="结束时间" width="100" align="center" :formatter="dateFormat_" >
         </el-table-column>
         <el-table-column prop="desp" label="项目描述">
         <el-table-column prop="desp" label="项目描述" show-overflow-tooltip></el-table-column>
         <el-table-column label="操作" align="center" width="300">
           <template v-slot="{row}">
             <el-row>
               <el-tooltip class="item" effect="dark" content="预览" placement="top">
                 <el-button type="primary" icon=" el-icon-view" circle @click="viewHT(row)"></el-button>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="上传报价合同" placement="top">
                 <el-button type="success" icon="el-icon-upload2" circle @click="uploadHT(row)"></el-button>
               </el-tooltip>
             </el-row>
           </template>
         </el-table-column>
      </el-table>
      <el-pagination
            @current-change="handleCurrentChange"
      background :current-page="pagenum" :page-sizes="[15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
       :total="total">
      </el-pagination>
      <div style="text-align: right; background-color: #fff;">
         <el-pagination
            @current-change="handleCurrentChange"
            background :current-page="pagenum" :page-sizes="[15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
         </el-pagination>
      </div>
      
      <el-dialog v-if="dialog_1"  @close="Cancel"  width="70%" top="50px" :visible.sync="dialog_1" append-to-body>
        <newProject @closeNewProject="closeNewProject" v-bind:rowData="rowData" ref="newProject_"></newProject>
@@ -81,21 +100,71 @@
      <el-dialog v-if="dialog_2" @close="Cancel2"  width="70%" top="50px" :visible.sync="dialog_2" append-to-body>
        <prodetail @closeNewProject="closeDetail" v-bind:rowData="detailData" ref="newProject2_"></prodetail>
      </el-dialog>
      <el-dialog custom-class="z_master_dialog" title="文件上传" v-if="dialog_upload" :visible.sync="dialog_upload" width="500px" append-to-body>
        <div style="width: 100%; padding-top: 24px; height: 300px; text-align: center;">
          <el-upload
            :show-file-list='true'
            class="upload-demo"
            ref="upload"
            :action="upload_url"
            :headers= "upload_headers"
            :data="upload_data"
            :on-preview="handlePreview"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传PDF文件</div>
          </el-upload>
        </div>
      </el-dialog>
      <el-dialog v-if="dialog_pdf" :visible.sync="dialog_pdf" top="10px" width="80%">
         <div style="height: 500px; width: 100%; overflow: overlay;">
            <pdf :src="pdfUrl" :page="currentPage"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler"
            ref="wrapper" class="pdf"></pdf>
         </div>
         <div style="">
            <el-button size="small"  @click="changePdfPage(0)">上一页</el-button>
            <el-button size="small"  @click="changePdfPage(1)">下一页</el-button>
         </div>
      </el-dialog>
   </div>
</template>
<script>
   import newProject from '../components/popup/newProject.vue'
   import prodetail from '../components/popup/prodetail.vue'
   import pdf from 'vue-pdf'
   export default {
      
      components: {
        newProject,
        prodetail
        prodetail,
         pdf
      },
      data() {
         return {
            editShow: true,
            upload_url: "",
            upload_type: "",
            upload_headers: {},
            upload_data: {},
            pdfUrl: "",
            currentPage: 1,
            pageCount: 0,
            
            loading_table: false,
            query: "",
@@ -103,6 +172,8 @@
            detailData:undefined,
            dialog_1: false,
            dialog_2: false,
            dialog_upload: false,
            dialog_pdf: false,
            pagenum: 1,
            pagesize: 15,
            total: 0,
@@ -114,7 +185,7 @@
            formInline: {
               user: '',
               region: ''
            }
            },
         }
      },
      mounted() { //组件配置后,页面显示前。用于加载数据
@@ -123,6 +194,73 @@
         this.assign = localStorage.getItem('assign');
      },
      methods: {
         download() {
            if(!this.selected.id || this.selected.status == "edit"){
               this.$message({message:'【未开始】状态不能下载', type: 'warning'});
               return;
            }
            this.$refs.frame_export.src = "/api/api/file/timeline/" + this.selected.id;
         },
         viewHT(row) {
            this.pdfUrl = "/api/api/file/downloadPath?path=" + row.attachment;
            this.dialog_pdf = true;
            /* let url = "/api/file/downloadPath";
            let params = {
               path: row.attachment
            };
            this.$axios.get(url, {
                  params
               }).then(data_ => {
               }).catch(error => {
               }) */
         },
         loadPdfHandler (e) {
            this.currentPage = 1 // 加载的时候先加载第一页
         },
         changePdfPage(val) {
               if(val === 0 && this.currentPage > 1) {
                     this.currentPage--;
               }
               if(val === 1 && this.currentPage < this.pageCount) {
                     this.currentPage++;
               }
         },
         uploadHT(row) {
            /* this.upload_data = {
              id: row.id
            }; */
            this.upload_url = "/api/api/file/schemeUpload/" + row.id;
            this.dialog_upload = true;
         },
         submitUpload() {
           this.$refs.upload.submit();
         },
         beforeAvatarUpload(file) {
           let FileName = file.name;
           let index1=FileName.lastIndexOf(".");
           let index2=FileName.length;
           let suffix=FileName.substring(index1, index2);//后缀名
           const isSQL = suffix === '.pdf';
           if (!isSQL) {
             this.$message.error('只能上传.pdf文件');
           }
           return isSQL;
         },
         handleRemove(file, fileList) {
           window.console.log(file, fileList);
         },
         handlePreview(file) {
           window.console.log(file);
         },
         uploadSuccess() {
            this.dialog_upload = false;
            this.query_();
         },
         Cancel() {
            this.dialog_1 = false;
            this.query_();
@@ -136,13 +274,15 @@
         },
         showDetail() {
            if(!this.selected){
               this.$message({message:'请选中一条未启动的项目', type: 'warning'});
               return;
            }
            this.dialog_2 = true;
         },
         tableChange(val) {
            if (!val) {
               val = {};
            }
            this.selected = val;
            this.detailData = val;
         //   this.editShow = true;
@@ -184,12 +324,18 @@
                  params
               })
               .then(data_ => {
                  console.log(data_);
                  this.tableData = data_.data.data.records; //给tableData赋值
                  this.total = data_.data.data.total;
                  window.console.log(data_);
                  let clientHeight = document.documentElement.clientHeight;
                  let tableHeight_ = clientHeight - 60 - 20 - 60 - 62 - 48 - 48 - 20;
                  this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['height'] = tableHeight_ - 10 + "px";// - header_height
                  this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['min-height'] = tableHeight_ - 10 + "px";
                  this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['overflow'] = "overlay";
                  this.tableData = data_.data.data.datas.records; //给tableData赋值
                  this.total = data_.data.data.datas.total;
                  this.loading_table = false;
               }).catch(error => {
                  console.log(error);
            //      console.log(error);
               })
         },
         tableRowClassName(row, rowIndex) {
@@ -230,14 +376,16 @@
            this.rowData = {};
         },
         editProject() {
            if(!this.selected || this.selected.status != "edit"){
            if(!this.selected || this.selected.status == "finish"){
               
               this.$message({message:'请选中一条未启动的项目', type: 'warning'});
               this.$message({message:'请选中一条未完成的项目', type: 'warning'});
            }else {
               this.rowData = {
                  id:this.selected.id,
                  desp:this.selected.desp,
                  name: this.selected.name,
                  beginDate: this.selected.beginDate,
                  endDate: this.selected.endDate,
                  objective:this.selected.reseachType,
                  items:[this.$moment(this.selected.startTime).format('YYYY-MM-DD'),this.$moment(this.selected.endTime).format('YYYY-MM-DD')]
               }
@@ -245,9 +393,10 @@
            }
            
            
         },closeNewProject() {
         },
         closeNewProject() {
            this.dialog_1 = false;
            query_();
            this.query_();
         },
         
      }