formView.vue 65 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658
  1. <template>
  2. <!-- 添加或修改项目信息对话框 -->
  3. <div class="el-drawer__wrapper">
  4. <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
  5. <div class="page-container form-container">
  6. <div class="form-btns-container" style="display: flex;">
  7. <span class="title-label"><el-icon>
  8. <Document />
  9. </el-icon>
  10. 合同信息</span>
  11. <div style="position: absolute;top: 3px;left: 75px;">
  12. </div>
  13. <div class="screen-btn" @click="handleScreen">
  14. <template v-if="!isFullscreen">
  15. <i class="fa fa-window-maximize" aria-hidden="true" />
  16. <!-- <span>全屏</span> -->
  17. </template>
  18. <template v-else>
  19. <i class="fa fa-window-restore" aria-hidden="true" />
  20. <!-- <span>还原</span> -->
  21. </template>
  22. </div>
  23. <div class="close-btn" @click="cancel">
  24. <i class="fa fa-times" aria-hidden="true" />
  25. <!-- <span>关闭</span> -->
  26. </div>
  27. </div>
  28. <div class="Y-scrollbar" style="
  29. position: absolute;
  30. top: 32px;
  31. bottom: 0;
  32. width: 100%;
  33. overflow: auto;
  34. "></div>
  35. <el-form ref="orderRef" class="master-container" size="small" :model="form" :rules="rules" label-width="100px">
  36. <el-row :gutter="30">
  37. <el-col :span="6">
  38. <el-form-item label="合同编号" prop="contractNo">
  39. <span>{{ form.contractNo }}</span>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="6">
  43. <el-form-item label="合同类型" prop="contractType">
  44. <span>{{
  45. form.contractType === 0 ? "新签" : "续签"
  46. }}</span>
  47. </el-form-item>
  48. </el-col>
  49. <el-col :span="6">
  50. <el-form-item label="客户名称" prop="companyId">
  51. {{ form.companyName}}
  52. </el-form-item>
  53. </el-col>
  54. <el-col :span="6">
  55. <el-form-item label="签约日期" prop="formDate">
  56. <span>{{ form.formDate }}</span>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="6">
  60. <el-form-item label="签单人" prop="signerName">
  61. <span>{{ form.signerName }}</span>
  62. </el-form-item>
  63. </el-col>
  64. <el-col v-if="form.verifyStatus === 4" :span="6">
  65. <el-form-item label="驳回原因" prop="verifyRemark">
  66. <span>{{ form.verifyRemark }}</span>
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="6" style="width: 100%">
  70. <el-form-item label="来源" prop="sourceCategoryName" style="width: 100%">
  71. <CustomerFormCom ref="CustomerFormComRef" :edit-status="editStatus && type !== 'alterOrder'"
  72. :form-data="form" :source-categories="sourceCategories" />
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="6">
  76. <el-form-item label="客户标签" prop="customerLabelId">
  77. <span>{{ selectedOptionLabel }}</span>
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="6">
  81. <el-form-item label="甲方" prop="boss">
  82. <span>{{ form.boss }}</span>
  83. </el-form-item>
  84. </el-col>
  85. <el-col :span="6">
  86. <el-form-item label="乙方" prop="party">
  87. <span>{{ form.party }}</span>
  88. </el-form-item>
  89. </el-col>
  90. <el-col :span="6">
  91. <el-form-item label="备注" prop="remark">
  92. <span>{{ form.remark }}</span>
  93. </el-form-item>
  94. </el-col>
  95. <el-col :span="6">
  96. <el-form-item v-if="!editStatus" label="合同状态" prop="status">
  97. <dict-tag :options="contract_status" :value="form.status" />
  98. </el-form-item>
  99. </el-col>
  100. <el-col :span="6">
  101. <el-form-item v-if="!editStatus && form.dissolution === 1" label="解除时间" prop="dissolution">
  102. <span >{{ form.dissDate }}</span>
  103. </el-form-item>
  104. </el-col>
  105. <el-col :span="6">
  106. <el-form-item label="客户历史使用名" prop="oldName">
  107. <span>{{ form.oldName }}</span>
  108. </el-form-item>
  109. </el-col>
  110. <br />
  111. <el-col :span="24">
  112. <el-tabs v-model="form.serviceType" size="small" class="demo-tabs" @tab-change="handleServiceTypeClick">
  113. <el-tab-pane :disabled="!editStatus" label="循环服务" :name="1">
  114. <el-row>
  115. <el-col :span="24">
  116. <el-checkbox-group v-model="loops" @change="(arg) => changeDetails('loop', arg)">
  117. <el-checkbox v-for="(item, index) in loopTasks" :key="index" :label="item.id"
  118. :disabled="item.isDisabled || !editStatus">{{ item.name }}</el-checkbox>
  119. </el-checkbox-group>
  120. </el-col>
  121. <el-col :span="24">
  122. <el-row v-for="(item, index) in loopDetails" :key="index" style="
  123. border-radius: 5px;
  124. border-color: rgba(0, 0, 0, 20%);
  125. border-style: solid;
  126. border-width: 1px;
  127. margin-bottom: 10px;
  128. ">
  129. <el-col :span="4" style="padding-top: 18px">
  130. <el-form-item label="服务项目">
  131. {{ item.taskTypeName }}
  132. </el-form-item>
  133. </el-col>
  134. <el-col :span="4" style="padding-top: 18px">
  135. <el-form-item label="月单价">
  136. <el-input-number v-if="editStatus" v-model="item.price" :precision="2" :step="0.1" :min="0"
  137. :controls="false" @change="
  138. (arg) =>
  139. inputChangeHandler('loop', 'price', item, arg)
  140. " />
  141. <div v-else>{{ rowNum(item.price) }}</div>
  142. </el-form-item>
  143. </el-col>
  144. <el-col :span="4" style="padding-top: 18px">
  145. <el-form-item label="服务月数">
  146. <el-input-number v-if="editStatus" v-model="item.serviceNum" :step="1" step-strictly
  147. :min="0" :controls="false" @change="
  148. (arg) =>
  149. inputChangeHandler(
  150. 'loop',
  151. 'serviceNum',
  152. item,
  153. arg
  154. )
  155. " />
  156. <div v-else>{{ item.serviceNum }}</div>
  157. </el-form-item>
  158. </el-col>
  159. <el-col :span="4" style="padding-top: 18px">
  160. <el-form-item label="赠送月数">
  161. <el-input-number v-if="editStatus" v-model="item.freeNum" :step="1" step-strictly :min="0"
  162. :controls="false" @change="
  163. (arg) =>
  164. inputChangeHandler(
  165. 'loop',
  166. 'freeNum',
  167. item,
  168. arg
  169. )
  170. " />
  171. <div v-else>{{ item.freeNum }}</div>
  172. </el-form-item>
  173. </el-col>
  174. <el-col :span="4" style="padding-top: 18px">
  175. <el-form-item label="优惠金额">
  176. <el-input-number v-if="editStatus" v-model="item.discountAmount" :precision="2" :step="0.1"
  177. :min="0" :controls="false" @change="
  178. (arg) =>
  179. inputChangeHandler('loop', 'discountAmount', item, arg)
  180. " />
  181. <div v-else>{{ rowNum(item.discountAmount) }}</div>
  182. </el-form-item>
  183. </el-col>
  184. <el-col :span="4" style="padding-top: 18px">
  185. <el-form-item label="合计金额">
  186. <div>{{ rowNum(item.amount) }}</div>
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="4" style="padding-top: 18px">
  190. <el-form-item label="服务区间"
  191. v-if="item.timeVo != null && item.timeVo != undefined && type !== 'alterOrder'">
  192. <div>{{ item.timeVo.startTime.substr(0,item.timeVo.startTime.length - 3) }} ~ {{
  193. item.timeVo.endTime.substr(0,item.timeVo.endTime.length - 3) }}</div>
  194. </el-form-item>
  195. </el-col>
  196. <el-col :span="4" style="padding-top: 18px" v-if="item.taskTypeId ==4">
  197. </el-col>
  198. <el-col :span="4" style="padding-top: 18px" v-if="item.taskTypeId ==4">
  199. <el-form-item label="所属区">
  200. <el-select v-if="editStatus" v-model="item.belongRegion" style="margin-right: 5px">
  201. <el-option v-for="region in belong_region" :key="region.value" :label="region.label"
  202. :value="region.id"></el-option>
  203. </el-select>
  204. <span v-else>{{item.regionName}}</span>
  205. </el-form-item>
  206. </el-col>
  207. </el-row>
  208. </el-col>
  209. <el-divider />
  210. </el-row>
  211. </el-tab-pane>
  212. <el-tab-pane :disabled="!editStatus " label="代办服务" :name="2">
  213. <el-checkbox-group :disabled="!editStatus" v-model="onces"
  214. @change="(arg) => changeDetails('once', arg)">
  215. <el-checkbox v-for="(item, index) in onceTasks" :key="index" :label="item.id">{{ item.name
  216. }}</el-checkbox>
  217. </el-checkbox-group>
  218. <el-col :span="24">
  219. <el-row v-for="(item, index) in onceDetails" :key="index" style="
  220. border-radius: 5px;
  221. border-color: rgba(0, 0, 0, 20%);
  222. border-style: solid;
  223. border-width: 1px;
  224. margin-bottom: 10px;
  225. ">
  226. <el-col :span="4" style="padding-top: 18px">
  227. <el-form-item label="服务项目">
  228. {{ item.taskTypeName }}
  229. </el-form-item>
  230. </el-col>
  231. <el-col v-if="item.payAddress === 1" :span="9" style="
  232. padding-top: 18px;
  233. padding-left: 35px;
  234. display: flex;
  235. flex-direction: column;
  236. margin-bottom: 18px;
  237. ">
  238. <el-radio-group v-if="editStatus" v-model="item.addressStyle" @change="changeProcesses(item)">
  239. <el-radio :label="1" style="margin-bottom: 5px">
  240. <template #default>
  241. <div style="
  242. display: flex;
  243. flex-direction: row;
  244. width: 300px;
  245. justify-content: space-between;
  246. ">
  247. <div style="
  248. display: inline-block;
  249. height: 24px;
  250. line-height: 24px;
  251. margin-right: 10px;
  252. ">
  253. 自有地址
  254. </div>
  255. <div>
  256. <el-select :disabled="item.addressStyle === 2" v-model="item.provinceCode"
  257. placeholder="省份" style="width: 36%" @change="handleSelectProvince(item, index)">
  258. <el-option v-for="item in provincesArr[index]" :key="item.code" :label="item.name"
  259. :value="item.code" />
  260. </el-select>
  261. <el-select :disabled="item.addressStyle === 2" v-model="item.cityCode"
  262. placeholder="城市" style="width: 37%" @change="handleSelectCity(item, index)">
  263. <el-option v-for="item in citiesArr[index]" :key="item.code" :label="item.name"
  264. :value="item.code" />
  265. </el-select>
  266. <el-select :disabled="item.addressStyle === 2" v-model="item.districtCode"
  267. placeholder="行政区" style="width: 37%" @change="handleSelectDistrict(item, index)">
  268. <el-option v-for="item in districtsArr[index]" :key="item.code" :label="item.name"
  269. :value="item.code" />
  270. </el-select>
  271. </div>
  272. </div>
  273. </template>
  274. </el-radio>
  275. <el-radio :label="2" style="margin-bottom: 5px">
  276. <template #default>
  277. <div style="
  278. display: flex;
  279. flex-direction: row;
  280. width: 325px;
  281. justify-content: space-between;
  282. ">
  283. <div style="
  284. display: inline-block;
  285. height: 24px;
  286. line-height: 24px;
  287. margin-right: 10px;
  288. ">
  289. 虚拟地址
  290. </div>
  291. <el-select :disabled="item.addressStyle !== 2" v-model="item.fictionAddressId"
  292. style="margin-right: 5px">
  293. <el-option v-for="item in virtual_address" :key="item.value" :label="item.label"
  294. :value="item.id"></el-option>
  295. </el-select>
  296. <div style="
  297. display: inline-block;
  298. height: 24px;
  299. line-height: 24px;
  300. ">
  301. 金额:
  302. </div>
  303. <el-input-number :disabled="item.addressStyle !== 2" v-if="editStatus"
  304. v-model="item.addressAmount" :precision="2" :step="0.01" step-strictly
  305. :controls="false" @change="
  306. (arg) =>
  307. inputChangeHandler(
  308. 'once',
  309. 'addressAmount',
  310. item,
  311. arg
  312. )
  313. " />
  314. </div>
  315. </template>
  316. </el-radio>
  317. </el-radio-group>
  318. <div v-else style="
  319. display: flex;
  320. flex-direction: row;
  321. width: 300px;
  322. justify-content: space-between;
  323. font-size: 12px;
  324. ">
  325. <div>
  326. {{
  327. item.addressStyle === 1
  328. ? "自有地址"
  329. : item.addressStyle === 2
  330. ? "虚拟地址"
  331. : ""
  332. }}
  333. </div>
  334. <div v-if="item.addressStyle === 1">
  335. 注册地区:{{ item.province }} - {{ item.city }} -
  336. {{ item.district }}
  337. </div>
  338. <div v-if="item.addressStyle === 2">
  339. {{ (item.fictionAddress) }}
  340. </div>
  341. <div v-if="item.addressStyle === 2">
  342. 金额:{{ rowNum(item.addressAmount) }}
  343. </div>
  344. </div>
  345. </el-col>
  346. <el-col v-if="item.payAddress === 0" :span="9" style="
  347. padding-top: 18px;
  348. display: flex;
  349. flex-direction: column;
  350. margin-bottom: 18px;
  351. ">
  352. <el-form-item v-if="item.taskTypeId === '6'" label="变更类型">
  353. <el-select v-if="editStatus" v-model="item.alterType" style="width: 280px">
  354. <el-option v-for="alter in alterTypes" :label="alter.label" :key="alter.value"
  355. :value="alter.value">
  356. </el-option>
  357. </el-select>
  358. <div v-else>{{ item.alterType }}</div>
  359. </el-form-item>
  360. <div v-if="item.alterType === '跨区变更'" style="margin-left: 60px">
  361. <el-radio-group v-if="editStatus" v-model="item.addressStyle" @change="changeProcesses(item)">
  362. <el-radio :label="1" style="margin-bottom: 5px">
  363. <template #default>
  364. <div style="
  365. display: flex;
  366. flex-direction: row;
  367. width: 300px;
  368. justify-content: space-between;
  369. ">
  370. <div style="
  371. display: inline-block;
  372. height: 24px;
  373. line-height: 24px;
  374. margin-right: 10px;
  375. ">
  376. 自有地址
  377. </div>
  378. <div>
  379. <el-select :disabled="item.addressStyle === 2" v-model="item.provinceCode"
  380. placeholder="省份" style="width: 33.33%" @change="
  381. handleSelectProvince(item, index)
  382. ">
  383. <el-option v-for="item in provincesArr[index]" :key="item.code" :label="item.name"
  384. :value="item.code" />
  385. </el-select>
  386. <el-select :disabled="item.addressStyle === 2" v-model="item.cityCode"
  387. placeholder="城市" style="width: 33.33%" @change="handleSelectCity(item, index)">
  388. <el-option v-for="item in citiesArr[index]" :key="item.code" :label="item.name"
  389. :value="item.code" />
  390. </el-select>
  391. <el-select :disabled="item.addressStyle === 2" v-model="item.districtCode"
  392. placeholder="行政区" style="width: 33.33%" @change="
  393. handleSelectDistrict(item, index)
  394. ">
  395. <el-option v-for="item in districtsArr[index]" :key="item.code" :label="item.name"
  396. :value="item.code" />
  397. </el-select>
  398. </div>
  399. </div>
  400. </template>
  401. </el-radio>
  402. <el-radio :label="2" style="margin-bottom: 5px">
  403. <template #default>
  404. <div style="
  405. display: flex;
  406. flex-direction: row;
  407. width: 300px;
  408. justify-content: space-between;
  409. ">
  410. <div style="
  411. display: inline-block;
  412. height: 24px;
  413. line-height: 24px;
  414. margin-right: 10px;
  415. ">
  416. 虚拟地址
  417. </div>
  418. <el-select :disabled="item.addressStyle !== 2" v-model="item.fictionAddressId"
  419. style="margin-right: 5px">
  420. <el-option v-for="item in virtual_address" :key="item.value" :label="item.label"
  421. :value="item.id"></el-option>
  422. </el-select>
  423. <div style="
  424. display: inline-block;
  425. height: 24px;
  426. line-height: 24px;
  427. ">
  428. 金额:
  429. </div>
  430. <el-input-number :disabled="item.addressStyle !== 2" v-if="editStatus"
  431. v-model="item.addressAmount" :precision="2" :step="0.01" step-strictly
  432. :controls="false" @change="
  433. (arg) =>
  434. inputChangeHandler(
  435. 'once',
  436. 'addressAmount',
  437. item,
  438. arg
  439. )
  440. " />
  441. </div>
  442. </template>
  443. </el-radio>
  444. </el-radio-group>
  445. <div v-else style="
  446. display: flex;
  447. flex-direction: row;
  448. width: 300px;
  449. justify-content: space-between;
  450. font-size: 12px;
  451. ">
  452. <div>
  453. {{
  454. item.addressStyle === 1
  455. ? "自有地址"
  456. : item.addressStyle === 2
  457. ? "虚拟地址"
  458. : ""
  459. }}
  460. </div>
  461. <div v-if="item.addressStyle === 1">
  462. 注册地区:{{ item.province }} - {{ item.city }} -
  463. {{ item.district }}
  464. </div>
  465. <div v-if="item.addressStyle === 2">
  466. {{ item.fictionAddress }}
  467. </div>
  468. <div v-if="item.addressStyle === 2">
  469. 金额:{{ rowNum(item.addressAmount) }}
  470. </div>
  471. </div>
  472. </div>
  473. <el-form-item v-else label="办理地区">
  474. <div v-if="editStatus" style="
  475. display: flex;
  476. flex-direction: row;
  477. width: 280px;
  478. justify-content: space-between;
  479. ">
  480. <el-select v-model="item.provinceCode" placeholder="省份" style="width: 33.33%"
  481. @click.stop="null" @change="handleSelectProvince(item, index)">
  482. <el-option v-for="item in provincesArr[index]" :key="item.code" :label="item.name"
  483. :value="item.code" />
  484. </el-select>
  485. <el-select v-model="item.cityCode" placeholder="城市" style="width: 33.33%"
  486. @change="handleSelectCity(item, index)" @click.stop="null">
  487. <el-option v-for="item in citiesArr[index]" :key="item.code" :label="item.name"
  488. :value="item.code" />
  489. </el-select>
  490. <el-select v-model="item.districtCode" placeholder="行政区" style="width: 33.33%"
  491. @change="handleSelectDistrict(item, index)" @click.stop="null">
  492. <el-option v-for="item in districtsArr[index]" :key="item.code" :label="item.name"
  493. :value="item.code" />
  494. </el-select>
  495. </div>
  496. <div v-else style="
  497. display: flex;
  498. flex-direction: row;
  499. width: 300px;
  500. justify-content: space-between;
  501. ">
  502. {{ item.province }} - {{ item.city }} -
  503. {{ item.district }}
  504. </div>
  505. </el-form-item>
  506. </el-col>
  507. <el-col :span="7" style="padding-top: 18px; margin-bottom: 18px">
  508. <el-checkbox-group :disabled="!editStatus" v-model="item.processes"
  509. @change="(arg) => changeProcesses(item, arg)" style="display: flex; flex-direction: column">
  510. <el-checkbox v-for="(process, index) in item.defaultProcesses" :key="index" :label="process">
  511. <template #default>
  512. <div style="
  513. display: flex;
  514. flex-direction: row;
  515. width: 300px;
  516. justify-content: space-between;
  517. ">
  518. <div style="
  519. display: inline-block;
  520. height: 24px;
  521. line-height: 24px;
  522. margin-right: 10px;
  523. width: 80px;
  524. ">
  525. {{ process.taskTypeDetailName }}
  526. </div>
  527. <div style="
  528. display: inline-block;
  529. height: 24px;
  530. line-height: 24px;
  531. ">
  532. 金额:
  533. </div>
  534. <el-input-number :disabled="
  535. checkedProcess(
  536. process.taskTypeDetailId,
  537. item
  538. )
  539. " size="small" v-if="editStatus" v-model="process.amount" :precision="2" :step="0.01"
  540. step-strictly :controls="false" style="width: 100px" @click.stop="null" @change="
  541. (arg) =>
  542. inputChangeHandler(
  543. 'process',
  544. 'amount',
  545. process,
  546. arg,
  547. item
  548. )
  549. " />
  550. <div v-else style="
  551. display: inline-block;
  552. height: 24px;
  553. line-height: 24px;
  554. width: 40px;
  555. text-align: right;
  556. ">
  557. {{ rowNum(process.amount) }}
  558. </div>
  559. </div>
  560. </template>
  561. <!-- {{ process.name }} -->
  562. </el-checkbox>
  563. </el-checkbox-group>
  564. </el-col>
  565. <el-col :span="3" style="
  566. padding-top: 18px;
  567. display: flex;
  568. flex-direction: column;
  569. margin-bottom: 18px;
  570. ">
  571. <div style="
  572. display: flex;
  573. flex-direction: row;
  574. font-size: 12px;
  575. ">
  576. <div style="
  577. display: inline-block;
  578. height: 24px;
  579. line-height: 24px;
  580. margin-left: 10px;
  581. ">
  582. 总金额:
  583. </div>
  584. <div style="
  585. display: inline-block;
  586. height: 24px;
  587. line-height: 24px;
  588. ">
  589. {{ rowNum(item.amount) }}
  590. </div>
  591. </div>
  592. </el-col>
  593. <el-col :span="4" style="padding-top: 18px">
  594. </el-col>
  595. <el-col v-if="item.taskTypeId == 9 || item.taskTypeId == 8" :span="9" style="
  596. padding-top: 18px;
  597. display: flex;
  598. flex-direction: column;
  599. margin-bottom: 18px;
  600. ">
  601. <el-form-item label="备注" prop="remark">
  602. <el-input v-model="item.remark" v-if="editStatus" />
  603. <div v-else>{{ item.remark }}</div>
  604. </el-form-item>
  605. </el-col>
  606. </el-row>
  607. </el-col>
  608. <el-divider />
  609. </el-tab-pane>
  610. </el-tabs>
  611. </el-col>
  612. <el-col :span="6">
  613. <el-form-item label="合计:" prop="remark">
  614. <span>{{ rowNum(form.amount) }}</span>
  615. </el-form-item>
  616. </el-col>
  617. <el-col :span="6">
  618. <el-form-item label="优惠金额:">
  619. <span>{{ rowNum(form.discountAmount) }}</span>
  620. </el-form-item>
  621. </el-col>
  622. <el-col :span="6">
  623. <el-form-item label="实收:">
  624. <div>{{ rowNum(form.trueAmount) }}</div>
  625. </el-form-item>
  626. </el-col>
  627. <br />
  628. <el-col :span="24">
  629. <div class="details-head" style="font-size: 12px">
  630. <div class="title">
  631. <i class="fa fa-th-list" aria-hidden="true" /> 合同附件
  632. </div>
  633. <div class="details-btns-container" style="display: flex">
  634. <el-upload v-if="editStatus && type != 'alterOrder'" action="#" :http-request="upload"
  635. :with-credentials="true" :show-file-list="false" multiple>
  636. <el-button style="margin-top: 10px; margin-bottom:10px;" size="small" type="primary"
  637. icon="Upload">点击上传</el-button>
  638. </el-upload>
  639. </div>
  640. </div>
  641. <div class="details-body" style="height: 200px">
  642. <el-table ref="filesTable" :data="form.files" size="small" height="100%" border
  643. header-row-class-name="list-header-row">
  644. <el-table-column type="index" label="序号" width="47" align="center" />
  645. <el-table-column label="文件名" prop="originalFileName" align="center">
  646. <template #default="scope">
  647. <el-link :href="`${baseUrl}${scope.row.fileUrl}`" :underline="false" target="_blank"
  648. type="primary">
  649. {{ scope.row.originalFileName }}
  650. </el-link>
  651. </template>
  652. </el-table-column>
  653. <el-table-column v-if="editStatus && type !== 'alterOrder'" label="操作" width="70" align="center">
  654. <template #default="scope">
  655. <el-button link size="small" type="danger" @click="handleDelFile(scope.$index)">删除</el-button>
  656. </template>
  657. </el-table-column>
  658. </el-table>
  659. </div>
  660. <br />
  661. </el-col>
  662. <el-col v-if="editStatus" :span="24" style="
  663. text-align: center;
  664. display: flex;
  665. flex-direction: row;
  666. justify-content: center;
  667. ">
  668. <el-button size="small" type="primary" icon="Finished" style="width: 160px"
  669. @click="submitForm">保存</el-button>
  670. </el-col>
  671. </el-row>
  672. <br />
  673. </el-form>
  674. </div>
  675. </el-drawer>
  676. <el-dialog title="驳回详情" v-model="rejectOpen" width="500px" append-to-body draggable :close-on-click-modal="false">
  677. <el-form ref="dictRef" :model="form" label-width="100">
  678. <el-form-item label="驳回原因" :prop="verifyRemark">
  679. <el-input v-model.trim="form.verifyRemark" type="textarea" :rows="3" placeholder="请输入驳回原因" maxlength="200"
  680. show-word-limit />
  681. </el-form-item>
  682. </el-form>
  683. <template #footer>
  684. <div class="dialog-footer">
  685. <el-button type="primary" icon="Finished" size="small" @click="verifyUpload(4)">确 定</el-button>
  686. <el-button icon="close" size="small" @click="rejectCancel">取 消</el-button>
  687. </div>
  688. </template>
  689. </el-dialog>
  690. <el-dialog title="是否续签" v-model="verifyOpen" width="600px" append-to-body draggable>
  691. <el-form ref="dictRef" :model="verifyForm" label-width="380" size="small">
  692. <el-form-item v-for="item in redirectDetails" :key="item.id"
  693. :label="`${item.taskTypeName}上个任务结束月:${item.endMonth}是否重新开始`">
  694. <el-checkbox v-model="item.redirect" />
  695. </el-form-item>
  696. </el-form>
  697. <template #footer>
  698. <div class="dialog-footer">
  699. <el-button type="primary" icon="Finished" size="small" @click="redirectVerify()">确 定</el-button>
  700. <el-button icon="close" size="small" @click="verifyFormClose">取 消</el-button>
  701. </div>
  702. </template>
  703. </el-dialog>
  704. <AddCompanyDialog ref="addCompanyDialogRef" />
  705. <company-form ref="companyRef" :get-list="getList"></company-form>
  706. <dialog-history-choice ref="historyChoiceRef" @choice="historyChoiceHandle" />
  707. </div>
  708. </template>
  709. <script setup>
  710. import { uploadFile } from "@/api/tool/file";
  711. import { listLableNoPage } from "@/api/business/lable";
  712. import AddCompanyDialog from "../AddCompanyDialog";
  713. import match from "@/utils/match";
  714. import {
  715. getOrder,
  716. initTaskTypes,
  717. addOrder,
  718. updateOrder,
  719. verifyOrder,
  720. alterOrder,
  721. dissolutionOrder,
  722. verifyCheckOrder,
  723. } from "@/api/business/crm/contract";
  724. import { listSource } from "@/api/settings/source";
  725. import { listCompany } from "@/api/business/crm/company";
  726. import { listUser } from "@/api/system/user";
  727. import CustomerFormCom from "@/components/CustomerFormCom";
  728. import DialogHistoryChoice from "@/views/dialog/DialogHistoryChoice.vue";
  729. import { formatDate, rowNum } from "@/utils/index";
  730. import { ref } from "vue";
  731. import companyForm from "@/views/business/crm/company/formView.vue";
  732. import useUserStore from "@/store/modules/user";
  733. // import { it } from "element-plus/es/locale";
  734. const { proxy } = getCurrentInstance();
  735. const verifyOpen = ref(false);
  736. const verifyForm = ref({});
  737. const redirectDetails = ref([]);
  738. const baseUrl = import.meta.env.VITE_APP_BASE_API;
  739. const historyChoiceRef = ref(null);
  740. const alterTypes = ref([
  741. {
  742. value: "普通变更",
  743. label: "普通变更",
  744. },
  745. {
  746. value: "股权变更",
  747. label: "股权变更",
  748. },
  749. {
  750. value: "减资",
  751. label: "减资",
  752. },
  753. {
  754. value: "跨区变更",
  755. label: "跨区变更",
  756. },
  757. ]);
  758. /** 父组件传参 */
  759. const props = defineProps({
  760. getList: {
  761. type: Function,
  762. default: () => { },
  763. },
  764. });
  765. const { getList } = toRefs(props);
  766. /** 字典数组区 */
  767. const { virtual_address } = proxy.useDict("virtual_address");
  768. const { belong_region } = proxy.useDict("belong_region");
  769. /** 表单抽屉 页变量 */
  770. const title = ref("");
  771. const loading = ref(false);
  772. const multiple = ref(true);
  773. const visible = ref(false);
  774. const editStatus = ref(false);
  775. const loopTasks = ref([]);
  776. const onceTasks = ref([]);
  777. const sourceCategories = ref([]);
  778. const loops = ref([]);
  779. const onces = ref([]);
  780. const type = ref("");
  781. const addCompanyDialogRef = ref(null);
  782. const rejectOpen = ref(false);
  783. // 循环任务明细
  784. const loopDetails = ref([]);
  785. // 单次任务明细
  786. const onceDetails = ref([]);
  787. const detailEmpty = {
  788. id: null,
  789. taskTypeName: "",
  790. taskTypeId: null,
  791. serviceNum: undefined,
  792. freeNum: undefined,
  793. price: undefined,
  794. amount: undefined,
  795. addressStyle: undefined,
  796. address: undefined,
  797. fictionAddressId: undefined,
  798. tenantId: undefined,
  799. province: "",
  800. city: "",
  801. district: "",
  802. addressStyle: 1,
  803. provinceId: undefined,
  804. processes: [],
  805. defaultProcesses: [],
  806. };
  807. //地址数组
  808. const provincesArr = ref([]);
  809. const citiesArr = ref([]);
  810. const districtsArr = ref([]);
  811. const { contract_status } = proxy.useDict("contract_status");
  812. const provinces = ref(proxy.region.getProvinces());
  813. provinces.value.unshift({ code: "", name: "全部" });
  814. const cities = ref([]);
  815. const districts = ref([]);
  816. const options = ref([]);
  817. const contractEmpty = {
  818. serviceType: 1,
  819. contractType: 0,
  820. formDate: formatDate(new Date(), "yyyy-MM-dd"),
  821. signerId: useUserStore().user.userId,
  822. signerName: useUserStore().user.nickName,
  823. files: [],
  824. };
  825. const isFullscreen = ref(false);
  826. const webHost = import.meta.env.VITE_APP_BASE_API;
  827. const data = reactive({
  828. form: {},
  829. // rules: {
  830. // contractNo: [
  831. // { required: true, message: "合同编号不能为空", trigger: "blur" },
  832. // ],
  833. // companyId: [{ required: true, message: "请选择有效客户", trigger: "blur" }],
  834. // formDate: [
  835. // { required: editStatus.value ? false : true, message: "签约日期不能为空", trigger: "blur" },
  836. // ],
  837. // amount: [{ required: true, message: "签约金额不能为空", trigger: "blur" }],
  838. // // signerName: [
  839. // // { required: true, message: "签单人不能为空", trigger: "change" },
  840. // // ],
  841. // contractType: [
  842. // { required: true, message: "合同类型不能为空", trigger: "change" },
  843. // ],
  844. // serviceType: [
  845. // { required: true, message: "任务类型不能为空", trigger: "change" },
  846. // ],
  847. // },
  848. });
  849. const rules = computed(() => ({
  850. contractNo: [
  851. { required: true, message: "合同编号不能为空", trigger: "blur" },
  852. ],
  853. companyId: [
  854. { required: type.value == "alterOrder" ? false : true, message: "请选择有效客户", trigger: "blur" },
  855. ],
  856. formDate: [
  857. { required: type.value == "alterOrder" ? false : true, message: "签约日期不能为空", trigger: "blur" },
  858. ],
  859. amount: [
  860. { required: true, message: "签约金额不能为空", trigger: "blur" },
  861. ],
  862. contractType: [
  863. { required: true, message: "合同类型不能为空", trigger: "change" },
  864. ],
  865. serviceType: [
  866. { required: true, message: "任务类型不能为空", trigger: "change" },
  867. ],
  868. party: [
  869. { required: true, message: "乙方不能为空", trigger: "blur" },
  870. ],
  871. }));
  872. const { form, } = toRefs(data);
  873. /*********************** 方法区 ****************************/
  874. /** 打开抽屉 */
  875. function open(id) {
  876. reset();
  877. visible.value = true;
  878. if (id) {
  879. Promise.all([initTaskTypes(), listSource(), getOrder(id)]).then((res) => {
  880. loopTasks.value = res[0].data.loopTasks;
  881. onceTasks.value = res[0].data.onceTasks;
  882. sourceCategories.value = res[1].rows;
  883. form.value = res[2].data;
  884. type.value =
  885. type.value == "" && form.value.status === 8 ? "alterOrder" : type.value;
  886. parseDetail(form.value.details, form.value);
  887. // console.log(onceDetails.value)
  888. editStatus.value = false;
  889. title.value = "修改订单信息";
  890. initRegion();
  891. });
  892. // getOrder(id).then(response => {
  893. // })
  894. } else {
  895. Promise.all([initTaskTypes(), listSource()]).then((res) => {
  896. loopTasks.value = res[0].data.loopTasks;
  897. onceTasks.value = res[0].data.onceTasks;
  898. sourceCategories.value = res[1].rows;
  899. });
  900. editStatus.value = true;
  901. title.value = "添加订单信息";
  902. }
  903. getOption()
  904. }
  905. function getOption() {
  906. listLableNoPage().then(res => {
  907. options.value = res.data
  908. })
  909. }
  910. const selectedOptionLabel = computed(() => {
  911. const selectedOption = options.value.find(option => option.id === form.value.customerLabelId);
  912. return selectedOption ? selectedOption.lable : '';
  913. });
  914. function openSimple(id, optionType) {
  915. reset();
  916. visible.value = true;
  917. type.value = optionType || "";
  918. if (id) {
  919. Promise.all([initTaskTypes(), listSource(), getOrder(id)]).then((res) => {
  920. loopTasks.value = res[0].data.loopTasks;
  921. onceTasks.value = res[0].data.onceTasks;
  922. sourceCategories.value = res[1].rows;
  923. form.value = res[2].data;
  924. console.log("loopTasks.value", loopTasks.value);
  925. loopTasks.value.forEach(item => {
  926. form.value.details.forEach(item2 => {
  927. if (item2.taskTypeId == item.id) {
  928. item.isDisabled = item2.disabled
  929. }
  930. })
  931. })
  932. parseDetail(form.value.details, form.value);
  933. title.value = "合同变更信息";
  934. if (type.value != "") {
  935. editStatus.value = true;
  936. } else {
  937. editStatus.value = false;
  938. }
  939. });
  940. } else {
  941. Promise.all([initTaskTypes(), listSource()]).then((res) => {
  942. loopTasks.value = res[0].data.loopTasks;
  943. onceTasks.value = res[0].data.onceTasks;
  944. sourceCategories.value = res[1].rows;
  945. });
  946. editStatus.value = true;
  947. title.value = "添加订单信息";
  948. }
  949. }
  950. watch(editStatus, (newValue) => {
  951. console.log('editStatus changed:', newValue);
  952. });
  953. /** 取消按钮 */
  954. function cancel() {
  955. visible.value = false;
  956. reset();
  957. }
  958. function handleInfo(row) {
  959. proxy.$refs.companyRef.open(row.companyId);
  960. }
  961. /** 表单重置 */
  962. function reset() {
  963. form.value = JSON.parse(JSON.stringify(contractEmpty));
  964. loops.value = [];
  965. onces.value = [];
  966. loopDetails.value = [];
  967. onceDetails.value = [];
  968. type.value = "";
  969. proxy.resetForm("orderRef");
  970. // belong_region.value.forEach(item => {
  971. // item.id = Number(item.id)
  972. // })
  973. }
  974. /** 全屏缩放 */
  975. function handleScreen() {
  976. const dom = document.querySelector(
  977. ".list-container > .el-drawer__wrapper > .el-overlay"
  978. );
  979. isFullscreen.value = !isFullscreen.value;
  980. dom.style.position = isFullscreen.value ? "fixed" : "absolute";
  981. }
  982. function sourceValidator(rule, value, callback) {
  983. if (form.value.sourceCategoryName === "") {
  984. callback(new Error("来源类型不能为空"));
  985. return;
  986. }
  987. if (
  988. form.value.referrerDataSource !== "" &&
  989. form.value.referrerDataSource != null &&
  990. form.value.sourceName === ""
  991. ) {
  992. callback(new Error("来源不能为空"));
  993. return;
  994. }
  995. return callback();
  996. }
  997. /** 提交按钮 */
  998. function submitForm() {
  999. const query = { userId: form.value.signerId };
  1000. const users = [];
  1001. listUser(query).then((res) => {
  1002. users.value = res.rows;
  1003. console.log(form.value.signerId);
  1004. // if (users.value.length == 1) {
  1005. // if (
  1006. // form.value.signerId == users.value[0].userId &&
  1007. // form.value.signerName == users.value[0].nickName
  1008. // ) {
  1009. // } else {
  1010. // proxy.$modal.msgError("请选择有效签单人");
  1011. // return;
  1012. // }
  1013. // } else {
  1014. // proxy.$modal.msgError("请选择有效签单人");
  1015. // return;
  1016. // }
  1017. const companyQuery = { id: form.value.companyId };
  1018. const companys = [];
  1019. listCompany(companyQuery).then((res) => {
  1020. companys.value = res.rows;
  1021. if (companys.value.length == 1) {
  1022. if (
  1023. form.value.companyId == companys.value[0].id &&
  1024. form.value.companyName == companys.value[0].name
  1025. ) {
  1026. } else {
  1027. proxy.$modal.msgError("请选择有效客户");
  1028. return;
  1029. }
  1030. } else {
  1031. proxy.$modal.msgError("请选择有效客户");
  1032. return;
  1033. }
  1034. proxy.$refs["orderRef"].validate((valid) => {
  1035. if (valid && detailValid() && amountValid()) {
  1036. const formValue = form.value;
  1037. // formValue.details.forEach(item => {
  1038. // item.timeVo = null
  1039. // })
  1040. formValue.details =
  1041. form.value.serviceType === 1
  1042. ? loopDetails.value
  1043. : onceDetails.value;
  1044. if (formValue.id != null) {
  1045. if (formValue.companyId !== null) {
  1046. if (type.value == "") {
  1047. updateOrder(formValue).then((response) => {
  1048. proxy.$modal.msgSuccess("修改成功");
  1049. visible.value = false;
  1050. getList.value();
  1051. });
  1052. } else if (type.value == "alterOrder") {
  1053. alterOrder(formValue).then((response) => {
  1054. proxy.$modal.msgSuccess("修改成功");
  1055. visible.value = false;
  1056. getList.value();
  1057. });
  1058. } else if (type.value == "dissolutionOrder") {
  1059. dissolutionOrder(formValue).then((response) => {
  1060. proxy.$modal.msgSuccess("修改成功");
  1061. visible.value = false;
  1062. getList.value();
  1063. });
  1064. } else {
  1065. proxy.$modal.msgError("请选择有效客户");
  1066. }
  1067. }
  1068. } else {
  1069. addOrder(formValue).then((response) => {
  1070. proxy.$modal.msgSuccess("新增成功");
  1071. visible.value = false;
  1072. getList.value();
  1073. });
  1074. }
  1075. }
  1076. });
  1077. });
  1078. });
  1079. }
  1080. function detailValid() {
  1081. if (form.value.serviceType === 1) {
  1082. // 循环服务
  1083. if (loopDetails.value.length === 0) {
  1084. proxy.$modal.msgError("请选择至少一条任务");
  1085. return false;
  1086. }
  1087. // loopDetails.forEach((item, index) => {
  1088. for (let i = 0; i < loopDetails.value.length; i++) {
  1089. let item = loopDetails.value[i];
  1090. if (
  1091. (item.freeNum ? Number(item.freeNum) : 0) +
  1092. (item.serviceNum ? Number(item.serviceNum) : 0) <=
  1093. 0
  1094. ) {
  1095. proxy.$modal.msgError(`${item.taskTypeName}服务月数不能为0`);
  1096. return false;
  1097. }
  1098. if (item.price == null || item.price === "") {
  1099. proxy.$modal.msgError(`${item.taskTypeName}请填写服务单价`);
  1100. return false;
  1101. }
  1102. }
  1103. } else if (form.value.serviceType === 2) {
  1104. // 代账服务
  1105. if (onceDetails.value.length === 0) {
  1106. proxy.$modal.msgError("请选择至少一条任务");
  1107. return false;
  1108. }
  1109. for (let i = 0; i < onceDetails.value.length; i++) {
  1110. let item = onceDetails.value[i];
  1111. if (item.payAddress === 1) {
  1112. if (item.addressStyle == null) {
  1113. proxy.$modal.msgError("请选择注册地址类型");
  1114. return false;
  1115. }
  1116. if (
  1117. item.addressStyle === 1 &&
  1118. (item.province == null || item.city == null || item.district == null)
  1119. ) {
  1120. proxy.$modal.msgError("请选择注册区域");
  1121. return false;
  1122. }
  1123. console.log(item);
  1124. if (item.addressStyle === 2 && item.fictionAddressId == null) {
  1125. proxy.$modal.msgError("请选择虚拟地址");
  1126. return false;
  1127. }
  1128. if (item.addressStyle === 2 && item.addressAmount == undefined) {
  1129. proxy.$modal.msgError("请填写虚拟地址金额");
  1130. return false;
  1131. }
  1132. }
  1133. if (
  1134. item.payAddress === 0 &&
  1135. (item.province == null || item.city == null || item.district == null)
  1136. ) {
  1137. proxy.$modal.msgError("请选择办理地区");
  1138. return false;
  1139. }
  1140. for (let j = 0; j < item.processes.length; j++) {
  1141. let process = item.processes[j];
  1142. if (process.amount == undefined) {
  1143. proxy.$modal.msgError(`${process.taskTypeDetailName}请填写金额`);
  1144. return false;
  1145. }
  1146. }
  1147. }
  1148. }
  1149. return true;
  1150. }
  1151. function amountValid() {
  1152. if (form.value.trueAmount < 0) {
  1153. proxy.$modal.msgError("实收金额不可小于0");
  1154. return false;
  1155. }
  1156. return true;
  1157. }
  1158. /** 查询表单信息 */
  1159. function getForm() {
  1160. proxy.$refs.orderRef.resetFields();
  1161. loading.value = true;
  1162. getOrder(form.value.id).then((response) => {
  1163. loading.value = false;
  1164. form.value = response.data;
  1165. type.value =
  1166. type.value == "" && form.value.status === 8 ? "alterOrder" : type.value;
  1167. });
  1168. }
  1169. function handleServiceTypeClick(tab) {
  1170. computedService();
  1171. }
  1172. function changeDetails(type, arg) {
  1173. switch (type) {
  1174. case "loop":
  1175. arg.forEach((e) => {
  1176. const taskType = loopTasks.value.find((v) => v.id == e);
  1177. if (loopDetails.value.findIndex((v) => v.taskTypeId == e) < 0) {
  1178. const newDetail = JSON.parse(JSON.stringify(detailEmpty));
  1179. newDetail.taskTypeId = e;
  1180. newDetail.taskTypeName = taskType.name;
  1181. loopDetails.value.push(newDetail);
  1182. }
  1183. });
  1184. loopDetails.value = loopDetails.value.filter(
  1185. (v) => arg.findIndex((e) => e == v.taskTypeId) > -1
  1186. );
  1187. computedService()
  1188. break;
  1189. case "once":
  1190. arg.forEach((e) => {
  1191. const taskType = onceTasks.value.find((v) => v.id == e);
  1192. if (onceDetails.value.findIndex((v) => v.taskTypeId == e) < 0) {
  1193. const newDetail = JSON.parse(JSON.stringify(detailEmpty));
  1194. newDetail.taskTypeId = e;
  1195. newDetail.taskTypeName = taskType.name;
  1196. newDetail.payAddress = taskType.payAddress;
  1197. (newDetail.alterType = e === "6" ? "普通变更" : ""),
  1198. (newDetail.defaultProcesses = taskType.processes.map((v) => ({
  1199. taskTypeId: e,
  1200. taskTypeDetailId: v.id,
  1201. taskTypeDetailName: v.name,
  1202. fictionAddressId: null,
  1203. fictionAddress: "",
  1204. addressStyle: 0,
  1205. checked: false,
  1206. amount: undefined,
  1207. })));
  1208. newDetail.processes = [];
  1209. onceDetails.value.push(newDetail);
  1210. }
  1211. });
  1212. onceDetails.value = onceDetails.value.filter(
  1213. (v) => arg.findIndex((e) => e == v.taskTypeId) > -1
  1214. );
  1215. let provincesLength = provincesArr.value.length;
  1216. if (onceDetails.value.length > provincesLength) {
  1217. for (let i = 0; i < onceDetails.value.length - provincesLength; i++) {
  1218. provincesArr.value.push(provinces.value);
  1219. citiesArr.value.push(cities.value);
  1220. districtsArr.value.push(districts.value);
  1221. }
  1222. } else if (onceDetails.value.length < provincesLength) {
  1223. for (let i = 0; i < provincesLength - onceDetails.value.length; i++) {
  1224. provincesArr.value.length--;
  1225. citiesArr.value.length--;
  1226. districtsArr.value.length--;
  1227. }
  1228. }
  1229. break;
  1230. default:
  1231. break;
  1232. }
  1233. }
  1234. function inputChangeHandler(type, field, item, value, parent) {
  1235. console.log(111, type, field, item, value, parent);
  1236. let amount = 0;
  1237. switch (type) {
  1238. case "loop":
  1239. switch (field) {
  1240. case "price":
  1241. amount =
  1242. (item.serviceNum ? Number(item.serviceNum) : 0) *
  1243. (value ? Number(value) : 0) - (item.discountAmount ? Number(item.discountAmount) : 0);
  1244. item.amount = amount;
  1245. break;
  1246. case "serviceNum":
  1247. amount =
  1248. (item.price ? Number(item.price) : 0) * (value ? Number(value) : 0) - (item.discountAmount ? Number(item.discountAmount) : 0);
  1249. item.amount = amount;
  1250. break;
  1251. case "freeNum":
  1252. amount =
  1253. (item.price ? Number(item.price) : 0) *
  1254. (item.serviceNum ? Number(item.serviceNum) : 0) - (item.discountAmount ? Number(item.discountAmount) : 0);
  1255. item.amount = amount;
  1256. break;
  1257. case "discountAmount":
  1258. amount =
  1259. (item.price ? Number(item.price) : 0) *
  1260. (item.serviceNum ? Number(item.serviceNum) : 0) - (value ? Number(value) : 0);
  1261. item.amount = amount;
  1262. }
  1263. break;
  1264. case "once":
  1265. computedItem(item);
  1266. break;
  1267. case "process":
  1268. computedItem(parent);
  1269. break;
  1270. default:
  1271. break;
  1272. }
  1273. computedService();
  1274. }
  1275. function computedItem(parent) {
  1276. let amount = 0;
  1277. amount +=
  1278. parent.payAddress === 1 && parent.addressStyle === 2 && parent.addressAmount
  1279. ? Number(parent.addressAmount)
  1280. : 0;
  1281. amount +=
  1282. parent.taskTypeId === "6" &&
  1283. parent.alterType === "跨区变更" &&
  1284. parent.addressStyle === 2 &&
  1285. parent.addressAmount
  1286. ? Number(parent.addressAmount)
  1287. : 0;
  1288. parent.processes.forEach((l) => {
  1289. amount += l.amount ? Number(l.amount) : 0;
  1290. });
  1291. parent.amount = amount;
  1292. }
  1293. function computedService() {
  1294. //子表中的实际金额
  1295. let amount = 0;
  1296. let discountAmount = 0;
  1297. let trueAmount = 0;
  1298. switch (form.value.serviceType) {
  1299. case 1:
  1300. loopDetails.value.forEach((l) => {
  1301. amount += l.amount;
  1302. discountAmount += l.discountAmount;
  1303. trueAmount += l.trueAmount;
  1304. });
  1305. amount = amount >= 0 ? amount : 0;
  1306. discountAmount = discountAmount >= 0 ? discountAmount : 0;
  1307. break;
  1308. case 2:
  1309. onceDetails.value.forEach((l) => {
  1310. amount +=
  1311. l.payAddress === 1 && l.addressStyle === 2 && l.addressAmount
  1312. ? Number(l.addressAmount)
  1313. : 0;
  1314. if (l.alterType === "跨区变更" && l.addressStyle === 2 && l.addressAmount) {
  1315. amount += Number(l.addressAmount)
  1316. }
  1317. l.processes.forEach((v) => {
  1318. amount += v.amount ? Number(v.amount) : 0;
  1319. });
  1320. });
  1321. break;
  1322. }
  1323. form.value.discountAmount = discountAmount;
  1324. form.value.trueAmount = amount
  1325. form.value.amount = match.add(amount, discountAmount);
  1326. }
  1327. /** 输入框输出建议 */
  1328. function querySearchAsync(queryString, cb) {
  1329. const query = { keyword: queryString };
  1330. listUser(query).then((res) => {
  1331. cb(res.rows);
  1332. });
  1333. }
  1334. function querySearchCompanyAsync(queryString, cb) {
  1335. const query =
  1336. queryString.length > 0
  1337. ? {
  1338. keyword: queryString,
  1339. pageSize: 50,
  1340. pageNum: 1,
  1341. orderByColumn: "create_time",
  1342. }
  1343. : { pageSize: 50, pageNum: 1, orderByColumn: "create_time" };
  1344. listCompany(query).then((res) => {
  1345. cb(res.rows);
  1346. });
  1347. }
  1348. function handleSelectEmployee(item) {
  1349. form.value.signerName = item.nickName;
  1350. form.value.signerId = item.userId;
  1351. }
  1352. function handleSelectCompany(item) {
  1353. form.value.companyName = item.name;
  1354. form.value.companyId = item.id;
  1355. form.value.customerLabelId = item.customerLabelId
  1356. }
  1357. function handleClearCompany() {
  1358. form.value.customerLabelId = "";
  1359. }
  1360. function handleSelectProvince(item, index) {
  1361. const _provinceCode = item.provinceCode;
  1362. const _province = provincesArr.value[index].find((i) => {
  1363. return i.code === _provinceCode;
  1364. });
  1365. item.province = _province.name;
  1366. citiesArr.value[index] = proxy.region.getCities(_provinceCode);
  1367. if (citiesArr.value[index].length === 0) {
  1368. // 清空城市数据
  1369. item.cityCode = "";
  1370. item.city = "";
  1371. cities.value = [{ code: "", name: "全部" }];
  1372. // 清空行政区数据
  1373. item.districtCode = "";
  1374. item.district = "";
  1375. districts.value = [{ code: "", name: "全部" }];
  1376. } else {
  1377. citiesArr.value[index].unshift({ code: "", name: "全部" });
  1378. item.cityCode = citiesArr.value[index][0].code;
  1379. item.city = citiesArr.value[index][0].name;
  1380. handleSelectCity(item, index);
  1381. }
  1382. }
  1383. function handleSelectCity(item, index) {
  1384. const _cityCode = item.cityCode;
  1385. const _city = citiesArr.value[index].find((i) => {
  1386. return i.code === _cityCode;
  1387. });
  1388. item.city = _city.name;
  1389. districtsArr.value[index] = proxy.region.getDistricts(_cityCode);
  1390. if (districtsArr.value[index].length === 0) {
  1391. // 清空行政区数据
  1392. item.districtCode = "";
  1393. item.district = "";
  1394. districtsArr.value[index] = [{ code: "", name: "全部" }];
  1395. } else {
  1396. districtsArr.value[index].unshift({ code: "", name: "全部" });
  1397. item.districtCode = districtsArr.value[index][0].code;
  1398. item.district = districtsArr.value[index][0].name;
  1399. }
  1400. }
  1401. function handleSelectDistrict(item, index) {
  1402. const _districtCode = item.districtCode;
  1403. const _district = districtsArr.value[index].find((i) => {
  1404. return i.code === _districtCode;
  1405. });
  1406. item.district = _district.name;
  1407. }
  1408. function getProcess(item) {
  1409. const typeItem = onceTasks.value.find((i) => i.id === item.taskTypeId);
  1410. return typeItem.processes;
  1411. }
  1412. function checkedProcess(processId, item) {
  1413. const processes = item.processes;
  1414. return processes.findIndex((v) => v.taskTypeDetailId == processId) < 0;
  1415. }
  1416. function changeProcesses(item) {
  1417. computedItem(item);
  1418. computedService();
  1419. }
  1420. function parseDetail(details, form) {
  1421. loops.value = [];
  1422. onces.value = [];
  1423. loopDetails.value = [];
  1424. onceDetails.value = [];
  1425. switch (form.serviceType) {
  1426. case 1:
  1427. // 循环任务
  1428. details.forEach((i) => {
  1429. loops.value.push(i.taskTypeId);
  1430. loopDetails.value.push(i);
  1431. });
  1432. break;
  1433. case 2:
  1434. // 代办任务
  1435. details.forEach((i) => {
  1436. onces.value.push(i.taskTypeId);
  1437. const taskType = onceTasks.value.find((j) => j.id === i.taskTypeId);
  1438. onceDetails.value.push({
  1439. ...i,
  1440. defaultProcesses: parseProcess(i, taskType.processes),
  1441. });
  1442. onceDetails.value.forEach((j) => {
  1443. j.processes = j.defaultProcesses.filter((v) => v.checked);
  1444. });
  1445. });
  1446. break;
  1447. default:
  1448. break;
  1449. }
  1450. }
  1451. function parseProcess(item, processes) {
  1452. return processes.map((l) => {
  1453. // console.log(item.processes.find((i) => i.taskTypeDetailId === l.id));
  1454. if (item.processes.findIndex((i) => i.taskTypeDetailId === l.id) < 0) {
  1455. return {
  1456. taskTypeId: item.taskTypeId,
  1457. taskTypeDetailId: l.id,
  1458. taskTypeDetailName: l.name,
  1459. checked: false,
  1460. amount: undefined,
  1461. };
  1462. } else {
  1463. return {
  1464. ...item.processes.find((i) => i.taskTypeDetailId === l.id),
  1465. checked: true,
  1466. };
  1467. }
  1468. });
  1469. }
  1470. function verifyHandler() {
  1471. proxy.$modal
  1472. .confirm("是否确认审核?")
  1473. .then((_) => {
  1474. // form.value.details.forEach(item => {
  1475. // item.timeVo = null
  1476. // })
  1477. verifyCheckOrder(form.value).then((res) => {
  1478. console.log(123, res);
  1479. if (res.data == null) {
  1480. verifyUpload(1);
  1481. } else {
  1482. verifyOpen.value = true;
  1483. redirectDetails.value = res.data;
  1484. }
  1485. });
  1486. })
  1487. .catch((_) => {
  1488. proxy.$modal.msg("取消审核");
  1489. });
  1490. }
  1491. function verifyFormClose() {
  1492. redirectDetails.value = [];
  1493. verifyForm.value = {};
  1494. verifyOpen.value = false;
  1495. }
  1496. function redirectVerify() {
  1497. redirectDetails.value.forEach((l) => {
  1498. const index = form.value.details.findIndex((v) => v.id === l.id);
  1499. form.value.details[index].redirect = l.redirect;
  1500. });
  1501. verifyUpload(1);
  1502. verifyFormClose();
  1503. }
  1504. function rejectHandler() {
  1505. rejectOpen.value = true;
  1506. }
  1507. function rejectCancel() {
  1508. rejectOpen.value = false;
  1509. }
  1510. function rejectSubmitHandler() {
  1511. if (form.value.verifyRemark === "" || form.value.verifyRemark == null) {
  1512. proxy.$modal.msgError("请填写驳回原因");
  1513. return;
  1514. }
  1515. }
  1516. function verifyUpload(status) {
  1517. const formValue = proxy.deepClone(form.value);
  1518. formValue.verifyStatus = status;
  1519. formValue.status = status;
  1520. verifyOrder(formValue).then((res) => {
  1521. getForm();
  1522. getList.value();
  1523. rejectCancel();
  1524. proxy.$modal.msgSuccess("保存成功");
  1525. });
  1526. }
  1527. /** 文件上传 */
  1528. function upload(param) {
  1529. const formData = new FormData();
  1530. formData.append("file", param.file);
  1531. uploadFile(formData).then((res) => {
  1532. if (res.code === 200) {
  1533. const file = {};
  1534. file.fileName = res.newFileName;
  1535. file.url = res.url;
  1536. file.originalFileName = res.originalFilename;
  1537. file.fileUrl = res.fileName;
  1538. form.value.files.push(file);
  1539. }
  1540. });
  1541. }
  1542. function handleDelFile(index) {
  1543. form.value.files.splice(index, 1);
  1544. }
  1545. function initRegion() {
  1546. console.log("initRegion开始", form.value);
  1547. for (let i = 0; i < form.value.details.length; i++) {
  1548. cities.value = proxy.region.getCities(form.value.details[i].provinceCode);
  1549. cities.value.unshift({ code: "", name: "全部" });
  1550. districts.value = proxy.region.getDistricts(form.value.details[i].cityCode);
  1551. districts.value.unshift({ code: "", name: "全部" });
  1552. console.log("市", cities.value);
  1553. provincesArr.value.push(provinces.value);
  1554. citiesArr.value.push(cities.value);
  1555. districtsArr.value.push(districts.value);
  1556. }
  1557. }
  1558. function showAddCompanyDialog() {
  1559. addCompanyDialogRef.value.open();
  1560. }
  1561. function contractTypeChangeHandler() {
  1562. if (form.value.contractType === 1) {
  1563. form.value.serviceType = 1;
  1564. }
  1565. }
  1566. function showHistoryList() {
  1567. historyChoiceRef.value.open(
  1568. form.value.fromId === "0" ? form.value.id : form.value.fromId
  1569. );
  1570. }
  1571. function historyChoiceHandle(row) {
  1572. open(row.id);
  1573. }
  1574. /** 暴露给父组件的方法 */
  1575. defineExpose({
  1576. open,
  1577. openSimple,
  1578. });
  1579. </script>
  1580. <style scoped>
  1581. .my-autocomplete .el-input-group__append {
  1582. padding: 0 10px !important;
  1583. }
  1584. </style>