You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
9.4 KiB
Vue
378 lines
9.4 KiB
Vue
1 year ago
|
<template>
|
||
|
|
<div class="h-full">
|
||
|
|
<my-card title="搜索条件" search>
|
||
|
|
<n-form ref="formRef" inline label-width="auto" :model="searchForm" size="medium">
|
||
|
|
<n-form-item label="采购订单编号">
|
||
|
|
<n-input v-model:value="searchForm.poCode" placeholder="请输入采购订单编号" />
|
||
|
|
</n-form-item>
|
||
|
|
<n-form-item label="供应商名称">
|
||
|
|
<n-input v-model:value="searchForm.vendorName" placeholder="请输入供应商名称" />
|
||
|
|
</n-form-item>
|
||
|
|
<n-form-item label="单据状态">
|
||
|
|
<n-select v-model:value="searchForm.status" class="w-180px" :options="wms_item_recpt_status"></n-select>
|
||
|
|
<!-- <n-input v-model:value="searchForm.status" placeholder="请选择单据状态" /> -->
|
||
|
|
</n-form-item>
|
||
|
|
<n-form-item>
|
||
|
|
<component :is="useSearchBtn(search, reset)"></component>
|
||
|
|
</n-form-item>
|
||
|
|
</n-form>
|
||
|
|
</my-card>
|
||
|
|
<my-card title="采购入库列表">
|
||
|
|
<template #right>
|
||
|
|
<div class="flex-center">
|
||
|
|
<component
|
||
|
|
:is="useDelBtn(delSelect, undefined, '确定要删除所有已选中的数据吗？', Boolean(!selectKeys.length))"
|
||
|
|
v-hasPermi="['wms:recpt:remove']"
|
||
|
|
></component>
|
||
|
|
<!-- <component :is="useAddBtn(handleAddTable, undefined, '新增')" v-hasPermi="['wms:recpt:add']"></component>
|
||
|
|
<component :is="useDownBtn(handleExport)"></component> -->
|
||
|
|
<n-button size="small" class="mr-5px" type="primary" @click="getWmsItemRecptData">
|
||
|
|
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
|
||
|
|
刷新表格
|
||
|
|
</n-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div>
|
||
|
|
<n-data-table
|
||
|
|
:row-key="row => row.recptId"
|
||
|
|
:columns="columns"
|
||
|
|
:data="data"
|
||
|
|
:loading="loading"
|
||
|
|
:scroll-x="1000"
|
||
|
|
@update-checked-row-keys="handleSelect"
|
||
|
|
/>
|
||
|
|
<my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
|
||
|
|
</div>
|
||
|
|
<table-action-modal
|
||
|
|
v-model:visible="showModal"
|
||
|
|
:type="modalType"
|
||
|
|
:edit-data="editData"
|
||
|
|
:get-list="getWmsItemRecptData"
|
||
|
|
/>
|
||
|
|
</my-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="tsx" setup>
|
||
|
|
import { ref, getCurrentInstance } from 'vue';
|
||
|
|
import type { Ref } from 'vue';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
import { useMessage } from 'naive-ui';
|
||
|
|
import type { DataTableColumns, DataTableRowKey } from 'naive-ui';
|
||
|
|
import { useLoading, useBoolean } from '@/hooks';
|
||
|
|
// import { deepClone } from '@/utils';
|
||
|
|
import { selectWmsItemRecptList, delWmsItemRecpt } from '@/service/api/wms/recpt';
|
||
|
|
import { useSearchBtn, useDelBtn, useBtn, useEditBtn } from '@/hooks/common/useBtn';
|
||
|
|
// import { download } from '@/service/request/helpers';
|
||
|
|
import type { ModalType } from './components/table-action-modal.vue';
|
||
|
|
import TableActionModal from './components/table-action-modal.vue';
|
||
|
|
const router = useRouter();
|
||
|
|
const { proxy } = getCurrentInstance() as any;
|
||
|
|
const { wms_item_recpt_status } = proxy.useDict('wms_item_recpt_status', 'wms_item_recpt_type');
|
||
|
|
|
||
|
|
// const collapseFlag = ref<boolean>(false);
|
||
|
|
const { bool: showModal } = useBoolean();
|
||
|
|
const modalType = ref<ModalType>('add');
|
||
|
|
// const menuOptions = ref();
|
||
|
|
const message = useMessage();
|
||
|
|
|
||
|
|
// const delIds = ref();
|
||
|
|
// const show = ref(false);
|
||
|
|
const total = ref();
|
||
|
|
const page = ref(1);
|
||
|
|
const searchForm = ref({
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
poCode: undefined,
|
||
|
|
vendorName: undefined,
|
||
|
|
attr1: 'YL',
|
||
|
|
status: null
|
||
|
|
});
|
||
|
|
|
||
|
|
const editData = ref<wms.recptRawType.columns>({
|
||
|
|
recptId: null,
|
||
|
|
recptCode: null,
|
||
|
|
recptName: null,
|
||
|
|
iqcId: null,
|
||
|
|
iqcCode: null,
|
||
|
|
poCode: null,
|
||
|
|
vendorId: null,
|
||
|
|
vendorCode: null,
|
||
|
|
vendorName: null,
|
||
|
|
vendorNick: null,
|
||
|
|
warehouseId: null,
|
||
|
|
warehouseCode: null,
|
||
|
|
warehouseName: null,
|
||
|
|
locationId: null,
|
||
|
|
locationCode: null,
|
||
|
|
locationName: null,
|
||
|
|
areaId: null,
|
||
|
|
areaCode: null,
|
||
|
|
areaName: null,
|
||
|
|
recptDate: null,
|
||
|
|
status: null,
|
||
|
|
remark: null,
|
||
|
|
attr1: null,
|
||
|
|
attr2: null,
|
||
|
|
attr3: null,
|
||
|
|
attr4: null,
|
||
|
|
createBy: null,
|
||
|
|
createTime: null,
|
||
|
|
updateBy: null,
|
||
|
|
updateTime: null,
|
||
|
|
type: null,
|
||
|
|
fromBillId: null,
|
||
|
|
fromBillCode: null,
|
||
|
|
fromBillName: null,
|
||
|
|
snidCode: null,
|
||
|
|
createByNick: null,
|
||
|
|
manageBy: null,
|
||
|
|
manageByNick: null,
|
||
|
|
headBy: null,
|
||
|
|
headByNick: null,
|
||
|
|
salseDeptId: null,
|
||
|
|
salseDeptName: null,
|
||
|
|
salseBy: null,
|
||
|
|
salseByNick: null
|
||
|
|
});
|
||
|
|
|
||
|
|
const selectKeys = ref<DataTableRowKey[]>([]);
|
||
|
|
function handleSelect(keys: DataTableRowKey[]) {
|
||
|
|
selectKeys.value = keys;
|
||
|
|
}
|
||
|
|
const data = ref<wms.recptRawType.columns[]>([]);
|
||
|
|
const columns: Ref<DataTableColumns<wms.recptRawType.columns>> = ref([
|
||
|
|
{
|
||
|
|
type: 'selection',
|
||
|
|
align: 'center'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库单编号',
|
||
|
|
key: 'recptCode',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库单名称',
|
||
|
|
key: 'recptName',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '采购订单编号',
|
||
|
|
key: 'poCode',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '供应商名称',
|
||
|
|
key: 'vendorName',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '仓库名称',
|
||
|
|
key: 'warehouseName',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// title: '库区名称',
|
||
|
|
// key: 'locationName',
|
||
|
|
// align: 'center',
|
||
|
|
// width: 110
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// title: '库位名称',
|
||
|
|
// key: 'areaName',
|
||
|
|
// align: 'center',
|
||
|
|
// width: 110
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
title: '入库日期',
|
||
|
|
key: 'recptDate',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '单据状态',
|
||
|
|
key: 'status',
|
||
|
|
align: 'center',
|
||
|
|
render: row => {
|
||
|
|
return <dict-tag options={wms_item_recpt_status.value} value={row.status}></dict-tag>;
|
||
|
|
},
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '来源单据编码',
|
||
|
|
key: 'fromBillCode',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '负责人简称',
|
||
|
|
key: 'headByNick',
|
||
|
|
align: 'center',
|
||
|
|
width: 110,
|
||
|
|
ellipsis: {
|
||
|
|
tooltip: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
key: 'action',
|
||
|
|
fixed: 'right',
|
||
|
|
width: 220,
|
||
|
|
align: 'center',
|
||
|
|
render: row => {
|
||
|
|
console.log(wms_item_recpt_status.value, row.status, '----');
|
||
|
|
const Btn: JSX.Element[] = [];
|
||
|
|
if (row.status !== 'FINISHED') {
|
||
|
|
Btn.push(
|
||
|
|
useEditBtn(
|
||
|
|
() => {
|
||
|
|
router.push({
|
||
|
|
name: 'storage_auxiliaryProduceinfo',
|
||
|
|
query: { id: row.recptId, warehouseId: row.warehouseId }
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'tiny',
|
||
|
|
'执行入库'
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
// Btn.push(
|
||
|
|
// useInfoBtn(
|
||
|
|
// () => {
|
||
|
|
// router.push({
|
||
|
|
// name: 'storage_auxiliaryProduceinfo',
|
||
|
|
// query: { id: row.recptId, warehouseId: row.warehouseId, info: 'true' }
|
||
|
|
// });
|
||
|
|
// },
|
||
|
|
// 'tiny',
|
||
|
|
// '查看详情'
|
||
|
|
// )
|
||
|
|
// );
|
||
|
|
|
||
|
|
// Btn.push(
|
||
|
|
// useDelBtn(() => {
|
||
|
|
// delWmsItemRecpt(row.recptId as number).then(res => {
|
||
|
|
// if (res.code === 200) {
|
||
|
|
// window.$message?.success('删除成功');
|
||
|
|
// init();
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// }, 'tiny')
|
||
|
|
// );
|
||
|
|
return Btn;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]) as Ref<DataTableColumns<any>>;
|
||
|
|
|
||
|
|
const { loading, startLoading, endLoading } = useLoading(false);
|
||
|
|
// const { setTrue: openModal } = useBoolean();
|
||
|
|
|
||
|
|
// function setModalType(type: ModalType) {
|
||
|
|
// modalType.value = type;
|
||
|
|
// }
|
||
|
|
// 重置
|
||
|
|
function reset() {
|
||
|
|
searchForm.value.pageNum = 1;
|
||
|
|
page.value = 1;
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const { pageNum, pageSize, ...rest } = searchForm.value;
|
||
|
|
for (const key in rest) {
|
||
|
|
if (searchForm.value[key] !== '' && searchForm.value[key] !== 'YL') {
|
||
|
|
searchForm.value[key] = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getWmsItemRecptData();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleEditTable(issueId: number) {
|
||
|
|
console.log("执行部入库操作", issueId)
|
||
|
|
}
|
||
|
|
|
||
|
|
function search() {
|
||
|
|
searchForm.value.pageNum = 1;
|
||
|
|
init();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 新增
|
||
|
|
// function handleAddTable() {
|
||
|
|
// setModalType('add');
|
||
|
|
|
||
|
|
// openModal();
|
||
|
|
// }
|
||
|
|
// 编辑
|
||
|
|
// async function handleEditTable(recptId: number) {
|
||
|
|
// getWmsItemRecpt(recptId).then(res => {
|
||
|
|
// for (const key in res.data) {
|
||
|
|
// if ((key.includes('Date') || key.includes('Time')) && key !== 'createTime' && key !== 'updateTime') {
|
||
|
|
// res.data[key] = new Date(res.data[key] as unknown as string).getTime();
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// editData.value = deepClone(res.data);
|
||
|
|
// editData.value.recptDate = new Date(editData.value.recptDate as unknown as string).getTime();
|
||
|
|
// setModalType('edit');
|
||
|
|
// openModal();
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
|
||
|
|
// 获取信息
|
||
|
|
function getWmsItemRecptData() {
|
||
|
|
startLoading();
|
||
|
|
selectWmsItemRecptList({ params: searchForm.value }).then(res => {
|
||
|
|
data.value = res.rows;
|
||
|
|
total.value = res.total;
|
||
|
|
searchForm.value.total = res.total;
|
||
|
|
if (data.value) {
|
||
|
|
setTimeout(() => {
|
||
|
|
endLoading();
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 删除
|
||
|
|
function delSelect() {
|
||
|
|
delWmsItemRecpt(selectKeys.value.join(',') as string).then(() => {
|
||
|
|
getWmsItemRecptData();
|
||
|
|
message.success('删除成功');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// function handleExport() {
|
||
|
|
// show.value = true;
|
||
|
|
// }
|
||
|
|
function init() {
|
||
|
|
getWmsItemRecptData();
|
||
|
|
// 获取供应商列表
|
||
|
|
}
|
||
|
|
init();
|
||
|
|
</script>
|