subcontractOrderModal.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <template>
  2. <div id="manualModal">
  3. <a-modal
  4. title="手工匹配订单"
  5. v-model="subcontractOrderModVis"
  6. :confirmLoading="confirmLoading"
  7. @cancel="handleCancel"
  8. width="80%"
  9. style="top:330px;left:100px;"
  10. >
  11. <!-- 主表信息 回显 -->
  12. <a-card :bordered="false" >
  13. <div class="table-page-search-wrapper">
  14. <a-form layout="inline" @keyup.enter.native="searchQuery">
  15. <a-row :gutter="24">
  16. <a-col :md="6" :sm="8">
  17. <a-form-item label="委外订单号">
  18. <a-input placeholder="请输入委外订单号" v-model="queryParam.CCode"></a-input>
  19. </a-form-item>
  20. </a-col>
  21. <template v-if="toggleSearchStatus">
  22. </template>
  23. <a-col :md="6" :sm="8">
  24. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  25. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  26. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  27. <a @click="handleToggleSearch" style="margin-left: 8px">
  28. {{ toggleSearchStatus ? '收起' : '展开' }}
  29. <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
  30. </a>
  31. </span>
  32. </a-col>
  33. </a-row>
  34. </a-form>
  35. </div>
  36. </a-card>
  37. <!-- 増行 子表 -->
  38. <a-card :bordered="false" style="margin:10px 0;">
  39. <!-- 子表 -->
  40. <a-spin :spinning="confirmLoading">
  41. <a-table
  42. bordered
  43. :row-key="record => record.ivouchRowNo"
  44. :columns="subcontractOrderColumns"
  45. :data-source="subcontractOrderData"
  46. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  47. :scroll="{x: 1200,y:300 }"
  48. :pagination="pagination"
  49. @change="handleTableChange"
  50. >
  51. <span slot="operationSlot" slot-scope="text, record,index">
  52. <a @click="handleExportXls(record)" style="color:green;">关联委外</a>
  53. <a-divider type="vertical" />
  54. <a @click="handleDelete(record,index)" style="color:red;">删行</a>
  55. </span>
  56. </a-table>
  57. <div class="purchase-order-table" style="margin-top: 2%;margin-bottom: 1%;">
  58. <h6 class="table-title">销售订单信息</h6>
  59. <a-table
  60. :row-key="record => record.id"
  61. :loading="loading"
  62. :columns="manualColumns"
  63. :data-source="manualData"
  64. :scroll="{ y: 200 }"
  65. bordered
  66. :pagination="false"
  67. >
  68. </a-table>
  69. </div>
  70. </a-spin>
  71. </a-card>
  72. <!-- 页面底部保存取消 -->
  73. <div
  74. :style="{
  75. position: 'absolute',
  76. right: 0,
  77. bottom: 0,
  78. width: '100%',
  79. borderTop: '1px solid #e9e9e9',
  80. padding: '10px 16px',
  81. background: '#fff',
  82. textAlign: 'right',
  83. zIndex: 1
  84. }"
  85. >
  86. <a-popconfirm title="确定放弃?" @confirm="handleCancel" okText="确定" cancelText="取消">
  87. <a-button :style="{ marginRight: '8px' }">返回</a-button>
  88. </a-popconfirm>
  89. <a-button type="primary" @click="addSave">
  90. 保存
  91. </a-button>
  92. </div>
  93. </a-modal>
  94. </div>
  95. </template>
  96. <script>
  97. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  98. import JEllipsis from '@/components/jeecg/JEllipsis'
  99. import moment from 'moment'
  100. import {subcontractOrder } from '@api/document/order'
  101. export default {
  102. name: 'subcontractOrderModal', // 报关要素
  103. mixins: [JeecgListMixin],
  104. components: { JEllipsis, moment },
  105. data() {
  106. let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
  107. return {
  108. queryParam:{},
  109. subcontractOrderModVis:false,
  110. confirmLoading: false,
  111. subcontractOrderData:[ ],
  112. manualData:[],
  113. subcontractOrderColumns:[
  114. {
  115. title: '委外订单号',
  116. width: 100,
  117. dataIndex: 'ccode',
  118. className: 'replacecolor',
  119. ellipsis: true
  120. },
  121. {
  122. title: '委外订单行号',
  123. width: 120,
  124. dataIndex: 'ivouchRowNo',
  125. className: 'replacecolor',
  126. ellipsis: true
  127. },
  128. {
  129. title: '存货编码',
  130. width: 120,
  131. dataIndex: 'inventoryCode',
  132. className: 'replacecolor',
  133. ellipsis: true
  134. },
  135. {
  136. title: '存货名称',
  137. width: 120,
  138. dataIndex: 'inventoryName',
  139. className: 'replacecolor',
  140. ellipsis: true
  141. },
  142. {
  143. title: '规格型号',
  144. width: 120,
  145. dataIndex: 'specificationAndModel',
  146. className: 'replacecolor',
  147. ellipsis: true
  148. },
  149. {
  150. title: '颜色',
  151. width: 80,
  152. dataIndex: 'colour',
  153. className: 'replacecolor',
  154. ellipsis: true
  155. },
  156. ],
  157. manualColumns:[
  158. {
  159. title: '销售订单账套号',
  160. width: 110,
  161. dataIndex: 'account',
  162. className: 'replacecolor',
  163. ellipsis: true
  164. },
  165. {
  166. title: '销售订单号',
  167. width: 110,
  168. dataIndex: 'orderNumber',
  169. className: 'replacecolor',
  170. ellipsis: true
  171. },
  172. {
  173. title: '销售订单行信息',
  174. width: 110,
  175. dataIndex: 'irowNo',
  176. className: 'replacecolor',
  177. ellipsis: true
  178. },
  179. {
  180. title: '存货编码',
  181. width: 120,
  182. dataIndex: 'inventoryCode',
  183. className: 'replacecolor',
  184. ellipsis: true
  185. },
  186. {
  187. title: '存货名称',
  188. width: 190,
  189. dataIndex: 'inventoryName',
  190. className: 'replacecolor',
  191. },
  192. {
  193. title: '规格型号',
  194. width: 120,
  195. dataIndex: 'specificationAndModel',
  196. className: 'replacecolor',
  197. ellipsis: true
  198. },
  199. {
  200. title: '颜色',
  201. width: 80,
  202. dataIndex: 'colour',
  203. className: 'replacecolor',
  204. ellipsis: true
  205. },
  206. {
  207. title: '委外订单号',
  208. width: 120,
  209. dataIndex: 'ccode',
  210. className: 'replacecolor',
  211. ellipsis: true
  212. },
  213. {
  214. title: '委外订单行号',
  215. width: 120,
  216. dataIndex: 'ivouchRowNo',
  217. className: 'replacecolor',
  218. ellipsis: true
  219. },
  220. ],
  221. selectedRowKeys:[],
  222. selectedRows:[],
  223. fatherList:'',
  224. pagination:{}
  225. }
  226. },
  227. // 接收父组件 方法
  228. props: {},
  229. created() {
  230. },
  231. methods: {
  232. //获取数据
  233. getData(){
  234. var that = this;
  235. this.confirmLoading = true
  236. this.$nextTick(() => {
  237. subcontractOrder(this.queryParam).then(res => {
  238. this.confirmLoading = false
  239. if (res.success) {
  240. that.subcontractOrderData = res.result.records;
  241. that.pagination = {
  242. total: res.result.total,
  243. current: res.result.current,
  244. pageSize: res.result.size
  245. }
  246. }else{
  247. that.$message.error(res.message);
  248. }
  249. })
  250. })
  251. },
  252. //查询
  253. searchQuery(){
  254. if(this.queryParam.CCode == '' || !this.queryParam.CCode){
  255. this.$message.error('请选择委外订单号')
  256. }else{
  257. this.getData()
  258. }
  259. },
  260. //重置
  261. searchReset(){
  262. this.subcontractOrderData = []
  263. this.queryParam={}
  264. },
  265. //返回
  266. handleCancel(){
  267. this.close()
  268. },
  269. //保存
  270. addSave(){
  271. if(this.selectedRowKeys.length == 0){
  272. this.$message.error('请勾选数据')
  273. }else if(this.selectedRowKeys.length >1){
  274. this.$message.error('只可选择一行数据')
  275. }else{
  276. this.close()
  277. this.$emit('close',this.fatherList,this.selectedRows[0])
  278. }
  279. },
  280. //关闭弹窗
  281. close(){
  282. this.subcontractOrderModVis = false
  283. this.subcontractOrderData = []
  284. this.queryParam={}
  285. this.selectedRowKeys = []
  286. this.manualData = []
  287. },
  288. //选中行
  289. onSelectChange(keys,rows){
  290. this.selectedRowKeys = keys;
  291. this.selectedRows = rows;
  292. },
  293. // 分页变化时触发
  294. handleTableChange(pagination, filters, sorter) {
  295. this.queryParam.pageNo = pagination.current
  296. this.getData()
  297. },
  298. },
  299. computed: {}
  300. }
  301. </script>
  302. <style lang="less" scoped>
  303. @import '~@assets/less/common.less';
  304. @import '~@assets/less/overwriter.less';
  305. /deep/ .ant-table-thead > tr > th {
  306. text-align: center;
  307. // font-weight: 700;
  308. }
  309. /deep/ .ant-table-tbody {
  310. text-align: center;
  311. }
  312. // th.replacecolor {
  313. // background-color: #ccc;
  314. // }
  315. // 对话框里的card样式
  316. /deep/ .ant-modal-content {
  317. background-color: #f0f2f5;
  318. }
  319. /deep/ .ant-modal-body {
  320. padding: 10px;
  321. }
  322. /deep/.ant-form-item{
  323. margin-bottom: 0px !important;
  324. }
  325. /deep/.ant-table-tbody .ant-table-row td{
  326. padding-top: 8px;
  327. padding-bottom: 8px;
  328. }
  329. /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  330. padding: 9px 16px
  331. }
  332. /deep/.ant-card-body{
  333. padding-top: 10px !important;
  334. padding-bottom: 0px !important;
  335. }
  336. /deep/ .table-page-search-wrapper .table-page-search-submitButtons{
  337. margin-bottom: 8px;
  338. }
  339. </style>