Browse Source

优化任务查看窗口

LongjoeDyy 5 years ago
parent
commit
ce82a4f223

+ 23 - 0
src/assets/iconfont/demo_index.html

@@ -846,6 +846,12 @@
                 <div class="code-name">&amp;#xe636;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6be;</span>
+                <div class="name">添加图片</div>
+                <div class="code-name">&amp;#xe6be;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -2120,6 +2126,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-tianjiatupian"></span>
+            <div class="name">
+              添加图片
+            </div>
+            <div class="code-name">.icon-tianjiatupian
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -3237,6 +3252,14 @@
                 <div class="code-name">#icon-icon_daohang-copy</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tianjiatupian"></use>
+                </svg>
+                <div class="name">添加图片</div>
+                <div class="code-name">#icon-tianjiatupian</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

File diff suppressed because it is too large
+ 10 - 6
src/assets/iconfont/iconfont.css


BIN
src/assets/iconfont/iconfont.eot


File diff suppressed because it is too large
+ 1 - 1
src/assets/iconfont/iconfont.js


+ 3 - 0
src/assets/iconfont/iconfont.svg

@@ -428,6 +428,9 @@ Created by iconfont
     <glyph glyph-name="icon_daohang-copy" unicode="&#58934;" d="M512 896C228.571429 896 0 667.428571 0 384s228.571429-512 512-512 512 228.571429 512 512S795.428571 896 512 896z m67.657143-581.485714v98.742857h-138.971429c-58.514286 0-106.057143-45.714286-106.057143-104.228572v-164.571428H201.142857V343.771429c0 107.885714 89.6 195.657143 199.314286 195.657142h179.2V621.714286L822.857143 457.142857l-243.2-142.628571z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="tianjiatupian" unicode="&#59070;" d="M10.039216 414.117647h1003.921568v-60.235294H10.039216zM542.117647 885.960784v-1003.921568h-60.235294V885.960784z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

BIN
src/assets/iconfont/iconfont.ttf


BIN
src/assets/iconfont/iconfont.woff


BIN
src/assets/iconfont/iconfont.woff2


BIN
src/assets/taskview_01.jpeg


BIN
src/assets/taskview_02.jpg


BIN
src/assets/taskview_03.jpg


BIN
src/assets/taskview_04.jpg


BIN
src/assets/taskview_05.jpg


+ 1 - 1
src/pages/components/tasklist.vue

@@ -187,7 +187,7 @@
     background: #46a4da;
     border-radius: 50%;
     box-shadow: 0 0 0 3px #afdcf8;
-    ;
+  
   }
 
   .task_flex {

+ 2 - 2
src/pages/homenew.vue

@@ -6,8 +6,8 @@
     <div class="home_maininfo">
       <div class="task_selection_warp">
         <div class="task_selection">
-          <div class='task_selection_check' >决策</div>
-          <div style="margin-left:30px">时间线</div>
+          <div>时间线</div>
+          <div class='task_selection_check' style="margin-left:30px" >决策</div>
           <div class="task_top_cnt"></div>
         </div>
       </div>

+ 611 - 0
src/pages/oaview.vue

@@ -0,0 +1,611 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        审批
+      </div>
+      <div class="topbar_right">
+        <!-- <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg> -->
+      </div>
+    </div>
+
+    <div class="oaview_toparea" :class="colortop">
+      <div class="oaview_top_type" v-if="tasktype==0">单据审批</div>
+      <div class="oaview_top_type" v-if="tasktype==1">公文审批</div>
+      <div class="oaview_top_flag">{{taskflag_dt}}</div>
+    </div>
+    <div class="oaview_toparea_sec" :class="colortop_sec"></div>
+    <div class="oaview_toparea_thr" :class="colortop_thr"></div>
+
+    <div class="oaview">
+
+      <div class="oaview_main">
+        <div class="oaview_info" v-if="tasktype==1">
+          <span>年假申请,2019年9月1日至2019年9月7日,望审批。</span>
+        </div>
+
+        <!-- 客户订单信息 -->
+        <div v-if="tasktype==0" style="margin:10px 0 0 0 ">
+
+          <!-- <div class="liubai_dt"></div> -->
+          <div class="oaview_flex">
+            <div class="oaview_title">单号</div>
+            <div class="oaview_item">SC190812002</div>
+          </div>
+
+          <div class="oaview_flex">
+            <div class="oaview_title">类型</div>
+            <div class="oaview_item">销售订单</div>
+          </div>
+
+          <div class="oaview_flex">
+            <div class="oaview_title">客户</div>
+            <div class="oaview_item">红岸家私城</div>
+          </div>
+
+          <div class="oaview_flex">
+            <div class="oaview_title">业务员</div>
+            <div class="oaview_item">章北海</div>
+          </div>
+
+
+          <div class="oaview_flex">
+            <div class="oaview_title">金额</div>
+            <div class="oaview_item">200,000元</div>
+          </div>
+
+
+          <div class="oaview_flex">
+            <div class="oaview_title">交期</div>
+            <div class="oaview_item">2019年8月30日</div>
+          </div>
+
+
+          <div style="color:#666;margin:10px 0 0 20px">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-chakan"></use>
+            </svg>
+            查看单据详细信息
+          </div>
+
+        </div>
+
+
+        <div class="liubai_dt"></div>
+
+        <div class="oaview_emp">
+          <div class="oaview_emp_list">
+            <div class="oaview_emp_list_icon">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-CombinedShape"></use>
+              </svg>
+            </div>
+
+            <div>
+              发起:黎小娟
+            </div>
+
+            <div class="oaview_emp_list_time">
+              2019-08-12 09:23
+            </div>
+          </div>
+
+          <div class="oaview_emp_list">
+            <div class="oaview_emp_list_icon">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-CombinedShape"></use>
+              </svg>
+            </div>
+
+            <div>
+              主管审:黎小娟
+            </div>
+            <div class="oaview_emp_list_time">
+              2019-08-12 10:12
+            </div>
+          </div>
+
+
+          <div class="oaview_emp_list">
+            <div class="oaview_emp_list_icon">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-buzouweijinxing"></use>
+              </svg>
+            </div>
+
+            <div>
+              财务审:王小千
+            </div>
+          </div>
+
+        </div>
+
+
+      </div>
+
+    </div>
+
+    <div class="quote_edit_btn_wrap">
+      <div class="quote_edit_btn">
+        <span>同意</span>
+        <span>否决</span>
+      </div>
+    </div>
+
+    <!-- 完成任务、验收任务弹出界面 -->
+    <div v-if="ifresponse>0">
+      <div class="oaview_mask"></div>
+
+      <div :class="response_height" class="oaview_response">
+        <div style="display:flex;align-items: center;">
+          <div style="font-size:15px;padding:0 20px;color:#888">
+            <span v-if="ifresponse==2">任务验收</span>
+            <span v-if="ifresponse==1">完成任务</span>
+          </div>
+          <div style="position: absolute;right: 20px;color: #ccc;font-size: 12px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 评价星级 -->
+        <div class="oaview_flex" style="margin-top:15px;" v-if="ifresponse==2">
+          <div class="oaview_title">评分</div>
+          <div class="oaview_item" style="font-size:22px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing1"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-xing"></use>
+            </svg>
+          </div>
+
+
+        </div>
+
+        <!-- 评语 或 汇报 录入 -->
+        <div style="width: 100%;text-align: center;">
+          <textarea name="banreason" rows="5" placeholder="请填写评语" style="width: 90%;font-size: 15px;margin: 10px;"
+            v-if="ifresponse==2">
+            </textarea>
+
+          <textarea name="banreason" rows="5" placeholder="请填写任务汇报" style="width: 90%;font-size: 15px;margin: 10px;"
+            v-if="ifresponse==1">
+            </textarea>
+
+        </div>
+
+        <!-- 添加图片 -->
+        <div style="display:flex" v-if="ifresponse==1">
+          <div class="oaview_addpic">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tianjiatupian"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 完成任务时添加附件 -->
+        <div v-if="ifresponse==1" class="taskedit_fjarea" style="padding:0 0 0 20px;color:#666">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-fujian"></use>
+          </svg>
+          添加附件
+        </div>
+
+        <!-- 验收任务时选择是否需要返工 -->
+        <div v-if="ifresponse==2"
+          style="display:flex;line-height: 45px;align-items: flex-start;margin:0 0 0 20px;color:#888">
+          <div class="taskedit_title">需要返工</div>
+          <div style="margin-left:10px;font-size:40px">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 提交按钮 -->
+        <div class="quote_edit_btn_wrap">
+          <div class="quote_edit_btn">
+            <span v-if="ifresponse==2">验收</span>
+            <span v-if="ifresponse==1">完成</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'oaview',
+    data() {
+      return {
+        tasktype: 0, //0-单据审批 1-公文审批
+        taskflag_dt: "处理中", //处理中,通过,否决
+        ifresponse: 0, //弹窗 0:不弹  1:完成任务界面 2:验收任务界面
+        iffg: 0 //0-不是返工 1-返工
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          oaview_toparea_green: this.taskflag_dt == "处理中",
+          oaview_toparea_blue: this.taskflag_dt == "通过"
+        };
+      },
+      colortop_sec: function () {
+        return {
+          oaview_toparea_green_sec: this.taskflag_dt == "处理中",
+          oaview_toparea_blue_sec: this.taskflag_dt == "通过"
+        };
+      },
+      colortop_thr: function () {
+        return {
+          oaview_toparea_green_thr: this.taskflag_dt == "处理中",
+          oaview_toparea_blue_thr: this.taskflag_dt == "通过"
+        };
+      },
+      response_height: function () {
+        return {
+          response_height_1: this.ifresponse == 1,
+          response_height_2: this.ifresponse == 2
+        };
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+    font-size: 14px;
+  }
+
+  .oaview_emp {
+    padding: 0px 20px;
+  }
+
+  .oaview_emp_list {
+    display: flex;
+    line-height: 30px;
+  }
+
+  .oaview_emp_list_icon {
+    color: #000;
+    margin: 0 10px 0 0;
+  }
+
+  .oaview_emp_list_time {
+    color: #888;
+    margin: 0 0 0 10px;
+  }
+
+  .oaview_iffg {
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    font-size: 12px;
+    margin: 0 4px 0 0;
+    padding: 3px 8px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .response_height_1 {
+    height: 330px;
+  }
+
+  .response_height_2 {
+    height: 270px;
+  }
+
+  .oaview_mask {
+    height: 100%;
+    width: 100%;
+    background-color: #1d1d1d;
+    opacity: 0.8;
+    position: fixed;
+    top: 0px;
+    z-index: 9998;
+  }
+
+  .oaview_response {
+    z-index: 9999;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0px;
+    /* height: 330px; */
+    width: 100%;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    padding: 10px 0;
+  }
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9997;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .oaview_info {
+    font-size: 16px;
+    padding: 5px 20px;
+  }
+
+  .oaview_toparea {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+    display: flex;
+    color: #fff;
+    background-color: #fc4e2c;
+    font-size: 16px;
+    font-weight: bold;
+    align-items: center;
+    height: 35px;
+  }
+
+  .oaview_toparea_green {
+    background-color: #8dc026;
+  }
+
+  .oaview_toparea_blue {
+    background-color: #46a4da;
+  }
+
+  .oaview_toparea_sec {
+    position: absolute;
+    top: 79px;
+    height: 5px;
+    background-color: #fd8e78;
+    width: 100%;
+  }
+
+  .oaview_toparea_green_sec {
+    background-color: #bbe26e;
+  }
+
+  .oaview_toparea_blue_sec {
+    background-color: #90cef1;
+  }
+
+  .oaview_toparea_thr {
+    position: absolute;
+    top: 84px;
+    height: 5px;
+    background-color: #ffdbd4;
+    width: 100%;
+  }
+
+  .oaview_toparea_green_thr {
+    background-color: #e3f8b8;
+  }
+
+  .oaview_toparea_blue_thr {
+    background-color: #d1edfd;
+  }
+
+  .oaview_top_type {
+    padding: 0 0 0 20px;
+  }
+
+  .oaview_top_flag {
+    position: absolute;
+    right: 20px;
+  }
+
+  .oaview_top_delay {
+    position: absolute;
+    right: 80px;
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    width: 45px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .oaview_finish_delay {
+    margin: 0 0 0 10px;
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    width: 40px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .oaview {
+    position: absolute;
+    top: 90px;
+    width: 100%;
+    margin-bottom: 80px;
+  }
+
+  .oaview_main {
+    padding: 0px 0px;
+  }
+
+  .oaview_flex {
+    display: flex;
+    line-height: 25px;
+    align-items: flex-start;
+    padding: 0px 20px;
+  }
+
+
+  .oaview_title {
+    font-size: 14px;
+    font-weight: bold;
+    flex: 0 0 60px;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+  .oaview_check_title {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 5px 0 0 20px;
+  }
+
+  .oaview_check_dscrp {
+    color: #777;
+    padding: 0 20px;
+  }
+
+  .oaview_item {
+    /* flex: 0 0 80%; */
+    /* border-bottom: 1px solid #e5e5e5; */
+    margin: 0 0 0 10px;
+    color: #777
+  }
+
+  .oaview_pzbtn {
+    /* position: absolute;
+    right: 20px; */
+    margin-left: 20px;
+    color: #ccc;
+    font-size: 16px;
+  }
+
+  .oaview_date {
+    position: absolute;
+    right: 40px;
+    color: #777
+  }
+
+  .oaview_dscrp {
+    padding: 10px;
+    line-height: 20px;
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+    margin: 5px 0 5px 10px;
+    height: 100px;
+    color: #777;
+    width: 100%
+  }
+
+  .color_sub {
+    color: #999
+  }
+
+  .quote_edit_btn_wrap {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    /* background-color: #fc4e2c; */
+    width: 100%;
+    z-index: 9990;
+    align-items: center;
+    justify-content: center;
+    /* padding: 5px 0 2px 0; */
+    box-shadow: 0 -1px 3px #f1f1f1;
+  }
+
+  .quote_edit_btn {
+    /* background-color: #ffb732; */
+    background-color: #fc4e2c;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .oaview_fjarea {
+    margin: 10px 20px;
+    color: #777
+  }
+
+  .oaview_fjlist {
+    padding: 0px 0 0 20px;
+    align-items: center;
+    display: flex;
+    font-size: 14px;
+    height: 25px;
+    line-height: 25px;
+  }
+
+  .oaview_fjsize {
+    font-size: 14px;
+    color: #aaa;
+    margin-left: 10px;
+  }
+
+  .oaview_fjdel {
+    font-size: 15px;
+    color: #fc4e2c;
+    position: absolute;
+    right: 20px;
+  }
+
+  .oaview_addpic {
+    margin: 0 0 20px 15px;
+    background-color: #f6f6f6;
+    color: #bbb;
+    height: 100px;
+    flex: 0 0 100px;
+    text-align: center;
+    line-height: 100px;
+    font-size: 30px;
+  }
+
+  .liubai_dt {
+    width: 100%;
+    height: 10px;
+    background-color: #f6f6f6;
+    margin: 10px 0;
+  }
+
+</style>

+ 3 - 2
src/pages/task.vue

@@ -23,8 +23,9 @@
       <div class="task_top">
         <div class="task_selection_warp">
           <div class="task_selection">
-            <div>决策</div>
-            <div class='task_selection_check' style="margin-left:30px">时间线</div>
+            
+            <div class='task_selection_check'>时间线</div>
+            <div style="margin-left:30px">决策</div>
             <div class="task_top_cnt"></div>
           </div>
         </div>

+ 8 - 3
src/pages/taskedit.vue

@@ -160,13 +160,17 @@
         <div class="taskedit_flex">
           <div class="taskedit_title">需要验收</div>
           <div style="margin-left:10px;font-size:40px">
-            <svg class="icon" aria-hidden="true">
+            <svg class="icon" aria-hidden="true" v-if="ifcheck == 1">
               <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
             </svg>
+
+            <svg class="icon" aria-hidden="true" v-if="ifcheck == 0">
+              <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
+            </svg>
           </div>
         </div>
 
-        <div class="taskedit_flex">
+        <div class="taskedit_flex" v-if="ifcheck == 1">
           <div class="taskedit_title">验收人</div>
           <div class="taskedit_item">李学朋</div>
           <div class="taskedit_pzbtn">
@@ -229,7 +233,8 @@
     name: 'taskedit',
     data() {
       return {
-        tasktype: 1 //0-临时任务 1-客户走访 2-稽核检查
+        tasktype: 1 ,//0-临时任务 1-客户走访 2-稽核检查
+        ifcheck:0 //1-需要验收 0-不用验收
       }
     }
 

+ 123 - 30
src/pages/taskview.vue

@@ -30,7 +30,8 @@
 
       <div class="taskview_main">
         <div class="taskview_info">
-          <span v-if="tasktype==0">跟设计公司沟通,定好最新一季宣传画册的设计。</span>
+          <span class="taskview_iffg" v-if="iffg==1">返工</span><span
+            v-if="tasktype==0">跟设计公司沟通,定好最新一季宣传画册的设计。</span>
           <span v-if="tasktype==1">了解客户上一批货的销售情况及质量反馈,并介绍本季最新产品。</span>
           <span v-if="tasktype==2">按6S标准检查车间清洁是否达标。</span>
         </div>
@@ -43,53 +44,70 @@
           </div>
         </div>
 
-        <!-- 下面是附件区域,根据实际是否有附件决定显示与否 -->
+        <!-- 附件图片,直接显示缩略图 -->
+        <div style="display:flex;margin:10px 0 0 20px;" v-if="tasktype==2">
+          <div>
+            <img src="../assets/taskview_01.jpeg" style="height: 80px"></img>
+          </div>
+
+          <div style="margin-left:10px">
+            <img src="../assets/taskview_02.jpg" style="height: 80px"></img>
+          </div>
+        </div>
+
+        <!-- 下面是非图片附件区域,根据实际是否有附件决定显示与否 -->
         <div style="margin-top:10px;">
-          <div class="taskview_fjlist">
-            <div v-if="tasktype!=2">
+          <div class="taskview_fjlist" v-if="tasktype!=2">
+            <div>
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#icon-yasuobao"></use>
               </svg>
               新产品照片_190802_01.rar
             </div>
 
-            <div v-if="tasktype==2">
-              <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-tupian"></use>
-              </svg>
-              及格标准图片1.jpg
-            </div>
-
             <div class="taskview_fjsize">
               <span v-if="tasktype!=2">30.2M</span>
-              <span v-if="tasktype==2">1.4M</span>
             </div>
 
           </div>
 
-          <div class="taskview_fjlist">
-            <div v-if="tasktype!=2">
+          <div class="taskview_fjlist" v-if="tasktype!=2">
+            <div>
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#icon-yasuobao"></use>
               </svg>
               新产品照片_190802_02.rar
             </div>
 
-            <div v-if="tasktype==2">
+            <div class="taskview_fjsize">
+              <span v-if="tasktype!=2">30.2M</span>
+            </div>
+
+          </div>
+
+          <div class="taskview_fjlist" v-if="tasktype==2">
+            <div>
               <svg class="icon" aria-hidden="true">
-                <use xlink:href="#icon-tupian"></use>
+                <use xlink:href="#icon-WORD"></use>
               </svg>
-              及格标准图片2.jpg
+              检查报告模板.docx
             </div>
 
             <div class="taskview_fjsize">
-              <span v-if="tasktype!=2">30.2M</span>
-              <span v-if="tasktype==2">1.4M</span>
+              <span v-if="tasktype!=2">1.2M</span>
             </div>
 
           </div>
         </div>
 
+        <!-- 返工信息,根据此任务是否返工类型决定显示与否 -->
+        <div style="color:#666;margin:10px 0 0 20px" v-if="iffg==1">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-chakan"></use>
+          </svg>
+          查看原任务详细信息
+        </div>
+
         <!-- 客户信息 -->
         <div v-if="tasktype==1">
 
@@ -175,30 +193,47 @@
           </div>
         </div>
 
-        <div class="taskview_fjlist" v-if="taskflag_dt!='未完成'">
+
+        <!-- 附件图片,直接显示缩略图 -->
+        <div style="display:flex;margin:10px 0 0 20px;" v-if="taskflag_dt!='未完成'">
+          <div v-if="tasktype==2">
+            <img src="../assets/taskview_03.jpg" style="height: 80px"></img>
+          </div>
+
+          <div v-if="tasktype==1">
+            <img src="../assets/taskview_04.jpg" style="height: 180px"></img>
+          </div>
+
+          <div v-if="tasktype==0">
+            <img src="../assets/taskview_05.jpg" style="height: 80px"></img>
+          </div>
+        </div>
+
+        <div class="taskview_fjlist" style="margin-top:10px;" v-if="taskflag_dt!='未完成'">
           <div v-if="tasktype==0">
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-tupian"></use>
+              <use xlink:href="#icon-yasuobao"></use>
             </svg>
-            设计方案草图.jpg
+            设计方案草图(全部).rar
           </div>
 
           <div v-if="tasktype==1">
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-tupian"></use>
+              <use xlink:href="#icon-WORD"></use>
             </svg>
-            通话记录截图.jpg
+            回访记录.docx
           </div>
 
           <div v-if="tasktype==2">
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-tupian"></use>
+              <use xlink:href="#icon-WORD"></use>
             </svg>
-            车间现场照片.jpg
+            检查报告.docx
           </div>
 
           <div class="taskview_fjsize">
-            <span>1.4M</span>
+            <span v-if="tasktype==0">31.4M</span>
+            <span v-if="tasktype!=0">1.4M</span>
           </div>
 
         </div>
@@ -251,7 +286,7 @@
     <div v-if="ifresponse>0">
       <div class="taskview_mask"></div>
 
-      <div class="taskview_response">
+      <div :class="response_height" class="taskview_response">
         <div style="display:flex;align-items: center;">
           <div style="font-size:15px;padding:0 20px;color:#888">
             <span v-if="ifresponse==2">任务验收</span>
@@ -284,6 +319,8 @@
               <use xlink:href="#icon-xing"></use>
             </svg>
           </div>
+
+
         </div>
 
         <!-- 评语 或 汇报 录入 -->
@@ -298,6 +335,15 @@
 
         </div>
 
+        <!-- 添加图片 -->
+        <div style="display:flex" v-if="ifresponse==1">
+          <div class="taskview_addpic">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-tianjiatupian"></use>
+            </svg>
+          </div>
+        </div>
+
         <!-- 完成任务时添加附件 -->
         <div v-if="ifresponse==1" class="taskedit_fjarea" style="padding:0 0 0 20px;color:#666">
           <svg class="icon" aria-hidden="true">
@@ -306,6 +352,17 @@
           添加附件
         </div>
 
+        <!-- 验收任务时选择是否需要返工 -->
+        <div v-if="ifresponse==2"
+          style="display:flex;line-height: 45px;align-items: flex-start;margin:0 0 0 20px;color:#888">
+          <div class="taskedit_title">需要返工</div>
+          <div style="margin-left:10px;font-size:40px">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-uni_icon_kaiguan_guan"></use>
+            </svg>
+          </div>
+        </div>
+
         <!-- 提交按钮 -->
         <div class="quote_edit_btn_wrap">
           <div class="quote_edit_btn">
@@ -328,7 +385,8 @@
       return {
         tasktype: 2, //0-临时任务 1-客户走访 2-稽核检查
         taskflag_dt: "已验收", //未完成,待验收,已验收
-        ifresponse: 0 //弹窗 0:不弹  1:完成任务界面 2:验收任务界面
+        ifresponse: 0, //弹窗 0:不弹  1:完成任务界面 2:验收任务界面
+        iffg: 0//0-不是返工 1-返工
       }
     },
     computed: {
@@ -349,6 +407,12 @@
           taskview_toparea_green_thr: this.taskflag_dt == "待验收",
           taskview_toparea_blue_thr: this.taskflag_dt == "已验收"
         };
+      },
+      response_height: function () {
+        return {
+          response_height_1: this.ifresponse == 1,
+          response_height_2: this.ifresponse == 2
+        };
       }
     }
 
@@ -364,6 +428,24 @@
     font-size: 14px;
   }
 
+  .taskview_iffg {
+    background-color: #fdd1cd;
+    color: #ff6f61;
+    font-size: 12px;
+    margin: 0 4px 0 0;
+    padding: 3px 8px;
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  .response_height_1 {
+    height: 330px;
+  }
+
+  .response_height_2 {
+    height: 270px;
+  }
+
   .taskview_mask {
     height: 100%;
     width: 100%;
@@ -379,7 +461,7 @@
     background-color: #ffffff;
     position: fixed;
     bottom: 0px;
-    height: 220px;
+    /* height: 330px; */
     width: 100%;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
@@ -632,6 +714,17 @@
     right: 20px;
   }
 
+  .taskview_addpic {
+    margin: 0 0 20px 15px;
+    background-color: #f6f6f6;
+    color: #bbb;
+    height: 100px;
+    flex: 0 0 100px;
+    text-align: center;
+    line-height: 100px;
+    font-size: 30px;
+  }
+
   .liubai_dt {
     width: 100%;
     height: 10px;

+ 9 - 0
src/router/index.js

@@ -33,6 +33,7 @@ import Task from '@/pages/task'
 import TaskEdit from '@/pages/taskedit'
 import TaskView from '@/pages/taskview'
 import TodoList from '@/pages/l1todolist'
+import OaView from '@/pages/oaview'
 
 Vue.use(Router)
 
@@ -51,6 +52,14 @@ export default new Router({
         title: '工作任务'
       }
     },
+    {
+      path: '/oaview',
+      name: 'OaView',
+      component: OaView,
+      meta: {
+        title: '公文审批'
+      }
+    },
     {
       path: '/todolist',
       name: 'TodoList',