chore: update

src/views/list/card/components/DialogForm.vue

@@ -82,6 +82,7 @@ const rules = {
     v-model="formVisible"
     title="新建产品"
     :width="680"
+    draggable
     :before-close="closeDialog"
   >
     <!-- 表单内容 -->
@@ -115,6 +116,7 @@ const rules = {
         <el-select
           v-model="formData.type"
           clearable
+          :teleported="false"
           :style="{ width: '480px' }"
         >
           <el-option

src/views/list/card/index.vue

@@ -10,6 +10,7 @@ import ReCard from "/@/components/ReCard";
 import { ref, onMounted, nextTick } from "vue";
 import DialogForm from "./components/DialogForm.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 const svg = `
         <path class="path" d="
@@ -94,86 +95,83 @@ const handleManageProduct = product => {
 </script>
 
 <template>
-  <div>
-    <div class="list-card-operation">
-      <el-button @click="formDialogVisible = true"> 新建产品 </el-button>
-      <div class="search-input">
-        <el-input
-          v-model="searchValue"
-          placeholder="请输入你需要搜索的内容"
-          clearable
-        >
-          <template #suffix>
-            <el-icon class="el-input__icon">
-              <IconifyIconOffline v-if="searchValue === ''" icon="search" />
-            </el-icon>
-          </template>
-        </el-input>
-      </div>
+  <div class="main">
+    <div class="w-full flex justify-between mb-4">
+      <el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true"
+        >新建产品</el-button
+      >
+      <el-input
+        style="width: 300px"
+        v-model="searchValue"
+        placeholder="请输入产品名称"
+        clearable
+      >
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <IconifyIconOffline
+              v-show="searchValue.length === 0"
+              icon="search"
+            />
+          </el-icon>
+        </template>
+      </el-input>
     </div>
     <div
       v-loading="dataLoading"
       :element-loading-svg="svg"
       element-loading-svg-view-box="-10, -10, 50, 50"
     >
+      <el-empty
+        description="暂无数据"
+        v-show="
+          productList
+            .slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current
+            )
+            .filter(v =>
+              v.name.toLowerCase().includes(searchValue.toLowerCase())
+            ).length === 0
+        "
+      />
       <template v-if="pagination.total > 0">
-        <div class="list-card-items">
-          <el-row :gutter="16">
-            <el-col
-              v-for="product in productList.slice(
+        <el-row :gutter="16">
+          <el-col
+            v-for="(product, index) in productList
+              .slice(
                 pagination.pageSize * (pagination.current - 1),
                 pagination.pageSize * pagination.current
+              )
+              .filter(v =>
+                v.name.toLowerCase().includes(searchValue.toLowerCase())
               )"
-              :key="product.index"
-              :xs="24"
-              :sm="12"
-              :md="8"
-              :lg="6"
-              :xl="4"
-            >
-              <ReCard
-                class="list-card-item"
-                :product="product"
-                @delete-item="handleDeleteItem"
-                @manage-product="handleManageProduct"
-              />
-            </el-col>
-          </el-row>
-        </div>
-        <div class="list-card-pagination">
-          <el-pagination
-            v-model:currentPage="pagination.current"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            :page-sizes="[12, 24, 36]"
-            layout="total, sizes, prev, pager, next"
-            @size-change="onPageSizeChange"
-            @current-change="onCurrentChange"
-          />
-        </div>
+            :key="index"
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+          >
+            <ReCard
+              :product="product"
+              @delete-item="handleDeleteItem"
+              @manage-product="handleManageProduct"
+            />
+          </el-col>
+        </el-row>
+        <el-pagination
+          class="float-right"
+          v-model:currentPage="pagination.current"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[12, 24, 36]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
       </template>
     </div>
     <DialogForm v-model:visible="formDialogVisible" :data="formData" />
   </div>
 </template>
-
-<style scoped lang="scss">
-.list-card {
-  &-operation {
-    display: flex;
-    justify-content: space-between;
-
-    .search-input {
-      width: 360px;
-    }
-  }
-
-  &-items {
-    margin: 14px 0 24px 0;
-  }
-
-  &-pagination {
-    padding: 16px;
-  }
-}
-</style>