SelectCustomerInquiryModal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <a-modal
  3. title="选择客户询价单(select customer inquiry)"
  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. <a-col :md="6" :sm="8">
  26. <a-form-item label="询价项目(inquiry project)">
  27. <ApiSelect
  28. :api="projectListList"
  29. showSearch
  30. v-model:value="queryParams.inquiryProject"
  31. optionFilterProp="label"
  32. resultField="records"
  33. labelField="name"
  34. valueField="id"
  35. :disabled="fatherProject!==''"
  36. />
  37. </a-form-item>
  38. </a-col>
  39. <template v-if="toggleSearchStatus">
  40. <!-- <a-col :md="6" :sm="8">
  41. <a-form-item label="业务类型(busyness type)">
  42. <JDictSelectTag v-model:value="queryParams.busynessType" placeholder="请选择" dictCode="busyness_type"/>
  43. </a-form-item>
  44. </a-col> -->
  45. <a-col :md="6" :sm="8">
  46. <a-form-item label="优先级(priority)">
  47. <JDictSelectTag v-model:value="queryParams.priority" placeholder="请选择" dictCode="priority"/>
  48. </a-form-item>
  49. </a-col>
  50. <a-col :md="6" :sm="8">
  51. <a-form-item label="产品分类(product class)" >
  52. <JSelectInput v-model:value="queryParams.productionClass" placeholder="请选择" :options="classOption" ></JSelectInput>
  53. </a-form-item>
  54. </a-col>
  55. <a-col :md="6" :sm="8">
  56. <a-form-item label="机型(model)">
  57. <JDictSelectTag v-model:value="queryParams.model" placeholder="请选择" dictCode="model_typer"/>
  58. </a-form-item>
  59. </a-col>
  60. <a-col :md="6" :sm="8">
  61. <a-form-item label="产品编号(product code)">
  62. <a-input placeholder="请输入" v-model:value="queryParams.productCode"></a-input>
  63. </a-form-item>
  64. </a-col>
  65. <a-col :md="8" :sm="8">
  66. <a-form-item label="采购询价组(procurement inquiry team)" :label-col="labelCol1" :wrapper-col="wrapperCol1">
  67. <JSelectDept v-model:value="queryParams.inquiryTeam" :multiple="false"/>
  68. </a-form-item>
  69. </a-col>
  70. </template>
  71. <a-col :md="6" :sm="8">
  72. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  73. <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
  74. <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置(reset)</a-button>
  75. <a @click="handleToggleSearch" style="margin-left: 8px">
  76. {{ toggleSearchStatus ? '收起' : '展开' }}
  77. <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
  78. </a>
  79. </span>
  80. </a-col>
  81. </a-row>
  82. </a-form>
  83. </div>
  84. </a-card>
  85. <a-card :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
  86. <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
  87. <template #message>
  88. <template v-if="selectedRowKeys.length > 0">
  89. <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
  90. <a-divider type="vertical" />
  91. <a @click="selectedRowKeys = []">清空</a>
  92. </template>
  93. <template v-else>
  94. <span>未选中任何数据</span>
  95. </template>
  96. </template>
  97. </a-alert>
  98. <a-table
  99. :columns="columns"
  100. :row-key="record => record.childId"
  101. :data-source="dataSource"
  102. bordered
  103. size="small"
  104. @change="handleTableChange"
  105. :pagination="pagination"
  106. :scroll="{ x: 4500, y: 300 }"
  107. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  108. >
  109. </a-table>
  110. </a-card>
  111. </div>
  112. </a-modal>
  113. </template>
  114. <script lang="ts" setup>
  115. import {ref, reactive } from 'vue';
  116. import { defHttp } from '/@/utils/http/axios';
  117. import { message } from 'ant-design-vue';
  118. import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  119. import { JDictSelectTag} from '/@/components/Form';
  120. import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
  121. import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  122. import { ApiSelect, } from '/@/components/Form/index';
  123. const emit = defineEmits([ 'selectCustomerInquiry']); //定义emit
  124. let classOption = ref([])
  125. var visible = ref(false)
  126. const columns = [
  127. {
  128. title: '询价单号(bill code)',
  129. dataIndex: 'billCode',
  130. key: 'billCode',
  131. align:"center"
  132. },
  133. {
  134. title: '单据日期(bill date)',
  135. dataIndex: 'billDate',
  136. key: 'billDate',
  137. align:"center"
  138. },
  139. {
  140. title: '询价项目(inquiry project)',
  141. dataIndex: 'inquiryProject_dictText',
  142. key: 'inquiryProjec',
  143. align:"center",
  144. width:200
  145. },
  146. {
  147. title: '询价客户(inquiry customer)',
  148. key: 'inquiryCustomer',
  149. dataIndex: 'inquiryCustomer_dictText',
  150. align:"center",
  151. ellipsis: true,
  152. },
  153. {
  154. title: '询价有效期(inquiry period)',
  155. align:"center",
  156. dataIndex: 'time',
  157. width:250,
  158. customRender:({text,record}) =>{
  159. if(record.inquiryPeriodBegin&&record.inquiryPeriodEnd){
  160. text = record.inquiryPeriodBegin+'~'+record.inquiryPeriodEnd
  161. }else if(!record.inquiryPeriodBegin){
  162. text = record.inquiryPeriodEnd
  163. }else if(!record.inquiryPeriodEnd){
  164. text = record.inquiryPeriodBegin
  165. }else{
  166. text=''
  167. }
  168. return text;
  169. },
  170. },
  171. {
  172. title: '优先级(priority)',
  173. align:"center",
  174. dataIndex: 'priority_dictText'
  175. },
  176. {
  177. title: '产品分类(production class)',
  178. align:"center",
  179. dataIndex: 'productionClass_dictText'
  180. },
  181. {
  182. title: '机型(model)',
  183. align:"center",
  184. dataIndex: 'model'
  185. },
  186. {
  187. title: '采购询价组(procurenment inquiry team)',
  188. key: 'inquiryTeam',
  189. dataIndex: 'inquiryTeam_dictText',
  190. align:"center"
  191. },
  192. {
  193. title: '产品编码(product code)',
  194. key: 'productCode',
  195. dataIndex: 'productCode',
  196. align:"center"
  197. },
  198. {
  199. title: '产品英文名(product english name)',
  200. key: 'englishName',
  201. dataIndex: 'englishName',
  202. align:"center",
  203. width:250
  204. },
  205. {
  206. title: '型号(child model)',
  207. key: 'childModel;',
  208. dataIndex: 'childModel;',
  209. align:"center",
  210. width:250
  211. },
  212. {
  213. title: '厂家(factory)',
  214. key: 'factory;',
  215. dataIndex: 'factory;',
  216. align:"center",
  217. width:250
  218. },
  219. {
  220. title: '质量等级(quality grade)',
  221. key: 'qualityGrade;',
  222. dataIndex: 'qualityGrade;',
  223. align:"center",
  224. width:250
  225. },
  226. {
  227. title: '数量(quality)',
  228. key: 'quantity;',
  229. dataIndex: 'quantity;',
  230. align:"center",
  231. width:250
  232. },
  233. {
  234. title: '单位(unit)',
  235. key: 'unit;',
  236. dataIndex: 'unit;',
  237. align:"center",
  238. width:250
  239. },
  240. {
  241. title: '备注(notes)',
  242. key: 'notes;',
  243. dataIndex: 'notes;',
  244. align:"center",
  245. width:250
  246. },
  247. ];
  248. const labelCol = ref({
  249. xs: { span: 24 },
  250. sm: { span: 9 },
  251. });
  252. const wrapperCol = ref({
  253. xs: { span: 24 },
  254. sm: { span: 15 },
  255. });
  256. const labelCol1 = ref({
  257. xs: { span: 24 },
  258. sm: { span: 11 },
  259. });
  260. const wrapperCol1 = ref({
  261. xs: { span: 24 },
  262. sm: { span: 13 },
  263. });
  264. const dataSource =ref([]);
  265. let selectedRowKeys = ref([]);
  266. let selectedRows = ref([]);
  267. var fatherProject = ref('');
  268. var fatherSourceCode = ref('');
  269. const toggleSearchStatus = ref(false);
  270. var billDate = ref([])
  271. const queryParams = ref({
  272. billCode:'',
  273. inquiryProject:'',
  274. busynessType:'',
  275. priority:'',
  276. productionClass:'',
  277. model:'',
  278. productCode:'',
  279. inquiryTeam:'',
  280. projectName:'',
  281. billDate_begin:'',
  282. billDate_end:'',
  283. });
  284. let pagination = ref({
  285. current: 1,
  286. pageSize: 10,
  287. total: '', // 假设总共有100条数据
  288. showSizeChanger: true,
  289. showQuickJumper: true,
  290. showTotal: (total, range) => {
  291. return range[0] + "-" + range[1] + " 共" + total + "条"
  292. },
  293. size:'small'
  294. });
  295. function loadData(){
  296. let params = getQueryParams();
  297. defHttp
  298. .get({ url: '/saleCode/saleInquiryForm/alertSaleInquiryList',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. params.inquiryProject = fatherProject.value
  319. }else{
  320. params.inquiryProject = params.inquiryProject
  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 getOptiom(){
  331. defHttp
  332. .get({ url: 'baseCode/baseProductClass/list'}, { isTransformResponse: false })
  333. .then((res) => {
  334. if (res.success) {
  335. classOption.value = []
  336. res.result.records.forEach(element => {
  337. var obj = {
  338. label: element.name?element.name:'无名称请维护',
  339. value: element.id?element.id:''
  340. };
  341. classOption.value.push( obj)
  342. });
  343. }
  344. })
  345. .finally(() => {
  346. // loading.value = false;
  347. });
  348. }
  349. function searchQuery(){
  350. loadData();
  351. }
  352. function searchReset(){
  353. billDate.value = []
  354. queryParams.value = {
  355. billCode:'',
  356. inquiryProject:'',
  357. busynessType:'',
  358. priority:'',
  359. productionClass:'',
  360. model:'',
  361. productCode:'',
  362. inquiryTeam:'',
  363. projectName:'',
  364. billDate_begin:'',
  365. billDate_end:'',
  366. }
  367. pagination.value.current =1;
  368. pagination.value.pageSize = 10;
  369. loadData();
  370. }
  371. function handleToggleSearch(){
  372. toggleSearchStatus.value = !toggleSearchStatus.value;
  373. }
  374. function onSelectChange(keys,rows){
  375. selectedRowKeys.value = keys
  376. selectedRows.value = rows
  377. }
  378. function handleOk(){
  379. var arr = []
  380. selectedRows.value.map(item=>arr.push(item.billCode))
  381. if(fatherSourceCode.value&&fatherSourceCode.value!==''){
  382. arr.push(fatherSourceCode.value)
  383. }
  384. if(selectedRowKeys.value.length==0){
  385. message.error('请勾选数据');
  386. }else if(new Set(arr).size!==1){
  387. message.error('请勾选询价单号相同的数据');
  388. }else{
  389. emit('selectCustomerInquiry', selectedRows.value)
  390. handleCancel()
  391. }
  392. }
  393. function handleCancel(){
  394. visible.value = false
  395. billDate.value = []
  396. queryParams.value = {
  397. billCode:'',
  398. inquiryProject:'',
  399. busynessType:'',
  400. priority:'',
  401. productionClass:'',
  402. model:'',
  403. productCode:'',
  404. inquiryTeam:'',
  405. projectName:'',
  406. billDate_begin:'',
  407. billDate_end:'',
  408. }
  409. selectedRowKeys.value = []
  410. selectedRows.value=[]
  411. }
  412. function getTable(formData){
  413. visible.value = true
  414. if(formData.projectName&&formData.projectName!==''){
  415. fatherProject.value = formData.inquiryProject
  416. }else{
  417. fatherProject.value = ''
  418. }
  419. if(formData.sourceCode&&formData.sourceCode!==''){
  420. fatherSourceCode.value = formData.sourceCode
  421. }else{
  422. fatherSourceCode.value = ''
  423. }
  424. loadData()
  425. getOptiom()
  426. }
  427. function changeBillDate(prop){
  428. if(prop){
  429. billDate.value = prop
  430. queryParams.value.billDate_begin = prop[0]
  431. queryParams.value.billDate_end = prop[1]
  432. }else{
  433. billDate.value = []
  434. queryParams.value.billDate_begin = ''
  435. queryParams.value.billDate_end = ''
  436. }
  437. }
  438. function projectListList(){
  439. let params = {pageSize:-1}
  440. return defHttp.get({url:'/baseCode/baseProjectArchive/list',params});
  441. }
  442. defineExpose({
  443. getTable
  444. });
  445. </script>
  446. <style scoped lang="less">
  447. /deep/.ant-form-item{
  448. margin-bottom: 8px !important;
  449. }
  450. // /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
  451. // padding: 8px !important;
  452. // }
  453. </style>