OpCustomers.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881
  1. <template>
  2. <div class="car_add">
  3. <div>
  4. <div class="communal-title">
  5. <div>{{ title }}</div>
  6. </div>
  7. </div>
  8. <hr style='background-color:#5555; height:1px; border:none;' />
  9. <div>
  10. <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
  11. <div style="display: flex;">
  12. <div style="width: 25%;">
  13. <el-form-item label="团组名称:" label-width="160px">
  14. <el-select v-model="OpCustomersData.diId" clearable filterable placeholder="团组选择"
  15. :disabled="isShow" style="width: 220px;" @change="DiIdSelectChange">
  16. <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
  17. :value="item.id">
  18. </el-option>
  19. </el-select>
  20. </el-form-item>
  21. </div>
  22. <div style="width: 25%;">
  23. <el-form-item label="团 号:" prop="tourCode" label-width="160px">
  24. <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
  25. </el-input>
  26. </el-form-item>
  27. </div>
  28. <div style="width: 25%;">
  29. <el-form-item label="客户:" prop="clientName" label-width="160px">
  30. <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
  31. </el-input>
  32. </el-form-item>
  33. </div>
  34. <div style="width: 25%;">
  35. <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
  36. <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
  37. </el-input>
  38. </el-form-item>
  39. </div>
  40. </div>
  41. <div style="display: flex;">
  42. <div style="width: 25%;">
  43. <el-form-item label="出访时间:" label-width="160px">
  44. <el-input placeholder="出访时间" v-model="VisitDate" :disabled="true">
  45. </el-input>
  46. </el-form-item>
  47. </div>
  48. <div style="width: 25%;">
  49. <el-form-item label="出访人数:" label-width="160px">
  50. <el-input placeholder="出访人数" v-model="delegationInfo.visitPNumber" :disabled="true">
  51. </el-input>
  52. </el-form-item>
  53. </div>
  54. <div style="width: 25%;">
  55. <el-form-item label="出访天数:" label-width="160px">
  56. <el-input placeholder="出访天数" v-model="delegationInfo.visitDays" :disabled="true">
  57. </el-input>
  58. </el-form-item>
  59. </div>
  60. </div>
  61. </el-form>
  62. <el-form :model="OpCustomersData" ref="OpCustomersData" :rules="OpCustomersDataRules" label-width="100px"
  63. class="demo-ruleForm">
  64. <div style="display: flex;">
  65. <div style="width: 25%;">
  66. <el-form-item label="保险名称:" prop="iid" label-width="160px">
  67. <el-select v-model="OpCustomersData.iid" filterable placeholder="保险名称" @change="iidChane">
  68. <el-option v-for="item in insuranceCostList" :key="item.id" :label="item.gName"
  69. :value="item.id">
  70. </el-option>
  71. </el-select>
  72. </el-form-item>
  73. </div>
  74. <div style="width: 25%;">
  75. <el-form-item label="保险余额:" label-width="160px">
  76. <el-input placeholder="保险余额" v-model="Balance" :disabled="true">
  77. </el-input>
  78. </el-form-item>
  79. </div>
  80. <div style="width: 25%;">
  81. <el-form-item label="客户名称:" prop="clientName" label-width="160px">
  82. <el-input placeholder="客户名称" v-model="OpCustomersData.clientName">
  83. </el-input>
  84. </el-form-item>
  85. </div>
  86. <div style="width: 25%;">
  87. <el-form-item label="保险费用:" prop="insuranceCosts" label-width="160px">
  88. <el-input placeholder="保险费用" v-model="OpCustomersData.insuranceCosts" style="width: 50%;">
  89. </el-input>
  90. <el-select v-model="OpCustomersData.currency" filterable placeholder="币种" style="width: 40%;">
  91. <el-option v-for="item in currencyList" :key="item.currencyId" :label="item.currencyCode"
  92. :value="item.currencyId">
  93. </el-option>
  94. </el-select>
  95. </el-form-item>
  96. </div>
  97. </div>
  98. <div style="display: flex;">
  99. <div style="width: 25%;">
  100. <el-form-item label="附件" prop="attachment" label-width="160px">
  101. <el-upload :file-list="uploadFiles" ref="upload" :on-success="upLoadSuccess"
  102. style="width: 200px;" :before-remove="beforeRemove" :limit="1" :on-exceed="exceed"
  103. :action="uploadURL" :headers="headers" :auto-upload="false" :on-change="onChange">
  104. <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  105. <!-- <el-button style="margin-left: 10px;" size="small" type="success"
  106. @click="submitUpload">上传到服务器</el-button> -->
  107. </el-upload>
  108. </el-form-item>
  109. </div>
  110. </div>
  111. <div style="display: flex;">
  112. <div style="width: 81%;">
  113. <el-form-item label="备 注:" prop="Remark" label-width="160px">
  114. <el-input type="textarea" :rows="5" placeholder="备注"
  115. v-model="OpCustomersData.remark"></el-input>
  116. </el-form-item>
  117. </div>
  118. </div>
  119. <hr style='background-color:#5555; height:1px; border:none;margin-top: 10px;' />
  120. <div style="display: flex;">
  121. <div style="width: 25%;">
  122. <el-form-item label="支付方式:" prop="payDId" label-width="160px">
  123. <el-select v-model="OpCustomersData.payDId" placeholder="支付方式" style="width: 100%;"
  124. @change="payChange">
  125. <el-option v-for="item in payment" :key="item.id" :label="item.name" :value="item.id">
  126. </el-option>
  127. </el-select>
  128. </el-form-item>
  129. </div>
  130. <div style="width: 25%;">
  131. <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
  132. <el-input placeholder="消费方式" v-model="OpCustomersData.consumptionPatterns">
  133. </el-input>
  134. </el-form-item>
  135. </div>
  136. <div style="width: 25%;">
  137. <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
  138. <el-date-picker v-model="OpCustomersData.consumptionDate" placeholder="消费日期" type="date">
  139. </el-date-picker>
  140. </el-form-item>
  141. </div>
  142. <div style="width: 25%;">
  143. <el-form-item label="付款金额:" prop="payMoney" label-width="160px">
  144. <el-input placeholder="付款金额" v-model="OpCustomersData.insuranceCosts" style="width: 52%;"
  145. :disabled="true">
  146. </el-input>
  147. <el-select v-model="OpCustomersData.currency" style="width: 45%;" :disabled="true">
  148. <el-option v-for="item in currencyList" :key="item.currencyId" :label="item.currencyCode"
  149. :value="item.currencyId">
  150. </el-option>
  151. </el-select>
  152. </el-form-item>
  153. </div>
  154. </div>
  155. <div v-if="OpCustomersData.payDId == 72">
  156. <div style="display: flex;">
  157. <div style="width: 25%;">
  158. <el-form-item label="卡类型:" prop="ctdId" label-width="160px">
  159. <el-select v-model="OpCustomersData.ctdId" placeholder="卡类型" style="width: 100%;"
  160. @change="ctdChange">
  161. <el-option v-for="item in bankCard" :key="item.id" :label="item.name" :value="item.id">
  162. </el-option>
  163. </el-select>
  164. </el-form-item>
  165. </div>
  166. <div style="width: 25%;">
  167. <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
  168. <el-input placeholder="银行卡号" v-model="OpCustomersData.bankNo" :disabled="true">
  169. </el-input>
  170. </el-form-item>
  171. </div>
  172. <div style="width: 25%;">
  173. <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
  174. <el-input placeholder="持卡人姓名" v-model="OpCustomersData.cardholderName" :disabled="true">
  175. </el-input>
  176. </el-form-item>
  177. </div>
  178. </div>
  179. </div>
  180. <div v-else-if="OpCustomersData.payDId == 73">
  181. <div style="display: flex;">
  182. <div style="width: 25%;">
  183. <el-form-item label="公司银行账号:" label-width="160px" prop="companyBankNo">
  184. <el-input placeholder="公司银行账号" v-model="OpCustomersData.companyBankNo">
  185. </el-input>
  186. </el-form-item>
  187. </div>
  188. <div style="width: 25%;">
  189. <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
  190. <el-input placeholder="对方开户行:" v-model="OpCustomersData.otherBankName">
  191. </el-input>
  192. </el-form-item>
  193. </div>
  194. <div style="width: 25%;">
  195. <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
  196. <el-input placeholder="对方银行卡号" v-model="OpCustomersData.otherSideNo">
  197. </el-input>
  198. </el-form-item>
  199. </div>
  200. <div style="width: 25%;">
  201. <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
  202. <el-input placeholder="对方姓名" v-model="OpCustomersData.otherSideName">
  203. </el-input>
  204. </el-form-item>
  205. </div>
  206. </div>
  207. </div>
  208. <div v-else-if="OpCustomersData.payDId == 83">
  209. <div style="display: flex;">
  210. <div style="width: 25%;">
  211. <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
  212. <el-input placeholder="对方开户行" v-model="OpCustomersData.otherBankName">
  213. </el-input>
  214. </el-form-item>
  215. </div>
  216. <div style="width: 25%;">
  217. <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
  218. <el-input placeholder="对方银行卡号" v-model="OpCustomersData.otherSideNo">
  219. </el-input>
  220. </el-form-item>
  221. </div>
  222. <div style="width: 25%;">
  223. <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
  224. <el-input placeholder="对方姓名" v-model="OpCustomersData.otherSideName">
  225. </el-input>
  226. </el-form-item>
  227. </div>
  228. </div>
  229. </div>
  230. <div v-else></div>
  231. <div style="display:flex;">
  232. <div style="width: 25%;">
  233. <el-form-item label="收款方:" prop="payee" label-width="160px">
  234. <el-input placeholder="对方姓名:" v-model="OpCustomersData.payee">
  235. </el-input>
  236. </el-form-item>
  237. </div>
  238. <div style="width: 25%;">
  239. <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
  240. <el-select v-model="OpCustomersData.orbitalPrivateTransfer" placeholder="费用标识"
  241. style="width: 100%;">
  242. <el-option key="0" label="公转" :value=0>
  243. </el-option>
  244. <el-option key="1" label="私转" :value=1>
  245. </el-option>
  246. </el-select>
  247. </el-form-item>
  248. </div>
  249. </div>
  250. <div style="display: flex;">
  251. <div style="width: 100%;">
  252. <el-form-item label="备 注:" prop="Remark" label-width="160px">
  253. <el-input type="textarea" :rows="5" placeholder="备注"
  254. v-model="OpCustomersData.cRemark"></el-input>
  255. </el-form-item>
  256. </div>
  257. </div>
  258. <el-form-item>
  259. <div style="margin-left: 60%;">
  260. <el-button type="primary" @click="addBtn">保存</el-button>
  261. <el-button @click="EscAdd">取消</el-button>
  262. </div>
  263. </el-form-item>
  264. </el-form>
  265. </div>
  266. </div>
  267. </template>
  268. <script>
  269. import { dE } from '@fullcalendar/core/internal-common';
  270. export default {
  271. data() {
  272. return {
  273. title: "新增保险费用",
  274. token: '',
  275. userId: 0,
  276. id: '',
  277. isShow: false,
  278. uploadURL: "http://132.232.92.186:8888/api/Groups/UploadCus",
  279. headers: {
  280. Authorization: JSON.parse(localStorage.getItem('userinif')).token,
  281. },
  282. projectName: "",
  283. uploadFiles: [],//上传的文件列表
  284. DelfileName: "",
  285. delegationInfo: {},
  286. delegationInfoList: [],//团组下拉框
  287. insuranceCostList: [],//保险类型下拉框
  288. Balance: 0,//保险余额
  289. currencyList: [],//币种下拉框
  290. bankCard: [],//卡类型下拉框
  291. payment: [],//支付方式下拉框
  292. OpCustomersData: {
  293. status: 0,
  294. id: 0,
  295. diId: 0,
  296. iid: 2,
  297. clientName: '',
  298. insuranceCosts: 0,
  299. currency: '',
  300. attachment: '',
  301. createUserId: 0,
  302. remark: '',
  303. payDId: 72,
  304. consumptionPatterns: '',
  305. consumptionDate: '',
  306. ctdId: '',
  307. companyBankNo: '',
  308. otherBankName: '',
  309. otherSideNo: '',
  310. otherSideName: '',
  311. bankNo: '',
  312. cardholderName: '',
  313. payee: '',
  314. orbitalPrivateTransfer: 0,
  315. cRemark: '',
  316. },
  317. IsAuditGM: 0,
  318. VisitDate: '',
  319. passengerTypeSelect: [],
  320. dateFormat: function (value) {
  321. // 将value转换为Date对象
  322. var date = new Date(value);
  323. // 获取年、月、日
  324. var year = date.getFullYear();
  325. var month = date.getMonth() + 1;
  326. var day = date.getDate();
  327. // 将月份和日期转换为两位数的格式
  328. if (month < 10) {
  329. month = '0' + month;
  330. }
  331. if (day < 10) {
  332. day = '0' + day;
  333. }
  334. // 返回格式化后的日期字符串
  335. return year + '-' + month + '-' + day;
  336. },
  337. OpCustomersDataRules: {
  338. iid: [
  339. { required: true, message: '请选择保险名称', trigger: ['blur', 'change'] },
  340. ],
  341. clientName: [
  342. { required: true, message: '请输入客户名称', trigger: ['blur', 'change'] },
  343. ],
  344. insuranceCosts: [
  345. { required: true, message: '请输入费用金额', trigger: ['blur', 'change'] },
  346. { pattern: /^(([1-9]?\d{0,8}(\.\d{1,2})?)|999999999|999999999\.(0){1,2})$/, message: '请输入正确的金额(最多2位小数)' }
  347. ],
  348. currency: [
  349. { required: true, message: '请选择支付币种', trigger: ['blur', 'change'] },
  350. ],
  351. payDId: [
  352. { required: true, message: '请选择支付方式', trigger: ['blur', 'change'] },
  353. ],
  354. consumptionPatterns: [
  355. { required: true, message: '请输入消费方式', trigger: ['blur', 'change'] },
  356. ],
  357. consumptionDate: [
  358. { required: true, message: '请选择消费日期', trigger: ['blur', 'change'] },
  359. ],
  360. payee: [
  361. { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
  362. ],
  363. ctdId: [
  364. { required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },
  365. ],
  366. companyBankNo: [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },],
  367. otherBankName: [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },],
  368. otherSideNo: [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },],
  369. totherSideName: [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },],
  370. }
  371. }
  372. },
  373. methods: {
  374. //初始化下拉框
  375. initializeSelect() {
  376. //团组下拉框绑定
  377. var url = "/api/Groups/DecreasePaymentsSelect"
  378. var that = this
  379. this.$axios({
  380. method: 'post',
  381. url: url,
  382. headers: {
  383. Authorization: 'Bearer ' + this.token
  384. },
  385. data: {
  386. userId: that.userId,
  387. ctId: 82
  388. }
  389. }).then(function (res) {
  390. if (res.data.code == 200) {
  391. debugger
  392. that.delegationInfoList = res.data.data.groupName
  393. that.payment = res.data.data.payment
  394. for (let index = 0; index < that.delegationInfoList.length; index++) {
  395. if (that.delegationInfoList[index].id == that.OpCustomersData.diId) {
  396. that.delegationInfo = that.delegationInfoList[index];
  397. that.OpCustomersData.diId = that.delegationInfo.id
  398. that.VisitDate = that.dateFormat(that.delegationInfo.visitStartDate) + '至' + that.dateFormat(that.delegationInfo.visitEndDate);
  399. var url = "/api/Groups/CustomersInitialize"
  400. that.$axios({
  401. method: 'post',
  402. url: url,
  403. headers: {
  404. Authorization: 'Bearer ' + that.token
  405. },
  406. data: {
  407. portType: 1,
  408. diId: that.OpCustomersData.diId
  409. }
  410. }).then(function (res) {
  411. if (res.data.code == 200) {
  412. that.insuranceCostList = res.data.data.insuranceCost;//保险类型下拉框
  413. that.OpCustomersData.iid = that.insuranceCostList[0].id;
  414. that.Balance = that.insuranceCostList[0].balance;
  415. that.currencyList = res.data.data.currencyList;//币种下拉框
  416. if (that.currencyList.length != 0) {
  417. that.OpCustomersData.currency = that.currencyList[0].currencyId
  418. }
  419. that.bankCard = res.data.data.bankCard;//卡类型下拉框
  420. that.payment = res.data.data.payment;//支付方式下拉框
  421. }
  422. })
  423. break;
  424. }
  425. }
  426. }
  427. })
  428. },
  429. DiIdSelectChange() {
  430. var that = this;
  431. for (let index = 0; index < that.delegationInfoList.length; index++) {
  432. if (that.delegationInfoList[index].id == that.OpCustomersData.diId) {
  433. that.delegationInfo = that.delegationInfoList[index];
  434. that.VisitDate = that.dateFormat(that.delegationInfo.visitStartDate) + '至' + that.dateFormat(that.delegationInfo.visitEndDate);
  435. var url = "/api/Groups/CustomersInitialize"
  436. that.$axios({
  437. method: 'post',
  438. url: url,
  439. headers: {
  440. Authorization: 'Bearer ' + that.token
  441. },
  442. data: {
  443. portType: 1,
  444. diId: that.OpCustomersData.diId
  445. }
  446. }).then(function (res) {
  447. debugger
  448. if (res.data.code == 200) {
  449. that.insuranceCostList = res.data.data.insuranceCost;//保险类型下拉框
  450. that.OpCustomersData.iid = that.insuranceCostList[0].id;
  451. that.Balance = that.insuranceCostList[0].balance;
  452. that.currencyList = res.data.data.currencyList;//币种下拉框
  453. if (that.currencyList.length != 0) {
  454. debugger
  455. that.OpCustomersData.currency = that.currencyList[0].currencyId
  456. }
  457. that.bankCard = res.data.data.bankCard;//卡类型下拉框
  458. that.payment = res.data.data.payment;//支付方式下拉框
  459. }
  460. })
  461. break;
  462. }
  463. }
  464. that.$nextTick(() => {
  465. that.$refs.OpCustomersData.clearValidate();
  466. })
  467. },
  468. iidChane(row) {
  469. debugger
  470. for (let index = 0; index < this.insuranceCostList.length; index++) {
  471. if (this.insuranceCostList[index].id == row) {
  472. this.Balance = this.insuranceCostList[index].balance;
  473. break;
  474. }
  475. }
  476. },
  477. payChange() {
  478. this.OpCustomersData.ctdId = '';
  479. this.OpCustomersData.bankNo = '';
  480. this.OpCustomersData.cardholderName = '';
  481. this.OpCustomersData.companyBankNo = '';
  482. this.OpCustomersData.otherBankName = '';
  483. this.OpCustomersData.otherSideNo = '';
  484. this.OpCustomersData.otherSideName = '';
  485. this.OpCustomersData.cRemark = '';
  486. if (this.OpCustomersData.payDId == 73) {
  487. this.OpCustomersDataRules.companyBankNo = [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },]
  488. this.OpCustomersDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
  489. this.OpCustomersDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
  490. this.OpCustomersDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
  491. this.OpCustomersDataRules.ctdId = []
  492. } else if (this.OpCustomersData.payDId == 72) {
  493. this.OpCustomersDataRules.ctdId = [{ required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },]
  494. this.OpCustomersDataRules.companyBankNo = []
  495. this.OpCustomersDataRules.otherBankName = []
  496. this.OpCustomersDataRules.otherSideNo = []
  497. this.OpCustomersDataRules.otherSideName = []
  498. } else if (this.OpCustomersData.payDId == 83) {
  499. this.OpCustomersDataRules.companyBankNo = []
  500. this.OpCustomersDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
  501. this.OpCustomersDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
  502. this.OpCustomersDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
  503. this.OpCustomersDataRules.ctdId = []
  504. } else {
  505. this.OpCustomersDataRules.companyBankNo = []
  506. this.OpCustomersDataRules.otherBankName = []
  507. this.OpCustomersDataRules.otherSideNo = []
  508. this.OpCustomersDataRules.otherSideName = []
  509. this.OpCustomersDataRules.ctdId = []
  510. }
  511. this.$nextTick(() => {
  512. this.$refs.OpCustomersData.clearValidate();
  513. })
  514. },
  515. ctdChange(id) {
  516. this.OpCustomersData.cardholderName = 'Zhang Hailin';
  517. for (var i = 0; i < this.bankCard.length; i++) {
  518. if (this.bankCard[i].id == parseInt(id)) {
  519. this.OpCustomersData.bankNo = this.bankCard[i].remark
  520. }
  521. }
  522. },
  523. //根据Id获取单挑数据及C表数据
  524. QueryCustomersById() {
  525. var url = "/api/Groups/CustomersById"
  526. var that = this
  527. this.$axios({
  528. method: 'post',
  529. url: url,
  530. headers: {
  531. Authorization: 'Bearer ' + this.token
  532. },
  533. data: {
  534. id: that.OpCustomersData.id
  535. }
  536. }).then(function (res) {
  537. if (res.data.code == 200) {
  538. debugger
  539. var CreditCardPayment = res.data.data.creditCard;
  540. var Customers = res.data.data.customers;
  541. that.IsAuditGM = CreditCardPayment.isAuditGM;
  542. that.OpCustomersData.iid = Customers.iid
  543. for (let index = 0; index < that.insuranceCostList.length; index++) {
  544. if (that.insuranceCostList[index].id == that.OpCustomersData.iid) {
  545. that.Balance = that.insuranceCostList[index].balance;
  546. break;
  547. }
  548. }
  549. that.OpCustomersData.clientName = Customers.clientName
  550. that.OpCustomersData.insuranceCosts = Customers.insuranceCosts
  551. that.OpCustomersData.currency = Customers.currency
  552. that.OpCustomersData.attachment = Customers.attachment
  553. that.uploadFiles = []
  554. if (that.OpCustomersData.attachment != null && that.OpCustomersData.attachment != undefined && that.OpCustomersData.attachment != "") {
  555. that.uploadFiles.push({
  556. name: that.OpCustomersData.attachment,
  557. url: 'http://132.232.92.186:24/Office/GrpFile/保险费用文件上传/',
  558. })
  559. }
  560. that.OpCustomersData.remark = Customers.remark
  561. that.OpCustomersData.payDId = CreditCardPayment.payDId;
  562. that.OpCustomersData.consumptionPatterns = CreditCardPayment.consumptionPatterns;
  563. that.OpCustomersData.consumptionDate = CreditCardPayment.consumptionDate;
  564. that.OpCustomersData.ctdId = CreditCardPayment.ctdId;
  565. that.OpCustomersData.bankNo = CreditCardPayment.bankNo;
  566. that.OpCustomersData.cardholderName = CreditCardPayment.cardholderName;
  567. that.OpCustomersData.companyBankNo = CreditCardPayment.companyBankNo
  568. that.OpCustomersData.otherBankName = CreditCardPayment.otherBankName
  569. that.OpCustomersData.otherSideNo = CreditCardPayment.otherSideNo
  570. that.OpCustomersData.otherSideName = CreditCardPayment.otherSideName
  571. that.OpCustomersData.payee = CreditCardPayment.payee;
  572. that.OpCustomersData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer;
  573. that.OpCustomersData.cRemark = CreditCardPayment.remark;
  574. }
  575. })
  576. },
  577. addBtn() {
  578. if (this.IsAuditGM == 1) {
  579. this.$message.error('已通过审核,不可修改!');
  580. } else {
  581. if (this.OpCustomersData.diId == null && this.OpCustomersData.diId == undefined && this.OpCustomersData.diId == "") {
  582. this.$message.error("请选择团组名称");
  583. return;
  584. } else {
  585. const that = this;
  586. that.$refs.OpCustomersData.validate((valid) => {
  587. if (valid) {
  588. if (that.projectName != "" && that.projectName != null && that.projectName != undefined) {
  589. that.$refs.upload.submit();//上传文件到服务器
  590. } else {
  591. if (that.DelfileName != null && that.DelfileName != "" && that.DelfileName != undefined) {
  592. that.$axios({
  593. method: 'post',
  594. url: "/api/Groups/DelFileCus",
  595. headers: {
  596. Authorization: 'Bearer ' + that.token
  597. },
  598. data: {
  599. fileName: that.DelfileName,
  600. id: that.OpCustomersData.id
  601. }
  602. }).then(function (res) {
  603. })
  604. }
  605. debugger
  606. that.OpCustomersData.createUserId = that.userId;
  607. if (that.OpCustomersData.ctdId == '') {
  608. that.OpCustomersData.ctdId = 0
  609. }
  610. var url = "/api/Groups/OpCustomers"
  611. that.$axios({
  612. method: 'post',
  613. url: url,
  614. headers: {
  615. Authorization: 'Bearer ' + that.token
  616. },
  617. data: that.OpCustomersData
  618. }).then(function (res) {
  619. if (res.data.code == 200) {
  620. that.$message({
  621. message: res.data.msg,
  622. type: 'success'
  623. });
  624. that.loading = true;
  625. setTimeout(() => {
  626. that.$router.push({
  627. path: "/home/Customers",
  628. query: {
  629. diId: that.OpCustomersData.diId
  630. }
  631. })
  632. }, 3000);
  633. } else {
  634. that.$message.error(res.data.msg);
  635. }
  636. })
  637. }
  638. } else {
  639. this.$message.error('请完善信息在保存!');
  640. return false;
  641. }
  642. })
  643. }
  644. }
  645. },
  646. //上传
  647. // 文件超出限制
  648. exceed(files, fileList) {
  649. this.$message.warning(
  650. `当前限制选择 1个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length
  651. } 个文件,请取消要替换的文件`
  652. );
  653. },
  654. //文件上传成功时的钩子
  655. upLoadSuccess(response, file, fileList) {
  656. var that = this;
  657. if (response.code == 200) {
  658. if (that.DelfileName != null && that.DelfileName != "" && that.DelfileName != undefined) {
  659. that.$axios({
  660. method: 'post',
  661. url: "/api/Groups/DelFileCus",
  662. headers: {
  663. Authorization: 'Bearer ' + that.token
  664. },
  665. data: {
  666. fileName: that.DelfileName,
  667. id: that.id
  668. }
  669. }).then(function (res) {
  670. if (res.data.code == 200) {
  671. }
  672. })
  673. }
  674. //that.ctdId = that.ctdIdPay;
  675. that.OpCustomersData.createUserId = that.userId;
  676. that.OpCustomersData.attachment = that.projectName;
  677. if (that.OpCustomersData.ctdId == '') {
  678. that.OpCustomersData.ctdId = 0
  679. }
  680. var url = "/api/Groups/OpCustomers"
  681. that.$axios({
  682. method: 'post',
  683. url: url,
  684. headers: {
  685. Authorization: 'Bearer ' + that.token
  686. },
  687. data: that.OpCustomersData
  688. }).then(function (res) {
  689. if (res.data.code == 200) {
  690. that.$message({
  691. message: res.data.msg,
  692. type: 'success'
  693. });
  694. that.loading = true;
  695. setTimeout(() => {
  696. that.$router.push({
  697. path: "/home/Customers",
  698. query: {
  699. diId: that.OpCustomersData.diId
  700. }
  701. })
  702. }, 3000);
  703. } else {
  704. that.$message.error(res.data.msg);
  705. }
  706. })
  707. } else {
  708. if (that.DelfileName != null && that.DelfileName != "" && that.DelfileName != undefined) {
  709. that.$axios({
  710. method: 'post',
  711. url: "/api/Groups/DelFile",
  712. headers: {
  713. Authorization: 'Bearer ' + that.token
  714. },
  715. data: {
  716. fileName: that.DelfileName,
  717. id: that.OpCustomersData.id
  718. }
  719. }).then(function (res) {
  720. if (res.data.code == 200) {
  721. }
  722. })
  723. }
  724. that.OpCustomersData.createUserId = that.userId;
  725. if (that.OpCustomersData.ctdId == '') {
  726. that.OpCustomersData.ctdId = 0
  727. }
  728. var url = "/api/Groups/OpCustomers"
  729. that.$axios({
  730. method: 'post',
  731. url: url,
  732. headers: {
  733. Authorization: 'Bearer ' + that.token
  734. },
  735. data: that.OpCustomersData
  736. }).then(function (res) {
  737. if (res.data.code == 200) {
  738. that.$message({
  739. message: res.data.msg,
  740. type: 'success'
  741. });
  742. that.loading = true;
  743. setTimeout(() => {
  744. that.$router.push({
  745. path: "/home/Customers",
  746. query: {
  747. diId: that.OpCustomersData.diId
  748. }
  749. })
  750. }, 3000);
  751. } else {
  752. that.$message.error(res.data.msg);
  753. }
  754. })
  755. }
  756. },
  757. beforeRemove(file, fileList) {
  758. console.log(file.name)
  759. let id1 = this.uploadFiles.findIndex(item => {
  760. if (item.name == file.name) {
  761. return true
  762. }
  763. })
  764. this.uploadFiles.splice(id1, 1)
  765. this.projectName = ""
  766. this.DelfileName = file.name
  767. },
  768. onChange(file, fileList) {
  769. this.projectName = file.name
  770. },
  771. EscAdd() {
  772. this.$router.push({
  773. path: "/home/Customers",
  774. query: {
  775. diId: this.OpCustomersData.diId
  776. }
  777. })
  778. }
  779. },
  780. mounted() {
  781. this.token = JSON.parse(localStorage.getItem('userinif')).token;
  782. this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
  783. this.initializeSelect();
  784. this.OpCustomersData.diId = parseInt(this.$route.query.DiId)
  785. this.OpCustomersData.id = this.$route.query.id
  786. debugger
  787. if (this.OpCustomersData.id != null && this.OpCustomersData.id != undefined && this.OpCustomersData.id != 0) {
  788. this.QueryCustomersById();
  789. this.title = "修改保险费用";
  790. this.OpCustomersData.status = 2
  791. this.isShow = true
  792. } else {
  793. this.OpCustomersData.status = 1
  794. this.title = "新增保险费用"
  795. this.isShow = false
  796. }
  797. }
  798. }
  799. </script>
  800. <style>
  801. .communal-list {
  802. background-color: #fff;
  803. padding: 10px;
  804. box-shadow: 0 0 5px #0005;
  805. border-radius: 10px;
  806. }
  807. .car_add .communal-title {
  808. display: flex;
  809. font-size: 17px;
  810. font-weight: 600;
  811. color: #555;
  812. margin-bottom: 20px;
  813. justify-content: space-between;
  814. align-items: center;
  815. }
  816. .appraise-box {
  817. display: flex;
  818. flex-wrap: wrap;
  819. justify-content: space-between;
  820. margin: 50px 0;
  821. }
  822. .appraise-box>div {
  823. width: 30%;
  824. }
  825. .communal-box {
  826. display: flex;
  827. }
  828. .communal-box>button {
  829. margin-left: 10px;
  830. padding: 8px 20px;
  831. }
  832. .car_add {
  833. background-color: #fff;
  834. padding: 20px;
  835. box-shadow: 0 0 5px #0005;
  836. border-radius: 10px;
  837. }
  838. @media screen and (max-width: 1700px) {
  839. .appraise-box>div {
  840. width: 48%;
  841. }
  842. .appraise-box>div el-form-item__content {
  843. width: 260px !important;
  844. }
  845. }
  846. </style>