232 lines
8.1 KiB
Vue
232 lines
8.1 KiB
Vue
<template>
|
||
<Page>
|
||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging" label-width="100">
|
||
<ElFormItem label-width="90" label="Id">
|
||
<ElInput v-model="searchForm.id" placeholder="Id" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="编号">
|
||
<ElInput v-model="searchForm.sn" placeholder="编号" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="责任人">
|
||
<ElInput v-model="searchForm.responsibleId" placeholder="责任人" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="仓库">
|
||
<ElInput v-model="searchForm.warehouseId" placeholder="仓库" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="存放位置">
|
||
<ElInput v-model="searchForm.location" placeholder="存放位置" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="出库时间">
|
||
<ElInput v-model="searchForm.outTime" placeholder="出库时间" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="销售单">
|
||
<ElInput v-model="searchForm.orderId" placeholder="销售单" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="销售单号；wh_sales_order.sn">
|
||
<ElInput v-model="searchForm.orderSn" placeholder="销售单号；wh_sales_order.sn" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品分类 Id">
|
||
<ElInput v-model="searchForm.goodsCategoryId" placeholder="产品分类 Id" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="分类名称">
|
||
<ElInput v-model="searchForm.goodsCategoryName" placeholder="分类名称" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品 Id">
|
||
<ElInput v-model="searchForm.goodsId" placeholder="产品 Id" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="产品名称">
|
||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="商品编码">
|
||
<ElInput v-model="searchForm.goodSn" placeholder="商品编码" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="数量">
|
||
<ElInput v-model="searchForm.quantity" placeholder="数量" />
|
||
</ElFormItem>
|
||
<!-- <ElFormItem label-width="90" label="计量单位；字典代码：unit">
|
||
<ElInput
|
||
v-model="searchForm.unit"
|
||
placeholder="计量单位；字典代码：unit"/>
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="备注">
|
||
<ElInput v-model="searchForm.memo" placeholder="备注" />
|
||
</ElFormItem>
|
||
<!-- <ElFormItem label-width="90" label="创建人 Id； sys_user.id">
|
||
<ElInput
|
||
v-model="searchForm.creatorId"
|
||
placeholder="创建人 Id； sys_user.id"/>
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="修改人 Id； sys_user.id">
|
||
<ElInput
|
||
v-model="searchForm.modifierId"
|
||
placeholder="修改人 Id； sys_user.id"/>
|
||
</ElFormItem> -->
|
||
<ElFormItem label-width="90" label="创建时间">
|
||
<ElInput v-model="searchForm.createTime" placeholder="创建时间" />
|
||
</ElFormItem>
|
||
<ElFormItem label-width="90" label="修改时间">
|
||
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
|
||
</ElFormItem>
|
||
<ElFormItem>
|
||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
|
||
<div class="tool-bar">
|
||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
|
||
</div>
|
||
|
||
<ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
|
||
<!-- <ElTableColumn label="Id" prop="id"/> -->
|
||
<ElTableColumn label="编号" prop="sn" />
|
||
<ElTableColumn label="仓库" prop="warehouseName" />
|
||
<ElTableColumn label="存放位置" prop="location" />
|
||
<ElTableColumn label="出库时间" prop="outTime" width="170px" />
|
||
<ElTableColumn label="销售单号" prop="orderSn" width="140px"/>
|
||
<ElTableColumn label="分类名称" prop="goodsCategoryName" />
|
||
<ElTableColumn label="产品名称" prop="goodsName" />
|
||
<ElTableColumn label="商品编码" prop="goodSn" width="100px" />
|
||
<ElTableColumn label="数量" prop="quantity" />
|
||
<ElTableColumn label="计量单位" prop="unit" />
|
||
<ElTableColumn label="备注" prop="memo" />
|
||
<ElTableColumn label="创建时间" prop="createTime" width="170px" />
|
||
<ElTableColumn label="修改时间" prop="modifyTime" width="170px" />
|
||
<ElTableColumn label="操作" width="180">
|
||
<template #default="scope">
|
||
<div class="action-btn">
|
||
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||
<template #reference>
|
||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||
</template>
|
||
</ElPopconfirm>
|
||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
<ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
|
||
<OutOrderForm ref="outOrderForm" @edit-succ="paging" />
|
||
</Page>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import OutOrderApi from "@/pages/wh/out-order/out-order-api.ts";
|
||
import OutOrderForm from "@/pages/wh/out-order/OutOrderForm.vue";
|
||
import Page from "@/components/page/Page.vue";
|
||
import { elIcons } from "@/common/element/element.ts";
|
||
import Utils from "@/common/utils";
|
||
|
||
const totalCount = ref(0);
|
||
const tableData = Utils.resetAble(reactive<OutOrderTypes.SearchOutOrderResult[]>([]));
|
||
const searchForm = Utils.resetAble(
|
||
reactive<OutOrderTypes.SearchOutOrderParam>({
|
||
current: 1,
|
||
size: 20,
|
||
})
|
||
);
|
||
const searching = ref(false);
|
||
const deling = ref(false);
|
||
const showSearchForm = ref(true);
|
||
const outOrderFormIns = useTemplateRef<InstanceType<typeof OutOrderForm>>("outOrderForm");
|
||
|
||
function showDialog(data?: OutOrderTypes.SearchOutOrderResult) {
|
||
outOrderFormIns.value?.open(data);
|
||
}
|
||
|
||
function delHandler({ row }: { row: OutOrderTypes.SearchOutOrderResult }) {
|
||
deling.value = true;
|
||
OutOrderApi.del([row.id!])
|
||
.then(() => {
|
||
ElMessage.success("删除成功");
|
||
paging();
|
||
})
|
||
.finally(() => {
|
||
deling.value = false;
|
||
});
|
||
}
|
||
|
||
function modifyHandler({ row }: { row: OutOrderTypes.SearchOutOrderResult }) {
|
||
showDialog(row);
|
||
}
|
||
|
||
function addHandler() {
|
||
showDialog();
|
||
}
|
||
|
||
function reset() {
|
||
searchForm.$reset();
|
||
paging();
|
||
}
|
||
|
||
function paging() {
|
||
searching.value = true;
|
||
OutOrderApi.paging(searchForm)
|
||
.then((res) => {
|
||
totalCount.value = res.data?.total ?? 0;
|
||
tableData.$reset(res.data?.records ?? []);
|
||
})
|
||
.finally(() => {
|
||
searching.value = false;
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
paging();
|
||
});
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.table-list {
|
||
flex 1;
|
||
margin 0 0 20px 0
|
||
width 100%
|
||
|
||
:deep(.table-header) {
|
||
color #454C59
|
||
|
||
th {
|
||
background-color #EDF1F7
|
||
font-weight 500
|
||
position relative
|
||
|
||
& > div {
|
||
display flex
|
||
gap 5px
|
||
align-items center
|
||
}
|
||
|
||
&:not(:first-child) > div::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 1px;
|
||
width: 1px;
|
||
background-color: #D3D7DE;
|
||
transform: translateY(-50%);
|
||
content: "";
|
||
height 50%
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.table-cell) {
|
||
color #2F3540
|
||
}
|
||
.action-btn {
|
||
width 100%
|
||
display flex
|
||
flex-wrap wrap
|
||
|
||
& > button {
|
||
margin 0
|
||
}
|
||
}
|
||
}
|
||
|
||
.tool-bar {
|
||
display flex
|
||
justify-content space-between
|
||
margin 0 0 20px 0
|
||
}
|
||
</style>
|