quotation.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. <template>
  2. <div class="p-2">
  3. <!--查询区域-->
  4. <div class="jeecg-basic-table-form-container">
  5. <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
  6. <a-row :gutter="24">
  7. <a-col :lg="8">
  8. <a-form-item name="billCode">
  9. <template #label><span title="询价单号(bill code)">报价单号(bill code)</span></template>
  10. <a-input placeholder="请输入询价单号(bill code)" v-model:value="queryParam.billCode" allow-clear ></a-input>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :lg="8">
  14. <a-form-item name="billDate">
  15. <template #label><span title="单据日期(bill date)">单据日期(bill date)</span></template>
  16. <a-range-picker value-format="YYYY-MM-DD" v-model:value="queryParam.billDate" class="query-group-cust"/>
  17. </a-form-item>
  18. </a-col>
  19. <template v-if="toggleSearchStatus">
  20. <a-col :lg="8">
  21. <a-form-item name="inquiryProject">
  22. <template #label><span title="报价项目(quotation project)">报价项目(quotation project)</span></template>
  23. <a-input placeholder="请输入报价项目(quotation project)" v-model:value="queryParam.quotationProject" allow-clear ></a-input>
  24. </a-form-item>
  25. </a-col>
  26. <a-col :lg="8">
  27. <a-form-item name="inquiryCustomer">
  28. <template #label><span title="报价客户(quotation customer)">报价客户(quotation customer)</span></template>
  29. <a-input placeholder="请输入报价客户(quotation customer)" v-model:value="queryParam.quotationCustomer" allow-clear ></a-input>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :lg="8">
  33. <a-form-item name="busynessType">
  34. <template #label><span title="业务类型(busyness type)">业务类型(busyness type)</span></template>
  35. <JDictSelectTag v-model:value="queryParam.busynessType" placeholder="请选择" dictCode="busyness_type"/>
  36. </a-form-item>
  37. </a-col>
  38. <a-col :lg="8">
  39. <a-form-item name="priority">
  40. <template #label><span title="优先级(priority)">优先级(priority)</span></template>
  41. <JDictSelectTag v-model:value="queryParam.priority" placeholder="请选择" dictCode="priority"/>
  42. </a-form-item>
  43. </a-col>
  44. <a-col :lg="8">
  45. <a-form-item name="productionClass" >
  46. <template #label><span title="产品分类(production class)">产品分类(production class)</span></template>
  47. <JSelectInput v-model:value="queryParam.productionClass" placeholder="请选择" :options="classOption" ></JSelectInput>
  48. </a-form-item>
  49. </a-col>
  50. <a-col :lg="8">
  51. <a-form-item name="model">
  52. <template #label><span title="机型(model)">机型(model)</span></template>
  53. <JDictSelectTag v-model:value="queryParam.model" placeholder="请选择" dictCode="model_typer"/>
  54. </a-form-item>
  55. </a-col>
  56. <a-col :lg="8">
  57. <a-form-item name="maker">
  58. <template #label><span title="厂家(maker)">厂家(maker)</span></template>
  59. <a-input placeholder="请输入厂家(maker)" v-model:value="queryParam.maker" allow-clear ></a-input>
  60. </a-form-item>
  61. </a-col>
  62. <a-col :lg="8">
  63. <a-form-item name="englishName">
  64. <template #label><span title="产品英文名(english name)">产品英文名(english name)</span></template>
  65. <a-input placeholder="请输入产品英文名(english name)" v-model:value="queryParam.englishName" allow-clear ></a-input>
  66. </a-form-item>
  67. </a-col>
  68. <a-col :lg="8">
  69. <a-form-item name="productCode">
  70. <template #label><span title="产品编码(product code)">产品编码(product code)</span></template>
  71. <a-input placeholder="请输入产品编码(product code)" v-model:value="queryParam.productCode" allow-clear ></a-input>
  72. </a-form-item>
  73. </a-col>
  74. <a-col :lg="8">
  75. <a-form-item name="model">
  76. <template #label><span title="型号(model">型号(model)</span></template>
  77. <a-input placeholder="请输入型号(model)" v-model:value="queryParam.model" allow-clear ></a-input>
  78. </a-form-item>
  79. </a-col>
  80. <a-col :lg="8">
  81. <a-form-item name="submit">
  82. <template #label><span title="状态(status)">状态(status)</span></template>
  83. <JDictSelectTag v-model:value="queryParam.status" placeholder="请选择" dictCode="quotation_status"/>
  84. </a-form-item>
  85. </a-col>
  86. </template>
  87. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  88. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  89. <a-col :lg="6">
  90. <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
  91. <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
  92. <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
  93. {{ toggleSearchStatus ? '收起' : '展开' }}
  94. <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
  95. </a>
  96. </a-col>
  97. </span>
  98. </a-col>
  99. </a-row>
  100. </a-form>
  101. </div>
  102. <!--引用表格-->
  103. <BasicTable @register="registerTable" :rowSelection="rowSelection" size="small" >
  104. <!--插槽:table标题-->
  105. <template #tableTitle>
  106. <a-button type="primary" v-auth="'saleCode:sale_quotation:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增(add)</a-button>
  107. <a-button type="primary" v-auth="'saleCode:sale_quotation:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出(export)</a-button>
  108. <a-button type="primary" @click="submit"> 提交(submit)</a-button>
  109. <a-button type="primary" @click="cancelSubmit"> 取消提交(cancelSubmit)</a-button>
  110. <a-dropdown v-if="selectedRowKeys.length > 0">
  111. <template #overlay>
  112. <a-menu>
  113. <a-menu-item key="1" @click="batchHandleDelete" v-auth="'saleCode:sale_quotation:deleteBatch'" >
  114. <Icon icon="ant-design:delete-outlined"></Icon>
  115. 删除(delete)
  116. </a-menu-item>
  117. </a-menu>
  118. </template>
  119. <a-button v-auth="'saleCode:sale_inquiry_form:deleteBatch'">批量操作
  120. <Icon icon="mdi:chevron-down"></Icon>
  121. </a-button>
  122. </a-dropdown>
  123. </template>
  124. <!--操作栏-->
  125. <template #action="{ record }">
  126. <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
  127. </template>
  128. <!--字段回显插槽-->
  129. <template v-slot:bodyCell="{ column, record, index, text }">
  130. </template>
  131. </BasicTable>
  132. <quotationFormModal @register="registerModal" @success="handleSuccess"></quotationFormModal>
  133. <ViewHistoryVersionModal ref="ViewHistoryVersionModalRef" @success="handleSuccess"></ViewHistoryVersionModal>
  134. <!-- 表单区域 -->
  135. </div>
  136. </template>
  137. <script lang="ts" name="saleCode-saleInquiryForm" setup>
  138. import {ref, reactive, computed, unref,onMounted} from 'vue';
  139. import {BasicTable, useTable, TableAction} from '/@/components/Table';
  140. import { useListPage } from '/@/hooks/system/useListPage'
  141. import {useModal} from '/@/components/Modal';
  142. import {columns, superQuerySchema} from './quotationForm.data';
  143. import {list, deleteOne, batchDelete, getImportUrl,getExportUrl,batchSubmit,cancelBatchSubmit} from './quotationForm.api';
  144. import { cloneDeep } from "lodash-es";
  145. import { useUserStore } from '/@/store/modules/user';
  146. import { defHttp } from '/@/utils/http/axios';
  147. import { JDictSelectTag} from '/@/components/Form';
  148. import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
  149. import quotationFormModal from './components/quotationFormModal.vue';
  150. import ViewHistoryVersionModal from './components/ViewHistoryVersionModal.vue';
  151. import { message } from 'ant-design-vue';
  152. const formRef = ref();
  153. const queryParam = reactive<any>({});
  154. const checkedKeys = ref<Array<string | number>>([]);
  155. //注册model
  156. const [registerModal, {openModal}] = useModal();
  157. const userStore = useUserStore();
  158. var classOption = ref([]);
  159. var ViewHistoryVersionModalRef = ref();
  160. //注册table数据
  161. const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
  162. tableProps:{
  163. title: '报价单',
  164. api: list,
  165. columns,
  166. canResize:false,
  167. useSearchForm: false,
  168. actionColumn: {
  169. width: 340,
  170. fixed:'right'
  171. },
  172. scroll:{
  173. x:'2700px'
  174. },
  175. beforeFetch: async (params) => {
  176. let rangerQuery = await setRangeQuery();
  177. return Object.assign(params, rangerQuery);
  178. },
  179. },
  180. exportConfig: {
  181. name:"销售报价单",
  182. url: getExportUrl,
  183. params: queryParam,
  184. },
  185. importConfig: {
  186. url: getImportUrl,
  187. success: handleSuccess
  188. },
  189. })
  190. const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
  191. // 高级查询配置
  192. const superQueryConfig = reactive(superQuerySchema);
  193. /**
  194. * 高级查询事件
  195. */
  196. function handleSuperQuery(params) {
  197. Object.keys(params).map((k) => {
  198. queryParam[k] = params[k];
  199. });
  200. reload();
  201. }
  202. // 自动请求并暴露内部方法
  203. onMounted(() => {
  204. getOptiom()
  205. });
  206. /**
  207. * 新增事件
  208. */
  209. function handleAdd() {
  210. openModal(true, {
  211. isUpdate: false,
  212. showFooter: true,
  213. isRevise: false
  214. });
  215. }
  216. /**
  217. * 编辑事件
  218. */
  219. function handleEdit(record: Recordable) {
  220. openModal(true, {
  221. record,
  222. isUpdate: true,
  223. showFooter: true,
  224. isRevise: false
  225. });
  226. }
  227. //修订
  228. function handleRevise(record: Recordable){
  229. openModal(true, {
  230. record,
  231. isUpdate: true,
  232. showFooter: true,
  233. isRevise: true
  234. });
  235. }
  236. function handleViewHistory(record: Recordable){
  237. ViewHistoryVersionModalRef.value.getTable(record)
  238. }
  239. // 产品分类
  240. function getOptiom(){
  241. defHttp
  242. .get({ url: 'baseCode/baseProductClass/list'}, { isTransformResponse: false })
  243. .then((res) => {
  244. if (res.success) {
  245. classOption.value = []
  246. res.result.records.forEach(element => {
  247. var obj = {
  248. label: element.name?element.name:'无名称请维护',
  249. value: element.id?element.id:''
  250. };
  251. classOption.value.push( obj)
  252. });
  253. }
  254. })
  255. .finally(() => {
  256. // loading.value = false;
  257. });
  258. }
  259. /**
  260. * 详情
  261. */
  262. function handleDetail(record: Recordable) {
  263. openModal(true, {
  264. record,
  265. isUpdate: true,
  266. showFooter: false,
  267. });
  268. }
  269. /**
  270. * 删除事件
  271. */
  272. async function handleDelete(record) {
  273. await deleteOne({id: record.id}, handleSuccess);
  274. }
  275. /**
  276. * 批量删除事件
  277. */
  278. async function batchHandleDelete() {
  279. await batchDelete({ids: selectedRowKeys.value},handleSuccess);
  280. }
  281. /**
  282. * 成功回调
  283. */
  284. function handleSuccess() {
  285. (selectedRowKeys.value = []) && reload();
  286. }
  287. /**
  288. * 操作栏
  289. */
  290. function getTableAction(record){
  291. return [
  292. {
  293. label: '编辑(edit)',
  294. onClick: handleEdit.bind(null, record),
  295. auth: 'saleCode:sale_quotation:edit',
  296. ifShow: record.status=='0'
  297. },
  298. {
  299. label: '修订(revise)',
  300. ifShow: record.status=='1',
  301. auth:'saleCode:sale_quotation:editHis',
  302. onClick: handleRevise.bind(null, record),
  303. },
  304. {
  305. label: '查看历史版本(history)',
  306. onClick: handleViewHistory.bind(null, record),
  307. ifShow: record.status=='1'
  308. },
  309. {
  310. label: '删除(delete)',
  311. popConfirm: {
  312. title: '是否确认删除',
  313. confirm: handleDelete.bind(null, record),
  314. placement: 'topLeft'
  315. },
  316. ifShow: record.status=='0',
  317. auth: 'saleCode:sale_quotation:delete'
  318. }
  319. ]
  320. }
  321. /**
  322. * 下拉操作栏
  323. */
  324. function getDropDownAction(record){
  325. return [
  326. {
  327. label: '详情(detail)',
  328. onClick: handleDetail.bind(null, record),
  329. },
  330. ]
  331. }
  332. function submit(){
  333. if(selectedRowKeys.value.length==0){
  334. message.warning('请选择数据')
  335. }else{
  336. var ids=selectedRowKeys.value.join(',')
  337. batchSubmit({ids: ids},handleSuccess);
  338. }
  339. }
  340. function cancelSubmit(){
  341. if(selectedRowKeys.value.length==0){
  342. message.warning('请选择数据')
  343. }else{
  344. var ids=selectedRowKeys.value.join(',')
  345. cancelBatchSubmit({ids: ids},handleSuccess);
  346. }
  347. }
  348. /* ----------------------以下为原生查询需要添加的-------------------------- */
  349. const toggleSearchStatus = ref<boolean>(false);
  350. const labelCol = reactive({
  351. xs:24,
  352. sm:8,
  353. });
  354. const wrapperCol = reactive({
  355. xs: 24,
  356. sm: 16,
  357. });
  358. const labelCol1 = reactive({
  359. xs:24,
  360. sm:12,
  361. });
  362. const wrapperCol1 = reactive({
  363. xs: 24,
  364. sm: 12,
  365. });
  366. /**
  367. * 重置
  368. */
  369. function searchReset() {
  370. formRef.value.resetFields();
  371. selectedRowKeys.value = [];
  372. //刷新数据
  373. reload();
  374. }
  375. let rangeField = 'billDate,'
  376. /**
  377. * 设置范围查询条件
  378. */
  379. async function setRangeQuery(){
  380. let queryParamClone = cloneDeep(queryParam);
  381. if (rangeField) {
  382. let fieldsValue = rangeField.split(',');
  383. fieldsValue.forEach(item => {
  384. if (queryParamClone[item]) {
  385. let range = queryParamClone[item];
  386. queryParamClone[item+'_begin'] = range[0];
  387. queryParamClone[item+'_end'] = range[1];
  388. delete queryParamClone[item];
  389. } else {
  390. queryParamClone[item+'_begin'] = '';
  391. queryParamClone[item+'_end'] = '';
  392. }
  393. })
  394. }
  395. return queryParamClone;
  396. }
  397. </script>
  398. <style lang="less" scoped>
  399. .jeecg-basic-table-form-container {
  400. padding: 0;
  401. .table-page-search-submitButtons {
  402. display: block;
  403. margin-bottom: 8px;
  404. white-space: nowrap;
  405. }
  406. .query-group-cust{
  407. min-width: 100px !important;
  408. }
  409. .query-group-split-cust{
  410. width: 30px;
  411. display: inline-block;
  412. text-align: center
  413. }
  414. .ant-form-item:not(.ant-form-item-with-help){
  415. margin-bottom: 8px;
  416. height: 32px;
  417. }
  418. :deep(.ant-picker),:deep(.ant-input-number){
  419. width: 100%;
  420. }
  421. }
  422. </style>