SelectPurchaseOrderModal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. <template>
  2. <a-modal
  3. title="选择采购订单(Select Purchase Order)"
  4. width="95%"
  5. :visible="visible"
  6. :maskClosable="false"
  7. switchFullscreen
  8. @ok = "handleOk"
  9. @cancel="handleCancel">
  10. <div>
  11. <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
  12. <div class="table-page-search-wrapper">
  13. <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">
  14. <a-row :gutter="24">
  15. <a-col :md="6" :sm="8">
  16. <a-form-item label="订单编号(bill code)">
  17. <a-input placeholder="请输入" v-model:value="queryParams.billCode"></a-input>
  18. </a-form-item>
  19. </a-col>
  20. <a-col :md="6" :sm="8">
  21. <a-form-item label="单据日期(bill date)">
  22. <a-range-picker value-format="YYYY-MM-DD" v-model:value="billDate" @change="changeBillDate" class="query-group-cust"/>
  23. </a-form-item>
  24. </a-col>
  25. <template v-if="toggleSearchStatus">
  26. <a-col :md="6" :sm="8">
  27. <a-form-item label="项目(project)">
  28. <ApiSelect
  29. :api="ProjectOption"
  30. showSearch
  31. v-model:value="queryParams.project"
  32. optionFilterProp="label"
  33. resultField="records"
  34. labelField="name"
  35. valueField="id"
  36. :params='{pageSize:-1}'
  37. :disabled="fatherProject!==''"
  38. />
  39. </a-form-item>
  40. </a-col>
  41. <a-col :md="6" :sm="8">
  42. <a-form-item label="产品分类(production class)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
  43. <ApiSelect
  44. :api="ClassList"
  45. showSearch
  46. v-model:value="queryParams.productionClass"
  47. :filterOption="false"
  48. resultField="records"
  49. labelField="name"
  50. valueField="id"
  51. :params='{pageSize:-1}'
  52. />
  53. </a-form-item>
  54. </a-col>
  55. <a-col :md="6" :sm="8">
  56. <a-form-item label="供应商(supplier)">
  57. <ApiSelect
  58. :api="supplierOption"
  59. showSearch
  60. v-model:value="queryParams.supplier"
  61. :filterOption="false"
  62. resultField="records"
  63. labelField="name"
  64. valueField="id"
  65. :params='{pageSize:-1}'
  66. />
  67. </a-form-item>
  68. </a-col>
  69. <a-col :md="6" :sm="8">
  70. <a-form-item label="优先级(priority)" >
  71. <JDictSelectTag v-model:value="queryParams.priority" placeholder="请选择" dictCode="priority" style="width: 100%;"/>
  72. </a-form-item>
  73. </a-col>
  74. <a-col :md="6" :sm="8">
  75. <a-form-item label="机型(model)">
  76. <a-input placeholder="请输入" v-model:value="queryParams.headModel"></a-input>
  77. </a-form-item>
  78. </a-col>
  79. <a-col :md="6" :sm="8">
  80. <a-form-item label="产品编码(product code)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
  81. <a-input placeholder="请输入" v-model:value="queryParams.productCode"></a-input>
  82. </a-form-item>
  83. </a-col>
  84. </template>
  85. <a-col :md="6" :sm="8">
  86. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  87. <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
  88. <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置(reset)</a-button>
  89. <a @click="handleToggleSearch" style="margin-left: 8px">
  90. {{ toggleSearchStatus ? '收起' : '展开' }}
  91. <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
  92. </a>
  93. </span>
  94. </a-col>
  95. </a-row>
  96. </a-form>
  97. </div>
  98. </a-card>
  99. <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
  100. <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
  101. <template #message>
  102. <template v-if="selectedRowKeys.length > 0">
  103. <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
  104. <a-divider type="vertical" />
  105. <a @click="selectedRowKeys = []">清空</a>
  106. </template>
  107. <template v-else>
  108. <span>未选中任何数据</span>
  109. </template>
  110. </template>
  111. </a-alert>
  112. <a-table
  113. :columns="columns"
  114. :row-key="record => record.childId"
  115. :data-source="dataSource"
  116. bordered
  117. size="small"
  118. @change="handleTableChange"
  119. :pagination="pagination"
  120. :scroll="{ x: 4000, y: 300 }"
  121. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  122. >
  123. </a-table>
  124. </a-card>
  125. </div>
  126. </a-modal>
  127. </template>
  128. <script lang="ts" setup>
  129. import {ref, reactive } from 'vue';
  130. import { defHttp} from '/@/utils/http/axios';
  131. import { message } from 'ant-design-vue';
  132. import { ApiSelect, } from '/@/components/Form/index';
  133. import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  134. import { JDictSelectTag} from '/@/components/Form';
  135. import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
  136. import {ProjectOption,supplierOption,ClassList} from '../purchase/arrivedGoods/ArriveGoodsForm.api';
  137. const emit = defineEmits([ 'selectPurchaseOrder']); //定义emit
  138. var visible = ref(false)
  139. var fatherProject = ref('')
  140. var fatherSourceCode = ref('')
  141. var fatherType =ref('')
  142. const columns = [
  143. {
  144. title: '订单编号(bill code)',
  145. dataIndex: 'billCode',
  146. key: 'billCode',
  147. align:"center",
  148. width:250,
  149. },
  150. {
  151. title: '单据日期(bill date)',
  152. dataIndex: 'billDate',
  153. key: 'billDate',
  154. align:"center"
  155. },
  156. {
  157. title: '项目(project)',
  158. dataIndex: 'projectName',
  159. key: 'projectName',
  160. align:"center",
  161. width:250,
  162. },
  163. {
  164. title: '供应商(supplier name)',
  165. dataIndex: 'supplierName',
  166. key: 'supplierName',
  167. align:"center"
  168. },
  169. {
  170. title: '优先级(priority)',
  171. dataIndex: 'priority_dictText',
  172. key: 'priority_dictText',
  173. align:"center"
  174. },
  175. {
  176. title: '产品分类(production class)',
  177. dataIndex: 'productionClass_dictText',
  178. key: 'productionClass_dictText',
  179. align:"center",
  180. width:250,
  181. },
  182. {
  183. title: '机型(model)',
  184. dataIndex: 'headModel',
  185. key: 'headModel',
  186. align:"center"
  187. },
  188. {
  189. title: '采购部门(puechase department)',
  190. dataIndex: 'purchaseDepartment',
  191. key: 'purchaseDepartment',
  192. align:"center"
  193. },
  194. {
  195. title: '采购员(puechaseman)',
  196. dataIndex: 'purchaseman',
  197. key: 'purchaseman',
  198. align:"center"
  199. },
  200. {
  201. title: '产品英文名(English name)',
  202. key: 'englishName',
  203. dataIndex: 'englishName',
  204. align:"center",
  205. width:250,
  206. },
  207. {
  208. title: '型号(childModel)',
  209. key: 'childModel',
  210. dataIndex: 'childModel',
  211. align:"center"
  212. },
  213. {
  214. title: '厂家(factory)',
  215. key: 'factory',
  216. dataIndex: 'factory',
  217. align:"center",
  218. width:250
  219. },
  220. {
  221. title: '质量等级(quantity grade)',
  222. key: 'qualityGrade',
  223. dataIndex: 'qualityGrade',
  224. align:"center",
  225. width:250,
  226. },
  227. {
  228. title: '数量(quanlity)',
  229. key: 'quanlity',
  230. dataIndex: 'quanlity',
  231. align:"center",
  232. width:250,
  233. },
  234. {
  235. title: '单价(price)',
  236. key: 'taxPrice',
  237. dataIndex: 'taxPrice',
  238. align:"center",
  239. width:250,
  240. },
  241. {
  242. title: '金额(tax money)',
  243. key: 'taxAmount',
  244. dataIndex: 'taxAmount',
  245. align:"center",
  246. width:250,
  247. },
  248. ];
  249. const labelCol = ref({
  250. xs: { span: 24 },
  251. sm: { span: 9 },
  252. });
  253. const wrapperCol = ref({
  254. xs: { span: 24 },
  255. sm: { span: 15 },
  256. });
  257. const labelCol1 = ref({
  258. xs: { span: 24 },
  259. sm: { span: 10 },
  260. });
  261. const wrapperCol1 = ref({
  262. xs: { span: 24 },
  263. sm: { span: 14 },
  264. });
  265. const dataSource =ref([]);
  266. let selectedRowKeys = ref([]);
  267. let selectedRows = ref([]);
  268. const toggleSearchStatus = ref(false);
  269. var billDate = ref([])
  270. const queryParams = ref({
  271. billCode:'',
  272. project:'',
  273. projectName:'',
  274. productionClass:'',
  275. priority:'',
  276. supplier:'',
  277. supplierName:'',
  278. headModel:'',
  279. productCode:'',
  280. billDate_begin:'',
  281. billDate_end:'',
  282. saleDepartment:'',
  283. salesman:'',
  284. });
  285. let pagination = ref({
  286. current: 1,
  287. pageSize: 10,
  288. total: '', // 假设总共有100条数据
  289. showSizeChanger: true,
  290. showQuickJumper: true,
  291. showTotal: (total, range) => {
  292. return range[0] + "-" + range[1] + " 共" + total + "条"
  293. },
  294. size:'small'
  295. });
  296. function loadData(){
  297. let params = getQueryParams();
  298. defHttp.get({ url: '/purCode/purOrder/selectPurOrderDetailAlert',params}, { isTransformResponse: false })
  299. .then((res) => {
  300. if (res.success) {
  301. dataSource.value = res.result.records;
  302. pagination.value.total = res.result.total;
  303. pagination.value.current = res.result.current;
  304. pagination.value.pageSize = res.result.size;
  305. } else {
  306. message.error(res.message);
  307. }
  308. })
  309. .finally(() => {
  310. // loading.value = false;
  311. });
  312. }
  313. function getQueryParams(){
  314. let params = Object.assign(queryParams.value);
  315. params.pageNo = pagination.value.current;
  316. params.pageSize = pagination.value.pageSize;
  317. if(fatherProject.value&&fatherProject.value!==''){
  318. queryParams.value.project = fatherProject.value
  319. }else {
  320. queryParams.value.project = params.project
  321. }
  322. return filterObj(params);
  323. }
  324. function handleTableChange(paginations, filters, sorter){
  325. pagination.value.total = paginations.total;
  326. pagination.value.current = paginations.current;
  327. pagination.value.pageSize = paginations.pageSize;
  328. loadData()
  329. };
  330. function searchQuery(){
  331. loadData();
  332. }
  333. function searchReset(){
  334. billDate.value = []
  335. queryParams.value = {
  336. billCode:'',
  337. project:'',
  338. projectName:'',
  339. productionClass:'',
  340. priority:'',
  341. supplier:'',
  342. supplierName:'',
  343. headModel:'',
  344. productCode:'',
  345. billDate_begin:'',
  346. billDate_end:'',
  347. saleDepartment:'',
  348. salesman:'',
  349. }
  350. pagination.value.current =1;
  351. pagination.value.pageSize = 10;
  352. loadData();
  353. }
  354. function handleToggleSearch(){
  355. toggleSearchStatus.value = !toggleSearchStatus.value;
  356. }
  357. function onSelectChange(keys,rows){
  358. selectedRowKeys.value = keys
  359. selectedRows.value = rows
  360. }
  361. function handleOk(){
  362. if(fatherType.value=='payRequest'){
  363. emit('selectPurchaseOrder', selectedRows.value)
  364. handleCancel()
  365. }else{
  366. var arr = []
  367. selectedRows.value.map(item=>arr.push(item.billCode))
  368. if(fatherSourceCode.value&&fatherSourceCode.value!==''){
  369. arr.push(fatherSourceCode.value)
  370. }
  371. if(selectedRowKeys.value.length==0){
  372. message.error('请勾选数据');
  373. }else if(new Set(arr).size!==1){
  374. message.error('请勾选订单编号相同的数据');
  375. }else{
  376. emit('selectPurchaseOrder', selectedRows.value)
  377. handleCancel()
  378. }
  379. }
  380. }
  381. function handleCancel(){
  382. visible.value = false
  383. selectedRowKeys.value = []
  384. selectedRows.value=[]
  385. queryParams.value = {
  386. billCode:'',
  387. project:'',
  388. projectName:'',
  389. productionClass:'',
  390. priority:'',
  391. supplier:'',
  392. supplierName:'',
  393. headModel:'',
  394. productCode:'',
  395. billDate_begin:'',
  396. billDate_end:'',
  397. saleDepartment:'',
  398. salesman:'',
  399. }
  400. }
  401. function getTable(formData){
  402. visible.value = true
  403. if(formData.projectName&&formData.projectName!==''){
  404. fatherProject.value = formData.project
  405. }else{
  406. fatherProject.value = ''
  407. }
  408. if(formData.sourceCode&&formData.sourceCode!==''){
  409. fatherSourceCode.value = formData.sourceCode
  410. }else{
  411. fatherSourceCode.value = ''
  412. }
  413. fatherType.value='arrive'
  414. loadData()
  415. }
  416. function getTableFromPurPayRequestForm(){
  417. visible.value = true
  418. fatherProject.value = ''
  419. fatherSourceCode.value = ''
  420. fatherType.value='payRequest'
  421. loadData()
  422. }
  423. function changeBillDate(prop){
  424. if(prop){
  425. billDate.value = prop
  426. queryParams.value.billDate_begin = prop[0]
  427. queryParams.value.billDate_end = prop[1]
  428. }else{
  429. billDate.value = []
  430. queryParams.value.billDate_begin = ''
  431. queryParams.value.billDate_end = ''
  432. }
  433. }
  434. defineExpose({
  435. getTable,
  436. getTableFromPurPayRequestForm
  437. });
  438. </script>
  439. <style scoped lang="less">
  440. /deep/.ant-form-item{
  441. margin-bottom: 8px !important;
  442. }
  443. // /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
  444. // padding: 8px !important;
  445. // }
  446. </style>