<template> <div class="p-2"> <!--查询区域--> <div class="jeecg-basic-table-form-container"> <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-row :gutter="24"> <a-col :lg="8"> <a-form-item name="billCode"> <template #label><span title="到货单号(bill code)">到货单号(bill code)</span></template> <JInput placeholder="请输入到货单号(bill code)" v-model:value="queryParam.billCode" allow-clear AutoComplete="off" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="arrivalDate"> <template #label><span title="到货日期(arrival date)">到货日期(arrival date)</span></template> <a-range-picker value-format="YYYY-MM-DD" v-model:value="queryParam.arrivalDate" class="query-group-cust" /> </a-form-item> </a-col> <template v-if="toggleSearchStatus"> <a-col :lg="8"> <a-form-item name="project" :label-col="labelCol1" :wrapper-col="wrapperCol1"> <template #label><span title="项目(project)">项目(project)</span></template> <ApiSelect :api="ProjectOption" showSearch v-model:value="queryParam.project" :filterOption="true" resultField="records" labelField="code" valueField="id" :params="{ pageSize: -1 }" optionFilterProp="label" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="supplier"> <template #label><span title="供应商(supplier)">供应商(supplierName)</span></template> <ApiSelect :api="supplierOption" showSearch v-model:value="queryParam.supplier" :filterOption="true" resultField="records" labelField="name" valueField="id" :params="{ pageSize: -1 }" optionFilterProp="label" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="priority"> <template #label><span title="优先级(priority)">优先级(priority)</span></template> <JDictSelectTag v-model:value="queryParam.priority" placeholder="请选择" dictCode="priority" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="productionClass" :label-col="labelCol1" :wrapper-col="wrapperCol1"> <template #label><span title="产品分类(production class)">产品分类(production class)</span></template> <ApiSelect :api="ClassList" showSearch v-model:value="queryParam.productionClass" :filterOption="true" resultField="records" labelField="name" valueField="id" :params="{ pageSize: -1 }" optionFilterProp="label" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="model"> <template #label><span title="机型(model)">机型(model)</span></template> <JDictSelectTag v-model:value="queryParam.model" placeholder="请选择" dictCode="model_typer" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="maker"> <template #label><span title="厂家(maker)">厂家(maker)</span></template> <JDictSelectTag v-model:value="queryParam.maker" placeholder="请选择" dictCode="factory" /> </a-form-item> </a-col> <!-- <a-col :lg="8"> <a-form-item name="productCode"> <template #label><span title="产品编号(product code)">产品编号(product code)</span></template> <JInput placeholder="请输入产品编号(product code)" v-model:value="queryParam.productCode" allow-clear ></JInput> </a-form-item> </a-col> --> <a-col :lg="8"> <a-form-item name="purchaseDepartment" :label-col="labelCol1" :wrapper-col="wrapperCol1"> <template #label><span title="采购部门(purchase department)">采购部门(purchase department)</span></template> <JInput placeholder="请输入采购部门(purchase department)" v-model:value="queryParam.purchaseDepartment" allow-clear AutoComplete="off" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="purchaseman"> <template #label><span title="采购员(purchaseman)">采购员(purchaseman)</span></template> <JInput placeholder="请输入采购员(purchaseman)" v-model:value="queryParam.purchaseman" allow-clear AutoComplete="off" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="submit"> <template #label><span title="提交(submit)">提交(submit)</span></template> <JDictSelectTag v-model:value="queryParam.submit" placeholder="请选择" dictCode="yes_or_no" /> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item name="close" :label-col="labelCol1" :wrapper-col="wrapperCol1"> <template #label><span title="关闭(close)">关闭(close)</span></template> <JDictSelectTag v-model:value="queryParam.close" placeholder="请选择" dictCode="yes_or_no" /> </a-form-item> </a-col> </template> <a-col :xl="6" :lg="7" :md="8" :sm="24"> <span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> <a-col :lg="6"> <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button> <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> {{ toggleSearchStatus ? '收起' : '展开' }} <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> </a> </a-col> </span> </a-col> </a-row> </a-form> </div> <!--引用表格--> <BasicTable @register="registerTable" :rowSelection="rowSelection" size="small"> <!--插槽:table标题--> <template #tableTitle> <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" v-auth="'purCode:pur_delivery_note:add'"> 新增(add)</a-button> <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-auth="'purCode:pur_delivery_note:exportXls'"> 导出(export)</a-button > <a-button type="primary" @click="submit"> 提交(submit)</a-button> <a-button type="primary" @click="cancelSubmit"> 取消提交(cancelSubmit)</a-button> <a-button type="primary" @click="close"> 关闭(close)</a-button> <a-button type="primary" @click="cancelClose"> 取消关闭(cancel close)</a-button> <a-dropdown v-if="selectedRowKeys.length > 0"> <template #overlay> <a-menu> <a-menu-item key="1" @click="batchHandleDelete" v-auth="'purCode:pur_delivery_note:deleteBatch'"> <Icon icon="ant-design:delete-outlined" /> 删除(delete) </a-menu-item> </a-menu> </template> <a-button >批量操作 <Icon icon="mdi:chevron-down" /> </a-button> </a-dropdown> </template> <!--操作栏--> <template #action="{ record }"> <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> </template> <!--字段回显插槽--> <template #bodyCell="{ column, record, index, text }"> </template> </BasicTable> <!-- 表单区域 --> <ArriveGoodsFormModal @register="registerModal" @success="handleSuccess" /> </div> </template> <script lang="ts" name="purchase-purchaseInquiryForm" setup> import { ref, reactive, computed, unref, onMounted } from 'vue'; import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { useListPage } from '/@/hooks/system/useListPage'; import { useModal } from '/@/components/Modal'; import ArriveGoodsFormModal from './components/ArriveGoodsFormModal.vue'; import { columns } from './ArriveGoodsForm.data'; import { list, deleteOne, batchDelete, getImportUrl, bacthClose, cancelBatchClose, getExportUrl, batchSubmit, cancelBatchSubmit, ProjectOption, supplierOption, ClassList, } from './ArriveGoodsForm.api'; import { cloneDeep } from 'lodash-es'; import { defHttp } from '/@/utils/http/axios'; import { JDictSelectTag, ApiSelect, JInput } from '/@/components/Form'; import { message } from 'ant-design-vue'; const formRef = ref(); const queryParam = reactive<any>({}); //注册model const [registerModal, { openModal }] = useModal(); //注册table数据 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ tableProps: { title: '到货单', api: list, columns, canResize: false, useSearchForm: false, actionColumn: { width: 300, fixed: 'right', }, scroll: { x: '3000px', }, beforeFetch: async (params) => { let rangerQuery = await setRangeQuery(); return Object.assign(params, rangerQuery); }, }, exportConfig: { name: '到货单', url: getExportUrl, params: queryParam, }, importConfig: { url: getImportUrl, success: handleSuccess, }, }); const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; /** * 高级查询事件 */ function handleSuperQuery(params) { Object.keys(params).map((k) => { queryParam[k] = params[k]; }); reload(); } /** * 新增事件 */ function handleAdd() { openModal(true, { isUpdate: false, showFooter: true, }); } /** * 编辑事件 */ function handleEdit(record: Recordable) { openModal(true, { record, isUpdate: true, showFooter: true, }); } /** * 详情 */ function handleDetail(record: Recordable) { openModal(true, { record, isUpdate: true, showFooter: false, }); } /** * 删除事件 */ async function handleDelete(record) { await deleteOne({ id: record.id }, handleSuccess); } /** * 批量删除事件 */ async function batchHandleDelete() { await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); } /** * 成功回调 */ function handleSuccess() { (selectedRowKeys.value = []) && reload(); } /** * 操作栏 */ function getTableAction(record) { return [ { label: '编辑(edit)', onClick: handleEdit.bind(null, record), auth: 'purCode:pur_inquiry_form:edit', ifShow: record.submit == '0' || record.submit == '', }, { label: '详情(detail)', onClick: handleDetail.bind(null, record), ifShow: record.submit == '1', }, ]; } /** * 下拉操作栏 */ function getDropDownAction(record) { return [ { label: '详情(detail)', onClick: handleDetail.bind(null, record), ifShow: record.submit == '0' || record.submit == '', }, { label: '删除(delete)', popConfirm: { title: '是否确认删除', confirm: handleDelete.bind(null, record), placement: 'topLeft', }, auth: 'purCode:pur_delivery_note:delete', ifShow: record.submit == '0' || record.submit == '', }, ]; } function submit() { if (selectedRowKeys.value.length == 0) { message.warning('请选择数据'); } else { var ids = selectedRowKeys.value.join(','); batchSubmit({ ids: ids }, handleSuccess); } } function cancelSubmit() { if (selectedRowKeys.value.length == 0) { message.warning('请选择数据'); } else { var ids = selectedRowKeys.value.join(','); cancelBatchSubmit({ ids: ids }, handleSuccess); } } function close() { if (selectedRowKeys.value.length == 0) { message.warning('请选择数据'); } else { var ids = selectedRowKeys.value.join(','); bacthClose({ ids: ids }, handleSuccess); } } function cancelClose() { if (selectedRowKeys.value.length == 0) { message.warning('请选择数据'); } else { var ids = selectedRowKeys.value.join(','); cancelBatchClose({ ids: ids }, handleSuccess); } } /* ----------------------以下为原生查询需要添加的-------------------------- */ const toggleSearchStatus = ref<boolean>(false); const labelCol = reactive({ xs: 24, sm: 8, }); const wrapperCol = reactive({ xs: 24, sm: 16, }); const labelCol1 = reactive({ xs: 24, sm: 10, }); const wrapperCol1 = reactive({ xs: 24, sm: 14, }); /** * 重置 */ function searchReset() { formRef.value.resetFields(); selectedRowKeys.value = []; //刷新数据 reload(); } let rangeField = 'arrivalDate,'; /** * 设置范围查询条件 */ async function setRangeQuery() { let queryParamClone = cloneDeep(queryParam); if (rangeField) { let fieldsValue = rangeField.split(','); fieldsValue.forEach((item) => { if (queryParamClone[item]) { let range = queryParamClone[item]; queryParamClone[item + '_begin'] = range[0]; queryParamClone[item + '_end'] = range[1]; delete queryParamClone[item]; } else { queryParamClone[item + '_begin'] = ''; queryParamClone[item + '_end'] = ''; } }); } return queryParamClone; } </script> <style lang="less" scoped> .jeecg-basic-table-form-container { padding: 0; .table-page-search-submitButtons { display: block; margin-bottom: 8px; white-space: nowrap; } .query-group-cust { min-width: 100px !important; } .query-group-split-cust { width: 30px; display: inline-block; text-align: center; } .ant-form-item:not(.ant-form-item-with-help) { margin-bottom: 8px; height: 32px; } :deep(.ant-picker), :deep(.ant-input-number) { width: 100%; } } </style>