Home Explore Help
Register Sign In
genlitex
/
prototype_design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

zhengjianadmin-2025-07-01 01:08:41

genlitex 1 month ago
parent
37c1f862cc
commit
5cd06623d7
7 changed files with 430 additions and 110 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-4owCqU6i.css
  2. 0 0
      dist/assets/index-DzbOTDW7.js
  3. 0 0
      dist/assets/index-phFbRUZD.css
  4. 2 2
      dist/index.html
  5. 42 108
      src/assets/templates/prototype/customer/CustomerManagement.vue
  6. 5 0
      src/router/index.js
  7. 381 0
      src/views/RawMaterialCategoryView.vue

File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-4owCqU6i.css


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-DzbOTDW7.js


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-phFbRUZD.css


+ 2 - 2
dist/index.html
View File 

@@ -5,8 +5,8 @@
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Vite + Vue</title>
 
     <title>Vite + Vue</title>
 
-    <script type="module" crossorigin src="/ide/proxy/6000/assets/index-BZUB90T3.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/ide/proxy/6000/assets/index-4owCqU6i.css">
 
+    <script type="module" crossorigin src="/ide/proxy/6005/assets/index-DzbOTDW7.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6005/assets/index-phFbRUZD.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 42 - 108
src/assets/templates/prototype/customer/CustomerManagement.vue
View File 

@@ -3,22 +3,16 @@
 
     <!-- 头部操作区 -->
 
     <!-- 头部操作区 -->
 
     <div class="bg-white rounded-lg shadow p-6 mb-6">
 
     <div class="bg-white rounded-lg shadow p-6 mb-6">
 
       <div class="flex justify-between items-center">
 
       <div class="flex justify-between items-center">
 
-        <h2 class="text-2xl font-bold text-gray-800">客户管理</h2>
 
+        <h2 class="text-2xl font-bold text-gray-800">原料品类管理</h2>
 
         <div class="flex space-x-4">
 
         <div class="flex space-x-4">
 
-          <button 
-            @click="showAddDialog = true"
 
-            class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
 
-          >
 
-            <PlusIcon class="w-5 h-5 mr-2" />
 
-            新增客户
 
-          </button>
 
-          <button 
-            @click="showAnalysisDialog = true"
 
-            class="flex items-center px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
 
-          >
 
-            <BarChartIcon class="w-5 h-5 mr-2" />
 
-            客户分析
 
-          </button>
 
+<button 
+  @click="showAddDialog = true"
 
+  class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
 
+>
 
+  <PlusIcon class="w-5 h-5 mr-2" />
 
+  新增原料品类
 
+</button>
 
+<!-- Remove this button as analysis is not required for Raw Material Category Management -->
 
           <button 
           <button 
             @click="handleExport"
 
             @click="handleExport"
 
             class="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
 
             class="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
 
@@ -50,49 +44,17 @@
 
       <div class="flex flex-wrap gap-4">
 
       <div class="flex flex-wrap gap-4">
 
         <div class="relative flex-1 min-w-[200px]">
 
         <div class="relative flex-1 min-w-[200px]">
 
           <SearchIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
 
           <SearchIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
 
-          <input 
-            v-model="searchQuery"
 
-            type="text"
 
-            placeholder="搜索客户名称/联系人/电话"
 
-            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
-            @input="handleSearch"
 
-          />
 
-        </div>
 
-        <select 
-          v-model="filterLevel"
 
-          class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
-          @change="handleSearch"
 
-        >
 
-          <option value="">客户等级</option>
 
-          <option v-for="level in customerLevels" :key="level.value" :value="level.value">
 
-            {{ level.label }}
 
-          </option>
 
-        </select>
 
-        <select 
-          v-model="filterStatus"
 
-          class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
-          @change="handleSearch"
 
-        >
 
-          <option value="">客户状态</option>
 
-          <option v-for="status in customerStatuses" :key="status.value" :value="status.value">
 
-            {{ status.label }}
 
-          </option>
 
-        </select>
 
-        <div class="flex items-center space-x-2">
 
-          <input 
-            type="date" 
-            v-model="dateRange[0]"
 
-            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
-            @change="handleSearch"
 
-          />
 
-          <span>至</span>
 
-          <input 
-            type="date" 
-            v-model="dateRange[1]"
 
-            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
-            @change="handleSearch"
 
-          />
 
+<input 
+  v-model="searchQuery"
 
+  type="text"
 
+  placeholder="根据物料编码/物料组/类别一/类别二/原料大类进行模糊查询"
 
+  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
+  @input="handleSearch"
 
+/>
 
         </div>
 
         </div>
 
+<!-- Remove this dropdown as it is not required for Raw Material Category Management -->
 
+<!-- Remove this dropdown as it is not required for Raw Material Category Management -->
 
+<!-- Remove this date range picker as it is not required for Raw Material Category Management -->
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
 
 
@@ -109,20 +71,15 @@
 
                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
                 />
 
                 />
 
               </th>
 
               </th>
 
-              <th 
-                v-for="column in columns" 
-                :key="column.prop"
 
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer"
 
-                @click="handleSort(column.prop)"
 
-              >
 
-                <div class="flex items-center">
 
-                  {{ column.label }}
 
-                  <span class="ml-1">
 
-                    <ChevronUpIcon v-if="sortKey === column.prop && sortOrder === 'asc'" class="h-4 w-4 inline-block" />
 
-                    <ChevronDownIcon v-else-if="sortKey === column.prop && sortOrder === 'desc'" class="h-4 w-4 inline-block" />
 
-                  </span>
 
-                </div>
 
-              </th>
 
+<th 
+  v-for="column in columns" 
+  :key="column.prop"
 
+  class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer"
 
+>
 
+  <div class="flex items-center">
 
+    {{ column.label }}
 
+  </div>
 
+</th>
 
               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 
               <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 
                 操作
 
                 操作
 
               </th>
 
               </th>
 
@@ -138,44 +95,21 @@
 
                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
                 />
 
                 />
 
               </td>
 
               </td>
 
-              <td class="px-6 py-4 whitespace-nowrap">{{ customer.name }}</td>
 
-              <td class="px-6 py-4 whitespace-nowrap">{{ customer.contact }}</td>
 
-              <td class="px-6 py-4 whitespace-nowrap">{{ customer.phone }}</td>
 
-              <td class="px-6 py-4 whitespace-nowrap">
 
-                <span 
-                  :class="[
 
-                    'px-2 py-1 text-xs font-semibold rounded-full',
 
-                    getLevelClass(customer.level)
 
-                  ]"
 
-                >
 
-                  {{ getLevelLabel(customer.level) }}
 
-                </span>
 
-              </td>
 
-              <td class="px-6 py-4 whitespace-nowrap">
 
-                <span 
-                  :class="[
 
-                    'px-2 py-1 text-xs font-semibold rounded-full',
 
-                    getStatusClass(customer.status)
 
-                  ]"
 
-                >
 
-                  {{ getStatusLabel(customer.status) }}
 
-                </span>
 
-              </td>
 
-              <td class="px-6 py-4 whitespace-nowrap">{{ formatDateTime(customer.createTime) }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.materialCode }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.materialGroup }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.categoryOne }}</td>
 
+<td class="px-6 py-4 whitespace-nowrap">{{ material.categoryTwo }}</td>
 
+<td class="px-6 py-4 whitespace-nowrap">{{ material.rawMaterialCategory }}</td>
 
+              <!-- Remove this column as it is not required for Raw Material Category Management -->
 
               <td class="px-6 py-4 whitespace-nowrap">
 
               <td class="px-6 py-4 whitespace-nowrap">
 
                 <div class="flex space-x-2">
 
                 <div class="flex space-x-2">
 
-                  <button 
-                    @click="showDetail(customer)"
 
-                    class="px-3 py-1 text-sm text-blue-600 hover:text-blue-800"
 
-                  >
 
-                    详情
 
-                  </button>
 
-                  <button 
-                    @click="handleEdit(customer)"
 
-                    class="px-3 py-1 text-sm text-green-600 hover:text-green-800"
 
-                  >
 
-                    编辑
 
-                  </button>
 
+<button 
+  @click="handleEdit(material)"
 
+  class="px-3 py-1 text-sm text-green-600 hover:text-green-800"
 
+>
 
+  修改
 
+</button>
 
+<!-- Remove this button as it is redundant with the "修改" button -->
 
                   <button 
                   <button 
                     @click="handleDelete(customer)"
 
                     @click="handleDelete(customer)"
 
                     class="px-3 py-1 text-sm text-red-600 hover:text-red-800"
 
                     class="px-3 py-1 text-sm text-red-600 hover:text-red-800"
 
@@ -855,4 +789,4 @@ watch(showAnalysisDialog, (newVal) => {
 
     })
 
     })
 
   }
 
   }
 
 })
 
 })
 
-</script> 
+</script>

+ 5 - 0
src/router/index.js
View File 

@@ -157,6 +157,11 @@ const routes = [
 
     name: 'Futuristic',
 
     name: 'Futuristic',
 
     component: FuturisticView
 
     component: FuturisticView
 
   },
 
   },
 
+  {
 
+    path: '/raw-material-category',
 
+    name: 'raw-material-category',
 
+    component: RawMaterialCategoryView
 
+  },
 
   {
 
   {
 
     path: '/:pathMatch(.*)*',
 
     path: '/:pathMatch(.*)*',
 
     redirect: '/'
 
     redirect: '/'

+ 381 - 0
src/views/RawMaterialCategoryView.vue
View File 

@@ -0,0 +1,381 @@
 
+<template>
 
+  <div class="p-6">
 
+    <!-- 头部操作区 -->
 
+    <div class="bg-white rounded-lg shadow p-6 mb-6">
 
+      <div class="flex justify-between items-center">
 
+        <h2 class="text-2xl font-bold text-gray-800">原料品类管理</h2>
 
+        <div class="flex space-x-4">
 
+          <button 
+            @click="showAddDialog = true"
 
+            class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
 
+          >
 
+            <PlusIcon class="w-5 h-5 mr-2" />
 
+            新增原料品类
 
+          </button>
 
+          <button 
+            @click="handleExport"
 
+            class="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
 
+          >
 
+            <DownloadIcon class="w-5 h-5 mr-2" />
 
+            导出数据
 
+          </button>
 
+          <div class="relative">
 
+            <input 
+              type="file" 
+              class="hidden" 
+              ref="fileInput"
 
+              @change="handleFileChange"
 
+            />
 
+            <button 
+              @click="$refs.fileInput.click()"
 
+              class="flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
 
+            >
 
+              <UploadIcon class="w-5 h-5 mr-2" />
 
+              导入数据
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 筛选区 -->
 
+    <div class="bg-white rounded-lg shadow p-6 mb-6">
 
+      <div class="flex flex-wrap gap-4">
 
+        <div class="relative flex-1 min-w-[200px]">
 
+          <SearchIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
 
+          <input 
+            v-model="searchQuery"
 
+            type="text"
 
+            placeholder="根据物料编码/物料组/类别一/类别二/原料大类进行模糊查询"
 
+            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
 
+            @input="handleSearch"
 
+          />
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 原料品类列表 -->
 
+    <div class="bg-white rounded-lg shadow overflow-hidden">
 
+      <div class="overflow-x-auto">
 
+        <table class="min-w-full divide-y divide-gray-200">
 
+          <thead class="bg-gray-50">
 
+            <tr>
 
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 
+                <input 
+                  type="checkbox" 
+                  v-model="selectAll"
 
+                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
+                />
 
+              </th>
 
+              <th 
+                v-for="column in columns" 
+                :key="column.prop"
 
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer"
 
+              >
 
+                <div class="flex items-center">
 
+                  {{ column.label }}
 
+                </div>
 
+              </th>
 
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 
+                操作
 
+              </th>
 
+            </tr>
 
+          </thead>
 
+          <tbody class="bg-white divide-y divide-gray-200">
 
+            <tr v-for="material in filteredMaterials" :key="material.id" class="hover:bg-gray-50">
 
+              <td class="px-6 py-4 whitespace-nowrap">
 
+                <input 
+                  type="checkbox" 
+                  v-model="selectedItems"
 
+                  :value="material.id"
 
+                  class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
 
+                />
 
+              </td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.materialCode }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.materialGroup }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.categoryOne }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.categoryTwo }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">{{ material.rawMaterialCategory }}</td>
 
+              <td class="px-6 py-4 whitespace-nowrap">
 
+                <div class="flex space-x-2">
 
+                  <button 
+                    @click="handleEdit(material)"
 
+                    class="px-3 py-1 text-sm text-green-600 hover:text-green-800"
 
+                  >
 
+                    修改
 
+                  </button>
 
+                  <button 
+                    @click="handleDelete(material)"
 
+                    class="px-3 py-1 text-sm text-red-600 hover:text-red-800"
 
+                  >
 
+                    删除
 
+                  </button>
 
+                </div>
 
+              </td>
 
+            </tr>
 
+          </tbody>
 
+        </table>
 
+      </div>
 
+
 
+      <!-- 批量操作 -->
 
+      <div v-if="selectedItems.length > 0" class="px-6 py-4 bg-gray-50 border-t border-gray-200">
 
+        <div class="flex items-center justify-between">
 
+          <span class="text-sm text-gray-600">已选择 {{ selectedItems.length }} 项</span>
 
+          <div class="flex space-x-4">
 
+            <button 
+              @click="handleBatchEdit"
 
+              class="flex items-center px-4 py-2 text-sm text-blue-600 hover:text-blue-800"
 
+            >
 
+              <EditIcon class="w-4 h-4 mr-1" />
 
+              批量编辑
 
+            </button>
 
+            <button 
+              @click="handleBatchDelete"
 
+              class="flex items-center px-4 py-2 text-sm text-red-600 hover:text-red-800"
 
+            >
 
+              <TrashIcon class="w-4 h-4 mr-1" />
 
+              批量删除
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 分页 -->
 
+      <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
 
+        <div class="flex items-center justify-between">
 
+          <div class="flex items-center">
 
+            <span class="text-sm text-gray-700 mr-4">每页显示</span>
 
+            <select 
+              v-model="pageSize"
 
+              class="px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
 
+              @change="handleSizeChange"
 
+            >
 
+              <option v-for="size in [10, 20, 50, 100]" :key="size" :value="size">
 
+                {{ size }}
 
+              </option>
 
+            </select>
 
+          </div>
 
+          <div class="flex items-center space-x-2">
 
+            <button 
+              @click="currentPage--"
 
+              :disabled="currentPage === 1"
 
+              class="px-3 py-1 border border-gray-300 rounded-md disabled:opacity-50"
 
+            >
 
+              <ChevronLeftIcon class="w-4 h-4" />
 
+            </button>
 
+            <span class="text-sm text-gray-700">
 
+              第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
 
+            </span>
 
+            <button 
+              @click="currentPage++"
 
+              :disabled="currentPage === totalPages"
 
+              class="px-3 py-1 border border-gray-300 rounded-md disabled:opacity-50"
 
+            >
 
+              <ChevronRightIcon class="w-4 h-4" />
 
+            </button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 
+import { 
+  PlusIcon, 
+  DownloadIcon, 
+  UploadIcon, 
+  SearchIcon, 
+  EditIcon,
 
+  TrashIcon,
 
+  ChevronLeftIcon,
 
+  ChevronRightIcon,
 
+  XIcon
 
+} from 'lucide-vue-next'
 
+import { useRouter } from 'vue-router'
 
+
 
+const router = useRouter()
 
+
 
+// Mock 数据
 
+const mockData = {
 
+  materials: {
 
+    list: [
 
+      {
 
+        id: 1,
 
+        materialCode: 'M001',
 
+        materialGroup: 'MG01',
 
+        categoryOne: 'C1',
 
+        categoryTwo: 'C2',
 
+        rawMaterialCategory: 'RMC01'
 
+      },
 
+      {
 
+        id: 2,
 
+        materialCode: 'M002',
 
+        materialGroup: 'MG02',
 
+        categoryOne: 'C3',
 
+        categoryTwo: 'C4',
 
+        rawMaterialCategory: 'RMC02'
 
+      }
 
+    ],
 
+    total: 2
 
+  }
 
+}
 
+
 
+// 状态管理
 
+const loading = ref(false)
 
+const searchQuery = ref('')
 
+const currentPage = ref(1)
 
+const pageSize = ref(10)
 
+const total = ref(0)
 
+const selectedItems = ref([])
 
+const showAddDialog = ref(false)
 
+const isEdit = ref(false)
 
+const sortKey = ref('')
 
+const sortOrder = ref('asc')
 
+
 
+// 常量定义
 
+const columns = [
 
+  { prop: 'materialCode', label: '物料编码' },
 
+  { prop: 'materialGroup', label: '物料组' },
 
+  { prop: 'categoryOne', label: '类别一' },
 
+  { prop: 'categoryTwo', label: '类别二' },
 
+  { prop: 'rawMaterialCategory', label: '原料大类' }
 
+]
 
+
 
+const addForm = ref({
 
+  materialCode: '',
 
+  materialGroup: '',
 
+  categoryOne: '',
 
+  categoryTwo: '',
 
+  rawMaterialCategory: ''
 
+})
 
+
 
+// 计算属性
 
+const filteredMaterials = computed(() => {
 
+  return mockData.materials.list.filter(material => 
+    material.materialCode.includes(searchQuery.value) ||
 
+    material.materialGroup.includes(searchQuery.value) ||
 
+    material.categoryOne.includes(searchQuery.value) ||
 
+    material.categoryTwo.includes(searchQuery.value) ||
 
+    material.rawMaterialCategory.includes(searchQuery.value)
 
+  )
 
+})
 
+
 
+const totalPages = computed(() => {
 
+  return Math.ceil(total.value / pageSize.value)
 
+})
 
+
 
+const selectAll = computed({
 
+  get: () => selectedItems.value.length === filteredMaterials.value.length,
 
+  set: (value) => {
 
+    selectedItems.value = value ? filteredMaterials.value.map(m => m.id) : []
 
+  }
 
+})
 
+
 
+// 方法
 
+const handleSearch = () => {
 
+  currentPage.value = 1
 
+  fetchMaterials()
 
+}
 
+
 
+const handleSort = (prop) => {
 
+  if (sortKey.value === prop) {
 
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
 
+  } else {
 
+    sortKey.value = prop
 
+    sortOrder.value = 'asc'
 
+  }
 
+  const sortedMaterials = [...filteredMaterials.value]
 
+  sortedMaterials.sort((a, b) => {
 
+    const aValue = a[prop]
 
+    const bValue = b[prop]
 
+    if (sortOrder.value === 'asc') {
 
+      return aValue > bValue ? 1 : -1
 
+    } else {
 
+      return aValue < bValue ? 1 : -1
 
+    }
 
+  })
 
+  filteredMaterials.value = sortedMaterials
 
+}
 
+
 
+const handleSizeChange = () => {
 
+  currentPage.value = 1
 
+  fetchMaterials()
 
+}
 
+
 
+const handleCurrentChange = (page) => {
 
+  currentPage.value = page
 
+  fetchMaterials()
 
+}
 
+
 
+const handleFileChange = (event) => {
 
+  const file = event.target.files[0]
 
+  if (file) {
 
+    // 处理文件上传
 
+  }
 
+}
 
+
 
+const handleExport = () => {
 
+  // 实现导出逻辑
 
+}
 
+
 
+const handleBatchEdit = () => {
 
+  // 实现批量编辑逻辑
 
+}
 
+
 
+const handleBatchDelete = () => {
 
+  // 实现批量删除逻辑
 
+}
 
+
 
+const handleEdit = (material) => {
 
+  isEdit.value = true
 
+  addForm.value = { ...material }
 
+  showAddDialog.value = true
 
+}
 
+
 
+const handleDelete = (material) => {
 
+  // 实现删除逻辑
 
+}
 
+
 
+const handleSubmit = () => {
 
+  // 实现表单提交逻辑
 
+}
 
+
 
+// 数据获取
 
+const fetchMaterials = async () => {
 
+  try {
 
+    loading.value = true
 
+    // 模拟网络延迟
 
+    await new Promise(resolve => setTimeout(resolve, 500))
 
+    total.value = mockData.materials.total
 
+  } catch (error) {
 
+    console.error('获取数据失败:', error)
 
+  } finally {
 
+    loading.value = false
 
+  }
 
+}
 
+
 
+// 添加 watch 监听对话框显示状态
 
+watch(showAddDialog, (newVal) => {
 
+  if (!newVal) {
 
+    isEdit.value = false
 
+    addForm.value = {
 
+      materialCode: '',
 
+      materialGroup: '',
 
+      categoryOne: '',
 
+      categoryTwo: '',
 
+      rawMaterialCategory: ''
 
+    }
 
+  }
 
+})
 
+
 
+// 生命周期钩子
 
+onMounted(() => {
 
+  fetchMaterials()
 
+})
 
+
 
+onUnmounted(() => {
 
+  // 清理操作（如果有需要）
 
+})
 
+</script>

Some files were not shown because too many files changed in this diff