youhua

src/views/reportManagement/daily/components/DailyDetails.vue

@@ -1,142 +1,152 @@
 <template>
-  <el-container class="BackgroundCloth">
-    <el-header class="public_header setLine">
-      <div class="Layout_space_between">
-        <div class="Layout_flex_start">
-          <div>
-            <span class="details-id">{{ 'report-' + details.id }}</span><br>
-            <span class="report-title">{{ details.reportName }}</span>
-          </div>
-          <div class="details-statusString">{{ details.statusString }}</div>
-        </div>
-        <div>
-          <span v-if="details.status === 0 ? true : false" class="didi-hover" @click="dailyButtom(5,details)">发送</span>
-          <span v-if="details.status === 0 ? true : false" style="margin: 0 30px;" class="didi-hover" @click="dailyButtom(6,details)">编辑</span>
-          <span v-if="details.status === 0 ? true : false" class="didi-hover" @click="dialog_testData = true">删除</span>
-          <span v-if="details.status === 3 ? true : false" class="didi-hover" @click="dailyButtom(3,details)">复制</span>
-        </div>
-      </div>
-    </el-header>
-    <el-container>
-      <el-main class="report-main">
-        <div class="title"><div class="blur-column" /> 报告内容</div>
-        <div v-html="details.content" />
-        <icon-display :details="details" />
-      </el-main>
-      <el-aside width="400px">
-        <el-container>
-          <el-header class="report-mains">
-            <div class="title"><div class="blur-column" /> 用户信息</div>
-            <div class="Layout_flex_start task-bot">
-              <div class="title-name">报告人 : </div>
-              <div class="task-name">{{ details.reportorObject ? details.reportorObject.name : '' }}</div>
-            </div>
-            <div class="Layout_flex_start task-bot">
-              <div class="title-name">收件人 : </div>
-              <div v-for="(item, index) in details.sendToObject" :key="index" class="task-name"> {{ item.name }} <span v-if="index < details.sendToObject.length - 1"> , </span></div>
-            </div>
-            <div class="Layout_flex_start task-bot">
-              <div class="title-name">抄送人 : </div>
-              <div v-for="(item, index) in details.sendCcObject" :key="index" class="task-name">{{ item.name }} <span v-if="index < details.sendCcObject.length - 1"> , </span></div>
-            </div>
-          </el-header>
-          <el-main class="report-mains">
-            <div class="title"><div class="blur-column" /> 时间</div>
-            <div class="Layout_flex_start task-bot">
-              <div class="title-name">创建时间 : </div>
-              <div class="task-name">{{ details.gmtCreate }}</div>
-            </div>
-            <div class="Layout_flex_start task-bot">
-              <div class="title-name">发送时间 : </div>
-              <div class="task-name">{{ details.reportTime }}</div>
-            </div>
-          </el-main>
-          <el-footer class="report-mains">
-            <div class="title"><div class="blur-column" /> 关联任务</div>
-            <div v-for="(item, index) in details.taskDetailList" :key="index" class="Layout_flex_start task-bot">
-              <div class="task-id">{{ item.taskId }}</div>
-              <div class="task-name didi-hover" @click="goTaskDetails(item.id)">{{ item.name }}</div>
-            </div>
-          </el-footer>
-        </el-container>
-      </el-aside>
-    </el-container>
-    <el-dialog title="删除确认" :visible.sync="dialog_testData" width="30%" :close-on-click-modal="false">
-      <div style="position: absolute; top: 23px; left: 12px;width:4px;height:17px;background:#409EFF;border-radius:1px;" />
-      <div align="center">
-        <div>是否删除以下测试日报?</div>
-        <div style="color: #f79232;">{{ details.reportName }}</div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" size="mini" @click="deleteDaily()">确 定</el-button>
-        <el-button type="danger" size="mini" @click="dialog_testData = false">取 消</el-button>
-      </span>
-    </el-dialog>
-    <DailyReport v-if="dialogDaily" ref="DailyReport" @getList="getReportContent(reportId)" />
-  </el-container>
+  <!-- 预览提测报告 -->
+  <div class="parent-style">
+    <div class="backStyle"> 邮件列表</div>
+    <div class="Layout_space_between" style="margin-bottom: 10px;">
+      <div class="div1">收件人</div>
+      <searchTeam :value.sync="form.name" :clearable="true" :multiple="true" style="width:100%" />
+    </div>
+    <div class="Layout_space_between">
+      <div class="div1">抄送</div>
+      <searchTeam :value.sync="form.names" :clearable="true" :multiple="true" style="width:100%" />
+    </div>
+    <div id="repot-list">
+      <div class="report-tit">{{ fromCreateData.reportName }}</div>
+
+      <el-row>
+        <el-col :span="12" class="Layout_space_between">
+          <span class="parent-style">计划提测时间：{{ fromCreateData.deliverTestPlanTime }}</span>
+        </el-col>
+        <el-col :span="12">
+          <span class="parent-style">实际提测时间：{{ fromCreateData.deliverTestActualTime }}</span>
+        </el-col>
+      </el-row>
+
+      <el-row v-show="fromCreateData.isDelay === 1">
+        <el-col :span="24" class="Layout_space_between">
+          <span class="parent-style">提测延期原因 : {{ fromCreateData.delayReason }}</span>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12" class="Layout_space_between">
+          <span class="parent-style">计划开发时间：{{ fromCreateData.devPlanTimeStart !== null ? fromCreateData.devPlanTimeStart + '至' + fromCreateData.devPlanTimeEnd : '' }}</span>
+        </el-col>
+        <el-col :span="12" class="Layout_space_between">
+          <span class="parent-style">实际开发时间：{{ fromCreateData.devActualTimeStart !== null ? fromCreateData.devActualTimeStart + '至' + fromCreateData.devActualTimeEnd : '' }}</span>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12" class="Layout_space_between">
+          <span class="parent-style">是否跟版：{{ fromCreateData.followVersion === 2 ? '否' : '是' }} </span>
+        </el-col>
+        <el-col v-if="fromCreateData.followVersion === 1" :span="12" class="Layout_space_between">
+          <span class="parent-style">跟版客户端：{{ fromCreateData.involveAppString }}</span>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12" class="Layout_space_between">
+          <span class="parent-style">CodeReview：{{ fromCreateData.isCodeReview === 0 ? '否' : '是' }}</span>
+        </el-col>
+        <el-col v-if="fromCreateData.isCodeReview === 1" :span="12" class="Layout_space_between">
+          <span class="parent-style">执行人：{{ fromCreateData.codeReviewExecutor }}</span>
+        </el-col>
+      </el-row>
+      <div class="backStyle">需求列表</div>
+
+      <el-table
+        :data="tableData"
+        border
+        size="mini"
+        :header-cell-style="{ backgroundColor: 'rgba(241,241,241,1)', color: 'rgba(51,59,74,1)', fontSize: '14px', fontWeight: '400'}"
+        style="width: 100%; margin-bottom: 20px;"
+        show-overflow-tooltip="true"
+      >
+        <el-table-column prop="bugName" label="需求" align="center" min-width="250" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span class="didi-hover">{{ scope.row.bugName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="priorityLevel" label="优先级" align="center" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="priorityName" label="PM" align="center" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="creatorList" label="跟版客户端" align="center" min-width="90" show-overflow-tooltip />
+      </el-table>
+
+      <div v-html="fromCreateData.content" />
+
+    </div>
+  </div>
 </template>
 
 <script>
 import '@/styles/PublicStyle/index.scss'
-import { dailyReportGetV2, dailyReportDelete } from '@/api/reportTemplate'
-import iconDisplay from '@/views/reportManagement/daily/components/iconDisplay.vue'
-import DailyReport from '@/views/reportManagement/components/DailyReport' // 日报
+import html2canvas from 'html2canvas'
+import searchTeam from '@/components/select/searchTeam'
+import { reportdelivertestGetReportById, reportdelivertestSendmail, reportdelivertestGetRequiresByTaskIds } from '@/api/reportTemplate' // 模版添删改查
+
 export default {
+  name: 'DailyNewsAdded',
   components: {
-    DailyReport,
-    iconDisplay
+    searchTeam
+  },
+  props: {
+    dailyId: { type: [String, Number], default: null }
   },
   data() {
     return {
-      dialogDaily: false, // 日报弹窗
-      dialog_testData: false, // 操作弹窗
-      reportId: this.$route.query.id,
-      details: {}
+      form: {}, // 发送报告content
+      fromCreateData: {}, // listAll
+      tasksOptions: [], // 任务下拉选项
+      tasksDetailList: [], // 已有任务项目
+      taskid_arr: [], // taskIds
+      moduleId: '', // 模块id
+      tableData: [],
+      daily_Id: '' // daily_Id
     }
   },
-  created() {
-    this.getReportContent(this.reportId)
+  watch: {
+    dailyId: {
+      handler(newV) {
+        console.log(newV, 'cdskcjbdsjcbdsbcnjdsncjkdsncjkdsncjkdsncjkldsncklsdnclkndsklcndklsnckl')
+        this.daily_Id = newV
+        this.reportdelivertestGetReportById(newV)
+      },
+      immediate: true
+    }
   },
   methods: {
-    async getReportContent(e) { // 获取日报data
-      const res = await dailyReportGetV2(e)
+    async reportdelivertestGetReportById(val) { // 获取提测报告数据
+      const res = await reportdelivertestGetReportById(val)
       if (res.code === 200) {
-        this.details = res.data
-      }
-    },
-    dailyButtom(e, data) { // 测试报告
-      switch (e) {
-        case 3: // 复制 第二步
-          this.dialogDaily = true
-          this.$nextTick(() => {
-            this.$refs.DailyReport.init(4, data)
-          })
-          break
-        case 5: // 日报第三步
-          this.dialogDaily = true
-          this.$nextTick(() => {
-            this.$refs.DailyReport.init(3, data)
-          })
-          break
-        case 6: // 日报第二步
-          this.dialogDaily = true
-          this.$nextTick(() => {
-            this.$refs.DailyReport.init(2, data)
-          })
-          break
+        this.fromCreateData = res.data
+        this.reportdelivertestGetRequiresByTaskIds(this.fromCreateData.taskIds)
       }
     },
 
-    goTaskDetails(id) {
-      this.$router.push({ name: '任务详情', query: { id: id }})
+    async reportdelivertestGetRequiresByTaskIds(val) {
+      const res2 = await reportdelivertestGetRequiresByTaskIds({ taskIds: val })
+      if (res2.code === 200) {
+        this.tableData = res2.data.list
+      }
     },
 
-    async deleteDaily() { // 删除日报‘
-      const res = await dailyReportDelete(this.details.id)
-      if (res.code === 200) {
-        this.dialog_testData = false
-        this.$router.push({ name: '报告' })
-        this.$message({ type: 'success', message: '删除成功' })
+    sendReport() {
+      if (this.form.name !== undefined) {
+        setTimeout(() => {
+          html2canvas(document.getElementById('repot-list'), { useCORS: true }).then(canvas => {
+            const imgData = canvas.toDataURL('image/png', 1)
+            const sendImgData = imgData.toString().substring(imgData.indexOf(',') + 1)
+            const postData = { 'reportId': this.daily_Id, 'imgStr': sendImgData, 'url': window.location.href, 'emailUser': this.form.name ? this.form.name.join(',') : null, 'copyTo': this.form.names ? this.form.names.join(',') : null }
+            reportdelivertestSendmail(postData).then(res => {
+              res.code === 200 ? this.$message.success('报告发送中，请稍后进行邮件查收！') : this.$message.error('发送测试日报失败，请联系管理员！')
+              this.$emit('handleClose')
+            })
+          })
+        }, 500)
+      } else {
+        this.$message({ message: '请填写邮箱', type: 'error', offset: 150 })
       }
     }
   }
@@ -144,103 +154,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.BackgroundCloth {
-.report-Header {
-  margin: 10px 10px 0;
-  background: #FFF;
-  border-radius:4px;
-}
-
-.details-id {
-  font-size:12px;
-  font-family:PingFang SC;
-  font-weight:400;
-  line-height:20px;
-  color:rgba(51,59,74,1);
-  opacity:0.5;
-}
-
-.report-title {
-  font-size:20px;
-  font-family:PingFangSC-Medium;
-  line-height:28px;
-  color:rgba(51,59,74,1);
-  opacity:1;
-}
-
-.details-statusString {
-  font-size:14px;
-  font-family:MicrosoftYaHei;
-  line-height:17px;
-  padding: 5px 8px;
-  margin-left: 15px;
-  color:rgba(111,124,147,1);
-  border:1px solid rgba(191,198,220,1);
-  opacity:1;
-  border-radius:4px;
-}
-
-.report-main {
-  margin: 10px;
-  background: #FFF;
-  border-radius:4px;
-}
-.report-mains {
-  min-height: 200px;
-  padding: 20px ;
-  margin: 10px 10px 0 0;
-  background: #FFF;
-  border-radius:4px;
-}
-.title {
-  font-size:16px;
-  font-family:PingFangSC-Medium;
-  line-height:35px;
-  margin-bottom: 10px;
-  color:rgba(51,59,74,1);
-  opacity:1;
-}
-
-.title-name {
-  width:100px;
-  font-size:14px;
-  font-family:PingFangSC-Regular;
-  line-height:20px;
-  color:rgba(102,102,102,1);
-  opacity:1;
-}
-
-.task-id {
-  width:100px;
-  font-size:14px;
-  font-family:MicrosoftYaHei;
-  line-height:17px;
-  color:rgba(102,102,102,1);
-  opacity:1;
-}
-
-.task-name {
-  font-size:14px;
-  font-family:MicrosoftYaHei;
-  line-height:17px;
-  color:rgba(51,51,51,1);
-  opacity:1;
-}
-
-.blur-column {
-  width:4px;
-  height:15px;
-  display:inline-block;
-  vertical-align: middle;
-  background:#409EFF;
-  border-radius:1px;
-}
-
-.task-bot {
-   margin-bottom: 10px;
-}
+.parent-style {
+    width: 100%;
+    display: inline-block;
+    font-size:14px;
+    font-family:Microsoft Sans Serif;
+    font-weight:400;
+    line-height:22px;
+    color:#666666;
+    opacity:1;
+    margin-bottom: 10px;
+  .report-taskList{
+    font-size:14px;
+    font-family:MicrosoftYaHei;
+    line-height:17px;
+    color:rgba(102,102,102,1);
+    margin-top: 10px;
+    opacity:1;
+  }
 }
-.setLine {
-  padding: 10px 20px;
+.div1 {
+    width: 60px;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: rgba(51, 51, 51, 1);
+    line-height: 19px;
 }
+  .backStyle {
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 4px;
+    margin: 10px 0;
+  }
+  .report-tit {
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 4px;
+    margin: 15px 0;
+  }
+  .report-margin {
+    margin-bottom: 20px;
+  }
 </style>