linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.ngsk.tech/linweidong/besure_web

Browse Source
main
黄伟杰 3 weeks ago
parent ca007733bf 39ca00a09c
commit d448a29dac
4 changed files with 627 additions and 568 deletions
Show Stats Download Patch File Download Diff File

437
src/views/erp/product/product/ProductForm.vue
Unescape Escape View File

@ -1,187 +1,148 @@
<!-- ERP 产品的新增/修改 -->
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible"> <div class="dv-repair-panel">
<el-form <div class="dv-repair-panel__header">
ref="formRef" <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
:model="formData" <el-button text @click="closeForm">
:rules="formRules" <Icon icon="ep:close" />
label-width="120px" </el-button>
v-loading="formLoading" </div>
> <div class="dv-repair-dialog" v-loading="formLoading">
<el-row :gutter="20"> <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
<el-col :span="12"> <el-row :gutter="20">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode"> <el-col :span="12">
<el-row :gutter="10" style="width: 100%"> <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode">
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20"> <el-row :gutter="10" style="width: 100%">
<el-input <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20">
v-model="formData.barCode" <el-input
:placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')" v-model="formData.barCode"
:disabled="Boolean(formData.isCode) || formType === 'update'" :placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')"
/> :disabled="Boolean(formData.isCode) || formType === 'update'"
</el-col>
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
<div>
<el-switch
v-model="formData.isCode"
:disabled="formType === 'update'"
@change="handleCodeAutoChange"
/> />
</div> </el-col>
</el-col> <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
</el-row> <div>
</el-form-item> <el-switch
</el-col> v-model="formData.isCode"
<el-col :span="12"> :disabled="formType === 'update'"
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogNameLabel')" prop="name"> @change="handleCodeAutoChange"
<el-input v-model="formData.name" :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" /> />
</el-form-item> </div>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryLabel')" prop="categoryId"> </el-form-item>
<el-tree-select </el-col>
v-model="formData.categoryId" <el-col :span="12">
:data="categoryList" <el-form-item :label="t('FactoryModeling.ProductInformation.dialogNameLabel')" prop="name">
:props="defaultProps" <el-input v-model="formData.name" :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" />
check-strictly </el-form-item>
default-expand-all </el-col>
:placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')" <el-col :span="12">
class="w-1/1" <el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryLabel')" prop="categoryId">
/> <el-tree-select
</el-form-item> v-model="formData.categoryId"
</el-col> :data="categoryList"
<el-col :span="12"> :props="defaultProps"
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogUnitLabel')" prop="unitId"> check-strictly
<el-select v-model="formData.unitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1"> default-expand-all
<el-option :placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')"
v-for="unit in unitList" class="w-1/1"
:key="unit.id"
:label="unit.name"
:value="unit.id"
/> />
</el-select> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="12">
<el-col :span="12"> <el-form-item :label="t('FactoryModeling.ProductInformation.dialogUnitLabel')" prop="unitId">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogStandardLabel')" prop="standard"> <el-select v-model="formData.unitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1">
<el-input v-model="formData.standard" :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" /> <el-option
</el-form-item> v-for="unit in unitList"
</el-col> :key="unit.id"
<el-col :span="12"> :label="unit.name"
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogExpiryDayLabel')" prop="expiryDay"> :value="unit.id"
<el-input-number />
v-model="formData.expiryDay" </el-select>
:placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')" </el-form-item>
:min="0" </el-col>
:precision="0" <el-col :span="12">
class="!w-1/1" <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStandardLabel')" prop="standard">
/> <el-input v-model="formData.standard" :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogWeightLabel')" prop="weight"> <el-form-item :label="t('FactoryModeling.ProductInformation.dialogExpiryDayLabel')" prop="expiryDay">
<el-input-number <el-input-number
v-model="formData.weight" v-model="formData.expiryDay"
:placeholder="t('FactoryModeling.ProductInformation.dialogWeightPlaceholder')" :placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')"
:min="0" :min="0"
class="!w-1/1" :precision="0"
/> class="!w-1/1"
</el-form-item> />
</el-col> --> </el-form-item>
<!-- <el-col :span="12"> </el-col>
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchasePriceLabel')" prop="purchasePrice"> <el-col v-if="isProductCategory" :span="12">
<el-input-number <el-form-item label="关联设备" prop="devices">
v-model="formData.purchasePrice" <el-input
:placeholder="t('FactoryModeling.ProductInformation.dialogPurchasePricePlaceholder')" :model-value="deviceDisplayText"
:min="0" placeholder="点击选择设备"
:precision="2" readonly
class="!w-1/1" @click="openDeviceSelectDialog"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col v-if="isProductCategory" :span="12">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogSalePriceLabel')" prop="salePrice"> <el-form-item label="关联模具" prop="molds">
<el-input-number <el-input
v-model="formData.salePrice" :model-value="moldDisplayText"
:placeholder="t('FactoryModeling.ProductInformation.dialogSalePricePlaceholder')" placeholder="点击选择模具"
:min="0" readonly
:precision="2" @click="openMoldSelectDialog"
class="!w-1/1" />
/> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="12">
<el-col :span="12"> <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStatusLabel')" prop="status">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogMinPriceLabel')" prop="minPrice"> <el-radio-group v-model="formData.status">
<el-input-number <el-radio
v-model="formData.minPrice" v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:placeholder="t('FactoryModeling.ProductInformation.dialogMinPricePlaceholder')" :key="dict.value"
:min="0" :label="dict.value"
:precision="2" >
class="!w-1/1" {{ dict.label }}
/> </el-radio>
</el-form-item> </el-radio-group>
</el-col> --> </el-form-item>
<el-col v-if="isProductCategory" :span="12"> </el-col>
<el-form-item label="关联设备" prop="devices"> <el-col v-if="formType === 'update'" :span="24">
<el-input <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
:model-value="deviceDisplayText" <QrcodeActionCard
placeholder="点击选择设备" :image-url="formData.qrcodeUrl"
readonly :print-id="formData.id"
@click="openDeviceSelectDialog" :print-template-type="1"
/> :print-title="`${formData.name || '产品'}二维码打印预览`"
</el-form-item> :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
</el-col> :refresh-url="getQrcodeRefreshUrl()"
<el-col v-if="isProductCategory" :span="12"> :refresh-disabled="!formData.id || !formData.barCode"
<el-form-item label="关联模具" prop="molds"> refresh-confirm-text="确认刷新该产品二维码吗？"
<el-input :template-json="formData.templateJson"
:model-value="moldDisplayText" :print-data="buildPrintData()"
placeholder="点击选择模具" @refresh-success="handleQrcodeRefreshSuccess"
readonly />
@click="openMoldSelectDialog" </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="24">
</el-col> <el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark">
<el-col :span="12"> <el-input type="textarea" v-model="formData.remark" :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogStatusLabel')" prop="status"> </el-form-item>
<el-radio-group v-model="formData.status"> </el-col>
<el-radio </el-row>
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" </el-form>
:key="dict.value" </div>
:label="dict.value"
> <div class="dv-repair-footer">
{{ dict.label }} <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
</el-radio> <el-button v-if="formType !== 'detail'" @click="submitForm" type="primary" :disabled="formLoading">
</el-radio-group> {{ t('common.ok') }}
</el-form-item> </el-button>
</el-col> </div>
<el-col v-if="formType === 'update'" :span="24"> </div>
<el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
<QrcodeActionCard
:image-url="formData.qrcodeUrl"
:print-id="formData.id"
:print-template-type="1"
:print-title="`${formData.name || '产品'}二维码打印预览`"
:empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
:refresh-url="getQrcodeRefreshUrl()"
:refresh-disabled="!formData.id || !formData.barCode"
refresh-confirm-text="确认刷新该产品二维码吗？"
:template-json="formData.templateJson"
:print-data="buildPrintData()"
@refresh-success="handleQrcodeRefreshSuccess"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark">
<el-input type="textarea" v-model="formData.remark" :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
<TableSelectDialog <TableSelectDialog
ref="deviceSelectDialogRef" ref="deviceSelectDialogRef"
title="选择设备" title="选择设备"
@ -191,9 +152,8 @@
@confirm="handleDeviceSelectConfirm" @confirm="handleDeviceSelectConfirm"
:query-params="mergedQueryParams" :query-params="mergedQueryParams"
> >
<!-- 使用 header 插槽插入查询表单 -->
<template #header> <template #header>
<el-form ref="searchFormRef" :model="searchParams" :inline="true" > <el-form ref="searchFormRef" :model="searchParams" :inline="true">
<el-form-item label="设备编号" prop="deviceCode"> <el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="searchParams.deviceCode" placeholder="请输入编号" clearable /> <el-input v-model="searchParams.deviceCode" placeholder="请输入编号" clearable />
</el-form-item> </el-form-item>
@ -216,9 +176,8 @@
@confirm="handleMoldSelectConfirm" @confirm="handleMoldSelectConfirm"
:query-params="mergedMoldQueryParams" :query-params="mergedMoldQueryParams"
> >
<!-- 使用 header 插槽插入查询表单 -->
<template #header> <template #header>
<el-form ref="searchMoldFormRef" :model="searchMoldParams" :inline="true" > <el-form ref="searchMoldFormRef" :model="searchMoldParams" :inline="true">
<el-form-item label="模具编号" prop="code"> <el-form-item label="模具编号" prop="code">
<el-input v-model="searchMoldParams.code" placeholder="请输入编号" clearable /> <el-input v-model="searchMoldParams.code" placeholder="请输入编号" clearable />
</el-form-item> </el-form-item>
@ -248,24 +207,21 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
/** ERP 产品 表单 */ /** ERP 产品 表单 */
defineOptions({ name: 'ProductForm' }) defineOptions({ name: 'ProductForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n()
const message = useMessage() // 消息弹窗 const message = useMessage()
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('')
const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false)
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formType = ref('')
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const deviceSelectDialogRef = ref() const deviceSelectDialogRef = ref()
const moldSelectDialogRef = ref() const moldSelectDialogRef = ref()
const searchFormRef = ref() const searchFormRef = ref()
// 1. 自定义表单的查询参数
const searchParams = reactive({ const searchParams = reactive({
deviceCode: undefined, deviceCode: undefined,
deviceName: undefined, deviceName: undefined,
}) })
const handleSearch = () => { const handleSearch = () => {
// 触发弹窗内部重新加载数据
deviceSelectDialogRef.value?.reload?.() deviceSelectDialogRef.value?.reload?.()
} }
@ -274,23 +230,20 @@ const resetSearch = () => {
handleSearch() handleSearch()
} }
// 1. 自定义表单的查询参数
const searchMoldParams = reactive({ const searchMoldParams = reactive({
code: undefined, code: undefined,
name: undefined, name: undefined,
}) })
const searchMoldFormRef = ref() const searchMoldFormRef = ref()
const handleMoldSearch = () => { const handleMoldSearch = () => {
// 触发弹窗内部重新加载数据
moldSelectDialogRef.value?.reload?.() moldSelectDialogRef.value?.reload?.()
} }
const resetMoldSearch = () => { const resetMoldSearch = () => {
searchMoldFormRef.value?.resetFields() searchMoldFormRef.value?.resetFields()
handleSearch() handleMoldSearch()
} }
// 2. 合并参数：将表单参数与组件内部的分页参数合并
const mergedQueryParams = computed(() => ({ ...searchParams })) const mergedQueryParams = computed(() => ({ ...searchParams }))
const mergedMoldQueryParams = computed(() => ({ ...searchMoldParams })) const mergedMoldQueryParams = computed(() => ({ ...searchMoldParams }))
const formData = ref({ const formData = ref({
@ -485,20 +438,20 @@ const formRules = reactive({
unitId: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorUnitRequired'), trigger: 'blur' }], unitId: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorUnitRequired'), trigger: 'blur' }],
status: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorStatusRequired'), trigger: 'blur' }] status: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorStatusRequired'), trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref()
const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表 const categoryList = ref<ProductCategoryVO[]>([])
const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表 const unitList = ref<ProductUnitVO[]>([])
let openRequestId = 0
/** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true const currentOpenId = ++openRequestId
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
const categoryData = await ProductCategoryApi.getProductCategorySimpleList() const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
categoryList.value = handleTree(categoryData, 'id', 'parentId') categoryList.value = handleTree(categoryData, 'id', 'parentId')
unitList.value = await ProductUnitApi.getProductUnitSimpleList() unitList.value = await ProductUnitApi.getProductUnitSimpleList()
// 修改时，设置数据
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
@ -533,7 +486,19 @@ const open = async (type: string, id?: number) => {
} }
} }
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
defineExpose({ open })
const emit = defineEmits(['success', 'closed'])
const closeForm = () => {
openRequestId++
emit('closed')
}
onBeforeUnmount(() => {
openRequestId++
})
const handleCodeAutoChange = (value: boolean) => { const handleCodeAutoChange = (value: boolean) => {
if (value) { if (value) {
@ -573,12 +538,8 @@ const buildRelationIdListString = (list: { id: number; name: string }[]) => {
return list.map((item) => Number(item.id)).filter((id) => Number.isFinite(id)) return list.map((item) => Number(item.id)).filter((id) => Number.isFinite(id))
} }
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
// 校验表单
await formRef.value.validate() await formRef.value.validate()
// 提交请求
formLoading.value = true formLoading.value = true
try { try {
const relationDevices = isProductCategory.value ? formData.value.devices : [] const relationDevices = isProductCategory.value ? formData.value.devices : []
@ -597,15 +558,13 @@ const submitForm = async () => {
await ProductApi.updateProduct(data) await ProductApi.updateProduct(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
dialogVisible.value = false
// 发送操作成功的事件
emit('success') emit('success')
closeForm()
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
/** 重置表单 */
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
@ -643,4 +602,58 @@ watch(
} }
) )
</script> </script>
<style scoped lang="scss"></style>
<style lang="scss" scoped>
.dv-repair-panel {
background: #fff;
border-radius: 12px;
box-shadow: var(--el-box-shadow-light);
}
.dv-repair-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #ebeef5;
}
.dv-repair-panel__title {
color: #1f2937;
font-size: 18px;
font-weight: 600;
}
.dv-repair-dialog {
max-height: calc(100vh - 220px);
padding: 20px 20px 0;
padding-right: 16px;
overflow-y: auto;
}
.dv-repair-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
width: 100%;
padding: 16px 20px 20px;
border-top: 1px solid #ebeef5;
}
@media (max-width: 768px) {
.dv-repair-panel__header {
padding: 14px 16px;
}
.dv-repair-dialog {
max-height: none;
padding: 16px 16px 0;
overflow-y: visible;
}
.dv-repair-footer {
padding: 16px;
}
}
</style>

218
src/views/erp/product/product/index.vue
Unescape Escape View File

@ -1,97 +1,79 @@
<!-- ERP 产品列表 --> <!-- ERP 产品列表 -->
<template> <template>
<ContentWrap> <div class="dv-repair-page">
<!-- 搜索工作栏 --> <template v-if="!formVisible">
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto" @submit.prevent> <ContentWrap>
<el-form-item :label="t('FactoryModeling.ProductInformation.searchCodeLabel')" prop="barCode"> <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto" @submit.prevent>
<el-input v-model="queryParams.barCode" <el-form-item :label="t('FactoryModeling.ProductInformation.searchCodeLabel')" prop="barCode">
:placeholder="t('FactoryModeling.ProductInformation.searchCodePlaceholder')" clearable <el-input v-model="queryParams.barCode"
@keyup.enter="handleQuery" class="!w-240px" /> :placeholder="t('FactoryModeling.ProductInformation.searchCodePlaceholder')" clearable
</el-form-item> @keyup.enter="handleQuery" class="!w-240px" />
<el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name"> </el-form-item>
<el-input v-model="queryParams.name" <el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name">
:placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')" clearable <el-input v-model="queryParams.name"
@keyup.enter="handleQuery" class="!w-240px" /> :placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')" clearable
</el-form-item> @keyup.enter="handleQuery" class="!w-240px" />
<el-form-item> </el-form-item>
<el-button @click="handleQuery"> <el-form-item>
<Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.searchButtonText') }} <el-button @click="handleQuery">
</el-button> <Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.searchButtonText') }}
<el-button @click="resetQuery"> </el-button>
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.resetButtonText') }} <el-button @click="resetQuery">
</el-button> <Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.resetButtonText') }}
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:product:create']"> </el-button>
<Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.addButtonText') }} <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:product:create']">
</el-button> <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.addButtonText') }}
<el-button type="success" plain @click="handleExport" :loading="exportLoading" </el-button>
v-hasPermi="['erp:product:export']"> <el-button type="success" plain @click="handleExport" :loading="exportLoading"
<Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.exportButtonText') }} v-hasPermi="['erp:product:export']">
</el-button> <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.exportButtonText') }}
</el-form-item> </el-button>
</el-form> </el-form-item>
</ContentWrap> </el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-tabs v-model="activeName" @tab-click="handleTabClick"> <el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- 使用 v-for 动态生成 el-tab-pane --> <el-tab-pane v-for="item in parentList" :key="item.id" :label="item.name" :name="item.id.toString()" />
<el-tab-pane v-for="item in parentList" :key="item.id" :label="item.name" :name="item.id.toString()" /> </el-tabs>
<!-- <el-tab-pane label="产品" name="2" /> <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-tab-pane label="原料" name="1" /> <el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode"
<el-tab-pane label="备件" name="5" /> sortable />
<el-tab-pane label="工具" name="3" /> <el-table-column :label="t('FactoryModeling.ProductInformation.tableNameColumn')" align="left" prop="name"
<el-tab-pane label="耗材" name="4" /> width="220px" sortable />
<el-tab-pane label="办公室用品" name="6" /> <el-table-column :label="t('FactoryModeling.ProductInformation.tableStandardColumn')" align="center"
<el-tab-pane label="其他" name="0" /> --> prop="standard" sortable />
</el-tabs> <el-table-column :label="t('FactoryModeling.ProductInformation.tableCategoryColumn')" align="center"
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> prop="subCategoryName" sortable />
<el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode" <el-table-column :label="t('FactoryModeling.ProductInformation.tableUnitColumn')" align="center" prop="unitName"
sortable /> sortable />
<el-table-column :label="t('FactoryModeling.ProductInformation.tableNameColumn')" align="left" prop="name" <el-table-column :label="t('FactoryModeling.ProductInformation.tableStatusColumn')" align="center" prop="status"
width="220px" sortable /> sortable>
<el-table-column :label="t('FactoryModeling.ProductInformation.tableStandardColumn')" align="center" <template #default="scope">
prop="standard" sortable /> <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
<el-table-column :label="t('FactoryModeling.ProductInformation.tableCategoryColumn')" align="center" </template>
prop="subCategoryName" sortable /> </el-table-column>
<el-table-column :label="t('FactoryModeling.ProductInformation.tableUnitColumn')" align="center" prop="unitName" <el-table-column :label="t('FactoryModeling.ProductInformation.tableCreateTimeColumn')" align="center"
sortable /> prop="createTime" :formatter="dateFormatter" width="180px" sortable />
<el-table-column :label="t('FactoryModeling.ProductInformation.tableStatusColumn')" align="center" prop="status" <el-table-column :label="t('FactoryModeling.ProductInformation.tableOperateColumn')" align="center" width="150px">
sortable> <template #default="scope">
<template #default="scope"> <el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:product:update']">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> {{ t('FactoryModeling.ProductInformation.tableEditAction') }}
</template> </el-button>
</el-table-column> <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:product:delete']">
<el-table-column :label="t('FactoryModeling.ProductInformation.tableCreateTimeColumn')" align="center" {{ t('FactoryModeling.ProductInformation.tableDeleteAction') }}
prop="createTime" :formatter="dateFormatter" width="180px" sortable /> </el-button>
<el-table-column :label="t('FactoryModeling.ProductInformation.tableOperateColumn')" align="center" width="150px"> </template>
<template #default="scope"> </el-table-column>
<!-- <el-button--> </el-table>
<!-- v-if="scope.row.categoryId ===2"--> <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
<!-- link--> @pagination="getList" />
<!-- type="primary"--> </ContentWrap>
<!-- @click="openBomForm('detail', scope.row.id)"--> </template>
<!-- >-->
<!-- BOM--> <ProductForm v-else-if="formType === 'product'" ref="formRef" @success="getList" @closed="handleFormClosed" />
<!-- </el-button>--> <BomForm v-else-if="formType === 'bom'" ref="bomFormRef" @success="getList" @closed="handleFormClosed" />
<el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:product:update']"> </div>
{{ t('FactoryModeling.ProductInformation.tableEditAction') }}
</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:product:delete']">
{{ t('FactoryModeling.ProductInformation.tableDeleteAction') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="formRef" @success="getList" />
<!-- 表单弹窗：添加/修改 -->
<BomForm ref="bomFormRef" @success="getList" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -107,12 +89,12 @@ import BomForm from "@/views/mes/bom/BomForm.vue";
/** ERP 产品列表 */ /** ERP 产品列表 */
defineOptions({ name: 'ErpProduct' }) defineOptions({ name: 'ErpProduct' })
const message = useMessage() // 消息弹窗 const message = useMessage()
const { t } = useI18n() // 国际化 const { t } = useI18n()
const loading = ref(true) // 列表的加载中 const loading = ref(true)
const list = ref<ProductVO[]>([]) // 列表的数据 const list = ref<ProductVO[]>([])
const total = ref(0) // 列表的总页数 const total = ref(0)
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
@ -120,12 +102,13 @@ const queryParams = reactive({
barCode: undefined, barCode: undefined,
categoryId: undefined categoryId: undefined
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref()
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false)
const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表 const categoryList = ref<ProductCategoryVO[]>([])
const parentList = ref<ProductCategoryVO[]>([]) const parentList = ref<ProductCategoryVO[]>([])
const formVisible = ref(false)
const formType = ref('')
/** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
@ -137,43 +120,37 @@ const getList = async () => {
} }
} }
/** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
queryParams.pageNo = 1 queryParams.pageNo = 1
getList() getList()
} }
/** 重置按钮操作 */
const resetQuery = () => { const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
handleQuery() handleQuery()
} }
/** 添加/修改操作 */
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formVisible.value = true
formType.value = 'product'
nextTick(() => {
formRef.value.open(type, id)
})
} }
/** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {
// 删除的二次确认
await message.delConfirm() await message.delConfirm()
// 发起删除
await ProductApi.deleteProduct(id) await ProductApi.deleteProduct(id)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
// 刷新列表
await getList() await getList()
} catch { } } catch { }
} }
/** 导出按钮操作 */
const handleExport = async () => { const handleExport = async () => {
try { try {
// 导出的二次确认
await message.exportConfirm() await message.exportConfirm()
// 发起导出
exportLoading.value = true exportLoading.value = true
const data = await ProductApi.exportProduct(queryParams) const data = await ProductApi.exportProduct(queryParams)
download.excel(data, '产品.xls') download.excel(data, '产品.xls')
@ -183,33 +160,36 @@ const handleExport = async () => {
} }
} }
/** 初始化 **/
onMounted(async () => { onMounted(async () => {
queryParams.categoryId = 2 queryParams.categoryId = 2
await getList() await getList()
// 产品分类
const categoryData = await ProductCategoryApi.getProductCategorySimpleList() const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
categoryList.value = handleTree(categoryData, 'id', 'parentId') categoryList.value = handleTree(categoryData, 'id', 'parentId')
// 获取顶层分类
for (let i = 0; i < categoryData.length; i++) { for (let i = 0; i < categoryData.length; i++) {
if (categoryData[i].parentId === 0) { if (categoryData[i].parentId === 0) {
parentList.value.push(categoryData[i]); parentList.value.push(categoryData[i]);
} }
} }
// 排序
parentList.value.sort((a, b) => a.sort - b.sort); parentList.value.sort((a, b) => a.sort - b.sort);
}) })
/** tab 切换 */
let activeName = '2' let activeName = '2'
const handleTabClick = (tab: TabsPaneContext) => { const handleTabClick = (tab: TabsPaneContext) => {
queryParams.categoryId = tab.paneName queryParams.categoryId = tab.paneName
handleQuery() handleQuery()
} }
/** 添加/修改操作 */
const bomFormRef = ref() const bomFormRef = ref()
const openBomForm = (type: string, id?: number) => { const openBomForm = (type: string, id?: number) => {
bomFormRef.value.open(type, id) formVisible.value = true
formType.value = 'bom'
nextTick(() => {
bomFormRef.value.open(type, id)
})
}
const handleFormClosed = () => {
formVisible.value = false
formType.value = ''
} }
</script> </script>

209
src/views/mes/bom/BomForm.vue
Unescape Escape View File

@ -1,53 +1,62 @@
<template> <template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" :close-on-click-modal="false"> <div class="dv-repair-panel">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading"> <div class="dv-repair-panel__header">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code"> <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
<el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')" <el-button text @click="closeForm">
:disabled="formType === 'update'" /> <Icon icon="ep:close" />
</el-form-item> </el-button>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version"> </div>
<el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" /> <div class="dv-repair-dialog" v-loading="formLoading">
</el-form-item> <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId"> <el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code">
<el-select v-model="formData.productId" clearable filterable <el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')"
:placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1"> :disabled="formType === 'update'" />
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /> </el-form-item>
</el-select> <el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version">
</el-form-item> <el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" />
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId"> </el-form-item>
<el-select v-model="formData.unitId" clearable <el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId">
:placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1"> <el-select v-model="formData.productId" clearable filterable
<el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" /> :placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1">
</el-select> <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
</el-form-item> </el-select>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate"> </el-form-item>
<el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1" <el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId">
:placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" /> <el-select v-model="formData.unitId" clearable
</el-form-item> :placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark"> <el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
<el-input type="textarea" v-model="formData.remark" </el-select>
:placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" /> </el-form-item>
</el-form-item> <el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable"> <el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1"
<el-radio-group v-model="formData.isEnable"> :placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" />
<el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value" </el-form-item>
:label="dict.value"> <el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark">
{{ dict.label }} <el-input type="textarea" v-model="formData.remark"
</el-radio> :placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" />
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable">
</el-form> <el-radio-group v-model="formData.isEnable">
<!-- 子表的表单 --> <el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
<el-tabs v-model="subTabsName"> :label="dict.value">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail"> {{ dict.label }}
<BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" /> </el-radio>
</el-tab-pane> </el-radio-group>
</el-tabs> </el-form-item>
<template #footer> </el-form>
<!-- 子表的表单 -->
<el-tabs v-model="subTabsName">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" />
</el-tab-pane>
</el-tabs>
</div>
<div class="dv-repair-footer">
<el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button> </div>
</template> </div>
</Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict' import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
@ -56,19 +65,18 @@ import BomDetailForm from './components/BomDetailForm.vue'
import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit' import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
import { ProductApi, ProductVO } from '@/api/erp/product/product' import { ProductApi, ProductVO } from '@/api/erp/product/product'
const productList = ref<ProductVO[]>([]) // 产品列表 const productList = ref<ProductVO[]>([])
const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表 const unitList = ref<ProductUnitVO[]>([])
/** 产品BOM 表单 */ /** 产品BOM 表单 */
defineOptions({ name: 'BomForm' }) defineOptions({ name: 'BomForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n()
const message = useMessage() // 消息弹窗 const message = useMessage()
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('')
const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false)
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formType = ref('')
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({ const formData = ref({
id: undefined, id: undefined,
code: undefined, code: undefined,
@ -86,19 +94,20 @@ const formRules = reactive({
unitId: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorUnitRequired'), trigger: 'blur' }], unitId: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorUnitRequired'), trigger: 'blur' }],
isEnable: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorEnableRequired'), trigger: 'blur' }] isEnable: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorEnableRequired'), trigger: 'blur' }]
}) })
const formRef = ref() // 表单 Ref const formRef = ref()
/** 子表的表单 */ /** 子表的表单 */
const subTabsName = ref('bomDetail') const subTabsName = ref('bomDetail')
const bomDetailFormRef = ref() const bomDetailFormRef = ref()
let openRequestId = 0
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
dialogVisible.value = true const currentOpenId = ++openRequestId
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
formType.value = type formType.value = type
resetForm() resetForm()
// 修改时，设置数据
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
@ -107,33 +116,35 @@ const open = async (type: string, id?: number) => {
formLoading.value = false formLoading.value = false
} }
} }
if (type === 'detail') {
}
// 产品单位
unitList.value = await ProductUnitApi.getProductUnitSimpleList() unitList.value = await ProductUnitApi.getProductUnitSimpleList()
// 加载产品、
productList.value = await ProductApi.getMesProductSimpleList() productList.value = await ProductApi.getMesProductSimpleList()
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
defineExpose({ open })
const emit = defineEmits(['success', 'closed'])
const closeForm = () => {
openRequestId++
emit('closed')
}
onBeforeUnmount(() => {
openRequestId++
})
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
// 校验表单
await formRef.value.validate() await formRef.value.validate()
// 校验子表单
try { try {
await bomDetailFormRef.value.validate() await bomDetailFormRef.value.validate()
} catch (e) { } catch (e) {
subTabsName.value = 'bomDetail' subTabsName.value = 'bomDetail'
return return
} }
// 提交请求
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as BomVO const data = formData.value as unknown as BomVO
// 拼接子表的数据
data.bomDetails = bomDetailFormRef.value.getData() data.bomDetails = bomDetailFormRef.value.getData()
if (formType.value === 'create') { if (formType.value === 'create') {
await BomApi.createBom(data) await BomApi.createBom(data)
@ -143,9 +154,8 @@ const submitForm = async () => {
await BomApi.updateBom(data) await BomApi.updateBom(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
dialogVisible.value = false
// 发送操作成功的事件
emit('success') emit('success')
closeForm()
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
@ -166,3 +176,58 @@ const resetForm = () => {
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>
<style lang="scss" scoped>
.dv-repair-panel {
background: #fff;
border-radius: 12px;
box-shadow: var(--el-box-shadow-light);
}
.dv-repair-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #ebeef5;
}
.dv-repair-panel__title {
color: #1f2937;
font-size: 18px;
font-weight: 600;
}
.dv-repair-dialog {
max-height: calc(100vh - 220px);
padding: 20px 20px 0;
padding-right: 16px;
overflow-y: auto;
}
.dv-repair-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
width: 100%;
padding: 16px 20px 20px;
border-top: 1px solid #ebeef5;
}
@media (max-width: 768px) {
.dv-repair-panel__header {
padding: 14px 16px;
}
.dv-repair-dialog {
max-height: none;
padding: 16px 16px 0;
overflow-y: visible;
}
.dv-repair-footer {
padding: 16px;
}
}
</style>

331
src/views/mes/bom/index.vue
Unescape Escape View File

@ -1,155 +1,158 @@
<template> <template>
<ContentWrap> <div class="dv-repair-page">
<!-- 搜索工作栏 --> <template v-if="!formVisible">
<el-form <ContentWrap>
class="-mb-15px" <!-- 搜索工作栏 -->
:model="queryParams" <el-form
ref="queryFormRef" class="-mb-15px"
:inline="true" :model="queryParams"
min-label-width="80px" ref="queryFormRef"
> :inline="true"
<el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code"> min-label-width="80px"
<el-input
v-model="queryParams.code"
:placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
<el-select v-model="queryParams.productId" @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
<el-input
v-model="queryParams.remark"
:placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
<el-select
v-model="queryParams.isEnable"
:placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
clearable
@change="handleQuery"
class="!w-240px"
>
<el-option
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="filterCount > 3">
<el-button type="text" class="text-primary" @click="toggleFilters">
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:bom:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['mes:bom:export']"
> >
<Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }} <el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code">
</el-button> <el-input
</el-form-item> v-model="queryParams.code"
</el-form> :placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
</ContentWrap> clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
<el-select v-model="queryParams.productId" @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- 列表 --> <el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
<ContentWrap> <el-input
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> v-model="queryParams.remark"
<!-- 子表的列表 --> :placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
<el-table-column type="expand"> clearable
<template #default="scope"> @keyup.enter="handleQuery"
<el-tabs model-value="bomDetail"> class="!w-240px"
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail"> />
<BomDetailList :bom-id="scope.row.id" /> </el-form-item>
</el-tab-pane> <el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
</el-tabs> <el-select
</template> v-model="queryParams.isEnable"
</el-table-column> :placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
<!-- <el-table-column label="ID" align="center" prop="id" /> --> clearable
<el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/> @change="handleQuery"
<el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" /> class="!w-240px"
<el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName" sortable /> >
<el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName" sortable /> <el-option
<el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/> v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
<el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" /> :key="dict.value"
<el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable"> :label="dict.label"
<template #default="scope"> :value="dict.value"
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" /> />
</template> </el-select>
</el-table-column> </el-form-item>
<el-table-column
:label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')" <el-form-item v-if="filterCount > 3">
align="center" <el-button type="text" class="text-primary" @click="toggleFilters">
prop="createTime" <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
:formatter="dateFormatter" {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
width="180px" </el-button>
sortable </el-form-item>
/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150"> <el-form-item>
<template #default="scope"> <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
<el-button <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
link <el-button
type="primary" type="primary"
@click="openForm('update', scope.row.id)" plain
v-hasPermi="['mes:bom:update']" @click="openForm('create')"
> v-hasPermi="['mes:bom:create']"
{{ t('FactoryModeling.ProductBOM.tableEditAction') }} >
</el-button> <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
<el-button </el-button>
link <el-button
type="danger" type="success"
@click="handleDelete(scope.row.id)" plain
v-hasPermi="['mes:bom:delete']" @click="handleExport"
> :loading="exportLoading"
{{ t('FactoryModeling.ProductBOM.tableDeleteAction') }} v-hasPermi="['mes:bom:export']"
</el-button> >
</template> <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }}
</el-table-column> </el-button>
</el-table> </el-form-item>
<!-- 分页 --> </el-form>
<Pagination </ContentWrap>
:total="total"
v-model:page="queryParams.pageNo" <!-- 列表 -->
v-model:limit="queryParams.pageSize" <ContentWrap>
@pagination="getList" <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
/> <!-- 子表的列表 -->
</ContentWrap> <el-table-column type="expand">
<template #default="scope">
<el-tabs model-value="bomDetail">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailList :bom-id="scope.row.id" />
</el-tab-pane>
</el-tabs>
</template>
</el-table-column>
<!-- <el-table-column label="ID" align="center" prop="id" /> -->
<el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
</template>
</el-table-column>
<el-table-column
:label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
sortable
/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:bom:update']"
>
{{ t('FactoryModeling.ProductBOM.tableEditAction') }}
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:bom:delete']"
>
{{ t('FactoryModeling.ProductBOM.tableDeleteAction') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 表单弹窗：添加/修改 --> <BomForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
<BomForm ref="formRef" @success="getList" /> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -161,16 +164,16 @@ import BomForm from './BomForm.vue'
import BomDetailList from './components/BomDetailList.vue' import BomDetailList from './components/BomDetailList.vue'
import { ProductApi, ProductVO } from '@/api/erp/product/product' import { ProductApi, ProductVO } from '@/api/erp/product/product'
const productList = ref<ProductVO[]>([]) // 产品列表 const productList = ref<ProductVO[]>([])
/** 产品BOM 列表 */ /** 产品BOM 列表 */
defineOptions({ name: 'Bom' }) defineOptions({ name: 'Bom' })
const message = useMessage() // 消息弹窗 const message = useMessage()
const { t } = useI18n() // 国际化 const { t } = useI18n()
const loading = ref(true) // 列表的加载中 const loading = ref(true)
const list = ref<BomVO[]>([]) // 列表的数据 const list = ref<BomVO[]>([])
const total = ref(0) // 列表的总页数 const total = ref(0)
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
@ -183,10 +186,11 @@ const queryParams = reactive({
isEnable: undefined, isEnable: undefined,
createTime: [] createTime: []
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref()
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false)
const showAllFilters = ref(false) // 是否显示所有筛选框 const showAllFilters = ref(false)
const filterCount = 4 // 筛选框数量（code、productId、remark、isEnable） const filterCount = 4
const formVisible = ref(false)
/** 切换筛选框展开/折叠 */ /** 切换筛选框展开/折叠 */
const toggleFilters = () => { const toggleFilters = () => {
@ -220,18 +224,18 @@ const resetQuery = () => {
/** 添加/修改操作 */ /** 添加/修改操作 */
const formRef = ref() const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formVisible.value = true
nextTick(() => {
formRef.value.open(type, id)
})
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {
// 删除的二次确认
await message.delConfirm() await message.delConfirm()
// 发起删除
await BomApi.deleteBom(id) await BomApi.deleteBom(id)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
// 刷新列表
await getList() await getList()
} catch {} } catch {}
} }
@ -239,9 +243,7 @@ const handleDelete = async (id: number) => {
/** 导出按钮操作 */ /** 导出按钮操作 */
const handleExport = async () => { const handleExport = async () => {
try { try {
// 导出的二次确认
await message.exportConfirm() await message.exportConfirm()
// 发起导出
exportLoading.value = true exportLoading.value = true
const data = await BomApi.exportBom(queryParams) const data = await BomApi.exportBom(queryParams)
download.excel(data, '产品BOM.xls') download.excel(data, '产品BOM.xls')
@ -254,7 +256,6 @@ const handleExport = async () => {
/** 初始化 **/ /** 初始化 **/
onMounted(async () => { onMounted(async () => {
await getList() await getList()
// 加载产品、
productList.value = await ProductApi.getMesProductSimpleList() productList.value = await ProductApi.getMesProductSimpleList()
}) })
</script> </script>

Write Preview
Loading…
Cancel
Save