contract-form.vue 88 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674
  1. <!-- 合同流程专用表单组件 -->
  2. <template>
  3. <view class="contract-form-component">
  4. <!-- 基本信息 -->
  5. <uni-card>
  6. <uni-section titleFontSize="1.3rem" title="基本信息" type="line"></uni-section>
  7. <uni-forms ref="baseFormRef" :modelValue="baseForm" :rules="baseFormRules" label-position="left" :label-width="100" :border="true">
  8. <uni-forms-item name="contract_number" label="合同编号">
  9. <!-- 发起环节或字段可编辑时显示输入框 -->
  10. <uni-easyinput v-if="isInitiateOrFieldEditable('contract_number')"
  11. v-model="baseForm.contract_number"
  12. placeholder="请输入合同编号"></uni-easyinput>
  13. <!-- 否则显示只读文本 -->
  14. <uni-easyinput v-else v-model="baseForm.contract_number" disabled></uni-easyinput>
  15. </uni-forms-item>
  16. <uni-forms-item name="contract_name" label="合同名称" required>
  17. <uni-easyinput v-model="baseForm.contract_name"
  18. :disabled="!isInitiateOrFieldEditable('contract_name')"
  19. :placeholder="'请输入合同名称'"
  20. :clearable="false"></uni-easyinput>
  21. </uni-forms-item>
  22. <uni-forms-item name="contract_type" label="合同类型" required>
  23. <!-- 合同类型:发起环节或字段可编辑时显示选择器 -->
  24. <picker v-if="isInitiateOrFieldEditable('contract_type')"
  25. @change="onContractTypeChange"
  26. :range="contractTypeList"
  27. range-key="contract_type_name">
  28. <view class="picker">{{ baseForm.contract_type_name || '请选择合同类型' }}</view>
  29. </picker>
  30. <uni-easyinput v-else v-model="baseForm.contract_type_name" disabled></uni-easyinput>
  31. </uni-forms-item>
  32. <uni-forms-item name="applyDate" label="填报日期">
  33. <uni-easyinput v-model="baseForm.applyDate" disabled></uni-easyinput>
  34. </uni-forms-item>
  35. <uni-forms-item name="department" label="填报部门">
  36. <uni-easyinput v-model="baseForm.department" disabled></uni-easyinput>
  37. </uni-forms-item>
  38. <uni-forms-item name="salesman_name" label="经办人">
  39. <!-- 经办人:发起环节或字段可编辑时显示选择器 -->
  40. <!-- <uni-easyinput v-if="isInitiateOrFieldEditable('salesman_name')"
  41. v-model="baseForm.salesman_name"
  42. :disabled="!isInitiateOrFieldEditable('salesman_name')"
  43. placeholder="自动生成"></uni-easyinput>-->
  44. <uni-easyinput v-model="baseForm.salesman_name" disabled></uni-easyinput>
  45. </uni-forms-item>
  46. <uni-forms-item name="salesmanTel" label="联系电话">
  47. <uni-easyinput v-model="baseForm.salesmanTel"
  48. :disabled="!isInitiateOrFieldEditable('salesmanTel')"
  49. type="number"
  50. placeholder="请输入联系电话"></uni-easyinput>
  51. </uni-forms-item>
  52. <uni-forms-item name="firstparty_name" label="需方" required>
  53. <!-- 销售合同:显示选择客户按钮 -->
  54. <view v-if="isSalesContract && isInitiateOrFieldEditable('firstparty_name')"
  55. class="selector-wrapper"
  56. @click="openClientSelector">
  57. <text v-if="baseForm.firstparty_name">{{ baseForm.firstparty_name }}</text>
  58. <text v-else class="placeholder">请选择客户</text>
  59. </view>
  60. <!-- 其他合同类型或不可编辑时:显示公司名称(只读) -->
  61. <uni-easyinput v-else v-model="baseForm.firstparty_name" disabled></uni-easyinput>
  62. </uni-forms-item>
  63. <uni-forms-item name="secondparty_name" label="供方" required>
  64. <!-- 销售合同:显示公司名称(只读) -->
  65. <uni-easyinput v-if="isSalesContract" v-model="baseForm.secondparty_name" disabled></uni-easyinput>
  66. <!-- 其他合同类型:发起环节或字段可编辑时显示选择器 -->
  67. <view v-else-if="isInitiateOrFieldEditable('secondparty_name')"
  68. class="selector-wrapper"
  69. @click="openSupplierSelector">
  70. <text v-if="baseForm.secondparty_name">{{ baseForm.secondparty_name }}</text>
  71. <text v-else class="placeholder">请选择供应商</text>
  72. </view>
  73. <uni-easyinput v-else v-model="baseForm.secondparty_name" disabled></uni-easyinput>
  74. </uni-forms-item>
  75. <uni-forms-item name="contract_money" label="合同金额">
  76. <uni-easyinput v-model="baseForm.contract_money"
  77. :disabled="!isInitiateOrFieldEditable('contract_money')"
  78. type="digit"
  79. placeholder="请输入合同金额"
  80. @blur="onContractMoneyBlur"></uni-easyinput>
  81. </uni-forms-item>
  82. <uni-forms-item name="contractContent" label="合同内容">
  83. <uni-easyinput v-if="isInitiateOrFieldEditable('contractContent')"
  84. v-model="baseForm.contractContent"
  85. type="textarea"
  86. placeholder="请输入合同内容"></uni-easyinput>
  87. <text v-else class="field-value">{{ baseForm.contractContent || '-' }}</text>
  88. </uni-forms-item>
  89. <uni-forms-item name="projectItem" label="所属项目或产品">
  90. <uni-easyinput v-model="baseForm.projectItem"
  91. :disabled="!isInitiateOrFieldEditable('projectItem')"
  92. placeholder="请输入所属项目或产品"></uni-easyinput>
  93. </uni-forms-item>
  94. <uni-forms-item name="usePosition" label="使用位置">
  95. <uni-easyinput v-model="baseForm.usePosition"
  96. :disabled="!isInitiateOrFieldEditable('usePosition')"
  97. placeholder="请输入使用位置"></uni-easyinput>
  98. </uni-forms-item>
  99. <uni-forms-item name="other_contractor" label="对方联系人及电话">
  100. <uni-easyinput v-model="baseForm.other_contractor"
  101. :disabled="!isInitiateOrFieldEditable('other_contractor')"
  102. placeholder="请输入对方联系人及电话"></uni-easyinput>
  103. </uni-forms-item>
  104. <uni-forms-item name="otherFile" label="随合同提交的其它材料">
  105. <uni-easyinput v-if="isInitiateOrFieldEditable('otherFile')"
  106. v-model="baseForm.otherFile"
  107. type="textarea"
  108. placeholder="请输入其它材料说明"></uni-easyinput>
  109. <text v-else class="field-value">{{ baseForm.otherFile || '-' }}</text>
  110. </uni-forms-item>
  111. <uni-forms-item name="salesmanSign" label="经办人签字">
  112. <uni-easyinput v-model="baseForm.salesmanSign"
  113. :disabled="!isInitiateOrFieldEditable('salesmanSign')"
  114. placeholder="请输入经办人签字"></uni-easyinput>
  115. </uni-forms-item>
  116. <!-- 部门意见 -->
  117. <uni-forms-item label="部门意见" name="departmentalOpinion">
  118. <view class="element_value_container">
  119. <view v-if="isApprovalFieldEditable(departmentalOpinionElem)" class="element_value">
  120. <!-- 审批签字板 -->
  121. <view v-if="departmentalOpinionElem && (!departmentalOpinionElem.defaultValue || departmentalOpinionElem.defaultValue == '')">
  122. <uni-row>
  123. <uni-col :span="24">
  124. <button type="primary" @click="handleApprovalSignature('departmental_opinion')">手动签名</button>
  125. </uni-col>
  126. <uni-col :span="24">
  127. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('departmental_opinion')">一键签名</button>
  128. </uni-col>
  129. </uni-row>
  130. </view>
  131. <view v-else-if="departmentalOpinionElem && departmentalOpinionElem.defaultValue" class="signature_img">
  132. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('departmental_opinion')"
  133. :src="config.baseUrlPre + departmentalOpinionElem.sealImgPath"
  134. :alt="departmentalOpinionElem.elementName + '签名'" />
  135. </view>
  136. </view>
  137. <view v-else-if="departmentalOpinionElem && typeof departmentalOpinionElem.sealImgPath === 'string' && departmentalOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  138. <img style="width: 100%;" mode="widthFix"
  139. :src="config.baseUrlPre + departmentalOpinionElem.sealImgPath" />
  140. </view>
  141. </view>
  142. </uni-forms-item>
  143. <!-- 财务意见 -->
  144. <uni-forms-item label="财务意见" name="financeOpinion">
  145. <view class="element_value_container">
  146. <view v-if="isApprovalFieldEditable(financeOpinionElem)" class="element_value">
  147. <!-- 审批签字板 -->
  148. <view v-if="financeOpinionElem && (!financeOpinionElem.defaultValue || financeOpinionElem.defaultValue == '')">
  149. <uni-row>
  150. <uni-col :span="24">
  151. <button type="primary" @click="handleApprovalSignature('finance_opinion')">手动签名</button>
  152. </uni-col>
  153. <uni-col :span="24">
  154. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('finance_opinion')">一键签名</button>
  155. </uni-col>
  156. </uni-row>
  157. </view>
  158. <view v-else-if="financeOpinionElem && financeOpinionElem.defaultValue" class="signature_img">
  159. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('finance_opinion')"
  160. :src="config.baseUrlPre + financeOpinionElem.sealImgPath"
  161. :alt="financeOpinionElem.elementName + '签名'" />
  162. </view>
  163. </view>
  164. <view v-else-if="financeOpinionElem && typeof financeOpinionElem.sealImgPath === 'string' && financeOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  165. <img style="width: 100%;" mode="widthFix"
  166. :src="config.baseUrlPre + financeOpinionElem.sealImgPath" />
  167. </view>
  168. </view>
  169. </uni-forms-item>
  170. <!-- 分管副总意见 -->
  171. <uni-forms-item label="分管副总" name="dgmOpinion">
  172. <view class="element_value_container">
  173. <view v-if="isApprovalFieldEditable(deputyGeneralManagerOpinionElem)" class="element_value">
  174. <!-- 审批签字板 -->
  175. <view v-if="deputyGeneralManagerOpinionElem && (!deputyGeneralManagerOpinionElem.defaultValue || deputyGeneralManagerOpinionElem.defaultValue == '')">
  176. <uni-row>
  177. <uni-col :span="24">
  178. <button type="primary" @click="handleApprovalSignature('deputy_general_manager_opinion')">手动签名</button>
  179. </uni-col>
  180. <uni-col :span="24">
  181. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('deputy_general_manager_opinion')">一键签名</button>
  182. </uni-col>
  183. </uni-row>
  184. </view>
  185. <view v-else-if="deputyGeneralManagerOpinionElem && deputyGeneralManagerOpinionElem.defaultValue" class="signature_img">
  186. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('deputy_general_manager_opinion')"
  187. :src="config.baseUrlPre + deputyGeneralManagerOpinionElem.sealImgPath"
  188. :alt="deputyGeneralManagerOpinionElem.elementName + '签名'" />
  189. </view>
  190. </view>
  191. <view v-else-if="deputyGeneralManagerOpinionElem && typeof deputyGeneralManagerOpinionElem.sealImgPath === 'string' && deputyGeneralManagerOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  192. <img style="width: 100%;" mode="widthFix"
  193. :src="config.baseUrlPre + deputyGeneralManagerOpinionElem.sealImgPath" />
  194. </view>
  195. </view>
  196. </uni-forms-item>
  197. <!-- 审核副总意见 -->
  198. <uni-forms-item label="分管副总" name="auditDgmOpinion">
  199. <view class="element_value_container">
  200. <view v-if="isApprovalFieldEditable(auditDeputyGeneralManagerOpinionElem)" class="element_value">
  201. <!-- 审批签字板 -->
  202. <view v-if="auditDeputyGeneralManagerOpinionElem && (!auditDeputyGeneralManagerOpinionElem.defaultValue || auditDeputyGeneralManagerOpinionElem.defaultValue == '')">
  203. <uni-row>
  204. <uni-col :span="24">
  205. <button type="primary" @click="handleApprovalSignature('audit_deputy_general_manager_opinion')">手动签名</button>
  206. </uni-col>
  207. <uni-col :span="24">
  208. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('audit_deputy_general_manager_opinion')">一键签名</button>
  209. </uni-col>
  210. </uni-row>
  211. </view>
  212. <view v-else-if="auditDeputyGeneralManagerOpinionElem && auditDeputyGeneralManagerOpinionElem.defaultValue" class="signature_img">
  213. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('audit_deputy_general_manager_opinion')"
  214. :src="config.baseUrlPre + auditDeputyGeneralManagerOpinionElem.sealImgPath"
  215. :alt="auditDeputyGeneralManagerOpinionElem.elementName + '签名'" />
  216. </view>
  217. </view>
  218. <view v-else-if="auditDeputyGeneralManagerOpinionElem && typeof auditDeputyGeneralManagerOpinionElem.sealImgPath === 'string' && auditDeputyGeneralManagerOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  219. <img style="width: 100%;" mode="widthFix"
  220. :src="config.baseUrlPre + auditDeputyGeneralManagerOpinionElem.sealImgPath" />
  221. </view>
  222. </view>
  223. </uni-forms-item>
  224. <!-- 总经理意见 -->
  225. <uni-forms-item label="总经理" name="gmOpinion">
  226. <view class="element_value_container">
  227. <view v-if="isApprovalFieldEditable(generalManagerOpinionElem)" class="element_value">
  228. <!-- 审批签字板 -->
  229. <view v-if="generalManagerOpinionElem && (!generalManagerOpinionElem.defaultValue || generalManagerOpinionElem.defaultValue == '')">
  230. <uni-row>
  231. <uni-col :span="24">
  232. <button type="primary" @click="handleApprovalSignature('general_manager_opinion')">手动签名</button>
  233. </uni-col>
  234. <uni-col :span="24">
  235. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('general_manager_opinion')">一键签名</button>
  236. </uni-col>
  237. </uni-row>
  238. </view>
  239. <view v-else-if="generalManagerOpinionElem && generalManagerOpinionElem.defaultValue" class="signature_img">
  240. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('general_manager_opinion')"
  241. :src="config.baseUrlPre + generalManagerOpinionElem.sealImgPath"
  242. :alt="generalManagerOpinionElem.elementName + '签名'" />
  243. </view>
  244. </view>
  245. <view v-else-if="generalManagerOpinionElem && typeof generalManagerOpinionElem.sealImgPath === 'string' && generalManagerOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  246. <img style="width: 100%;" mode="widthFix"
  247. :src="config.baseUrlPre + generalManagerOpinionElem.sealImgPath" />
  248. </view>
  249. </view>
  250. </uni-forms-item>
  251. <!-- 董事长意见 -->
  252. <uni-forms-item label="董事长意见" name="chairmanOpinion">
  253. <view class="element_value_container">
  254. <view v-if="isApprovalFieldEditable(chairmanOpinionElem)" class="element_value">
  255. <!-- 审批签字板 -->
  256. <view v-if="chairmanOpinionElem && (!chairmanOpinionElem.defaultValue || chairmanOpinionElem.defaultValue == '')">
  257. <uni-row>
  258. <uni-col :span="24">
  259. <button type="primary" @click="handleApprovalSignature('chairman_opinion')">手动签名</button>
  260. </uni-col>
  261. <uni-col :span="24">
  262. <button style="margin-top: 5px;" type="primary" @click="handleAutoSeal('chairman_opinion')">一键签名</button>
  263. </uni-col>
  264. </uni-row>
  265. </view>
  266. <view v-else-if="chairmanOpinionElem && chairmanOpinionElem.defaultValue" class="signature_img">
  267. <img style="width: 100%;" mode="widthFix" @click="handleApprovalSignature('chairman_opinion')"
  268. :src="config.baseUrlPre + chairmanOpinionElem.sealImgPath"
  269. :alt="chairmanOpinionElem.elementName + '签名'" />
  270. </view>
  271. </view>
  272. <view v-else-if="chairmanOpinionElem && typeof chairmanOpinionElem.sealImgPath === 'string' && chairmanOpinionElem.sealImgPath.startsWith('/shares')" class="signature_img">
  273. <img style="width: 100%;" mode="widthFix"
  274. :src="config.baseUrlPre + chairmanOpinionElem.sealImgPath" />
  275. </view>
  276. </view>
  277. </uni-forms-item>
  278. </uni-forms>
  279. </uni-card>
  280. <!-- 物料明细 -->
  281. <uni-card>
  282. <uni-section titleFontSize="1.3rem" title="物料明细" type="line"></uni-section>
  283. <!-- 添加物料按钮:发起环节或字段可编辑时显示 -->
  284. <view v-if="isSeModel" class="material-actions">
  285. <button type="primary" size="mini" @click="openMaterialSelector" plain>添加物料</button>
  286. </view>
  287. <!-- 物料列表 - 卡片式展示 -->
  288. <view v-if="materialList.length > 0" class="material-list">
  289. <view v-for="(item, index) in materialList" :key="'material-' + item.itemCode + '-' + index" class="material-card">
  290. <view class="material-header" @click="toggleMaterialExpand(index)">
  291. <view class="material-main-info">
  292. <text class="material-name">{{ item.itemName }}</text>
  293. <text class="material-code">{{ item.itemCode }}</text>
  294. </view>
  295. <view class="material-expand">
  296. <uni-icons :type="item.expanded ? 'up' : 'down'" size="16" color="#999"></uni-icons>
  297. </view>
  298. </view>
  299. <!-- 展开的详细信息 -->
  300. <view v-show="item.expanded" class="material-detail">
  301. <!-- 采购申请单编号(仅当从采购申请单添加且非销售合同时显示) -->
  302. <view v-if="!isSalesContract && item.purchaseNumber" class="detail-row purchase-number-row">
  303. <text class="detail-label">采购申请单号:</text>
  304. <text class="detail-value purchase-number">{{ item.purchaseNumber }}</text>
  305. </view>
  306. <view class="detail-row">
  307. <text class="detail-label">规格型号:</text>
  308. <text class="detail-value">{{ item.specification }}</text>
  309. </view>
  310. <view class="detail-row">
  311. <text class="detail-label">单位:</text>
  312. <text class="detail-value">{{ item.measureName }}</text>
  313. </view>
  314. <view class="detail-row">
  315. <text class="detail-label">数量:</text>
  316. <uni-easyinput
  317. v-model="item.qty"
  318. type="digit"
  319. v-if="isSeModel"
  320. placeholder="请输入数量"
  321. style="width: 100px; display: inline-block; margin-right: 15px;"
  322. @blur="onQuantityBlur(item)"
  323. />
  324. <text v-if="!isSeModel" class="detail-value">{{ item.qty }}</text>
  325. </view>
  326. <view class="detail-row">
  327. <text class="detail-label">税前单价:</text>
  328. <uni-easyinput
  329. v-model="item.price"
  330. type="digit"
  331. v-if="isSeModel"
  332. placeholder="请输入税前单价"
  333. style="width: 100px; display: inline-block; margin-right: 15px;"
  334. @blur="onPriceBlur(item)"
  335. />
  336. <text v-if="!isSeModel" class="detail-value">{{ item.price }}</text>
  337. </view>
  338. <view class="detail-row">
  339. <text class="detail-label">税率:</text>
  340. <uni-easyinput
  341. v-model="item.cess"
  342. type="digit"
  343. v-if="isSeModel"
  344. placeholder="请输入税率"
  345. style="width: 80px; display: inline-block; margin-right: 15px;"
  346. @blur="onCessBlur(item)"
  347. />
  348. <text v-if="!isSeModel" class="detail-value">{{ item.cess }}%</text>
  349. </view>
  350. <view class="detail-row">
  351. <text class="detail-label">税后单价:</text>
  352. <text class="detail-value price-value">{{ item.priceTax }}</text>
  353. </view>
  354. <view v-if="isSeModel" class="detail-row delete-row">
  355. <button type="warn" size="mini" @click="removeMaterial(index)">删除</button>
  356. </view>
  357. </view>
  358. </view>
  359. </view>
  360. <view v-else-if="materialList.length === 0" class="empty-materials">
  361. <text>暂无物料</text>
  362. </view>
  363. </uni-card>
  364. <!-- 付款明细 -->
  365. <uni-card>
  366. <uni-section titleFontSize="1.3rem" title="付款明细" type="line"></uni-section>
  367. <!-- 添加付款按钮:发起环节或字段可编辑时显示 -->
  368. <view v-if="isSeModel" class="payment-actions">
  369. <button type="primary" size="mini" @click="addPayment" :disabled="!canAddPayment" plain>添加付款</button>
  370. </view>
  371. <!-- 付款列表 - 卡片式展示 -->
  372. <view v-if="paymentList.length > 0" class="payment-list">
  373. <view v-for="(item, index) in paymentList" :key="'payment-' + item.payType + '-' + index" class="payment-card">
  374. <view class="payment-header" @click="togglePaymentExpand(index)">
  375. <view class="payment-main-info">
  376. <text class="payment-name">{{ item.payTypeName || item.payType }}</text>
  377. </view>
  378. <view class="payment-expand">
  379. <uni-icons :type="item.expanded ? 'up' : 'down'" size="16" color="#999"></uni-icons>
  380. </view>
  381. </view>
  382. <!-- 展开的详细信息 -->
  383. <view v-show="item.expanded" class="payment-detail">
  384. <view class="detail-row">
  385. <text class="detail-label">付款方式:</text>
  386. <picker
  387. v-if="isSeModel"
  388. @change="(e) => onPaymentTypeChange(index, e)"
  389. :range="paymentTypeList"
  390. range-key="payTypeName">
  391. <view class="picker">
  392. {{ item.payTypeName || '请选择付款方式' }}
  393. </view>
  394. </picker>
  395. <text v-if="!isSeModel" class="detail-value">{{ item.payTypeName || item.payType }}</text>
  396. </view>
  397. <view class="detail-row">
  398. <text class="detail-label">付款比例:</text>
  399. <uni-easyinput
  400. v-model="item.proportion"
  401. type="digit"
  402. v-if="isSeModel"
  403. placeholder="请输入比例"
  404. style="width: 80px; display: inline-block; margin-right: 10px;"
  405. @blur="onProportionBlur(item)"
  406. />
  407. <text v-if="!isSeModel" class="detail-value">{{ item.proportion }}</text>
  408. <text>%</text>
  409. </view>
  410. <view class="detail-row">
  411. <text class="detail-label">付款金额:</text>
  412. <text class="detail-value price-value">{{ item.amount }}</text>
  413. </view>
  414. <view class="detail-row">
  415. <text class="detail-label">已付金额:</text>
  416. <uni-easyinput
  417. v-model="item.amountPaid"
  418. type="digit"
  419. v-if="isSeModel"
  420. placeholder="请输入已付金额"
  421. style="width: 100px; display: inline-block; margin-right: 10px;"
  422. @blur="onAmountPaidBlur(item)"
  423. />
  424. <text v-if="!isSeModel" class="detail-value">{{ item.amountPaid || 0 }}</text>
  425. </view>
  426. <view class="detail-row">
  427. <text class="detail-label">付款时间:</text>
  428. <uni-datetime-picker
  429. v-if="isSeModel"
  430. v-model="item.payTime"
  431. type="date"
  432. placeholder="选择付款时间"
  433. style="display: inline-block;"
  434. @click.native.stop
  435. @change="(e) => onPayTimeChange(item, e)"
  436. />
  437. <text v-if="!isSeModel" class="detail-value">{{ item.payTime || '-' }}</text>
  438. </view>
  439. <view class="detail-row">
  440. <text class="detail-label">付款状态:</text>
  441. <text class="detail-value status-tag" :class="'status-' + (item.payStatus || '0')">{{ getPayStatusName(item) }}</text>
  442. </view>
  443. <view class="detail-row">
  444. <text class="detail-label">备注:</text>
  445. <uni-easyinput
  446. v-model="item.remark"
  447. v-if="isSeModel"
  448. placeholder="请输入备注"
  449. style="flex: 1; display: inline-block;"
  450. />
  451. <text v-if="!isSeModel" class="detail-value">{{ item.remark || '-' }}</text>
  452. <button v-if="isSeModel" type="warn" size="mini" @click="removePayment(index)" style="margin-left: 10px;">删除</button>
  453. </view>
  454. </view>
  455. </view>
  456. </view>
  457. <view v-else-if="paymentList.length === 0" class="empty-payments">
  458. <text v-if="!canAddPayment">请先输入合同金额</text>
  459. <text v-else>暂无付款明细</text>
  460. </view>
  461. </uni-card>
  462. <!-- 签名板弹出层 -->
  463. <uni-popup ref="signaturePopup" @maskClick="closeSignature">
  464. <view class="signature_container" :class="{ 'signature_container_landscape': isLandscape }">
  465. <view class="signature_content">
  466. <l-signature ref="signatureRef" v-if="signaturePopupShow" :landscape="isLandscape" :penSize="8"
  467. :minLineWidth="4" :maxLineWidth="12" :openSmooth="true" :preferToDataURL="true"
  468. backgroundColor="#ffffff" penColor="black"></l-signature>
  469. </view>
  470. <view class="signature_button_container">
  471. <uni-row :gutter="10">
  472. <uni-col :span="6">
  473. <button type="warn" @click="onclickSignatureButton('undo')">撤销</button>
  474. </uni-col>
  475. <uni-col :span="6">
  476. <button type="warn" @click="onclickSignatureButton('clear')">清空</button>
  477. </uni-col>
  478. <uni-col :span="6">
  479. <button type="primary" @click="onclickSignatureButton('save')">保存</button>
  480. </uni-col>
  481. <uni-col :span="6">
  482. <button @click="onclickSignatureButton('landscape')">全屏</button>
  483. </uni-col>
  484. </uni-row>
  485. </view>
  486. </view>
  487. </uni-popup>
  488. <!-- 选择器弹出层(物料、供应商) -->
  489. <uni-popup ref="selectorPopup" type="center">
  490. <view class="selector-popup">
  491. <view class="popup-header">
  492. <text class="popup-title">{{ popupTitle }}</text>
  493. <uni-icons type="closeempty" size="20" @click="closePopup"></uni-icons>
  494. </view>
  495. <!-- 物料来源选择(仅物料选择时显示,且非销售合同) -->
  496. <view v-if="selectorType === 'material' && !isSalesContract" class="material-source-selector">
  497. <view class="source-options">
  498. <view
  499. :class="['source-option', materialSource === 'mes' ? 'active' : '']"
  500. @click="materialSource = 'mes'; onMaterialSourceChange()">
  501. MES 系统
  502. </view>
  503. <view
  504. :class="['source-option', materialSource === 'purchase' ? 'active' : '']"
  505. @click="materialSource = 'purchase'; onMaterialSourceChange()">
  506. 采购申请
  507. </view>
  508. </view>
  509. </view>
  510. <!-- 搜索框 -->
  511. <view v-if="(selectorType === 'material' && materialSource === 'mes') || selectorType === 'supplier' || selectorType === 'client'" class="search-bar">
  512. <uni-easyinput
  513. v-model="searchKeyword"
  514. :placeholder="selectorType === 'material' ? '输入物料名称搜索' : (selectorType === 'supplier' ? '输入供应商名称搜索' : '输入客户名称搜索')"
  515. clearable
  516. @confirm="handleSearch"
  517. />
  518. <button type="primary" size="mini" @click="handleSearch">搜索</button>
  519. </view>
  520. <!-- 采购申请单选择器(采购申请模式,且非销售合同) -->
  521. <view v-if="selectorType === 'material' && materialSource === 'purchase' && !isSalesContract" class="purchase-selector">
  522. <picker @change="onPurchaseChange" :range="purchaseApplyList" range-key="contractPurchaseFormNumber">
  523. <view class="picker">
  524. {{ selectedPurchaseApply ? selectedPurchaseApply.contractPurchaseFormNumber : '全部采购申请单' }}
  525. </view>
  526. </picker>
  527. <button type="primary" size="mini" @click="loadPurchaseMaterials(true)">查询</button>
  528. <button type="warn" size="mini" @click="clearPurchaseSelection" v-if="selectedPurchaseApply">清空</button>
  529. </view>
  530. <scroll-view
  531. scroll-y
  532. class="popup-content"
  533. refresher-enabled
  534. :refresher-triggered="isRefreshing"
  535. @refresherrefresh="onRefresh"
  536. @scrolltolower="loadMore"
  537. >
  538. <view v-for="(item, index) in selectorList" :key="index"
  539. class="selector-item"
  540. @click="selectItem(item)">
  541. <view class="selector-item-content">
  542. <view class="item-info">
  543. <text class="item-name">{{ getSelectorItemName(item) }}</text>
  544. <!-- 采购申请模式显示采购单号(仅非销售合同) -->
  545. <text v-if="!isSalesContract && materialSource === 'purchase' && item.purchaseNumber" class="item-purchase">
  546. 采购单:{{ item.purchaseNumber }}
  547. </text>
  548. <text v-if="getItemCode(item)" class="item-code">{{ getItemCode(item) }}</text>
  549. <text v-if="getItemSpec(item)" class="item-spec">{{ getItemSpec(item) }}</text>
  550. <!-- 显示单位和数量 -->
  551. <text v-if="item.measureName || item.qty" class="item-extra">
  552. <text v-if="item.measureName">{{ item.measureName }}</text>
  553. <text v-if="item.qty"> 可用:{{ item.qty }}</text>
  554. </text>
  555. </view>
  556. <text v-if="isSelected(item)" class="selected-tag">已选择</text>
  557. </view>
  558. </view>
  559. <!-- 加载状态 -->
  560. <view v-if="isLoading && selectorList.length > 0" class="loading-text">
  561. <uni-load-more status="loading" />
  562. </view>
  563. <!-- 没有更多数据 -->
  564. <view v-else-if="!hasMore && selectorList.length > 0" class="no-more-text">
  565. <text>没有更多了</text>
  566. </view>
  567. <!-- 空数据提示 -->
  568. <view v-if="selectorList.length === 0 && !isLoading" class="empty-data">
  569. <text>{{ searchKeyword ? '暂无相关数据' : '暂无数据' }}</text>
  570. </view>
  571. </scroll-view>
  572. </view>
  573. </uni-popup>
  574. </view>
  575. </template>
  576. <script setup lang="ts">
  577. import { ref, watch, computed, nextTick, onMounted } from 'vue'
  578. import { useUserStore } from '@/store/user.js'
  579. import config from '@/config.js'
  580. import { uploadSignatureBoardImg, getSeal } from '@/api/process.js'
  581. import { getContractTypeList, getPaymentTypeList, getMaterialList, getSupplierList, getClientList, getPurchaseApplyList, getPurchaseDetailList, checkContractNumber } from '@/api/contract.js'
  582. import $modal from '@/plugins/modal.js'
  583. const userStore = useUserStore()
  584. // 组件挂载时加载合同类型和付款方式列表
  585. onMounted(() => {
  586. loadContractTypeList()
  587. loadPaymentTypeList()
  588. })
  589. // 加载合同类型列表
  590. function loadContractTypeList() {
  591. getContractTypeList(userStore.user.useId).then(({ returnParams }) => {
  592. if (returnParams && Array.isArray(returnParams.typeList)) {
  593. contractTypeList.value = returnParams.typeList
  594. }
  595. }).catch(err => {
  596. console.error('加载合同类型列表失败:', err)
  597. })
  598. }
  599. // 加载付款方式列表
  600. const paymentTypeList = ref<any[]>([])
  601. function loadPaymentTypeList() {
  602. getPaymentTypeList(userStore.user.useId).then(({ returnParams }) => {
  603. if (returnParams && Array.isArray(returnParams.paymentList)) {
  604. paymentTypeList.value = returnParams.paymentList
  605. }
  606. }).catch(err => {
  607. console.error('加载付款方式列表失败:', err)
  608. })
  609. }
  610. const props = defineProps({
  611. formData: {
  612. type: Object,
  613. default: () => ({})
  614. },
  615. formElements: {
  616. type: Array,
  617. default: () => []
  618. },
  619. repeatingForm: {
  620. type: Object,
  621. default: () => ({ elementItem: [], elements: [] })
  622. },
  623. // 是否为发起环节(seModel == '1')
  624. isInitiate: {
  625. type: Boolean,
  626. default: false
  627. },
  628. // 当前环节可编辑的字段列表
  629. editableFields: {
  630. type: Array,
  631. default: () => []
  632. },
  633. // 当前环节的审批意见配置
  634. currentTacheOpinion: {
  635. type: Object,
  636. default: null
  637. }
  638. })
  639. const emits = defineEmits(['update', 'signature-change'])
  640. // 表单数据
  641. const baseForm = ref<any>({
  642. contract_number: '',
  643. contract_name: '',
  644. contract_type: '',
  645. contract_type_name: '',
  646. applyDate: '',
  647. department: '',
  648. salesman: '',
  649. salesman_name: '',
  650. salesmanTel: '',
  651. supplierCode: '',
  652. supplierName: '',
  653. firstparty_name: '',
  654. contract_money: '',
  655. contractContent: '',
  656. projectItem: '',
  657. usePosition: '',
  658. other_contractor: '',
  659. otherFile: '',
  660. salesmanSign: '',
  661. // 录入人信息
  662. contract_entrying_operator: '',
  663. contract_entrying_operator_name: '',
  664. // 组织 ID
  665. unit_id: '',
  666. // 合同ID(用于审批流程中排除自己)
  667. universalid: ''
  668. })
  669. const baseFormRules = ref({
  670. contract_name: [
  671. {
  672. required: true,
  673. errorMessage: '请输入合同名称'
  674. }
  675. ]
  676. })
  677. const materialList = ref<any[]>([])
  678. const paymentList = ref<any[]>([])
  679. const signaturePopup = ref(null)
  680. const signatureRef = ref(null)
  681. const signatureImg = ref('')
  682. const currentApprovalText = ref('')
  683. const approvals = ref<any[]>([]) // 历史审批意见列表
  684. const signaturePopupShow = ref(false)
  685. const isLandscape = ref(false)
  686. // 合同类型列表
  687. const contractTypeList = ref<any[]>([])
  688. // 判断是否为销售合同
  689. const isSalesContract = computed(() => {
  690. return baseForm.value.contract_type === '1' || baseForm.value.contract_type === 1
  691. })
  692. // 选择器相关变量
  693. const selectorPopup = ref(null)
  694. const selectorList = ref<any[]>([])
  695. const selectorType = ref('') // 'material', 'supplier', 'client'
  696. const materialSource = ref('mes') // 'mes' - MES 系统,'purchase' - 采购申请
  697. const purchaseApplyList = ref<any[]>([]) // 采购申请单列表
  698. const selectedPurchaseApply = ref<any>(null) // 选中的采购申请单
  699. const currentPage = ref(1)
  700. const pageSize = 20
  701. const hasMore = ref(true)
  702. const isLoading = ref(false)
  703. const isRefreshing = ref(false)
  704. const searchKeyword = ref('')
  705. // 选择器弹出层标题
  706. const popupTitle = computed(() => {
  707. if (selectorType.value === 'material') return '选择物料'
  708. if (selectorType.value === 'supplier') return '选择供应商'
  709. if (selectorType.value === 'client') return '选择客户'
  710. return '选择'
  711. })
  712. // 获取指定的审批意见元素
  713. const getApprovalElement = (fieldName: string) => {
  714. if (!props.formElements || !Array.isArray(props.formElements)) {
  715. return null
  716. }
  717. // 从 formElements 中找到对应的字段
  718. const elem = props.formElements.find(e => e.tableField === fieldName || e.elementName.includes(fieldName.replace(/_/g, '')))
  719. return elem || null
  720. }
  721. // 获取各部门意见元素(计算属性,避免重复调用)
  722. const departmentalOpinionElem = computed(() => getApprovalElement('departmental_opinion'))
  723. const deputyGeneralManagerOpinionElem = computed(() => getApprovalElement('deputy_general_manager_opinion'))
  724. const auditDeputyGeneralManagerOpinionElem = computed(() => getApprovalElement('audit_deputy_general_manager_opinion'))
  725. const generalManagerOpinionElem = computed(() => getApprovalElement('general_manager_opinion'))
  726. const financeOpinionElem = computed(() => getApprovalElement('finance_opinion'))
  727. const chairmanOpinionElem = computed(() => getApprovalElement('chairman_opinion'))
  728. // 是否发起环节
  729. const isSeModel = computed(() => props.isInitiate)
  730. // 计算各部门意见是否可编辑
  731. const isApprovalFieldEditable = (elem: any) => {
  732. if (!elem) return false
  733. return props.editableFields && props.editableFields.includes(elem.tableField)
  734. }
  735. // 处理审批意见签名
  736. let lastFormInsId = ''
  737. // 计算字段是否可编辑 (只需要该字段在 table_fields 中即可)
  738. const getFieldEditable = (fieldName: string) => {
  739. // 如果没有配置 editableFields,则都不可编辑
  740. if (!props.editableFields || props.editableFields.length === 0) {
  741. return false
  742. }
  743. // 检查该字段是否在可编辑字段列表中 (table_fields 包含的字段才可以编辑)
  744. return props.editableFields.includes(fieldName)
  745. }
  746. // 计算是否为发起环节或字段可编辑 (满足任一条件即可)
  747. const isInitiateOrFieldEditable = (fieldName: string) => {
  748. return props.isInitiate || getFieldEditable(fieldName)
  749. }
  750. // 监听表单数据变化
  751. watch(() => props.formData, (newVal) => {
  752. if (!newVal || Object.keys(newVal).length === 0) {
  753. return
  754. }
  755. // 使用 formInsId 判断是否是新的数据(formInsId 肯定存在)
  756. const currentFormInsId = newVal.lFormInsId || newVal.universalid || ''
  757. // 只有当 formInsId 变化时,才认为是新的数据需要加载
  758. if (currentFormInsId && currentFormInsId !== lastFormInsId) {
  759. lastFormInsId = currentFormInsId
  760. // 填充基本信息 - 直接使用后端返回的字段
  761. baseForm.value = {
  762. contract_number: newVal.contract_number || '',
  763. contract_name: newVal.contract_name || '',
  764. contract_type: newVal.contract_type !== undefined && newVal.contract_type !== null ? newVal.contract_type : '',
  765. contract_type_name: newVal.contract_type_name || '', // 直接使用后端返回的名称
  766. applyDate: newVal.applyDate || '',
  767. department: newVal.department || '',
  768. salesman: newVal.salesman || '',
  769. salesman_name: newVal.salesman_name || '',
  770. salesmanTel: newVal.salesmanTel || '',
  771. supplierCode: newVal.supplierCode || '',
  772. supplierName: newVal.supplierName || '',
  773. firstparty_name: newVal.firstparty_name || '',
  774. secondparty_name: newVal.secondparty_name || '',
  775. // 合同金额:将数字转换为字符串,0 也要显示
  776. contract_money: (newVal.contract_money !== undefined && newVal.contract_money !== null) ? String(newVal.contract_money) : '',
  777. contractContent: newVal.contractContent || '',
  778. projectItem: newVal.projectItem || '',
  779. usePosition: newVal.usePosition || '',
  780. other_contractor: newVal.other_contractor || '',
  781. otherFile: newVal.otherFile || '',
  782. salesmanSign: newVal.salesmanSign || '',
  783. // 录入人信息
  784. contract_entrying_operator: newVal.contract_entrying_operator || '',
  785. contract_entrying_operator_name: newVal.contract_entrying_operator_name || '',
  786. // 组织 ID
  787. unit_id: newVal.unit_id || '',
  788. // 保存公司名称,用于销售合同时对调需方供方(从后端获取)
  789. companyName: newVal.companyName || '',
  790. // 合同ID(用于审批流程中排除自己)
  791. universalid: newVal.universalid || ''
  792. }
  793. // 初始化 lastContractType
  794. lastContractType = String(newVal.contract_type || '')
  795. // 从 contractMaterialList 中获取物料列表
  796. const rawMaterialList = newVal.details || newVal.contractMaterialList || []
  797. // 加载物料数据
  798. if (Array.isArray(rawMaterialList)) {
  799. materialList.value = rawMaterialList.map((item: any) => ({
  800. itemCode: item.itemCode || item.materialCode,
  801. itemName: item.itemName || item.materialName,
  802. specification: item.specification || item.materialModel,
  803. measureName: item.measureName || item.unit,
  804. qty: item.qty || 0,
  805. price: item.price || 0,
  806. cess: item.cess || 0,
  807. priceTax: item.priceTax || 0,
  808. purchaseId: item.purchaseId || '',
  809. purchaseNumber: item.purchaseNumber || '',
  810. unit_id: item.unit_id || newVal.unit_id || '', // 从明细或主表获取 unit_id
  811. expanded: true // 默认展开
  812. }))
  813. } else {
  814. materialList.value = []
  815. }
  816. // 如果是销售合同,立即清理来自采购申请单的物料(与 onContractTypeChange 逻辑一致)
  817. if ((newVal.contract_type === '1' || newVal.contract_type === 1) && materialList.value.length > 0) {
  818. const invalidMaterials: number[] = []
  819. materialList.value.forEach((item, idx) => {
  820. const purchaseId = item.purchaseId || ''
  821. const purchaseNumber = item.purchaseNumber || ''
  822. // 排除空值、null字符串、0等无效值
  823. if ((purchaseId && purchaseId !== 'null' && purchaseId !== '0' && purchaseId !== 'undefined') ||
  824. (purchaseNumber && purchaseNumber !== 'null' && purchaseNumber !== 'undefined')) {
  825. invalidMaterials.push(idx)
  826. }
  827. })
  828. if (invalidMaterials.length > 0) {
  829. // 直接删除不符合要求的物料(从后往前删,避免索引错乱)
  830. for (let i = invalidMaterials.length - 1; i >= 0; i--) {
  831. materialList.value.splice(invalidMaterials[i], 1)
  832. }
  833. // 重新计算总价
  834. calculateTotalPrice()
  835. console.log(`销售合同初始化:已清除 ${invalidMaterials.length} 条来自采购申请单的物料`)
  836. }
  837. }
  838. // 从 contractPaymentList 中获取付款列表
  839. const rawPaymentList = newVal.contractPaymentList || []
  840. // 加载付款数据
  841. if (Array.isArray(rawPaymentList)) {
  842. paymentList.value = rawPaymentList.map((item: any) => ({
  843. payType: item.payType || '',
  844. payTypeName: item.payTypeName || '',
  845. proportion: item.proportion || 0,
  846. amount: item.amount || 0,
  847. amountPaid: item.amountPaid || 0,
  848. payTime: item.payTime || '',
  849. payStatus: item.payStatus || '0',
  850. payStatusName: item.payStatusName || getPayStatusName(item),
  851. remark: item.remark || '',
  852. unit_id: item.unit_id || newVal.unit_id || '', // 从明细或主表获取 unit_id
  853. expanded: true // 默认展开
  854. }))
  855. // 如果付款方式名称为空,尝试从列表中查找
  856. if (paymentTypeList.value.length > 0) {
  857. paymentList.value.forEach(payment => {
  858. if (!payment.payTypeName && payment.payType) {
  859. const payType = paymentTypeList.value.find(p => p.payType == payment.payType)
  860. if (payType) {
  861. payment.payTypeName = payType.payTypeName
  862. }
  863. }
  864. })
  865. }
  866. } else {
  867. paymentList.value = []
  868. }
  869. }
  870. }, { immediate: true, deep: true })
  871. // 切换物料展开/收起状态
  872. function toggleMaterialExpand(index: number) {
  873. if (materialList.value[index]) {
  874. materialList.value[index].expanded = !materialList.value[index].expanded
  875. }
  876. }
  877. // 切换付款展开/收起状态
  878. function togglePaymentExpand(index: number) {
  879. if (paymentList.value[index]) {
  880. paymentList.value[index].expanded = !paymentList.value[index].expanded
  881. }
  882. }
  883. // 打开物料选择器
  884. async function openMaterialSelector() {
  885. selectorType.value = 'material'
  886. materialSource.value = 'mes' // 默认 MES 系统模式
  887. currentPage.value = 1
  888. hasMore.value = true
  889. selectorList.value = []
  890. await loadMaterials(1, false)
  891. openPopup()
  892. }
  893. // 打开供应商选择器
  894. async function openSupplierSelector() {
  895. selectorType.value = 'supplier'
  896. currentPage.value = 1
  897. hasMore.value = true
  898. selectorList.value = []
  899. await loadSuppliers(1, false)
  900. openPopup()
  901. }
  902. // 打开客户选择器(销售合同时使用)
  903. async function openClientSelector() {
  904. selectorType.value = 'client'
  905. currentPage.value = 1
  906. hasMore.value = true
  907. selectorList.value = []
  908. await loadClients(1, false)
  909. openPopup()
  910. }
  911. // 加载客户列表(分页)
  912. async function loadClients(page: number, append: boolean = false) {
  913. if (isLoading.value) return
  914. isLoading.value = true
  915. if (page === 1) {
  916. isRefreshing.value = true
  917. }
  918. try {
  919. const res = await getClientList(
  920. userStore.user.useId,
  921. page,
  922. pageSize,
  923. searchKeyword.value
  924. )
  925. if (res.returnCode === '1') {
  926. const result = res.returnParams
  927. const newList = result.list || []
  928. if (append) {
  929. // 追加模式(加载更多)
  930. selectorList.value = [...selectorList.value, ...newList]
  931. } else {
  932. // 覆盖模式(刷新/搜索)
  933. selectorList.value = newList
  934. }
  935. // 判断是否还有更多数据
  936. hasMore.value = selectorList.value.length < result.total
  937. } else {
  938. $modal.msgError('加载客户失败')
  939. }
  940. } catch (error) {
  941. console.error('加载客户失败', error)
  942. $modal.msgError('加载失败')
  943. } finally {
  944. isLoading.value = false
  945. isRefreshing.value = false
  946. }
  947. }
  948. // 打开弹出层
  949. function openPopup() {
  950. if (selectorPopup.value) {
  951. ;(selectorPopup.value as any).open()
  952. }
  953. }
  954. // 关闭弹出层
  955. function closePopup() {
  956. if (selectorPopup.value) {
  957. ;(selectorPopup.value as any).close()
  958. }
  959. }
  960. // 加载物料列表(分页)
  961. async function loadMaterials(page: number, append: boolean = false) {
  962. if (isLoading.value) return
  963. isLoading.value = true
  964. if (page === 1) {
  965. isRefreshing.value = true
  966. }
  967. try {
  968. const res = await getMaterialList(
  969. userStore.user.useId,
  970. page,
  971. pageSize,
  972. searchKeyword.value
  973. )
  974. if (res.returnCode === '1') {
  975. const result = res.returnParams
  976. const newList = result.list || []
  977. if (append) {
  978. // 追加模式(加载更多)
  979. selectorList.value = [...selectorList.value, ...newList]
  980. } else {
  981. // 覆盖模式(刷新/搜索)
  982. selectorList.value = newList
  983. }
  984. // 判断是否还有更多数据
  985. hasMore.value = selectorList.value.length < result.total
  986. } else {
  987. $modal.msgError('加载物料失败')
  988. }
  989. } catch (error) {
  990. console.error('加载物料失败', error)
  991. $modal.msgError('加载失败')
  992. } finally {
  993. isLoading.value = false
  994. isRefreshing.value = false
  995. }
  996. }
  997. // 加载供应商列表(分页)
  998. async function loadSuppliers(page: number, append: boolean = false) {
  999. if (isLoading.value) return
  1000. isLoading.value = true
  1001. if (page === 1) {
  1002. isRefreshing.value = true
  1003. }
  1004. try {
  1005. const res = await getSupplierList(
  1006. userStore.user.useId,
  1007. page,
  1008. pageSize,
  1009. searchKeyword.value
  1010. )
  1011. if (res.returnCode === '1') {
  1012. const result = res.returnParams
  1013. const newList = result.list || []
  1014. if (append) {
  1015. selectorList.value = [...selectorList.value, ...newList]
  1016. } else {
  1017. selectorList.value = newList
  1018. }
  1019. hasMore.value = selectorList.value.length < result.total
  1020. } else {
  1021. $modal.msgError('加载供应商失败')
  1022. }
  1023. } catch (error) {
  1024. console.error('加载供应商失败', error)
  1025. $modal.msgError('加载失败')
  1026. } finally {
  1027. isLoading.value = false
  1028. isRefreshing.value = false
  1029. }
  1030. }
  1031. // 加载采购申请单列表
  1032. async function loadPurchaseApplyList() {
  1033. if (isLoading.value) return
  1034. isLoading.value = true
  1035. isRefreshing.value = true
  1036. try {
  1037. const res = await getPurchaseApplyList(userStore.user.useId)
  1038. if (res.returnCode === '1') {
  1039. const result = res.returnParams
  1040. purchaseApplyList.value = result.list || []
  1041. selectedPurchaseApply.value = null
  1042. selectorList.value = [] // 清空物料列表
  1043. } else {
  1044. $modal.msgError('加载采购申请单失败')
  1045. }
  1046. } catch (error) {
  1047. console.error('加载采购申请单失败', error)
  1048. $modal.msgError('加载失败')
  1049. } finally {
  1050. isLoading.value = false
  1051. isRefreshing.value = false
  1052. }
  1053. }
  1054. // 加载采购申请物料
  1055. async function loadPurchaseMaterials(resetPage: boolean = false) {
  1056. if (isLoading.value) return
  1057. // 如果是分页加载,不清空列表
  1058. if (resetPage) {
  1059. currentPage.value = 1
  1060. selectorList.value = []
  1061. }
  1062. isLoading.value = true
  1063. isRefreshing.value = resetPage
  1064. try {
  1065. // 如果不指定采购申请单,则查询所有物料
  1066. const purchaseFormId = selectedPurchaseApply.value
  1067. ? selectedPurchaseApply.value.contractPurchaseFormId.toString()
  1068. : ''
  1069. const res = await getPurchaseDetailList(
  1070. userStore.user.useId,
  1071. purchaseFormId,
  1072. currentPage.value,
  1073. 10 // 每页 10 条,与 PC 端一致
  1074. )
  1075. if (res.returnCode === '1') {
  1076. const result = res.returnParams
  1077. const newList = result.list || []
  1078. if (resetPage) {
  1079. selectorList.value = newList
  1080. } else {
  1081. // 追加数据
  1082. selectorList.value.push(...newList)
  1083. }
  1084. // 判断是否还有更多数据
  1085. hasMore.value = selectorList.value.length < result.total
  1086. if (!resetPage) {
  1087. currentPage.value++
  1088. }
  1089. } else {
  1090. $modal.msgError('加载物料失败')
  1091. }
  1092. } catch (error) {
  1093. console.error('加载物料失败', error)
  1094. $modal.msgError('加载失败')
  1095. } finally {
  1096. isLoading.value = false
  1097. isRefreshing.value = false
  1098. }
  1099. }
  1100. // 物料来源切换时
  1101. async function onMaterialSourceChange() {
  1102. currentPage.value = 1
  1103. hasMore.value = true
  1104. selectorList.value = []
  1105. searchKeyword.value = ''
  1106. if (materialSource.value === 'mes') {
  1107. await loadMaterials(1, false)
  1108. } else {
  1109. // 采购申请模式,先加载采购申请单列表,然后加载所有物料
  1110. await loadPurchaseApplyList()
  1111. // 加载完采购申请单后,立即查询物料(默认不指定具体采购单)
  1112. await loadPurchaseMaterials(true) // true 表示重置分页
  1113. }
  1114. }
  1115. // 采购申请单选择变化
  1116. function onPurchaseChange(e: any) {
  1117. const selectedIndex = e.detail.value
  1118. selectedPurchaseApply.value = purchaseApplyList.value[selectedIndex]
  1119. loadPurchaseMaterials(true)
  1120. }
  1121. // 清空采购申请单选择
  1122. function clearPurchaseSelection() {
  1123. selectedPurchaseApply.value = null
  1124. selectorList.value = []
  1125. loadPurchaseMaterials(true)
  1126. }
  1127. // 加载更多
  1128. function loadMore() {
  1129. if (!hasMore.value || isLoading.value) return
  1130. currentPage.value++
  1131. if (selectorType.value === 'material') {
  1132. if (materialSource.value === 'mes') {
  1133. loadMaterials(currentPage.value, true)
  1134. } else {
  1135. loadPurchaseMaterials(false)
  1136. }
  1137. } else if (selectorType.value === 'supplier') {
  1138. loadSuppliers(currentPage.value, true)
  1139. } else if (selectorType.value === 'client') {
  1140. loadClients(currentPage.value, true)
  1141. }
  1142. }
  1143. // 下拉刷新
  1144. function onRefresh() {
  1145. currentPage.value = 1
  1146. if (selectorType.value === 'material') {
  1147. if (materialSource.value === 'mes') {
  1148. loadMaterials(1, false)
  1149. } else {
  1150. loadPurchaseMaterials(true)
  1151. }
  1152. } else if (selectorType.value === 'supplier') {
  1153. loadSuppliers(1, false)
  1154. } else if (selectorType.value === 'client') {
  1155. loadClients(1, false)
  1156. }
  1157. }
  1158. // 搜索
  1159. function handleSearch() {
  1160. currentPage.value = 1
  1161. if (selectorType.value === 'material') {
  1162. loadMaterials(1, false)
  1163. } else if (selectorType.value === 'supplier') {
  1164. loadSuppliers(1, false)
  1165. } else if (selectorType.value === 'client') {
  1166. loadClients(1, false)
  1167. }
  1168. }
  1169. // 获取物料/供应商/客户名称
  1170. function getSelectorItemName(item: any): string {
  1171. if (selectorType.value === 'material') {
  1172. return item.itemName || ''
  1173. } else if (selectorType.value === 'supplier') {
  1174. return item.vendorName || ''
  1175. } else if (selectorType.value === 'client') {
  1176. return item.clientName || ''
  1177. }
  1178. return ''
  1179. }
  1180. // 获取编码
  1181. function getItemCode(item: any): string {
  1182. if (selectorType.value === 'material') {
  1183. return item.itemCode || ''
  1184. } else if (selectorType.value === 'supplier') {
  1185. return item.vendorCode || ''
  1186. } else if (selectorType.value === 'client') {
  1187. return item.clientCode || ''
  1188. }
  1189. return ''
  1190. }
  1191. // 获取规格型号(仅物料有)
  1192. function getItemSpec(item: any): string {
  1193. if (selectorType.value === 'material') {
  1194. return item.specification || ''
  1195. }
  1196. return ''
  1197. }
  1198. // 判断是否已选中
  1199. // 注意:只有当物料编码和采购申请单编号都相同时,才认为是重复选择
  1200. function isSelected(item: any): boolean {
  1201. if (selectorType.value === 'material') {
  1202. const itemCode = item.itemCode || ''
  1203. const purchaseNumber = item.purchaseNumber || ''
  1204. // 检查物料列表中是否存在相同的物料(物料编码 + 采购申请单编号都相同)
  1205. return materialList.value.some(m => {
  1206. const existItemCode = m.itemCode || ''
  1207. const existPurchaseNumber = m.purchaseNumber || ''
  1208. // 只有当物料编码和采购申请单编号都相同时,才认为是重复
  1209. return existItemCode === itemCode &&
  1210. ((existPurchaseNumber === purchaseNumber) ||
  1211. (!existPurchaseNumber && !purchaseNumber))
  1212. })
  1213. } else if (selectorType.value === 'supplier') {
  1214. const code = item.vendorCode || item.supplierCode
  1215. return baseForm.value.supplierCode === code
  1216. } else if (selectorType.value === 'client') {
  1217. const code = item.clientCode
  1218. return baseForm.value.supplierCode === code
  1219. }
  1220. return false
  1221. }
  1222. // 选择物料/供应商/客户
  1223. function selectItem(item: any) {
  1224. if (selectorType.value === 'material') {
  1225. // 检查是否已存在(根据物料编码 + 采购申请单编号判断)
  1226. const exists = isSelected(item)
  1227. if (exists) {
  1228. $modal.msg('该物料已添加')
  1229. return
  1230. }
  1231. // 销售合同不允许选择有采购申请单的物料
  1232. if (isSalesContract.value) {
  1233. const purchaseId = item.purchaseId || ''
  1234. const purchaseNumber = item.purchaseNumber || ''
  1235. if ((purchaseId && purchaseId !== 'null' && purchaseId !== '0' && purchaseId !== 'undefined') ||
  1236. (purchaseNumber && purchaseNumber !== 'null' && purchaseNumber !== 'undefined')) {
  1237. $modal.msgWarn('销售合同不允许选择来自采购申请单的物料')
  1238. return
  1239. }
  1240. }
  1241. // 确保数值字段正确转换(防止后端返回对象或字符串)
  1242. const qty = parseFloat(item.qty) || 0
  1243. const price = parseFloat(item.price) || 0
  1244. const cess = parseFloat(item.cess) || 0
  1245. const priceTax = parseFloat(item.priceTax) || 0
  1246. // 添加物料到列表
  1247. materialList.value.push({
  1248. itemCode: item.itemCode,
  1249. itemName: item.itemName,
  1250. specification: item.specification,
  1251. measureName: item.measureName,
  1252. qty: qty,
  1253. price: price,
  1254. cess: cess,
  1255. priceTax: priceTax,
  1256. purchaseId: isSalesContract.value ? '' : (item.purchaseId || selectedPurchaseApply.value?.contractPurchaseFormId || ''),
  1257. purchaseNumber: isSalesContract.value ? '' : (item.purchaseNumber || selectedPurchaseApply.value?.contractPurchaseFormNumber || ''),
  1258. expanded: true
  1259. })
  1260. // 重新计算总价
  1261. calculateTotalPrice()
  1262. } else if (selectorType.value === 'supplier') {
  1263. // 选择供应商:供方=供应商名称,supplierCode/supplierName 保存供应商信息
  1264. baseForm.value.secondparty_name = item.vendorName
  1265. baseForm.value.supplierCode = item.vendorCode
  1266. baseForm.value.supplierName = item.vendorName
  1267. } else if (selectorType.value === 'client') {
  1268. // 选择客户:需方=客户名称,supplierCode/supplierName 保存客户信息
  1269. baseForm.value.firstparty_name = item.clientName
  1270. baseForm.value.supplierCode = item.clientCode
  1271. baseForm.value.supplierName = item.clientName
  1272. }
  1273. closePopup()
  1274. }
  1275. // 合同类型变化
  1276. let lastContractType = '' // 保存上一次的合同类型
  1277. function onContractTypeChange(e: any) {
  1278. const index = e.detail.value
  1279. if (contractTypeList.value[index]) {
  1280. const oldContractType = lastContractType
  1281. const newContractType = contractTypeList.value[index].contract_type
  1282. // 如果合同类型发生变化,检查是否需要清理物料
  1283. if (oldContractType !== String(newContractType)) {
  1284. // 切换到销售合同时,检查是否有来自采购申请单的物料
  1285. if (newContractType === '1' || newContractType === 1) {
  1286. const invalidMaterials: number[] = []
  1287. materialList.value.forEach((item, idx) => {
  1288. const purchaseId = item.purchaseId || ''
  1289. const purchaseNumber = item.purchaseNumber || ''
  1290. // 排除空值、null字符串、0等无效值
  1291. if ((purchaseId && purchaseId !== 'null' && purchaseId !== '0' && purchaseId !== 'undefined') ||
  1292. (purchaseNumber && purchaseNumber !== 'null' && purchaseNumber !== 'undefined')) {
  1293. invalidMaterials.push(idx)
  1294. }
  1295. })
  1296. if (invalidMaterials.length > 0) {
  1297. $modal.confirm('', `检测到已选择的物料中有 ${invalidMaterials.length} 条来自采购申请单的数据,销售合同不允许使用采购申请单物料,是否清除这些不符合要求的物料?`)
  1298. .then(() => {
  1299. // 用户确认,删除不符合要求的物料(从后往前删,避免索引错乱)
  1300. for (let i = invalidMaterials.length - 1; i >= 0; i--) {
  1301. materialList.value.splice(invalidMaterials[i], 1)
  1302. }
  1303. // 重新计算总价
  1304. calculateTotalPrice()
  1305. // 更新合同类型为销售合同
  1306. baseForm.value.contract_type = newContractType
  1307. baseForm.value.contract_type_name = contractTypeList.value[index].contract_type_name
  1308. lastContractType = String(newContractType)
  1309. // 调整需方供方显示
  1310. adjustPartyDisplay()
  1311. $modal.msgSuccess(`已清除 ${invalidMaterials.length} 条不符合要求的物料`)
  1312. })
  1313. .catch(() => {
  1314. // 用户取消,恢复原来的合同类型
  1315. // 不需要做任何事,因为还没有更新 contract_type
  1316. })
  1317. return // 等待用户确认后再继续
  1318. }
  1319. }
  1320. }
  1321. // 更新合同类型
  1322. baseForm.value.contract_type = newContractType
  1323. baseForm.value.contract_type_name = contractTypeList.value[index].contract_type_name
  1324. lastContractType = String(newContractType)
  1325. // 根据合同类型调整需方和供方的显示
  1326. adjustPartyDisplay()
  1327. }
  1328. }
  1329. // 根据合同类型调整需方和供方的显示
  1330. function adjustPartyDisplay() {
  1331. // 从 baseForm 中获取保存的公司名称
  1332. const companyName = (baseForm.value as any).companyName || ''
  1333. if (isSalesContract.value) {
  1334. // 销售合同:需方=选择客户,供方=公司名称(只读)
  1335. baseForm.value.secondparty_name = companyName
  1336. baseForm.value.supplierCode = ''
  1337. baseForm.value.supplierName = ''
  1338. baseForm.value.firstparty_name = ''
  1339. } else {
  1340. // 其他合同类型:需方=公司名称(只读),供方=选择供应商
  1341. baseForm.value.firstparty_name = companyName
  1342. baseForm.value.secondparty_name = ''
  1343. baseForm.value.supplierCode = ''
  1344. baseForm.value.supplierName = ''
  1345. }
  1346. }
  1347. // 删除物料
  1348. function removeMaterial(index: number) {
  1349. $modal.confirm('', '确定删除该物料?')
  1350. .then(() => {
  1351. materialList.value.splice(index, 1)
  1352. // 重新计算总价
  1353. calculateTotalPrice()
  1354. }).catch(() => {})
  1355. }
  1356. // 物料价格计算 (与 start.vue 保持一致)
  1357. function calculateMaterialPrice(item: any) {
  1358. const price = parseFloat(item.price) || 0
  1359. const cess = parseFloat(item.cess) || 0
  1360. // 计算税后单价:税前单价 * (1 + 税率 / 100)
  1361. item.priceTax = (price * (1 + cess / 100)).toFixed(2)
  1362. // 重新计算总价
  1363. calculateTotalPrice()
  1364. }
  1365. // 计算合同总价
  1366. let manualInput = false // 标记用户是否手动输入过合同金额
  1367. function calculateTotalPrice() {
  1368. let total = 0
  1369. const hasMaterial = materialList.value.length > 0
  1370. materialList.value.forEach(item => {
  1371. const qty = parseFloat(item.qty) || 0
  1372. const priceTax = parseFloat(item.priceTax) || 0
  1373. total += qty * priceTax
  1374. })
  1375. // 获取当前合同金额
  1376. const currentMoney = parseFloat(baseForm.value.contract_money)
  1377. if (hasMaterial) {
  1378. // 有物料时,检查是否需要更新合同金额
  1379. // 如果是手动输入且大于物料总额,保留用户输入
  1380. // 否则,使用物料总额
  1381. if (manualInput && currentMoney && currentMoney > total) {
  1382. // 保留用户手动输入的较大值
  1383. // 不更新合同金额
  1384. } else {
  1385. // 自动更新为物料总额(包括非手动输入,或手动输入但物料总额更大的情况)
  1386. baseForm.value.contract_money = total.toFixed(2)
  1387. // 重置手动输入标记
  1388. manualInput = false
  1389. }
  1390. } else {
  1391. // 没有物料时,只有非手动输入才清空
  1392. if (!manualInput) {
  1393. baseForm.value.contract_money = ''
  1394. // 合同金额被清空时,删除所有付款信息
  1395. clearAllPaymentInfo()
  1396. }
  1397. // 注意:如果是手动输入,即使没有物料也保留用户输入
  1398. }
  1399. // 更新付款信息中的金额
  1400. calculatePaymentAmount()
  1401. }
  1402. // 计算物料总价值(仅返回数值,不更新合同金额)
  1403. function calculateTotalPriceValue(): number {
  1404. let total = 0
  1405. materialList.value.forEach(item => {
  1406. const qty = parseFloat(item.qty) || 0
  1407. const priceTax = parseFloat(item.priceTax) || 0
  1408. total += qty * priceTax
  1409. })
  1410. return total
  1411. }
  1412. // 监听合同金额变化(检测用户手动输入)- 失焦时触发
  1413. function onContractMoneyBlur() {
  1414. // 当用户手动修改合同金额时,设置手动输入标记
  1415. const calculatedTotal = calculateTotalPriceValue()
  1416. const currentMoney = parseFloat(baseForm.value.contract_money)
  1417. if (currentMoney && currentMoney !== calculatedTotal) {
  1418. manualInput = true
  1419. }
  1420. calculatePaymentAmount()
  1421. }
  1422. // 数量变化时
  1423. function onQuantityBlur(item: any) {
  1424. calculateTotalPrice()
  1425. }
  1426. // 合同金额失焦验证 (已移除,改为提交前统一验证)
  1427. // function onContractMoneyBlur() {}
  1428. // 税前单价变化时
  1429. function onPriceBlur(item: any) {
  1430. calculateMaterialPrice(item)
  1431. }
  1432. // 税率变化时
  1433. function onCessBlur(item: any) {
  1434. calculateMaterialPrice(item)
  1435. }
  1436. // 判断是否可以添加付款(有合同金额即可)
  1437. const canAddPayment = computed(() => {
  1438. const contractMoney = parseFloat(baseForm.value.contract_money) || 0
  1439. return contractMoney > 0
  1440. })
  1441. // 添加付款
  1442. function addPayment() {
  1443. if (!canAddPayment.value) {
  1444. $modal.msgWarn('请先输入合同金额')
  1445. return
  1446. }
  1447. paymentList.value.push({
  1448. payType: '',
  1449. payTypeName: '',
  1450. proportion: '0',
  1451. amount: '0',
  1452. amountPaid: '0',
  1453. payTime: '',
  1454. payStatus: '0',
  1455. payStatusName: '未支付',
  1456. remark: '',
  1457. expanded: true
  1458. })
  1459. }
  1460. // 比例变化时重新计算金额
  1461. function onProportionBlur(item: any) {
  1462. calculatePaymentAmount()
  1463. }
  1464. // 付款方式类型变化
  1465. function onPaymentTypeChange(index: number, e: any) {
  1466. const selectedIndex = e.detail.value
  1467. const selected = paymentTypeList.value[selectedIndex]
  1468. if (selected) {
  1469. paymentList.value[index].payType = selected.payType
  1470. paymentList.value[index].payTypeName = selected.payTypeName
  1471. }
  1472. }
  1473. // 已付金额变化时更新付款状态
  1474. function onAmountPaidBlur(item: any) {
  1475. updatePaymentStatus(item)
  1476. }
  1477. // 付款时间变化
  1478. function onPayTimeChange(item: any, e: any) {
  1479. // uni-datetime-picker 返回的可能是时间戳或 Date 对象,需要转换为字符串
  1480. const dateValue = e
  1481. if (dateValue) {
  1482. // 如果是时间戳或数字,转换为日期字符串
  1483. if (typeof dateValue === 'number' || typeof dateValue === 'string') {
  1484. const date = new Date(dateValue)
  1485. if (!isNaN(date.getTime())) {
  1486. const year = date.getFullYear()
  1487. const month = String(date.getMonth() + 1).padStart(2, '0')
  1488. const day = String(date.getDate()).padStart(2, '0')
  1489. item.payTime = `${year}-${month}-${day}`
  1490. }
  1491. } else if (typeof dateValue === 'object') {
  1492. // 如果已经是 Date 对象
  1493. const year = dateValue.getFullYear()
  1494. const month = String(dateValue.getMonth() + 1).padStart(2, '0')
  1495. const day = String(dateValue.getDate()).padStart(2, '0')
  1496. item.payTime = `${year}-${month}-${day}`
  1497. }
  1498. }
  1499. }
  1500. // 计算付款金额(根据比例)
  1501. function calculatePaymentAmount() {
  1502. const contractMoney = parseFloat(baseForm.value.contract_money) || 0
  1503. paymentList.value.forEach(item => {
  1504. const proportion = parseFloat(item.proportion) || 0
  1505. const amount = (contractMoney * proportion / 100).toFixed(2)
  1506. item.amount = amount
  1507. // 更新付款状态
  1508. updatePaymentStatus(item)
  1509. })
  1510. }
  1511. // 更新付款状态
  1512. function updatePaymentStatus(item: any) {
  1513. const amount = parseFloat(item.amount) || 0
  1514. const amountPaid = parseFloat(item.amountPaid) || 0
  1515. if (amountPaid === 0) {
  1516. item.payStatus = '0'
  1517. item.payStatusName = '未支付'
  1518. } else if (amountPaid < amount) {
  1519. item.payStatus = '1'
  1520. item.payStatusName = '部分支付'
  1521. } else if (amountPaid >= amount) {
  1522. item.payStatus = '2'
  1523. item.payStatusName = '已支付'
  1524. }
  1525. }
  1526. // 获取付款状态名称
  1527. function getPayStatusName(item: any): string {
  1528. const amount = parseFloat(item.amount) || 0
  1529. const amountPaid = parseFloat(item.amountPaid) || 0
  1530. if (amountPaid === 0) {
  1531. return '未支付'
  1532. } else if (amountPaid < amount) {
  1533. return '部分支付'
  1534. } else if (amountPaid >= amount) {
  1535. return '已支付'
  1536. }
  1537. return '未支付'
  1538. }
  1539. // 清空所有付款信息
  1540. function clearAllPaymentInfo() {
  1541. paymentList.value = []
  1542. }
  1543. // 删除付款
  1544. function removePayment(index: number) {
  1545. $modal.confirm('', '确定删除该付款明细?')
  1546. .then(() => {
  1547. paymentList.value.splice(index, 1)
  1548. }).catch(() => {})
  1549. }
  1550. // 处理审批意见签名
  1551. const currentApprovalFieldName = ref('')
  1552. // 存储每个签名字段的印章信息
  1553. const approvalSealInfo = ref<Record<string, any>>({})
  1554. function handleApprovalSignature(fieldName: string) {
  1555. currentApprovalFieldName.value = fieldName
  1556. signaturePopupShow.value = false
  1557. nextTick(() => {
  1558. signaturePopupShow.value = true
  1559. })
  1560. signaturePopup.value.open()
  1561. }
  1562. // 处理一键签名
  1563. function handleAutoSeal(fieldName: string) {
  1564. const elem = getApprovalElement(fieldName)
  1565. if (elem) {
  1566. getSeal(userStore.user.useId).then(({ returnParams }) => {
  1567. const elem = getApprovalElement(fieldName)
  1568. elem.defaultValue = returnParams.sealFileId.universalid
  1569. elem.sealImgPath = returnParams.sealFileId.path
  1570. // 保存印章信息(用于后端处理)
  1571. // 一键签名时,sealFileId.universalid 就是印章模板 ID
  1572. approvalSealInfo.value[fieldName] = {
  1573. sealInsId: returnParams.sealFileId.universalid, // 签名实例 ID(这里与印章模板 ID 相同)
  1574. sealFileId: returnParams.sealFileId.universalid, // 印章模板 ID(用于 imgval)
  1575. left: 0, // 默认左边距为 0
  1576. top: 0 // 默认上边距为 0
  1577. }
  1578. }).catch(err => {
  1579. $modal.msgError('获取签名失败:' + err)
  1580. })
  1581. }
  1582. }
  1583. // 初始化签字板
  1584. function initSignature() {
  1585. signaturePopupShow.value = false
  1586. setTimeout(() => {
  1587. signaturePopupShow.value = true
  1588. }, 100)
  1589. }
  1590. // 点击签字板按钮
  1591. function onclickSignatureButton(event: string) {
  1592. switch (event) {
  1593. case 'undo':
  1594. signatureRef.value.undo()
  1595. break
  1596. case 'clear':
  1597. signatureRef.value.clear()
  1598. break
  1599. case 'save':
  1600. signatureRef.value.canvasToTempFilePath({
  1601. success: (res: any) => {
  1602. if (res.isEmpty) {
  1603. $modal.msgError('签名不能为空!')
  1604. return
  1605. }
  1606. // 判断上传文件是否是 base64
  1607. if (res.tempFilePath.substring(0, 'data:image/png;base64,'.length) == 'data:image/png;base64,') {
  1608. const _fileData = res.tempFilePath
  1609. uploadSignatureBoardImg(userStore.user.useId, _fileData, getApprovalElement(currentApprovalFieldName.value).tableField)
  1610. .then(({ returnParams }) => {
  1611. const elem = getApprovalElement(currentApprovalFieldName.value)
  1612. elem.defaultValue = returnParams.sealInsID
  1613. elem.sealImgPath = returnParams.path
  1614. // 保存印章信息(用于后端处理)
  1615. // sealInsID 是手写签名的实例 ID
  1616. approvalSealInfo.value[currentApprovalFieldName.value] = {
  1617. sealInsId: returnParams.sealInsID, // 签名实例 ID
  1618. sealFileId: returnParams.sealInsID, // 手写签名图片 ID
  1619. left: 0, // 默认左边距为 0
  1620. top: 0 // 默认上边距为 0
  1621. }
  1622. currentApprovalFieldName.value = ''
  1623. signaturePopupShow.value = false
  1624. signaturePopup.value.close()
  1625. })
  1626. } else {
  1627. // 转 base64
  1628. uni.getFileSystemManager().readFile({
  1629. filePath: res.tempFilePath,
  1630. encoding: 'base64',
  1631. success: (fileData: any) => {
  1632. const _fileData = 'data:image/png;base64,' + fileData.data
  1633. uploadSignatureBoardImg(userStore.user.useId, _fileData, getApprovalElement(currentApprovalFieldName.value).tableField)
  1634. .then(({ returnParams }) => {
  1635. const elem = getApprovalElement(currentApprovalFieldName.value)
  1636. elem.defaultValue = returnParams.sealInsID
  1637. elem.sealImgPath = returnParams.path
  1638. // 保存印章信息(用于后端处理)
  1639. // sealInsID 是手写签名的实例 ID
  1640. approvalSealInfo.value[currentApprovalFieldName.value] = {
  1641. sealInsId: returnParams.sealInsID, // 签名实例 ID
  1642. sealFileId: returnParams.sealInsID, // 手写签名图片 ID
  1643. left: 0, // 默认左边距为 0
  1644. top: 0 // 默认上边距为 0
  1645. }
  1646. currentApprovalFieldName.value = ''
  1647. signaturePopupShow.value = false
  1648. signaturePopup.value.close()
  1649. })
  1650. }
  1651. })
  1652. }
  1653. }
  1654. })
  1655. break
  1656. case 'landscape':
  1657. isLandscape.value = !isLandscape.value
  1658. initSignature()
  1659. break
  1660. }
  1661. }
  1662. // 清空签名
  1663. function clearSignature() {
  1664. onclickSignatureButton('clear')
  1665. }
  1666. // 保存签名
  1667. function saveSignature() {
  1668. onclickSignatureButton('save')
  1669. }
  1670. // 关闭签名
  1671. function closeSignature() {
  1672. signaturePopupShow.value = false
  1673. signaturePopup.value.close()
  1674. }
  1675. // 暴露验证方法给父组件
  1676. defineExpose({
  1677. validate: async () => {
  1678. // 合同编号验证(发起环节或字段可编辑时需要验证)
  1679. if (isSeModel.value || getFieldEditable('contract_number')) {
  1680. if (!baseForm.value.contract_number || !baseForm.value.contract_number.trim()) {
  1681. return Promise.reject(new Error('合同编号不能为空!'))
  1682. }
  1683. // 验证合同编号唯一性(异步调用后端接口)
  1684. try {
  1685. const res = await checkContractNumber(userStore.user.useId, baseForm.value.contract_number, baseForm.value.universalid || '')
  1686. if (res.returnCode !== '1') {
  1687. return Promise.reject(new Error(res.returnMsg || '合同编号验证失败'))
  1688. }
  1689. } catch (error) {
  1690. console.error('合同编号验证失败', error)
  1691. return Promise.reject(new Error('合同编号验证失败,请重试'))
  1692. }
  1693. }
  1694. // 基本信息验证
  1695. if (!baseForm.value.contract_name || !baseForm.value.contract_name.trim()) {
  1696. return Promise.reject(new Error('合同名称不能为空!'))
  1697. }
  1698. // 合同名称长度验证(最多 100 字符)
  1699. if (baseForm.value.contract_name && baseForm.value.contract_name.length > 100) {
  1700. return Promise.reject(new Error('合同名称长度不能超过 100!'))
  1701. }
  1702. // 合同类型验证 (发起环节或字段可编辑时需要验证)
  1703. if (isSeModel.value || getFieldEditable('contract_type')) {
  1704. const contractType = baseForm.value.contract_type
  1705. if (!contractType || (typeof contractType === 'string' && !contractType.trim())) {
  1706. return Promise.reject(new Error('合同类型不能为空!'))
  1707. }
  1708. }
  1709. // 经办人验证(发起环节或字段可编辑时需要验证)
  1710. /*if (isSeModel.value || getFieldEditable('salesman_name')) {
  1711. if (!baseForm.value.salesman || !baseForm.value.salesman.trim()) {
  1712. return Promise.reject(new Error('经办人不能为空!'))
  1713. }
  1714. }*/
  1715. // 合同金额验证(发起环节或字段可编辑时需要验证)
  1716. if (isSeModel.value || getFieldEditable('contract_money')) {
  1717. if (baseForm.value.contract_money) {
  1718. // 验证是否为数字
  1719. const moneyRegex = /^\d+(\.\d{1,2})?$/
  1720. if (!moneyRegex.test(baseForm.value.contract_money)) {
  1721. return Promise.reject(new Error('合同金额只能是数字!'))
  1722. }
  1723. // 验证合同金额不能小于物料总金额
  1724. const totalPrice = calculateTotalPriceValue()
  1725. const contractMoney = parseFloat(baseForm.value.contract_money)
  1726. if (contractMoney < totalPrice) {
  1727. return Promise.reject(new Error('合同金额不能小于物料总金额:' + totalPrice.toFixed(2)))
  1728. }
  1729. }
  1730. }
  1731. // 根据合同类型验证不同字段:销售合同验证需方(客户),其他合同验证供方(供应商)
  1732. if (isSeModel.value || getFieldEditable(isSalesContract.value ? 'firstparty_name' : 'secondparty_name')) {
  1733. if (isSalesContract.value) {
  1734. // 销售合同:验证需方(客户)
  1735. if (!baseForm.value.firstparty_name || !baseForm.value.firstparty_name.trim()) {
  1736. return Promise.reject(new Error('需方不能为空!'))
  1737. }
  1738. } else {
  1739. // 其他合同:验证供方(供应商)
  1740. if (!baseForm.value.secondparty_name || !baseForm.value.secondparty_name.trim()) {
  1741. return Promise.reject(new Error('供方不能为空!'))
  1742. }
  1743. }
  1744. }
  1745. // 物料明细验证(发起环节时验证)
  1746. if (isSeModel.value && materialList.value.length > 0) {
  1747. for (let i = 0; i < materialList.value.length; i++) {
  1748. const item = materialList.value[i]
  1749. // 数量验证:不能为空且必须大于 0
  1750. if (!item.qty || Number(item.qty) <= 0) {
  1751. return Promise.reject(new Error(`请填写第${i + 1}个物料的数量,且必须大于 0`))
  1752. }
  1753. // 税前单价验证:不能为空且不能为负数
  1754. if (!item.price || Number(item.price) < 0) {
  1755. return Promise.reject(new Error(`请填写第${i + 1}个物料的税前单价,且不能为负数`))
  1756. }
  1757. // 税率验证:不能为空且不能为负数
  1758. if (!item.cess || Number(item.cess) < 0) {
  1759. return Promise.reject(new Error(`请填写第${i + 1}个物料的税率,且不能为负数`))
  1760. }
  1761. // 税后单价验证:不能为空且不能为负数
  1762. if (!item.priceTax || Number(item.priceTax) < 0) {
  1763. return Promise.reject(new Error(`请填写第${i + 1}个物料的税后单价,且不能为负数`))
  1764. }
  1765. }
  1766. }
  1767. // 付款明细验证(发起环节时验证)
  1768. if (isSeModel.value && paymentList.value.length > 0) {
  1769. for (let i = 0; i < paymentList.value.length; i++) {
  1770. const item = paymentList.value[i]
  1771. // 付款方式验证
  1772. if (!item.payType || !item.payTypeName) {
  1773. return Promise.reject(new Error(`第${i + 1}行付款方式不能为空!`))
  1774. }
  1775. // 比例验证:不能为空且必须大于 0
  1776. if (!item.proportion || Number(item.proportion) <= 0) {
  1777. return Promise.reject(new Error(`请填写第${i + 1}个付款比例,且必须大于 0`))
  1778. }
  1779. // 金额验证
  1780. /*if (!item.amount || item.amount.toString().trim() === '') {
  1781. return Promise.reject(new Error(`第${i + 1}行付款金额不能为空!`))
  1782. }*/
  1783. }
  1784. }
  1785. // 验证审批意见字段(如果在 table_fields 中)
  1786. const approvalFields = [
  1787. { fieldName: 'departmental_opinion', msg: '部门意见' },
  1788. { fieldName: 'deputy_general_manager_opinion', msg: '分管副总意见' },
  1789. { fieldName: 'audit_deputy_general_manager_opinion', msg: '分管副总意见' },
  1790. { fieldName: 'general_manager_opinion', msg: '总经理意见' },
  1791. { fieldName: 'finance_opinion', msg: '财务意见' },
  1792. { fieldName: 'chairman_opinion', msg: '董事长意见' }
  1793. ]
  1794. for (const field of approvalFields) {
  1795. const elem = getApprovalElement(field.fieldName)
  1796. if (elem) {
  1797. // 检查该字段是否在当前环节的可编辑字段列表中
  1798. // editableFields 包含了当前环节可编辑的所有字段(即 table_fields)
  1799. if (props.editableFields && props.editableFields.includes(field.fieldName)) {
  1800. if (!elem.defaultValue || elem.defaultValue === '') {
  1801. return Promise.reject(new Error(field.msg + '不能为空!'))
  1802. }
  1803. }
  1804. }
  1805. }
  1806. return Promise.resolve()
  1807. },
  1808. // 获取表单数据(返回 formElements 格式)
  1809. getFormElements: () => {
  1810. const formElements: any[] = []
  1811. // 添加基本信息字段
  1812. Object.keys(baseForm.value).forEach(key => {
  1813. const value = baseForm.value[key]
  1814. if (value !== undefined && value !== null) {
  1815. formElements.push({
  1816. name: key,
  1817. value: String(value),
  1818. type: '0' // 普通文本类型
  1819. })
  1820. }
  1821. })
  1822. // 添加审批意见字段
  1823. const approvalFields = ['departmental_opinion', 'deputy_general_manager_opinion', 'audit_deputy_general_manager_opinion', 'general_manager_opinion', 'finance_opinion', 'chairman_opinion']
  1824. approvalFields.forEach(fieldName => {
  1825. const elem = getApprovalElement(fieldName)
  1826. if (elem) {
  1827. formElements.push({
  1828. name: fieldName,
  1829. value: elem.defaultValue || '',
  1830. type: elem.type || '0'
  1831. })
  1832. // 添加签名图片的 imgval 值(用于后端处理)
  1833. // 格式:sealFileId_left_top(必须使用印章模板 ID,而不是签名实例 ID)
  1834. if (approvalSealInfo.value[fieldName]) {
  1835. const sealInfo = approvalSealInfo.value[fieldName]
  1836. formElements.push({
  1837. name: fieldName + '_imgval',
  1838. value: `${sealInfo.sealFileId}_${sealInfo.left}_${sealInfo.top}`,
  1839. type: '0'
  1840. })
  1841. } else if (elem.sealImgPath && elem.defaultValue) {
  1842. // 兼容旧数据:如果有 sealImgPath 和 defaultValue,提取 sealId 构建 imgval
  1843. // sealImgPath 格式:/shares/document/seal/593268258724500.png
  1844. const sealIdMatch = elem.sealImgPath.match(/\/seal\/(\d+)\.png$/)
  1845. if (sealIdMatch) {
  1846. const sealId = sealIdMatch[1]
  1847. formElements.push({
  1848. name: fieldName + '_imgval',
  1849. value: `${sealId}_0_0`,
  1850. type: '0'
  1851. })
  1852. }
  1853. }
  1854. }
  1855. })
  1856. // 添加物料明细(JSON 字符串格式)
  1857. if (materialList.value && materialList.value.length > 0) {
  1858. formElements.push({
  1859. name: 'contractMaterialList',
  1860. value: JSON.stringify(materialList.value),
  1861. type: '0'
  1862. })
  1863. }
  1864. // 添加付款明细(JSON 字符串格式)
  1865. if (paymentList.value && paymentList.value.length > 0) {
  1866. formElements.push({
  1867. name: 'contractPaymentList',
  1868. value: JSON.stringify(paymentList.value),
  1869. type: '0'
  1870. })
  1871. }
  1872. return formElements
  1873. },
  1874. // 获取表单数据(兼容旧版本,返回键值对格式)
  1875. getFormData: () => {
  1876. const formData: any = {
  1877. ...baseForm.value,
  1878. contractMaterialList: materialList.value || [],
  1879. contractPaymentList: paymentList.value || []
  1880. }
  1881. // 添加审批意见字段数据
  1882. const approvalFields = ['departmental_opinion', 'deputy_general_manager_opinion', 'audit_deputy_general_manager_opinion', 'general_manager_opinion', 'finance_opinion', 'chairman_opinion']
  1883. approvalFields.forEach(fieldName => {
  1884. const elem = getApprovalElement(fieldName)
  1885. if (elem) {
  1886. formData[fieldName] = elem.defaultValue || ''
  1887. // 添加签名图片的 imgval 值(用于后端处理)
  1888. // 格式:sealFileId_left_top(必须使用印章模板 ID,而不是签名实例 ID)
  1889. if (approvalSealInfo.value[fieldName]) {
  1890. const sealInfo = approvalSealInfo.value[fieldName]
  1891. formData[fieldName + '_imgval'] = `${sealInfo.sealFileId}_${sealInfo.left}_${sealInfo.top}`
  1892. } else if (elem.sealImgPath && elem.defaultValue) {
  1893. // 兼容旧数据:如果有 sealImgPath 和 defaultValue,提取 sealId 构建 imgval
  1894. // sealImgPath 格式:/shares/document/seal/593268258724500.png
  1895. const sealIdMatch = elem.sealImgPath.match(/\/seal\/(\d+)\.png$/)
  1896. if (sealIdMatch) {
  1897. const sealId = sealIdMatch[1]
  1898. formData[fieldName + '_imgval'] = `${sealId}_0_0`
  1899. }
  1900. }
  1901. }
  1902. })
  1903. return formData
  1904. }
  1905. })
  1906. </script>
  1907. <style lang="scss" scoped>
  1908. /* 基本信息中的禁用字段样式优化 */
  1909. ::v-deep .uni-forms {
  1910. .uni-forms-item__content {
  1911. .uni-easyinput__content-input {
  1912. font-size: calc(14px + 1.2*(1rem - 16px)) !important;
  1913. font-weight: 500;
  1914. color: #333;
  1915. }
  1916. .uni-date {
  1917. .uni-icons {
  1918. font-size: calc(22px + 1.2*(1rem - 16px)) !important;
  1919. font-weight: 500;
  1920. }
  1921. .uni-date__x-input {
  1922. height: auto;
  1923. font-size: calc(14px + 1.2*(1rem - 16px)) !important;
  1924. font-weight: 500;
  1925. color: #333;
  1926. }
  1927. }
  1928. }
  1929. }
  1930. // 审批意见字段样式(与 purchase-form 保持一致)
  1931. .element_value_container {
  1932. .signature_img {
  1933. width: 180px;
  1934. }
  1935. }
  1936. // 选择器样式
  1937. .selector-wrapper {
  1938. padding: 10px 0;
  1939. cursor: pointer;
  1940. .placeholder {
  1941. color: #c0c4cc;
  1942. }
  1943. }
  1944. .picker {
  1945. padding: 10px 0;
  1946. color: #333;
  1947. }
  1948. // 签名弹窗样式(与 purchase-form 保持一致)
  1949. .signature_container {
  1950. background-color: #f5f5f5;
  1951. height: 40vh;
  1952. width: 90vw;
  1953. .signature_content {
  1954. height: 80%;
  1955. width: 100%;
  1956. }
  1957. .signature_button_container {
  1958. height: 20%;
  1959. width: 100%;
  1960. button {
  1961. height: 100%;
  1962. }
  1963. }
  1964. }
  1965. .signature_container_landscape {
  1966. height: 100vh;
  1967. width: 100vw;
  1968. .signature_content {
  1969. height: 85%;
  1970. width: 100%;
  1971. }
  1972. .signature_button_container {
  1973. margin-top: 10%;
  1974. height: 15%;
  1975. width: 100%;
  1976. button {
  1977. height: 100%;
  1978. width: 100%;
  1979. transform: rotate(90deg);
  1980. }
  1981. }
  1982. }
  1983. // 物料列表 - 卡片式展示
  1984. .material-list {
  1985. display: flex;
  1986. flex-direction: column;
  1987. gap: 10px;
  1988. }
  1989. .material-actions {
  1990. display: flex;
  1991. gap: 10px;
  1992. margin-bottom: 15px;
  1993. button {
  1994. flex: 1;
  1995. }
  1996. }
  1997. .material-card {
  1998. border: 1px solid #e5e5e5;
  1999. border-radius: 6px;
  2000. overflow: hidden;
  2001. background-color: #fff;
  2002. margin-bottom: 8px;
  2003. .material-header {
  2004. display: flex;
  2005. justify-content: space-between;
  2006. align-items: center;
  2007. padding: 10px 12px;
  2008. background-color: #f8f9fa;
  2009. cursor: pointer;
  2010. .material-main-info {
  2011. display: flex;
  2012. align-items: center;
  2013. gap: 8px;
  2014. flex: 1;
  2015. .material-name {
  2016. font-size: 14px;
  2017. font-weight: bold;
  2018. color: #333;
  2019. }
  2020. .material-code {
  2021. font-size: 12px;
  2022. color: #999;
  2023. white-space: nowrap;
  2024. }
  2025. }
  2026. .material-expand {
  2027. display: flex;
  2028. align-items: center;
  2029. margin-left: 10px;
  2030. }
  2031. }
  2032. .material-detail {
  2033. padding: 10px 12px;
  2034. border-top: 1px solid #e5e5e5;
  2035. .detail-row {
  2036. display: flex;
  2037. align-items: center;
  2038. flex-wrap: wrap;
  2039. gap: 8px;
  2040. .detail-label {
  2041. font-size: 13px;
  2042. color: #666;
  2043. flex-shrink: 0;
  2044. }
  2045. .detail-value {
  2046. flex: 0 0 auto;
  2047. font-size: 13px;
  2048. color: #333;
  2049. }
  2050. }
  2051. // 删除按钮行的特殊样式
  2052. &.delete-row {
  2053. button {
  2054. margin-left: auto;
  2055. padding: 2px 10px;
  2056. height: auto;
  2057. line-height: 1.5;
  2058. }
  2059. }
  2060. // 价格样式
  2061. .price-value {
  2062. color: #f56c6c;
  2063. font-weight: bold;
  2064. }
  2065. // 采购申请单编号样式
  2066. .purchase-number {
  2067. color: #409eff;
  2068. font-weight: normal;
  2069. }
  2070. }
  2071. }
  2072. .empty-materials {
  2073. text-align: center;
  2074. padding: 30px;
  2075. color: #909399;
  2076. font-size: 14px;
  2077. }
  2078. // 付款状态标签样式
  2079. .status-tag {
  2080. padding: 2px 8px;
  2081. border-radius: 4px;
  2082. font-size: 12px;
  2083. &.status-0 {
  2084. background-color: #f0f0f0;
  2085. color: #333;
  2086. }
  2087. &.status-1 {
  2088. background-color: #fff7e6;
  2089. color: #fa8c16;
  2090. }
  2091. &.status-2 {
  2092. background-color: #f6ffed;
  2093. color: #52c41a;
  2094. }
  2095. }
  2096. // 付款列表 - 卡片式展示
  2097. .payment-list {
  2098. display: flex;
  2099. flex-direction: column;
  2100. gap: 10px;
  2101. }
  2102. .payment-actions {
  2103. display: flex;
  2104. gap: 10px;
  2105. margin-bottom: 15px;
  2106. button {
  2107. flex: 1;
  2108. }
  2109. }
  2110. // 付款列表 - 卡片式展示
  2111. .payment-list {
  2112. display: flex;
  2113. flex-direction: column;
  2114. gap: 10px;
  2115. }
  2116. .payment-actions {
  2117. display: flex;
  2118. gap: 10px;
  2119. margin-bottom: 15px;
  2120. button {
  2121. flex: 1;
  2122. }
  2123. }
  2124. .payment-card {
  2125. border: 1px solid #e5e5e5;
  2126. border-radius: 6px;
  2127. overflow: hidden;
  2128. background-color: #fff;
  2129. margin-bottom: 8px;
  2130. .payment-header {
  2131. display: flex;
  2132. justify-content: space-between;
  2133. align-items: center;
  2134. padding: 10px 12px;
  2135. background-color: #f8f9fa;
  2136. cursor: pointer;
  2137. .payment-main-info {
  2138. display: flex;
  2139. align-items: center;
  2140. gap: 8px;
  2141. flex: 1;
  2142. .payment-name {
  2143. font-size: 14px;
  2144. font-weight: bold;
  2145. color: #333;
  2146. }
  2147. }
  2148. .payment-expand {
  2149. display: flex;
  2150. align-items: center;
  2151. margin-left: 10px;
  2152. }
  2153. }
  2154. .payment-detail {
  2155. padding: 10px 12px;
  2156. border-top: 1px solid #e5e5e5;
  2157. .detail-row {
  2158. display: flex;
  2159. align-items: center;
  2160. flex-wrap: wrap;
  2161. gap: 8px;
  2162. .detail-label {
  2163. font-size: 13px;
  2164. color: #666;
  2165. flex-shrink: 0;
  2166. }
  2167. .detail-value {
  2168. flex: 0 0 auto;
  2169. font-size: 13px;
  2170. color: #333;
  2171. }
  2172. }
  2173. }
  2174. }
  2175. .empty-payments {
  2176. text-align: center;
  2177. padding: 30px;
  2178. color: #909399;
  2179. font-size: 14px;
  2180. }
  2181. // 付款状态标签样式
  2182. .status-tag {
  2183. padding: 2px 8px;
  2184. border-radius: 4px;
  2185. font-size: 12px;
  2186. &.status-0 {
  2187. background-color: #f0f0f0;
  2188. color: #999;
  2189. }
  2190. &.status-1 {
  2191. background-color: #ffecdb;
  2192. color: #ff8800;
  2193. }
  2194. &.status-2 {
  2195. background-color: #e8f5e9;
  2196. color: #4caf50;
  2197. }
  2198. }
  2199. // 采购申请单编号样式
  2200. .purchase-number {
  2201. color: #007aff;
  2202. font-weight: 500;
  2203. }
  2204. // 选择器弹窗样式
  2205. .selector-popup {
  2206. // ✅ 关键:使用固定宽度
  2207. width: 580px;
  2208. max-width: 95vw;
  2209. min-width: 300px;
  2210. max-height: 70vh;
  2211. background-color: #fff;
  2212. border-radius: 12px;
  2213. overflow: hidden;
  2214. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  2215. position: relative;
  2216. margin: 0 auto;
  2217. .popup-header {
  2218. display: flex;
  2219. justify-content: space-between;
  2220. align-items: center;
  2221. padding: 15px;
  2222. border-bottom: 1px solid #e5e5e5;
  2223. width: 100%;
  2224. box-sizing: border-box;
  2225. overflow: hidden;
  2226. .popup-title {
  2227. font-size: 16px;
  2228. font-weight: bold;
  2229. overflow: hidden;
  2230. text-overflow: ellipsis;
  2231. white-space: nowrap;
  2232. max-width: calc(100% - 30px);
  2233. }
  2234. }
  2235. // 物料来源选择
  2236. .material-source-selector {
  2237. padding: 10px 15px;
  2238. border-bottom: 1px solid #f0f0f0;
  2239. width: 100%;
  2240. box-sizing: border-box;
  2241. overflow: hidden;
  2242. .source-options {
  2243. display: flex;
  2244. gap: 10px;
  2245. width: 100%;
  2246. .source-option {
  2247. flex: 1;
  2248. min-width: 0;
  2249. padding: 8px 12px;
  2250. text-align: center;
  2251. background-color: #f5f5f5;
  2252. border-radius: 6px;
  2253. font-size: 14px;
  2254. cursor: pointer;
  2255. transition: all 0.2s;
  2256. overflow: hidden;
  2257. &.active {
  2258. background-color: #007aff;
  2259. color: #fff;
  2260. font-weight: 500;
  2261. }
  2262. }
  2263. }
  2264. }
  2265. // 采购申请单选择器
  2266. .purchase-selector {
  2267. display: flex;
  2268. gap: 8px;
  2269. padding: 10px 15px;
  2270. border-bottom: 1px solid #f0f0f0;
  2271. align-items: center;
  2272. width: 100%;
  2273. box-sizing: border-box;
  2274. overflow: hidden;
  2275. .picker {
  2276. flex: 1;
  2277. min-width: 0;
  2278. padding: 8px 12px;
  2279. background-color: #f5f5f5;
  2280. border-radius: 6px;
  2281. font-size: 14px;
  2282. overflow: hidden;
  2283. text-overflow: ellipsis;
  2284. }
  2285. button[type="warn"] {
  2286. flex-shrink: 0;
  2287. padding: 0 12px;
  2288. }
  2289. }
  2290. .search-bar {
  2291. display: flex;
  2292. gap: 10px;
  2293. padding: 10px 15px;
  2294. align-items: center;
  2295. width: 100%;
  2296. box-sizing: border-box;
  2297. overflow: hidden;
  2298. button {
  2299. flex-shrink: 0;
  2300. }
  2301. }
  2302. .popup-content {
  2303. max-height: 50vh;
  2304. width: 100%;
  2305. overflow-x: hidden;
  2306. position: relative;
  2307. .selector-item {
  2308. padding: 10px 12px;
  2309. border-bottom: 1px solid #f0f0f0;
  2310. width: 100%;
  2311. box-sizing: border-box;
  2312. overflow: hidden;
  2313. &:active {
  2314. background-color: #f5f5f5;
  2315. }
  2316. .selector-item-content {
  2317. display: flex;
  2318. justify-content: space-between;
  2319. align-items: center;
  2320. gap: 8px;
  2321. width: 100%;
  2322. max-width: 100%;
  2323. overflow: hidden;
  2324. min-width: 0;
  2325. .item-info {
  2326. flex: 1 1 auto !important;
  2327. min-width: 0 !important;
  2328. max-width: none !important;
  2329. display: flex;
  2330. flex-wrap: wrap;
  2331. align-items: center;
  2332. gap: 4px;
  2333. overflow: hidden;
  2334. position: relative;
  2335. .item-name {
  2336. font-size: 15px;
  2337. font-weight: bold;
  2338. color: #333;
  2339. flex-basis: 100%;
  2340. margin-bottom: 4px;
  2341. word-break: break-all;
  2342. overflow-wrap: break-word;
  2343. }
  2344. .item-purchase {
  2345. font-size: 12px;
  2346. color: #007aff;
  2347. flex-basis: 100%;
  2348. margin-bottom: 2px;
  2349. word-break: break-all;
  2350. overflow-wrap: break-word;
  2351. }
  2352. .item-code,
  2353. .item-spec,
  2354. .item-extra {
  2355. font-size: 13px;
  2356. color: #666;
  2357. white-space: nowrap;
  2358. font-weight: 500;
  2359. flex-shrink: 0;
  2360. max-width: 100%;
  2361. overflow: hidden;
  2362. text-overflow: ellipsis;
  2363. }
  2364. .item-code::after,
  2365. .item-spec::after {
  2366. content: ' | ';
  2367. margin: 0 4px;
  2368. color: #ddd;
  2369. }
  2370. .item-spec:last-child::after,
  2371. .item-extra:last-child::after {
  2372. content: '';
  2373. }
  2374. }
  2375. .selected-tag {
  2376. color: #409eff;
  2377. font-size: 12px;
  2378. padding: 4px 8px;
  2379. background-color: #ecf5ff;
  2380. border-radius: 4px;
  2381. }
  2382. }
  2383. }
  2384. .loading-text,
  2385. .no-more-text {
  2386. padding: 16px;
  2387. text-align: center;
  2388. color: #999;
  2389. font-size: 14px;
  2390. }
  2391. .empty-data {
  2392. padding: 40px 16px;
  2393. text-align: center;
  2394. color: #999;
  2395. font-size: 14px;
  2396. }
  2397. }
  2398. }
  2399. </style>