IOT/ims-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面逻辑

Browse Source
This commit is contained in:
mayong 2024-12-04 21:56:24 +08:00
parent b9fefb123a
commit 5632412229
9 changed files with 553 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components.d.ts vendored
View File

@ -9,21 +9,14 @@ declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
AAlert: typeof import('ant-design-vue/es')['Alert'] AAlert: typeof import('ant-design-vue/es')['Alert']
AAvatar: typeof import('ant-design-vue/es')['Avatar'] AAvatar: typeof import('ant-design-vue/es')['Avatar']
ABadge: typeof import('ant-design-vue/es')['Badge']
ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
AButton: typeof import('ant-design-vue/es')['Button'] AButton: typeof import('ant-design-vue/es')['Button']
ACard: typeof import('ant-design-vue/es')['Card'] ACard: typeof import('ant-design-vue/es')['Card']
ACardGrid: typeof import('ant-design-vue/es')['CardGrid']
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
ACol: typeof import('ant-design-vue/es')['Col'] ACol: typeof import('ant-design-vue/es')['Col']
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider'] AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADatePicker: typeof import('ant-design-vue/es')['DatePicker'] ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
ADivider: typeof import('ant-design-vue/es')['Divider'] ADivider: typeof import('ant-design-vue/es')['Divider']
ADrawer: typeof import('ant-design-vue/es')['Drawer'] ADrawer: typeof import('ant-design-vue/es')['Drawer']
ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ADropdown: typeof import('ant-design-vue/es')['Dropdown']
AFlex: typeof import('ant-design-vue/es')['Flex']
AFloatButton: typeof import('ant-design-vue/es')['FloatButton'] AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
AForm: typeof import('ant-design-vue/es')['Form'] AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem'] AFormItem: typeof import('ant-design-vue/es')['FormItem']
@ -48,9 +41,7 @@ declare module 'vue' {
ARow: typeof import('ant-design-vue/es')['Row'] ARow: typeof import('ant-design-vue/es')['Row']
ASelect: typeof import('ant-design-vue/es')['Select'] ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption'] ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASlider: typeof import('ant-design-vue/es')['Slider']
ASpace: typeof import('ant-design-vue/es')['Space'] ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
AStatistic: typeof import('ant-design-vue/es')['Statistic'] AStatistic: typeof import('ant-design-vue/es')['Statistic']
ASteps: typeof import('ant-design-vue/es')['Steps'] ASteps: typeof import('ant-design-vue/es')['Steps']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu'] ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
@ -61,7 +52,6 @@ declare module 'vue' {
ATag: typeof import('ant-design-vue/es')['Tag'] ATag: typeof import('ant-design-vue/es')['Tag']
ATooltip: typeof import('ant-design-vue/es')['Tooltip'] ATooltip: typeof import('ant-design-vue/es')['Tooltip']
ATransfer: typeof import('ant-design-vue/es')['Transfer'] ATransfer: typeof import('ant-design-vue/es')['Transfer']
ATree: typeof import('ant-design-vue/es')['Tree']
ATypographyLink: typeof import('ant-design-vue/es')['TypographyLink'] ATypographyLink: typeof import('ant-design-vue/es')['TypographyLink']
ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph'] ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle'] ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
@ -91,8 +81,6 @@ declare module 'vue' {
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
RowComponentItem: typeof import('./components/form-designer/component-container/row-component-item.vue')['default'] RowComponentItem: typeof import('./components/form-designer/component-container/row-component-item.vue')['default']
SearchTree: typeof import('./components/search-tree.vue')['default']
SelectedTree: typeof import('./components/search-tree.vue')['default']
TreeDataTable: typeof import('./components/form-designer/config-panel/tree-data-table.vue')['default'] TreeDataTable: typeof import('./components/form-designer/config-panel/tree-data-table.vue')['default']
ValidateRuleConfig: typeof import('./components/form-designer/config-panel/validate-rule-config.vue')['default'] ValidateRuleConfig: typeof import('./components/form-designer/config-panel/validate-rule-config.vue')['default']
} }

188
src/views/stock/component/apply-page.vue
View File

@ -1,36 +1,36 @@
<template> <template>
<page-container> <page-container>
<!-- 页面操作栏 --> <!-- 页面操作栏 -->
<template #ops> <template #ops>
<a-row> <a-row>
<a-col :span="18"> <a-col :span="18">
<a-input-search v-model:value="searchKey" :placeholder="`请输入`" allow-clear enter-button <a-input-search v-model:value="searchKey" :placeholder="`请输入`" allow-clear enter-button
@search="loadData()"></a-input-search> @search="loadData()"></a-input-search>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-button type="primary" style="margin-left: 10px" @click="showModal"> <a-button type="primary" style="margin-left: 10px" @click="showModal">
<template #icon> <template #icon>
<icon-font type="icon-plus" /> <icon-font type="icon-plus" />
</template> </template>
{{ pageType === '1'? '申请入库' : '申请出库' }} {{ pageType === '1' ? '申请入库' : '申请出库' }}
</a-button> </a-button>
</a-col> </a-col>
</a-row> </a-row>
</template> </template>
<!-- 页面表格内容 --> <!-- 页面表格内容 -->
<div style="min-height: calc(100vh - 305px)"> <div style="min-height: calc(100vh - 305px)">
<!-- 表格行 --> <!-- 表格行 -->
<a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination" <a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination" :loading="loading"
:loading="loading" row-key="key"> row-key="key">
</a-table> </a-table>
</div> </div>
</page-container> </page-container>
<!-- 弹窗 --> <!-- 弹窗 -->
<a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk"> <a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
<apply></apply> <apply></apply>
</a-modal> </a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -41,14 +41,14 @@ import apply from './applyModal.vue';
const props = defineProps({ const props = defineProps({
pageType: { pageType: {
type: String as PropType<'1' | '2' >, // 1 入库 2 出库 type: String as PropType<'1' | '2'>, // 1 入库 2 出库
required: false, required: false,
default: '1' default: '1'
} }
}) })
const { pageType} = toRefs(props) const { pageType } = toRefs(props)
const searchKey = ref('') const searchKey = ref('')
const pagedata = ref<IPage<material.ApplyForm>>() const pagedata = ref<IPage<material.ApplyForm>>()
@ -58,89 +58,89 @@ const loading = ref(false)
// 加载数据的方法 // 加载数据的方法
const loadData = async (page = 1, size = 10) => { const loadData = async (page = 1, size = 10) => {
loading.value = true loading.value = true
api.materialApi.apply.applies( api.materialApi.apply.applies(
//1: 采购入库 2: 归还入库 3: 出库外借 //1: 采购入库 2: 归还入库 3: 出库外借
{ type: 1, page: page || pagedata.value?.current, size: size || pagedata.value?.size, key: searchKey.value }, { type: 1, page: page || pagedata.value?.current, size: size || pagedata.value?.size, key: searchKey.value },
(data) => { (data) => {
loading.value = false loading.value = false
pagedata.value = data pagedata.value = data
}, },
) )
} }
//初始加载 //初始加载
loadData() loadData()
//表格列 //表格列
const columns = [ const columns = [
{ {
title: '类型', title: '类型',
dataIndex: 'type', dataIndex: 'type',
}, },
{ {
title: '申请人', title: '申请人',
dataIndex: 'applicant', dataIndex: 'applicant',
}, },
{ {
title: '申请日期', title: '申请日期',
dataIndex: 'applyDate', dataIndex: 'applyDate',
}, },
{ {
title: '是否确认', title: '是否确认',
dataIndex: 'isConfirm', dataIndex: 'isConfirm',
}, },
{ {
title: '创建人', title: '创建人',
dataIndex: 'createdBy', dataIndex: 'createdBy',
}, },
{ {
title: '创建时间', title: '创建时间',
dataIndex: 'createdTime', dataIndex: 'createdTime',
} }
] ]
//分页信息 //分页信息
const pagination = computed(() => { const pagination = computed(() => {
return { return {
current: pagedata.value?.current, current: pagedata.value?.current,
pageSize: pagedata.value?.size, pageSize: pagedata.value?.size,
total: pagedata.value?.total, total: pagedata.value?.total,
onChange: (page: number, pageSize: number) => { onChange: (page: number, pageSize: number) => {
loadData(page, pageSize) loadData(page, pageSize)
}, },
} }
}) })
const open = ref<boolean>(false); const open = ref<boolean>(false);
const showModal = () => { const showModal = () => {
open.value = true; open.value = true;
}; };
const handleOk = (e: MouseEvent) => { const handleOk = (e: MouseEvent) => {
console.log(e); console.log(e);
open.value = false; open.value = false;
}; };
</script> </script>
<style lang="less"> <style lang="less">
.full-modal { .full-modal {
.ant-modal { .ant-modal {
max-width: 100%; max-width: 100%;
top: 0; top: 0;
padding-bottom: 0; padding-bottom: 0;
margin: 0; margin: 0;
} }
.ant-modal-content { .ant-modal-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh); height: calc(100vh);
} }
.ant-modal-body { .ant-modal-body {
flex: 1; flex: 1;
} }
} }
</style> </style>

79
src/views/stock/component/applyConfirm.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div>
<vxe-table border show-overflow ref="tableRef" max-height="500" size="medium"
:edit-config="{ trigger: 'manual', mode: 'cell' }" v-model:data="tableData">
<vxe-column type="seq" width="70" />
<vxe-column field="name" title="物料名称" />
<vxe-column field="scan" title="是否扫码" />
<vxe-column field="applyNum" title="申请数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
<vxe-column field="scanNum" title="扫码数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
<vxe-column field="remark" title="备注" :edit-render="{ name: 'VxeInput' }" />
<vxe-column title="操作">
<template #default="{ row }">
<template v-if="hasEditStatus(row)">
<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
<vxe-button @click="cancelRowEvent()">取消</vxe-button>
</template>
<template v-else>
<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
</template>
</template>
</vxe-column>
</vxe-table>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VxeUI, VxeTableInstance } from 'vxe-table'
interface RowVO {
id: number
name: string
scan: string
applyNum: number
scanNum: number
remark: string
}
const tableRef = ref<VxeTableInstance<RowVO>>()
const loading = ref(false)
const tableData = ref<RowVO[]>()
const hasEditStatus = (row: RowVO) => {
const $table = tableRef.value
if ($table) {
return $table.isEditByRow(row)
}
}
const editRowEvent = (row: RowVO) => {
const $table = tableRef.value
if ($table) {
$table.setEditRow(row)
}
}
const saveRowEvent = (row: RowVO) => {
const $table = tableRef.value
if ($table) {
$table.clearEdit().then(() => {
loading.value = true
setTimeout(() => {
loading.value = false
VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
}, 300)
})
}
}
const cancelRowEvent = () => {
const $table = tableRef.value
if ($table) {
$table.clearEdit()
}
}
</script>

231
src/views/stock/component/applyForm.vue
View File

@ -1,92 +1,98 @@
<template> <template>
<!-- 基本信息的表单 --> <!-- 基本信息的表单 -->
<div> <div>
<a-form :model="formData" name="basic" layout="horizontal" labelWrap> <a-form :model="formData" name="basic" layout="horizontal" labelWrap>
<a-form-item label="申请人" name="applicant"> <a-form-item label="申请人" name="applicant">
<a-input :value="formData.applicant" style="width: 40%;" /> <a-input :value="formData.applicant" style="width: 40%;" />
</a-form-item> </a-form-item>
<a-form-item label="申请类型" name="applyType"> <a-form-item label="申请类型" name="applyType">
<a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%;"> <a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%;">
<a-radio-button value='1'>采购入库</a-radio-button> <a-radio-button value='1'>采购入库</a-radio-button>
<a-radio-button value='2'>归还入库</a-radio-button> <a-radio-button value='2'>归还入库</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="申请日期" name="applyDate" style="width: 40%;" > <a-form-item label="申请日期" name="applyDate" style="width: 40%;">
<a-date-picker v-model:value="formData.applyDate" /> <a-date-picker v-model:value="formData.applyDate" />
</a-form-item> </a-form-item>
<a-form-item label="入库物料" name="selected"> <a-form-item label="入库物料" name="selected">
<a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料" <a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料" style="width: 40%;"
style="width: 40%;" showArrow :options="options" @deselect="removeEvent" showArrow :options="options" @deselect="removeEvent" @select="insertEvent"></a-select>
@select="insertEvent"></a-select> </a-form-item>
</a-form-item> </a-form>
</a-form> </div>
</div>
<!-- vxe-table --> <!-- vxe-table -->
<div> <div>
<vxe-table border show-overflow ref="tableRef" max-height="500" size="medium" v-model:data="tableData" <vxe-table border show-overflow ref="tableRef" max-height="500" size="medium" v-model:data="tableData"
empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true }"> empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true }">
<vxe-column type="seq" title="序号" width="60" /> <vxe-column type="seq" title="序号" width="60" />
<vxe-column field="id" title="物料id" :visible="false" /> <vxe-column field="id" title="物料id" :visible="false" />
<vxe-column field="name" title="物料名称" /> <vxe-column field="name" title="物料名称" />
<vxe-column field="code" title="编码" /> <vxe-column field="code" title="编码" />
<vxe-column field="spec" title="规格" /> <vxe-column field="spec" title="规格" />
<vxe-column field="type" title="类型" /> <vxe-column field="type" title="类型" />
<vxe-column field="assignRule" title="赋码规则" /> <vxe-column field="assignRule" title="赋码规则" />
<vxe-column field="quantity" title="申请数量(点击修改)" :edit-render="{ name: 'input', autoSelect: true }" <vxe-column field="quantity" title="申请数量(点击修改)" :edit-render="{ name: 'input', autoSelect: true }"
keyboard-config="{edit: true, del: true}" cell-type="number"> keyboard-config="{edit: true, del: true}" cell-type="number">
<template #edit="{ row }"> <template #edit="{ row }">
<vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input> <vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input>
</template> </template>
</vxe-column> </vxe-column>
<vxe-column field="oprator" title="操作"> <vxe-column field="oprator" title="操作">
<template #default="{ row }"> <template #default="{ row }">
<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button> <vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { VxeTableInstance } from 'vxe-table' import { VxeTableInstance } from 'vxe-table'
import api from '@/api' import api from '@/api'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import dayjs,{Dayjs} from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
// 和外层界面的数据交互
const getTableData = () => {
const $table = tableRef.value
return $table?.getTableData().fullData;
}
defineExpose({ getTableData})
interface FormData { interface FormData {
applicant: string; // 申请人 applicant: string; // 申请人
applyDate: Dayjs; // 申请日期 applyDate: Dayjs; // 申请日期
applyType: string; // 申请类型 applyType: string; // 申请类型
slectedList: number[]; // 入库物料 slectedList: number[]; // 入库物料
} }
const userStore = useUserStore() const userStore = useUserStore()
const formData = ref<FormData>({ const formData = ref<FormData>({
applicant: userStore.userName, applicant: userStore.userName,
applyDate: dayjs(), applyDate: dayjs(),
applyType: '1', // 1: 采购入库 2: 归还入库 3: 出库外借 applyType: '1', // 1: 采购入库 2: 归还入库 3: 出库外借
slectedList: [] slectedList: []
}); });
// vxe-table相关的设置 // vxe-table相关的设置
interface RowVO { interface RowVO {
id: number id: number
name: string name: string
code: string code: string
spec: string spec: string
type: string type: string
quantity: number quantity: number
disabled: boolean disabled: boolean
checked: boolean checked: boolean
assignRule: number assignRule: number
} }
const tableRef = ref<VxeTableInstance<RowVO>>() const tableRef = ref<VxeTableInstance<RowVO>>()
// vxe-table 数据结果 // vxe-table 数据结果
@ -95,12 +101,12 @@ const tableData = ref<Array<RowVO>>([])
const options = ref<{ label: string, value: number }[]>([]) const options = ref<{ label: string, value: number }[]>([])
const materialList = ref<material.Material[]>([]) const materialList = ref<material.Material[]>([])
const getMaterialList = async () => { const getMaterialList = async () => {
await api.materialApi.material.all((data) => { await api.materialApi.material.all((data) => {
materialList.value = data materialList.value = data
}) })
options.value = materialList.value.map((item) => { options.value = materialList.value.map((item) => {
return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 } return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 }
}) })
} }
getMaterialList() getMaterialList()
@ -108,59 +114,56 @@ getMaterialList()
// 选中时在末尾新增一行 // 选中时在末尾新增一行
// value: number, option: { label: string, value: number } // value: number, option: { label: string, value: number }
const insertEvent = (value: string) => { const insertEvent = (value: any) => {
// 根据value找到对应的物料信息 // 根据value找到对应的物料信息
const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1)) const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
if (m) { if (m) {
const row: RowVO = { const row: RowVO = {
id: m.id ? m.id : -1, id: m.id ? m.id : -1,
name: m.name ? m.name : '未知', name: m.name ? m.name : '未知',
code: m.code ? m.code : '未知', code: m.code ? m.code : '未知',
spec: m.spec ? m.spec : '未知', spec: m.spec ? m.spec : '未知',
type: m.type ? m.type : '未知', type: m.type ? m.type : '未知',
quantity: 1, quantity: 1,
assignRule: m.assignRule ? m.assignRule : 1, assignRule: m.assignRule ? m.assignRule : 1,
disabled: false, disabled: false,
checked: false checked: false
} }
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
$table.insertAt(row, -1) $table.insertAt(row, -1)
window.console.log('表数据1：', tableData.value) }
window.console.log('表数据2：', $table.getTableData().fullData) }
}
}
} }
// 取消选中时，删除table中的行 // 取消选中时，删除table中的行
const removeEvent = (value: string) => { const removeEvent = (value: any) => {
const $table = tableRef.value const $table = tableRef.value
// 根据value找到对应的行 // 根据value找到对应的行
if ($table) { if ($table) {
$table.getTableData().fullData.forEach((item) => { $table.getTableData().fullData.forEach((item) => {
if (item.id === (value ? parseInt(value) : -1)) { if (item.id === (value ? parseInt(value) : -1)) {
$table.remove(item) $table.remove(item)
} }
}) })
} }
} }
// 手动删除table中的行 // 手动删除table中的行
const removeRow = async (row: RowVO) => { const removeRow = async (row: RowVO) => {
//打印tableData数组 //打印tableData数组
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
// 根据row.id找到对应选中列表中的数据 // 根据row.id找到对应选中列表中的数据
formData.value.slectedList.forEach((item, index) => { formData.value.slectedList.forEach((item, index) => {
if (item.toString() === row.id.toString()) { if (item.toString() === row.id.toString()) {
formData.value.slectedList.splice(index, 1) formData.value.slectedList.splice(index, 1)
} }
}) })
$table.remove(row) $table.remove(row)
} }
} }
</script> </script>

74
src/views/stock/component/applyModal.vue
View File

@ -1,42 +1,66 @@
<template> <template>
<!-- steps --> <!-- steps -->
<div> <div>
<a-steps v-model:current="current" :items="items"></a-steps> <a-steps v-model:current="current" :items="items"></a-steps>
</div> </div>
<a-divider style="height: 2px; background-color: #7cb305" /> <a-divider style="height: 2px; background-color: #7cb305" />
<!-- step1 --> <!-- step1 -->
<div class="step-1" v-if="current === 0">
<!--第一步 --> <div class="step-1" v-show="current === 0">
<apply-form></apply-form> <apply-form ref="applyFormRef"></apply-form>
</div> </div>
<!-- step2 -->
<div class="step-2" v-if="current === 1"> <div class="step-2" v-show="current === 1">
<scan-form></scan-form> <scan-form :total-value="totalValue"></scan-form>
</div> </div>
<!-- 按钮 --> <div class="step-3" v-show="current === 2">
<apply-confirm></apply-confirm>
</div>
<!-- 按钮 -->
<a-space wrap class="fixed-button-container">
<a-button type="dashed" v-if="current != 0" @click="current--">上一步</a-button>
<a-button type="primary" v-if="current != 2" @click="nextStep">下一步</a-button>
<a-button type="primary" v-if="current === 2">提交申请</a-button>
</a-space>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import applyForm from '../component/applyForm.vue' import applyForm from '../component/applyForm.vue'
import scanForm from '../component/scanForm.vue'; import scanForm from '../component/scanForm.vue';
import applyConfirm from '../component/applyConfirm.vue';
// steps // steps
const current = ref<number>(0) const current = ref<number>(0) // 翻页的引用
const applyFormRef = ref(); // step1表单引用
const selectData = ref();
const totalValue = ref(199);
const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }] const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
const nextStep = () => {
if (applyFormRef.value) {
selectData.value = applyFormRef.value.getTableData();
}
current.value++
}
</script> </script>
<style scoped> <style scoped>
/* 固定按钮容器样式 */ /* 固定按钮容器样式 */
.fixed-button-container { .fixed-button-container {
position: fixed; position: fixed;
bottom: 80px; bottom: 80px;
/* 距离底部的距离 */ /* 距离底部的距离 */
right: 30px; right: 30px;
/* 距离右侧的距离 */ /* 距离右侧的距离 */
z-index: 1000; z-index: 1000;
/* 确保按钮在其他内容之上 */ /* 确保按钮在其他内容之上 */
} }
</style> </style>

163
src/views/stock/component/scanForm.vue
View File

@ -1,83 +1,134 @@
<template> <template>
<a-button type="primary" @click="beiginScan">开始扫码</a-button> <a-button type="primary" @click="beiginScan">开始扫码</a-button>
<a-button type="primary" danger style="left: 20px;">重新扫码</a-button> <a-button type="primary" danger style="left: 20px;">重新扫码</a-button>
<a-input bordered size="large" <a-input bordered size="large" ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow"
ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow" style="margin-top: 20px; margin-bottom: 20px;"/> style="margin-top: 20px; margin-bottom: 20px;" />
<!-- Esc键退出编辑功能 --> <a-row style="margin-bottom: 20px;">
<vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500" <a-col :span="12">
:column-config="{ resizable: true }" :keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码" <a-statistic title="总共扫码数量" :value="totalValue" style="margin-right: 50px" />
:edit-config="{ trigger: 'click', mode: 'cell' }"> </a-col>
<a-col :span="12">
<a-statistic title="待扫码数量" :value="remainderValue" />
</a-col>
</a-row>
<!-- Esc键退出编辑功能 -->
<vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500" :column-config="{ resizable: true }"
:keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码"
:edit-config="{ trigger: 'click', mode: 'cell' }">
<vxe-column type="seq" title="序号" width="60"></vxe-column> <vxe-column type="seq" title="序号" width="60"></vxe-column>
<vxe-column field="id" title="物料id" :visible="false"></vxe-column> <vxe-column field="id" title="物料id" :visible="false"></vxe-column>
<vxe-column field="barcode" title="物料条码" :edit-render="{ name: 'input', autoFocus: true, immediate: true }" /> <vxe-column field="barcode" title="物料条码" :edit-render="{ name: 'input', autoFocus: true, immediate: true }" />
<vxe-column field="role" title="物料名称" /> <vxe-column field="role" title="物料名称" />
<vxe-column field="code" title="编码" /> <vxe-column field="code" title="编码" />
<vxe-column field="spec" title="规格" /> <vxe-column field="spec" title="规格" />
<vxe-column field="type" title="类型" /> <vxe-column field="type" title="类型" />
<vxe-column field="oprator" title="操作"> <vxe-column field="times" title="扫码时间" />
<template #default="{ row }"> <vxe-column field="oprator" title="操作">
<vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button> <template #default="{ row }">
</template> <vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button>
</vxe-column> </template>
</vxe-column>
</vxe-table> </vxe-table>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { VxeTableInstance } from 'vxe-table' import { VxeTableInstance } from 'vxe-table'
import { useTemplateRef } from 'vue' import { useTemplateRef } from 'vue'
import api from '@/api/index';
import { message } from 'ant-design-vue';
// 父组件数据交互
defineProps(
{ totalValue: Number }
)
const remainderValue = ref(100) // 上一步传递过来
//扫码的条形码字符串 //扫码的条形码字符串
const value = ref('') const value = ref('')
const input = useTemplateRef('snInput'); const input = useTemplateRef('snInput');
interface Step2RowVO { const snListCache = ref<string[]>([]) // 缓存扫码的条形码列表
barcode: string // 定义一个map缓存物料信息
name: string const materialMapCache = ref<Map<string, material.Material>>(new Map<string, material.Material>()) // 缓存物料信息,key是code
code: string
spec: string // 请求接口获取缓存数据
type: string const getCache = () => {
times: Date
api.materialApi.material.all((data) => {
data.forEach(item => {
if (item.code) {
materialMapCache.value.set(item.code, item)
}
})
})
} }
getCache();
interface TableRowVO {
barcode: string
name: string
code: string
spec: string
type: string
times: string
}
// 扫码点货的table对象 // 扫码点货的table对象
const applyDetailTableRef = ref<VxeTableInstance<Step2RowVO>>() const applyDetailTableRef = ref<VxeTableInstance<TableRowVO>>()
// 移除table中的行 // 移除table中的行
const removeStep2Row = async (row: Step2RowVO) => { const removeStep2Row = async (row: TableRowVO) => {
const $table = applyDetailTableRef.value const $table = applyDetailTableRef.value
if ($table) { if ($table) {
$table.remove(row) $table.remove(row)
} }
} }
function beiginScan() { function beiginScan() {
input.value?.focus() input.value?.focus()
} }
// 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行 // 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行
const autoInsertOneRow = async () => { const autoInsertOneRow = async () => {
const $table = applyDetailTableRef.value const $table = applyDetailTableRef.value
const sn = value.value.trim(); const sn = value.value.trim();
/**
* 1. 判断sn是否合法
* 2. 判断sn是否已经存在于表格中，需要缓存sn列表
* 3. 根据sn获取物料信息，并新增一行到表格中,需要缓存物料信息
*/
// // 获取表格的最后一行，判断是否有数据 /**
if ($table) { * 1. 判断sn是否合法
const row: Step2RowVO = { * 2. 判断sn是否已经存在于表格中，需要缓存sn列表
barcode: sn, * 3. 根据sn获取物料信息，并新增一行到表格中,需要缓存物料信息
name: '', * 4. 插入成功后缓存sn
code: '', */
spec: '', if (sn.length === 0 || snListCache.value.includes(sn)) {
type: '', value.value = ''
times: new Date() message.warning('【' + sn + '】条形码重复或为空，请重新扫码', 5)
} return;
$table.insert(row) }
// 添加后就清空输入框
value.value = '' if ($table) {
} const row: TableRowVO = {
barcode: sn,
name: '',
code: '',
spec: '',
type: '',
times: new Date().toLocaleString()
}
$table.insertAt(row, null)
// 缓存sn
snListCache.value.push(sn)
//待扫码数量减一
remainderValue.value = remainderValue.value - 1
// 添加后就清空输入框
value.value = ''
}
} }
</script> </script>

11
src/views/stock/component/successResul.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<a-result status="success" title="Successfully Purchased Cloud Server ECS!"
sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.">
<template #extra>
<a-button key="console" type="primary">查询申请</a-button>
<a-button key="buy">继续提交申请</a-button>
</template>
</a-result>
</template>

6
src/views/stock/inboud/inboud-page.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<apply-page pageType='1'></apply-page> <apply-modal></apply-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import applyPage from '../component/apply-page.vue'; import applyModal from "@/views/stock/component/applyModal.vue";
</script> </script>

93
vite.config.ts.timestamp-1733280057567-72270187d6e8b.mjs Normal file
View File

File diff suppressed because one or more lines are too long