salecontract.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398
  1. <template>
  2. <view class="container">
  3. <view class="headInfo">
  4. <view class="headInfo_left">
  5. <u-icon name="checkmark" color="#22C572" size="30" v-if="auditCheck=='success'"></u-icon>
  6. <u-icon name="close" color="#FB2323" size="24" v-if="auditCheck=='error'"></u-icon>
  7. <u-icon name="clock-fill" color="#FE6430" size="30" v-if="auditCheck=='question'"></u-icon>
  8. </view>
  9. <view class="headInfo_middle">
  10. <view class="headInfo_title">销售合同审批</view>
  11. <view class="headInfo_No">{{list.contractNo}}</view>
  12. </view>
  13. <view class="headInfo_right">
  14. <view class="char_a" v-if="auditCheck == 'success'">审批通过</view>
  15. <view class="char_b" v-if="auditCheck == 'question'">审核中</view>
  16. <view class="char_c" v-if="auditCheck == 'error'">审批未通过</view>
  17. </view>
  18. <view class="adopt" v-if="auditCheck == 'success'">
  19. <image src="../../../static/img/oa_office/adopt.png" class="adopt_img" mode=""></image>
  20. </view>
  21. </view>
  22. <u-form ref="uForm">
  23. <view class="form_top">基本信息</view>
  24. <u-form-item label-width='260' :borderBottom="false" class="label_css" label="合同编号">
  25. <u-input v-model="list.contractNo" input-align="right" placeholder="--" disabled />
  26. </u-form-item>
  27. <u-form-item label-width='260' :borderBottom="false" label="买方">
  28. <u-input v-model="list.buyer" input-align="right" placeholder="--" disabled />
  29. </u-form-item>
  30. <u-form-item label-width='260' :borderBottom="false" label="买方电话">
  31. <u-input v-model="list.buyerPhone" input-align="right" placeholder="--" disabled />
  32. </u-form-item>
  33. <u-form-item label-width='260' :borderBottom="false" label="卖方">
  34. <u-input v-model="list.seller" input-align="right" placeholder="--" disabled />
  35. </u-form-item>
  36. <u-form-item label-width='260' :borderBottom="false" label="卖方电话">
  37. <u-input v-model="list.sellerPhone" input-align="right" placeholder="--" disabled />
  38. </u-form-item>
  39. <u-form-item label-width='260' label="合营方" :borderBottom="false" v-show="list.jointVentureParties">
  40. <u-input v-model="list.jointVentureParties" input-align="right" placeholder="--" disabled />
  41. </u-form-item>
  42. <u-form-item label-width='260' label="合营方电话" :borderBottom="false" v-show="list.jointPhone">
  43. <u-input v-model="list.jointPhone" input-align="right" placeholder="--" disabled />
  44. </u-form-item>
  45. <u-form-item label-width='260' :borderBottom="false" label="中转公司">
  46. <u-input v-model="list.transitCompany" input-align="right" placeholder="--" disabled />
  47. </u-form-item>
  48. <u-form-item label-width='260' :borderBottom="false" label="交货日期(起 - 止)" v-show="list.deliveryDateStart">
  49. <view class="textCss">
  50. {{list.deliveryDateStart }} ~ {{list.deliveryDateEnd}}
  51. </view>
  52. </u-form-item>
  53. <!-- <u-form-item label-width='260' :borderBottom="false" label="交货日期(止)">
  54. <u-input v-model="list.deliveryDateEnd" input-align="right" placeholder="--" disabled />
  55. </u-form-item> -->
  56. <u-form-item label-width='150' :borderBottom="false" label="签订日期">
  57. <u-input v-model="list.signingDate" input-align="right" placeholder="--" disabled />
  58. </u-form-item>
  59. <u-form-item label-width='230' :borderBottom="false" label="合同总价(元)">
  60. <u-input v-model="list.totalContractPrice" input-align="right" placeholder="--" disabled />
  61. </u-form-item>
  62. <u-form-item label-width='260' :borderBottom="false" label="合同单价(元/吨)">
  63. <u-input v-model="list.unitContractPrice" input-align="right" placeholder="--" disabled />
  64. </u-form-item>
  65. <u-form-item label-width='260' :borderBottom="false" label="货源所在地区" v-show="list.sourceProvince">
  66. <view class="textCss">
  67. {{list.sourceProvince}}{{list.sourceCity}}{{list.sourceArea}}
  68. </view>
  69. </u-form-item>
  70. <u-form-item label-width='260' :borderBottom="false" label="货源详细地址" v-show="list.sourceGoods">
  71. <u-input v-model="list.sourceGoods" input-align="right" placeholder="--" disabled />
  72. </u-form-item>
  73. <u-form-item label-width='260' :borderBottom="false" label="交货地所在地区" v-show="list.deliveryProvince">
  74. <view class="textCss">
  75. {{list.deliveryProvince}}{{list.deliveryCity}}{{list.deliveryArea}}
  76. </view>
  77. </u-form-item>
  78. <u-form-item label-width='260' :borderBottom="false" label="交货地详细地址" v-show="list.placeDelivery">
  79. <u-input v-model="list.placeDelivery" input-align="right" placeholder="--" disabled />
  80. </u-form-item>
  81. <u-form-item label-width='300' :borderBottom="false" label="最终实际交易量(吨)">
  82. <u-input v-model="list.finalTradingVolume" input-align="right" placeholder="--" disabled />
  83. </u-form-item>
  84. <u-form-item label-width='300' :borderBottom="false" label="结算单价(元/吨)" v-show="list.settlementPrice">
  85. <u-input v-model="list.settlementPrice" input-align="right" placeholder="--" disabled />
  86. </u-form-item>
  87. <u-form-item label-width='260' :borderBottom="false" label="合同收入(元)"
  88. v-show="list.contractProcessInfo.goodsNameKey">
  89. <u-input v-model="list.contractProcessInfo.goodsNameKey" input-align="right" placeholder="--"
  90. disabled />
  91. </u-form-item>
  92. <u-form-item label-width='260' :borderBottom="false" label="已开发票(元)"
  93. v-show="list.contractProcessInfo.goodsName">
  94. <u-input v-model="list.contractProcessInfo.goodsName" input-align="right" placeholder="--" disabled />
  95. </u-form-item>
  96. <u-form-item label-width='260' :borderBottom="false" label="费用支出(元)"
  97. v-show="list.contractProcessInfo.waterContent">
  98. <u-input v-model="list.contractProcessInfo.waterContent" input-align="right" placeholder="--"
  99. disabled />
  100. </u-form-item>
  101. <u-form-item label-width='260' :borderBottom="false" label="未开发票(元)"
  102. v-show="list.contractProcessInfo.impurity">
  103. <u-input v-model="list.contractProcessInfo.impurity" input-align="right" placeholder="--" disabled />
  104. </u-form-item>
  105. <u-form-item label-width='260' :borderBottom="false" label="未回款(元)"
  106. v-show="list.contractProcessInfo.mildewGrain">
  107. <u-input v-model="list.contractProcessInfo.mildewGrain" input-align="right" placeholder="--" disabled />
  108. </u-form-item>
  109. <u-form-item label-width='260' :borderBottom="false" label="双章原件回收情况"
  110. v-show="list.contractProcessInfo.grade">
  111. <u-input v-model="list.contractProcessInfo.grade" input-align="right" placeholder="--" disabled />
  112. </u-form-item>
  113. <u-form-item label-width='260' :borderBottom="false" label="备注信息" v-show="list.contractProcessInfo.grade">
  114. </u-form-item>
  115. <!-- <view class="form_top">备注信息</view> -->
  116. <u-form-item>
  117. <textarea class='textarea' autoHeight v-model="list.remarks" input-align="right" placeholder="暂无备注信息"
  118. disabled />
  119. </u-form-item>
  120. </u-form>
  121. <u-form ref="uForm">
  122. <view class="form_top">货物信息</view>
  123. <view class="form_view" style="background: #F9F9FA;">
  124. <u-row customStyle="margin-bottom: 10px;">
  125. <u-col span="6">
  126. <u-form-item label-width='100' :borderBottom="false" label="货名" class="label_css">
  127. <u-input v-model="list.contractGoodsInfo.goodsName" class="input_css" input-align="right"
  128. placeholder="--" disabled />
  129. </u-form-item>
  130. </u-col>
  131. <u-col span="6">
  132. <u-form-item label-width='150' :borderBottom="false" label="品级" class="label_css">
  133. <u-input v-model="list.contractGoodsInfo.grade" class="input_css" input-align="right"
  134. placeholder="--" disabled />
  135. </u-form-item>
  136. </u-col>
  137. </u-row>
  138. <u-row customStyle="margin-bottom: 10px;">
  139. <u-col span="6">
  140. <u-form-item label-width='230' :borderBottom="false" label="容重(克/升)>=" class="label_css">
  141. <u-input v-model="list.contractGoodsInfo.bulkDensity" class="input_css" input-align="right"
  142. placeholder="--" disabled />
  143. </u-form-item>
  144. </u-col>
  145. <u-col span="6">
  146. <u-form-item label-width='230' :borderBottom="false" label="水分(%)<=" class="label_css">
  147. <u-input v-model="list.contractGoodsInfo.waterContent" class="input_css" input-align="right"
  148. placeholder="--" disabled />
  149. </u-form-item>
  150. </u-col>
  151. </u-row>
  152. <u-row customStyle="margin-bottom: 10px;">
  153. <u-col span="6">
  154. <u-form-item label-width='230' :borderBottom="false" label="热损伤(%)<=" class="label_css">
  155. <u-input v-model="list.contractGoodsInfo.jiaorenli" class="input_css" input-align="right"
  156. placeholder="--" disabled />
  157. </u-form-item>
  158. </u-col>
  159. <u-col span="6">
  160. <u-form-item label-width='230' :borderBottom="false" label="杂质(%)<=" class="label_css">
  161. <u-input v-model="list.contractGoodsInfo.impurity" class="input_css" input-align="right"
  162. placeholder="--" disabled />
  163. </u-form-item>
  164. </u-col>
  165. </u-row>
  166. <u-row customStyle="margin-bottom: 10px;">
  167. <u-col span="6">
  168. <u-form-item label-width='230' :borderBottom="false" label="霉变粒(%)<=" class="label_css">
  169. <u-input v-model="list.contractGoodsInfo.mildewGrain" class="input_css" input-align="right"
  170. placeholder="--" disabled />
  171. </u-form-item>
  172. </u-col>
  173. <u-col span="6">
  174. <u-form-item label-width='240' :borderBottom="false" label="不完善粒(%)<=" class="label_css">
  175. <u-input v-model="list.contractGoodsInfo.imperfectGrain" class="input_css"
  176. input-align="right" placeholder="--" disabled />
  177. </u-form-item>
  178. </u-col>
  179. </u-row>
  180. </view>
  181. </u-form>
  182. <u-form ref="uForm">
  183. <view class="form_top">约定信息</view>
  184. <view class="form_view">
  185. <u-row customStyle="margin-bottom: 10px;">
  186. <u-col span="6">
  187. <u-form-item label-width='150' :borderBottom="false" label="结算方式" class="label_css">
  188. <u-input v-model="list.settlementMethod" class="input_css" input-align="right"
  189. placeholder="--" disabled />
  190. </u-form-item>
  191. </u-col>
  192. <u-col span="6">
  193. <u-form-item label-width='150' :borderBottom="false" label="交货方式" class="label_css">
  194. <u-input v-model="list.deliverType1" class="input_css" input-align="right" placeholder="--"
  195. disabled />
  196. </u-form-item>
  197. </u-col>
  198. </u-row>
  199. <u-row customStyle="margin-bottom: 10px;">
  200. <u-col span="6">
  201. <u-form-item label-width='150' :borderBottom="false" label="运输方式" class="label_css">
  202. <u-input v-model="list.shippingType" input-align="right" class="input_css" placeholder="--"
  203. disabled />
  204. </u-form-item>
  205. </u-col>
  206. <u-col span="6">
  207. <u-form-item label-width='150' :borderBottom="false" label="交易主体" class="label_css">
  208. <u-input v-model="list.transactionSubject" input-align="right" class="input_css"
  209. placeholder="--" disabled />
  210. </u-form-item>
  211. </u-col>
  212. </u-row>
  213. <u-row customStyle="margin-bottom: 10px;">
  214. <u-col span="6">
  215. <u-form-item label-width='150' :borderBottom="false" label="验收方式" class="label_css">
  216. <u-input v-model="list.acceptanceMethod" input-align="right" class="input_css"
  217. placeholder="--" disabled />
  218. </u-form-item>
  219. </u-col>
  220. <u-col span="6">
  221. <u-form-item label-width='150' :borderBottom="false" label="包装方式" class="label_css">
  222. <u-input v-model="list.packingMethod" input-align="right" class="input_css" placeholder="--"
  223. disabled />
  224. </u-form-item>
  225. </u-col>
  226. </u-row>
  227. <u-row customStyle="margin-bottom: 10px;">
  228. <u-col span="6">
  229. <u-form-item label-width='150' :borderBottom="false" label="重量(吨)" class="label_css">
  230. <u-input v-model="list.weight" input-align="right" class="input_css" placeholder="--"
  231. disabled />
  232. </u-form-item>
  233. </u-col>
  234. <u-col span="6">
  235. <u-form-item label-width='180' :borderBottom="false" label="溢短装(%)" class="label_css">
  236. <u-input v-model="list.overShort" input-align="right" class="input_css" placeholder="--"
  237. disabled />
  238. </u-form-item>
  239. </u-col>
  240. </u-row>
  241. </view>
  242. </u-form>
  243. <u-form ref="uForm">
  244. <view class="form_top">共{{imglist.length}}个附件</view>
  245. <view v-if='imglist.length>0'>
  246. <view style="justify-content: space-between;" class='flex' v-for='item in imglist'>
  247. <view class="img_item">
  248. <view class="" style="width: 16%;">
  249. <image v-if="item.type == 'pdf'" class="imgsign"
  250. src="../../../static/img/oa_office/pdf3.png" mode=""></image>
  251. <image v-else-if="item.type == 'xls'||item.type == 'xlsx'" class="imgsign"
  252. src="../../../static/img/oa_office/excle3.png" mode=""></image>
  253. <image v-else-if="item.type == 'doc'||item.type == 'docx'" class="imgsign"
  254. src="../../../static/img/oa_office/word3.png" mode=""></image>
  255. <image v-else class="imgsign" :src="item.appendixPath" mode="">
  256. </image>
  257. </view>
  258. <view class="" style="width: 70%;">
  259. <view class="char_css">{{item.appendixName}}</view>
  260. <u-line-progress v-if='item.progressstatus' :striped="true" :percent="item.progress"
  261. :striped-active="true"></u-line-progress>
  262. <view class="img_size">{{item.appendixSize}}</view>
  263. </view>
  264. <view style="color: #22C572;" class="img_dowload" @click="openDocument(item)">
  265. 下载
  266. </view>
  267. </view>
  268. </view>
  269. </view>
  270. </u-form>
  271. <flow :auditList="auditList" @status='getStatus'></flow>
  272. <view v-if='list.taskId' style='padding:10px;' class='flex bottom-btn'>
  273. <u-button v-if='list.approveStatus||isSHowBtn' @click='reject' type="error" class="btn1" hover-class='none'>
  274. 驳回
  275. </u-button>
  276. <u-button v-if='list.approveStatus||isSHowBtn' @click='pass' type="success" class="btn2">通过
  277. </u-button>
  278. </view>
  279. <view v-if='show' class="shade">
  280. <view class="wrap">
  281. <view class="alert-top">
  282. <view class="title">
  283. {{title}}
  284. </view>
  285. <u-icon name="close" class="close" color="#8890B1" @click="close()"></u-icon>
  286. </view>
  287. <view class="content1">
  288. <view class="u-textarea-style">
  289. <view class="right-bottom">
  290. {{auditMind.length}}/1000个字
  291. </view>
  292. <textarea maxlength="1000" v-model='auditMind' placeholder="请在此输入审核意见" name="" id="" cols="30"
  293. rows="11"></textarea>
  294. </view>
  295. <view class="upload_css">
  296. 上传附件
  297. <u-upload :custom-btn='true' class="upload" ref="upload" name='fileName' :form-data="{companyId: pcUserInfo.compId,
  298. modelId: '',
  299. vesselId: ''}" :action="action" :show-tips="false" :max-size="maxSize" :max-count="9"
  300. :size-type="['compressed']" @on-success="getImgUrl($event)" @on-error="onError"
  301. @on-remove="onRemove" @on-uploaded="isAdd = true"
  302. :limitType="['png', 'jpg', 'jpeg', 'webp', 'gif']" @on-progress="onProgress">
  303. <view slot="addBtn" class="slot-btn u-list-item" hover-class="slot-btn__hover"
  304. hover-stay-time="150">
  305. <image style="width:23px;height:23px;" src="../../../static/img/liangmai/xiangji-2.png"
  306. mode=""></image>
  307. <view>选择图片</view>
  308. </view>
  309. </u-upload>
  310. <!-- <upload :form-data="{companyId: pcUserInfo.compId,
  311. modelId: '',
  312. vesselId: ''}" class="upload" :width="150" ref="upload" :action="action" :max-size="maxSize" :max-count="99"
  313. :size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
  314. @on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload> -->
  315. </view>
  316. </view>
  317. <view class="audit_btn">
  318. <view @click='close()' class="cancel">取消</view>
  319. <view @click='passSubmit()' class="confirm">确定</view>
  320. </view>
  321. </view>
  322. </view>
  323. <view @click='imgShow=false' v-if="imgShow" class="shade">
  324. <image style='position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;' :src="url" mode=""></image>
  325. </view>
  326. </view>
  327. </template>
  328. <script>
  329. import upload from '@/components/upload.vue';
  330. import helper from '@/common/helper.js';
  331. import flow from '@/components/flow.vue';
  332. export default {
  333. components: {
  334. upload,
  335. flow
  336. },
  337. data() {
  338. return {
  339. everyCheck: '',
  340. id: "",
  341. currentPage: 1,
  342. pageSize: 10,
  343. list: {
  344. status: "",
  345. contractGoodsInfo: {},
  346. contractProcessInfo: {}
  347. },
  348. imglist: [],
  349. title: '',
  350. auditMind: '',
  351. auditList: [],
  352. show: false,
  353. contractNo: "",
  354. maxSize: 50 * 1024 * 1024, //限制文件大小 50M
  355. isAdd: true,
  356. url: "",
  357. imgShow: false,
  358. height: 200,
  359. autoHeight: true,
  360. border: false,
  361. rejectInfo: "",
  362. rejectInfo1: "",
  363. isSHowBtn: true,
  364. pcUserInfo: uni.getStorageSync('pcUserInfo'),
  365. auditCheck: "question", //判断审核是否通过
  366. // 上传附件、
  367. action: this.$uploadUrl,
  368. maxSize: 50 * 1024 * 1024, //限制文件大小 50M
  369. isAdd: true,
  370. fileUrl: []
  371. }
  372. },
  373. onBackPress(e) {
  374. if (this.everyCheck) {
  375. uni.navigateTo({
  376. url: "/pages/task/my_task"
  377. })
  378. return true;
  379. }
  380. },
  381. onLoad(options) {
  382. this.id = options.id
  383. this.everyCheck = uni.getStorageSync("everyTask")
  384. this.isSHowBtn = options.isShowbtn
  385. this.getList()
  386. },
  387. methods: {
  388. getStatus(val) {
  389. if (val == 200) this.getList()
  390. },
  391. auditFile(src) {
  392. uni.downloadFile({
  393. url: src,
  394. success: function(res) {
  395. var filePath = res.tempFilePath;
  396. uni.openDocument({
  397. filePath: filePath,
  398. showMenu: true,
  399. success: function(res) {
  400. console.log('打开文档成功');
  401. }
  402. });
  403. }
  404. });
  405. },
  406. getImgUrl(res) {
  407. this.fileUrl.push(res.data.appendixPath)
  408. },
  409. onError(error) {
  410. alert(error)
  411. console.log('------------error-----------')
  412. console.log(error)
  413. },
  414. onProgress(e) {
  415. console.log(e)
  416. },
  417. onRemove(index) {
  418. this.fileUrl.splice(index, 1)
  419. },
  420. openDocument(item) {
  421. this.$set(item, 'progressstatus', true)
  422. this.$forceUpdate()
  423. const downloadTask = uni.downloadFile({
  424. url: item.appendixPath,
  425. success: function(res) {
  426. var filePath = res.tempFilePath;
  427. if (item.type == 'pdf' || item.type == 'xls' || item.type == 'xlsx' || item.type ==
  428. 'doc' || item.type == 'docx') {
  429. uni.openDocument({
  430. filePath: filePath,
  431. showMenu: true,
  432. success: function(res) {
  433. console.log('打开文档成功');
  434. }
  435. });
  436. } else {
  437. uni.previewImage({
  438. current: 0, //预览图片的下标
  439. urls: [item.appendixPath]
  440. })
  441. }
  442. }
  443. });
  444. downloadTask.onProgressUpdate((res) => {
  445. this.$set(item, 'progress', res.progress)
  446. this.$forceUpdate()
  447. console.log('下载进度' + res.progress);
  448. console.log('已经下载的数据长度' + res.totalBytesWritten);
  449. console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
  450. // 满足测试条件,取消下载任务。
  451. // if (res.progress > 50) {
  452. // downloadTask.abort();
  453. // }
  454. });
  455. },
  456. shadeshow(url) {
  457. this.imgShow = true
  458. this.url = url
  459. },
  460. showcontent(item) {
  461. item.showflow = !item.showflow
  462. },
  463. getList(id) {
  464. var that = this
  465. uni.showLoading({
  466. title: '加载中',
  467. mask: true
  468. })
  469. this.$api.doRequest('get', '/contractManagementInfo/getInfo', {
  470. id: this.id
  471. }).then(res => {
  472. if (res.data.code == 200) {
  473. this.list = res.data.data
  474. if (this.list.deliverType == 1) {
  475. this.list.deliverType1 = '我方送货'
  476. } else if (this.list.deliverType == 2) {
  477. this.list.deliverType1 = '对方自提'
  478. }
  479. this.$api.doRequest('get', '/appendix/query/getFileList', {
  480. appendixIds: that.list.addressUrl
  481. }).then(res1 => {
  482. that.imglist = res1.data.data
  483. for (let i = 0; i < that.imglist.length; i++) { //获取后缀
  484. that.imglist[i].progressstatus = false
  485. that.imglist[i].progress = 0
  486. if (that.imglist[i].appendixName) {
  487. let index = that.imglist[i].appendixName.lastIndexOf(".")
  488. that.imglist[i].type = that.imglist[i].appendixName.substring(index +
  489. 1)
  490. }
  491. }
  492. // 审核流程
  493. this.$api.doRequest('get', '/workflow/query/workflowDefinitions', {
  494. businessCode: 'SALE-CONTRACT-APPROVE',
  495. tmpCompId: uni.getStorageSync('pcUserInfo').compId
  496. }).then(res1 => {
  497. this.$api.doRequest('get', '/commonUser/getHis', {
  498. workflowId: res1.data.data[0].id,
  499. businessKey: this.id,
  500. branch: that.list.jointVentureParties ? that.list
  501. .jointVentureParties : 'zt'
  502. }).then(response => {
  503. uni.hideLoading()
  504. for (let i = 0; i < response.data.data.length; i++) {
  505. this.$set(response.data.data[i], 'status',
  506. 'question')
  507. // console.log(response.data.data[i].workflowHistoricTasks,i)
  508. if (response.data.data[i].commonStaffs) {
  509. response.data.data[i].showflow = false
  510. response.data.data[i].operatorTitle = response
  511. .data.data[i]
  512. .desc.substring(0, 2)
  513. response.data.data[i].operatorName = response
  514. .data.data[i]
  515. .desc
  516. response.data.data[i].staffscontent = '共' +
  517. response.data
  518. .data[i].commonStaffs.length + '人,当前审核' +
  519. response.data
  520. .data[i].workflowHistoricTasks.length + '人'
  521. if (response.data.data[i]
  522. .workflowHistoricTasks && response
  523. .data.data[i].workflowHistoricTasks
  524. .length > 0) {
  525. if (response.data.data[i]
  526. .workflowHistoricTasks
  527. .length != response.data.data[i]
  528. .commonStaffs
  529. .length) {
  530. // response.data.data[i].status='question'
  531. this.$set(response.data.data[i],
  532. 'status',
  533. 'question')
  534. } else {
  535. this.$set(response.data.data[i],
  536. 'status',
  537. 'success')
  538. // response.data.data[i].status='success'
  539. }
  540. response.data.data[i].workflowlen =
  541. response.data.data[
  542. i].workflowHistoricTasks.length
  543. var workflowdata = response.data.data[i]
  544. .workflowHistoricTasks
  545. var staffsdata = response.data.data[i]
  546. .commonStaffs
  547. for (let q = 0; q < staffsdata
  548. .length; q++) {
  549. staffsdata[q].status = false
  550. staffsdata[q].staffTitle = staffsdata[
  551. q].staffName
  552. for (let k = 0; k < workflowdata
  553. .length; k++) {
  554. if (staffsdata[q].staffId ==
  555. workflowdata[k]
  556. .operatorId) {
  557. staffsdata[q].status = true
  558. }
  559. }
  560. }
  561. }
  562. response.data.data[i].commonStaffs1 = response
  563. .data.data[i]
  564. .commonStaffs
  565. } else {
  566. if (response.data.data[i]
  567. .workflowHistoricTasks && response
  568. .data.data[i].workflowHistoricTasks
  569. .length > 0) {
  570. var len = response.data.data[i]
  571. .workflowHistoricTasks
  572. .length - 1
  573. if (response.data.data[i]
  574. .workflowHistoricTasks[len]
  575. .approved) {
  576. this.$set(response.data.data[i],
  577. 'status',
  578. 'success')
  579. } else {
  580. this.$set(response.data.data[i],
  581. 'status', 'error')
  582. }
  583. response.data.data[i].operatorTitle =
  584. response.data
  585. .data[i].workflowHistoricTasks[len]
  586. .operatorName
  587. .substring(response.data.data[i]
  588. .workflowHistoricTasks[0]
  589. .operatorName.length -
  590. 2)
  591. response.data.data[i].operatorName =
  592. response.data
  593. .data[i].workflowHistoricTasks[len]
  594. .operatorName
  595. var time = new Date(response.data.data[i]
  596. .workflowHistoricTasks[len]
  597. .claimTime)
  598. .getTime()
  599. response.data.data[i].updateDate = this.$u
  600. .timeFormat(
  601. time, 'mm.dd hh:MM')
  602. // response.data.data[i].auditMind = response.data.data[i]
  603. // .workflowHistoricTasks[len].auditMind
  604. // 显示附件和审核意见
  605. if (response.data.data[i]
  606. .workflowHistoricTasks[len]
  607. .auditMind && response.data.data[i]
  608. .workflowHistoricTasks[len].auditMind
  609. .indexOf("##") != -1) {
  610. response.data.data[i].auditMind =
  611. response.data.data[i]
  612. .workflowHistoricTasks[len]
  613. .auditMind.split("##")[0]
  614. response.data.data[i].fileUrl =
  615. response.data.data[i]
  616. .workflowHistoricTasks[len]
  617. .auditMind.split("##")[1].split(
  618. ",")
  619. } else {
  620. response.data.data[i].auditMind =
  621. response.data.data[i]
  622. .workflowHistoricTasks[len]
  623. .auditMind
  624. }
  625. } else {
  626. this.$set(response.data.data[i], 'status',
  627. 'question')
  628. // response.data.data[i].status='question'
  629. if (response.data.data[i].desc ==
  630. '总经理助理审核') {
  631. response.data.data[i].operatorTitle =
  632. '总助'
  633. } else if (response.data.data[i].desc ==
  634. '杜大光审核') {
  635. response.data.data[i].operatorTitle =
  636. '大光'
  637. } else {
  638. response.data.data[i].operatorTitle =
  639. response.data
  640. .data[i].desc.substring(0, 2)
  641. }
  642. response.data.data[i].operatorName =
  643. response.data
  644. .data[i].desc
  645. var time1 = new Date(response.data.data[i]
  646. .updateDate)
  647. .getTime()
  648. response.data.data[i].updateDate = this.$u
  649. .timeFormat(
  650. time1, 'mm.dd hh:MM')
  651. response.data.data[i].auditMind = ''
  652. }
  653. }
  654. }
  655. console.log(response.data.data)
  656. for (let i = 0; i < response.data.data.length; i++) {
  657. if (response.data.data[i].status == "error") {
  658. this.auditCheck = "error"
  659. break;
  660. } else if (response.data.data[i].status ==
  661. "question") {
  662. this.auditCheck = "question"
  663. break;
  664. } else {
  665. this.auditCheck = "success"
  666. }
  667. }
  668. this.auditList = response.data.data
  669. var time2 = new Date(this.list.createDate).getTime()
  670. var time3 = this.$u.timeFormat(time2, 'mm.dd hh:MM')
  671. this.auditList.unshift({
  672. operatorTitle: this.list.creater.substring(
  673. 0, 2),
  674. operatorName: this.list.creater,
  675. updateDate: time3,
  676. auditMind: '',
  677. desc: '发起申请',
  678. showflow: false,
  679. commonStaffs1: null,
  680. commonStaffs: null,
  681. workflowHistoricTasks: [],
  682. status: 'success'
  683. })
  684. })
  685. })
  686. })
  687. }
  688. })
  689. },
  690. onRemove() {
  691. return
  692. },
  693. filterFileType(index, lists) {
  694. if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
  695. lists.splice(index, 1);
  696. // 当前文件不支持
  697. uni.showModal({
  698. title: '暂不支持当前图片类型',
  699. showCancel: false
  700. });
  701. } else {
  702. this.isAdd = false;
  703. }
  704. },
  705. close() {
  706. this.show = false
  707. this.fileUrl = [] //清除审核附件
  708. },
  709. pass() {
  710. this.show = true
  711. this.title = '审核意见(通过)'
  712. },
  713. reject() {
  714. this.show = true
  715. this.title = '驳回原因(驳回)'
  716. },
  717. //驳回
  718. rejectSubmit() {
  719. var that = this
  720. uni.showLoading({
  721. title: '加载中',
  722. mask: true
  723. });
  724. var info = that.auditMind
  725. if (that.fileUrl.length > 0) {
  726. info = that.auditMind + "##" + that.fileUrl.toString()
  727. }
  728. that.$api.doRequest('post', '/newWorkflow/api/handle', {
  729. taskId: that.list.taskId,
  730. approved: false,
  731. auditMind: info ? info : "",
  732. needReapply: true,
  733. }).then(res => {
  734. that.$api.msg('驳回成功')
  735. that.show = false
  736. setTimeout(function() {
  737. if (that.everyCheck) {
  738. helper.setAudit(that.list)
  739. } else {
  740. uni.navigateBack()
  741. }
  742. uni.hideLoading()
  743. }, 1000);
  744. })
  745. },
  746. pass() {
  747. this.show = true
  748. this.title = '审核意见'
  749. },
  750. reject() {
  751. this.show = true
  752. this.title = '驳回原因(驳回)'
  753. },
  754. //通过
  755. passSubmit() {
  756. var that = this
  757. if (this.title == '驳回原因(驳回)') {
  758. this.rejectSubmit()
  759. } else {
  760. uni.showLoading({
  761. title: '加载中',
  762. mask: true
  763. });
  764. var info = that.auditMind
  765. if (that.fileUrl.length > 0) {
  766. info = that.auditMind + "##" + that.fileUrl.toString()
  767. }
  768. that.$api.doRequest('post', '/newWorkflow/api/handle', {
  769. taskId: that.list.taskId,
  770. approved: true,
  771. auditMind: info ? info : "",
  772. needReapply: true,
  773. }).then(res => {
  774. that.$api.msg('通过成功')
  775. that.show = false
  776. setTimeout(function() {
  777. if (that.everyCheck) {
  778. helper.setAudit(that.list)
  779. } else {
  780. uni.navigateBack()
  781. }
  782. uni.hideLoading()
  783. }, 1000);
  784. })
  785. }
  786. },
  787. //审核方法
  788. audit(item, index, status, status2, reason) {
  789. if (index < this.list.length) {
  790. this.$api.doRequest('post', '/newWorkflow/api/handle', {
  791. taskId: item.taskId,
  792. approved: status,
  793. auditMind: reason != undefined ? '已驳回' : '34',
  794. needReapply: status2 != undefined ? true : false,
  795. }).then(res => {
  796. this.audit(this.list[index + 1], index + 1, status)
  797. })
  798. } else {
  799. if (status == true) {
  800. that.$api.msg('通过成功')
  801. this.getList()
  802. } else if (status == false) {
  803. that.$api.msg('驳回成功')
  804. this.getList()
  805. }
  806. }
  807. },
  808. }
  809. }
  810. </script>
  811. <style scoped lang="scss">
  812. .container {
  813. padding: 20rpx 20rpx 250rpx 20rpx;
  814. }
  815. .u-form {
  816. margin-bottom: 20rpx;
  817. background: #fff;
  818. border-radius: 10px;
  819. padding: 30rpx 10px;
  820. .u-form-item {
  821. line-height: 30px;
  822. padding: 0px 0;
  823. font-size: 26rpx;
  824. color: #878C9C;
  825. }
  826. }
  827. .content {
  828. margin-top: 30rpx;
  829. .top {
  830. display: flex;
  831. justify-content: space-between;
  832. }
  833. .content-item {
  834. border-radius: 20rpx;
  835. background: white;
  836. padding: 40rpx 20rpx;
  837. margin-bottom: 30rpx;
  838. }
  839. .title {
  840. font-size: 32rpx;
  841. font-weight: 600;
  842. color: #333333;
  843. text-align: left;
  844. margin: 20rpx 0;
  845. }
  846. .car-container {
  847. border-bottom: 2rpx solid #EEEEEE;
  848. }
  849. .car-type-item {
  850. font-size: 28rpx;
  851. margin: 20rpx 0;
  852. color: #878C9C;
  853. }
  854. .weightInfoCss {
  855. font-size: 28rpx;
  856. color: #333333;
  857. font-weight: 500;
  858. }
  859. .row {
  860. display: flex;
  861. justify-content: space-between;
  862. // .right,
  863. // input {
  864. // font-size: 28rpx;
  865. // // color: #333333;
  866. // }
  867. }
  868. .money {
  869. font-size: 32rpx;
  870. font-weight: 500;
  871. margin-bottom: 30rpx;
  872. }
  873. .moneyInfo {
  874. color: #22C572;
  875. font-size: 32rpx;
  876. }
  877. }
  878. .bottom-btn {
  879. width: 100%;
  880. position: fixed;
  881. bottom: 0;
  882. display: flex;
  883. z-index: 2;
  884. left: 0;
  885. background-color: #f8f8f8;
  886. flex-direction: column;
  887. .btn1,
  888. .btn2 {
  889. width: 100%;
  890. margin-bottom: 26rpx;
  891. border-radius: 90rpx;
  892. }
  893. .btn1 {
  894. background: white;
  895. color: #00C265;
  896. }
  897. }
  898. .topInfo {
  899. height: 210rpx;
  900. background: linear-gradient(270deg, #22C572 0%, #34DE8A 100%);
  901. padding: 30rpx;
  902. .topInfo-item {
  903. height: 150rpx;
  904. background-color: #FFFFFF;
  905. border-radius: 20rpx;
  906. padding: 40rpx;
  907. .logo {
  908. width: 40rpx;
  909. height: 40rpx;
  910. margin-top: 8rpx;
  911. }
  912. .infoText {
  913. font-size: 36rpx;
  914. font-weight: 600;
  915. margin-left: 20rpx;
  916. }
  917. .infoData {
  918. color: #878C9C;
  919. font-size: 26rpx;
  920. margin-top: 10rpx;
  921. }
  922. }
  923. }
  924. .shade {
  925. position: fixed;
  926. top: 0;
  927. left: 0;
  928. height: 100%;
  929. width: 100%;
  930. background: rgba(0, 0, 0, 0.4);
  931. z-index: 3;
  932. overflow-y: scroll;
  933. .wrap {
  934. position: absolute;
  935. left: 0;
  936. top: 0;
  937. right: 0;
  938. bottom: 0;
  939. margin: auto;
  940. background: #fff;
  941. width: calc(100% - 198rpx);
  942. height: 770rpx;
  943. // overflow: hidden;
  944. border-radius: 20rpx;
  945. .content1 {
  946. height: 600rpx;
  947. overflow-y: scroll;
  948. }
  949. .alert-top {
  950. padding: 33rpx;
  951. display: flex;
  952. justify-content: center;
  953. align-items: center;
  954. position: relative;
  955. }
  956. .title {
  957. font-size: 32rpx;
  958. font-weight: 600;
  959. color: #333333;
  960. }
  961. .close {
  962. position: absolute;
  963. right: 33rpx;
  964. }
  965. .upload_css {
  966. margin-left: 20rpx;
  967. .upload {
  968. // width: 80px;
  969. // height: 80px;
  970. }
  971. }
  972. }
  973. }
  974. .audit_btn {
  975. display: flex;
  976. top: 0px;
  977. }
  978. .cancel,
  979. .confirm {
  980. // position: absolute;
  981. // display: inline-block;
  982. width: 50%;
  983. text-align: center;
  984. // bottom: 0;
  985. padding: 10px;
  986. border-top: 1px solid #eee;
  987. font-size: 34rpx;
  988. margin: auto;
  989. }
  990. .cancel {
  991. left: 0;
  992. border-right: 1px solid #eee;
  993. color: #AFB3BF;
  994. }
  995. .confirm {
  996. right: 0;
  997. color: #22C572;
  998. }
  999. .textarea {
  1000. margin: 18rpx auto;
  1001. width: 100%;
  1002. background: #F9F9FA;
  1003. border-radius: 10px;
  1004. border: 1px solid #EEEEEE;
  1005. font-size: 28rpx;
  1006. padding: 10px;
  1007. }
  1008. .textCss {
  1009. display: flex;
  1010. justify-content: flex-end;
  1011. width: 100%;
  1012. text-align: right;
  1013. color: #333333;
  1014. }
  1015. .u-textarea-style {
  1016. margin: 20rpx;
  1017. background: #F9F9FA;
  1018. border-radius: 10px;
  1019. border: 1px solid #EEEEEE;
  1020. padding: 10rpx 20rpx;
  1021. position: relative;
  1022. height: 280rpx;
  1023. overflow: scroll;
  1024. /deep/.uni-textarea-textarea {
  1025. width: 80%;
  1026. }
  1027. .right-bottom {
  1028. position: absolute;
  1029. right: 20rpx;
  1030. bottom: 20rpx;
  1031. color: #AFB3BF;
  1032. }
  1033. }
  1034. /deep/.u-input__textarea {
  1035. height: 300rpx !important;
  1036. }
  1037. .content2 {
  1038. background: white;
  1039. margin: 20rpx 0;
  1040. border-radius: 20rpx;
  1041. padding: 20rpx;
  1042. .row {
  1043. display: flex;
  1044. .left {
  1045. display: flex;
  1046. align-items: center;
  1047. .item1 {
  1048. position: relative;
  1049. .item-content {
  1050. background: #617AE0;
  1051. width: 44px;
  1052. height: 44px;
  1053. border-radius: 22px;
  1054. line-height: 44px;
  1055. text-align: center;
  1056. font-size: 15px;
  1057. color: #fff;
  1058. }
  1059. .status {
  1060. position: absolute;
  1061. border-radius: 50%;
  1062. padding: 0px 2px;
  1063. right: -3px;
  1064. bottom: -3px;
  1065. background: #fff;
  1066. }
  1067. .status.success {
  1068. border: 1px solid rgb(60, 156, 255);
  1069. }
  1070. .status.error {
  1071. border: 1px solid rgb(245, 108, 108);
  1072. }
  1073. .status.question {
  1074. border: 1px solid #f9ae3d;
  1075. }
  1076. }
  1077. }
  1078. .right {
  1079. width: 80%;
  1080. // color: #B0B1B5;
  1081. margin-top: 10px;
  1082. .right-content {
  1083. background: #F2F3F7;
  1084. margin-left: 10px;
  1085. margin-top: 10px;
  1086. padding: 10px;
  1087. border-radius: 5px;
  1088. color: #B0B1B5;
  1089. }
  1090. .right-item {
  1091. display: flex;
  1092. justify-content: space-between;
  1093. .time {
  1094. color: #999;
  1095. }
  1096. .item2 {
  1097. margin-left: 20rpx;
  1098. margin-top: -7px;
  1099. .name {
  1100. font-size: 28rpx;
  1101. font-weight: 800;
  1102. margin-bottom: 4px;
  1103. }
  1104. .status.success {
  1105. color: #6CC48C;
  1106. }
  1107. .status.error {
  1108. color: rgb(245, 108, 108);
  1109. }
  1110. .status.question {
  1111. color: #f9ae3d;
  1112. }
  1113. }
  1114. }
  1115. .audit_img {
  1116. flex-wrap: wrap;
  1117. margin: 0 20rpx;
  1118. .url_css {
  1119. // border: 1px solid #999999;
  1120. border-radius: 10px;
  1121. margin-top: 10px;
  1122. margin-right: 10px;
  1123. .url_img {
  1124. width: 66px;
  1125. height: 66px;
  1126. border-radius: 10px;
  1127. }
  1128. }
  1129. }
  1130. }
  1131. }
  1132. .row2 {
  1133. display: flex;
  1134. .item-content {
  1135. background: #22C572;
  1136. width: 30px;
  1137. height: 30px;
  1138. border-radius: 50%;
  1139. line-height: 30px;
  1140. text-align: center;
  1141. font-size: 12px;
  1142. color: #fff;
  1143. padding: 0 2px;
  1144. margin: 0 auto;
  1145. }
  1146. .status {
  1147. position: absolute;
  1148. top: 0;
  1149. right: 0;
  1150. }
  1151. }
  1152. .row-line {
  1153. width: 1px;
  1154. height: 30px;
  1155. background: #F2F2F2;
  1156. margin: 10rpx 50rpx;
  1157. }
  1158. .audit {
  1159. margin-top: 20rpx;
  1160. }
  1161. }
  1162. .form_top {
  1163. border-bottom: 1px solid #F5F6FA;
  1164. padding-bottom: 10px;
  1165. margin-bottom: 18rpx;
  1166. font-size: 30rpx;
  1167. font-weight: 600;
  1168. }
  1169. .form_view {
  1170. margin: 20rpx 0;
  1171. border-radius: 20rpx;
  1172. background: #F9F9FA;
  1173. padding: 30rpx 20rpx;
  1174. margin-top: 30rpx;
  1175. }
  1176. .label_css {
  1177. font-size: 26rpx;
  1178. color: #878C9C;
  1179. }
  1180. .input_css {
  1181. font-size: 20rpx;
  1182. }
  1183. /deep/.uni-textarea-wrapper {
  1184. height: 200px;
  1185. }
  1186. // .fujian_title{
  1187. // font-size: 34rpx;
  1188. // margin-top: 20px;
  1189. // font-weight: 600;
  1190. // // margin-left: 10px;
  1191. // }
  1192. .headInfo {
  1193. height: 100px;
  1194. background-color: #FFFFFF;
  1195. margin-bottom: 20rpx;
  1196. border-radius: 10px;
  1197. padding: 30rpx 10px;
  1198. display: flex;
  1199. .headInfo_left {
  1200. width: 10%;
  1201. line-height: 60px;
  1202. text-align: center;
  1203. }
  1204. .headInfo_middle {
  1205. width: 60%;
  1206. padding-left: 10px;
  1207. margin-top: 10px;
  1208. }
  1209. .headInfo_right {
  1210. width: 30%;
  1211. line-height: 60px;
  1212. .char_a {
  1213. color: #22C572;
  1214. }
  1215. .char_b {
  1216. color: #FE6430;
  1217. }
  1218. .char_c {
  1219. color: #FB2323;
  1220. }
  1221. .char_a,
  1222. .char_b,
  1223. .char_c {
  1224. font-size: 16px;
  1225. }
  1226. }
  1227. .adopt {
  1228. position: absolute;
  1229. right: 30px;
  1230. top: 60px;
  1231. .adopt_img {
  1232. width: 90px;
  1233. height: 90px;
  1234. }
  1235. }
  1236. .headInfo_title {
  1237. font-size: 19px;
  1238. color: #333333;
  1239. font-weight: 600;
  1240. }
  1241. .headInfo_No {
  1242. color: #878C9C;
  1243. font-size: 13px;
  1244. margin-top: 6px;
  1245. }
  1246. }
  1247. .img_item {
  1248. display: flex;
  1249. width: 100%;
  1250. margin: 10px 0;
  1251. padding: 0 10rpx;
  1252. .imgsign {
  1253. width: 25px;
  1254. height: 25px;
  1255. margin-top: 6px;
  1256. }
  1257. .char_css {
  1258. font-size: 28rpx;
  1259. font-weight: 600;
  1260. display: -webkit-box;
  1261. overflow: hidden;
  1262. /*! autoprefixer: off; */
  1263. -webkit-box-orient: vertical;
  1264. -webkit-line-clamp: 1;
  1265. -webkit-box-orient: vertical;
  1266. text-overflow: ellipsis;
  1267. word-break: break-all;
  1268. }
  1269. .img_size {
  1270. color: #B0B3BF;
  1271. font-size: 12px;
  1272. margin-top: 5px;
  1273. }
  1274. .img_dowload {
  1275. width: 14%;
  1276. color: #22C572;
  1277. text-align: right;
  1278. }
  1279. }
  1280. /deep/.u-upload .u-list-item {
  1281. background: #fff;
  1282. border: 1px dashed #ccc;
  1283. border-radius: 10rpx;
  1284. height: 190rpx;
  1285. width: 190rpx;
  1286. margin: 10rpx;
  1287. text-align: center;
  1288. display: flex;
  1289. align-items: center;
  1290. justify-content: center;
  1291. flex-direction: column;
  1292. }
  1293. </style>