<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="bideliveryDatellDate">
<template #label><span title="发货日期(delivery date)">发货日期(delivery date)</span></template>
<a-range-picker value-format="YYYY-MM-DD" v-model:value="queryParam.deliveryDate" class="query-group-cust" />
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :lg="8">
<a-form-item name="project">
<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="customer">
<template #label><span title="客户(customer)">客户(customer)</span></template>
<ApiSelect
:api="CustomerOption"
showSearch
v-model:value="queryParam.customer"
:filterOption="true"
resultField="records"
labelField="abbreviation"
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">
<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="saleDepartment">
<template #label><span title="销售部门(sale department)">销售部门(sale department)</span></template>
<JInput placeholder="请输入销售部门(sale department)" v-model:value="queryParam.saleDepartment" allow-clear AutoComplete="off" />
</a-form-item>
</a-col>
<a-col :lg="8">
<a-form-item name="salesman">
<template #label><span title="业务员(salesman)">业务员(salesman)</span></template>
<JInput placeholder="请输入业务员(salesman)" v-model:value="queryParam.salesman" 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">
<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="'saleCode:sale_delivery:add'"> 新增(add)</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-auth="'saleCode:sale_delivery: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-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete" v-auth="'saleCode:sale_delivery: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>
<template #viewFile="props">
<a @click="viewFileDetail(props)">查看(view)</a>
</template>
</BasicTable>
<ViewFileListModal ref="ViewFileListModalRef" />
<deliveryNoticeFormModal @register="registerModal" @success="handleSuccess" />
<!-- 表单区域 -->
</div>
</template>
<script lang="ts" name="saleCode-saleInquiryForm" 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 { columns } from './delivertNoticeForm.data';
import {
list,
deleteOne,
batchDelete,
getImportUrl,
getExportUrl,
batchSubmit,
cancelBatchSubmit,
bacthClose,
ProjectOption,
CustomerOption,
ClassList,
getExportXlsBags,
getExportXlsInvoice
} from './delivertNoticeForm.api';
import { JDictSelectTag, ApiSelect, JInput } from '/@/components/Form';
import ViewFileListModal from './components/ViewFileListModal.vue';
import deliveryNoticeFormModal from './components/deliveryNoticeFormModal.vue';
import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
const formRef = ref();
const ViewFileListModalRef = ref();
const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
//注册model
const [registerModal, { openModal }] = useModal();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '发货通知单',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 340,
fixed: 'right',
},
scroll: {
x: '3500px',
},
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 handleAdd() {
openModal(true, {
isUpdate: false,
showFooter: true,
isRevise: false,
});
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
showFooter: true,
isRevise: false,
});
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
showFooter: false,
isRevise: 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),
ifShow: record.submit == '0',
auth: 'saleCode:sale_delivery:edit',
},
{
label: '详情(detail)',
onClick: handleDetail.bind(null, record),
ifShow: record.submit == '1',
},
];
}
/**
* 下拉操作栏
*/
function getDropDownAction(record) {
return [
{
label: '删除(delete)',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
placement: 'topLeft',
},
auth: 'saleCode:sale_delivery:delete',
ifShow: record.submit == '0',
},
{
label: '导出装箱单(export paking list)',
onClick: handleExportrow.bind(null,record,'paking'),
},
{
label: '导出签单(export markt)',
},
{
label: '导出唛头(export mark) ',
},
{
label: '导出随货发票(export accompanying invoice) ',
onClick: handleExportrow.bind(null,record,'invoice'),
},
];
}
async function handleExportrow(record,event){
var obj={
id : record.id
}
var rowUrl = event=='paking'?getExportXlsBags:getExportXlsInvoice
const {onExportXls} = useListPage({
tableProps: {
beforeFetch: async (params) => {
let rangerQuery = await setRangeQuery();
return Object.assign(params, rangerQuery);
},
},
exportConfig: {
name: record.billCode,
url: rowUrl,
params: obj,
},
});
await onExportXls();
}
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 viewFileDetail(props) {
ViewFileListModalRef.value.getTable(props.column.dataIndex, props.record);
}
function close() {
if (selectedRowKeys.value.length == 0) {
message.warning('请选择数据');
} else {
var ids = selectedRowKeys.value.join(',');
bacthClose({ 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: 12,
});
const wrapperCol1 = reactive({
xs: 24,
sm: 12,
});
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//刷新数据
reload();
}
let rangeField = 'deliveryDate,';
/**
* 设置范围查询条件
*/
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>