LongjoeUI/src/pages/buytaskdetail.vue

<template>
  <div id="taskdetail">
    <div class="topbar">
      <div class="topbar_left" @click="goback">
        <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 id="content">
      <div class="toparea_dt" :class="colortop">
        <div class="taskcode_dt">
          BG190816001
          <svg class="icon" aria-hidden="true" v-if="ifnew==1">
            <use xlink:href="#icon-ziyuan"></use>
          </svg>
        </div>
        <div class="taskflag_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weikaishi" v-if="taskflag_dt=='待审核'"></use>
            <use xlink:href="#icon-jindu" v-if="taskflag_dt=='在进行'"></use>
            <use xlink:href="#icon-CombinedShape" v-if="taskflag_dt=='已完成'"></use>
          </svg>
          {{taskflag_dt}}
        </div>
      </div>
      <div class="taskinfo_dt">
        <div class="cust_dt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-kehu"></use>
          </svg>
          广东省佛山市顺德区某某纸箱商
        </div>
      </div>
      <div class="reptel_dt">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-address"></use>
        </svg>
        <span>王利云</span>
        <span style="margin-left:10px;">13800138000</span>
      </div>
      <div class="address_dt">地址：广东省顺德市芙蓉中路二段115号</div>

      <div class="liubai_dt"></div>

      <div class="middlearea">
        <div class="taskinfo_dttitle_dt">
          <div class="title_dt">负责人：</div>
          <div class="taskinfo_dtitem">张大三</div>
        </div>
        <div class='taskinfo_dtflex'>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt ">订货日期：</div>
            <div class="taskinfo_dtitem leftsize">2019-8-16</div>
          </div>
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt rightside">相关号码：</div>
            <div class="taskinfo_dtitem requiredate">K1823103</div>
          </div>
        </div>
        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">金额：</div>
            <div class="taskinfo_dtitem taskamt leftsize">¥10000</div>
          </div>
          <div class="taskinfo_dttitle_dt dingjin">
            <div class="title_dt rightside">已付金额：</div>
            <div class="taskinfo_dtitem taskamt">¥0</div>
          </div>
        </div>

        <div class="taskinfo_dtamt">
          <div class="taskinfo_dttitle_dt">
            <div class="title_dt">未付金额：</div>
            <div class="taskinfo_dtitem taskamt leftsize">¥10000</div>
          </div>
          <div class="taskinfo_dttitle_dt rightside">
            <div class="title_dt">结算方式：</div>
            <div class="taskinfo_dtitem">记帐</div>
          </div>
        </div>

      </div>

      <div class="dscrp">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wentibuchong"></use>
        </svg>
        备注：出口单，请准时交货。
      </div>

      <div style="font-size:14px;margin:20px 20px 10px 20px">
        <div style="line-height:30px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>
          唛头资料_1.rar
          <span style="font-size:12px;color:#888;margin-left:10px">9.4 MB</span>
        </div>
        <div style="line-height:30px">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yasuobao"></use>
          </svg>
          唛头资料_2.rar
          <span style="font-size:12px;color:#888;margin-left:10px">6.4 MB</span>
        </div>
      </div>

      <div class="liubai_dt"></div>

      <div style="font-size:14px;margin:20px;">

        <div v-if="oaflag_dt=='处理中'">
          <div style="font-weight:bold">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dengdai1"></use>
            </svg>
            审批流程处理中</div>
          <div style="color:#888;line-height:30px;margin-left:18px;">正在审批步骤：财务审批</div>
        </div>


        <div v-if="oaflag_dt=='否决'">
          <div style="font-weight:bold;color:#f00">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-weiwancheng"></use>
            </svg>
            审批流程已否决
          </div>
          <div style="color:#888;line-height:30px;margin-left:18px;">否决步骤：财务审批</div>
        </div>


        <div v-if="oaflag_dt=='通过'">
          <div style="font-weight:bold">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengque1"></use>
            </svg>
            审批流程已通过
          </div>
          <div style="color:#888;line-height:30px;margin-left:18px;">共耗时1天16小时</div>
        </div>

        <div style="display:flex">
          <div style="color:#6495ed;margin:10px auto 0 auto ">查看详细审批情况</div>
        </div>
      </div>

      <div class="liubai_dt"></div>
      <!-- <div class="mxjdinfo">*点击明细可查看明细产品进度</div> -->
      <div class="subtitle_dt">订单明细</div>
      <div class="taskmx_dt">

        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            天地合纸箱 100*80*60cm
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：600个，单价：8.33元，合计：5000元</div>

        </div>

        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            躺椅纸箱 50*10*10
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：400个，单价：7.5元，合计：3000元</div>
        </div>


        <div id="rowmx_dt">
          <div class="mxmtrl_dt">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dian"></use>
            </svg>
            1017G纸箱 74*23*10
          </div>
          <div class="mxqty_dt">交期：2019-08-20</div>
          <div class="mxqty_dt">数量：200个，单价：10元，合计：2000元</div>
          <div class="mxqty_dt">已收货数：200个，完成收货：2019-08-20</div>

        </div>
      </div>
      <div style="font-size:12px;color:#888;padding: 0px 0 10px 20px">*点击可查看明细相关信息</div>

      <div class="liubai_dt"></div>
      <div class="subtitle_dt">订单进度跟踪</div>
      <div class="jindu">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          下单：2019-08-16 09:08 张大三
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          初审：2018-12-11 09:30 李大四
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          终审：2018-12-11 09:30 王小五
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-baifenbi"></use>
          </svg>
          入库：20%&nbsp&nbsp(200/1000)
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzhoutiaowancheng"></use>
          </svg>
          收货开单：2019-08-20 10:30 李小兵
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-buzouweijinxing"></use>
          </svg>
          收货完成：
        </div>

      </div>


    </div>

    <!-- 弹出详细信息 -->
    <div v-show="ifmx!=0">
      <div class="quote_edit_mask"></div>

      <div style="z-index: 9999;
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    height: 90%;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px 0;">
        <div style="display:flex">
          <div style="margin:0 auto;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">明细相关信息</div>
          <div style="position: absolute;
            right: 20px;
            color: #ccc;
            font-size: 12px;
            line-height:26px;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>
        </div>

        <div style="font-size:14px;margin:5px 0 ;padding:0 15px">
          <div>供应商：广东省佛山市顺德区某某纸箱商</div>
          <div>物料编号：ZX1001</div>
          <div>物料名称：天地合纸箱 74*23*10</div>
          <div style="display:flex">
            <div style="flex:0 0 70%">采购数量：600个</div>
            <div style="position: absolute;right:20px">交货日期：2019-08-20</div>
          </div>

          <div style="display:flex">
            <div style="flex:0 0 70%">采购单价：8.33元</div>
            <div style="position: absolute;right:20px">金额：5000元</div>
          </div>
        </div>
        <div class="liubai_dt"></div>

        <div style="width: 100%;">
          <div style="display: flex;
    width: 105px;
    margin: 10px auto 5px auto;
    font-size: 15px;
    font-weight: bold;">

            <div style="color: #fd7526;border-bottom: 2px solid #fd7526;" v-if="ifmx==1">数量</div>
            <div style="color:#888;margin-left:30px" v-if="ifmx==1">价格</div>

            <div v-if="ifmx==2" style="color:#888;">数量</div>
            <div style="margin-left:30px;color: #fd7526;border-bottom: 2px solid #fd7526;" v-if="ifmx==2">价格</div>
          </div>
        </div>

        <div style="font-size:15px;padding:0 20px;font-weight:bold;color:#666" v-if="ifmx==1">

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ;line-height:20px">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">需求数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">1000</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>生产需求数</div>
                <div style="position: absolute;right:30px;">1000</div>
              </div>

              <div style="display:flex;">
                <div>订单需求数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

              <div style="display:flex;">
                <div>外协需求数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

            </div>
          </div>

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0;line-height:20px ">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">库存数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">400</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>材料仓</div>
                <div style="position: absolute;right:30px;">300</div>
              </div>

              <div style="display:flex;">
                <div>车间仓</div>
                <div style="position: absolute;right:30px;">100</div>
              </div>

            </div>
          </div>
          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
            <div style="width:100px">可装数</div>
            <div style="position: absolute;right:30px;color:#888">0</div>
          </div>

          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0;line-height:20px ">
            <div style="width:100px">外协商库存数</div>
            <div style="position: absolute;right:30px;color:#888">0</div>
          </div>

          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ">
            <div style="display:flex;padding:10px 0 ">
              <div style="width:100px">在途数 <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg></div>
              <div style="position: absolute;right:30px;color:#888">0</div>
            </div>

            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
              <div style="display:flex;">
                <div>采购未到货数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>

              <div style="display:flex;">
                <div>生产未完成数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>
              <div style="display:flex;">
                <div>外协未完成数</div>
                <div style="position: absolute;right:30px;">0</div>
              </div>
            </div>
          </div>

          <div style="display:flex;padding:20px 0 0 0;color:#f00;line-height:20px ">
            <div style="width:100px">缺料数</div>
            <div style="position: absolute;right:30px;color:#f00">600</div>
          </div>
        </div>

        <div style="padding:5px 10px" v-if="ifmx==2">
          <div
            style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666">
            <div style="flex:0 0 25%;text-align: center;line-height:34px">供应商</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">最新报价</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">报价时间</div>
            <div style="flex:0 0 25%;text-align: center;line-height:34px">累计采购量</div>
          </div>

          <div
            style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">某某纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">8.33元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">7000个</div>
          </div>

          <div
            style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">天天纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">9.2元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">500个</div>
          </div>

          <div
            style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">景田纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">8.8元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/8/1</div>
            <div style="flex:0 0 25%;text-align: center;">600个</div>
          </div>

          <div
            style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;align-items: center;">
            <div style="flex:0 0 25%;text-align: center;">东南纸箱厂</div>
            <div style="flex:0 0 25%;text-align: center;">9.6元/个</div>
            <div style="flex:0 0 25%;text-align: center;">2019/7/1</div>
            <div style="flex:0 0 25%;text-align: center;">40个</div>
          </div>
        </div>

      </div>

    </div>


    <!-- 弹出审批流程进度界面 -->
    <div v-if="ifoaview==1">
      <div class="quote_edit_mask"></div>
      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 95%;width: 100%;font-size:14px;padding: 10px 0">
        <div
          style="width:95%;background-color: #fff;margin:0 auto;height: 100%;    border-radius: 15px;overflow:hidden;">

          <!-- 顶部造型图片 -->
          <!-- <div style="text-align: center;">
            <img src="../assets/ui_toppic.jpg" style="display: inline-block;height: auto;max-width: 100%;"
              v-if="oaflag_dt=='处理中'">
            </img>
            <img src="../assets/ui_toppic_red.jpg" style="display: inline-block;height: auto;max-width: 100%;"
              v-if="oaflag_dt=='否决'">
            </img>
            <img src="../assets/ui_toppic_green.jpg" style="display: inline-block;height: auto;max-width: 100%;"
              v-if="oaflag_dt=='通过'">
            </img>
          </div> -->

          <div style="width:100%;height:168px;overflow:hidden;" :class="pic_bg_color">
            <div class="wave_one" :class="wave_color"></div>
            <div class="wave_two" :class="wave_color"></div>
            <div class="wave_three" :class="wave_color"></div>
          </div>

          <!-- 图片 -->
          <div class="pic_warp">
            <div style="text-align: center;">
              <img src="../assets/toppic.png" style="display: inline-block;max-width:200px;"> </img> </div>
          </div>

          <!-- 关闭按钮 -->
          <div style="position: absolute;top:15px;right: 6%;color: #f0f0f0;font-size: 12px;line-height:26px;">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-guanbi"></use>
            </svg>
          </div>

          <!-- 左边状态角标 -->
          <div v-if="oaflag_dt=='处理中'"
            style="position: absolute;top:40px;background-color:#d8ebf9;color:#0679b2;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dengdai1"></use>
            </svg>
            {{oaflag_dt}}
          </div>

          <div v-if="oaflag_dt=='通过'"
            style="position: absolute;top:40px;background-color:#ebfbd4;color:#88b04b;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhengque1"></use>
            </svg>
            {{oaflag_dt}}
          </div>

          <div v-if="oaflag_dt=='否决'"
            style="position: absolute;top:40px;background-color:#fee7e5;color:#ff6f61;padding:2px 8px;font-weight:bold;font-size:14px;box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3);">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-weiwancheng"></use>
            </svg>
            {{oaflag_dt}}
          </div>

          <!-- 审批流程状态 -->
          <div style="display:flex;margin:10px 0 0 0;align-items: center;">
            <!-- <div style="background-color:#d8ebf9;color:#0269b8;margin:0 0 0 20px;padding:2px 8px;font-size:12px"
              v-if="oaflag_dt!='否决'">
              {{oaflag_dt}}
            </div>

            <div style="background-color:#fdd1cd;color:#ff6f61;margin:0 0 0 20px;padding:2px 8px;font-size:12px"
              v-if="oaflag_dt=='否决'">
              {{oaflag_dt}}
            </div> -->

            <div style="position: absolute;right:5%;color:#888;font-size:12px" v-if="oaflag_dt=='处理中'">已审批了1天14小时
            </div>
            <div style="position: absolute;right:5%;color:#888;font-size:12px" v-if="oaflag_dt!='处理中'">审批耗时1天7小时
            </div>
          </div>

          <!-- 审批流程主体内容 -->
          <div style="margin:15px 0 0 0 ">

            <div class="oaview_emp">
              <div class="oaview_emp_title">
                <span class="oaview_emp_list_icon">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhengque1"></use>
                  </svg>
                </span>

                <span>
                  发起审批
                </span>
              </div>

              <div class="oaview_emp_list">
                <div>
                  黎小娟
                </div>

                <div class="oaview_emp_list_time">
                  8/12 09:23
                </div>

                <div class="oaview_emp_list_from oaview_emp_list_from_pc">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diannao"></use>
                  </svg>
                  PC
                </div>
              </div>

              <div class="oaview_emp_title">
                <span class="oaview_emp_list_icon">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhengque1"></use>
                  </svg>
                </span>

                <span>
                  主管审批
                </span>
              </div>

              <div class="oaview_emp_list">
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-buzhoutiaowancheng"></use>
                  </svg>
                  李子雄
                </div>
                <div class="oaview_emp_list_time">
                  8/12 10:12
                </div>
                <div class="oaview_emp_list_from oaview_emp_list_from_app">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                  </svg>
                  移动端
                </div>
              </div>

              <div class="oaview_emp_list oaview_emp_list_gray">
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-buzouweijinxing"></use>
                  </svg>
                  杨李玉
                </div>
              </div>

              <!-- 当前审批步骤：红字 oaview_emp_list_red -->
              <div class="oaview_emp_title" :class="ban_red">
                <span class="oaview_emp_list_icon">
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='否决'">
                    <use xlink:href="#icon-weiwancheng"></use>
                  </svg>

                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='处理中'">
                    <use xlink:href="#icon-dengdai1"></use>
                  </svg>

                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                    <use xlink:href="#icon-zhengque1"></use>
                  </svg>
                </span>

                <span>
                  财务审批<span v-if="oaflag_dt=='处理中'"> (正在审批)</span>
                </span>




              </div>

              <div class="oaview_emp_list">
                <div>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-kongjianyixuan"></use>
                  </svg>
                  王小千
                </div>
                <div class="oaview_emp_list_time">
                  8/12 10:32
                </div>
                <div class="oaview_emp_list_from oaview_emp_list_from_app">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                  </svg>
                  移动端
                </div>

              </div>


              <div class="oaview_emp_list" :class="ban_red">
                <div>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='否决'">
                    <use xlink:href="#icon-cuowu"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='处理中'">
                    <use xlink:href="#icon-kongjianweixuan"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                    <use xlink:href="#icon-kongjianyixuan"></use>
                  </svg>
                  冯子茹
                </div>
                <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
                  8/12 10:40
                </div>

                <!-- 当前审批步骤显示为红色，否决状态下，否决那一行的步骤也是红字加粗，否决时间也显示为红色（常规状态下审批时间用的是灰色） -->
                <div class="oaview_emp_list_time " style="color:#f00" v-if="oaflag_dt=='否决'">
                  8/13 16:30
                </div>

                <div class="oaview_emp_list_from oaview_emp_list_from_app" v-if="oaflag_dt!='处理中'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                  </svg>
                  移动端
                </div>
              </div>

              <div style="padding:0 0 5px 43px;color:#ef250f;font-size:12px" v-if="oaflag_dt=='否决'">
                否决理由：该客户上批货款还未结清。
              </div>

              <div class="oaview_emp_list" :class="response_band">
                <div>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt!='通过'">
                    <use xlink:href="#icon-kongjianweixuan"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                    <use xlink:href="#icon-kongjianyixuan"></use>
                  </svg>
                  关敏霞
                </div>
                <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
                  8/12 10:39
                </div>
                <div class="oaview_emp_list_from oaview_emp_list_from_pc" v-if="oaflag_dt=='通过'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diannao"></use>
                  </svg>
                  PC
                </div>
              </div>




              <!-- 如果是否决，则否决步骤之后的全部步骤，样式均处理为 删除线+浅灰色，表示之后的步骤已经没用了  class是oaview_emp_list_gray -->
              <div class="oaview_emp_title">
                <span class="oaview_emp_list_icon">
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt!='通过'">
                    <use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
                  </svg>

                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                    <use xlink:href="#icon-zhengque1"></use>
                  </svg>
                </span>

                <span :class="response_band">
                  经理审批
                </span>
              </div>

              <div class="oaview_emp_list" :class="response_band">
                <div>
                  <svg class="icon" aria-hidden="true" v-if="oaflag_dt=='通过'">
                    <use xlink:href="#icon-kongjianyixuan"></use>
                  </svg>
                  张建国(马浩文 代理)
                </div>
                <div class="oaview_emp_list_time" v-if="oaflag_dt=='通过'">
                  18/13 16:32
                </div>
                <div class="oaview_emp_list_from oaview_emp_list_from_app" v-if="oaflag_dt=='通过'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                  </svg>
                  移动端
                </div>
              </div>

            </div>

          </div>

          <!-- 催办按钮 -->
          <div
            style="background-color:#0074d9;position: absolute;bottom:30px;right:30px;text-align: center;padding:10px 40px;color:#fff;font-weight:bold;border-radius: 5px;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);"
            v-if="oaflag_dt=='处理中'">
            催办
          </div>

        </div>


      </div>
    </div>

  </div>
</template>

<script>
  export default {

    name: 'buytaskDetail',
    data() {
      return {
        taskflag_dt: '在进行', //在进行,待审核
        ifnew: 1,
        oaflag_dt: "处理中", //处理中,通过,否决
        ifmx: 0, //0-不弹出明细相关信息 1-数量相关信息 2-价格相关信息
        ifoaview: 1 //0-不弹出审批流程界面 1-弹出
      };
    },
    methods: {
      goback() {
        {
          history.back();
        }
      },
      gotomxjd() {
        this.$router.push({
          path: "/salemxjd"
        });
      }
    },
    computed: {
      colortop: function () {
        return {
          bgcolorred: this.taskflag_dt == "待审核",
          bgcolorgreen: this.taskflag_dt == "在进行",
          bgcolorblue: this.taskflag_dt == "已完成"
        };
      },
      response_band: function () {
        return {
          oaview_emp_list_gray: this.oaflag_dt == "否决"
        };
      },
      ban_red: function () {
        return {
          oaview_emp_list_red: this.oaflag_dt == "否决"
        };
      },
      wave_color: function () {
        return {
          wave_red: this.oaflag_dt == "否决",
          wave_blue: this.oaflag_dt == "处理中",
          wave_green: this.oaflag_dt == "通过"
        };
      },
      pic_bg_color: function () {
        return {
          pic_bg_red: this.oaflag_dt == "否决",
          pic_bg_blue: this.oaflag_dt == "处理中",
          pic_bg_green: this.oaflag_dt == "通过"
        };
      }
    }
  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    /* background-color: #fff; */
    font-family: "微软雅黑";
  }

  .topbar {
    min-height: 44px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9990;
    display: flex;
    font-size: 18px;
    align-items: center;
  }

  .topbar_left {
    /* flex: 0 0 %; */
    margin-left: 10px;
  }

  .topbar_middle {
    text-align: center;
    flex: 0 0 85%;
  }

  .topbar_right {
    /* flex: 0 0 10%; */
    position: absolute;
    right: 10px;
  }

  #taskdetail {
    background-color: #fff;
  }

  #content {
    position: absolute;
    top: 44px;
    background-color: #fff;
    width: 100%
  }

  .toparea_dt {
    color: white;
    background-color: rgb(252, 78, 44);
    height: 80px;
    display: flex;
  }

  .bgcolorred {
    background-color: #fc4e2c
  }

  .bgcolorgreen {
    background-color: #8dc026;
  }

  .bgcolorblue {
    background-color: #1e90ff;
  }

  .taskcode_dt {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 20px;
    line-height: 30px;
  }

  .taskflag_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    line-height: 30px;
    position: absolute;
    right: 20px;
  }

  .taskinfo_dt {
    background-color: #fff;
    width: 100%;
    height: 35px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    position: absolute;
    top: 50px;
  }

  .cust_dt {
    font-size: 16px;
    font-weight: bold;
    padding: 10px
  }

  .reptel_dt {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 2px 10px;
  }

  .address_dt {
    font-size: 13px;
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #666;
  }

  .hyaddress_dt {
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #666;
  }

  .liubai_dt {
    width: 100%;
    height: 10px;
    background-color: #f6f6f6;
  }

  .middlearea {
    margin: 10px;
    font-size: 14px;
  }

  .taskinfo_dtflex {
    display: flex;
    /* height: 60px; */
    align-items: center;
    line-height: 20px;
  }

  .taskinfo_dttitle_dt {
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .title_dt {
    width: 80px;
    text-align: right
  }

  .taskinfo_dtitem {
    font-weight: normal;
    color: #333;

  }

  .taskinfo_dtamt {
    display: flex;
    line-height: 20px;
  }

  .taskamt {
    font-weight: bold;
    color: red;
  }

  .leftsize {
    width: 100px;
  }

  .dscrp {
    border-radius: 10px;
    background: #f5f5f5;
    padding: 10px 20px;
    margin: 0 20px 10px 20px;
    font-size: 14px;
    color: #555;
    line-height: 18px;
  }

  .subtitle_dt {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin: 0 20px;
    line-height: 43px;
  }

  .jindu {
    border-top: 1px solid #f0f0f0;
    margin: 0 20px;
    font-size: 14px;
    line-height: 30px;
    padding: 10px 0;
  }

  .jindubtn {
    margin-left: 20px;
    border: 1px solid #bbb;
    padding: 0 10px;
    border-radius: 15px;
    font-size: 13px;
  }

  .taskmx_dt {
    border-top: 1px solid #f0f0f0;
    margin: 0 20px 0 10px;
    padding: 0 0 20px 0;
  }

  #rowmx_dt {

    /* margin-bottom: 10px; */
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .mxmtrl_dt {
    margin: 5px;
    font-size: 14px;
  }

  .mxqty_dt {
    font-size: 14px;
    color: #888;
    margin-bottom: 3px;
    margin-left: 25px;
  }

  .mxjdinfo {
    background-color: #f6f6f6;
    font-size: 12px;
    color: #888;
    padding: 5px 0 5px 5px;
  }

  /* .mx_bottomarea {
    display: flex;
  } */

  .mx_btndetail {
    position: absolute;
    right: 20px;
    color: #888;
    font-size: 13px;
    margin-right: 0px;
    border-radius: 5px;
  }

  .quote_edit_mask {
    height: 100%;
    width: 100%;
    background-color: #1d1d1d;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    z-index: 9998;
  }


  /* 审核流程查看界面相关css */
  .oaview_emp {
    padding: 0 0 0 15px;
  }

  .oaview_emp_title {
    margin: 5px 0;
    font-weight: bold;
  }

  .oaview_emp_list {
    display: flex;
    line-height: 25px;
    margin: 0 0 0 25px;
  }

  .oaview_emp_name {
    flex: 0 0 80px;
  }

  .oaview_emp_list_from {
    margin: 0 0 0 8px;
    font-size: 12px;
  }

  .oaview_emp_list_from_pc {
    color: #0281ed;
  }

  .oaview_emp_list_from_app {
    color: #7ba62c;
  }

  .oaview_emp_list_red {
    color: #F00;
    /* font-weight: bold; */
  }

  .oaview_emp_list_gray {
    color: #aaa;
    text-decoration: line-through
  }

  .oaview_emp_list_icon {
    margin: 0 5px 0 0;
    font-size: 17px;
  }

  .oaview_emp_list_time {
    color: #888;
    font-weight: 400;
    margin: 0 0 0 8px;
  }


  /* 顶部造型css */
  .wave_one {
    width: 180%;
    height: 180%;
    background-color: #fec1c1;
    opacity: 0.3;
    border-radius: 50%;
    position: relative;
    top: 98px;
    left: -40%;
    z-index: 9990;
  }

  .wave_two {
    width: 180%;
    height: 180%;
    background-color: #fec1c1;
    opacity: 0.4;
    border-radius: 50%;
    position: relative;
    top: -183px;
    left: -40%;
    z-index: 9991;
  }

  .wave_three {
    width: 160%;
    height: 160%;
    background-color: #fec1c1;
    opacity: 0.5;
    border-radius: 50%;
    position: relative;
    top: -468px;
    left: -30%;
    z-index: 9991;
  }

  .pic_warp {
    position: absolute;
    top: 38px;
    width: 95%;
    z-index: 9998;
  }

  .wave_green {
    background-color: #d2f3a2;
  }

  .pic_bg_green {
    background-color: #88b14b;
  }

  .wave_blue {
    background-color: #82bcd8;
  }

  .pic_bg_blue {
    background-color: #0679b2;
  }


  .wave_red {
    background-color: #fec1c1;
  }

  .pic_bg_red {
    background-color: #fa5a5a;
  }

</style>