applyCost.vue 25 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063
  1. <template>
  2. <el-dialog
  3. :close-on-click-modal="false"
  4. :close-on-press-escape="false"
  5. :title="dialogTitle"
  6. :visible.sync="dialogVisible"
  7. top="50px"
  8. width="75%"
  9. :before-close="beforeClose"
  10. >
  11. <div class="tabsdom">
  12. <el-tabs v-model="activeName" @tab-click="handleClick">
  13. <el-tab-pane label="报支申请" name="first">
  14. <el-form
  15. ref="elformData"
  16. :model="form"
  17. :rules="rules"
  18. class="cost_form"
  19. label-width="125px"
  20. style="width: 100%;padding: 5px"
  21. >
  22. <el-card shadow="always" style="padding: 15px 5px 5px 15px">
  23. <el-row :gutter="10">
  24. <el-col :span="24">
  25. <el-form-item label="关联项目" prop="proId">
  26. <el-select v-model="form.proId" filterable placeholder="请选择">
  27. <el-option
  28. v-for="item in ProjectData"
  29. :key="item.value"
  30. :label="item.label"
  31. :value="item.value"
  32. >
  33. <span style="float: left">{{ item.label }}</span>
  34. <span style="float: right; color: #8492a6; font-size: 13px">{{
  35. item.custname
  36. }}</span>
  37. </el-option>
  38. </el-select>
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. <el-card class="pdtopbottom16 mb25 pdtop16px">
  43. <span class="moneydetails">费用明细</span>
  44. <el-row :gutter="10" class="eltype">
  45. <el-col :span="4" class="col-txt txtc">费用类型</el-col>
  46. <el-col :span="4" class="col-txt txtc">金额(元)</el-col>
  47. <el-col :span="4" class="col-txt txtc">发票号</el-col>
  48. <el-col :span="12" class="col-txt txtc">
  49. 单据
  50. </el-col>
  51. </el-row>
  52. <el-row
  53. v-for="(item,index) in form.applyUseMoneyDetailListString"
  54. :gutter="10"
  55. class="eltype"
  56. >
  57. <el-col :span="4">
  58. <el-select
  59. v-model="item.feeType"
  60. filterable
  61. size="small"
  62. placeholder="请选择"
  63. style="width: 100%"
  64. >
  65. <el-option
  66. v-for="item in dc_data.BUDGET_FY"
  67. :key="item.value"
  68. :label="item.label"
  69. :value="item.value"
  70. />
  71. </el-select>
  72. </el-col>
  73. <el-col :span="4">
  74. <el-input-number
  75. v-model="item.feeMoney"
  76. :controls="false"
  77. size="small"
  78. controls-position="right"
  79. placeholder="请填写金额,如0.1"
  80. style="width: 100%"
  81. />
  82. </el-col>
  83. <el-col :span="4">
  84. <el-input
  85. v-model="item.fileNumber"
  86. :controls="false"
  87. size="small"
  88. :disabled="item.fileList==0"
  89. controls-position="right"
  90. placeholder="请输入发票号(需上传发票)"
  91. style="width: 100%"
  92. />
  93. </el-col>
  94. <el-col :span="10" class="col-input">
  95. <el-upload
  96. :action="$constant.BASE_URI+'/FileController/upload'"
  97. :file-list="item.fileList"
  98. :http-request="(params)=>{uploadFile(params,index)}"
  99. :limit="5"
  100. :multiple="false"
  101. :show-file-list="false"
  102. class="upload-demo"
  103. style="width: 30%;float: left;margin-left: 42px"
  104. >
  105. <el-button size="small" style="font-size: 14px" type="text">
  106. 上传发票
  107. <img
  108. src="./fapiaoicon.png"
  109. style="margin-left: 5px;position: absolute;top: 13.5px;"
  110. width="24px"
  111. />
  112. </el-button>
  113. </el-upload>
  114. <el-radio-group
  115. v-model="item.fileType"
  116. style="margin-left: 30px;"
  117. @input="changeFileType($event,index)"
  118. >
  119. <el-radio v-if="false" :label="1">上传发票</el-radio>
  120. <el-radio :label="2">发票后补</el-radio>
  121. <el-radio :label="3">无发票</el-radio>
  122. </el-radio-group>
  123. </el-col>
  124. <el-col :span="1" class="col-txt txtc">
  125. &nbsp;
  126. <el-button
  127. v-if="index!=0"
  128. circle
  129. icon="el-icon-minus"
  130. size="small"
  131. @click="deleteRow(index)"
  132. />
  133. </el-col>
  134. <el-col :span="1" class="col-txt txtc">
  135. <el-button
  136. v-if="index==form.applyUseMoneyDetailListString.length-1"
  137. circle
  138. icon="el-icon-plus"
  139. size="small"
  140. type="primary"
  141. @click="addListRow()"
  142. />
  143. </el-col>
  144. <el-col :span="13" v-if="item.fileList.length>0">&nbsp;</el-col>
  145. <el-col :span="11">
  146. <div v-for="(file,i) in item.fileList" v-if="item.fileList.length>0"
  147. style="margin: 0px 0px 0px 45px;"
  148. >
  149. <div>
  150. <a :href="file.url">{{ file.name }}</a>
  151. <span class="el-upload-list__item-actions">
  152. <i class="el-icon-delete" @click="handlePictureRemove(i,file,item.fileList)"/>
  153. </span>
  154. </div>
  155. </div>
  156. </el-col>
  157. </el-row>
  158. <div class="feeMoneyTotal">
  159. <div style="float: right">共计金额(元):{{ feeMoneyTotal() }}</div>
  160. </div>
  161. </el-card>
  162. <el-row :gutter="10">
  163. <el-col :span="24">
  164. <el-form-item label="用途" prop="useReasons">
  165. <el-input v-model="form.useReasons" placeholder="请说明" type="textarea"/>
  166. </el-form-item>
  167. </el-col>
  168. <el-col :span="24">
  169. <el-form-item label="收款单位(人)" prop="payeeName">
  170. <el-input v-model="form.payeeName" placeholder="请输入收款单位"></el-input>
  171. </el-form-item>
  172. </el-col>
  173. <el-col :span="12">
  174. <el-form-item label="开户银行">
  175. <el-input v-model="form.bankName" placeholder="请填写银行及支行"></el-input>
  176. </el-form-item>
  177. </el-col>
  178. <el-col :span="12">
  179. <el-form-item label="银行账户" label-width="125px" prop="bankAccountNum">
  180. <el-input v-model="form.bankAccountNum" filterable placeholder="请输入银行账户"/>
  181. </el-form-item>
  182. </el-col>
  183. <el-col :span="24">
  184. <el-form-item label="抄送">
  185. <user-select
  186. :default-select="selectList"
  187. :multiple="true"
  188. class="cclist"
  189. @selectValue="parentMethod"
  190. />
  191. </el-form-item>
  192. </el-col>
  193. </el-row>
  194. </el-card>
  195. </el-form>
  196. </el-tab-pane>
  197. <el-tab-pane label="流程图 " name="second">
  198. <div style="width: 100%">
  199. <el-row>
  200. <el-col :span="24">
  201. <div class="node_info">
  202. <div>节点说明:</div>
  203. <div class="dis_flex" v-for="item in nodeColor">
  204. <div class="node_class" :style="{backgroundColor: item.nodeback}"></div>
  205. {{ item.name }}
  206. </div>
  207. </div>
  208. <div id="containerCost" ref="containerCost" style="width: 100%" v-show="true"></div>
  209. </el-col>
  210. </el-row>
  211. </div>
  212. </el-tab-pane>
  213. </el-tabs>
  214. </div>
  215. <div slot="footer">
  216. <el-button @click="dialogVisible = false">取 消</el-button>
  217. <el-button :loading="loading" type="primary" @click="confirmSubmit()">确 定</el-button>
  218. </div>
  219. </el-dialog>
  220. </template>
  221. <script>
  222. import { upload } from '@/static/utils/channel'
  223. import Base from '@/views/base/base'
  224. import BaseData from '@/views/base/baseData'
  225. import UserSelect from '@/views/components/UserSelect'
  226. import * as echarts from 'echarts'
  227. const lineStyle = {
  228. color: '#00116a',
  229. width: 2
  230. }
  231. const redLinestyle = {
  232. color: 'red',
  233. width: 2
  234. }
  235. export default {
  236. name: 'ApplyPay',
  237. mixins: [Base, BaseData],
  238. components: {
  239. upload, UserSelect
  240. },
  241. data() {
  242. return {
  243. nodeColor: [
  244. { name: '审核通过', nodeback: '#2A3980' },
  245. { name: '未经过', nodeback: '#999999' },
  246. { name: '退回', nodeback: '#E04242' },
  247. { name: '审核中', nodeback: '#E08E42' },
  248. { name: '撤回', nodeback: '#4294E0' }
  249. ],
  250. rules: {
  251. proId: [{ required: true, message: '请选择', trigger: 'change' }],
  252. useReasons: [{ required: true, message: '请说明', trigger: 'blur' }],
  253. payeeName: [{ required: true, message: '请输入收款单位(人)', trigger: 'blur' }]
  254. },
  255. selectList: [],
  256. loading: false,
  257. dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY'],
  258. ProjectData: [],
  259. dialogTitle: '费用报支申请',
  260. dialogVisible: false,
  261. form: {
  262. applyUseMoneyDetailListString: []
  263. },
  264. activeName: 'first'
  265. }
  266. },
  267. mounted() {
  268. this.initDict(this.dc_key).then((res) => {
  269. })
  270. this.initProject({ /* signstatus: '2,3'*/ })
  271. },
  272. methods: {
  273. beforeClose() {
  274. this.form = {
  275. applyUseMoneyDetailListString: []
  276. }
  277. this.dialogVisible = false
  278. this.activeName = 'first'
  279. this.$forceUpdate()
  280. },
  281. createNodeCanvas() {
  282. this.$nextTick(() => {
  283. let myCharts = echarts.init(document.getElementById('containerCost'))
  284. let charts = {
  285. nodes: [ // 节点
  286. {
  287. name: '申请人发起',
  288. value: [0, 375],
  289. symbol: 'image://' + require('../asste/huifangkuai.png'),
  290. symbolSize: [110, 60]
  291. },
  292. {
  293. name: '直接上级审核',
  294. value: [75, 375],
  295. symbol: 'image://' + require('../asste/huifangkuai.png'),
  296. symbolSize: [110, 60]
  297. },
  298. {
  299. name: '部门负责人审核',
  300. value: [150, 375],
  301. symbol: 'image://' + require('../asste/huifangkuai.png'),
  302. symbolSize: [110, 60]
  303. },
  304. {
  305. name: '报支金额',
  306. value: [225, 375],
  307. label: {
  308. show: true,
  309. color: '#777777' // 节点文字颜色
  310. },
  311. symbol: 'image://' + require('../asste/lingxing.png'),
  312. symbolSize: [80, 80]
  313. },
  314. {
  315. name: '出纳支付',
  316. value: [225, 500],
  317. symbol: 'image://' + require('../asste/huifangkuai.png'),
  318. symbolSize: [110, 60]
  319. },
  320. {
  321. name: '分管领导审核',
  322. value: [225, 250],
  323. symbol: 'image://' + require('../asste/huifangkuai.png'),
  324. symbolSize: [110, 60]
  325. },
  326. {
  327. name: '上级分管领导审核',
  328. value: [300, 250],
  329. symbol: 'image://' + require('../asste/huifangkuai.png'),
  330. symbolSize: [110, 60]
  331. },
  332. {
  333. name: '主要领导审核',
  334. value: [375, 250],
  335. symbol: 'image://' + require('../asste/huifangkuai.png'),
  336. symbolSize: [110, 60]
  337. },
  338. {
  339. name: '出纳支付 ',
  340. value: [450, 250],
  341. symbol: 'image://' + require('../asste/huifangkuai.png'),
  342. symbolSize: [110, 60]
  343. },
  344. {
  345. name: '支付复核',
  346. value: [450, 375],
  347. symbol: 'image://' + require('../asste/huifangkuai.png'),
  348. symbolSize: [110, 60]
  349. },
  350. {
  351. name: '结束',
  352. value: [525, 375],
  353. symbol: 'image://' + require('../asste/huifangkuai.png'),
  354. symbolSize: [110, 60]
  355. },
  356. {
  357. name: '流程7',
  358. value: [900, 500],
  359. symbol: 'image://https://bpic.588ku.com/element_origin_min_pic/01/52/82/615746ac5bb1ea9.jpg',
  360. symbolSize: [70, 40]
  361. }
  362. ],
  363. linesData: [ // 连线
  364. {
  365. label: {
  366. show: true,
  367. position: 'middle',
  368. opacity: 1,
  369. width: 10,
  370. height: 15,
  371. fontSize: 16,
  372. lineHeight: 0,
  373. color: 'red',
  374. padding: [15, 15, 15, 15],
  375. verticalAlign: 'middle'
  376. },
  377. name: '退回发起人',
  378. nodeName: '出纳支付退回发起人 ',
  379. lineStyle: lineStyle,
  380. coords: [[225, 500], [5, 500]],
  381. symbol: 'none'
  382. },
  383. {
  384. name: '',
  385. lineStyle: lineStyle,
  386. coords: [
  387. [5, 500],
  388. [5, 405]
  389. ]
  390. },
  391. {
  392. name: '',
  393. lineStyle: lineStyle,
  394. coords: [
  395. [150, 375],
  396. [150, 475]
  397. ],
  398. symbol: 'none'
  399. },
  400. {
  401. label: {
  402. show: true,
  403. position: 'middle',
  404. opacity: 1,
  405. width: 10,
  406. height: 15,
  407. fontSize: 16,
  408. lineHeight: 0,
  409. color: 'red',
  410. padding: [15, 15, 15, 15],
  411. verticalAlign: 'middle'
  412. },
  413. name: '退回发起人',
  414. lineStyle: lineStyle,
  415. coords: [[150, 475], [5, 475]],
  416. symbol: 'none'
  417. },
  418. {
  419. name: '',
  420. lineStyle: lineStyle,
  421. coords: [
  422. [75, 375],
  423. [75, 445]
  424. ],
  425. symbol: 'none'
  426. },
  427. {
  428. label: {
  429. show: true,
  430. position: 'middle',
  431. opacity: 1,
  432. width: 10,
  433. height: 15,
  434. fontSize: 16,
  435. lineHeight: 0,
  436. color: 'red',
  437. padding: [15, 15, 15, 15],
  438. verticalAlign: 'middle'
  439. },
  440. name: '退回发起人',
  441. lineStyle: lineStyle,
  442. coords: [[75, 445], [5, 445]],
  443. symbol: 'none'
  444. },
  445. {
  446. name: '',
  447. lineStyle: lineStyle,
  448. coords: [
  449. [75, 375],
  450. [75, 445]
  451. ],
  452. symbol: 'none'
  453. },
  454. {
  455. label: {
  456. show: true,
  457. position: 'end',
  458. backgroundColor: 'rgb(255,255,255)',
  459. opacity: 1,
  460. fontSize: 16,
  461. // lineHeight: 0,
  462. color: 'red'
  463. // padding: [15, 15, 15, 15],
  464. // verticalAlign: 'middle',
  465. },
  466. name: '',
  467. lineStyle: lineStyle,
  468. coords: [[229.5, 410], [229.5, 470]]
  469. },
  470. {
  471. label: {
  472. show: true,
  473. position: 'end',
  474. opacity: 1,
  475. fontSize: 16,
  476. color: 'red'
  477. },
  478. name: '报支金额>3000',
  479. lineStyle: {
  480. color: '#00116a',
  481. width: 2,
  482. type: 'dotted'
  483. },
  484. coords: [[255, 440], [255, 440]],
  485. symbol: 'none'
  486. },
  487. {
  488. name: '',
  489. lineStyle: lineStyle,
  490. coords: [[0, 375], [55, 375]]
  491. },
  492. {
  493. name: '',
  494. lineStyle: lineStyle,
  495. coords: [[75, 375], [130, 375]]
  496. },
  497. {
  498. name: '',
  499. lineStyle: lineStyle,
  500. coords: [[165, 375], [213, 375]]
  501. },
  502. {
  503. label: {
  504. show: true,
  505. position: 'end',
  506. backgroundColor: 'rgb(255,255,255)',
  507. opacity: 1,
  508. fontSize: 16,
  509. // lineHeight: 0,
  510. color: 'red'
  511. // padding: [15, 15, 15, 15],
  512. // verticalAlign: 'middle',
  513. },
  514. name: '',
  515. lineStyle: lineStyle,
  516. coords: [[229.5, 340], [229.5, 280]]
  517. },
  518. {
  519. label: {
  520. show: true,
  521. position: 'end',
  522. opacity: 1,
  523. fontSize: 16,
  524. color: 'red'
  525. },
  526. name: '报支金额<3000',
  527. lineStyle: {
  528. color: '#00116a',
  529. width: 2,
  530. type: 'dotted'
  531. },
  532. coords: [[255, 320], [255, 320]],
  533. symbol: 'none'
  534. },
  535. {
  536. name: '',
  537. lineStyle: lineStyle,
  538. coords: [[229.5, 270], [229.5, 180]],
  539. symbol: 'none'
  540. },
  541. {
  542. label: {
  543. show: true,
  544. position: 'middle',
  545. opacity: 1,
  546. width: 10,
  547. height: 15,
  548. fontSize: 16,
  549. lineHeight: 0,
  550. color: 'red',
  551. padding: [15, 15, 15, 15],
  552. verticalAlign: 'middle'
  553. },
  554. name: '退回发起人',
  555. lineStyle: lineStyle,
  556. coords: [[229.5, 180], [5, 180]],
  557. symbol: 'none'
  558. },
  559. {
  560. name: '申请人发起下面的那条线',
  561. lineStyle: lineStyle,
  562. coords: [[5, 85], [5, 345]]
  563. },
  564. {
  565. lineStyle: lineStyle,
  566. coords: [[305, 250], [305, 145]],
  567. symbol: 'none'
  568. },
  569. {
  570. label: {
  571. show: true,
  572. position: 'middle',
  573. opacity: 1,
  574. width: 10,
  575. height: 15,
  576. fontSize: 16,
  577. lineHeight: 0,
  578. color: 'red',
  579. padding: [15, 15, 15, 15],
  580. verticalAlign: 'middle'
  581. },
  582. name: '退回发起人',
  583. lineStyle: lineStyle,
  584. coords: [[305, 145], [5, 145]],
  585. symbol: 'none'
  586. },
  587. {
  588. name: '',
  589. lineStyle: lineStyle,
  590. coords: [[380, 245], [380, 115]],
  591. symbol: 'none'
  592. },
  593. {
  594. label: {
  595. show: true,
  596. position: 'middle',
  597. opacity: 1,
  598. width: 10,
  599. height: 15,
  600. fontSize: 16,
  601. lineHeight: 0,
  602. color: 'red',
  603. padding: [15, 15, 15, 15],
  604. verticalAlign: 'middle'
  605. },
  606. name: '退回发起人',
  607. lineStyle: lineStyle,
  608. coords: [[380, 115], [5, 115]],
  609. symbol: 'none'
  610. },
  611. {
  612. name: '',
  613. lineStyle: lineStyle,
  614. coords: [[455, 250], [455, 85]],
  615. symbol: 'none'
  616. },
  617. {
  618. label: {
  619. show: true,
  620. position: 'middle',
  621. opacity: 1,
  622. width: 10,
  623. height: 15,
  624. fontSize: 16,
  625. lineHeight: 0,
  626. color: 'red',
  627. padding: [15, 15, 15, 15],
  628. verticalAlign: 'middle'
  629. },
  630. name: '退回发起人',
  631. lineStyle: lineStyle,
  632. coords: [[455, 85], [5, 85]],
  633. symbol: 'none'
  634. },
  635. {
  636. name: '',
  637. lineStyle: lineStyle,
  638. coords: [[229.5, 550], [229.5, 530]]
  639. },
  640. {
  641. label: {
  642. show: true,
  643. position: 'middle',
  644. opacity: 1,
  645. width: 10,
  646. height: 15,
  647. fontSize: 16,
  648. lineHeight: 0,
  649. color: 'red',
  650. padding: [15, 15, 15, 15],
  651. verticalAlign: 'middle'
  652. },
  653. name: '返回上一节点',
  654. lineStyle: lineStyle,
  655. coords: [[229.5, 550], [470, 550]],
  656. symbol: 'none'
  657. },
  658. {
  659. name: '',
  660. lineStyle: lineStyle,
  661. coords: [[470, 550], [470, 280]]
  662. },
  663. {
  664. name: '返回上一节点',
  665. label: {
  666. show: true,
  667. position: 'end',
  668. opacity: 1,
  669. fontSize: 16,
  670. color: 'red'
  671. },
  672. lineStyle: redLinestyle,
  673. coords: [[495, 310], [495, 310]],
  674. symbol: 'none'
  675. },
  676. {
  677. name: '',
  678. lineStyle: lineStyle,
  679. coords: [[225, 500], [455, 500]],
  680. symbol: 'none'
  681. },
  682. {
  683. name: '',
  684. lineStyle: lineStyle,
  685. coords: [[455, 500], [455, 405]]
  686. },
  687. {
  688. name: '',
  689. lineStyle: lineStyle,
  690. coords: [[455, 280], [455, 350]]
  691. },
  692. {
  693. name: '',
  694. lineStyle: lineStyle,
  695. coords: [[225, 250], [280, 250]]
  696. },
  697. {
  698. name: '',
  699. lineStyle: lineStyle,
  700. coords: [[325, 250], [355, 250]]
  701. },
  702. {
  703. name: '',
  704. lineStyle: lineStyle,
  705. coords: [[385, 250], [430, 250]]
  706. },
  707. {
  708. name: '',
  709. lineStyle: lineStyle,
  710. coords: [[450, 375], [505, 375]]
  711. }
  712. ]
  713. }
  714. let option = {
  715. xAxis: {
  716. min: 0,
  717. max: 600,
  718. show: false,
  719. type: 'value'
  720. },
  721. yAxis: {
  722. min: 0,
  723. max: 600,
  724. show: false,
  725. type: 'value'
  726. },
  727. grid: {
  728. left: 100,
  729. right: 0,
  730. bottom: 0,
  731. top: 0
  732. },
  733. // tooltip: {
  734. // show: false,
  735. // axisPointer: {
  736. // type: "shadow",
  737. // },
  738. // borderWidth: 1,
  739. // padding: 5,
  740. // },
  741. series: [
  742. {
  743. type: 'graph',
  744. coordinateSystem: 'cartesian2d',
  745. symbol: 'rect',
  746. symbolSize: [80, 40],
  747. itemStyle: {
  748. color: 'rgb(225,7,7)'
  749. },
  750. symbolOffset: [10, 0],
  751. force: {
  752. edgeLength: 100,//连线的长度
  753. repulsion: 200 //子节点之间的间距
  754. },
  755. label: {
  756. show: true,
  757. color: 'white' // 节点文字颜色
  758. },
  759. data: charts.nodes
  760. },
  761. {
  762. type: 'lines',
  763. polyline: false,
  764. coordinateSystem: 'cartesian2d',
  765. symbol: ['', 'arrow'],
  766. symbolSize: 10,
  767. data: charts.linesData
  768. }
  769. ]
  770. }
  771. myCharts.clear()
  772. window.onresize = myCharts.resize
  773. myCharts.setOption(option)
  774. })
  775. },
  776. handleClick(tab, event) {
  777. if (this.activeName == 'second') this.createNodeCanvas()
  778. },
  779. feeMoneyTotal() {
  780. let feeMoneyTotal = 0
  781. for (let i = 0; i < this.form.applyUseMoneyDetailListString.length; i++) {
  782. feeMoneyTotal += this.form.applyUseMoneyDetailListString[i].feeMoney
  783. }
  784. this.form.feeMoneyTotal = feeMoneyTotal
  785. return feeMoneyTotal.toFixed(2)
  786. },
  787. changeFileType(e, i) {
  788. if (e != 1) {
  789. this.form.applyUseMoneyDetailListString[i].fileList = []
  790. this.form.applyUseMoneyDetailListString[i].fileNumber = ''
  791. }
  792. this.$forceUpdate()
  793. },
  794. parentMethod(val) {
  795. if (val.length > 0) {
  796. this.form.ccList = val.join(',')
  797. }
  798. },
  799. handlePictureRemove(i, file, fileList) {
  800. fileList.splice(i, 1)
  801. let copyFileList = [...fileList]
  802. fileList = copyFileList
  803. this.form.applyUseMoneyDetailListString = this.form.applyUseMoneyDetailListString.map((e) => {
  804. return e
  805. })
  806. },
  807. uploadFile(params, i) {
  808. upload(params, true).then((res) => {
  809. this.form.applyUseMoneyDetailListString[i].fileList.push(res)
  810. this.form.applyUseMoneyDetailListString[i].fileType = 1
  811. this.$message.success('上传成功')
  812. })
  813. },
  814. baseRequest1(prefix, opUrl, postData) {
  815. return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
  816. },
  817. async confirmSubmit() {
  818. for (let i = 0; i < this.form.applyUseMoneyDetailListString.length; i++) {
  819. if (this.form.applyUseMoneyDetailListString[i].fileType == 1
  820. &&
  821. (!this.form.applyUseMoneyDetailListString[i].fileList
  822. ||
  823. this.form.applyUseMoneyDetailListString[i].fileList.length == 0)) {
  824. this.$message.warning(`请上传费用明细中第${i + 1}行的发票文件`)
  825. return
  826. }
  827. if (this.form.applyUseMoneyDetailListString[i].fileType == 1 && this.form.applyUseMoneyDetailListString[i].fileNumber.length == 0) {
  828. this.$message.warning(`请检查费用明细中第${i + 1}行,并输入发票号`)
  829. return
  830. }
  831. }
  832. this.$refs.elformData.validate(async(valid) => {
  833. if (valid) {
  834. let formData = { ...this.form }
  835. formData.applyUseMoneyDetailListString.forEach((e) => {
  836. if (e.fileList) {
  837. e.fileDataIds = e.fileList.map((e) => {
  838. return e.data
  839. }).join()
  840. }
  841. })
  842. let params = formData.applyUseMoneyDetailListString.map((e) => {
  843. return {
  844. fileType: e.fileType,
  845. fileDataIds: e.fileDataIds,
  846. feeMoney: e.feeMoney,
  847. feeType: e.feeType,
  848. fileNumber: e.fileNumber
  849. }
  850. })
  851. let submitData = { ...formData, applyUseMoneyDetailListString: JSON.stringify(params) }
  852. this.loading = true
  853. const { data } = await this.baseRequest1('ApplyUseMoneyController', 'addApplyUseMoney', submitData)
  854. this.loading = false
  855. if (data.code == 200) {
  856. this.form = { applyUseMoneyDetailListString: [{ fileType: 1, fileList: [] }] }
  857. this.dialogVisible = false
  858. this.$refs.elformData.clearValidate()
  859. this.$message.success('流程发起成功')
  860. this.$emit('getData')
  861. }
  862. }
  863. })
  864. },
  865. setVisible(status, data) {
  866. this.pan++
  867. this.dialogVisible = status
  868. if (this.form.applyUseMoneyDetailListString.length == 0) {
  869. this.form.applyUseMoneyDetailListString.push(
  870. {
  871. feeType: this.dc_data.BUDGET_FY[0].value,
  872. fileList: [],
  873. fileType: 1,
  874. feeMoney: 0,
  875. fileNumber: ''
  876. }
  877. )
  878. }
  879. },
  880. addListRow() {
  881. const _this = this
  882. _this.form.applyUseMoneyDetailListString.push(
  883. {
  884. feeType: this.dc_data.BUDGET_FY[0].value,
  885. fileList: [],
  886. fileType: 1,
  887. feeMoney: 0,
  888. fileNumber: ''
  889. }
  890. )
  891. },
  892. deleteRow(index) {
  893. this.form.applyUseMoneyDetailListString.splice(index, 1)
  894. }
  895. }
  896. }
  897. </script>
  898. <style lang="scss">
  899. #containerCost {
  900. width: 100%;
  901. height: 600px;
  902. background: #F5F5F5;
  903. }
  904. .cclist {
  905. .col-input {
  906. padding: 0;
  907. }
  908. }
  909. .mb25 {
  910. margin-bottom: 25px;
  911. }
  912. .pdtopbottom16 {
  913. padding: 0px 16px;
  914. }
  915. .pdtop16px {
  916. padding-top: 16px;
  917. }
  918. .cost_form {
  919. .col-input {
  920. font-weight: 400;
  921. }
  922. .el-form-item__label .moneydetails {
  923. text-align: right;
  924. font-size: 16px;
  925. font-family: 微软雅黑;
  926. padding-right: 10px;
  927. line-height: 40px;
  928. word-break: keep-all;
  929. white-space: nowrap;
  930. color: #606266;
  931. text-rendering: optimizeLegibility;
  932. font-weight: 400;
  933. }
  934. .moneydetails {
  935. text-align: right;
  936. font-size: 16px;
  937. font-family: 微软雅黑;
  938. padding-right: 10px;
  939. word-break: keep-all;
  940. white-space: nowrap;
  941. color: #606266;
  942. text-rendering: optimizeLegibility;
  943. font-weight: 400;
  944. }
  945. .moneydetails:before {
  946. content: "*";
  947. color: #ff4949;
  948. }
  949. }
  950. .txtc {
  951. text-align: center
  952. }
  953. .ml5 {
  954. margin-left: 5px;
  955. }
  956. .eltype {
  957. margin-bottom: 5px;
  958. }
  959. .tabsdom {
  960. .el-tabs__header {
  961. text-align: center !important;
  962. width: 139px !important;
  963. text-align: center !important;
  964. display: block !important;
  965. margin: auto !important;
  966. margin-bottom: 15px !important;
  967. }
  968. .el-tabs__nav-wrap::after {
  969. display: none;
  970. }
  971. .el-upload {
  972. width: 100%;
  973. }
  974. }
  975. .feeMoneyTotal {
  976. width: 100%;
  977. height: 14px;
  978. font-size: 14px;
  979. font-weight: 400;
  980. color: #1890FF;
  981. margin-top: 31px;
  982. margin-bottom: 13px;
  983. }
  984. </style>