purchaseAmountModal.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <a-modal
  3. title="采购数量"
  4. v-model="purchaseAmountModVis"
  5. :confirmLoading="confirmLoading"
  6. width="86%"
  7. :footer="null"
  8. >
  9. <!-- tabel 加载 -->
  10. <a-spin :spinning="confirmLoading">
  11. <!-- 查询 -->
  12. <div class="table-page-search-wrapper">
  13. <a-form layout="inline" @keyup.enter.native="searchQuery">
  14. <a-row :gutter="24">
  15. <a-col :md="6" :sm="8">
  16. <a-form-item label="单据号">
  17. <a-input placeholder="请输入单据号" v-model="queryParam.ccode"></a-input>
  18. </a-form-item>
  19. </a-col>
  20. <a-col :md="6" :sm="8">
  21. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  22. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  23. <a-button type="primary" icon="download" @click="exportExcel" style="margin-left: 8px">导出</a-button>
  24. <JsonExcel
  25. :fetch="getExportDataList"
  26. :fields="exportFields"
  27. :header="exportTitle"
  28. name="采购数量.xls"
  29. style="display:none"
  30. >
  31. <!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
  32. <a-button type="primary" icon="download" ref="realExportExcel">导出</a-button>
  33. </JsonExcel>
  34. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  35. </span>
  36. </a-col>
  37. </a-row>
  38. </a-form>
  39. </div>
  40. <!-- table -->
  41. <div>
  42. <a-table
  43. :loading="loading"
  44. bordered
  45. :columns="purchaseAmountColumns"
  46. :data-source="purchaseAmountData"
  47. :pagination="false"
  48. :scroll="{ y: 500 }"
  49. :footer="showTotal"
  50. >
  51. </a-table>
  52. <!-- 导出 打印 返回 -->
  53. <a-row style="marginTop:20px;">
  54. <a-col :md="24" :sm="12">
  55. <span style="float: right;" class="table-operator">
  56. <a-button type="primary" @click="backFabricLossTable" icon="rollback">关闭</a-button>
  57. </span>
  58. </a-col>
  59. </a-row>
  60. </div>
  61. </a-spin>
  62. </a-modal>
  63. </template>
  64. <script>
  65. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  66. import JEllipsis from '@/components/jeecg/JEllipsis'
  67. import JsonExcel from 'vue-json-excel'
  68. export default {
  69. name: 'PurchaseAmountModal', // 采购数量 弹框
  70. mixins: [JeecgListMixin],
  71. components: { JEllipsis ,JsonExcel},
  72. data() {
  73. return {
  74. exportTitle:"采购数量",
  75. // 表头
  76. purchaseAmountColumns: [
  77. {
  78. title: '序号',
  79. width:80,
  80. customRender: (text, record, index) => {
  81. if (record.ccode == "合计")
  82. return "";
  83. else
  84. return index + 1;
  85. }
  86. },
  87. {
  88. title: '单据号',
  89. dataIndex: 'ccode',
  90. width: 120,
  91. key: '',
  92. className: 'replacecolor'
  93. },
  94. {
  95. title: '单据类型',
  96. dataIndex: 'cbusType',
  97. width: 120,
  98. key: '',
  99. className: 'replacecolor'
  100. },
  101. {
  102. title: '批号',
  103. dataIndex: 'cbatch',
  104. width: 120,
  105. key: '',
  106. className: 'replacecolor'
  107. },
  108. {
  109. title: '入库单数量',
  110. dataIndex: 'iquantity',
  111. width: 120,
  112. key: '',
  113. className: 'replacecolor'
  114. },
  115. {
  116. title: '含税单价',
  117. dataIndex: 'iprice',
  118. width: 120,
  119. key: '',
  120. className: 'replacecolor'
  121. },
  122. {
  123. title: '开票数',
  124. dataIndex: 'iquantityInvoice',
  125. width: 120,
  126. key: '',
  127. className: 'replacecolor'
  128. },
  129. {
  130. title: '未开票数',
  131. dataIndex: 'iquantityNInvoice',
  132. width: 120,
  133. key: '',
  134. className: 'replacecolor'
  135. },
  136. {
  137. title: '结算数量',
  138. dataIndex: 'iquantitySettle',
  139. width: 120,
  140. key: '',
  141. className: 'replacecolor'
  142. },
  143. {
  144. title: '未结算数量',
  145. dataIndex: 'iquantityNSettle',
  146. width: 120,
  147. key: '',
  148. className: 'replacecolor'
  149. }
  150. ],
  151. purchaseAmountData: [],
  152. allDataList:[],
  153. loading: false, // 表格加载
  154. // orderDataform: this.$form.createForm(this),
  155. confirmLoading: false,
  156. purchaseAmountModVis: false,
  157. // 查询条件
  158. queryParam: {
  159. yarnNum: '', // 纱批
  160. purchasePrice: '' // 采购单价
  161. }
  162. }
  163. },
  164. // 接收父组件 方法
  165. props: {
  166. father: {
  167. type: Function,
  168. default: null
  169. }
  170. },
  171. computed: {
  172. // 合计展示
  173. totalDataSource(){
  174. // 开票成本-衬衣 合计
  175. var item = {
  176. "ccode":"合计"
  177. };
  178. var iquantity = 0,iquantityInvoice=0,iquantityNInvoice=0,iquantitySettle=0,iquantityNSettle=0;
  179. for (let row of this.purchaseAmountData){
  180. iquantity += row.iquantity*1;
  181. iquantityInvoice += row.iquantityInvoice*1;
  182. iquantityNInvoice += row.iquantityNInvoice*1;
  183. iquantitySettle += row.iquantitySettle*1;
  184. iquantityNSettle += row.iquantityNSettle*1;
  185. }
  186. item.iquantity= parseFloat(iquantity.toFixed(4));
  187. item.iquantityInvoice = parseFloat(iquantityInvoice.toFixed(4));
  188. item.iquantityNInvoice = parseFloat(iquantityNInvoice.toFixed(4));
  189. item.iquantitySettle = parseFloat(iquantitySettle.toFixed(4));
  190. item.iquantityNSettle = parseFloat(iquantityNSettle.toFixed(4));
  191. return [item];
  192. },
  193. // 获取导出json定义
  194. exportFields(){
  195. var ret = {};
  196. this.purchaseAmountColumns.forEach((record,index)=>{
  197. if (record.title != "序号"){
  198. if (record.title != "入库单号")
  199. ret[record.title] = record.dataIndex;
  200. else
  201. ret[record.title] = record.dataIndex+"_ex";
  202. }
  203. });
  204. return ret;
  205. }
  206. },
  207. created() {},
  208. methods: {
  209. // 第一行 导出
  210. // handleExportXls() {},
  211. // 打印
  212. print() {},
  213. // 返回
  214. backFabricLossTable() {
  215. console.log('返回到面料损耗表')
  216. // this.$router.push('fabricLoss-table')
  217. // this.purchaseAmountModVis = false
  218. this.close()
  219. },
  220. // 弹框查询按钮
  221. searchQuery() {
  222. this.purchaseAmountData = this.allDataList.filter(e=> this.queryParam.ccode == null || e.ccode.toLowerCase().indexOf(this.queryParam.ccode.toLowerCase())>-1);
  223. },
  224. // 重置
  225. searchReset() {
  226. this.queryParam.title = ''
  227. this.queryParam.isRelease = ''
  228. // this.getShipmentList()
  229. },
  230. close() {
  231. this.$emit('close')
  232. this.purchaseAmountModVis = false
  233. },
  234. showTotal(data) {
  235. return (
  236. <a-table
  237. rowKey={Math.random}
  238. bordered={false}
  239. pagination={false}
  240. columns={this.purchaseAmountColumns}
  241. dataSource={this.totalDataSource || []}
  242. showHeader={false}
  243. ></a-table>
  244. )
  245. },
  246. // 导出excel
  247. exportExcel(){
  248. this.$refs.realExportExcel.$el.click();
  249. },
  250. // 生成导出数据
  251. getExportDataList(){
  252. this.purchaseAmountData.forEach((item,index)=>{item["ccode_ex"]="&nbsp;"+item["ccode"]});
  253. return this.purchaseAmountData;
  254. }
  255. }
  256. }
  257. </script>
  258. <style lang="less" scoped>
  259. @import '~@assets/less/common.less';
  260. @import '~@assets/less/overwriter.less';
  261. /deep/ .ant-table-thead > tr > th {
  262. text-align: center;
  263. // font-weight: 700;
  264. }
  265. /deep/ .ant-table-tbody {
  266. text-align: center;
  267. }
  268. // /deep/ th.replacecolor {
  269. // background-color: #ccc;
  270. // }
  271. </style>