cost-allocation-table.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. <template>
  2. <!--报表 成本分配表 (保存后数据到单证的成本分配汇总内)-->
  3. <div id="costAllocationTable">
  4. <a-card :bordered="false">
  5. <!-- 主表信息 点击搜索后 回显--->
  6. <div class="table-page-search-wrapper">
  7. <!-- ref="form" :model="costAllocationTable" -->
  8. <a-form-model layout="inline">
  9. <a-row :gutter="24">
  10. <a-col :md="6" :sm="8">
  11. <a-form-model-item label="计划单号" prop="plannum">
  12. <a-input-search
  13. placeholder="请输入计划单号"
  14. enter-button
  15. v-model="detailsPlanNum.planNum"
  16. @search="onSearch"
  17. :loading="this.loading"
  18. />
  19. </a-form-model-item>
  20. </a-col>
  21. <!-- 回显以下【备注】需要输入,后进行保存 disabled -->
  22. <a-col :md="6" :sm="8">
  23. <a-form-model-item label="产品款号" prop="poStyleNum">
  24. {{ detailsPlanNum.poStyleNum }}
  25. </a-form-model-item>
  26. </a-col>
  27. <a-col :md="6" :sm="8">
  28. <a-form-model-item label="外销员" prop="exportSales">
  29. {{ detailsPlanNum.exportSales }}
  30. </a-form-model-item>
  31. </a-col>
  32. <a-col :md="6" :sm="8">
  33. <a-form-model-item label="成衣合同号" prop="garmentContractno">
  34. {{ detailsPlanNum.garmentContractno }}
  35. </a-form-model-item>
  36. </a-col>
  37. <a-col :md="6" :sm="8">
  38. <a-form-model-item label="部门" prop="department">
  39. {{ detailsPlanNum.department }}
  40. </a-form-model-item>
  41. </a-col>
  42. <a-col :md="6" :sm="8">
  43. <a-form-model-item label="客户简称" prop="customerShortame">
  44. {{ detailsPlanNum.customerShortame }}
  45. </a-form-model-item>
  46. </a-col>
  47. <a-col :md="6" :sm="8">
  48. <a-form-model-item label="加工单位" prop="processUnit">
  49. <span :title=" detailsPlanNum.processUnit">{{ detailsPlanNum.processUnit | ellipsis}}</span>
  50. <!-- {{ detailsPlanNum.processUnit }} -->
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :md="6" :sm="8">
  54. <a-form-model-item label="出运日期" prop="outdata">
  55. {{ detailsPlanNum.outdata }}
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :md="6" :sm="8">
  59. <a-form-model-item label="计划数量" prop="planQuantity">
  60. {{ detailsPlanNum.planQuantity }}
  61. </a-form-model-item>
  62. </a-col>
  63. <a-col :md="6" :sm="8">
  64. <a-form-model-item label="美元外销总价" prop="usdTotalexportprice">
  65. {{ detailsPlanNum.usdTotalexportprice }}
  66. </a-form-model-item>
  67. </a-col>
  68. <a-col :md="6" :sm="8">
  69. <a-form-model-item label="人民币费用支出" prop="rmbExpense">
  70. <a href="javascript:void(0)" @click="mainTableExpenseCNY()">{{ detailsPlanNum.rmbExpense }}</a>
  71. </a-form-model-item>
  72. </a-col>
  73. <a-col :md="6" :sm="8">
  74. <a-form-model-item label="税率%" prop="taxrate">
  75. {{ detailsPlanNum.taxrate }}
  76. </a-form-model-item>
  77. </a-col>
  78. <a-col :md="6" :sm="8">
  79. <a-form-model-item label="实际出货数量" prop="actualShipquantity">
  80. {{ detailsPlanNum.actualShipquantity }}
  81. </a-form-model-item>
  82. </a-col>
  83. <a-col :md="6" :sm="8">
  84. <a-form-model-item label="人民币外销金额" prop="rmbExportamount">
  85. {{ detailsPlanNum.rmbExportamount }}
  86. </a-form-model-item>
  87. </a-col>
  88. <a-col :md="6" :sm="8">
  89. <a-form-model-item label="美元费用支出" prop="usdExpense">
  90. <a href="javascript:void(0)" @click="mainTableExpenseUSD()">{{ detailsPlanNum.usdExpense }}</a>
  91. </a-form-model-item>
  92. </a-col>
  93. <a-col :md="6" :sm="8">
  94. <a-form-model-item label="加工费" prop="rmbProcesscost">
  95. {{ detailsPlanNum.rmbProcesscost }}
  96. </a-form-model-item>
  97. </a-col>
  98. <a-col :md="6" :sm="8">
  99. <a-form-model-item label="短出数" prop="shortseveral">
  100. {{ detailsPlanNum.shortseveral }}
  101. </a-form-model-item>
  102. </a-col>
  103. <a-col :md="6" :sm="8">
  104. <a-form-model-item label="短出货值" prop="shortvalue">
  105. {{ detailsPlanNum.shortvalue }}
  106. </a-form-model-item>
  107. </a-col>
  108. <a-col :md="6" :sm="8">
  109. <a-form-model-item label="短出面料成本" prop="fabricshortcost">
  110. {{ detailsPlanNum.fabricshortcost }}
  111. </a-form-model-item>
  112. </a-col>
  113. <a-col :md="6" :sm="8">
  114. <a-form-model-item label="事故单美金金额" prop="accidentUsdamount">
  115. {{ detailsPlanNum.accidentUsdamount }}
  116. </a-form-model-item>
  117. </a-col>
  118. <a-col :md="6" :sm="8">
  119. <a-form-model-item label="面料含税成本" prop="fabriccostIncludestax">
  120. {{ detailsPlanNum.fabriccostIncludestax }}
  121. </a-form-model-item>
  122. </a-col>
  123. <a-col :md="6" :sm="8">
  124. <a-form-model-item label="辅料含税成本" prop="excipiencostIncludestax">
  125. {{ detailsPlanNum.excipiencostIncludestax }}
  126. </a-form-model-item>
  127. </a-col>
  128. <a-col :md="6" :sm="8">
  129. <a-form-model-item label="销售订单本币总额" prop="salesordersLocaltotal">
  130. {{ detailsPlanNum.salesordersLocaltotal }}
  131. </a-form-model-item>
  132. </a-col>
  133. <a-col :md="6" :sm="8">
  134. <a-form-model-item label="事故单人民币金额" prop="accidentcnyAmount">
  135. {{ detailsPlanNum.accidentcnyAmount }}
  136. </a-form-model-item>
  137. </a-col>
  138. <a-col :md="6" :sm="8">
  139. <a-form-model-item label="面料不含税成本" prop="fabriccostNotincludestax">
  140. {{ detailsPlanNum.fabriccostNotincludestax }}
  141. </a-form-model-item>
  142. </a-col>
  143. <a-col :md="6" :sm="8">
  144. <a-form-model-item label="辅料不含税成本" prop="excipiencostNotincludestax">
  145. {{ detailsPlanNum.excipiencostNotincludestax }}
  146. </a-form-model-item>
  147. </a-col>
  148. <a-col :md="6" :sm="8">
  149. <a-form-model-item label="销售订单原币总额" prop="salesrrdersOriginaltotal">
  150. {{ detailsPlanNum.salesrrdersOriginaltotal }}
  151. </a-form-model-item>
  152. </a-col>
  153. <a-col :md="6" :sm="8">
  154. <a-form-model-item label="制单人" prop="preparedBy">
  155. {{ detailsPlanNum.preparedBy }}
  156. </a-form-model-item>
  157. </a-col>
  158. <a-col :md="6" :sm="8">
  159. <h4 style="color:red;">
  160. 标记
  161. <span>(计算结果是负值时,该标记是红色)</span>
  162. </h4>
  163. </a-col>
  164. </a-row>
  165. </a-form-model>
  166. </div>
  167. </a-card>
  168. <!--tabs 组件引入 -->
  169. <a-card :bordered="false" style=" marginTop:10px;">
  170. <div><tabs ref="unitTabs" /></div>
  171. </a-card>
  172. <!-- 事故单 -->
  173. <a-card :bordered="true" style="margin:10px 0">
  174. <div style="margin:60px 0 40px 0">
  175. <h6 class="table-title">事故单</h6>
  176. <a-table
  177. rowKey="id"
  178. :loading="loading"
  179. :columns="accidentListColumns"
  180. :data-source="accidentListData"
  181. bordered
  182. :pagination="false"
  183. :scroll="{ y: 300 }"
  184. >
  185. <!-- 事故单 -->
  186. <span slot="accidentNum" slot-scope="text">
  187. <a>{{ text }}</a>
  188. </span>
  189. </a-table>
  190. </div>
  191. <!-- 费用支出 -->
  192. <div>
  193. <h6 class="table-title">费用支出</h6>
  194. <a-table
  195. rowKey="id"
  196. :loading="loading"
  197. :columns="costPayColumns"
  198. :data-source="costPayData"
  199. bordered
  200. :pagination="false"
  201. >
  202. </a-table>
  203. </div>
  204. <!-- 备注信息 根据角色权限控制【填写】、【查看】-->
  205. <div class="note-one" style="marginTop:40px;">
  206. <h6 class="table-title">备注</h6>
  207. <div class="noteDetail">
  208. <a-form-model ref="form" :model="detailsPlanNum">
  209. <a-form-model-item prop="remarks">
  210. <a-input
  211. type="textarea"
  212. v-model="detailsPlanNum.remarks"
  213. placeholder="请输入备注"
  214. style="minHeight:100px;"
  215. />
  216. </a-form-model-item>
  217. </a-form-model>
  218. </div>
  219. </div>
  220. <!-- 页面底部保存 -->
  221. <a-row :gutter="24" style="marginTop:40px;float:right">
  222. <a-col :md="12" :sm="12">
  223. <a-button type="primary" @click="save" :disabled="isDisabled">
  224. 保存
  225. </a-button>
  226. </a-col>
  227. </a-row>
  228. </a-card>
  229. <!-- 弹框 -->
  230. <div>
  231. <!-- 主表 人民币费用支出 弹框 -->
  232. <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
  233. <!-- 主表 美元费用支出 弹框 -->
  234. <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
  235. <!-- 事故单 -->
  236. <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
  237. </div>
  238. </div>
  239. </template>
  240. <script>
  241. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  242. import JEllipsis from '@/components/jeecg/JEllipsis'
  243. import moment from 'moment'
  244. // 原始文件(应该跟单证内弹框一样,尝试公用,成功后可删除以下注释)
  245. // import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
  246. // import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'
  247. // import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单
  248. // import tabs from '@views/cost-allocation-total/tabs.vue' // tabs组件
  249. import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件
  250. import mainTableExpenseCNYModal from '@views/cost-allocation-total/modal/mainTableExpenseCNYModal.vue'
  251. import mainTableExpenseUSDModal from '@views/cost-allocation-total/modal/mainTableExpenseUSDModal.vue'
  252. import accidentListModal from '@views/cost-allocation-total/modal/accidentListModal.vue' // 事故单
  253. import { seachPlanNum, addHalfInfo } from '@api/document/cost-allocation-total.js'
  254. export default {
  255. name: 'CostAllocationTable', // 成本分配 (新增)
  256. mixins: [JeecgListMixin],
  257. components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },
  258. data() {
  259. return {
  260. key: '', //客户输入的订单号
  261. loading: false, // 表格加载
  262. detailsPlanNum: {
  263. planNum: ''
  264. }, // 详情所有数据
  265. remarks: '', // 备注
  266. // 事故单 表头
  267. accidentListColumns: [
  268. {
  269. title: '单号',
  270. width: 120,
  271. dataIndex: 'accidentNum',
  272. className: 'replacecolor',
  273. customCell: this.accidentListCustomCell,
  274. scopedSlots: { customRender: 'accidentNum' }
  275. },
  276. { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
  277. { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
  278. ],
  279. accidentListData: [],
  280. // 费用支出 表头
  281. costPayColumns: [
  282. { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
  283. { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
  284. { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
  285. { title: ' 支出本币金额', dataIndex: 'disbursedLocalmoney', width: 120, className: 'replacecolor' },
  286. { title: '支出原币金额', dataIndex: 'disbursedOriginalmoney', width: 120, className: 'replacecolor' },
  287. { title: '发票号', dataIndex: 'invoicenum', width: 120, className: 'replacecolor' },
  288. { title: '制单人', dataIndex: 'preparedBy', width: 120, className: 'replacecolor' }
  289. ],
  290. costPayData: [],
  291. isDisabled: false, //按钮禁止
  292. billstatus: '' // 单据状态
  293. // dateFormat: 'YYYY-MM-DD',
  294. }
  295. },
  296. created() {},
  297. filters: {
  298. //文字数超出时,超出部分使用...
  299. ellipsis(value) {
  300. if (!value) return ''
  301. if (value.length > 20) {
  302. return value.slice(0, 20) + '...'
  303. }
  304. return value
  305. }
  306. },
  307. methods: {
  308. // 【计划单号】 搜索
  309. onSearch() {
  310. this.$nextTick(() => {
  311. // TODO:接口完善后,type 应改为 add(暂时为了回显数据)
  312. this.loading = true
  313. seachPlanNum({ plannum: this.detailsPlanNum.planNum, type: 'query' }).then(res => {
  314. if (res.success) {
  315. this.loading = false
  316. this.detailsPlanNum = res.result //所有详情
  317. this.accidentListData = res.result.syCostAllocationAccidentList //事故单
  318. this.costPayData = res.result.syCostAllocationCostpayList //支出费用
  319. var num = 0
  320. this.costPayData.map(item =>{
  321. item.id = num + 1
  322. num += 1
  323. })
  324. // tabs 名称集合
  325. this.$refs.unitTabs.tabNameList = res.result.processUnit.split(',')
  326. //所有tabs数据
  327. this.$refs.unitTabs.tabsAllData = res.result.processUnitList
  328. // 页面打开加载的数据
  329. var oneData = this.$refs.unitTabs.tabsAllData[0]
  330. this.$refs.unitTabs.fabData = oneData.syCostAllocationFabricList
  331. this.$refs.unitTabs.ingData = oneData.syCostAllocationIngredientList
  332. this.$refs.unitTabs.shipData = oneData.syCostAllocationShipdetail
  333. this.pagination = {
  334. total: res.result.total,
  335. current: res.result.current,
  336. pageSize: res.result.size
  337. }
  338. }else {
  339. THIS.loading = false
  340. this.$message.error(res.message);
  341. }
  342. })
  343. })
  344. },
  345. // 页面 保存
  346. save() {
  347. console.log('点击保存')
  348. this.isDisabled = true
  349. setTimeout(() => {
  350. let that = this
  351. that.isDisabled = false
  352. }, 3000)
  353. if (this.detailsPlanNum.remarks) {
  354. // 保存 部分信息
  355. var halfInfo = {}
  356. halfInfo.planNum = this.detailsPlanNum.planNum
  357. halfInfo.remarks = this.detailsPlanNum.remarks
  358. halfInfo.billstatus = '1'
  359. console.log(halfInfo.planNum, halfInfo.remarks, halfInfo.billstatus)
  360. // addHalfInfo(halfInfo).then(res => {
  361. // if (res.success) {
  362. // console.log('保存的部分信息', halfInfo)
  363. // this.$message.success('保存成功')
  364. // halfInfo = {}
  365. // }
  366. // })
  367. } else {
  368. this.$message.error('订单号不能为空')
  369. }
  370. },
  371. // 主表:人民币费用支出 弹框
  372. mainTableExpenseCNY() {
  373. console.log('点击:主表人民币费用支出')
  374. this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
  375. },
  376. // 主表:美元费用支出 弹框
  377. mainTableExpenseUSD() {
  378. console.log('点击:主表美元费用支出')
  379. this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
  380. },
  381. // 事故单 单号 弹框
  382. accidentListCustomCell(record) {
  383. return {
  384. on: {
  385. click: event => {
  386. console.log('this:', this)
  387. // 调用【面料损耗表】中的【事故单】弹框
  388. this.$refs.accidentListModal.accidentListModVis = true
  389. }
  390. }
  391. }
  392. },
  393. // father 方法
  394. aa() {},
  395. bb() {},
  396. cc() {}
  397. },
  398. computed: {},
  399. mounted() {}
  400. }
  401. </script>
  402. <style lang="less" scoped>
  403. @import '~@assets/less/common.less';
  404. @import '~@assets/less/overwriter.less';
  405. /deep/ .ant-table-thead > tr > th {
  406. text-align: center;
  407. // font-weight: 700;
  408. }
  409. /deep/ .ant-table-tbody {
  410. text-align: center;
  411. }
  412. // /deep/ th.replacecolor {
  413. // background-color: #ccc;
  414. // }
  415. // 抽屉里的card样式
  416. // /deep/ .ant-drawer-content {
  417. // background-color: #f0f2f5;
  418. // }
  419. // /deep/ .ant-drawer-body {
  420. // padding: 10px;
  421. // }
  422. </style>