detailsPage.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <template>
  2. <div>
  3. <div class="customer-head">
  4. <div class="customer-back">
  5. <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
  6. @click="goBack(0)">返回列表
  7. </el-button>
  8. </div>
  9. <div class="add-customer-btn">
  10. <el-button v-if="editButton" class="el-button--small-yh" style="margin-left: 6px;" type="primary"
  11. size="small" @click="inEdit">编 辑
  12. </el-button>
  13. <el-button v-if="!editButton" class="el-button--small-yh" style="margin-left: 6px;" type="primary"
  14. size="small" @click="submit" :disabled="form.status == '已生成'">保 存
  15. </el-button>
  16. <el-button v-if="form.id && form.status == '录入'" class="el-button--small-yh" style="margin-left: 6px;"
  17. type="success" size="small" @click="confirm" :disabled="editButton">确认生成仓储费
  18. </el-button>
  19. <el-button v-if="form.id && form.status == '已生成'" class="el-button--small-yh" style="margin-left: 6px;"
  20. type="danger" size="small" @click="revokeConfirm" :disabled="editButton">撤销生成仓储费
  21. </el-button>
  22. </div>
  23. </div>
  24. <div style="margin-top: 50px">
  25. <trade-card title="基础信息">
  26. <avue-form :option="optionForm" v-model="form" ref="form">
  27. <template slot="warehouseName" slot-scope="{ row }">
  28. <dic-select v-model="form.warehouseName" placeholder="仓库" key="id" label="cname"
  29. url="/blade-los/storage/list" res="records" :filterable="true" :remote="true"
  30. dataName="cname" @selectChange="dicChange('warehouseName', $event)"
  31. :disabled="optionForm.disabled"></dic-select>
  32. </template>
  33. </avue-form>
  34. </trade-card>
  35. <trade-card title="仓储费明细">
  36. <avue-crud :option="option" :data="form.storageFeesItemsList" id="out-table" ref="crud"
  37. @resetColumn="resetColumn('crud', 'option', 'optionBack', 443)"
  38. @saveColumn="saveColumn('crud', 'option', 'optionBack', 443)">
  39. <template slot="menuLeft">
  40. <el-button type="primary" size="small" @click="addRow"
  41. :disabled="editButton || form.status == '已生成'||form.storageFeesItemsList.length>0">计算仓储费
  42. </el-button>
  43. </template>
  44. <template slot="menu" slot-scope="{ row, index }">
  45. <!-- <el-button size="small" icon="el-icon-edit" type="text"
  46. @click="inEdit(row)">{{ row.$cellEdit ?
  47. "保存" :
  48. "编辑" }}</el-button> -->
  49. <el-button size="small" icon="el-icon-delete" type="text" @click="rowDel(row, index)"
  50. :disabled="editButton || form.status == '已生成'">删除</el-button>
  51. </template>
  52. </avue-crud>
  53. </trade-card>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. import { submit, getDetail, itemRemove, calculateStorageFees, confirmSettlement, revokeSettlement } from "@/api/iosBasicData/storageFeeF";
  59. import dicSelect from "@/components/dicSelect/main";
  60. import { bfeesList } from "@/api/iosBasicData/bfees";
  61. import _ from "lodash";
  62. export default {
  63. name: "detailsPage",
  64. data() {
  65. return {
  66. editButton: false,
  67. form: {
  68. storageFeesItemsList: []
  69. },
  70. optionForm: {
  71. menuBtn: false,
  72. disabled: false,
  73. span: 8,
  74. column: [
  75. {
  76. label: "仓库",
  77. prop: "warehouseName",
  78. disabled: false,
  79. },
  80. // {
  81. // label: "计费规则",
  82. // prop: "billingRules",
  83. // type: "select",
  84. // dicData: [{
  85. // label: '净重',
  86. // value: '0'
  87. // }, {
  88. // label: '毛重',
  89. // value: '1'
  90. // }],
  91. // disabled: true,
  92. // },
  93. // {
  94. // label: "计费起始时间",
  95. // prop: "chargingStartDate",
  96. // type: "date",
  97. // format: "yyyy-MM-dd",
  98. // valueFormat: "yyyy-MM-dd 00:00:00",
  99. // disabled: false,
  100. // },
  101. {
  102. label: "计费结束时间",
  103. prop: "chargingEndDate",
  104. type: "date",
  105. format: "yyyy-MM-dd",
  106. valueFormat: "yyyy-MM-dd 00:00:00",
  107. disabled: false,
  108. },
  109. {
  110. label: "合计金额",
  111. prop: "amount",
  112. disabled: true,
  113. },
  114. {
  115. label: '备注',
  116. prop: "remarks",
  117. type: 'textarea',
  118. disabled: false,
  119. span: 24,
  120. minRows: 2,
  121. },
  122. ]
  123. },
  124. option: {},
  125. optionBack: {
  126. height: 'auto',
  127. calcHeight: 30,
  128. menuWidth: 120,
  129. border: true,
  130. index: true,
  131. addBtn: false,
  132. viewBtn: false,
  133. editBtn: false,
  134. delBtn: false,
  135. menu: true,
  136. refreshBtn: false,
  137. align: 'center',
  138. column: [
  139. {
  140. label: "合同号",
  141. prop: "contractNumber",
  142. // cell: true,
  143. overHidden: true
  144. },
  145. {
  146. label: "提单号",
  147. prop: "billNo",
  148. // cell: true,
  149. overHidden: true
  150. },
  151. {
  152. label: "入库日期",
  153. prop: "storageDate",
  154. type: "date",
  155. format: "yyyy-MM-dd",
  156. valueFormat: "yyyy-MM-dd 00:00:00",
  157. // cell: true,
  158. overHidden: true
  159. },
  160. {
  161. label: "剩余件数",
  162. prop: "surplusQuantity",
  163. // cell: true,
  164. overHidden: true
  165. },
  166. {
  167. label: "剩余净重",
  168. prop: "surplusNetWeight",
  169. // cell: true,
  170. overHidden: true
  171. },
  172. {
  173. label: "剩余毛重",
  174. prop: "surplusWeight",
  175. // cell: true,
  176. overHidden: true
  177. },
  178. {
  179. label: "金额",
  180. prop: "amount",
  181. type: 'number',
  182. controls: false,
  183. // cell: true,
  184. overHidden: true
  185. },
  186. {
  187. label: "计费起始时间",
  188. prop: "chargingStartDate",
  189. type: "date",
  190. format: "yyyy-MM-dd",
  191. valueFormat: "yyyy-MM-dd 00:00:00",
  192. // cell: true,
  193. overHidden: true
  194. },
  195. {
  196. label: "计费结束时间",
  197. prop: "chargingEndDate",
  198. type: "date",
  199. format: "yyyy-MM-dd",
  200. valueFormat: "yyyy-MM-dd 23:59:59",
  201. // cell: true,
  202. overHidden: true
  203. },
  204. {
  205. label: "备注",
  206. prop: "remarks",
  207. // cell: true,
  208. overHidden: true
  209. }
  210. ]
  211. },
  212. }
  213. },
  214. components: {
  215. dicSelect,
  216. },
  217. props: {
  218. detailData: Object
  219. },
  220. async created() {
  221. this.option = await this.getColumnData(this.getColumnName(443), this.optionBack);
  222. if (this.detailData.id) {
  223. this.editButton = true
  224. this.optionForm.disabled = true
  225. this.getDetails(this.detailData.id)
  226. }
  227. },
  228. methods: {
  229. addRow() {
  230. if (!this.form.warehouseId) return this.$message.error("请选择仓库!");
  231. if (!this.form.chargingEndDate) return this.$message.error("请选择计费时间!");
  232. let obj = {}
  233. obj = {
  234. warehouseId: this.form.warehouseId,
  235. warehouseName: this.form.warehouseName,
  236. chargingStartDate: this.form.chargingStartDate,
  237. chargingEndDate: this.form.chargingEndDate,
  238. }
  239. const loading = this.$loading({
  240. lock: true,
  241. text: '加载中',
  242. spinner: 'el-icon-loading',
  243. background: 'rgba(255,255,255,0.7)'
  244. });
  245. calculateStorageFees(obj).then(res => {
  246. this.form.storageFeesItemsList = res.data.data
  247. this.$refs.crud.dicInit();
  248. }).finally(() => {
  249. loading.close()
  250. })
  251. },
  252. // 编辑
  253. inEdit() {
  254. this.editButton = false
  255. if (this.form.status != '已生成') {
  256. this.optionForm.disabled = false
  257. }
  258. },
  259. dicChange(name, row) {
  260. if (name == 'warehouseName') {
  261. if (row) {
  262. this.form.warehouseId = row.id
  263. // this.form.billingRules=row.billingRules
  264. } else {
  265. this.form.billingRules=null
  266. // this.form.warehouseId = null
  267. }
  268. }
  269. },
  270. getDetails(id) {
  271. const loading = this.$loading({
  272. lock: true,
  273. text: '加载中',
  274. spinner: 'el-icon-loading',
  275. background: 'rgba(255,255,255,0.7)'
  276. });
  277. getDetail({ id: id }).then(res => {
  278. this.form = res.data.data
  279. this.$refs.crud.dicInit();
  280. }).finally(() => {
  281. loading.close()
  282. })
  283. },
  284. submit() {
  285. // for (let row of this.form.storageFeesItemsList) {
  286. // if (row.identifier == 1) {
  287. // if (!row.overpayment || row.overpaymentType == null) {
  288. // return this.$message.error("请完善明细信息");
  289. // }
  290. // }
  291. // }
  292. this.$refs["form"].validate((valid, done) => {
  293. done();
  294. if (valid) {
  295. const loading = this.$loading({
  296. lock: true,
  297. text: '加载中',
  298. spinner: 'el-icon-loading',
  299. background: 'rgba(255,255,255,0.7)'
  300. });
  301. submit(this.form).then(res => {
  302. this.$message.success("保存成功");
  303. this.getDetails(res.data.data.id)
  304. }).finally(() => {
  305. loading.close();
  306. })
  307. } else {
  308. return false;
  309. }
  310. });
  311. },
  312. confirm() {
  313. if (this.form.storageFeesItemsList.length == 0) return this.$message.success("明细没有数据");
  314. this.$confirm('是否确认生成仓储费?', '提示', {
  315. confirmButtonText: '确定',
  316. cancelButtonText: '取消',
  317. type: 'warning'
  318. }).then(() => {
  319. const loading = this.$loading({
  320. lock: true,
  321. text: '加载中',
  322. spinner: 'el-icon-loading',
  323. background: 'rgba(255,255,255,0.7)'
  324. });
  325. confirmSettlement(this.form).then(res => {
  326. this.$message.success("操作成功");
  327. this.getDetails(res.data.data.id)
  328. this.optionForm.disabled = true
  329. }).finally(() => {
  330. loading.close();
  331. })
  332. })
  333. },
  334. revokeConfirm() {
  335. this.$confirm('是否撤销生成仓储费?', '提示', {
  336. confirmButtonText: '确定',
  337. cancelButtonText: '取消',
  338. type: 'warning'
  339. }).then(() => {
  340. const loading = this.$loading({
  341. lock: true,
  342. text: '加载中',
  343. spinner: 'el-icon-loading',
  344. background: 'rgba(255,255,255,0.7)'
  345. });
  346. revokeSettlement(this.form).then(res => {
  347. this.$message.success("操作成功");
  348. this.getDetails(res.data.data.id)
  349. this.optionForm.disabled = false
  350. }).finally(() => {
  351. loading.close();
  352. })
  353. })
  354. },
  355. rowDel(row, index) {
  356. this.$confirm("确定将选择数据删除?", {
  357. confirmButtonText: "确定",
  358. cancelButtonText: "取消",
  359. type: "warning"
  360. }).then(() => {
  361. if (row.id) {
  362. itemRemove({ ids: row.id }).then(res => {
  363. this.form.storageFeesItemsList.splice(index, 1);
  364. this.$message.success("操作成功!");
  365. });
  366. } else {
  367. this.form.storageFeesItemsList.splice(index, 1);
  368. this.$message.success("操作成功!");
  369. }
  370. }
  371. );
  372. },
  373. //自定义列保存
  374. async saveColumn(ref, option, optionBack, code) {
  375. const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
  376. if (inSave) {
  377. this.$message.success("保存成功");
  378. //关闭窗口
  379. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  380. }
  381. },
  382. //自定义列重置
  383. async resetColumn(ref, option, optionBack, code) {
  384. this[option] = this[optionBack];
  385. const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
  386. if (inSave) {
  387. this.$message.success("重置成功");
  388. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  389. }
  390. },
  391. goBack(type) {
  392. this.$emit("goBack", type);
  393. this.$emit('updateKey')
  394. },
  395. }
  396. }
  397. </script>
  398. <style lang="scss" scoped>
  399. ::v-deep .el-form-item {
  400. margin-bottom: 8px !important;
  401. }
  402. ::v-deep .el-table .cell {
  403. padding: 0 2px !important;
  404. .el-form-item {
  405. margin-bottom: 0px !important;
  406. }
  407. }
  408. ::v-deep .avue-crud .el-table .el-form-item__label {
  409. left: -1px;
  410. }
  411. ::v-deep#out-table .back-one {
  412. background: #ecf5ff !important;
  413. }
  414. ::v-deep#out-table .back-two {
  415. background: #ecf5ff !important;
  416. }
  417. </style>