Prechádzať zdrojové kódy

feat(gwnrgl/cpzx): 添加产品搜索和分类选择功能

- 新增产品分类、类型和名称的搜索参数- 实现搜索栏UI,包含分类下拉、类型和名称输入框- 添加搜索和重置功能,支持回车触发搜索
- 修改产品分类字段为下拉选择器,提供预设选项
- 修复Quill编辑器引用方式,确保正确获取实例-优化图片处理逻辑,增强空值处理安全性
- 完善分页请求参数,支持搜索条件传递- 添加重置搜索条件方法,清空搜索并刷新列表
nahida 6 mesiacov pred
rodič
commit
376e4ec9a8
1 zmenil súbory, kde vykonal 67 pridanie a 4 odobranie
  1. 67 4
      src/views/gwnrgl/cpzx/index.vue

+ 67 - 4
src/views/gwnrgl/cpzx/index.vue

@@ -43,6 +43,13 @@ const pagination = reactive({
   pageSize: 10
 })
 
+// 新增:搜索参数
+const searchParams = reactive({
+  productCategory: '',
+  productType: '',
+  productName: ''
+})
+
 // 表单数据
 const formData = reactive({
   id: '',
@@ -82,7 +89,7 @@ const getImagesFromContent = (content) => {
   if (!content) return []
 
   const delta = typeof content === 'string' ?
-      quillRef.value?.clipboard.convert(content) :
+      quillRef.value?.clipboard?.convert(content) :
       content
 
   const images = []
@@ -242,7 +249,10 @@ const getList = async () => {
     const res = await request.get("/productCenter/findByPage", {
       params: {
         pageNum: pagination.pageNum,
-        pageSize: pagination.pageSize
+        pageSize: pagination.pageSize,
+        productCategory: searchParams.productCategory || undefined,
+        productType: searchParams.productType || undefined,
+        productName: searchParams.productName || undefined
       }
     })
     if (res.code !== 200) {
@@ -258,6 +268,17 @@ const getList = async () => {
   }
 }
 
+// 新增:重置搜索条件
+const resetSearch = () => {
+  Object.assign(searchParams, {
+    productCategory: '',
+    productType: '',
+    productName: ''
+  })
+  pagination.pageNum = 1
+  getList()
+}
+
 // 新增:重置图片变化记录
 const resetImageTracking = () => {
   insertedImages.value = []
@@ -515,6 +536,45 @@ const handleDialogClose = () => {
       <h1 class="text-2xl font-bold text-gray-800">产品中心管理</h1>
     </div>
 
+    <!-- 搜索栏 -->
+    <div class="mb-4 bg-white p-4 rounded shadow">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-select
+            v-model="searchParams.productCategory"
+            placeholder="请选择产品分类"
+            clearable
+            @keyup.enter="getList"
+          >
+            <el-option label="软件产品" value="软件产品"/>
+            <el-option label="硬件产品" value="硬件产品"/>
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model="searchParams.productType"
+            placeholder="请输入产品类型"
+            clearable
+            @keyup.enter="getList"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model="searchParams.productName"
+            placeholder="请输入产品名称"
+            clearable
+            @keyup.enter="getList"
+          />
+        </el-col>
+        <el-col :span="6">
+          <div class="flex gap-2">
+            <el-button type="primary" @click="getList">搜索</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <!-- 操作栏 -->
     <div class="mb-4 flex justify-between items-center">
       <div class="flex gap-2">
@@ -601,7 +661,10 @@ const handleDialogClose = () => {
     >
       <el-form :model="formData" label-width="100px">
         <el-form-item label="产品分类" required>
-          <el-input v-model="formData.productCategory" placeholder="请输入产品分类"/>
+          <el-select v-model="formData.productCategory" placeholder="请选择产品分类">
+            <el-option label="硬件产品" value="硬件产品"/>
+            <el-option label="软件产品" value="软件产品"/>
+          </el-select>
         </el-form-item>
         <el-form-item label="产品类型" required>
           <el-input v-model="formData.productType" placeholder="请输入产品类型"/>
@@ -643,7 +706,7 @@ const handleDialogClose = () => {
           <div class="w-full">
             <!-- 添加编辑器就绪事件 -->
             <QuillEditor
-                :ref="quillRef"
+                ref="quillRef"
                 v-model:content="formData.productDetails"
                 :options="quillOptions"
                 content-type="html"