2020-11-13

bob

2020-11-25 84326b11401f217cd483d13bc72cec4ffd5da7ce

 src/views/list.vue

@@ -1,25 +1,30 @@
<template>
   <!-- 已完成的不修改需将 finish1 改成 finish -->
   <div>
      <div align="left">

         <div class="btn-line">
            <el-button type="primary" @click="addProject">新建项目</el-button>
            <!-- <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>
            </el-form-item>
            
            <el-form-item label="研究目的">
               <el-select v-model="formInline.type" placeholder="研究目的">
                  <el-option label="干预性系统评价" value="干预性系统评价"></el-option>
                  <el-option label="诊断性系统评价" value="诊断性系统评价"></el-option>
                  <el-option label="预后性系统评价" value="预后性系统评价"></el-option>
                  <el-option label="相关性系统评价" value="相关性系统评价"></el-option>
            <el-form-item label="研究类型分类" label-width="100px">
               <el-select v-model="formInline.type" placeholder="研究类型分类">
                  <el-option
                     v-for="(item,k) in options_type"
                     :key="k"
                     :label="item"
                     :value="item"
                  ></el-option>
               </el-select>
            </el-form-item>
            
@@ -44,58 +49,125 @@
      </div>

      <el-table  highlight-current-row
            ref="data_table"
            @current-change="tableChange"
            @sort-change="sortChange"
            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="code" label="项目号" width="130" sortable="custom">
         </el-table-column>
         <el-table-column prop="status" label="当前状态"  :formatter="status_">
         <el-table-column prop="name" label="项目名称" width="120" sortable="custom" show-overflow-tooltip>
         </el-table-column>
         <el-table-column prop="reseachType" label="研究类型" >
         <el-table-column prop="status" label="当前状态" width="100" sortable="custom" align="center" :formatter="status_">
         </el-table-column>
         <el-table-column prop="totalCnt" label="服务项目数" >
         <el-table-column prop="totalCnt" label="服务项目数" width="120"  align="center">
         </el-table-column>
         <el-table-column prop="finishCnt" label="已完成项目" >
         <el-table-column prop="finishCnt" label="已完成项目" width="120"  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" sortable="custom" align="center" :formatter="dateFormat_">
         </el-table-column>
         <el-table-column prop="endTime" label="结束时间" :formatter="dateFormat_" >
         <el-table-column prop="endTime" label="结束时间" width="100" sortable="custom" align="center" :formatter="dateFormat_" >
         </el-table-column>

         <el-table-column prop="desp" label="项目描述">
         <el-table-column prop="desc" 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 :disabled="!row.attachment" 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>
      <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>
      </el-dialog>
      <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 +175,8 @@
            detailData:undefined,
            dialog_1: false,
            dialog_2: false,
            dialog_upload: false,
            dialog_pdf: false,
            pagenum: 1,
            pagesize: 15,
            total: 0,
@@ -110,21 +184,132 @@
            labelPosition: "left",
            tableData: [],
            userId:"",
            assign:undefined,
            formInline: {
               user: '',
               region: ''
            }
            assign:null,
            formInline: {},
            options_type:[
               "Health technology assessment (HTA)",
               "Clinical practice guideline (CPG)",
               "Evidence mapping",
               "Overview of review",
               "Scoping review",
               "Rapid review",
               "Systematic review",
               "Rapid review",
               "Randomised controlled trial (RCT)",
               "Other"
            ],
				
            orderBy: "",
         }
      },
      mounted() { //组件配置后，页面显示前。用于加载数据
         //this.userId = localStorage.getItem('userId');
         //this.assign = localStorage.getItem('assign');
			
         this.userId = this.$cookies.get('userId');
         this.assign = this.$cookies.get('assign');
			
         this.getData();
         this.userId = localStorage.getItem('userId');
         this.assign = localStorage.getItem('assign');
      },
      methods: {
         sortChange(column, prop, order) {
            this.orderBy = "";
            if (column.prop && column.order) {
               this.orderBy = this.toLine(column.prop);
               if (column.order == "descending") {
                  this.orderBy += " desc";
               }
            }
				
            this.query_();
         },
			
         // 下划线转换驼峰
         toHump(name) {
             return name.replace(/\_(\w)/g, function(all, letter){
                 return letter.toUpperCase();
             });
         },
         // 驼峰转换下划线
         toLine(name) {
           return name.replace(/([A-Z])/g,"_$1").toLowerCase();
         },
			
         download() {
            if (!this.selected) {
               this.$message({message:'请选择下载条目', type: 'warning'});
               return;
            }
				
            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_();
         },
         Cancel2() {
            this.dialog_2 = false;
@@ -135,16 +320,19 @@
         },
         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;
            if (this.selected.userId == this.userId) {
         //   this.editShow = true;
             if (this.selected.userId == this.userId) {
               this.editShow = true;
            }else {
               this.editShow = false;
@@ -170,24 +358,40 @@
            let params =  {
               pageSize: this.pagesize
            };
            if(this.assign) {
            if(this.assign == "true") {
               params.userId = this.userId;
            }
            if(query){
				
            if (query && query.name) {
               params.name = query.name;
            }
            if (query && query.status) {
               params.status = query.status;
            }
            if (query && query.type) {
               params.type = query.type;
            }
				
            if(this.orderBy) {
               params.orderBy = this.orderBy;
            }
				
            this.$axios.get(url, {
                  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) {
@@ -225,17 +429,20 @@
         },
         addProject() {
            this.dialog_1 = true;
				
            this.rowData = {};
         },
         editProject() {
            if(!this.selected || this.selected.status != "edit"){
					
               this.$message({message:'请选中一条未启动的项目', type: 'warning'});
            //已完成的不修改需将 finish1 改成 finish
         //   if(!this.selected || this.selected.status == "finish"){
            if(!this.selected || this.selected.status == "finish1"){
               this.$message({message:'请选中一条未完成的项目', type: 'warning'});
            }else {
               this.rowData = {
                  id:this.selected.id,
                  desp:this.selected.desp,
                  desc:this.selected.desc,
                  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')]
               }
@@ -243,9 +450,10 @@
            }
            
            
         },closeNewProject() {
         },
         closeNewProject() {
            this.dialog_1 = false;
            query_();
            this.query_();
         },
         
      }