applyPay.vue 27 KB

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