style：配方库-读取按钮逻辑修改（点击读取打开对应项子列表）

src/views/formula/formulaLibrary/components/FormulaLibraryDetailTabs.vue

@@ -186,20 +186,21 @@ const getList = async () => {
   if (!props.recipeId) {
     list.value = []
     total.value = 0
+    detailList.value = []
+    to.value = 0
     return
   }
   loading.value = true
   try {
     if (activeTab.value === 'manual') {
       const data = await RecipePointRecordApi.getRecipePointRecordPage(buildQueryParams())
-    list.value = data.list
+      list.value = data.list
-    total.value = data.total
+      total.value = data.total
     } else {
       const d = await RecipeDeviceRecordApi.getRecipeDeviceRecordPage(buildQueryParams())
-    detailList.value = d.list
+      detailList.value = d.list
-    to.value = d.total
+      to.value = d.total
     }
-    
   } finally {
     loading.value = false
   }
@@ -219,15 +220,15 @@ watch(
   () => props.recipeId,
   () => {
     queryParams.pageNo = 1
-    // if (activeTab.value === 'manual') 
     getList()
-  }
+  },
+  { immediate: true }
 )
 
 watch(
   () => activeTab.value,
   (tab) => {
-    // if (tab === 'manual') 
+    queryParams.pageNo = 1
     getList()
   }
 )

src/views/formula/formulaLibrary/index.vue

@@ -1,44 +1,24 @@
 <template>
   <ContentWrap>
     <el-form
-      class="-mb-15px recipe-library-filter-form"
+class="-mb-15px recipe-library-filter-form" :model="queryParams" ref="queryFormRef" :inline="true"
-      :model="queryParams"
+      label-width="auto">
-      ref="queryFormRef"
-      :inline="true"
-      label-width="auto"
-    >
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.searchCodeLabel')" prop="code">
         <el-input
-          v-model="queryParams.code"
+v-model="queryParams.code" :placeholder="t('RecipeManagement.RecipeLibrary.searchCodePlaceholder')"
-          :placeholder="t('RecipeManagement.RecipeLibrary.searchCodePlaceholder')"
+          clearable @keyup.enter="handleQuery" class="!w-240px" />
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.searchNameLabel')" prop="name">
         <el-input
-          v-model="queryParams.name"
+v-model="queryParams.name" :placeholder="t('RecipeManagement.RecipeLibrary.searchNamePlaceholder')"
-          :placeholder="t('RecipeManagement.RecipeLibrary.searchNamePlaceholder')"
+          clearable @keyup.enter="handleQuery" class="!w-240px" />
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.searchRecipeLabel')" prop="recipeId">
         <el-select
-          v-model="queryParams.recipeId"
+v-model="queryParams.recipeId"
-          :placeholder="t('RecipeManagement.RecipeLibrary.searchRecipePlaceholder')"
+          :placeholder="t('RecipeManagement.RecipeLibrary.searchRecipePlaceholder')" clearable filterable
-          clearable
+          class="!w-240px">
-          filterable
+          <el-option v-for="opt in recipeOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
-          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="source">
@@ -69,32 +49,17 @@
 
   <ContentWrap>
     <el-table
-      v-loading="loading"
+v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
-      :data="list"
+      highlight-current-row @row-click="handleRowClick">
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-      highlight-current-row
-      @row-click="handleRowClick"
-    >
       <el-table-column
-        :label="t('RecipeManagement.RecipeLibrary.tableCodeColumn')"
+:label="t('RecipeManagement.RecipeLibrary.tableCodeColumn')" align="center" prop="code"
-        align="center"
+        min-width="140" />
-        prop="code"
-        min-width="140"
-      />
       <el-table-column
-        :label="t('RecipeManagement.RecipeLibrary.tableNameColumn')"
+:label="t('RecipeManagement.RecipeLibrary.tableNameColumn')" align="center" prop="name"
-        align="center"
+        min-width="140" />
-        prop="name"
-        min-width="140"
-      />
       <el-table-column
-        :label="t('RecipeManagement.RecipeLibrary.tableRecipeNameColumn')"
+:label="t('RecipeManagement.RecipeLibrary.tableRecipeNameColumn')" align="center"
-        align="center"
+        prop="recipeName" min-width="160">
-        prop="recipeName"
-        min-width="160"
-      >
         <template #default="scope">
           <span>{{ scope.row.recipeName ?? '-' }}</span>
         </template>
@@ -106,12 +71,8 @@
         width="120"
       /> -->
       <el-table-column
-        :label="t('RecipeManagement.RecipeLibrary.tableCreateTimeColumn')"
+:label="t('RecipeManagement.RecipeLibrary.tableCreateTimeColumn')" align="center"
-        align="center"
+        prop="createTime" :formatter="dateFormatter" width="180" />
-        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>
@@ -119,11 +80,8 @@
         </template>
       </el-table-column> -->
       <el-table-column
-        :label="t('RecipeManagement.RecipeLibrary.tableOperateColumn')"
+:label="t('RecipeManagement.RecipeLibrary.tableOperateColumn')" align="center" width="180"
-        align="center"
+        fixed="right">
-        width="180"
-        fixed="right"
-      >
         <template #default="scope">
           <el-button link type="primary" @click.stop="handleRead(scope.row)">
             {{ t('RecipeManagement.RecipeLibrary.tableReadAction') }}
@@ -139,11 +97,8 @@
     </el-table>
 
     <Pagination
-      :total="total"
+:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      v-model:page="queryParams.pageNo"
+      @pagination="getList" />
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
   </ContentWrap>
 
   <ContentWrap v-if="detailVisible">
@@ -154,37 +109,23 @@
 
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="720px">
     <el-form
-      ref="dialogFormRef"
+ref="dialogFormRef" :model="dialogForm" :rules="dialogRules" class="recipe-library-dialog-form"
-      :model="dialogForm"
+      label-width="auto" v-loading="dialogLoading">
-      :rules="dialogRules"
-      class="recipe-library-dialog-form"
-      label-width="auto"
-      v-loading="dialogLoading"
-    >
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.dialogCodeLabel')" prop="code">
         <el-input
-          v-model="dialogForm.code"
+v-model="dialogForm.code" :placeholder="t('RecipeManagement.RecipeLibrary.dialogCodePlaceholder')"
-          :placeholder="t('RecipeManagement.RecipeLibrary.dialogCodePlaceholder')"
+          clearable :disabled="dialogType == 'update'" />
-          clearable
-          :disabled="dialogType == 'update'"
-        />
       </el-form-item>
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.dialogNameLabel')" prop="name">
         <el-input
-          v-model="dialogForm.name"
+v-model="dialogForm.name" :placeholder="t('RecipeManagement.RecipeLibrary.dialogNamePlaceholder')"
-          :placeholder="t('RecipeManagement.RecipeLibrary.dialogNamePlaceholder')"
+          clearable />
-          clearable
-        />
       </el-form-item>
       <el-form-item :label="t('RecipeManagement.RecipeLibrary.dialogRecipeLabel')" prop="recipeId">
         <el-select
-          v-model="dialogForm.recipeId"
+v-model="dialogForm.recipeId"
-          :placeholder="t('RecipeManagement.RecipeLibrary.dialogRecipePlaceholder')"
+          :placeholder="t('RecipeManagement.RecipeLibrary.dialogRecipePlaceholder')" clearable filterable
-          clearable
+          class="!w-full" :disabled="dialogType == 'update'">
-          filterable
-          class="!w-full"
-          :disabled="dialogType == 'update'"
-        >
           <el-option v-for="opt in recipeOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
         </el-select>
       </el-form-item>
@@ -260,7 +201,7 @@ const sourceOptions: SelectOption<string>[] = [
 const recipeOptions = ref<SelectOption[]>([])
 
 const ensureOptionsLoaded = async () => {
-	const recipeRes = await RecipeConfigApi.getRecipeConfigPage({})
+  const recipeRes = await RecipeConfigApi.getRecipeConfigPage({})
   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 }
@@ -275,7 +216,7 @@ const buildQueryParams = () => {
     pageSize: queryParams.pageSize,
     code: code ? code : undefined,
     name: name ? name : undefined,
-		recipeId: queryParams.recipeId ? String(queryParams.recipeId) : undefined,
+    recipeId: queryParams.recipeId ? String(queryParams.recipeId) : undefined,
     source: queryParams.source ? queryParams.source : undefined
   }
 }
@@ -349,24 +290,24 @@ const dialogFormRef = ref()
 const dialogType = ref<'create' | 'update'>('create')
 
 const dialogForm = ref<RecipePlanDetailVO>({
-	id: undefined,
+  id: undefined,
-	code: '',
+  code: '',
-	name: '',
+  name: '',
-	recipeId: undefined,
+  recipeId: undefined,
-	source: undefined,
+  source: undefined,
-	isEnable: undefined
+  isEnable: undefined
 })
 
 const dialogRules = reactive({
-	code: [
+  code: [
-		{ required: true, message: t('RecipeManagement.RecipeLibrary.validatorCodeRequired'), trigger: 'blur' }
+    { required: true, message: t('RecipeManagement.RecipeLibrary.validatorCodeRequired'), trigger: 'blur' }
-	],
+  ],
-	name: [
+  name: [
-		{ required: true, message: t('RecipeManagement.RecipeLibrary.validatorNameRequired'), trigger: 'blur' }
+    { required: true, message: t('RecipeManagement.RecipeLibrary.validatorNameRequired'), trigger: 'blur' }
-	],
+  ],
-	recipeId: [
+  recipeId: [
-		{ required: true, message: t('RecipeManagement.RecipeLibrary.validatorRecipeRequired'), trigger: 'change' }
+    { required: true, message: t('RecipeManagement.RecipeLibrary.validatorRecipeRequired'), trigger: 'change' }
-	]
+  ]
 })
 
 const resetDialogForm = () => {
@@ -374,8 +315,8 @@ const resetDialogForm = () => {
     id: undefined,
     code: '',
     name: '',
-		recipeId: undefined,
+    recipeId: undefined,
-		source: undefined
+    source: undefined
   }
   dialogFormRef.value?.resetFields?.()
 }
@@ -391,7 +332,7 @@ const openDialog = async (type: 'create' | 'update', row?: RecipePlanDetailVO) =
       id: row.id,
       code: row.code,
       name: row.name,
-			recipeId: row.recipeId ?? (row as any).recipeId,
+      recipeId: row.recipeId ?? (row as any).recipeId,
       source: row.source
     }
   }
@@ -402,7 +343,7 @@ const readDialogRef = ref<InstanceType<typeof FormulaLibraryReadDialog>>()
 const checkRecipeRecords = async (recipeId: string | number) => {
   const params = {
     pageNo: 1,
-    pageSize: 1,
+    pageSize: 10,
     recipeId: String(recipeId)
   }
   try {
@@ -428,15 +369,18 @@ const handleRead = async (row: RecipePlanDetailVO) => {
   const recipeId = row?.recipeId
   const id = row?.id
   if (!recipeId) return
+  handleRowClick(row)
   const recipeName = row?.recipeName
   const { hasDeviceRecords, hasManualRecords } = await checkRecipeRecords(recipeId)
   const data = await RecipePointApi.getRecipePointList(Number(recipeId))
   if (!data?.length) {
-    await message.confirm(t('RecipeManagement.RecipeLibrary.readDeviceConfirmMessage'))
+    await message.confirm(
+      `${t('RecipeManagement.RecipeLibrary.readDeviceConfirmMessage')}(${t('RecipeManagement.RecipeLibrary.readDialogOverwriteTip')})`
+    )
     if (id != null) {
       await RecipeDeviceRecordApi.createRecipeDeviceRecordBatch(id)
-    message.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
-    return
+      return
     }
   }
   await readDialogRef.value?.open({
@@ -456,7 +400,7 @@ const submitDialog = async () => {
       id: dialogForm.value.id,
       code: dialogForm.value.code,
       name: dialogForm.value.name,
-			recipeId: dialogForm.value.recipeId,
+      recipeId: dialogForm.value.recipeId,
       source: dialogForm.value.source
     }
     if (dialogType.value === 'create') {
@@ -474,8 +418,8 @@ const submitDialog = async () => {
 }
 
 onMounted(async () => {
-	await ensureOptionsLoaded()
+  await ensureOptionsLoaded()
-	await getList()
+  await getList()
 })
 </script>