feat：添加配方库页面
parent
3e34a93625
commit
e503df9a23
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="设备数据" name="detail">
|
||||
<el-table :data="detailList" :stripe="true" :show-overflow-tooltip="true" row-key="key">
|
||||
<el-table-column type="index" label="序号" align="center" width="70" />
|
||||
<el-table-column label="点位名称" align="center" prop="pointName" min-width="180" />
|
||||
<el-table-column label="采集值" align="center" prop="value" min-width="180" />
|
||||
<el-table-column label="单位" align="center" prop="unit" width="120" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="手动录入参数" name="manual">
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参考值" prop="refer">
|
||||
<el-input
|
||||
v-model="queryParams.refer"
|
||||
placeholder="请输入参考值"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="dataUnit">
|
||||
<el-input
|
||||
v-model="queryParams.dataUnit"
|
||||
placeholder="请输入单位"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="queryParams.remark"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> 查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
|
||||
<el-table-column type="index" label="序号" align="center" width="70" />
|
||||
<el-table-column label="名称" align="center" prop="name" min-width="160" />
|
||||
<el-table-column label="参考值" align="center" prop="refer" min-width="160" />
|
||||
<el-table-column label="单位" align="center" prop="dataUnit" width="140" />
|
||||
<el-table-column label="备注" align="center" prop="remark" min-width="180" />
|
||||
</el-table>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RecipePointApi, RecipePointVO } from '@/api/iot/recipePoint'
|
||||
|
||||
defineOptions({ name: 'FormulaLibraryDetailTabs' })
|
||||
|
||||
const props = defineProps({
|
||||
recipeId: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const activeTab = ref<'detail' | 'manual'>('detail')
|
||||
|
||||
const detailList = ref<{ key: string; pointName: string; value: string; unit: string }[]>([])
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref<RecipePointVO[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const queryFormRef = ref()
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: '' as string,
|
||||
refer: '' as string,
|
||||
dataUnit: '' as string,
|
||||
remark: '' as string
|
||||
})
|
||||
|
||||
const buildQueryParams = () => {
|
||||
const name = queryParams.name?.trim()
|
||||
const refer = queryParams.refer?.trim()
|
||||
const dataUnit = queryParams.dataUnit?.trim()
|
||||
const remark = queryParams.remark?.trim()
|
||||
return {
|
||||
pageNo: queryParams.pageNo,
|
||||
pageSize: queryParams.pageSize,
|
||||
recipeId: props.recipeId !== undefined && props.recipeId !== null ? String(props.recipeId) : undefined,
|
||||
name: name ? name : undefined,
|
||||
refer: refer ? refer : undefined,
|
||||
dataUnit: dataUnit ? dataUnit : undefined,
|
||||
remark: remark ? remark : undefined
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
if (!props.recipeId) {
|
||||
list.value = []
|
||||
total.value = 0
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await RecipePointApi.getRecipePointPage(buildQueryParams())
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.recipeId,
|
||||
() => {
|
||||
queryParams.pageNo = 1
|
||||
if (activeTab.value === 'manual') getList()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => activeTab.value,
|
||||
(tab) => {
|
||||
if (tab === 'manual') getList()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="70px"
|
||||
>
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input
|
||||
v-model="queryParams.code"
|
||||
placeholder="请输入编码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配方名称" prop="recipeId">
|
||||
<el-select
|
||||
v-model="queryParams.recipeId"
|
||||
placeholder="请选择配方"
|
||||
clearable
|
||||
filterable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in recipeOptions"
|
||||
:key="String(opt.value)"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联计划" prop="planId">
|
||||
<el-select
|
||||
v-model="queryParams.planId"
|
||||
placeholder="请选择关联计划"
|
||||
clearable
|
||||
filterable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in planOptions"
|
||||
:key="String(opt.value)"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源" prop="source">
|
||||
<el-select v-model="queryParams.source" placeholder="请选择来源" clearable class="!w-240px">
|
||||
<el-option v-for="opt in sourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> 查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openDialog('create')">
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
row-key="id"
|
||||
highlight-current-row
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column label="编码" align="center" prop="code" min-width="140" />
|
||||
<el-table-column label="名称" align="center" prop="name" min-width="140" />
|
||||
<el-table-column label="配方名称" align="center" prop="recipeName" min-width="160">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.recipeName ?? '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联计划" align="center" prop="planCode" min-width="160">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.planCode ?? '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建人" align="center" prop="creator" width="120" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180" />
|
||||
<el-table-column label="来源" align="center" prop="source" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.source" :type="getSourceTagType(scope.row.source)">{{ scope.row.source }}</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click.stop="openDialog('update', scope.row)">编辑</el-button>
|
||||
<el-button link type="danger" @click.stop="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap v-if="detailVisible">
|
||||
<FormulaLibraryDetailTabs :recipe-id="detailRecipeId" />
|
||||
</ContentWrap>
|
||||
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="720px">
|
||||
<el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogRules" label-width="100px" v-loading="dialogLoading">
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="dialogForm.code" placeholder="请输入编码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="dialogForm.name" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="配方" prop="recipeId">
|
||||
<el-select v-model="dialogForm.recipeId" placeholder="请选择配方" clearable filterable class="!w-full">
|
||||
<el-option v-for="opt in recipeOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联计划" prop="planId">
|
||||
<el-select v-model="dialogForm.planId" placeholder="请选择关联计划" clearable filterable class="!w-full">
|
||||
<el-option v-for="opt in planOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源" prop="source">
|
||||
<el-select v-model="dialogForm.source" placeholder="请选择来源" clearable class="!w-full">
|
||||
<el-option v-for="opt in sourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitDialog" :disabled="dialogLoading">保 存</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import download from '@/utils/download'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { RecipePlanDetailApi, RecipePlanDetailVO } from '@/api/iot/recipePlanDetail'
|
||||
import { RecipeConfigApi } from '@/api/iot/recipeConfig'
|
||||
import { PlanApi } from '@/api/mes/plan'
|
||||
import FormulaLibraryDetailTabs from './components/FormulaLibraryDetailTabs.vue'
|
||||
|
||||
type SelectOption<T = any> = { label: string; value: T }
|
||||
|
||||
defineOptions({ name: 'FormulaLibrary' })
|
||||
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(false)
|
||||
const exportLoading = ref(false)
|
||||
const queryFormRef = ref()
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
code: '' as string,
|
||||
name: '' as string,
|
||||
recipeId: undefined as string | number | undefined,
|
||||
planId: undefined as string | number | undefined,
|
||||
source: undefined as string | undefined
|
||||
})
|
||||
|
||||
const list = ref<RecipePlanDetailVO[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const detailRecipeId = ref<string | number | undefined>(undefined)
|
||||
|
||||
const sourceOptions: SelectOption<string>[] = [
|
||||
{ label: '新增', value: '新增' },
|
||||
{ label: '生产中', value: '生产中' }
|
||||
]
|
||||
|
||||
const recipeOptions = ref<SelectOption[]>([])
|
||||
const planOptions = ref<SelectOption[]>([])
|
||||
|
||||
const ensureOptionsLoaded = async () => {
|
||||
const [recipeRes, planRes] = await Promise.all([
|
||||
RecipeConfigApi.getRecipeConfigPage({}),
|
||||
PlanApi.getPlanPage({ status: 6 })
|
||||
])
|
||||
recipeOptions.value = (recipeRes?.list ?? []).map((item: any) => {
|
||||
const label = item.name ? `${item.recipeCode ?? ''}${item.recipeCode ? '-' : ''}${item.name}` : String(item.id)
|
||||
return { label, value: item.id }
|
||||
})
|
||||
planOptions.value = (planRes?.list ?? []).map((item: any) => {
|
||||
const label = item.code ?? String(item.id)
|
||||
return { label, value: item.id }
|
||||
})
|
||||
}
|
||||
|
||||
const buildQueryParams = () => {
|
||||
const code = queryParams.code?.trim()
|
||||
const name = queryParams.name?.trim()
|
||||
return {
|
||||
pageNo: queryParams.pageNo,
|
||||
pageSize: queryParams.pageSize,
|
||||
code: code ? code : undefined,
|
||||
name: name ? name : undefined,
|
||||
recipeId: queryParams.recipeId ? String(queryParams.recipeId) : undefined,
|
||||
planId: queryParams.planId ? String(queryParams.planId) : undefined,
|
||||
source: queryParams.source ? queryParams.source : undefined
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await RecipePlanDetailApi.getRecipePlanDetailPage(buildQueryParams())
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleRowClick = (row: RecipePlanDetailVO) => {
|
||||
if (!row) return
|
||||
detailRecipeId.value = row.recipeId
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields?.()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await message.exportConfirm()
|
||||
exportLoading.value = true
|
||||
const data = await RecipePlanDetailApi.exportRecipePlanDetail(buildQueryParams())
|
||||
download.excel(data, '配方库.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (row: RecipePlanDetailVO) => {
|
||||
if (!row?.id) return
|
||||
try {
|
||||
await message.delConfirm()
|
||||
await RecipePlanDetailApi.deleteRecipePlanDetail(row.id)
|
||||
message.success(t('common.delSuccess'))
|
||||
await getList()
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
const getSourceTagType = (source: string) => {
|
||||
if (source === '新增') return 'success'
|
||||
if (source === '生产中') return 'warning'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const dialogLoading = ref(false)
|
||||
const dialogFormRef = ref()
|
||||
const dialogType = ref<'create' | 'update'>('create')
|
||||
|
||||
const dialogForm = ref<RecipePlanDetailVO>({
|
||||
id: undefined,
|
||||
code: '',
|
||||
name: '',
|
||||
recipeId: undefined,
|
||||
planId: undefined,
|
||||
source: undefined,
|
||||
isEnable: undefined
|
||||
})
|
||||
|
||||
const dialogRules = reactive({
|
||||
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
recipeId: [{ required: true, message: '关联配方不能为空', trigger: 'change' }],
|
||||
planId: [{ required: true, message: '关联计划不能为空', trigger: 'change' }]
|
||||
})
|
||||
|
||||
const resetDialogForm = () => {
|
||||
dialogForm.value = {
|
||||
id: undefined,
|
||||
code: '',
|
||||
name: '',
|
||||
recipeId: undefined,
|
||||
planId: undefined,
|
||||
source: undefined
|
||||
}
|
||||
dialogFormRef.value?.resetFields?.()
|
||||
}
|
||||
|
||||
const openDialog = async (type: 'create' | 'update', row?: RecipePlanDetailVO) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
dialogType.value = type
|
||||
resetDialogForm()
|
||||
await ensureOptionsLoaded()
|
||||
if (type === 'update' && row) {
|
||||
dialogForm.value = {
|
||||
id: row.id,
|
||||
code: row.code,
|
||||
name: row.name,
|
||||
recipeId: row.recipeId ?? (row as any).recipeId,
|
||||
planId: row.planId ?? (row as any).planId,
|
||||
source: row.source
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submitDialog = async () => {
|
||||
await dialogFormRef.value.validate()
|
||||
dialogLoading.value = true
|
||||
try {
|
||||
const payload: Partial<RecipePlanDetailVO> = {
|
||||
id: dialogForm.value.id,
|
||||
code: dialogForm.value.code,
|
||||
name: dialogForm.value.name,
|
||||
recipeId: dialogForm.value.recipeId,
|
||||
planId: dialogForm.value.planId,
|
||||
source: dialogForm.value.source
|
||||
}
|
||||
if (dialogType.value === 'create') {
|
||||
await RecipePlanDetailApi.createRecipePlanDetail(payload)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await RecipePlanDetailApi.updateRecipePlanDetail(payload)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await getList()
|
||||
} finally {
|
||||
dialogLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await ensureOptionsLoaded()
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue