增加 催货详情页面

src/pages/cses_spt/cses_spt_urge.vue

@@ -0,0 +1,523 @@
+<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="taskview_toparea" :class="colortop">
+      <!-- FX001010101代表云端订单号 -->
+      <div class="taskview_top_type">FX001010101</div>
+      <div class="taskview_top_flag">{{taskflag_dt}}</div>
+    </div>
+    <div class="taskview_toparea_sec" :class="colortop_sec"></div>
+    <div class="taskview_toparea_thr" :class="colortop_thr"></div>
+
+    <div class="taskview">
+
+      <div class="taskview_main">
+
+        <div>
+          <div class="taskview_flex">
+            <div class="taskview_title">物料编码</div>
+            <div class="taskview_item">572-102</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">物料名称</div>
+            <div class="taskview_item">2#气密机</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">物料规格</div>
+            <div class="taskview_item">33*33*33</div>
+          </div>
+
+          <!-- 配置内容如果是空白，整个键值对不用显示 -->
+          <div class="taskview_flex">
+            <div class="taskview_title">配置</div>
+            <div class="taskview_item">XXXXXXXXXX</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">配置1</div>
+            <div class="taskview_item">XXXXXXXXXX</div>
+          </div>
+          <div class="taskview_flex">
+            <div class="taskview_title">配置2</div>
+            <div class="taskview_item">XXXXXXXXX</div>
+          </div>
+          <!--  -->
+
+          <div class="taskview_flex">
+            <div class="taskview_title">要求交期</div>
+            <div class="taskview_item">2020/3/24</div>
+          </div>
+
+          <!-- 表达方式：数量 + 单位，例如200台，300件 -->
+          <div class="taskview_flex">
+            <div class="taskview_title">催货数量</div>
+            <div class="taskview_item">200台</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">催货人</div>
+            <div class="taskview_item">张某某</div>
+          </div>
+          <div class="taskview_flex">
+            <div class="taskview_title">催货时间</div>
+            <div class="taskview_item">2020/3/22 17:43</div>
+          </div>
+
+          <!-- 如果 客户附言 没有内容，这一整块不显示 -->
+          <div class="taskview_flex" style="margin:10px 0 0 0 ;color:#777">
+            <div class="taskview_title">客户附言</div>
+          </div>
+          <div class="taskview_check_dscrp">
+            <span>交期不可推延，注意进度。</span>
+          </div>
+          <!--  -->
+
+        </div>
+
+        <!-- 点击跳转到对应单据的详情 -->
+        <div style="display:flex">
+          <div style="font-size:14px;color:#6495ed;margin: 10px auto 0 auto">查看单据详细信息</div>
+        </div>
+
+
+        <div class="liubai_dt"></div>
+
+<!-- 确认人、确认时间、反馈信息。 已确认状态下才显示 -->
+        <div v-if="taskflag_dt=='已确认'">
+          <div class="taskview_flex">
+            <div class="taskview_title">确认人</div>
+            <div class="taskview_item">张小千</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">确认时间</div>
+            <div class="taskview_item">2020/3/23 18:04</div>
+          </div>
+
+          <div class="taskview_flex">
+            <div class="taskview_title">反馈信息</div>
+            <div class="taskview_item">收到，目前进度符合如期。</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="quote_edit_btn_wrap" v-if="taskflag_dt=='待确认'">
+      <div class="quote_edit_btn">
+        <span>确认</span>
+      </div>
+    </div>
+
+    <!-- 完成任务、验收任务弹出界面 -->
+    <div v-if="ifresponse>0">
+      <div class="taskview_mask"></div>
+
+      <div class="taskview_response">
+        <div style="display:flex;align-items: center;">
+          <div style="font-size:15px;padding:0 20px;color:#888">
+            <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 style="width: 100%;text-align: center;">
+          <textarea name="banreason" rows="10" placeholder="可填写给客户的反馈信息" style="width: 90%;font-size: 15px;margin: 10px;"
+            v-if="ifresponse==1">
+            </textarea>
+
+        </div>
+
+
+        <!-- 提交按钮 -->
+        <div class="quote_edit_btn_wrap">
+          <div class="quote_edit_btn">
+            <span >确认</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'taskview',
+    data() {
+      return {
+        tasktype: 0, //无用变量
+        taskflag_dt: "已确认", //待确认,已确认 
+        ifresponse: 0, //弹窗 0：不弹  1：弹
+        iffg: 0 //无用变量
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          taskview_toparea_green: this.taskflag_dt == "待验收",
+          taskview_toparea_blue: this.taskflag_dt == "已确认"
+        };
+      },
+      colortop_sec: function () {
+        return {
+          taskview_toparea_green_sec: this.taskflag_dt == "待验收",
+          taskview_toparea_blue_sec: this.taskflag_dt == "已确认"
+        };
+      },
+      colortop_thr: function () {
+        return {
+          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
+        };
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+    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: 370px;
+  }
+
+  .response_height_2 {
+    height: 270px;
+  }
+
+  .taskview_mask {
+    height: 100%;
+    width: 100%;
+    background-color: #1d1d1d;
+    opacity: 0.8;
+    position: fixed;
+    top: 0px;
+    z-index: 9998;
+  }
+
+  .taskview_response {
+    z-index: 9999;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0px;
+    height: 250px;
+    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;
+  }
+
+  .taskview_info {
+    font-size: 16px;
+    padding: 5px 20px;
+  }
+
+  .taskview_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;
+  }
+
+  .taskview_toparea_green {
+    background-color: #8dc026;
+  }
+
+  .taskview_toparea_blue {
+    background-color: #46a4da;
+  }
+
+  .taskview_toparea_sec {
+    position: absolute;
+    top: 79px;
+    height: 5px;
+    background-color: #fd8e78;
+    width: 100%;
+  }
+
+  .taskview_toparea_green_sec {
+    background-color: #bbe26e;
+  }
+
+  .taskview_toparea_blue_sec {
+    background-color: #90cef1;
+  }
+
+  .taskview_toparea_thr {
+    position: absolute;
+    top: 84px;
+    height: 5px;
+    background-color: #ffdbd4;
+    width: 100%;
+  }
+
+  .taskview_toparea_green_thr {
+    background-color: #e3f8b8;
+  }
+
+  .taskview_toparea_blue_thr {
+    background-color: #d1edfd;
+  }
+
+  .taskview_top_type {
+    padding: 0 0 0 20px;
+  }
+
+  .taskview_top_flag {
+    position: absolute;
+    right: 20px;
+  }
+
+  .taskview_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;
+  }
+
+  .taskview_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;
+  }
+
+  .taskview {
+    position: absolute;
+    top: 100px;
+    width: 100%;
+    margin-bottom: 80px;
+  }
+
+  .taskview_main {
+    padding: 0px 0px;
+  }
+
+  .taskview_flex {
+    display: flex;
+    line-height: 25px;
+    align-items: flex-start;
+    padding: 0px 20px;
+  }
+
+
+  .taskview_title {
+    font-size: 14px;
+    font-weight: bold;
+    flex: 0 0 60px;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+  .taskview_check_title {
+    font-size: 14px;
+    font-weight: bold;
+    padding: 5px 0 0 20px;
+  }
+
+  .taskview_check_dscrp {
+    color: #777;
+    padding: 0 20px;
+  }
+
+  .taskview_item {
+    /* flex: 0 0 80%; */
+    /* border-bottom: 1px solid #e5e5e5; */
+    margin: 0 0 0 10px;
+    color: #777
+  }
+
+  .taskview_pzbtn {
+    /* position: absolute;
+    right: 20px; */
+    margin-left: 20px;
+    color: #ccc;
+    font-size: 16px;
+  }
+
+  .taskview_date {
+    position: absolute;
+    right: 40px;
+    color: #777
+  }
+
+  .taskview_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: 10px;
+    width: 100%;
+  }
+
+  .taskview_fjarea {
+    margin: 10px 20px;
+    color: #777
+  }
+
+  .taskview_fjlist {
+    padding: 0px 0 0 20px;
+    align-items: center;
+    display: flex;
+    font-size: 14px;
+    height: 25px;
+    line-height: 25px;
+  }
+
+  .taskview_fjsize {
+    font-size: 14px;
+    color: #aaa;
+    margin-left: 10px;
+  }
+
+  .taskview_fjdel {
+    font-size: 15px;
+    color: #fc4e2c;
+    position: absolute;
+    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;
+    background-color: #f6f6f6;
+    margin: 10px 0;
+  }
+
+</style>

src/pages/taskview.vue

@@ -480,8 +480,8 @@
     name: 'taskview',
     data() {
       return {
-        tasktype: 0, //0-临时任务 1-客户走访 2-设备维护 3-单据关联 4-稽核检查
-        taskflag_dt: "未完成", //未完成,待验收,已验收 已完成 （3-单据关联 2-设备维护 这两类的任务，目前只有：未完成、已完成 这两个状态。其余类型的任务，如果设了不用验收，也是这两个状态）
+        tasktype: 3, //0-临时任务 1-客户走访 2-设备维护 3-单据关联 4-稽核检查
+        taskflag_dt: "已完成", //未完成,待验收,已验收 已完成 （3-单据关联 2-设备维护 这两类的任务，目前只有：未完成、已完成 这两个状态。其余类型的任务，如果设了不用验收，也是这两个状态）
         ifresponse: 0, //弹窗 0：不弹  1：完成任务界面 2：验收任务界面
         iffg: 0 //0-不是返工 1-返工
       }

src/router/index.js

@@ -13,6 +13,7 @@ import AboutCses from '@/pages/about_cses'
 import CsesSptTodo from '@/pages/cses_spt/todo'
 import CsesSptDetail from '@/pages/cses_spt/cses_spt_detail'
 import Csescheckitem from '@/pages/cses_spt/cses_checkitem'
+import Csesspturge from '@/pages/cses_spt/cses_spt_urge'
 import CsesSptFeedback from '@/pages/cses_spt/cses_spt_feedback'
 import WkpFinish from '@/pages/wkpfinish'
 import Orderwkp from '@/pages/orderwkp'
@@ -85,6 +86,11 @@ export default new Router({
       name: 'GongGao',
       component: GongGao
     },
+    {
+      path: '/csesspturge',
+      name: 'Csesspturge',
+      component: Csesspturge
+    },
     {
       path: '/deptclaim',
       name: 'Deptclaim',