index.vue 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754
  1. <template>
  2. <page-meta root-font-size="system" />
  3. <view class="process_detail_container">
  4. <uni-card>
  5. <view class="main_container">
  6. <uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
  7. <uni-forms ref="$mainForm" :rules="$mainFormRules" :modelValue="mainFormValue" label-position="left"
  8. :label-width="125" :border="true">
  9. <view v-for="(elem, index) in formElements" :key="index">
  10. <uni-forms-item
  11. v-if="!(elem.elementName.endsWith('审批') && '' == elem.defaultValue && ['0', undefined].includes(elem.canEdit)) && ('' != elem.defaultValue || 1 == elem.canEdit) && !(elem.elementName.endsWith('单号') || elem.elementName.endsWith('申请人'))"
  12. :label="elem.elementName" :name="elem.elementId">
  13. <view class="element_value_container">
  14. <view v-if="'1' == elem.canEdit && '8' != elem.type" class="element_value">
  15. <!-- 关联变量输入框 -->
  16. <!-- 计算出差天数 -->
  17. <uni-easyinput v-if="undefined != elem.bindTimeRange && elem.elementName == '出差天数'"
  18. :type="fieldTypeDict[elem.fieldType] || 'text'"
  19. :value="calculateBusinessDifference(elem, formElements)" placeholder=""
  20. :disabled="true"></uni-easyinput>
  21. <uni-easyinput v-else-if="undefined != elem.bindTimeRange"
  22. :type="fieldTypeDict[elem.fieldType] || 'text'"
  23. :value="calculateTimeDifference(elem, formElements)" placeholder=""
  24. :disabled="true"></uni-easyinput>
  25. <!-- 金额转大写 -->
  26. <uni-easyinput v-else-if="elem.elementName.endsWith('大写')" placeholder=""
  27. :value="computedNumberToChineseCurrency(elem, formElements)" :disabled="true"></uni-easyinput>
  28. <!-- 主表关联变量输入框 -->
  29. <!-- 数值输入框 -->
  30. <uni-easyinput v-else-if="'1' == elem.fieldType && elem.BddzText" type="digit"
  31. :value="computedBddzTextValue(elem)" @input="digitInput($event, elem)"
  32. placeholder="" :disabled="true"></uni-easyinput>
  33. <!-- 输入框 -->
  34. <uni-easyinput v-else-if="elem.BddzText"
  35. :type="fieldTypeDict[elem.fieldType] || 'text'"
  36. :value="computedBddzTextValue(elem)" placeholder=""
  37. :disabled="true"></uni-easyinput>
  38. <!-- 数值输入框 -->
  39. <uni-easyinput v-else-if="'0' == elem.type && '1' == elem.fieldType"
  40. :disabled="'0' == elem.canEdit" type="digit"
  41. :placeholder="'0' == elem.canEdit ? '' : '请输入内容'"
  42. @input="digitInput($event, elem)" v-model="elem.defaultValue"
  43. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
  44. <!-- 输入框 -->
  45. <uni-easyinput v-else-if="'0' == elem.type"
  46. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" placeholder="请输入内容"
  47. v-model="elem.defaultValue" type="text"></uni-easyinput>
  48. <!-- 富文本框 -->
  49. <uni-easyinput v-else-if="'1' == elem.type"
  50. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" placeholder="请输入内容"
  51. v-model="elem.defaultValue" type="textarea"></uni-easyinput>
  52. <!-- 下拉框 -->
  53. <picker class="picker_container" v-else-if="'2' == elem.type"
  54. @change="bindPickerChange($event, elem)" :value="elem.defaultValue"
  55. :range="formatDict(elem.typeDetail.enum)">
  56. <view class="uni-input input_text">
  57. <!-- 设置默认值为第一个选项 -->
  58. {{ elem.defaultValue ? elem.defaultValue : elem.defaultValue =
  59. elem.typeDetail.enum[0].enumVname }}
  60. </view>
  61. </picker>
  62. <!-- 数据选择器 -->
  63. <uni-data-checkbox v-else-if="'4' == elem.type" v-model="elem.defaultValue"
  64. :localdata="formatCheckbox(elem)"
  65. @change="changeDataSingleCheckBox($event,elem)"></uni-data-checkbox>
  66. <uni-data-checkbox v-else-if="'5' == elem.type" multiple v-model="elem.defaultValue"
  67. :localdata="formatCheckbox(elem)"
  68. @change="changeDataCheckBox($event,elem)"></uni-data-checkbox>
  69. <!-- 开始时间选择器 -->
  70. <uni-datetime-picker :end="formElements[elem.endElemIndex].defaultValue"
  71. @click.native.stop
  72. @change="setTimeRange(elem)"
  73. v-else-if="'9' == elem.type && undefined != elem.endElemIndex"
  74. v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
  75. <!-- 结束时间选择器 -->
  76. <uni-datetime-picker :start="formElements[elem.startElemIndex].defaultValue"
  77. @click.native.stop
  78. @change="setTimeRange(elem)"
  79. v-else-if="'9' == elem.type && undefined != elem.startElemIndex"
  80. v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
  81. <!-- 年月日 时分秒 -->
  82. <uni-datetime-picker v-else-if="'9' == elem.type"
  83. @click.native.stop
  84. v-model="elem.defaultValue"
  85. type="datetime" />
  86. <!-- 年月日 -->
  87. <uni-datetime-picker v-else-if="'3' == elem.type"
  88. @click.native.stop
  89. v-model="elem.defaultValue"
  90. type="date" />
  91. <!-- 审批签字板 -->
  92. <view v-else-if="'13' == elem.type">
  93. <view v-if="elem.defaultValue == ''">
  94. <uni-row>
  95. <uni-col :span="24">
  96. <button type="primary" @click="handleSignature(index)">手动签名</button>
  97. </uni-col>
  98. <uni-col :span="24">
  99. <button style="margin-top: 5px;" type="primary" @click="onclickAutosealButton(index)">一键签名</button>
  100. </uni-col>
  101. </uni-row>
  102. </view>
  103. <view v-else class="signature_img">
  104. <img style="width: 100%;" mode="widthFix" @click="handleSignature(index)"
  105. :src="config.baseUrlPre + elem.sealImgPath"
  106. :alt="elem.elementName + '签名'" />
  107. </view>
  108. </view>
  109. </view>
  110. <view
  111. v-else-if="typeof elem.sealImgPath === 'string' && elem.sealImgPath.startsWith('/shares')"
  112. class="signature_img">
  113. <img style="width: 100%;" mode="widthFix"
  114. :src="config.baseUrlPre + elem.sealImgPath" />
  115. </view>
  116. <view
  117. v-else-if="typeof elem.defaultValue === 'string' && elem.defaultValue.startsWith('/shares')"
  118. class="signature_img">
  119. <img style="width: 100%;" mode="widthFix"
  120. :src="config.baseUrlPre + elem.defaultValue" />
  121. </view>
  122. <!-- type=25 时显示加密内容和复制按钮 -->
  123. <view v-else-if="elem.type == '25'" class="encrypted_content_container">
  124. <text class="element_value encrypted_text">{{ maskContent(elem.defaultValue) }}</text>
  125. <button class="copy_button" @click="copyEncryptedContent(elem.defaultValue)" size="mini" type="primary">复制</button>
  126. </view>
  127. <text class="element_value" v-else>{{ Array.isArray(elem.defaultValue) ? elem.defaultValue.join(',') : elem.defaultValue }}</text>
  128. </view>
  129. </uni-forms-item>
  130. </view>
  131. </uni-forms>
  132. </view>
  133. </uni-card>
  134. <view class="repeating_table">
  135. <!-- 重复表 -->
  136. <!-- <uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty" spacing="0" padding="0">
  137. <button @click="handleRepeatingForm" type="primary">查看明细</button>
  138. </uni-card> -->
  139. <!-- <uni-card v-if="!(flowInfo.seModel == '0' && repeatingFormNotEmpty)" -->
  140. <uni-card v-if="groupCanEdit && repeatingForm.elementItem.length > 0"
  141. v-for="(table, tableIndex) in repeatingForm.elements" spacing="0" :key="tableIndex">
  142. <uni-forms label-position="left" :label-width="125" :border="true">
  143. <uni-forms-item :name="elem.tableField" v-for="(elem, itemIndex) in table"
  144. :label="repeatingForm.elementItem[itemIndex].elementName.slice(3)" :key="itemIndex">
  145. <!-- 自定义关联变量 -->
  146. <uni-easyinput v-if="repeatingForm.elementItem[itemIndex].bddzText" :placeholder="''"
  147. :type="fieldTypeDict[repeatingForm.elementItem[itemIndex].fieldType.value] || 'text'"
  148. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"
  149. :value="calculateRepeatingFormExpression(elem, table)" :disabled="true"></uni-easyinput>
  150. <!-- 数值输入框 -->
  151. <uni-easyinput v-else-if="'1' == repeatingForm.elementItem[itemIndex].fieldType.value"
  152. placeholder="请输入内容" v-model="elem.defaultValue" @input="digitInput($event, elem)"
  153. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" type="digit"></uni-easyinput>
  154. <!-- 输入框 -->
  155. <uni-easyinput v-else placeholder="请输入内容" v-model="elem.defaultValue" type="'text'"
  156. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
  157. </uni-forms-item>
  158. </uni-forms>
  159. <view class="repeating_table_button_container">
  160. <uni-row>
  161. <uni-col :span="10" :offset="1">
  162. <button @click="addrepeatingFormItem(tableIndex)" type="primary">新增</button>
  163. </uni-col>
  164. <uni-col :span="10" :offset="2">
  165. <button @click="delrepeatingFormItem(tableIndex)"
  166. :disabled="repeatingForm.elements.length <= 1" type="warn">删除</button>
  167. </uni-col>
  168. </uni-row>
  169. </view>
  170. </uni-card>
  171. <!-- <uni-popup v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty" ref="repeatingFormPopup">
  172. <uni-card margin="0px" spacing="0px" padding="0px">
  173. <view class="repeating_table_container">
  174. <uni-table :border="true" stripe>
  175. <uni-tr>
  176. <uni-th align="center" v-for="(item, index) in repeatingForm.elementItem" :key="index">
  177. {{ item.elementName.slice(3, 5) }}
  178. </uni-th>
  179. </uni-tr>
  180. <uni-tr v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
  181. <uni-td align="center" v-for="(elem, itemIndex) in table" :key="itemIndex">
  182. {{ elem.defaultValue }}
  183. </uni-td>
  184. </uni-tr>
  185. </uni-table>
  186. </view>
  187. </uni-card>
  188. </uni-popup> -->
  189. </view>
  190. <!-- 明细 -->
  191. <!-- <view class="repeating_table_detail2">
  192. <uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty">
  193. <uni-section titleFontSize="1.3rem" title="明细" type="line"></uni-section>
  194. <uni-forms ref="baseForm" :modelValue="baseFormData" v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
  195. <uni-forms-item v-for="(item, index) in repeatingForm.elementItem"
  196. :label="item.elementName.slice(3, 5)" :key="index">
  197. <text>{{table[index].defaultValue}}</text>
  198. </uni-forms-item>
  199. </uni-forms>
  200. </uni-card>
  201. </view> -->
  202. <view class="repeating_table_detail">
  203. <!--<uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty">-->
  204. <uni-card v-if="!groupCanEdit && repeatingFormNotEmpty">
  205. <uni-section titleFontSize="1.3rem" title="明细" type="line"></uni-section>
  206. <view class="repeating_table_container">
  207. <uni-table :border="true" stripe>
  208. <uni-tr>
  209. <uni-th align="center" v-for="(item, index) in repeatingForm.elementItem" :key="index">
  210. {{ item.elementName.slice(3, 5) }}
  211. </uni-th>
  212. </uni-tr>
  213. <uni-tr v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
  214. <uni-td align="center" v-for="(elem, itemIndex) in table" :key="itemIndex">
  215. {{ elem.defaultValue }}
  216. </uni-td>
  217. </uni-tr>
  218. </uni-table>
  219. </view>
  220. </uni-card>
  221. </view>
  222. <!-- 附件 -->
  223. <view v-for="(item, index) in fileList" :key="index">
  224. <uni-card v-if="item.files.length != undefined && item.files.length > 0">
  225. <uni-section titleFontSize="1.3rem" title="附件" type="line"></uni-section>
  226. <attachment-list @clickDelete="deleteFile" :canEdit="flowInfo.seModel == '1'"
  227. :attachments="item.files"></attachment-list>
  228. </uni-card>
  229. </view>
  230. <!-- 上传附件 -->
  231. <view v-if="processInfo.tinsId || flowInfo.seModel == '1'" class="file_picker_container">
  232. <uni-card title="上传附件" :extra="`${subFileList.length}/50`" spacing="0">
  233. <uni-file-picker ref="filePicker" v-model="subFileList" :auto-upload="true" mode="list" :limit="50"
  234. file-mediatype="all" @select="handleFileSelect" @progress="handleFileProgress"
  235. @success="handleFileSuccess" @fail="handleFileFail" @delete="handleFileDelete" />
  236. </uni-card>
  237. </view>
  238. <!-- 流转过程 -->
  239. <view>
  240. <uni-card>
  241. <view class="flow_step_container">
  242. <uni-section titleFontSize="1.3rem" title="流转过程" type="line"></uni-section>
  243. <up-steps :current="stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
  244. <view v-for="(step, index) in options" :key="index">
  245. <up-steps-item :contentClass="'redcontent'" v-if="step.state == 3"
  246. :title="step.title + ' 退回'" :desc="step.desc" :key="index" error></up-steps-item>
  247. <up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0"
  248. :title="step.title + ' 撤销'" :desc="step.desc" :key="index" error></up-steps-item>
  249. <up-steps-item v-else-if="index == stepActive" :title="step.title" :desc="step.desc"
  250. :key="index">
  251. <template #icon>
  252. <view class="active_step_circle">
  253. <text class="active_step_text">{{ index + 1 }}</text>
  254. </view>
  255. </template>
  256. </up-steps-item>
  257. <up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
  258. </view>
  259. </up-steps>
  260. </view>
  261. </uni-card>
  262. </view>
  263. <view v-if="processInfo.tinsId">
  264. <view class="remark_container">
  265. <uni-card>
  266. <uni-section titleFontSize="1.3rem" title="环节备注" type="line"></uni-section>
  267. <view class="remark_content">
  268. <uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"
  269. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
  270. </view>
  271. </uni-card>
  272. </view>
  273. </view>
  274. <view v-if="processInfo.tinsId" class="approve_button">
  275. <uni-card spacing="0" padding="0">
  276. <button :disabled="!button_state" :loading="!button_state" type="primary"
  277. @click="handleSubmitProcess('1')">
  278. {{ flowInfo.seModel == '0' ? '通过' : '提交' }}
  279. </button>
  280. </uni-card>
  281. </view>
  282. </view>
  283. <view v-if="processInfo.tinsId && flowInfo.seModel == '0'">
  284. <view class="reject_button">
  285. <uni-card spacing="0" padding="0" :is-shadow="false" :border="false">
  286. <uni-row>
  287. <uni-col :span="11">
  288. <button :disabled="!button_state" :loading="!button_state" type="warn"
  289. @click="handleSubmitProcess('0')">退回上一级</button>
  290. </uni-col>
  291. <uni-col :span="11" :offset="2">
  292. <button :disabled="!button_state" :loading="!button_state" type="warn"
  293. @click="handleSubmitProcess('2')">退回发起人</button>
  294. </uni-col>
  295. </uni-row>
  296. </uni-card>
  297. </view>
  298. </view>
  299. <view v-else-if="isCancel">
  300. <view class="remark_container">
  301. <uni-card>
  302. <uni-section titleFontSize="1.3rem" title="撤销备注" type="line"></uni-section>
  303. <view class="remark_content">
  304. <uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"
  305. placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
  306. </view>
  307. </uni-card>
  308. </view>
  309. <view class="cancel_button_container" >
  310. <uni-card spacing="0" padding="0">
  311. <button :disabled="!button_state" :loading="!button_state" type="warn"
  312. @click="handleCancelProcess">撤销</button>
  313. </uni-card>
  314. </view>
  315. </view>
  316. <view style="height: 5px; margin-top: 20px;"></view>
  317. <!-- 签字版弹出层 -->
  318. <uni-popup ref="signaturePopup" @maskClick="closeSignaturePopup">
  319. <view class="signature_container" :class="{ 'signature_container_landscape': isLandscape }">
  320. <view class="signature_content">
  321. <l-signature ref="signatureRef" v-if="signaturePopupShow" :landscape="isLandscape" :penSize="8"
  322. :minLineWidth="4" :maxLineWidth="12" :openSmooth="true" :preferToDataURL="true"
  323. backgroundColor="#ffffff" penColor="black"></l-signature>
  324. </view>
  325. <view class="signature_button_container">
  326. <uni-row :gutter="10">
  327. <uni-col :span="6">
  328. <button type="warn" @click="onclickSignatureButton('undo')">撤销</button>
  329. </uni-col>
  330. <uni-col :span="6">
  331. <button type="warn" @click="onclickSignatureButton('clear')">清空</button>
  332. </uni-col>
  333. <uni-col :span="6">
  334. <button type="primary" @click="onclickSignatureButton('save')">保存</button>
  335. </uni-col>
  336. <uni-col :span="6">
  337. <button @click="onclickSignatureButton('landscape')">全屏</button>
  338. </uni-col>
  339. <!-- <uni-col :span="24">
  340. <button type="primary" @click="onclickAutosealButton()">一键签名</button>
  341. </uni-col> -->
  342. </uni-row>
  343. </view>
  344. </view>
  345. </uni-popup>
  346. </template>
  347. <script setup lang="ts">
  348. import { computed, onMounted, reactive, ref, nextTick } from 'vue'
  349. import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  350. import { LSignatureToTempFilePathOptions, LSignatureToFileSuccess } from '@/uni_modules/lime-signature'
  351. import attachmentList from '@/components/ygoa/attachmentList.vue'
  352. import config from '@/config.js'
  353. import $tab from '@/plugins/tab.js'
  354. import $modal from '@/plugins/modal.js'
  355. import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow, cancelProcessFlow, uploadSignatureImg, uploadSignatureBoardImg, uploadFile, getSeal, getTacheInfo } from '@/api/process.js'
  356. import { getAttendanceSegment } from '@/api/work.js'
  357. import { useUserStore } from '@/store/user.js'
  358. import { getLoginInfo, getSession, setSession } from '@/utils/auth.js'
  359. import { reLogin, keepSession } from '@/api/login.js'
  360. import { convertToChineseCurrency } from '@/utils/ygoa.js'
  361. import { calCommonExp } from '@/utils/rpn.js'
  362. const fieldTypeDict = {
  363. '0': 'text',
  364. '1': 'digit'
  365. }
  366. const userStore = useUserStore()
  367. const processInfo = reactive({
  368. insId: '',
  369. insName: '',
  370. control: 1,
  371. username: '',
  372. reqOffice: 0,
  373. reqRemark: 0,
  374. tinsId: undefined,
  375. // tinsObj: {}//存储流转最后一步的对象
  376. })
  377. onLoad(({ insId, tinsId, insName, control }) => {
  378. // 获取传入的标题参数
  379. const title = insName || '流程信息';
  380. processInfo.insId = insId
  381. processInfo.insName = insName
  382. processInfo.control = control
  383. if (tinsId) {
  384. processInfo['tinsId'] = tinsId
  385. }
  386. // 设置导航栏标题
  387. uni.setNavigationBarTitle({
  388. title: title
  389. });
  390. })
  391. onShow(() => {
  392. keepSession().then(res => {
  393. if (typeof res === 'number') {
  394. return
  395. } else {
  396. const loginInfo = getLoginInfo()
  397. //如果有登录信息,就自动登录刷session
  398. if (Object.keys(loginInfo).length !== 0) {
  399. reLogin(loginInfo.username, loginInfo.password).then((res) => {
  400. if ("ok" === res.data) {
  401. setSession(res.cookies[0].split("=")[1].split(";")[0]);
  402. }
  403. }).catch(res => {
  404. console.log(res);
  405. })
  406. } else {
  407. $tab.reLaunch({ url: '/pages/login' })
  408. }
  409. }
  410. })
  411. .catch(err => {
  412. console.log('err', err);
  413. // $tab.navigateBack()
  414. })
  415. })
  416. onMounted(() => {
  417. initProcessForm() // 获取表单数据
  418. initProcessInfo() // 获取流程数据
  419. })
  420. //分享转发事件
  421. onShareAppMessage((res) => {
  422. if (res.from === 'menu') {
  423. // console.log('res', res)
  424. }
  425. let url = '/pages/tabbar-process/index?insId=' + processInfo.insId + '&insName=' + processInfo.insName + '&control=' + processInfo.control
  426. // console.log('url',url);
  427. return {
  428. title: processInfo.insName,
  429. path: url
  430. }
  431. })
  432. const repeatingForm = ref({
  433. elements: [],
  434. elementItem: [],
  435. })
  436. // 是否有重复表
  437. const repeatingFormNotEmpty = ref(false)
  438. function repeatingFormHasValue() {
  439. if (repeatingForm.value === undefined) return
  440. if (repeatingForm.value.elementItem.length <= 0) return
  441. repeatingForm.value.elements.forEach(({ defaultValue }) => {
  442. if (defaultValue != "") {
  443. repeatingFormNotEmpty.value = true
  444. return new Promise((resolve, reject) => {
  445. resolve(repeatingFormNotEmpty)
  446. })
  447. }
  448. })
  449. }
  450. // 新增重复表表单
  451. function addrepeatingFormItem(index) {
  452. // 直接克隆模板对象,并确保 groupid 正确
  453. const table = repeatingForm.value.elementItem.map((templateItem) => {
  454. const item = Object.assign({}, templateItem);
  455. item.defaultValue = "";
  456. // 关键修复:确保新行拥有和模板一样的 groupid
  457. // 兼容大小写:优先使用 groupId,如果没有则使用 groupid
  458. if (!item['groupid']) {
  459. item['groupid'] = item['groupId'] || '';
  460. }
  461. if (templateItem.bddzText != '') {
  462. const mulItem = templateItem.bddzText.split('*')
  463. // 保存关联数据索引
  464. item['bddzText'] = mulItem.map(item => {
  465. // item['operation '].operands = mulItem.map(item => {
  466. return repeatingForm.value.elementItem.findIndex(({ elementName }) => item == elementName)
  467. })
  468. }
  469. return item
  470. })
  471. repeatingForm.value.elements.splice(index + 1, 0, table)
  472. }
  473. // 删除重复表表单
  474. function delrepeatingFormItem(index) {
  475. $modal.confirm('', '确认删除该重复表数据')
  476. .then(() => {
  477. repeatingForm.value.elements.splice(index, 1)
  478. // $repeatingForms.value.splice(index, 1)
  479. }).catch(() => { })
  480. }
  481. const formElements = ref([])
  482. const formInfo = ref({
  483. formElements: [],
  484. formId: '',
  485. formInsId: ''
  486. })
  487. const fileList = ref([])
  488. const isCancel = ref(false)
  489. const groupCanEdit = ref(false)
  490. // 获取流程表单
  491. function initProcessForm() {
  492. //debugger
  493. if (processInfo.tinsId) {
  494. // 待办审批流程表单数据todo
  495. getProcessFormInfoInFlow(userStore.user.useId, processInfo).then(({ returnParams }) => {
  496. console.log('returnParams', returnParams);
  497. const modifyReturnParams = (returnParams) => {
  498. return returnParams.formElements.map(element => {
  499. if (element.type === "5") {
  500. // 将 defaultValue 按逗号分割成数组
  501. element.defaultValue = element.defaultValue.split(",");
  502. }
  503. return element;
  504. });
  505. };
  506. formElements.value = modifyReturnParams(returnParams)
  507. formInfo.value = returnParams.formInfo[0]
  508. repeatingForm.value = returnParams.repeatingForm
  509. getMainFormRule()
  510. computedMainFormValue()
  511. if (returnParams.isCancel == 1) {
  512. isCancel.value = true
  513. }
  514. if (returnParams.groupCanEdit == 1) {
  515. groupCanEdit.value = true
  516. }
  517. if (groupCanEdit.value && repeatingForm.value.elements.length <= 0){
  518. addrepeatingFormItem(0)
  519. //console.log('repeatingForm.value.elements', repeatingForm.value.elements);
  520. }
  521. repeatingFormHasValue()
  522. bindTimeRangeData()
  523. remark.value = flowInfo.value.seModel == '0' ? '同意' : '重新提交'
  524. })
  525. } else {
  526. // 我的 在办 办结流程表单数据 todo
  527. getProcessFormInfo(userStore.user.useId, processInfo.insId).then(({ returnParams }) => {
  528. formElements.value = returnParams.formElements
  529. repeatingForm.value = returnParams.repeatingForm
  530. fileList.value = returnParams.fileList
  531. if (returnParams.isCancel == 1) {
  532. isCancel.value = true
  533. }
  534. repeatingFormHasValue()
  535. })
  536. }
  537. }
  538. const options = ref([])
  539. const stepActive = ref(-1)
  540. const flowInfo = ref({
  541. seModel: '0'
  542. })
  543. // 获取流程信息
  544. function initProcessInfo() {
  545. //debugger
  546. getProcessFlow(userStore.user.useId, processInfo).then(({ returnParams }) => {
  547. options.value = returnParams.list.map((item, index) => {
  548. const { tmodelName, name, createdate, finishdate, remark, state, task, groupName, positionName, processType } = item
  549. if (state == 1) {
  550. stepActive.value = index
  551. }
  552. let title = tmodelName + (name == '' ? '' : ' ( ' + name + ' ' + groupName + '-' + positionName + ' )')
  553. if(state != 1) {
  554. title += processType== 1 ? ' \uD83D\uDCF1' : ' \uD83D\uDCBB'
  555. }
  556. let desc = '创建时间: ' + createdate
  557. + (finishdate == '' ? '' : '\n办理时间: ' + finishdate)
  558. + (remark == '' ? '' : '\n环节意见: ' + remark)
  559. if(task && task.length > 0) {
  560. desc += '\n抄送信息'
  561. task.forEach((taskitem) => {
  562. desc += '\n抄送对象:(' + taskitem.username + ') 抄送时间: ' + taskitem.createdate
  563. })
  564. }
  565. return {
  566. title,
  567. desc,
  568. state
  569. }
  570. })
  571. if (stepActive.value === -1) stepActive.value = returnParams.list.length
  572. // 获取未完成过程
  573. if (processInfo.tinsId) {
  574. getProcessFlowInfo(userStore.user.useId, processInfo).then(({ returnParams }) => {
  575. options.value.push({ title: returnParams.nextTmodels[0].nextTmodelName })
  576. flowInfo.value = returnParams.flow[0]
  577. fileList.value = [
  578. { files: returnParams.flow[0].files }
  579. ]
  580. processInfo.reqOffice = returnParams.tmodel.reqOffice
  581. processInfo.reqRemark = returnParams.tmodel.reqRemark
  582. })
  583. }
  584. console.log('options', options.value);
  585. })
  586. }
  587. // 下拉框
  588. function bindPickerChange(e, item) {
  589. const index = e.detail.value;
  590. item.defaultValue = item.typeDetail.enum[index].enumVname
  591. }
  592. function formatDict(dict) {
  593. return dict.map(({ enumVname }) => enumVname)
  594. }
  595. //数据选择器
  596. function formatCheckbox(elem) {
  597. let dict = elem.typeDetail.enum
  598. // elem['checkBox'] = ''
  599. return dict.map((item, index) => ({
  600. text: item.enumVname,
  601. value: item.enumVname
  602. }));
  603. }
  604. function changeDataCheckBox(e, elem) {
  605. elem['checkBox'] = e.detail.value.join(",")
  606. // console.log(e)
  607. }
  608. //单选框切换事件
  609. function changeDataSingleCheckBox(){
  610. }
  611. const timeRangeItems = ref([
  612. ['开始时间', '结束时间', '多少小时'],
  613. ['出发时间', '预计返回时间'],
  614. ['出差时间', '返回时间', '出差天数'],
  615. ['出门时间', '预计返回时间'],
  616. ['开始时间', '结束时间', '合计小时'],
  617. ])
  618. // 关联时间变量
  619. function bindTimeRangeData() {
  620. return new Promise<void>((resolve) => {
  621. timeRangeItems.value.forEach((range) => {
  622. const [startName, endName, bindName] = range;
  623. // 找到 startName 和 endName 的索引
  624. const startIndex = formElements.value.findIndex((item) => item.elementName === startName);
  625. const endIndex = formElements.value.findIndex((item) => item.elementName === endName);
  626. const formatDate = (date) => {
  627. const pad = (num) => num.toString().padStart(2, '0');
  628. return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  629. }
  630. // 只有找到 startName 和 endName 后,才检查 bindName
  631. if (startIndex !== -1 && endIndex !== -1) {
  632. if (formElements.value[startIndex].defaultValue == '') {
  633. formElements.value[startIndex].defaultValue = formatDate(new Date())
  634. } else {
  635. formElements.value[startIndex].defaultValue = formatDate(new Date(formElements.value[startIndex].defaultValue))
  636. }
  637. if (bindName) {
  638. const bindIndex = formElements.value.findIndex((item) => item.elementName === bindName);
  639. if (bindIndex !== -1) {
  640. // 所有匹配项都存在,保存索引
  641. formElements.value[startIndex].endElemIndex = endIndex;
  642. formElements.value[endIndex].startElemIndex = startIndex;
  643. formElements.value[bindIndex].bindTimeRange = {
  644. startIndex,
  645. endIndex
  646. };
  647. setAttendanceSegment() // 获取班次信息
  648. }
  649. } else {
  650. // 没有 bindName,仅保存 start 和 end 的索引
  651. formElements.value[startIndex].endElemIndex = endIndex;
  652. formElements.value[endIndex].startElemIndex = startIndex;
  653. }
  654. // TODO 加班开始时间默认当天下班时间 请假时间默认当天上班时间
  655. }
  656. });
  657. resolve(); // 返回一个 resolved 状态的 Promise
  658. });
  659. }
  660. // 计算时间差
  661. function calculateBusinessDifference(item, form) {
  662. return item.defaultValue = (calculateTimeDifference(item, form) / 7).toFixed(2)
  663. }
  664. function calculateTimeDifference(item, form) {
  665. // 获取 开始时间 和 结束时间
  666. const { startIndex, endIndex } = item.bindTimeRange;
  667. const startTime = new Date(form[startIndex].defaultValue);
  668. const endTime = new Date(form[endIndex].defaultValue);
  669. // 检查时间是否合法
  670. if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
  671. return item.defaultValue = 0
  672. }
  673. // 请假申请的时间差 表单项为合计小时
  674. const type = item.elementName == '合计小时' ? '非工作时间' : '工作时间'
  675. // 计算时间差
  676. const timeDifferenceInHours = calculateWorkingHours(startTime, endTime, type);
  677. // const timeDifferenceInMs = endTime - startTime;
  678. // let timeDifferenceInHours = (timeDifferenceInMs / (1000 * 60 * 60)).toFixed(1);
  679. // let timeDifferenceInHours = (timeDifferenceInMs / (1000 * 60 * 60))
  680. // // 计算小数部分
  681. // const decimalPart = timeDifferenceInHours - Math.floor(timeDifferenceInHours)
  682. // if (decimalPart >= 0.5) {
  683. // // 如果小数部分大于等于 0.5,向上取整到 0.5 的倍数
  684. // timeDifferenceInHours = Math.floor(timeDifferenceInHours) + 0.5;
  685. // } else {
  686. // // 如果小数部分小于 0.5,向下取整到 0.5 的倍数
  687. // timeDifferenceInHours = Math.floor(timeDifferenceInHours);
  688. // }
  689. // 保存到 defaultValue
  690. return item.defaultValue = Number(timeDifferenceInHours.toFixed(2));
  691. }
  692. let workingPeriods = [
  693. { start: "09:00", end: "12:00" }, // 上午
  694. { start: "13:30", end: "17:30" }, // 下午
  695. ]
  696. let workDays = [1, 2, 3, 4, 5, 6, 0] // 0为周日
  697. // 获取考勤时间段
  698. function setAttendanceSegment() {
  699. getAttendanceSegment(userStore.user.unitId).then(({ returnParams }) => {
  700. const workTime = returnParams[0].work_time.split(';')
  701. let workDayArr = returnParams[0].work_days.split(',')
  702. let workTimeArr = []
  703. for (const time of workTime) {
  704. if (time == '') continue
  705. const times = time.split(',')
  706. const obj = {
  707. start: times[0],
  708. end: times[1]
  709. }
  710. workTimeArr.push(obj)
  711. }
  712. if (workTimeArr.length != 0) {
  713. workingPeriods = workTimeArr
  714. }
  715. workDayArr = workDayArr.map(item => Number(item))
  716. const sundayIndex = workDayArr.findIndex(item => item == 7)
  717. // console.log('workDays: ', workDayArr);
  718. if (sundayIndex != -1) {
  719. workDayArr[sundayIndex] = 0
  720. }
  721. if (workDayArr.length != 0) {
  722. workDays = workDayArr
  723. }
  724. })
  725. }
  726. function calculateWorkingHours(startTime, endTime, type) {
  727. // 将时间字符串解析为分钟数
  728. const formatTime = (timeString) => {
  729. const [hours, minutes] = timeString.split(":").map(Number)
  730. return hours * 60 + minutes
  731. };
  732. // 计算两个时间段的重叠部分
  733. const calculateOverlap = (start1, end1, start2, end2) => {
  734. const overlapStart = Math.max(start1, start2)
  735. const overlapEnd = Math.min(end1, end2)
  736. return Math.max(0, overlapEnd - overlapStart) // 如果无重叠返回 0
  737. };
  738. // 将 Date 转化为当天的分钟数
  739. const dateToMinutes = (date) => date.getHours() * 60 + date.getMinutes()
  740. // 判断日期是否是工作日
  741. const isRestdays = (date) => !workDays.includes(date.getDay())
  742. // 确保 startTime 和 endTime 是 Date 类型
  743. if (!(startTime instanceof Date) || !(endTime instanceof Date)) {
  744. throw new Error("startTime 和 endTime 必须是 Date 类型")
  745. }
  746. // 将时间范围分解为每天的计算
  747. const startDate = new Date(startTime)
  748. const endDate = new Date(endTime)
  749. startDate.setHours(0, 0, 0, 0)
  750. endDate.setHours(0, 0, 0, 0)
  751. let totalMinutes = 0
  752. // 遍历时间范围的每一天
  753. for (
  754. let currentDate = new Date(startDate);
  755. currentDate <= endDate;
  756. currentDate.setDate(currentDate.getDate() + 1)
  757. ) {
  758. const isStartDay = currentDate.getTime() === startDate.getTime();
  759. const isEndDay = currentDate.getTime() === endDate.getTime();
  760. // 当天的起始和结束时间
  761. const dayStart = isStartDay ? dateToMinutes(startTime) : 0;
  762. const dayEnd = isEndDay ? dateToMinutes(endTime) : 1440; // 1440 = 24 * 60
  763. // TODO 改为配置选择
  764. if (type == "工作时间") {
  765. // 如果当前日期不是工作日,跳过
  766. if (isRestdays(currentDate)) continue;
  767. // 计算工作时间段内的时间
  768. workingPeriods.forEach((period) => {
  769. const periodStart = formatTime(period.start);
  770. const periodEnd = formatTime(period.end);
  771. totalMinutes += calculateOverlap(dayStart, dayEnd, periodStart, periodEnd);
  772. });
  773. } else if (type == "非工作时间") {
  774. if (isRestdays(currentDate)) {
  775. // 计算非工作日时间差
  776. const midnight = new Date(currentDate)
  777. midnight.setHours(24, 0, 0, 0)
  778. const timeDiffInMs = dayEnd - dayStart
  779. totalMinutes += timeDiffInMs
  780. continue
  781. }
  782. // 计算非工作时间段的时间
  783. let nonWorkingMinutes = 0;
  784. let current = dayStart;
  785. for (const period of workingPeriods) {
  786. const periodStart = formatTime(period.start);
  787. const periodEnd = formatTime(period.end);
  788. if (current < periodStart) {
  789. nonWorkingMinutes += calculateOverlap(current, dayEnd, current, periodStart);
  790. }
  791. current = Math.max(current, periodEnd);
  792. }
  793. if (current < dayEnd) {
  794. nonWorkingMinutes += dayEnd - current;
  795. }
  796. totalMinutes += nonWorkingMinutes;
  797. }
  798. }
  799. // 转换为小时
  800. return totalMinutes / 60;
  801. }
  802. function setTimeRange(e) {
  803. // console.log('setTimeRange', e)
  804. }
  805. /**
  806. * 加密内容显示 - 将内容用 * 号替换
  807. * @param content 原始内容
  808. * @returns 加密后的字符串
  809. */
  810. function maskContent(content) {
  811. if (!content) return '';
  812. const str = String(content);
  813. if (str.length === 0) return '';
  814. // 全部用 * 替换
  815. return '*'.repeat(str.length);
  816. }
  817. /**
  818. * 复制加密内容到剪贴板
  819. * @param content 要复制的原始内容
  820. */
  821. function copyEncryptedContent(content) {
  822. if (!content) {
  823. $modal.msg('没有可复制的内容');
  824. return;
  825. }
  826. // #ifdef H5
  827. const input = document.createElement('input');
  828. input.value = String(content);
  829. document.body.appendChild(input);
  830. input.select();
  831. try {
  832. document.execCommand('copy');
  833. $modal.msgSuccess('复制成功');
  834. } catch (err) {
  835. $modal.msgError('复制失败');
  836. } finally {
  837. document.body.removeChild(input);
  838. }
  839. // #endif
  840. // #ifdef APP-PLUS || MP-WEIXIN
  841. uni.setClipboardData({
  842. data: String(content),
  843. success: () => {
  844. $modal.msgSuccess('复制成功');
  845. },
  846. fail: () => {
  847. $modal.msgError('复制失败');
  848. }
  849. });
  850. // #endif
  851. }
  852. // 生成人民币大写
  853. function computedNumberToChineseCurrency(item, form) {
  854. const elem = form.find(elem => !elem.elementName.endsWith('大写') && (elem.BddzText == item.BddzText || elem.elementName == item.BddzText.slice(3)))
  855. if(elem != null) {
  856. console.log("大写转换")
  857. return item.defaultValue = convertToChineseCurrency(elem.defaultValue);
  858. } else {
  859. return '';
  860. }
  861. }
  862. // 按照公式统计数据
  863. function computedBddzTextValue(item) {
  864. const mainIndex = formElements.value.findIndex(({ elementName }) => elementName == item.BddzText.slice(3))
  865. const reIndex = repeatingForm.value.elementItem.findIndex(({ elementName }) => elementName == item.BddzText)
  866. if (item.defaultValue) {
  867. if (mainIndex != -1) {
  868. return item.defaultValue = formElements.value[mainIndex].defaultValue
  869. }
  870. if (reIndex != -1) {
  871. return computedValueToRepeatingForm(item)
  872. }
  873. }
  874. }
  875. // 统计重复表数据
  876. function computedValueToRepeatingForm(item) {
  877. const index = repeatingForm.value.elementItem.findIndex(({ elementName }) => elementName.slice(3) == item.BddzText.slice(3))
  878. let result = 0
  879. for (const formItem of repeatingForm.value.elements) {
  880. result += Number(formItem[index].defaultValue) || 0
  881. }
  882. if (item.defaultValue) {
  883. return item.defaultValue = Number(result.toFixed(2))
  884. }
  885. }
  886. function digitInput(event, item) {
  887. // 获取输入框当前的值
  888. let currentValue = event;
  889. // 过滤非数字和小数点的字符
  890. currentValue = currentValue.replace(/[^0-9.]/g, '');
  891. // 处理前导零的情况:
  892. // 如果当前值没有小数点(即是整数),去掉前导零
  893. if (currentValue.indexOf('.') === -1) {
  894. currentValue = currentValue.replace(/^0+(?=\d)/, ''); // 只有当有数字跟随时才去掉前导零
  895. } else {
  896. // 如果包含小数点,处理整数部分的前导零,保留小数部分
  897. let parts = currentValue.split('.');
  898. parts[0] = parts[0].replace(/^0+(?=\d)/, ''); // 只去掉整数部分的前导零
  899. currentValue = parts.join('.'); // 重新拼接
  900. }
  901. // 防止多个小数点
  902. const parts = currentValue.split('.');
  903. let finalValue;
  904. if (parts.length > 2) {
  905. // 如果有多个小数点,保留第一个小数点及后续数字
  906. finalValue = parts[0] + '.' + parts[1];
  907. } else {
  908. finalValue = currentValue;
  909. }
  910. // 更新最终结果到 item
  911. nextTick(() => {
  912. item.defaultValue = finalValue;
  913. event = finalValue; // 更新输入框的值
  914. });
  915. return event;
  916. }
  917. // 计算重复表关联变量表达式结果值
  918. function calculateRepeatingFormExpression(item, form) {
  919. // 提取表达式中的变量名
  920. const variablePattern = /my:[\u4e00-\u9fa5]+/g;
  921. let match;
  922. let expression = item.BddzText
  923. // 替换表达式中的变量
  924. while ((match = variablePattern.exec(item.BddzText)) !== null) {
  925. const variableName = match[0]; // 完整变量名
  926. // 找到 重复表 中对应的索引
  927. const index = repeatingForm.value.elementItem.findIndex(item => item.elementName === variableName);
  928. if (index !== -1) {
  929. const value = form[index]?.defaultValue || 0;
  930. expression = expression.replace(match[0], value);
  931. } else {
  932. // 未匹配到的变量替换为 0
  933. expression = expression.replace(match[0], 0);
  934. }
  935. }
  936. if (/[^0-9\+\-\*\/\(\)\.]/.test(expression)) {
  937. console.error('错误的表达式:', expression);
  938. $modal.msg('自动计算错误,请手动输入')
  939. return item.defaultValue = 0;
  940. }
  941. return item.defaultValue = Number(calCommonExp(expression).toFixed(2)); // 返回填充后的表达式
  942. }
  943. const signaturePopup = ref(null)
  944. const signatureRef = ref(null)
  945. const signaturePopupShow = ref(false)
  946. const isLandscape = ref(false)
  947. const signatureItemIndex = ref(-1)
  948. function handleSignature(index) {
  949. signatureItemIndex.value = index
  950. signaturePopup.value.open()
  951. initSignature()
  952. }
  953. // 初始化签字板
  954. function initSignature() {
  955. signaturePopupShow.value = false
  956. setTimeout(() => {
  957. signaturePopupShow.value = true
  958. }, 100)
  959. }
  960. // 点击签字板按钮
  961. function onclickSignatureButton(event) {
  962. // console.log('onclickSignatureButton: ', event);
  963. switch (event) {
  964. case 'undo':
  965. signatureRef.value.undo()
  966. break;
  967. case 'clear':
  968. signatureRef.value.clear()
  969. break;
  970. case 'save':
  971. signatureRef.value.canvasToTempFilePath({
  972. success: (res : LSignatureToFileSuccess) => {
  973. if (res.isEmpty) {
  974. $modal.msgError('签名不能为空!')
  975. return
  976. }
  977. // 判断上传文件是否是base64
  978. if (res.tempFilePath.substring(0, 'data:image/png;base64,'.length) == 'data:image/png;base64,') {
  979. const _fileData = res.tempFilePath
  980. uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
  981. .then(({ returnParams }) => {
  982. formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
  983. formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
  984. signatureItemIndex.value = -1
  985. signaturePopupShow.value = false
  986. signaturePopup.value.close()
  987. })
  988. } else {
  989. // 转 base64
  990. wx.getFileSystemManager().readFile({
  991. filePath: res.tempFilePath,
  992. encoding: 'base64',
  993. success: fileData => {
  994. const _fileData = 'data:image/png;base64,' + fileData.data
  995. uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
  996. .then(({ returnParams }) => {
  997. formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
  998. formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
  999. signatureItemIndex.value = -1
  1000. signaturePopupShow.value = false
  1001. signaturePopup.value.close()
  1002. })
  1003. }
  1004. })
  1005. }
  1006. }
  1007. } as LSignatureToTempFilePathOptions)
  1008. break;
  1009. case 'landscape':
  1010. isLandscape.value = !isLandscape.value
  1011. initSignature()
  1012. break;
  1013. }
  1014. }
  1015. function onclickAutosealButton(index) {
  1016. if (signatureItemIndex.value != -1) index = signatureItemIndex.value
  1017. getSeal(userStore.user.useId).then(({ returnParams }) => {
  1018. formElements.value[index].defaultValue = returnParams.sealFileId.universalid
  1019. formElements.value[index].sealImgPath = returnParams.sealFileId.path
  1020. signaturePopupShow.value = false
  1021. signaturePopup.value.close()
  1022. })
  1023. }
  1024. function closeSignaturePopup() {
  1025. signatureItemIndex.value = -1
  1026. signaturePopupShow.value = false
  1027. }
  1028. const repeatingFormPopup = ref(null)
  1029. // 查看重复表
  1030. function handleRepeatingForm() {
  1031. repeatingFormPopup.value.open()
  1032. }
  1033. // 附件管理
  1034. function deleteFile(file) {
  1035. // console.log('deleteFile: ',file);
  1036. fileList.value[0].files = fileList.value[0].files.filter(({ fileId }) => !(fileId == file.fileId))
  1037. }
  1038. // 上传附件
  1039. const subFileList = ref([]) // 文件列表
  1040. const subFileSeqs = ref([])
  1041. async function handleFileSelect(files) { // 新增文件
  1042. // console.log('handleFileSelect', files.tempFiles)
  1043. files.tempFiles.forEach(file => {
  1044. const data = {
  1045. name: file.name,
  1046. filePath: file.path,
  1047. }
  1048. uploadFile(data)
  1049. .then(res => {
  1050. file.seq = res.returnParams
  1051. subFileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
  1052. subFileList.value.push(file)
  1053. $modal.msgSuccess('文件' + data.name + '上传成功')
  1054. })
  1055. .catch(err => {
  1056. $modal.msgError('文件' + data.name + '上传失败,请删除重新上传')
  1057. switch (err) {
  1058. case -201:
  1059. console.log('文件上传失败 未找到该文件');
  1060. break;
  1061. case -20201:
  1062. console.log('文件上传失败 返回值不是JSON字符串');
  1063. break;
  1064. }
  1065. })
  1066. })
  1067. // console.log('UploadFiles', files.tempFiles);
  1068. }
  1069. // 文件上传触发事件
  1070. function handleFileProgress(file, progress) {
  1071. // console.log('handleFileProgress', file, progress);
  1072. }
  1073. function handleFileSuccess(file, res) {
  1074. // console.log('handleFileSuccess', file, res);
  1075. }
  1076. function handleFileFail(file, err) {
  1077. // console.log('handleFileFail', file, err);
  1078. }
  1079. function handleFileDelete(file) { // 移除文件
  1080. // console.log('handleDelete', file)
  1081. subFileSeqs.value.splice(subFileSeqs.value.findIndex(({ path }) => path == file.tempFilePath))
  1082. }
  1083. const $mainForm = ref(null)
  1084. const $mainFormRules = ref({})
  1085. const mainFormValue = ref({})
  1086. const repeatingFormsValue = ref([])
  1087. const formatTypeDict = {
  1088. '0': 'string',
  1089. '1': 'number'
  1090. }
  1091. function computedMainFormValue() {
  1092. // 设置主表校验数据
  1093. mainFormValue.value = computed(() => {
  1094. const obj = {};
  1095. formElements.value.forEach(elem => {
  1096. if (!('0' != elem.canEdit && '8' != elem.type)) return
  1097. obj[elem.elementId] = elem.defaultValue;
  1098. });
  1099. return obj;
  1100. }).value
  1101. }
  1102. // 获取主表校验规则
  1103. function getMainFormRule() {
  1104. $mainFormRules.value = computed(() => {
  1105. const obj = {};
  1106. formElements.value.forEach(elem => {
  1107. if (!('0' != elem.canEdit && '8' != elem.type)) return
  1108. let labelName = elem.elementName
  1109. let errorMessage = ''
  1110. if ('13' == elem.type) errorMessage = '请完成签名'
  1111. obj[elem.elementId] = {
  1112. rules: [
  1113. {
  1114. required: '1' == elem.noNull,
  1115. errorMessage,
  1116. },
  1117. // {
  1118. // format: formatTypeDict[elem.fieldType] || 'string',
  1119. // }
  1120. ],
  1121. label: labelName
  1122. };
  1123. });
  1124. return obj;
  1125. }).value
  1126. }
  1127. function validateRepeatingForm2() {
  1128. // 设置重复表校验数据
  1129. // repeatingForm.value.elements 是二维数组,需要检查每一行是否有可编辑字段
  1130. /*const hasEditableRows = repeatingForm.value.elements.some(row =>
  1131. row.some(field => field.canEdit == "1")
  1132. )
  1133. if (!hasEditableRows) return true*/
  1134. repeatingFormsValue.value = repeatingForm.value.elements.map((item, index) => {
  1135. return computed(() => {
  1136. const obj = {};
  1137. item.forEach(({ tableField, defaultValue }) => {
  1138. obj[tableField] = defaultValue;
  1139. });
  1140. return obj;
  1141. }).value
  1142. })
  1143. let flag = true
  1144. for (let i = 0; i < repeatingFormsValue.value.length; i++) {
  1145. const item = repeatingFormsValue.value[i]
  1146. // 遍历 elementItem 来获取字段名称,确保顺序一致
  1147. for (let j = 0; j < repeatingForm.value.elementItem.length; j++) {
  1148. const fieldElement = repeatingForm.value.elementItem[j]
  1149. const fieldName = fieldElement.tableField || fieldElement.name
  1150. const fieldValue = item[fieldName]
  1151. // 只有当 noNull 等于 '1' 时才进行非空验证
  1152. if (fieldElement.noNull == '1' && (fieldValue == '' || fieldValue === undefined || fieldValue === null)) {
  1153. const name = fieldElement.elementName.slice(3)
  1154. $modal.msgError(`详情表${name}不能为空`)
  1155. return false
  1156. }
  1157. }
  1158. }
  1159. return flag
  1160. }
  1161. const button_state = ref(true)
  1162. const remark = ref('')
  1163. function handleSubmitProcess(result) {
  1164. let content = '确认退回'
  1165. if (result == "1") {
  1166. content = '确认通过'
  1167. }
  1168. $modal.confirm(content).then(() => {
  1169. // 如果是退回操作且备注为"同意",则清空备注
  1170. if ((result == '0' || result == '2') && remark.value == '同意') {
  1171. remark.value = ''
  1172. }
  1173. button_state.value = false
  1174. if (result == "1") {
  1175. // 处理主表校验数据
  1176. mainFormValue.value = computed(() => {
  1177. const obj = {};
  1178. formElements.value.forEach(elem => {
  1179. let value = elem.defaultValue
  1180. if (!('0' != elem.canEdit && '8' != elem.type)) return
  1181. if ('5' == elem.type && Array.isArray(elem.defaultValue)) {
  1182. value = elem.defaultValue.join(",")
  1183. }
  1184. obj[elem.elementId] = value;
  1185. });
  1186. return obj;
  1187. }).value
  1188. // console.log('$mainForm.value: ', $mainForm.value);
  1189. // 主表数据校验
  1190. $mainForm.value.validate().then(res => {
  1191. // 重复表数据校验
  1192. /*const isGroupEditable = groupCanEdit.value;
  1193. const repeatingFormValid = isGroupEditable ? validateRepeatingForm2() : true;
  1194. console.log('groupCanEdit.value: ', groupCanEdit.value);
  1195. console.log('validateRepeatingForm2: ', repeatingFormValid);
  1196. if (isGroupEditable && !repeatingFormValid) {
  1197. button_state.value = true
  1198. return
  1199. }*/
  1200. if (groupCanEdit.value){
  1201. if (!validateRepeatingForm2()) {
  1202. button_state.value = true
  1203. return
  1204. }
  1205. }
  1206. submitProcess(result)
  1207. })
  1208. .catch(err => {
  1209. console.log('验证发生错误', err);
  1210. button_state.value = true
  1211. $modal.msgError('表单填写错误')
  1212. })
  1213. } else {
  1214. submitProcess(result)
  1215. }
  1216. }).catch(() => { })
  1217. }
  1218. function submitProcess(result) {
  1219. let flow = Object.assign({}, flowInfo.value)
  1220. // 1. 处理主表字段:保留 isGroup 标记
  1221. formInfo.value.formElements = formElements.value
  1222. // 过滤不可编辑的表单项
  1223. .filter(({ canEdit }) => canEdit == '1')
  1224. .map(({ tableField, defaultValue, type, elementId }) => {
  1225. let value = defaultValue
  1226. if ('5' == type && Array.isArray(defaultValue)) {
  1227. value = defaultValue.join(",")
  1228. }
  1229. return {
  1230. name: tableField,
  1231. value,
  1232. /*isGroup: '0', // 明确标记为主表字段
  1233. elementId: elementId*/
  1234. }
  1235. })
  1236. // 2. 处理重复表字段:补充 value, isGroup 和 groupuid
  1237. repeatingForm.value.elements.forEach((table, index) => {
  1238. const newItem = table.map((item) => {
  1239. item['value'] = item.defaultValue
  1240. //item['isGroup'] = '1'
  1241. // 确保 groupuid 存在(行的唯一身份证),新增的行 groupuid 为空,后端会自动生成
  1242. if (!item['groupuid']) {
  1243. item['groupuid'] = ''
  1244. }
  1245. return item
  1246. })
  1247. formInfo.value.formElements.push(...newItem)
  1248. })
  1249. flow['staffId'] = userStore.user.useId
  1250. flow['gxId'] = userStore.user.gxId
  1251. flow['groupId'] = flowInfo.value.groupid
  1252. if (result == "1") {
  1253. const seqs = subFileSeqs.value.map(({ seq }) => seq)
  1254. if (flowInfo.value.seModel == '0' && processInfo.reqOffice == 1 && seqs.length == 0) {
  1255. button_state.value = true
  1256. $modal.msgError('请上传附件')
  1257. return
  1258. } else {
  1259. flow['fileIds'] = seqs
  1260. }
  1261. if (processInfo.reqRemark == 1 && remark.value == '') {
  1262. button_state.value = true
  1263. $modal.msgError('请填写备注')
  1264. return
  1265. }
  1266. } else {
  1267. flow.fileIds = []
  1268. flow.files = []
  1269. }
  1270. flow['remark'] = remark.value
  1271. // result: 1通过 2退回发起人 0退回上一级
  1272. flow['result'] = result
  1273. flow['nextTmodelId'] = 'undefined'
  1274. submitProcessFlow(flow, formInfo.value, processInfo.control).then(({ returnMsg }) => {
  1275. if (returnMsg.includes('提交失败')) {
  1276. // 启用提交按钮
  1277. button_state.value = true
  1278. $modal.msgError(returnMsg)
  1279. } else {
  1280. $modal.msgSuccess(returnMsg)
  1281. // 通知列表刷新数据
  1282. uni.$emit('ReloadProcessData');
  1283. setTimeout(() => {
  1284. $tab.navigateBack();
  1285. }, 1000)
  1286. }
  1287. })
  1288. }
  1289. // 取消流程
  1290. function handleCancelProcess() {
  1291. if (remark.value.trim() == '') {
  1292. $modal.msgError('备注不能为空!')
  1293. return
  1294. }
  1295. $modal.confirm('确认撤销').then(() => {
  1296. cancelProcess()
  1297. }).catch(() => { })
  1298. }
  1299. function cancelProcess() {
  1300. cancelProcessFlow(userStore.user.useId, remark.value, processInfo).then(({ returnMsg }) => {
  1301. if (returnMsg.includes('success')) {
  1302. $modal.msgSuccess('撤销成功')
  1303. // 通知列表刷新数据
  1304. uni.$emit('ReloadProcessData');
  1305. setTimeout(() => {
  1306. $tab.navigateBack();
  1307. }, 1000)
  1308. } else {
  1309. // 启用按钮
  1310. button_state.value = true
  1311. $modal.msgError(returnMsg)
  1312. }
  1313. })
  1314. }
  1315. </script>
  1316. <style lang="scss" scoped>
  1317. ::v-deep .uni-section {
  1318. margin-left: -15px;
  1319. margin-bottom: 10px;
  1320. }
  1321. .signature_container {
  1322. background-color: #f5f5f5;
  1323. height: 40vh;
  1324. width: 90vw;
  1325. .signature_content {
  1326. height: 80%;
  1327. width: 100%;
  1328. }
  1329. .signature_button_container {
  1330. height: 20%;
  1331. width: 100%;
  1332. button {
  1333. height: 100%;
  1334. }
  1335. }
  1336. }
  1337. .signature_container_landscape {
  1338. height: 100vh;
  1339. width: 100vw;
  1340. .signature_content {
  1341. height: 85%;
  1342. width: 100%;
  1343. }
  1344. .signature_button_container {
  1345. margin-top: 10%;
  1346. height: 15%;
  1347. width: 100%;
  1348. button {
  1349. height: 100%;
  1350. width: 100%;
  1351. transform: rotate(90deg);
  1352. }
  1353. }
  1354. }
  1355. .process_detail_container {
  1356. position: relative;
  1357. ::v-deep uni-card{
  1358. .uni-card{
  1359. padding: 0 8px !important;
  1360. }
  1361. }
  1362. .repeating_table {
  1363. ::v-deep .uni-forms {
  1364. .uni-forms-item__label {
  1365. font-size: calc(1rem + 0px) !important;
  1366. line-height: calc(1rem + 0px) !important;
  1367. font-weight: 700;
  1368. }
  1369. .uni-forms-item__content {
  1370. font-size: calc(14px + (1rem - 16px)) !important;
  1371. font-weight: 500;
  1372. .uni-easyinput__content-input {
  1373. height: calc(35px + .5*(1rem - 16px)) !important;
  1374. font-size: calc(14px + (1rem - 16px)) !important;
  1375. font-weight: 500;
  1376. }
  1377. }
  1378. }
  1379. ::v-deep .uni-forms-item--border {
  1380. padding: 5px 0 !important;
  1381. }
  1382. .repeating_table_button_container {
  1383. margin-top: 5px;
  1384. button {
  1385. height: 36px;
  1386. line-height: 36px;
  1387. color: #fff;
  1388. }
  1389. .add {
  1390. background-color: #1ca035;
  1391. }
  1392. .del {
  1393. background-color: #e64340;
  1394. }
  1395. }
  1396. }
  1397. .main_container {
  1398. min-height: 40vh;
  1399. ::v-deep .uni-forms {
  1400. .uni-forms-item__label {
  1401. font-size: calc(1rem + 0px) !important;
  1402. line-height: calc(1rem + 0px) !important;
  1403. font-weight: 700;
  1404. }
  1405. .uni-forms-item__content {
  1406. font-size: calc(14px + (1rem - 16px)) !important;
  1407. font-weight: 500;
  1408. .uni-easyinput__content-textarea {
  1409. font-size: calc(14px + (1rem - 16px)) !important;
  1410. font-weight: 500;
  1411. }
  1412. .uni-easyinput__content-input {
  1413. height: calc(35px + .5*(1rem - 16px)) !important;
  1414. font-size: calc(14px + (1rem - 16px)) !important;
  1415. font-weight: 500;
  1416. color: #333;
  1417. }
  1418. .uni-date {
  1419. .uni-icons {
  1420. font-size: calc(22px + 1.2*(1rem - 16px)) !important;
  1421. font-weight: 500;
  1422. }
  1423. .uni-date__x-input {
  1424. height: auto;
  1425. font-size: calc(14px + 1.2*(1rem - 16px)) !important;
  1426. font-weight: 500;
  1427. }
  1428. }
  1429. }
  1430. }
  1431. .element_value_container {
  1432. .signature_img {
  1433. width: 180px;
  1434. }
  1435. .element_value {
  1436. line-height: 36px;
  1437. }
  1438. }
  1439. }
  1440. // ::v-deep .repeating_table_detail2{
  1441. // .uni-forms-item__content{
  1442. // margin: auto;
  1443. // }
  1444. // .uni-forms{
  1445. // border-top: 2px #eee solid;
  1446. // }
  1447. // .uni-forms-item__label {
  1448. // width: 125px !important;
  1449. // font-size: calc(1rem + 0px) !important;
  1450. // line-height: calc(1rem + 0px) !important;
  1451. // font-weight: 700;
  1452. // }
  1453. // .uni-forms-item__content {
  1454. // font-size: calc(14px + (1rem - 16px)) !important;
  1455. // font-weight: 500;
  1456. // .uni-date {
  1457. // .uni-icons {
  1458. // font-size: calc(22px + 1.2*(1rem - 16px)) !important;
  1459. // font-weight: 500;
  1460. // }
  1461. // }
  1462. // }
  1463. // }
  1464. ::v-deep .repeating_table_detail {
  1465. .uni-card {
  1466. padding: 0 !important;
  1467. }
  1468. .uni-card__content {
  1469. padding: 0 !important;
  1470. }
  1471. .uni-section {
  1472. margin: 10px 5px;
  1473. }
  1474. }
  1475. ::v-deep .repeating_table_container {
  1476. width: 92vw;
  1477. .uni-table-scroll {
  1478. max-height: 80vh;
  1479. .uni-table {
  1480. min-width: 100% !important;
  1481. .uni-table-th {
  1482. font-size: calc(14px + 1.2*(1rem - 16px)) !important;
  1483. min-width: calc(50px + 2.5*(1rem - 16px));
  1484. background-color: #2979ff;
  1485. font-weight: bold;
  1486. color: #fcfcfc;
  1487. }
  1488. .uni-table-td {
  1489. font-size: calc(14px + 1.2*(1rem - 16px)) !important;
  1490. }
  1491. }
  1492. }
  1493. }
  1494. ::v-deep .file_picker_container {
  1495. .uni-card {
  1496. .uni-card__header-content-title {
  1497. font-size: calc(15px + .5*(1rem - 16px));
  1498. }
  1499. .uni-card__header-extra-text {
  1500. font-size: calc(15px + .5*(1rem - 16px));
  1501. }
  1502. }
  1503. }
  1504. ::v-deep .flow_step_container {
  1505. min-height: 200px;
  1506. .u-steps {
  1507. .u-steps-item {
  1508. padding-bottom: 11px;
  1509. .u-text__value--tips {
  1510. font-size: calc(12px + .5*(1rem - 16px)) !important;
  1511. }
  1512. .redcontent {
  1513. .u-text__value--content {
  1514. color: #ff4500;
  1515. }
  1516. }
  1517. .active_step_circle {
  1518. width: 20px;
  1519. height: 20px;
  1520. box-sizing: border-box;
  1521. flex-shrink: 0;
  1522. border-radius: 100px;
  1523. border-width: 1px;
  1524. border-color: #A78BFA;
  1525. background-color: #A78BFA;
  1526. border-style: solid;
  1527. display: flex;
  1528. flex-direction: row;
  1529. align-items: center;
  1530. justify-content: center;
  1531. transition: background-color .3s;
  1532. .active_step_text {
  1533. color: #fff;
  1534. font-size: 11px;
  1535. display: flex;
  1536. flex-direction: row;
  1537. align-items: center;
  1538. justify-content: center;
  1539. text-align: center;
  1540. line-height: 11px;
  1541. }
  1542. }
  1543. }
  1544. .u-steps-item view:last-of-type {
  1545. margin-top: 0 !important;
  1546. .u-text__value--content {
  1547. font-size: calc(16px + .5*(1rem - 16px)) !important;
  1548. }
  1549. .u-text__value--main {
  1550. font-size: calc(16px + .5*(1rem - 16px)) !important;
  1551. font-weight: 500;
  1552. }
  1553. }
  1554. }
  1555. }
  1556. .approve_button {
  1557. position: sticky;
  1558. z-index: 10;
  1559. width: 100%;
  1560. bottom: 10px;
  1561. }
  1562. }
  1563. ::v-deep button {
  1564. font-size: calc(18px + .5*(1rem - 16px));
  1565. }
  1566. .reject_button {
  1567. ::v-deep .uni-card {
  1568. background-color: #f5f5f5;
  1569. }
  1570. }
  1571. .remark_container {
  1572. .remark_content {
  1573. margin-bottom: 10px;
  1574. ::v-deep .uni-easyinput {
  1575. .uni-easyinput__content-textarea {
  1576. font-size: calc(14px + .5*(1rem - 16px)) !important;
  1577. }
  1578. }
  1579. }
  1580. }
  1581. ::v-deep .uni-calendar__content {
  1582. margin: -20px;
  1583. margin-top: 20px;
  1584. // 防止鸿蒙系统上日期选择器误触发返回
  1585. pointer-events: auto;
  1586. .uni-calendar__header {
  1587. .uni-calendar__header-text {
  1588. font-size: calc(14px + .5*(1rem - 16px)) !important;
  1589. }
  1590. .uni-calendar__backtoday {
  1591. padding: 2px 8px 2px 10px !important;
  1592. font-size: calc(0.75rem + 0px) !important;
  1593. }
  1594. }
  1595. .uni-calendar__box {
  1596. .uni-calendar__weeks {
  1597. .uni-calendar__weeks-day {
  1598. .uni-calendar__weeks-day-text {
  1599. font-size: calc(14px + .5*(1rem - 16px)) !important;
  1600. }
  1601. }
  1602. .uni-calendar__weeks-item {
  1603. .uni-calendar-item__weeks-box-item {
  1604. .uni-calendar-item__weeks-box-circle {
  1605. width: calc(8px + .5*(1rem - 16px)) !important;
  1606. height: calc(8px + .5*(1rem - 16px)) !important;
  1607. top: calc(5px - .25*(1rem - 16px)) !important;
  1608. right: calc(5px - .25*(1rem - 16px)) !important;
  1609. }
  1610. .uni-calendar-item__weeks-box-text {
  1611. font-size: calc(14px + .5*(1rem - 16px)) !important;
  1612. }
  1613. .uni-calendar-item__weeks-lunar-text {
  1614. font-size: calc(12px + .5*(1rem - 16px)) !important;
  1615. }
  1616. }
  1617. }
  1618. }
  1619. }
  1620. .uni-date-changed {
  1621. .uni-date-changed--time-date {
  1622. font-size: calc(14px + 1*(1rem - 16px)) !important;
  1623. }
  1624. .uni-datetime-picker-text {
  1625. font-size: calc(14px + 1*(1rem - 16px)) !important;
  1626. }
  1627. }
  1628. }
  1629. .username {
  1630. color: #2979ff;
  1631. }
  1632. /* 加密内容容器样式 */
  1633. .encrypted_content_container {
  1634. display: flex;
  1635. align-items: center;
  1636. justify-content: space-between;
  1637. gap: 10px;
  1638. }
  1639. /* 加密文本样式 */
  1640. .encrypted_text {
  1641. flex: 1;
  1642. letter-spacing: 2px;
  1643. font-weight: 500;
  1644. }
  1645. /* 复制按钮样式 */
  1646. .copy_button {
  1647. padding: 0 15px;
  1648. height: 32px;
  1649. line-height: 32px;
  1650. font-size: 12px;
  1651. border-radius: 4px;
  1652. flex-shrink: 0;
  1653. }
  1654. </style>