From 27078ad6e69ad054fd3288deeef4d671f560b1bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Wed, 15 Dec 2021 17:44:47 +0800
Subject: [PATCH 1/5] detail

---
 src/apps/AppWorkonline/AppWorkonline.vue      |   8 +-
 .../components/Profile_Picture.png            | Bin 0 -> 663 bytes
 src/apps/AppWorkonline/components/agree.png   | Bin 0 -> 1250 bytes
 src/apps/AppWorkonline/components/basic.png   | Bin 0 -> 858 bytes
 src/apps/AppWorkonline/components/clearn.png  | Bin 0 -> 217 bytes
 src/apps/AppWorkonline/detail.vue             | 909 +++++++++++++++++-
 6 files changed, 904 insertions(+), 13 deletions(-)
 create mode 100644 src/apps/AppWorkonline/components/Profile_Picture.png
 create mode 100644 src/apps/AppWorkonline/components/agree.png
 create mode 100644 src/apps/AppWorkonline/components/basic.png
 create mode 100644 src/apps/AppWorkonline/components/clearn.png

diff --git a/src/apps/AppWorkonline/AppWorkonline.vue b/src/apps/AppWorkonline/AppWorkonline.vue
index 3cd912a6..bd2c9a21 100644
--- a/src/apps/AppWorkonline/AppWorkonline.vue
+++ b/src/apps/AppWorkonline/AppWorkonline.vue
@@ -5,7 +5,7 @@
     </div>
 
     <template v-if="datas.length == 0">
-      <u-card v-for="(items, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
+      <u-card v-for="(item, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
         <view class="body" slot="body">
           <view class="u-body-item">
             <div class="title">基本养老保险灵活就业人员新参保业务</div>
@@ -73,8 +73,10 @@ export default {
   methods: {
     getList() {},
 
-    goDetail(item) {
-      
+    goDetail(item, indexs) {
+      console.log(item, indexs)
+      var id = '11'
+      uni.navigateTo({ url: `./detail?id=${id}` })
     },
 
     search(e) {
diff --git a/src/apps/AppWorkonline/components/Profile_Picture.png b/src/apps/AppWorkonline/components/Profile_Picture.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac46d7c64d1deb279498af63ac599f5d1f29f587
GIT binary patch
literal 663
zcmV;I0%-k-P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0007BNkl<ZXhZFo
zzmE-39K}B;L?{&KB}B1ND0C7!5fU1OLX;bYM3jmx2zqQUDiI>t|3E{d60)KYm5N3b
z60CLP$~+l&@66n{^M1_8O!D%Ix%Yd&=X=h*_d7@Q{87*IX8<s71_uTP23l5NW)iZ!
z9XMO$`$W=@mbw3#J`(`8PXl*>{YBCbC7tg)0NeYD#Lq;@u1VU~SpbDxt^(n=BbBJ6
zM)r#W906WPdY_Cli7J$1B;=A@q7H!VJ-`j%BCr)$15QeM8V75vLN34>xnu*d9g@8S
zTmyDT6IUdS4uQX~S_8<DOOAwWp8#$H2P=wpPtxK<8L)i_SSg(@xr9-cknLsQa?Rv7
zz$r-|Y5~}O1{|#k^jy-h(R<tPfCJfCmj;di*j@nMR>b%M+ya)X?u~yWWZO;2M3wus
z*}J3!Ah7r<T6Z0|4=hRgRF_j*0F8jF7LN+?2sl@a4Jx=I>19(fH{8UVU|=EuLL#;g
z1M8AvHfnKnf`Ob$S27u0LX8!TsBavfBccBafbG3N=%G?~)OX;uq^~2;osy94CE#Ym
z$@URAE@`!En|LSi8Q78`sRxoS3;=SD-ElT?uO(D!Px`xwGqk^9NT*JrUIXZLD`9(X
z&0Oc&>3)CEjJt_C_enV}fTE8NmSL?2l!_bMDs%a$k6Q6y8{Pq87cN<slrL1WRjvcO
zqKVV7RpRV=YivbqG|H;8)?%itzDY`YrsM9z*3Mkcg1xoZ6S4}{$xq<1r10PRnF#}}
xv#bd)0GMWVb7Bt+<Wy;zV+IDMS>2r2zX9TFV?Y}C1JM8g002ovPDHLkV1m^-CK~_%

literal 0
HcmV?d00001

diff --git a/src/apps/AppWorkonline/components/agree.png b/src/apps/AppWorkonline/components/agree.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae6f8705e0499f4b9a09cfa2bca3a31ce24e71bc
GIT binary patch
literal 1250
zcmV<81ReW{P)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ000E3Nkl<ZSVzs6
zeN5F=7{@;cE&*C(ae>}M)aHDN*HAVziUvrwY;I{8GaVM7M8ipIE!SGJWg9F8Is{+B
zlv(0(<|+gx3yY0JAeCrNOA%`-tRhSh@U(NezuWKrxR-k`tnHpZ&&zW@zvp?*_dMq(
z@UTfKX97!sCBQr&9Jt47=5L@2=mfq4jte1v^<)d-&SWX2FR&7L9Y_S+S_ep=3D^!)
z3n4~a?dQ_4lrjY<1?IXk=3@M3AWsNUKi)j2KvK#8pcu&Vz$31hmB%W8d?Cbuqsb0|
zq?94RSHME!A}J-U*H6)SwSgaRw9?ggiN4!^S*8WubuZyT5k!Z?k@RpfaiI$l!r>OD
zfM<meH;nej%(lWb8bhQ&>bq(vZ7<?-pL=;aBWNahF`G#VPj>{SLYQQPvIDY)Nx|58
zrn~<NZ=cNPOi#P3kT@KVGRN@Y6U97o_jKd9@|1$Ih0h4I6Uf%DYPr_T=5KTPbMTJ|
z!Dx%7`QJy;lRJnHOEB6g7eeG{oi-rrX{yyHu!701U(4{Fp-I7Li%mX$l&9=7La9Vg
z(@viS$f`5v^m(Jgl=1b7NqfflCCXD(%Z?bsr}F7BrBfQvOTa;Gu}a`qYF?Od&KM!4
zn5OdRv^kvVX|oKeocc8VurbkB3n4z!fRxNH)(q8M{)U1^CCZa;4^DlElH^^e6PMqR
zL(}i-%s^q%c2Z|Nqu=0rA;c0PrJMy^&~it4=lL&F-9FmmAxD{GDSm1v!GUH*?u=Lt
zM?-g=Wr+ejy1Y*BC6!CF6_CpCGR^SmYt3ZVzC3ByEQ?sqdx_id_w~2f`k?t;4xO*E
zv%5F#AdiPF()VppKnH*ft@q>BZB%ybnlO++urWHH*CKOmU%&fo8Kv!oV{EQlkj19B
zxAgs03g|Qtr}eHo{vvJHTP6e);2Xf!#f5gcaqQw3Y-xJap}pA9cq*5Et{-bvK<Yj*
zYrRibC(t|4<1tW3U>GII<;)L`w5@IW?Id|8US(JgJG2)ZVCKZiX8l-?0#dR)8fYNC
zYA!=MAvF1z$crhU`g|2in;f-y_b;F%xq{Fs57>q~dppRiUClqkH=TZ*pN}6c8A^g|
zZO|o<%7^TzJZ_H+a-j1QcAqQb=1{-Qg1R_Wm;z0Kw!W+V-4-3|xi#i8w}W#AG;YWu
zf@ZNV{SZoFRqMUgW4ZB<UO3G9$Q(9CZ^B3T*fvsk-rAZ~T<ZJ9W!RmC%w<xm`lcdf
zKLI9HvyC?O_2xiTHvQKIh6l*1Ut_70+-c5|+HmYYqOwC3b@nZJdMZUpJMi^U<@MNR
z5x&M;8m^2ApF7Rjv3FY-SIx=borL!t?&V1MTtPV#MvtzJH)0A{AGyJ9uRUkWC~+Ws
z;{iFnI@BU5rAL?R*2F@do4vxa-?58F*wR$s${AzEonEe1AdkuqlQ6Mnex_xU{Xgw>
zDtyi;-6=m*rg~3-X7!SK5PC-mtGQN6={-fh)k{kGyyqEYg;MhC9S=oa=v+Ldf3QBK
z+nhY5W35l=MU#I@>!7^nXM<ipyyka|0m^%RSQ*vU`fN)3zkccc3lmXK*~4Cb+W-In
M07*qoM6N<$f{JrxPXGV_

literal 0
HcmV?d00001

diff --git a/src/apps/AppWorkonline/components/basic.png b/src/apps/AppWorkonline/components/basic.png
new file mode 100644
index 0000000000000000000000000000000000000000..a049cd9fce242714ed4764d00e2a63272b90574f
GIT binary patch
literal 858
zcmV-g1Eu_lP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0009aNkl<ZXhZFn
zNoW&c7>3_(ri-S_Oe?LXjfl(Lr5?Q`cn}XF6b~MXf)`I76qhb3W2cR!Ad1Hdir_^M
zJctNw4|)?kd2p$=UNo6BrkYeqYm%8yvJ`5XNt&cdj7*OCm+yVP_x<zdC)D_dYFs}o
zfNDEvIq=^)(B%$2V&Eu=IPFv9sd9mqB|_~Aw>IkGa6&W#_x!4SuBHGSO1NFuc`+fH
zh#vSxq_Y-)Ne9XjA<KaR@@6@ZtyxxttOym*0V_f!Hp}`Is>ul12bXsV!iwxw+uoD{
zu<s5xM!x^-@%dU_W0GRUq^aNtbq@U6E{gGafNTJUHB}nTEWD9>K)M!cvo&A}jKcsu
z)KsajA^_b=#G%KdpNUYPD#&h4ZTkx%A3#bxO@p~7wFf=dROxs{01`#)!{I(K-v=P3
z7%-%b%44enasedA44ww#Q2M<vFBlC@-<a)7#Q?HG0E3z;dlF-20O{{%031w<pA*Ff
zr&qCkEk=COyJ8obI5D7&$~UqBboVc9GwOI6;G}o}pQ1*Cb8*b(Ek%PVK$rW+1t#hh
zbh_#tlU|t>$&3>L{eno7YhPp(qf17;F$2bdbml+C#5!kCY4VxvyJL81oY?5m8Rr9|
z^1RtRQvka=ybSOb0FO0QK9#FWnGg(25O5`BF+F3j1Hk^Y_}SR+s4F<pVJf~`S#%h>
zm_8H2xTd!D7Xc9BR8HxsUzJYevw7XY&bEN)Lo8nB3VNEfT>Etnh4zYsx#S$8TiS?p
zvFrdQ2YXFjdLI`>*EglvpRXBJ12BakdZ))lSHRP}kWYMKys7}}A?U3k3a$mEC9o0k
z{{%o1VkmqJ0*;VCw|z=$aHHb?8Gu3rXU?s9gh~-_Ik4J2ySuP^pwzCfUB6ioiU8OO
zV3wix8Z54CrpR1-i3BHryU96%;L)zP4i<BfJppjCQlhihA!Z0pzuNM$V1TZ{$W9ib
zF97VR4g@iQZ~9dEa<2M0|4w%(f#!On@eIJb86;E;glL%!n#$GrRV^jG2Py`XqmTtq
kZ5J#DEC)*LK+Q+!4_Qn0Kt!IxR{#J207*qoM6N<$f<j_`Z~y=R

literal 0
HcmV?d00001

diff --git a/src/apps/AppWorkonline/components/clearn.png b/src/apps/AppWorkonline/components/clearn.png
new file mode 100644
index 0000000000000000000000000000000000000000..96020cf49a055d6f96b1ab12c5426ba3cec09e54
GIT binary patch
literal 217
zcmV;~04D#5P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0001>Nkl<ZNK5UM
z(FwvZ6h+Vdb^s?({OB0nLMPC9bOPO?WAsDp1RcQdD}_`-X$c4s!Q}7d<-L1zUWmxN
zl(|1eAW66&`Y}YdSHKRqOL|W2+1?C$lDe7PZ0&o<wkx0k)<6%`lG?G6?K5x;@kP=p
z$}QH$0#{%kIlD<Z3~_M&n7H1KH?h4~`&EIwhysdyLry;E4-b^DA_=Y_`U6BSn$cVt
T>Ih}n00000NkvXXu0mjfpH*5w

literal 0
HcmV?d00001

diff --git a/src/apps/AppWorkonline/detail.vue b/src/apps/AppWorkonline/detail.vue
index ac7b033d..d32d3d34 100644
--- a/src/apps/AppWorkonline/detail.vue
+++ b/src/apps/AppWorkonline/detail.vue
@@ -1,25 +1,914 @@
 <template>
-  <div class="detail">detail</div>
+  <div class="detail" v-if="pageShow">
+    <!-- <div class="top" v-if="list.approvalStatus == 1">
+      <p>审批通过:</p>
+      <div class="save">
+        <div style="display: inline">11已签署完成,</div>
+        <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image>
+      </div>
+    </div> -->
+
+    <div class="form">
+      <!-- 审批表单名称 -->
+      <text class="text">
+        审批表单名称
+        <!-- {{ list.processDefName }} -->
+      </text>
+
+      <div class="people">
+        <!-- 左 -->
+        <div class="people_msg">
+          <!-- 圆形头像 -->
+          <div class="avatar">
+            <span>李伟民</span>
+            <!-- <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+            <span v-else> {{ $formatName(list.createUserName) }}</span> -->
+          </div>
+
+          <text class="name">
+            <!-- 姓名 -->
+            <p class="name_con">
+              李伟民
+              <!-- {{ list.createUserName }} -->
+            </p>
+            <!-- 日期 -->
+            <p class="name_createtime">
+              2021
+              <!-- {{ list.createTime }} -->
+            </p>
+          </text>
+        </div>
+
+        <!-- 右 -->
+        <!-- 审批状态 -->
+        <!-- 审批中 -->
+        <div class="people_status_ing">
+          <!-- v-if="list.approvalStatus == 0" -->
+          <!-- {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }} -->
+        </div>
+
+        <!-- 已通过 -->
+        <div class="people_status_agree">
+          <!-- v-if="list.approvalStatus == 1" -->
+          <img src="./components/people_status_agree.png" alt="" />
+        </div>
+
+        <!-- 被驳回 -->
+        <!-- <div class="people_status_reject" v-if="list.approvalStatus == 2">
+          {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+        </div> -->
+      </div>
+
+      <!-- 表头内容 -->
+      <div class="content">
+        <div class="item">
+          <span class="item_info">所属类型：</span>
+          <span class="zhuf">
+            classificationName
+            <!-- {{ list.classificationName }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <span class="item_info">所属部门：</span>
+          <span class="liangzhu">
+            department
+            <!-- {{ $dict.getLabel('hbDepartment', list.department) }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <span class="item_info">审批编号：</span>
+          <span class="liangzhu">
+            serialNumber
+            <!-- {{ list.serialNumber }} -->
+          </span>
+        </div>
+
+        <div class="item">
+          <div class="item_info">
+            <span class="annexs">附件资料：</span>
+
+            <!-- v-for="(item, indexs) in list.annexs" :key="indexs" -->
+            <div class="img_text">
+              img_text
+              <!-- <ai-image :src="item.annexFile.url" preview />
+              <span class="text">{{ item.annexName }}</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- tabs栏 -->
+    <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
+
+    <!-- 表单申请的折叠窗 -->
+    <div style="background-color: #fff">
+      <div v-if="current == 0" class="collapse">
+        <!-- <u-collapse event-type="close" :arrow="true" :accordion="true">
+          <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
+            <div v-for="(items, indexs) in item" :key="indexs">
+              <div class="item_msg">
+                <span class="msg_lef">{{ items.fieldName }}</span>
+
+                <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
+                <span class="msg_lright" v-else>
+                  <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
+                    >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
+                    <span v-if="indexL < items.fieldValue.length - 1">,</span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </u-collapse-item>
+        </u-collapse> -->
+      </div>
+    </div>
+
+    <!-- 流程信息 -->
+    <div v-if="current == 1" class="workflow">
+      <!-- 第一步发起 -->
+
+      <!-- v-if="item.nodeType == 3" -->
+      <div class="step-list">
+        <!-- <div class="step-item" v-for="(item, index) in stepList" :key="index"> -->
+        <div class="step-item" v-for="(item, index) in 3" :key="index">
+          <div class="item-left">
+            <div class="item-left-ava-icon">
+              <div class="avatar" v-if="item.userName">
+                <span>userName</span>
+                <!-- <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+                <span v-else> {{ $formatName(item.userName) }}</span> -->
+              </div>
+
+              <!-- <div class="avatar" v-else-if="item.title == '抄送'">
+                <img src="./components/Profile_Picture.png" alt="" />
+              </div> -->
+
+              <div class="avatar" v-else>
+                <span>candidates</span>
+                <!-- <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div> -->
+              </div>
+
+              <!-- <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                <img src="./components/agree.png" alt="" />
+              </div>
+
+              <div class="" v-else-if="item.stepType == 2"></div>
+
+              <div class="icon-no" v-else>
+                <img src="./components/clearn.png" />
+              </div> -->
+            </div>
+
+            <!-- <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div> -->
+          </div>
+
+          <div class="item-right">
+            <div class="time-info">
+              <div>
+                title
+                <!-- {{ item.title }} -->
+              </div>
+              <span>
+                approvalTime
+                <!-- {{ item.approvalTime }} -->
+              </span>
+            </div>
+            <div class="item-right-flex">
+              <!-- 1人或签 -->
+              <span class="title2">
+                title2
+                <!-- {{ item.title2 }} -->
+              </span>
+
+              <!-- 审批中 -->
+              <span class="title2Desc-ing">
+                <!-- v-if="item.stepType == 9" -->
+                title2Desc
+                <!-- {{ item.title2Desc }} -->
+              </span>
+
+              <!--已拒绝   -->
+              <!-- <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span> -->
+
+              <!-- 审批通过 -->
+              <!-- <span class="title2Desc" v-else>
+                {{ item.title2Desc }}
+              </span> -->
+
+              <!-- 抄送人/抄送人头像 -->
+              <div class="user-list">
+                <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
+                  <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
+                  <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
+                </div>
+              </div>
+
+              <!-- 意见 -->
+              <div v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
+                <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                <span>{{ item2.fieldValue }}</span>
+              </div>
+
+              <!-- <div v-for="(item4, index4) in this.stepList" :key="inde4">
+                    <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                    <span>{{ item4.fieldValue }}</span>
+                </div> -->
+
+              <span v-if="item.stepType == 2">
+                <span>审批意见:</span>
+                <span>意见111</span>
+                <!-- {{ item.opinion }} -->
+              </span>
+
+              <div class="examine" v-if="item.stepType == 2">
+                <div class="examine_docx1">
+                  <!-- 图片 -->
+                  <!-- <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
+                  </div> -->
+
+                  <!-- 附件资料 -->
+                  <!-- <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                      <ai-image :file="annex" preview>
+                        <u-row justify="space-between">
+                          <span class="docx-name">{{ annex.name }}</span>
+                          <span>{{ annex.fileSizeStr }}</span>
+                        </u-row>
+                      </ai-image>
+                    </div>
+                  </div> -->
+                </div>
+              </div>
+
+              <!-- 附件资料 -->
+              <!-- v-if="item.stepType == 8" -->
+              <!-- <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                <div class="examine_docx1">
+                  <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
+                  </div>
+
+                  <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                      <ai-image :file="annex" preview>
+                        <u-row justify="space-between">
+                          <span class="docx-name">{{ annex.name }}</span>
+                          <span>{{ annex.fileSizeStr }}</span>
+                        </u-row>
+                      </ai-image>
+                    </div>
+                  </div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="reject_agree">
+      <!-- v-if="canApproval && list.approvalStatus == 0" -->
+      <div class="reject" @click="agree(0)">拒绝</div>
+      <div class="agre" @click="agree(1)">同意</div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'detail',
   components: {},
-  props: {},
-  data() {
-    return {}
+  computed: {
+    ...mapState(['user']),
+
+    // canApproval() {
+    //   return this.listType == 0
+    // },
+  },
+  created(options) {
+    // this.detailId = options.id
+    // this.listType = options.listType
+    // this.getDetail()
+  },
+  data() {
+    return {
+      detailId: '',
+      list: [],
+      list_tabs: [
+        {
+          name: '申请表单',
+        },
+        {
+          name: '流程信息',
+        },
+      ],
+      current: 0,
+      // inforlist: [],
+      // stepList: [],
+      // dictList: ['hbDepartment'],
+      pageShow: true,
+      // listType: 0,
+      // eventChannel: null,
+    }
+  },
+  // 方法
+  methods: {
+    getDetail() {
+      // this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.detailId}`).then((res) => {
+      //   if (res.code == 0) {
+      //     if (res.data) {
+      //       this.list = res.data
+      //       console.log(res.data)
+      //       if (res.data.createUserAvatar) {
+      //         console.log(res.data.createUserAvatar)
+      //       }
+      //       this.inforlist = [[], [], [], [], [], [], [], [], [], []]
+      //       res.data.tableInfo.tableFieldInfos.map((item) => {
+      //         if (item.groupIndex) {
+      //           this.inforlist[item.groupIndex - 1].push(item)
+      //         }
+      //         if (item.dictionaryCode) {
+      //           this.dictList.push(item.dictionaryCode)
+      //         }
+      //         if (item.fieldDataType == 5) {
+      //           // item.fieldValue = item.fieldValue.split(',')
+      //         }
+      //       })
+      //       this.$dict.load(this.dictList).then(() => {
+      //         this.pageShow = true
+      //       })
+      //     }
+      //   }
+      // })
+      // this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.detailId}`).then((res) => {
+      //   if (res.code == 0) {
+      //     if (res.data) {
+      //       this.stepList = res.data
+      //     }
+      //   }
+      // })
+    },
+
+    change(i) {
+      this.current = i
+    },
+
+    agree(type) {
+      console.log(type)
+      // this.$http
+      //   .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.detailId}`)
+      //   .then((res) => {
+      //     if (res.code == 0) {
+      //       uni.navigateTo({
+      //         url: `/pages/workonline/approvalopinion?id=${this.detailId}&type=${type}`,
+      //       })
+      //     }
+      //   })
+      //   .catch((e) => {
+      //     uni.showToast({
+      //       title: e,
+      //       icon: 'none',
+      //     })
+      //   })
+    },
   },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {},
 }
 </script>
 
 <style scoped lang="scss">
 .detail {
-  height: 100%;
+  .top {
+    background-color: #eff4ff;
+    height: 144px;
+    padding: 32px 0 0 32px;
+    color: #3a7ee2;
+    font-size: 28px;
+    .save {
+      margin-top: 8px;
+      .clicksave {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .form {
+    padding: 32px;
+    background-color: #fff;
+
+    .text {
+      font-size: 40px;
+      font-weight: 800;
+    }
+
+    .people {
+      display: flex;
+      // align-items: center;
+      justify-content: space-between;
+      // margin-top: 20px;
+      height: 122px;
+      line-height: 122px;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 10px;
+
+      .people_msg {
+        .avatar {
+          display: inline-block;
+          width: 84px;
+          height: 84px;
+          line-height: 84px;
+          border-radius: 50%;
+          background-color: #2266ff;
+          color: #fff;
+          font-size: 28px;
+          vertical-align: middle;
+          text-align: center;
+          margin-right: 10px;
+        }
+
+        .name {
+          display: inline-block;
+          width: 145px;
+          vertical-align: middle;
+
+          .name_con {
+            font-size: 30px;
+            height: 40px;
+          }
+
+          .name_createtime {
+            color: #999;
+            font-size: 24px;
+            height: 120px;
+            width: 400px;
+          }
+        }
+      }
+
+      .people_status_ing {
+        color: #ff8822;
+        text-align: center;
+      }
+
+      .people_status_agree {
+        width: 192px;
+        height: 192px;
+
+        img {
+          width: 192px;
+          height: 192px;
+          margin-top: -60px;
+        }
+      }
+
+      .people_status_reject {
+        color: #f14242;
+        text-align: center;
+      }
+    }
+
+    .content {
+      margin-top: 16px;
+
+      .item {
+        margin-top: 16px;
+
+        .item_info {
+          display: inline;
+          font-size: 30px;
+          font-weight: 400;
+          color: #999999;
+
+          .annexs {
+            // display: inline;
+            vertical-align: top;
+          }
+
+          .img_text {
+            display: inline-block;
+            position: relative;
+            width: 180px;
+            height: 175px;
+
+            img {
+              width: 180px;
+              height: 100%;
+            }
+
+            .text {
+              position: absolute;
+              bottom: 14px;
+              left: -12px;
+              font-size: 12px;
+              width: 160px;
+              height: 40px;
+              line-height: 40px;
+              text-align: center;
+              color: #fff;
+              background-color: #000;
+              opacity: 0.4;
+              margin-left: 12px;
+            }
+          }
+        }
+
+        .zhuf {
+          font-size: 30px;
+          font-weight: 400;
+          color: #1365dd;
+        }
+
+        .liangzhu {
+          font-size: 30px;
+          font-weight: 400;
+          color: #343d65;
+        }
+      }
+    }
+  }
+
+  .tabs {
+    // margin-top: 16px;
+  }
+
+  .info {
+    height: 16px;
+    width: 100%;
+    background-color: #eee;
+  }
+
+  // 表单申请
+  .collapse {
+    // margin: 0 32px;
+    // padding: 0 32px;
+    ::v-deep .u-collapse {
+      // background-color: #fff;
+    }
+
+    ::v-deep .u-collapse-head {
+      background-color: #fff;
+      padding: 0 32px;
+      height: 96px;
+    }
+
+    ::v-deep .u-collapse-body {
+      padding: 0 32px;
+      background-color: #fafafa;
+
+      .u-collapse-content {
+        .item_msg {
+          display: flex;
+          // align-items: center;
+          justify-content: space-between;
+          padding: 10px 0;
+
+          .msg_lef {
+            width: 350px;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+          }
+
+          .msg_lright {
+            max-width: 420px;
+            word-break: break-all;
+            // word-wrap: break-word;
+            margin-right: 0;
+            font-size: 30px;
+            font-weight: 400;
+            color: #333333;
+          }
+        }
+
+        .account {
+          // .account_leave {
+          // }
+          .account_house {
+            margin: 10px 0;
+            color: #333;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  // 流程信息
+  .workflow {
+    background-color: #fff;
+    padding: 24px 32px 40px 32px;
+
+    // 发起申请步骤
+
+    .step-list {
+      .step-item {
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+        // align-items: center;
+        padding-bottom: 40px;
+
+        .item-left {
+          height: 100%;
+          // position: relative;
+          .item-left-ava-icon {
+            position: relative;
+
+            .avatar {
+              display: inline-block;
+              width: 80px;
+              height: 80px;
+              line-height: 80px;
+              border-radius: 50%;
+              background-color: #2266ff;
+              color: #fff;
+              font-size: 28px;
+              // vertical-align: middle;
+              text-align: center;
+              z-index: 999;
+
+              img {
+                // margin: 16px 0 0 8px;
+                width: 48px;
+                height: 48px;
+              }
+            }
+
+            .icon-yes {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              width: 36px;
+              height: 36px;
+              // background: #fff;
+              border-radius: 50%;
+              text-align: center;
+              vertical-align: middle;
+
+              img {
+                width: 36px;
+                height: 36px;
+              }
+            }
+
+            .icon-no {
+              position: absolute;
+              top: 50px;
+              left: 50px;
+              width: 36px;
+              height: 36px;
+              background: #ff8822;
+              border-radius: 50%;
+              text-align: center;
+              vertical-align: middle;
+
+              img {
+                width: 36px;
+                height: 36px;
+              }
+            }
+          }
+
+          .solid {
+            // height: 100%;
+            height: calc(100%);
+            border-left: 4px solid #eee;
+            position: absolute;
+            top: 80px;
+            left: 40px;
+          }
+
+          .dashed {
+            // height: 100%;
+            height: calc(100%);
+            border-left: 4px dashed #eee;
+            position: absolute;
+            top: 80px;
+            left: 40px;
+          }
+        }
+
+        .item-right {
+          width: 590px;
+
+          .item-right-flex {
+            // display: flex;
+            // justify-content: space-between;
+            // align-items: center;
+            .block {
+              display: block;
+              // margin-top: 124px;
+            }
+
+            .title2 {
+              display: inline-block;
+            }
+
+            .title2Desc {
+              display: inline-block;
+              color: #2ea222;
+              margin-left: 10px;
+            }
+
+            .title2Desc-ing {
+              display: inline-block;
+              color: #ff8822;
+              margin-left: 10px;
+            }
+
+            .title2Desc-false {
+              color: #f14242;
+              display: inline-block;
+              margin-left: 10px;
+            }
+
+            .user-list {
+              overflow: hidden;
+            }
+
+            .item-right-flex-left-name {
+              margin-top: 20px;
+              float: left;
+              margin-right: 16px;
+              text-align: center;
+
+              .avatar {
+                display: inline-block;
+                width: 64px;
+                height: 64px;
+                line-height: 64px;
+                border-radius: 50%;
+                background-color: #2266ff;
+                color: #fff;
+                font-size: 28px;
+                vertical-align: middle;
+                text-align: center;
+                // margin-left: 8px;
+              }
+
+              .avatar-name {
+                display: block;
+              }
+            }
+
+            .examine {
+              p {
+                margin: 6px 0;
+                font-size: 12px;
+              }
+
+              .examine_img {
+                // display: flex;
+                // flex-wrap: wrap;
+                // justify-content: space-between;
+                // float: left;
+                // img {
+                //   width: 134px;
+                //   height: 136px;
+                //   margin-right: 8px;
+                // }
+                // ::v-deep.AiImage {
+                //   ::v-deep.u-image__image {
+                //     width: 60px !important;
+                //     height: 60px;
+                //   }
+                // }
+              }
+            }
+
+            .examine_docx1 {
+              .docx {
+                display: flex;
+                justify-content: space-between;
+                width: 556px;
+                padding: 16px;
+                background-color: #ddd;
+                margin: 6px 0;
+
+                .docx-name {
+                  width: 440px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+              }
+            }
+          }
+
+          .time-info {
+            display: flex;
+            justify-content: space-between;
+
+            span {
+              color: #999;
+              font-size: 28px;
+            }
+          }
+        }
+      }
+
+      .step-item:first-child {
+        .item-right {
+          .item-right-flex {
+            .block {
+              margin-top: 0 !important;
+            }
+          }
+        }
+      }
+
+      .step-item:last-child {
+        .dashed {
+          border-left: 0 !important;
+        }
+
+        .solid {
+          border-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  // 抄送人头像
+  .recipients {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    margin: 16px 0 0 120px;
+
+    .recipients_content {
+      // display: inline-block;
+      // width: 64px;
+      // height: 150px;
+      margin-left: 32px;
+
+      .name_ava {
+        display: inline-block;
+        width: 120px;
+        // text-align: center;
+        margin-top: 5px;
+
+        .avatar {
+          display: inline-block;
+          width: 64px;
+          height: 64px;
+          line-height: 64px;
+          border-radius: 50%;
+          background-color: #2266ff;
+          color: #fff;
+          font-size: 28px;
+          vertical-align: middle;
+          text-align: center;
+          // margin-left: 8px;
+        }
+
+        .recipients_name {
+          // display: inline;
+          width: 100px;
+          height: 34px;
+          line-height: 34px;
+          // text-align: center;
+          // background-color: pink;
+          margin-top: 8px;
+        }
+      }
+    }
+
+    // .recipients_content:first-child {
+    //   margin-left: 0;
+    // }
+  }
+}
+
+.reject_agree {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 112px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+  z-index: 999;
+  background: #fff;
+
+  .reject {
+    background-color: #fff;
+    width: 50%;
+    color: red;
+  }
+
+  .agre {
+    height: 112px;
+    width: 50%;
+    background-color: #1365dd;
+    color: #fff;
+  }
 }
 </style>

From d97a11aeac71f65587bdd79bf5cfc7d3ee73dd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Wed, 15 Dec 2021 17:47:48 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E6=8B=92=E7=BB=9D?=
 =?UTF-8?q?=E5=90=8C=E6=84=8F=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppWorkonline/detail.vue | 40 ++++---------------------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/src/apps/AppWorkonline/detail.vue b/src/apps/AppWorkonline/detail.vue
index d32d3d34..2dc883f3 100644
--- a/src/apps/AppWorkonline/detail.vue
+++ b/src/apps/AppWorkonline/detail.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="detail" v-if="pageShow">
-    <!-- <div class="top" v-if="list.approvalStatus == 1">
+    <div class="top">
+      <!-- v-if="list.approvalStatus == 1" -->
       <p>审批通过:</p>
       <div class="save">
         <div style="display: inline">11已签署完成,</div>
-        <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image>
+        <!-- <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image> -->
       </div>
-    </div> -->
+    </div>
 
     <div class="form">
       <!-- 审批表单名称 -->
@@ -269,12 +270,6 @@
         </div>
       </div>
     </div>
-
-    <div class="reject_agree">
-      <!-- v-if="canApproval && list.approvalStatus == 0" -->
-      <div class="reject" @click="agree(0)">拒绝</div>
-      <div class="agre" @click="agree(1)">同意</div>
-    </div>
   </div>
 </template>
 
@@ -884,31 +879,4 @@ export default {
     // }
   }
 }
-
-.reject_agree {
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  line-height: 112px;
-  text-align: center;
-  border-top: 1px solid #ddd;
-  z-index: 999;
-  background: #fff;
-
-  .reject {
-    background-color: #fff;
-    width: 50%;
-    color: red;
-  }
-
-  .agre {
-    height: 112px;
-    width: 50%;
-    background-color: #1365dd;
-    color: #fff;
-  }
-}
 </style>

From 3619dd40cdd8d04453e4d1b594d7ba2321998954 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 15 Dec 2021 18:07:16 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E7=BD=91=E6=A0=BC=EF=BC=8C=E4=BB=A5?=
 =?UTF-8?q?=E6=88=BF=E6=89=BE=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppBuilding/AppBuilding.vue          |  45 ++
 src/apps/AppBuilding/components/add.vue       |  61 +++
 src/apps/AppBuilding/components/detail.vue    | 383 ++++++++++++++++++
 src/apps/AppBuilding/components/list.vue      | 128 ++++++
 .../AppGridManagement/AppGridManagement.vue   |  43 ++
 .../AppGridManagement/components/detail.vue   | 195 +++++++++
 6 files changed, 855 insertions(+)
 create mode 100644 src/apps/AppBuilding/AppBuilding.vue
 create mode 100644 src/apps/AppBuilding/components/add.vue
 create mode 100644 src/apps/AppBuilding/components/detail.vue
 create mode 100644 src/apps/AppBuilding/components/list.vue
 create mode 100644 src/apps/AppGridManagement/AppGridManagement.vue
 create mode 100644 src/apps/AppGridManagement/components/detail.vue

diff --git a/src/apps/AppBuilding/AppBuilding.vue b/src/apps/AppBuilding/AppBuilding.vue
new file mode 100644
index 00000000..b63dc905
--- /dev/null
+++ b/src/apps/AppBuilding/AppBuilding.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="AppBuilding">
+    <component
+        :is="component"
+        @change="onChange"
+        :params="params">
+    </component>
+  </div>
+</template>
+
+<script>
+import Detail from './components/detail'
+import Add from './components/add'
+import List from './components/list'
+
+export default {
+  name: 'AppBuilding',
+  appName: '以房找人',
+
+  data() {
+    return {
+      component: 'Add',
+      params: {}
+    }
+  },
+
+  components: { Detail, Add, List },
+
+  methods: {
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppBuilding{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppBuilding/components/add.vue b/src/apps/AppBuilding/components/add.vue
new file mode 100644
index 00000000..70c4f578
--- /dev/null
+++ b/src/apps/AppBuilding/components/add.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="add">
+    <div class="title">
+      <span class="tips"></span>房屋信息
+      <span class="select">选择人员</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+
+  },
+
+  methods: {
+
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  .title{
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    background: #FFF;
+    font-size: 32px;
+    font-weight: 500;
+    color: #262B36;
+    padding-right: 32px;
+    box-sizing: border-box;
+    overflow: hidden;
+    .tips{
+      display: inline-block;
+      width: 8px;
+      height: 32px;
+      background: #4E75FE;
+      box-shadow: 0px 8px 24px 2px #C9D8FA;
+      border-radius: 4px;
+      vertical-align: middle;
+      margin-right: 22px;
+    }
+    .select{
+      float: right;
+      font-size: 30px;
+      color: #1365DD;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppBuilding/components/detail.vue b/src/apps/AppBuilding/components/detail.vue
new file mode 100644
index 00000000..09b3655a
--- /dev/null
+++ b/src/apps/AppBuilding/components/detail.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="detail">
+    <AiTopFixed>
+      <div class="select-flex">
+        <span class="name">后西一街新世纪花园小区新城区1栋后西一街新世纪花园小区</span>
+        <span class="btn">切换</span>
+      </div>
+      <div class="line-bg"></div>
+      <div class="num-content">
+        <div class="num-item">
+          <div class="content">
+            <h2>6770</h2>
+            <p>实有户数</p>
+          </div>
+        </div>
+        <div class="num-item">
+          <div class="content">
+            <h2>677</h2>
+            <p>实有人口</p>
+          </div>
+        </div>
+        <div class="num-item">
+          <div class="content">
+            <h2>67</h2>
+            <p>流动人口</p>
+          </div>
+        </div>
+      </div>
+      <div class="line-bg"></div>
+    </AiTopFixed>
+    <div class="list-content">
+      <div class="left">
+        <div class="item">
+          <h2>101</h2>
+          <p>无人</p>
+        </div>
+        <div class="item">
+          <h2>101</h2>
+          <p>无人</p>
+        </div>
+        <div class="item">
+          <h2>101</h2>
+          <p>无人</p>
+        </div>
+        <div class="item">
+          <h2>101</h2>
+          <p>无人</p>
+        </div>
+      </div>
+      <div class="right">
+        <div class="item active">6-10&nbsp;层</div>
+        <div class="item">6-10&nbsp;层</div>
+        <div class="item">6-10&nbsp;层</div>
+        <div class="item">6-10&nbsp;层</div>
+        <div class="item">6-10&nbsp;层</div>
+      </div>
+    </div>
+    <u-popup v-model="show" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">新城区1栋102</div>
+        <div class="row-info">
+          <div class="row-item left">
+            <h3>102 ㎡</h3>
+            <p>房屋面积</p>
+          </div>
+          <div class="row-item center">
+            <span class="right-line"></span>
+            <span class="left-line"></span>
+            <h3>居住</h3>
+            <p>房屋用途</p>
+          </div>
+          <div class="row-item right">
+            <h3>出租</h3>
+            <p>居住现状</p>
+          </div>
+        </div>
+        <div class="row-info">
+          <div class="row-item left">
+            <h3>整租</h3>
+            <p>承租情况</p>
+          </div>
+          <div class="row-item center">
+            <span class="right-line"></span>
+            <span class="left-line"></span>
+            <h3>2021-11-01</h3>
+            <p>起租日期</p>
+          </div>
+          <div class="row-item right">
+            <h3>有</h3>
+            <p>租房备案证明</p>
+          </div>
+        </div>
+      </div>
+      <div class="line-bg"></div>
+      <div class="popup">
+        <div class="title pad-t32">房主信息</div>
+        <div class="info-flex">
+          <div class="item">
+            <span class="label">房主：</span>李维民
+          </div>
+          <div class="item">
+            <span class="label">联系方式：</span>13891067541
+          </div>
+        </div>
+        <div class="title pad-t32">承租人信息</div>
+        <div class="info-flex">
+          <div class="item">
+            <span class="label">房主：</span>李维民
+          </div>
+          <div class="item">
+            <span class="label">联系方式：</span>13891067541
+          </div>
+        </div>
+      </div>
+      <div class="line-bg"></div>
+      <div class="popup">
+        <div class="title pad-t32">实际居住人员</div>
+        <div class="info-flex">
+          <div class="item">
+            <span class="label">居住人：</span>李维民
+          </div>
+          <div class="item">
+            <span class="label">联系方式：</span>13891067541
+          </div>
+        </div>
+        <div class="info-flex mar-t48">
+          <div class="item">
+            <span class="label">与户主关系：</span>兄弟
+          </div>
+        </div>
+      </div>
+      <div class="pop-btn">编辑修改</div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+
+  },
+
+  methods: {
+
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  .select-flex{
+    padding: 20px 40px 40px;
+    box-sizing: border-box;
+    line-height: 50px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    .name{
+      width: 560px;
+      word-break: break-all;
+      font-size: 36px;
+      font-weight: 800;
+      color: #333;
+    }
+    .btn{
+      width: 70px;
+      color: #1365DD;
+      font-size: 30px;
+    }
+  }
+  .num-content{
+    width: 100%;
+    padding: 0 0 18px 40px;
+    background-color: #fff;
+    box-sizing: border-box;
+    display: flex;
+    .num-item{
+      flex: 1;
+      .content{
+        width: 120px;
+        text-align: center;
+      }
+      h2{
+        font-size: 36px;
+        font-weight: bold;
+        color: #333;
+        line-height: 42px;
+        padding-top: 46px;
+      }
+      p{
+        font-size: 26px;
+        color: #666;
+        line-height: 36px;
+      }
+    }
+  }
+  .line-bg{
+    width: 100%;
+    height: 8px;
+    background: #F1F6F9;
+  }
+  .list-content{
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 48px 2px 0 32px;
+    box-sizing: border-box;
+    .left{
+      width: 560px;
+      overflow: hidden;
+      .item{
+        width: 264px;
+        height: 158px;
+        background: #FAFBFF;
+        border-radius: 1px;
+        border: 1px solid #E7E7E7;
+        box-sizing: border-box;
+        text-align: center;
+        font-weight: bold;
+        margin: 0 32px 32px 0;
+        float: left;
+        h2{
+          font-size: 38px;
+          color: #5088FF;
+          line-height: 44px;
+          margin: 14px 0 26px 0;
+        }
+        p{
+          font-size: 32px;
+          color: #333;
+          line-height: 44px;
+        }
+      }
+      .item:nth-of-type(2n) {
+        margin-right: 0;
+      }
+    }
+    .right{
+      .item{
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        padding: 0 8px;
+        background: #FAFBFF;
+        border-radius: 4px;
+        border: 1px solid #E7E7E7;
+        box-sizing: border-box;
+        font-size: 30px;
+        font-family: DINAlternate-Bold, DINAlternate;
+        color: #787878;
+        letter-spacing: -1px;
+        margin-bottom: 24px;
+      }
+      .active{
+        background: #5088FF;
+        border-radius: 2px;
+        border: 1px solid #E7E7E7;
+        color: #fff;
+      }
+    }
+  }
+  .popup{
+    padding-left: 32px;
+    .bg{
+      width: 64px;
+      height: 10px;
+      background: #CCC;
+      border-radius: 6px;
+      margin: 32px 0 32px 344px;
+    }
+    .title{
+      font-size: 36px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 40px;
+    }
+    .row-info{
+      margin-bottom: 32px;
+      .row-item{
+        display: inline-block;
+        width: 33%;
+        h3{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #4E75FE;
+          line-height: 64px;
+        }
+        p{
+          font-size: 28px;
+          color: #666;
+          line-height: 42px;
+        }
+      }
+      .left{
+        width: calc(28% - 70px);
+        text-align: center;
+        margin-right: 70px;
+        box-sizing: border-box;
+      }
+      .center{
+        width: 36%;
+        text-align: center;
+        box-sizing: border-box;
+        position: relative;
+        .left-line{
+          position: absolute;
+          top: 20px;
+          left: 0;
+          height: 64px;
+          border-left: 1px solid #E5E5E5;
+        }
+        .right-line{
+          position: absolute;
+          top: 20px;
+          right: 0;
+          height: 64px;
+          border-left: 1px solid #E5E5E5;
+        }
+      }
+      .right{
+        width: calc(33% - 40px);
+        text-align: center;
+        margin-left: 40px;
+        box-sizing: border-box;
+      }
+    }
+    .info-flex{
+      display: flex;
+      margin-bottom: 24px;
+      padding-right: 70px;
+      box-sizing: border-box;
+      .item{
+        flex: 1;
+        font-size: 28px;
+        color: #333;
+        line-height: 30px;
+        .label{
+          color: #999;
+        }
+      }
+    }
+  }
+  .line-bg{
+    width: 100%;
+    height: 30px;
+    background: #F5F6FA;
+  }
+  .pad-t32{
+    padding-top: 32px;
+  }
+  .mar-t48{
+    margin-top: 48px;
+  }
+  .pop-btn{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #FFF;
+    background: #1365DD;
+  }
+}
+
+::v-deep .content{
+  padding: 0!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppBuilding/components/list.vue b/src/apps/AppBuilding/components/list.vue
new file mode 100644
index 00000000..1704a9c5
--- /dev/null
+++ b/src/apps/AppBuilding/components/list.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="list">
+    <AiTopFixed>
+      <u-search placeholder="楼栋名称" :show-action="false" v-model="search.title" @search="current=1,getList()"/>
+    </AiTopFixed>
+    <div class="list-content">
+      <div class="item">
+        <div class="item-content">
+          <p class="title line-two">水果湖水岸华府小区水果湖水岸华府小区水果湖水岸华府小区水果湖水岸华府小区</p>
+          <p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天城广场新区</p>
+          <span class="status color0">已定位</span>
+        </div>
+        <div class="item-btn">
+          <span>去定位</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      search: {
+        title: ''
+      },
+      current: 1
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    
+  },
+
+  methods: {
+    getList() {
+
+    }
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+ .list-content{
+   padding: 32px 32px 0;
+    .item{
+      width: 686px;
+      background: #FFF;
+      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+      border-radius: 8px;
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 32px;
+      .item-content{
+        padding: 32px 32px 42px 32px;
+      }
+      .title{
+        width: 540px;
+        word-break: break-all;
+        font-size: 32px;
+        color: #333;
+        line-height: 44px;
+      }
+      .address{
+        width: 100%;
+        word-break: break-all;
+        font-size: 28px;
+        color: #999;
+        line-height: 40px;
+      }
+      .status{
+        width: 160rpx;
+        height: 40rpx;
+        line-height: 36rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        position: absolute;
+        right: -38rpx;
+        top: 24rpx;
+        -webkit-transform: rotate(90deg);
+        transform: rotate(45deg);
+        text-align: center;
+      }
+      .color0{
+        background: #FFECEF;
+        color: #f46;
+      }
+      .color1{
+        background: #EEF5FF;
+        color: #5A98F2;
+      }
+      .item-btn{
+        width: 100%;
+        padding: 20px 32px 20px 0;
+        border-top: 1px solid #eee;
+        text-align: right;
+        box-sizing: border-box;
+        span{
+          display: inline-block;
+          width: 160px;
+          height: 56px;
+          line-height: 56px;
+          text-align: center;
+          border-radius: 28px;
+          border: 1px solid #1365DD;
+          font-size: 28px;
+          color: #1365DD;
+        }
+      }
+    }
+    .line-two{
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppGridManagement/AppGridManagement.vue b/src/apps/AppGridManagement/AppGridManagement.vue
new file mode 100644
index 00000000..b95bcd38
--- /dev/null
+++ b/src/apps/AppGridManagement/AppGridManagement.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="AppGridManagement">
+    <component
+        :is="component"
+        @change="onChange"
+        :params="params">
+    </component>
+  </div>
+</template>
+
+<script>
+import Detail from './components/detail'
+
+export default {
+  name: 'AppGridManagement',
+  appName: '网格管理',
+
+  data() {
+    return {
+      component: 'Detail',
+      params: {}
+    }
+  },
+
+  components: { Detail },
+
+  methods: {
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppGridManagement{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppGridManagement/components/detail.vue b/src/apps/AppGridManagement/components/detail.vue
new file mode 100644
index 00000000..069b801f
--- /dev/null
+++ b/src/apps/AppGridManagement/components/detail.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="detail">
+    <div class="grid-select" @click="show=true">
+      <span class="label">网格选择</span>
+      <div class="value">
+        <span>新里程社区居委会</span>
+        <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+      </div>
+    </div>
+    <div class="map-content">
+      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
+    </div>
+    <u-popup v-model="show" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">恒大城西社区居委会</div>
+        <div class="info-flex">
+          <span class="label">网格类型</span>
+          <span class="value">基础网格</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格层级</span>
+          <span class="value">村/社区</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格管理员</span>
+          <span class="value">林珊珊&nbsp;&nbsp;13782951281
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
+          </span>
+        </div>
+      </div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      areaId: '',
+      ops: {},
+      lib: '',
+      map: null,
+      markerArr: [],
+      show: false
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.areaId = this.user.areaId
+    this.initMap()
+  },
+
+  methods: {
+    initMap() {
+      //初始化地图
+      
+      this.$nextTick(() =>{
+        let {lib: TMap, map} = this
+        var center = new TMap.LatLng(40.040422, 116.273521)
+        var marker = null;
+        var points = []
+        map.setCenter(center)
+        map.setZoom(18)
+
+        marker = new TMap.MultiMarker({
+          id: 'marker-layer', // 图层id
+          map: map,
+          styles: {
+            // 点标注的相关样式
+            marker: new TMap.MarkerStyle({
+              width: 25,
+              height: 35,
+              anchor: { x: 16, y: 32 },
+              src:'',
+            }),
+          },
+          geometries: [
+            {
+              // 点标注数据数组
+              id: 'demo',
+              styleId: 'marker',
+              position: new TMap.LatLng(40.040422, 116.273521),
+            },
+          ],
+        });
+
+        var infoWindow = null;
+        var infoWindow2 = null
+        var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
+          +`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
+        
+        infoWindow = new TMap.InfoWindow(
+          {
+          map: map,
+          enableCustom: true,
+          position: new TMap.LatLng(40.040422, 116.273521),
+          offset: { y: -70, x: -5 },
+          content: html
+          },
+        );
+
+        infoWindow2 = new TMap.InfoWindow(
+          {
+          map: map,
+          enableCustom: true,
+          position: new TMap.LatLng(40.03592, 116.27058),
+          offset: { y: -70, x: -5 },
+          content: html
+          },
+        );
+      })
+      
+    },
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.detail {
+  height: 100%;
+  .grid-select{
+    width: 100%;
+    padding: 34px 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+    line-height: 44px;
+    color: #333;
+    .label{
+      display: inline-block;
+      width: 140px;
+      font-size: 32px;
+    }
+    .value{
+      font-size: 28px;
+      .u-icon{
+        margin-left: 8px;
+      }
+    }
+  }
+  .map-content{
+    width: 100%;
+    height: calc(100% - 112px);
+  }
+  .popup{
+    padding: 0 32px 16px;
+    .bg{
+      width: 64px;
+      height: 10px;
+      background: #CCC;
+      border-radius: 6px;
+      margin: 32px 0 32px 344px;
+    }
+    .title{
+      font-size: 36px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 24px;
+    }
+    .info-flex{
+      padding: 26px 0 30px 0;
+      width: 100%;
+      border-bottom: 1px solid #D8DDE6;
+      line-height: 40px;
+      font-size: 28px;
+      .label{
+        display: inline-block;
+        width: 160px;
+        font-weight: 800;
+        color: #333;
+      }
+      .value{
+        color: #666;
+        font-size: 26px;
+        .phone-icon{
+          width: 40px;
+          height: 40px;
+          vertical-align: sub;
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

From d57e6230429088a8af02dfd52b85ef48d3fb99b1 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 15 Dec 2021 18:26:33 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BB=A5=E6=88=BF=E6=89=BE=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppBuilding/components/add.vue | 158 ++++++++++++++++++++++++
 1 file changed, 158 insertions(+)

diff --git a/src/apps/AppBuilding/components/add.vue b/src/apps/AppBuilding/components/add.vue
index 70c4f578..33abe159 100644
--- a/src/apps/AppBuilding/components/add.vue
+++ b/src/apps/AppBuilding/components/add.vue
@@ -4,6 +4,116 @@
       <span class="tips"></span>房屋信息
       <span class="select">选择人员</span>
     </div>
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label">房屋面积</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">居住现状</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">房屋用途</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">承租情况</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">起租日期</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">租房备案证明</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"></div>
+    <div class="title">
+      <span class="tips"></span>房主信息
+      <span class="select">选择人员</span>
+    </div>
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label">林珊珊</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">李益民</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"></div>
+    <div class="title">
+      <span class="tips"></span>承租人信息
+      <span class="select">选择人员</span>
+    </div>
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label">林珊珊</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">李益民</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+    </div>
+    <div class="line-bg"></div>
+    <div class="title">
+      <span class="tips"></span>实际居住人员
+      <span class="select">选择人员</span>
+    </div>
+    <div class="pad-l32">
+      <div class="item">
+        <span class="label">林珊珊</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label">李益民</span>
+        <div class="value">
+          <span class="color-999">请选择</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn">保存</div>
+    </div>
   </div>
 </template>
 
@@ -30,6 +140,7 @@ export default {
 
 <style lang="scss" scoped>
 .add {
+  padding-bottom: 112px;
   .title{
     width: 100%;
     height: 96px;
@@ -57,5 +168,52 @@ export default {
       color: #1365DD;
     }
   }
+  .item{
+    width: 100%;
+    padding: 34px 32px 34px 0;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 44px;
+    box-sizing: border-box;
+    .color-999{
+      color: #999;
+    }
+    .value{
+      .u-icon{
+        margin-left: 16px;
+      }
+    }
+  }
+  .footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  .btn{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+  .line-bg{
+    width: 100%;
+    height: 16px;
+    background: #F5F5F5;
+  }
+  .pad-l32{
+    padding-left: 32px;
+    background-color: #fff;
+  }
 }
 </style>
\ No newline at end of file

From a8cf508bd42a4ef42c33c4f35b5452f8837787d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Wed, 15 Dec 2021 18:37:15 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E5=8A=9E=E4=BA=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppWalkask/AppWalkask.vue       |   82 +-
 src/apps/AppWorkonline/AppWorkonline.vue |  116 +-
 src/apps/AppWorkonline/detail.vue        | 1953 ++++++++++++++--------
 3 files changed, 1350 insertions(+), 801 deletions(-)

diff --git a/src/apps/AppWalkask/AppWalkask.vue b/src/apps/AppWalkask/AppWalkask.vue
index 868f94d7..15b82033 100644
--- a/src/apps/AppWalkask/AppWalkask.vue
+++ b/src/apps/AppWalkask/AppWalkask.vue
@@ -2,23 +2,19 @@
   <div class="AppWalkask">
     <template v-if="isList">
       <div class="header-top">
-        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
-                inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
       </div>
 
       <div class="header-middle">
         <div class="currentLeft" v-if="currentTabs == 0">
           <div class="currentLeft-top">
             <div class="left">
-              <img src="./components/images/icon2.png" alt=""/>
+              <img src="./components/images/icon2.png" alt="" />
 
-              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
-                            style="color: #fff"></AiAreaPicker>
+              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
             </div>
 
-            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
-                      search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
-                      @clear="handerClear"></u-search>
+            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
           </div>
 
           <template v-if="data.length > 0">
@@ -33,8 +29,7 @@
                 <div class="cards-hint">{{ item.description }}</div>
 
                 <div class="imgs">
-                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
-                       @click.stop="previewImage(item.images, items.url)"/>
+                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
                 </div>
 
                 <div class="cards-bottom">
@@ -60,15 +55,12 @@
         <div class="currentRight" v-if="currentTabs == 1">
           <div class="currentLeft-top">
             <div class="left">
-              <img src="./components/images/icon2.png" alt=""/>
+              <img src="./components/images/icon2.png" alt="" />
 
-              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
-                            style="color: #fff"></AiAreaPicker>
+              <AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
             </div>
 
-            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
-                      search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
-                      @clear="handerClear"></u-search>
+            <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
           </div>
 
           <template v-if="data.length > 0">
@@ -83,8 +75,7 @@
                 <div class="cards-hint">{{ item.description }}</div>
 
                 <div class="imgs">
-                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
-                       @click.stop="previewImage(item.images, items.url)"/>
+                  <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
                 </div>
 
                 <div class="cards-bottom">
@@ -108,11 +99,10 @@
         </div>
       </div>
 
-      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true"
-               :show-title="false" @confirm="delet"></u-modal>
+      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
 
       <AiFixedBtn>
-        <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()"/>
+        <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()" />
       </AiFixedBtn>
     </template>
 
@@ -121,7 +111,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import add from './add.vue'
 import detail from './detail.vue'
 
@@ -157,38 +147,38 @@ export default {
       deletId: '',
     }
   },
-  computed: {...mapState(['user'])},
+  computed: { ...mapState(['user']) },
   created() {
     this.areaId = this.user.areaId
     this.getList()
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     getList() {
       this.$http
-      .post('/app/appvisitvondolence/list', null, {
-        params: {
-          size: 6,
-          current: this.current,
-          areaId: this.areaId,
-          createUserId: this.currentTabs == 1 ? this.user.id : '',
-          title: this.keyword,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
-          this.data = res.data.records
-          if (this.data) {
-            this.data.map((item) => {
-              if (item.images) {
-                item.images = JSON.parse(item.images || '[]')
-              }
-              return item
-            })
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            areaId: this.areaId,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+            title: this.keyword,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+
+            if (this.data) {
+              this.data.map((item) => {
+                if (item.images) {
+                  item.images = JSON.parse(item.images || '[]')
+                }
+                return item
+              })
+            }
           }
-        }
-      })
+        })
     },
 
     areaSelect(e) {
diff --git a/src/apps/AppWorkonline/AppWorkonline.vue b/src/apps/AppWorkonline/AppWorkonline.vue
index bd2c9a21..fb13375c 100644
--- a/src/apps/AppWorkonline/AppWorkonline.vue
+++ b/src/apps/AppWorkonline/AppWorkonline.vue
@@ -4,42 +4,61 @@
       <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
     </div>
 
-    <template v-if="datas.length == 0">
-      <u-card v-for="(item, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
+    <u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>
+
+    <template v-if="datas.length > 0">
+      <u-card v-for="(item, index) in datas" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
         <view class="body" slot="body">
+          <!-- 审批名称 -->
           <view class="u-body-item">
-            <div class="title">基本养老保险灵活就业人员新参保业务</div>
+            <div class="title">{{ item.processName }}</div>
           </view>
 
           <view class="u-body-item">
             <div class="plan">
               <span>审批进度：</span>
-              <span>审批中</span>
+
+              <span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
+
+              <!-- end -->
+              <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
+
+              <!-- false -->
+              <span class="business_status_gray" v-if="item.approvalStatus == 2">
+                {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
+              </span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="modetpye">
               <span>申请类型：</span>
-              <span>社会保障</span>
+              <span>{{ item.classificationName }}</span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="applytime">
               <span>申请日期：</span>
-              <span class="timeContent">2021-01-21 14:30</span>
+              <span class="timeContent">{{ item.createTime }}</span>
             </div>
           </view>
 
           <view class="u-body-item">
             <div class="overtime">
               <span>完成日期：</span>
-              <span class="timeContent">2021-01-21 14:30</span>
+              <span class="timeContent">{{ item.overTime }}</span>
             </div>
           </view>
 
-          <img src="../AppWorkonline/components/end.png" alt="" />
+          <span class="icon">
+            <!-- ing -->
+            <img src="./components/ing.png" alt="" v-if="item.approvalStatus == 0" />
+            <!-- end -->
+            <img src="./components/end.png" alt="" v-if="item.approvalStatus == 1" />
+            <!-- false -->
+            <img src="./components/reject.png" alt="" v-if="item.approvalStatus == 2" />
+          </span>
         </view>
       </u-card>
 
@@ -52,43 +71,75 @@
 
 <script>
 export default {
-  name: 'workonline',
+  name: 'WorkOnline',
   appName: '网上办事',
+  // 组件
   components: {},
   props: {},
   data() {
     return {
-      datas: [],
+      list: [
+        { name: '待我审批', type: 0 },
+        { name: '我已审批', type: 1 },
+        { name: '抄送我的', type: 3 },
+        { name: '超时督办', type: 4 },
+      ],
+      currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
       keyword: '',
+      datas: {},
+      listType: 0,
+      current: 1,
     }
   },
+  // 计算
   computed: {},
+  // 监听
   watch: {},
+  // 实例创建后
   created() {
-    this.$dict.load('').then(() => {
+    // 字典
+    this.$dict.load('listApprovalStatusHb').then(() => {
+      this.dictList = this.$dict.getDict('listApprovalStatusHb')
       this.getList()
     })
   },
+  // 实例渲染后
   mounted() {},
+  // 方法
   methods: {
-    getList() {},
+    getList() {
+      this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}&current=${this.current}&param=${this.keyword}`).then((res) => {
+        if (res?.code == 0) {
+          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+        }
+      })
+    },
 
-    goDetail(item, indexs) {
-      console.log(item, indexs)
-      var id = '11'
-      uni.navigateTo({ url: `./detail?id=${id}` })
+    // 跳转页面的id
+    goDetail(item) {
+      console.log(1)
+      uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
+    },
+
+    change(index) {
+      this.currentType = index
+      this.listType = this.list[index].type
+      this.getListInit()
+    },
+
+    getListInit() {
+      this.current = 1
+      this.getList()
     },
 
     search(e) {
       this.keyword = e
-      this.current = 1
-      this.getList()
+      this.getListInit()
     },
 
     clearSearch() {
       this.keyword = ''
-      this.current = 1
-      this.getList()
+      this.getListInit()
     },
   },
 }
@@ -96,10 +147,9 @@ export default {
 
 <style scoped lang="scss">
 .workonline {
-  height: 100%;
   .search {
-    background-color: #fff;
     .serach_content {
+      background-color: #fff;
       height: 104px;
       line-height: 104px;
       box-sizing: border-box;
@@ -139,27 +189,5 @@ export default {
       }
     }
   }
-
-  .card {
-    margin: 32px 32px 0 32px;
-    padding: 30px 0 40px 30px;
-    background: #fff;
-    .title {
-      font-size: 32px;
-      font-weight: 500;
-      margin-bottom: 16px;
-    }
-    .plan,
-    .modetpye,
-    .applytime,
-    .overtime {
-      margin-top: 16px;
-      font-size: 30px;
-      color: #999999;
-      .timeContent {
-        color: #343d65;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/apps/AppWorkonline/detail.vue b/src/apps/AppWorkonline/detail.vue
index 2dc883f3..1b45a057 100644
--- a/src/apps/AppWorkonline/detail.vue
+++ b/src/apps/AppWorkonline/detail.vue
@@ -1,299 +1,274 @@
 <template>
   <div class="detail" v-if="pageShow">
-    <div class="top">
-      <!-- v-if="list.approvalStatus == 1" -->
-      <p>审批通过:</p>
-      <div class="save">
-        <div style="display: inline">11已签署完成,</div>
-        <!-- <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image> -->
+    <div :class="list.approvalStatus == 1 ? 'detail_content' : 'detail_content1'">
+      <!-- 顶部文件预览和查看 -->
+      <div class="top" v-if="list.approvalStatus == 1">
+        <p>审批通过:</p>
+        <div class="save">
+          <div style="display: inline">[{{ this.list.tableInfo.tableName }}]已签署完成,</div>
+          <ai-image preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </ai-image>
+        </div>
       </div>
-    </div>
 
-    <div class="form">
-      <!-- 审批表单名称 -->
-      <text class="text">
-        审批表单名称
-        <!-- {{ list.processDefName }} -->
-      </text>
+      <div class="form">
+        <!-- 审批表单名称 -->
+        <text class="text">{{ list.processDefName }}</text>
 
-      <div class="people">
-        <!-- 左 -->
-        <div class="people_msg">
-          <!-- 圆形头像 -->
-          <div class="avatar">
-            <span>李伟民</span>
-            <!-- <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
-            <span v-else> {{ $formatName(list.createUserName) }}</span> -->
+        <div class="people">
+          <!-- 左 -->
+          <div class="people_msg">
+            <!-- 圆形头像 -->
+            <div class="avatar">
+              <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+              <span v-else> {{ $formatName(list.createUserName) }}</span>
+            </div>
+
+            <text class="name">
+              <!-- 姓名 -->
+              <p class="name_con">{{ list.createUserName }}</p>
+              <!-- 日期 -->
+              <p class="name_createtime">{{ list.createTime }}</p>
+            </text>
           </div>
 
-          <text class="name">
-            <!-- 姓名 -->
-            <p class="name_con">
-              李伟民
-              <!-- {{ list.createUserName }} -->
-            </p>
-            <!-- 日期 -->
-            <p class="name_createtime">
-              2021
-              <!-- {{ list.createTime }} -->
-            </p>
-          </text>
+          <!-- 右 -->
+          <!-- 审批状态 -->
+          <!-- 审批中 -->
+          <div class="people_status_ing" v-if="list.approvalStatus == 0">
+            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+          </div>
+
+          <!-- 已通过 -->
+          <div class="people_status_agree" v-if="list.approvalStatus == 1">
+            <img src="./components/people_status_agree.png" alt="" />
+          </div>
+
+          <!-- 被驳回 -->
+          <div class="people_status_reject" v-if="list.approvalStatus == 2">
+            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+          </div>
         </div>
 
-        <!-- 右 -->
-        <!-- 审批状态 -->
-        <!-- 审批中 -->
-        <div class="people_status_ing">
-          <!-- v-if="list.approvalStatus == 0" -->
-          <!-- {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }} -->
-        </div>
+        <!-- 表头内容 -->
+        <div class="content">
+          <div class="item">
+            <span class="item_info">所属类型：</span>
+            <span class="zhuf"> {{ list.classificationName }}</span>
+          </div>
 
-        <!-- 已通过 -->
-        <div class="people_status_agree">
-          <!-- v-if="list.approvalStatus == 1" -->
-          <img src="./components/people_status_agree.png" alt="" />
-        </div>
+          <div class="item">
+            <span class="item_info">所属部门：</span>
+            <span class="liangzhu">
+              {{ $dict.getLabel('hbDepartment', list.department) }}
+            </span>
+          </div>
 
-        <!-- 被驳回 -->
-        <!-- <div class="people_status_reject" v-if="list.approvalStatus == 2">
-          {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
-        </div> -->
-      </div>
+          <div class="item">
+            <span class="item_info">审批编号：</span>
+            <span class="liangzhu">{{ list.serialNumber }}</span>
+          </div>
 
-      <!-- 表头内容 -->
-      <div class="content">
-        <div class="item">
-          <span class="item_info">所属类型：</span>
-          <span class="zhuf">
-            classificationName
-            <!-- {{ list.classificationName }} -->
-          </span>
-        </div>
-
-        <div class="item">
-          <span class="item_info">所属部门：</span>
-          <span class="liangzhu">
-            department
-            <!-- {{ $dict.getLabel('hbDepartment', list.department) }} -->
-          </span>
-        </div>
-
-        <div class="item">
-          <span class="item_info">审批编号：</span>
-          <span class="liangzhu">
-            serialNumber
-            <!-- {{ list.serialNumber }} -->
-          </span>
-        </div>
-
-        <div class="item">
-          <div class="item_info">
-            <span class="annexs">附件资料：</span>
-
-            <!-- v-for="(item, indexs) in list.annexs" :key="indexs" -->
-            <div class="img_text">
-              img_text
-              <!-- <ai-image :src="item.annexFile.url" preview />
-              <span class="text">{{ item.annexName }}</span> -->
+          <div class="item">
+            <div class="item_info">
+              <span class="annexs">附件资料：</span>
+              <div class="img_text" v-for="(item, indexs) in list.annexs" :key="indexs">
+                <ai-image :src="item.annexFile.url" preview />
+                <span class="text">{{ item.annexName }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- tabs栏 -->
-    <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
+      <!-- tabs栏 -->
+      <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
 
-    <!-- 表单申请的折叠窗 -->
-    <div style="background-color: #fff">
-      <div v-if="current == 0" class="collapse">
-        <!-- <u-collapse event-type="close" :arrow="true" :accordion="true">
-          <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
-            <div v-for="(items, indexs) in item" :key="indexs">
-              <div class="item_msg">
-                <span class="msg_lef">{{ items.fieldName }}</span>
-
-                <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
-                <span class="msg_lright" v-else>
-                  <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
-                    >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
-                    <span v-if="indexL < items.fieldValue.length - 1">,</span>
+      <!-- 表单申请的折叠窗 -->
+      <div style="background-color: #fff">
+        <div v-if="current == 0" class="collapse">
+          <u-collapse event-type="close" :arrow="true" :accordion="true">
+            <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
+              <div v-for="(items, indexs) in item" :key="indexs">
+                <div class="item_msg">
+                  <!-- 左 -->
+                  <span class="msg_lef">{{ items.fieldName }}</span>
+                  <!-- 右 -->
+                  <!-- 字典值 items.dictionaryCode -->
+                  <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
+                  <span class="msg_lright" v-else>
+                    <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
+                      >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
+                      <span v-if="indexL < items.fieldValue.length - 1">,</span>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
-            </div>
-          </u-collapse-item>
-        </u-collapse> -->
+            </u-collapse-item>
+          </u-collapse>
+        </div>
       </div>
-    </div>
 
-    <!-- 流程信息 -->
-    <div v-if="current == 1" class="workflow">
-      <!-- 第一步发起 -->
+      <!-- 流程信息 -->
+      <div v-if="current == 1" class="workflow">
+        <!-- 第一步发起 -->
 
-      <!-- v-if="item.nodeType == 3" -->
-      <div class="step-list">
-        <!-- <div class="step-item" v-for="(item, index) in stepList" :key="index"> -->
-        <div class="step-item" v-for="(item, index) in 3" :key="index">
-          <div class="item-left">
-            <div class="item-left-ava-icon">
-              <div class="avatar" v-if="item.userName">
-                <span>userName</span>
-                <!-- <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
-                <span v-else> {{ $formatName(item.userName) }}</span> -->
-              </div>
+        <!-- v-if="item.nodeType == 3" -->
+        <div class="step-list">
+          <div class="step-item" v-for="(item, index) in stepList" :key="index">
+            <div class="item-left">
+              <!-- 头像+图标 -->
+              <div class="item-left-ava-icon">
+                <!-- 头像 -->
+                <div class="avatar" v-if="item.userName">
+                  <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+                  <span v-else> {{ $formatName(item.userName) }}</span>
+                </div>
 
-              <!-- <div class="avatar" v-else-if="item.title == '抄送'">
-                <img src="./components/Profile_Picture.png" alt="" />
-              </div> -->
+                <div class="avatar" v-else-if="item.title == '抄送'">
+                  <img src="./components/Profile_Picture.png" alt="" />
+                </div>
 
-              <div class="avatar" v-else>
-                <span>candidates</span>
-                <!-- <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div> -->
-              </div>
+                <div class="avatar" v-else>
+                  <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div>
+                </div>
 
-              <!-- <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
-                <img src="./components/agree.png" alt="" />
-              </div>
+                <!-- 图标 发起 抄送和审批通过图标 -->
+                <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                  <img src="./components/agree.png" alt="" />
+                </div>
 
-              <div class="" v-else-if="item.stepType == 2"></div>
+                <!-- 审批拒绝图标 -->
+                <div class="" v-else-if="item.stepType == 2"></div>
 
-              <div class="icon-no" v-else>
-                <img src="./components/clearn.png" />
-              </div> -->
-            </div>
-
-            <!-- <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div> -->
-          </div>
-
-          <div class="item-right">
-            <div class="time-info">
-              <div>
-                title
-                <!-- {{ item.title }} -->
-              </div>
-              <span>
-                approvalTime
-                <!-- {{ item.approvalTime }} -->
-              </span>
-            </div>
-            <div class="item-right-flex">
-              <!-- 1人或签 -->
-              <span class="title2">
-                title2
-                <!-- {{ item.title2 }} -->
-              </span>
-
-              <!-- 审批中 -->
-              <span class="title2Desc-ing">
-                <!-- v-if="item.stepType == 9" -->
-                title2Desc
-                <!-- {{ item.title2Desc }} -->
-              </span>
-
-              <!--已拒绝   -->
-              <!-- <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span> -->
-
-              <!-- 审批通过 -->
-              <!-- <span class="title2Desc" v-else>
-                {{ item.title2Desc }}
-              </span> -->
-
-              <!-- 抄送人/抄送人头像 -->
-              <div class="user-list">
-                <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
-                  <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
-                  <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
+                <div class="icon-no" v-else>
+                  <img src="./components/clearn.png" />
                 </div>
               </div>
 
-              <!-- 意见 -->
-              <div v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
-                <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
-                <span>{{ item2.fieldValue }}</span>
+              <!-- 线条 -->
+              <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div>
+            </div>
+            <div class="item-right">
+              <div class="time-info">
+                <div>{{ item.title }}</div>
+                <span>{{ item.approvalTime }}</span>
               </div>
+              <div class="item-right-flex">
+                <!-- 1人或签 -->
+                <span class="title2">{{ item.title2 }}</span>
 
-              <!-- <div v-for="(item4, index4) in this.stepList" :key="inde4">
+                <!-- 审批中 -->
+                <span class="title2Desc-ing" v-if="item.stepType == 9">{{ item.title2Desc }}</span>
+
+                <!--已拒绝   -->
+                <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span>
+
+                <!-- 审批通过 -->
+                <span class="title2Desc" v-else>{{ item.title2Desc }}</span>
+
+                <!-- 抄送人/抄送人头像 -->
+                <div class="user-list">
+                  <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
+                    <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
+                    <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
+                  </div>
+                </div>
+
+                <!-- 意见 -->
+                <div v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
+                  <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                  <span>{{ item2.fieldValue }}</span>
+                </div>
+
+                <!-- <div v-for="(item4, index4) in this.stepList" :key="inde4">
                     <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
                     <span>{{ item4.fieldValue }}</span>
                 </div> -->
 
-              <span v-if="item.stepType == 2">
-                <span>审批意见:</span>
-                <span>意见111</span>
-                <!-- {{ item.opinion }} -->
-              </span>
+                <span v-if="item.stepType == 2">审批意见:{{ item.opinion }}</span>
 
-              <div class="examine" v-if="item.stepType == 2">
-                <div class="examine_docx1">
-                  <!-- 图片 -->
-                  <!-- <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
-                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
-                  </div> -->
-
-                  <!-- 附件资料 -->
-                  <!-- <div v-if="item.annexFiles && item.annexFiles.length > 0">
-                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
-                      <ai-image :file="annex" preview>
-                        <u-row justify="space-between">
-                          <span class="docx-name">{{ annex.name }}</span>
-                          <span>{{ annex.fileSizeStr }}</span>
-                        </u-row>
-                      </ai-image>
+                <div class="examine" v-if="item.stepType == 2">
+                  <div class="examine_docx1">
+                    <!-- 图片 -->
+                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                      <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
                     </div>
-                  </div> -->
+
+                    <!-- 附件资料 -->
+                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                        <ai-image :file="annex" preview>
+                          <u-row justify="space-between">
+                            <span class="docx-name">{{ annex.name }}</span>
+                            <span>{{ annex.fileSizeStr }}</span>
+                          </u-row>
+                        </ai-image>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 附件资料 -->
+                <!-- v-if="item.stepType == 8" -->
+                <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                  <div class="examine_docx1">
+                    <!-- 图片 -->
+                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                      <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
+                    </div>
+
+                    <!-- 附件资料 -->
+                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                        <ai-image :file="annex" preview>
+                          <u-row justify="space-between">
+                            <span class="docx-name">{{ annex.name }}</span>
+                            <span>{{ annex.fileSizeStr }}</span>
+                          </u-row>
+                        </ai-image>
+                      </div>
+                    </div>
+
+                    <!--  -->
+                  </div>
                 </div>
               </div>
-
-              <!-- 附件资料 -->
-              <!-- v-if="item.stepType == 8" -->
-              <!-- <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
-                <div class="examine_docx1">
-                  <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
-                    <ai-image preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
-                  </div>
-
-                  <div v-if="item.annexFiles && item.annexFiles.length > 0">
-                    <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
-                      <ai-image :file="annex" preview>
-                        <u-row justify="space-between">
-                          <span class="docx-name">{{ annex.name }}</span>
-                          <span>{{ annex.fileSizeStr }}</span>
-                        </u-row>
-                      </ai-image>
-                    </div>
-                  </div>
-                </div>
-              </div> -->
             </div>
           </div>
         </div>
       </div>
     </div>
+    <!-- 底部按钮v-if="canApproval &&list.approvalStatus ==0 "-->
+    <div class="reject_agree" v-if="canApproval && list.approvalStatus == 0">
+      <div class="reject" @click="agree(0)">拒绝</div>
+      <div class="agree" @click="agree(1)">同意</div>
+    </div>
+
+    <back />
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import back from '../../components/AiBack'
+import AiImage from '../../components/AiImage'
+import { mapActions } from 'vuex'
 
 export default {
-  name: 'detail',
-  components: {},
+  name: 'workonlineDetail',
+  components: { AiImage, back },
   computed: {
-    ...mapState(['user']),
-
-    // canApproval() {
-    //   return this.listType == 0
-    // },
+    canApproval() {
+      return this.listType == 0
+    },
   },
-  created(options) {
-    // this.detailId = options.id
-    // this.listType = options.listType
-    // this.getDetail()
+  onLoad(options) {
+    this.objid = options.id
+    this.listType = options.listType
+    this.getDetail()
   },
   data() {
     return {
-      detailId: '',
+      objid: '', // 传进来的id
       list: [],
       list_tabs: [
         {
@@ -303,74 +278,87 @@ export default {
           name: '流程信息',
         },
       ],
-      current: 0,
-      // inforlist: [],
-      // stepList: [],
-      // dictList: ['hbDepartment'],
-      pageShow: true,
-      // listType: 0,
-      // eventChannel: null,
+      current: 0, //默认tab栏在'0申请表单'还是在'1流程信息'
+      inforlist: [],
+      stepList: [],
+      dictList: ['hbDepartment'],
+      pageShow: false,
+      listType: 0,
+      eventChannel: null,
     }
   },
   // 方法
   methods: {
+    ...mapActions(['injectJWeixin']),
     getDetail() {
-      // this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.detailId}`).then((res) => {
-      //   if (res.code == 0) {
-      //     if (res.data) {
-      //       this.list = res.data
-      //       console.log(res.data)
-      //       if (res.data.createUserAvatar) {
-      //         console.log(res.data.createUserAvatar)
-      //       }
-      //       this.inforlist = [[], [], [], [], [], [], [], [], [], []]
-      //       res.data.tableInfo.tableFieldInfos.map((item) => {
-      //         if (item.groupIndex) {
-      //           this.inforlist[item.groupIndex - 1].push(item)
-      //         }
-      //         if (item.dictionaryCode) {
-      //           this.dictList.push(item.dictionaryCode)
-      //         }
-      //         if (item.fieldDataType == 5) {
-      //           // item.fieldValue = item.fieldValue.split(',')
-      //         }
-      //       })
-      //       this.$dict.load(this.dictList).then(() => {
-      //         this.pageShow = true
-      //       })
-      //     }
-      //   }
-      // })
-      // this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.detailId}`).then((res) => {
-      //   if (res.code == 0) {
-      //     if (res.data) {
-      //       this.stepList = res.data
-      //     }
-      //   }
-      // })
-    },
+      this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.objid}`).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            this.list = res.data
+            console.log(res.data)
+            if (res.data.createUserAvatar) {
+              console.log(res.data.createUserAvatar)
+            }
 
+            this.inforlist = [[], [], [], [], [], [], [], [], [], []]
+            res.data.tableInfo.tableFieldInfos.map((item) => {
+              // console.log(item);
+              if (item.groupIndex) {
+                this.inforlist[item.groupIndex - 1].push(item)
+              }
+
+              if (item.dictionaryCode) {
+                this.dictList.push(item.dictionaryCode)
+              }
+              if (item.fieldDataType == 5) {
+                // item.fieldValue = item.fieldValue.split(',')
+              }
+            })
+
+            this.$dict.load(this.dictList).then(() => {
+              this.pageShow = true
+            })
+          }
+        }
+      })
+
+      this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.objid}`).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            this.stepList = res.data
+            // this.getDetail()
+            // console.log(this.stepList)
+            // res.data.map((item) => {
+            //   if (item.candidateFieldInfos) {
+            //     item.candidateFieldInfos.map((items) => {
+            //       console.log(items.fieldName)
+            //       console.log(items.fieldValue)
+            //     })
+            //   }
+            // })
+          }
+        }
+      })
+    },
     change(i) {
       this.current = i
     },
-
     agree(type) {
-      console.log(type)
-      // this.$http
-      //   .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.detailId}`)
-      //   .then((res) => {
-      //     if (res.code == 0) {
-      //       uni.navigateTo({
-      //         url: `/pages/workonline/approvalopinion?id=${this.detailId}&type=${type}`,
-      //       })
-      //     }
-      //   })
-      //   .catch((e) => {
-      //     uni.showToast({
-      //       title: e,
-      //       icon: 'none',
-      //     })
-      //   })
+      this.$http
+        .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.objid}`)
+        .then((res) => {
+          if (res.code == 0) {
+            uni.navigateTo({
+              url: `/pages/workonline/approvalopinion?id=${this.objid}&type=${type}`,
+            })
+          }
+        })
+        .catch((e) => {
+          uni.showToast({
+            title: e,
+            icon: 'none',
+          })
+        })
     },
   },
 }
@@ -378,505 +366,1048 @@ export default {
 
 <style scoped lang="scss">
 .detail {
-  .top {
-    background-color: #eff4ff;
-    height: 144px;
-    padding: 32px 0 0 32px;
-    color: #3a7ee2;
-    font-size: 28px;
-    .save {
-      margin-top: 8px;
-      .clicksave {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .form {
-    padding: 32px;
+  .detail_content1 {
     background-color: #fff;
+    padding-bottom: 348px;
 
-    .text {
-      font-size: 40px;
-      font-weight: 800;
+    .top {
+      background-color: #eff4ff;
+      height: 144px;
+      padding: 32px 0 0 32px;
+      color: #3a7ee2;
+      font-size: 28px;
+
+      .save {
+        margin-top: 8px;
+
+        .clicksave {
+          text-decoration: underline;
+        }
+      }
     }
 
-    .people {
-      display: flex;
-      // align-items: center;
-      justify-content: space-between;
-      // margin-top: 20px;
-      height: 122px;
-      line-height: 122px;
-      border-bottom: 1px solid #eee;
-      padding-bottom: 10px;
+    .form {
+      padding: 32px;
+      background-color: #fff;
 
-      .people_msg {
-        .avatar {
-          display: inline-block;
-          width: 84px;
-          height: 84px;
-          line-height: 84px;
-          border-radius: 50%;
-          background-color: #2266ff;
-          color: #fff;
-          font-size: 28px;
-          vertical-align: middle;
+      .text {
+        font-size: 40px;
+        font-weight: 800;
+      }
+
+      .people {
+        display: flex;
+        // align-items: center;
+        justify-content: space-between;
+        // margin-top: 20px;
+        height: 122px;
+        line-height: 122px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 10px;
+
+        .people_msg {
+          .avatar {
+            display: inline-block;
+            width: 84px;
+            height: 84px;
+            line-height: 84px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            margin-right: 10px;
+          }
+
+          .name {
+            display: inline-block;
+            width: 145px;
+            vertical-align: middle;
+
+            .name_con {
+              font-size: 30px;
+              height: 40px;
+            }
+
+            .name_createtime {
+              color: #999;
+              font-size: 24px;
+              height: 120px;
+              width: 400px;
+            }
+          }
+        }
+
+        .people_status_ing {
+          color: #ff8822;
           text-align: center;
-          margin-right: 10px;
         }
 
-        .name {
-          display: inline-block;
-          width: 145px;
-          vertical-align: middle;
-
-          .name_con {
-            font-size: 30px;
-            height: 40px;
-          }
-
-          .name_createtime {
-            color: #999;
-            font-size: 24px;
-            height: 120px;
-            width: 400px;
-          }
-        }
-      }
-
-      .people_status_ing {
-        color: #ff8822;
-        text-align: center;
-      }
-
-      .people_status_agree {
-        width: 192px;
-        height: 192px;
-
-        img {
+        .people_status_agree {
           width: 192px;
           height: 192px;
-          margin-top: -60px;
+
+          img {
+            width: 192px;
+            height: 192px;
+            margin-top: -60px;
+          }
+        }
+
+        .people_status_reject {
+          color: #f14242;
+          text-align: center;
         }
       }
 
-      .people_status_reject {
-        color: #f14242;
-        text-align: center;
-      }
-    }
-
-    .content {
-      margin-top: 16px;
-
-      .item {
+      .content {
         margin-top: 16px;
 
-        .item_info {
-          display: inline;
-          font-size: 30px;
-          font-weight: 400;
-          color: #999999;
+        .item {
+          margin-top: 16px;
 
-          .annexs {
-            // display: inline;
-            vertical-align: top;
-          }
-
-          .img_text {
-            display: inline-block;
-            position: relative;
-            width: 180px;
-            height: 175px;
-
-            img {
-              width: 180px;
-              height: 100%;
-            }
-
-            .text {
-              position: absolute;
-              bottom: 14px;
-              left: -12px;
-              font-size: 12px;
-              width: 160px;
-              height: 40px;
-              line-height: 40px;
-              text-align: center;
-              color: #fff;
-              background-color: #000;
-              opacity: 0.4;
-              margin-left: 12px;
-            }
-          }
-        }
-
-        .zhuf {
-          font-size: 30px;
-          font-weight: 400;
-          color: #1365dd;
-        }
-
-        .liangzhu {
-          font-size: 30px;
-          font-weight: 400;
-          color: #343d65;
-        }
-      }
-    }
-  }
-
-  .tabs {
-    // margin-top: 16px;
-  }
-
-  .info {
-    height: 16px;
-    width: 100%;
-    background-color: #eee;
-  }
-
-  // 表单申请
-  .collapse {
-    // margin: 0 32px;
-    // padding: 0 32px;
-    ::v-deep .u-collapse {
-      // background-color: #fff;
-    }
-
-    ::v-deep .u-collapse-head {
-      background-color: #fff;
-      padding: 0 32px;
-      height: 96px;
-    }
-
-    ::v-deep .u-collapse-body {
-      padding: 0 32px;
-      background-color: #fafafa;
-
-      .u-collapse-content {
-        .item_msg {
-          display: flex;
-          // align-items: center;
-          justify-content: space-between;
-          padding: 10px 0;
-
-          .msg_lef {
-            width: 350px;
+          .item_info {
+            display: inline;
             font-size: 30px;
             font-weight: 400;
             color: #999999;
+
+            .annexs {
+              vertical-align: top;
+            }
+
+            .img_text {
+              display: inline-block;
+              position: relative;
+              width: 180px;
+              height: 175px;
+
+              img {
+                width: 180px;
+                height: 100%;
+              }
+
+              .text {
+                position: absolute;
+                bottom: 14px;
+                // text-align: center;
+                left: 0;
+                width: 160px;
+                font-size: 12px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #fff;
+                background-color: #000;
+                opacity: 0.4;
+              }
+            }
           }
 
-          .msg_lright {
-            max-width: 420px;
-            word-break: break-all;
-            // word-wrap: break-word;
-            margin-right: 0;
+          .zhuf {
             font-size: 30px;
             font-weight: 400;
-            color: #333333;
+            color: #1365dd;
           }
-        }
 
-        .account {
-          // .account_leave {
-          // }
-          .account_house {
-            margin: 10px 0;
-            color: #333;
+          .liangzhu {
             font-size: 30px;
+            font-weight: 400;
+            color: #343d65;
           }
         }
       }
     }
-  }
 
-  // 流程信息
-  .workflow {
-    background-color: #fff;
-    padding: 24px 32px 40px 32px;
+    .tabs {
+      // margin-top: 16px;
+    }
 
-    // 发起申请步骤
+    .info {
+      height: 16px;
+      width: 100%;
+      background-color: #eee;
+    }
 
-    .step-list {
-      .step-item {
-        display: flex;
-        position: relative;
-        justify-content: space-between;
-        // align-items: center;
-        padding-bottom: 40px;
+    // 表单申请
+    .collapse {
+      // margin: 0 32px;
+      // padding: 0 32px;
+      ::v-deep .u-collapse {
+        // background-color: #fff;
+      }
 
-        .item-left {
-          height: 100%;
-          // position: relative;
-          .item-left-ava-icon {
-            position: relative;
+      ::v-deep .u-collapse-head {
+        background-color: #fff;
+        padding: 0 32px;
+        height: 96px;
+      }
 
-            .avatar {
-              display: inline-block;
-              width: 80px;
-              height: 80px;
-              line-height: 80px;
-              border-radius: 50%;
-              background-color: #2266ff;
-              color: #fff;
-              font-size: 28px;
-              // vertical-align: middle;
-              text-align: center;
-              z-index: 999;
+      ::v-deep .u-collapse-body {
+        padding: 0 32px;
+        background-color: #fafafa;
 
-              img {
-                // margin: 16px 0 0 8px;
-                width: 48px;
-                height: 48px;
-              }
+        .u-collapse-content {
+          .item_msg {
+            display: flex;
+            // align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+
+            .msg_lef {
+              width: 350px;
+              font-size: 30px;
+              font-weight: 400;
+              color: #999999;
             }
 
-            .icon-yes {
-              position: absolute;
-              top: 50px;
-              left: 50px;
-              width: 36px;
-              height: 36px;
-              // background: #fff;
-              border-radius: 50%;
-              text-align: center;
-              vertical-align: middle;
-
-              img {
-                width: 36px;
-                height: 36px;
-              }
-            }
-
-            .icon-no {
-              position: absolute;
-              top: 50px;
-              left: 50px;
-              width: 36px;
-              height: 36px;
-              background: #ff8822;
-              border-radius: 50%;
-              text-align: center;
-              vertical-align: middle;
-
-              img {
-                width: 36px;
-                height: 36px;
-              }
+            .msg_lright {
+              max-width: 420px;
+              word-break: break-all;
+              // word-wrap: break-word;
+              margin-right: 0;
+              font-size: 30px;
+              font-weight: 400;
+              color: #333333;
             }
           }
 
-          .solid {
-            // height: 100%;
-            height: calc(100%);
-            border-left: 4px solid #eee;
-            position: absolute;
-            top: 80px;
-            left: 40px;
-          }
-
-          .dashed {
-            // height: 100%;
-            height: calc(100%);
-            border-left: 4px dashed #eee;
-            position: absolute;
-            top: 80px;
-            left: 40px;
+          .account {
+            // .account_leave {
+            // }
+            .account_house {
+              margin: 10px 0;
+              color: #333;
+              font-size: 30px;
+            }
           }
         }
+      }
+    }
 
-        .item-right {
-          width: 590px;
+    // 流程信息
+    .workflow {
+      background-color: #fff;
+      padding: 24px 32px 40px 32px;
 
-          .item-right-flex {
-            // display: flex;
-            // justify-content: space-between;
-            // align-items: center;
-            .block {
-              display: block;
-              // margin-top: 124px;
-            }
+      // 发起申请步骤
 
-            .title2 {
-              display: inline-block;
-            }
+      .step-list {
+        .step-item {
+          display: flex;
+          position: relative;
+          justify-content: space-between;
+          // align-items: center;
+          padding-bottom: 40px;
 
-            .title2Desc {
-              display: inline-block;
-              color: #2ea222;
-              margin-left: 10px;
-            }
-
-            .title2Desc-ing {
-              display: inline-block;
-              color: #ff8822;
-              margin-left: 10px;
-            }
-
-            .title2Desc-false {
-              color: #f14242;
-              display: inline-block;
-              margin-left: 10px;
-            }
-
-            .user-list {
-              overflow: hidden;
-            }
-
-            .item-right-flex-left-name {
-              margin-top: 20px;
-              float: left;
-              margin-right: 16px;
-              text-align: center;
+          .item-left {
+            height: 100%;
+            // position: relative;
+            .item-left-ava-icon {
+              position: relative;
 
               .avatar {
                 display: inline-block;
-                width: 64px;
-                height: 64px;
-                line-height: 64px;
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
                 border-radius: 50%;
                 background-color: #2266ff;
                 color: #fff;
                 font-size: 28px;
-                vertical-align: middle;
+                // vertical-align: middle;
                 text-align: center;
-                // margin-left: 8px;
+                z-index: 999;
+
+                img {
+                  // margin: 16px 0 0 8px;
+                  width: 48px;
+                  height: 48px;
+                }
               }
 
-              .avatar-name {
-                display: block;
-              }
-            }
+              .icon-yes {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                // background: #fff;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
 
-            .examine {
-              p {
-                margin: 6px 0;
-                font-size: 12px;
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
               }
 
-              .examine_img {
-                // display: flex;
-                // flex-wrap: wrap;
-                // justify-content: space-between;
-                // float: left;
-                // img {
-                //   width: 134px;
-                //   height: 136px;
-                //   margin-right: 8px;
-                // }
-                // ::v-deep.AiImage {
-                //   ::v-deep.u-image__image {
-                //     width: 60px !important;
-                //     height: 60px;
-                //   }
-                // }
-              }
-            }
+              .icon-no {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                background: #ff8822;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
 
-            .examine_docx1 {
-              .docx {
-                display: flex;
-                justify-content: space-between;
-                width: 556px;
-                padding: 16px;
-                background-color: #ddd;
-                margin: 6px 0;
-
-                .docx-name {
-                  width: 440px;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
+                img {
+                  width: 36px;
+                  height: 36px;
                 }
               }
             }
+
+            .solid {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px solid #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+
+            .dashed {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px dashed #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
           }
 
-          .time-info {
-            display: flex;
-            justify-content: space-between;
+          .item-right {
+            width: 590px;
 
-            span {
-              color: #999;
-              font-size: 28px;
+            .item-right-flex {
+              // display: flex;
+              // justify-content: space-between;
+              // align-items: center;
+              .block {
+                display: block;
+                // margin-top: 124px;
+              }
+
+              .title2 {
+                display: inline-block;
+              }
+
+              .title2Desc {
+                display: inline-block;
+                color: #2ea222;
+                margin-left: 10px;
+              }
+
+              .title2Desc-ing {
+                display: inline-block;
+                color: #ff8822;
+                margin-left: 10px;
+              }
+
+              .title2Desc-false {
+                color: #f14242;
+                display: inline-block;
+                margin-left: 10px;
+              }
+
+              .user-list {
+                overflow: hidden;
+              }
+
+              .item-right-flex-left-name {
+                margin-top: 20px;
+                float: left;
+                margin-right: 16px;
+                text-align: center;
+
+                .avatar {
+                  display: inline-block;
+                  width: 64px;
+                  height: 64px;
+                  line-height: 64px;
+                  border-radius: 50%;
+                  background-color: #2266ff;
+                  color: #fff;
+                  font-size: 28px;
+                  vertical-align: middle;
+                  text-align: center;
+                  // margin-left: 8px;
+                }
+
+                .avatar-name {
+                  display: block;
+                }
+              }
+
+              .examine {
+                p {
+                  margin: 6px 0;
+                  font-size: 12px;
+                }
+
+                .examine_img {
+                  //  float: left;
+                  // display: flex;
+                  // flex-wrap: wrap;
+                  // justify-content: space-between;
+                  // img {
+                  //   width: 134px;
+                  //   height: 136px;
+                  //   margin-right: 8px;
+                  // }
+                  // ::v-deep.AiImage {
+                  //   ::v-deep.u-image__image {
+                  //     width: 60px !important;
+                  //     height: 60px;
+                  //   }
+                  // }
+                }
+              }
+
+              .examine_docx1 {
+                .docx {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  width: 556px;
+                  padding: 16px;
+                  background-color: #ddd;
+                  margin: 6px 0;
+
+                  .docx-name {
+                    width: 440px;
+                    margin: 0 8px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+
+            .time-info {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                color: #999;
+                font-size: 28px;
+              }
             }
           }
         }
-      }
 
-      .step-item:first-child {
-        .item-right {
-          .item-right-flex {
-            .block {
-              margin-top: 0 !important;
+        .step-item:first-child {
+          .item-right {
+            .item-right-flex {
+              .block {
+                margin-top: 0 !important;
+              }
             }
           }
         }
+
+        .step-item:last-child {
+          .dashed {
+            border-left: 0 !important;
+          }
+
+          .solid {
+            border-left: 0 !important;
+          }
+        }
+      }
+    }
+
+    // 抄送人头像
+    .recipients {
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      margin: 16px 0 0 120px;
+
+      .recipients_content {
+        // display: inline-block;
+        // width: 64px;
+        // height: 150px;
+        margin-left: 32px;
+
+        .name_ava {
+          display: inline-block;
+          width: 120px;
+          // text-align: center;
+          margin-top: 5px;
+
+          .avatar {
+            display: inline-block;
+            width: 64px;
+            height: 64px;
+            line-height: 64px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            // margin-left: 8px;
+          }
+
+          .recipients_name {
+            // display: inline;
+            width: 100px;
+            height: 34px;
+            line-height: 34px;
+            // text-align: center;
+            // background-color: pink;
+            margin-top: 8px;
+          }
+        }
       }
 
-      .step-item:last-child {
-        .dashed {
-          border-left: 0 !important;
-        }
-
-        .solid {
-          border-left: 0 !important;
-        }
-      }
+      // .recipients_content:first-child {
+      //   margin-left: 0;
+      // }
     }
   }
 
-  // 抄送人头像
-  .recipients {
-    // display: flex;
-    // justify-content: space-between;
-    // align-items: center;
-    margin: 16px 0 0 120px;
+  .detail_content {
+    background-color: #fff;
+    padding-bottom: 170px;
+    // padding-bottom: 320px;
+    .top {
+      background-color: #eff4ff;
+      height: 144px;
+      padding: 32px 0 0 32px;
+      color: #3a7ee2;
+      font-size: 28px;
 
-    .recipients_content {
-      // display: inline-block;
-      // width: 64px;
-      // height: 150px;
-      margin-left: 32px;
+      .save {
+        margin-top: 8px;
 
-      .name_ava {
-        display: inline-block;
-        width: 120px;
-        // text-align: center;
-        margin-top: 5px;
-
-        .avatar {
-          display: inline-block;
-          width: 64px;
-          height: 64px;
-          line-height: 64px;
-          border-radius: 50%;
-          background-color: #2266ff;
-          color: #fff;
-          font-size: 28px;
-          vertical-align: middle;
-          text-align: center;
-          // margin-left: 8px;
-        }
-
-        .recipients_name {
-          // display: inline;
-          width: 100px;
-          height: 34px;
-          line-height: 34px;
-          // text-align: center;
-          // background-color: pink;
-          margin-top: 8px;
+        .clicksave {
+          text-decoration: underline;
         }
       }
     }
 
-    // .recipients_content:first-child {
-    //   margin-left: 0;
-    // }
+    .form {
+      padding: 32px;
+      background-color: #fff;
+
+      .text {
+        font-size: 40px;
+        font-weight: 800;
+      }
+
+      .people {
+        display: flex;
+        // align-items: center;
+        justify-content: space-between;
+        // margin-top: 20px;
+        height: 122px;
+        line-height: 122px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 10px;
+
+        .people_msg {
+          .avatar {
+            display: inline-block;
+            width: 84px;
+            height: 84px;
+            line-height: 84px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            margin-right: 10px;
+          }
+
+          .name {
+            display: inline-block;
+            width: 145px;
+            vertical-align: middle;
+
+            .name_con {
+              font-size: 30px;
+              height: 40px;
+            }
+
+            .name_createtime {
+              color: #999;
+              font-size: 24px;
+              height: 120px;
+              width: 400px;
+            }
+          }
+        }
+
+        .people_status_ing {
+          color: #ff8822;
+          text-align: center;
+        }
+
+        .people_status_agree {
+          width: 192px;
+          height: 192px;
+
+          img {
+            width: 192px;
+            height: 192px;
+            margin-top: -60px;
+          }
+        }
+
+        .people_status_reject {
+          color: #f14242;
+          text-align: center;
+        }
+      }
+
+      .content {
+        margin-top: 16px;
+
+        .item {
+          margin-top: 16px;
+
+          .item_info {
+            display: inline;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+
+            .annexs {
+              // display: inline;
+              vertical-align: top;
+            }
+
+            .img_text {
+              display: inline-block;
+              position: relative;
+              width: 180px;
+              height: 175px;
+
+              img {
+                width: 180px;
+                height: 100%;
+              }
+
+              .text {
+                position: absolute;
+                bottom: 14px;
+                left: -12px;
+                font-size: 12px;
+                width: 160px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #fff;
+                background-color: #000;
+                opacity: 0.4;
+                margin-left: 12px;
+              }
+            }
+          }
+
+          .zhuf {
+            font-size: 30px;
+            font-weight: 400;
+            color: #1365dd;
+          }
+
+          .liangzhu {
+            font-size: 30px;
+            font-weight: 400;
+            color: #343d65;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      // margin-top: 16px;
+    }
+
+    .info {
+      height: 16px;
+      width: 100%;
+      background-color: #eee;
+    }
+
+    // 表单申请
+    .collapse {
+      // margin: 0 32px;
+      // padding: 0 32px;
+      ::v-deep .u-collapse {
+        // background-color: #fff;
+      }
+
+      ::v-deep .u-collapse-head {
+        background-color: #fff;
+        padding: 0 32px;
+        height: 96px;
+      }
+
+      ::v-deep .u-collapse-body {
+        padding: 0 32px;
+        background-color: #fafafa;
+
+        .u-collapse-content {
+          .item_msg {
+            display: flex;
+            // align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+
+            .msg_lef {
+              width: 350px;
+              font-size: 30px;
+              font-weight: 400;
+              color: #999999;
+            }
+
+            .msg_lright {
+              max-width: 420px;
+              word-break: break-all;
+              // word-wrap: break-word;
+              margin-right: 0;
+              font-size: 30px;
+              font-weight: 400;
+              color: #333333;
+            }
+          }
+
+          .account {
+            // .account_leave {
+            // }
+            .account_house {
+              margin: 10px 0;
+              color: #333;
+              font-size: 30px;
+            }
+          }
+        }
+      }
+    }
+
+    // 流程信息
+    .workflow {
+      background-color: #fff;
+      padding: 24px 32px 40px 32px;
+
+      // 发起申请步骤
+
+      .step-list {
+        .step-item {
+          display: flex;
+          position: relative;
+          justify-content: space-between;
+          // align-items: center;
+          padding-bottom: 40px;
+
+          .item-left {
+            height: 100%;
+            // position: relative;
+            .item-left-ava-icon {
+              position: relative;
+
+              .avatar {
+                display: inline-block;
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                border-radius: 50%;
+                background-color: #2266ff;
+                color: #fff;
+                font-size: 28px;
+                // vertical-align: middle;
+                text-align: center;
+                z-index: 999;
+
+                img {
+                  // margin: 16px 0 0 8px;
+                  width: 48px;
+                  height: 48px;
+                }
+              }
+
+              .icon-yes {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                // background: #fff;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+
+              .icon-no {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                background: #ff8822;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+            }
+
+            .solid {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px solid #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+
+            .dashed {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px dashed #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+          }
+
+          .item-right {
+            width: 590px;
+
+            .item-right-flex {
+              // display: flex;
+              // justify-content: space-between;
+              // align-items: center;
+              .block {
+                display: block;
+                // margin-top: 124px;
+              }
+
+              .title2 {
+                display: inline-block;
+              }
+
+              .title2Desc {
+                display: inline-block;
+                color: #2ea222;
+                margin-left: 10px;
+              }
+
+              .title2Desc-ing {
+                display: inline-block;
+                color: #ff8822;
+                margin-left: 10px;
+              }
+
+              .title2Desc-false {
+                color: #f14242;
+                display: inline-block;
+                margin-left: 10px;
+              }
+
+              .user-list {
+                overflow: hidden;
+              }
+
+              .item-right-flex-left-name {
+                margin-top: 20px;
+                float: left;
+                margin-right: 16px;
+                text-align: center;
+
+                .avatar {
+                  display: inline-block;
+                  width: 64px;
+                  height: 64px;
+                  line-height: 64px;
+                  border-radius: 50%;
+                  background-color: #2266ff;
+                  color: #fff;
+                  font-size: 28px;
+                  vertical-align: middle;
+                  text-align: center;
+                  // margin-left: 8px;
+                }
+
+                .avatar-name {
+                  display: block;
+                }
+              }
+
+              .examine {
+                p {
+                  margin: 6px 0;
+                  font-size: 12px;
+                }
+
+                .examine_img {
+                  // display: flex;
+                  // flex-wrap: wrap;
+                  // justify-content: space-between;
+                  // float: left;
+                  // img {
+                  //   width: 134px;
+                  //   height: 136px;
+                  //   margin-right: 8px;
+                  // }
+                  // ::v-deep.AiImage {
+                  //   ::v-deep.u-image__image {
+                  //     width: 60px !important;
+                  //     height: 60px;
+                  //   }
+                  // }
+                }
+              }
+
+              .examine_docx1 {
+                .docx {
+                  display: flex;
+                  justify-content: space-between;
+                  width: 556px;
+                  padding: 16px;
+                  background-color: #ddd;
+                  margin: 6px 0;
+
+                  .docx-name {
+                    width: 440px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+
+            .time-info {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                color: #999;
+                font-size: 28px;
+              }
+            }
+          }
+        }
+
+        .step-item:first-child {
+          .item-right {
+            .item-right-flex {
+              .block {
+                margin-top: 0 !important;
+              }
+            }
+          }
+        }
+
+        .step-item:last-child {
+          .dashed {
+            border-left: 0 !important;
+          }
+
+          .solid {
+            border-left: 0 !important;
+          }
+        }
+      }
+    }
+
+    // 抄送人头像
+    .recipients {
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      margin: 16px 0 0 120px;
+
+      .recipients_content {
+        // display: inline-block;
+        // width: 64px;
+        // height: 150px;
+        margin-left: 32px;
+
+        .name_ava {
+          display: inline-block;
+          width: 120px;
+          // text-align: center;
+          margin-top: 5px;
+
+          .avatar {
+            display: inline-block;
+            width: 64px;
+            height: 64px;
+            line-height: 64px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            // margin-left: 8px;
+          }
+
+          .recipients_name {
+            // display: inline;
+            width: 100px;
+            height: 34px;
+            line-height: 34px;
+            // text-align: center;
+            // background-color: pink;
+            margin-top: 8px;
+          }
+        }
+      }
+
+      // .recipients_content:first-child {
+      //   margin-left: 0;
+      // }
+    }
+  }
+}
+
+.reject_agree {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 112px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+  z-index: 999;
+  background: #fff;
+
+  .reject {
+    background-color: #fff;
+    width: 50%;
+    color: red;
+  }
+
+  .agree {
+    height: 112px;
+    width: 50%;
+    background-color: #1365dd;
+    color: #fff;
   }
 }
 </style>