From eae12ffeaa667f271a2c548b5e16557cac3686e3 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 18 三月 2026 20:35:46 +0800
Subject: [PATCH] 能耗成本核算图表相关优化

---
 src/views/qualityManagement/rawMaterialInspection/index.vue |  995 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 790 insertions(+), 205 deletions(-)

diff --git a/src/views/qualityManagement/rawMaterialInspection/index.vue b/src/views/qualityManagement/rawMaterialInspection/index.vue
index 9732bc9..a673c15 100644
--- a/src/views/qualityManagement/rawMaterialInspection/index.vue
+++ b/src/views/qualityManagement/rawMaterialInspection/index.vue
@@ -3,214 +3,391 @@
     <div class="search_form">
       <div>
         <span class="search_title">渚涘簲鍟嗭細</span>
-        <el-input
-            v-model="searchForm.supplier"
-            style="width: 240px"
-            placeholder="璇疯緭鍏ヤ緵搴斿晢鎼滅储"
-            @change="handleQuery"
-            clearable
-            :prefix-icon="Search"
-        />
-        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
-        >鎼滅储</el-button
-        >
+        <el-input v-model="searchForm.supplier"
+                  style="width: 240px"
+                  placeholder="璇疯緭鍏ヤ緵搴斿晢鎼滅储"
+                  @change="handleQuery"
+                  clearable
+                  :prefix-icon="Search" />
+        <span style="margin-left: 10px"
+              class="search_title">妫�娴嬫棩鏈燂細</span>
+        <el-date-picker v-model="searchForm.entryDate"
+                        value-format="YYYY-MM-DD"
+                        format="YYYY-MM-DD"
+                        type="daterange"
+                        placeholder="璇烽�夋嫨"
+                        clearable
+                        @change="changeDaterange" />
+        <el-button type="primary"
+                   @click="handleQuery"
+                   style="margin-left: 10px">鎼滅储
+        </el-button>
       </div>
       <div>
-        <el-button type="primary" @click="openForm('add')">鏂板</el-button>
+        <el-button type="primary"
+                   @click="openForm('add')">鏂板</el-button>
         <el-button @click="handleOut">瀵煎嚭</el-button>
-        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+        <el-button type="danger"
+                   plain
+                   @click="handleDelete">鍒犻櫎</el-button>
       </div>
     </div>
     <div class="table_list">
-      <PIMTable
-          rowKey="id"
-          :column="tableColumn"
-          :tableData="tableData"
-          :page="page"
-          :isSelection="true"
-          @selection-change="handleSelectionChange"
-          :tableLoading="tableLoading"
-          @pagination="pagination"
-          :total="page.total"
-      ></PIMTable>
+      <PIMTable rowKey="id"
+                :column="tableColumn"
+                :tableData="tableData"
+                :page="page"
+                :isSelection="true"
+                @selection-change="handleSelectionChange"
+                :tableLoading="tableLoading"
+                @pagination="pagination"
+                :total="page.total"></PIMTable>
     </div>
-    <InspectionFormDia ref="inspectionFormDia" @close="handleQuery"></InspectionFormDia>
-    <FormDia ref="formDia" @close="handleQuery"></FormDia>
-    <files-dia ref="filesDia" @close="handleQuery"></files-dia>
+    <InspectionFormDia ref="inspectionFormDia"
+                       @close="handleQuery"></InspectionFormDia>
+    <FormDia ref="formDia"
+             @close="handleQuery"></FormDia>
+    <files-dia ref="filesDia"
+               @close="handleQuery"></files-dia>
+    <el-dialog v-model="dialogFormVisible"
+               title="缂栬緫妫�楠屽憳"
+               width="30%"
+               @close="closeDia">
+      <el-form :model="form"
+               label-width="140px"
+               label-position="top"
+               :rules="rules"
+               ref="formRef">
+        <el-form-item label="妫�楠屽憳锛�"
+                      prop="checkName">
+          <el-select v-model="form.checkName"
+                     placeholder="璇烽�夋嫨"
+                     clearable>
+            <el-option v-for="item in userList"
+                       :key="item.nickName"
+                       :label="item.nickName"
+                       :value="item.nickName" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary"
+                     @click="submitForm">纭</el-button>
+          <el-button @click="closeDia">鍙栨秷</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { Search } from "@element-plus/icons-vue";
-import {onMounted, ref} from "vue";
-import InspectionFormDia from "@/views/qualityManagement/rawMaterialInspection/components/inspectionFormDia.vue";
-import FormDia from "@/views/qualityManagement/rawMaterialInspection/components/formDia.vue";
-import {ElMessageBox} from "element-plus";
-import {qualityInspectDel, qualityInspectListPage} from "@/api/qualityManagement/rawMaterialInspection.js";
-import FilesDia from "@/views/qualityManagement/rawMaterialInspection/components/filesDia.vue";
+  import { Search } from "@element-plus/icons-vue";
+  import {
+    onMounted,
+    ref,
+    reactive,
+    toRefs,
+    getCurrentInstance,
+    nextTick,
+  } from "vue";
+  import InspectionFormDia from "@/views/qualityManagement/rawMaterialInspection/components/inspectionFormDia.vue";
+  import FormDia from "@/views/qualityManagement/rawMaterialInspection/components/formDia.vue";
+  import { ElMessageBox } from "element-plus";
+  import {
+    downloadQualityInspect,
+    qualityInspectDel,
+    qualityInspectListPage,
+    qualityInspectUpdate,
+    submitQualityInspect,
+  } from "@/api/qualityManagement/rawMaterialInspection.js";
+  import FilesDia from "@/views/qualityManagement/rawMaterialInspection/components/filesDia.vue";
+  import dayjs from "dayjs";
+  import { userListNoPage } from "@/api/system/user.js";
+  import useUserStore from "@/store/modules/user";
 
-const data = reactive({
-  searchForm: {
-    supplier: "",
-  },
-});
-const { searchForm } = toRefs(data);
-const tableColumn = ref([
-  {
-    label: "妫�娴嬫棩鏈�",
-    prop: "checkTime",
-    width: 120
-  },
-  {
-    label: "渚涘簲鍟�",
-    prop: "supplier",
-    width: 230
-  },
-  {
-    label: "妫�楠屽憳",
-    prop: "checkName",
-  },
-  {
-    label: "浜у搧鍚嶇О",
-    prop: "productName",
-  },
-  {
-    label: "瑙勬牸鍨嬪彿",
-    prop: "model",
-  },
-  {
-    label: "鍗曚綅",
-    prop: "unit",
-  },
-  {
-    label: "鏁伴噺",
-    prop: "quantity",
-    width: 120
-  },
-  {
-    label: "妫�娴嬪崟浣�",
-    prop: "checkCompany",
-    width: 120
-  },
-  {
-    label: "妫�娴嬬粨鏋�",
-    prop: "checkResult",
-    dataType: "tag",
-    formatType: (params) => {
-      if (params == '涓嶅悎鏍�') {
-        return "danger";
-      } else if (params == '鍚堟牸') {
-        return "success";
-      } else {
-        return null;
-      }
+  const data = reactive({
+    searchForm: {
+      supplier: "",
+      entryDate: undefined, // 褰曞叆鏃ユ湡
+      entryDateStart: undefined,
+      entryDateEnd: undefined,
     },
-  },
-  {
-    dataType: "action",
-    label: "鎿嶄綔",
-    align: "center",
-    fixed: "right",
-    width: 190,
-    operation: [
-      {
-        name: "缂栬緫",
-        type: "text",
-        clickFun: (row) => {
-          openForm("edit", row);
-        },
-      },
-      {
-        name: "鏂板妫�楠岃褰�",
-        type: "text",
-        clickFun: (row) => {
-          openInspectionForm("edit", row);
-        },
-      },
-      {
-        name: "闄勪欢",
-        type: "text",
-        clickFun: (row) => {
-          openFilesFormDia(row);
-        },
-      },
-    ],
-  },
-]);
-const tableData = ref([]);
-const selectedRows = ref([]);
-const tableLoading = ref(false);
-const page = reactive({
-  current: 1,
-  size: 100,
-  total: 0
-});
-const formDia = ref()
-const filesDia = ref()
-const inspectionFormDia = ref()
-const { proxy } = getCurrentInstance()
+    rules: {
+      checkName: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+    },
+  });
+  const { searchForm, rules } = toRefs(data);
+  const tableColumn = ref([
+    {
+      label: "妫�娴嬫棩鏈�",
+      prop: "checkTime",
+      width: 150,
+      className: "date-cell",
+    },
+    {
+      label: "渚涘簲鍟�",
+      prop: "supplier",
+      width: 130,
+    },
+    {
+      label: "妫�楠屽憳",
+      prop: "checkName",
+      width: 120,
+      className: "inspector-cell",
+    },
+    {
+      label: "浜у搧鍚嶇О",
+      prop: "productName",
+      dataType: "tag",
+    },
+    {
+      label: "瑙勬牸鍨嬪彿",
+      prop: "model",
+    },
+    {
+      label: "鍗曚綅",
+      prop: "unit",
+      width: 80,
+    },
+    {
+      label: "鏁伴噺",
+      prop: "quantity",
+      width: 120,
+    },
+    {
+      label: "璇曟牱缂栧彿",
+      prop: "sampleCode",
+      width: 120,
 
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
-  page.current = 1;
-  getList();
-};
-const pagination = (obj) => {
-  page.current = obj.page;
-  page.size = obj.limit;
-  getList();
-};
-const getList = () => {
-  tableLoading.value = true;
-  qualityInspectListPage({...page, ...searchForm.value, inspectType: 0}).then(res => {
-    tableLoading.value = false;
-    tableData.value = res.data.records
-    page.total = res.data.total;
-  }).catch(err => {
-    tableLoading.value = false;
-  })
-};
-// 琛ㄦ牸閫夋嫨鏁版嵁
-const handleSelectionChange = (selection) => {
-  selectedRows.value = selection;
-};
+      className: "volume-cell",
+    },
+    {
+      label: "璇曟牱鐘舵��",
+      prop: "sampleState",
+      dataType: "tag",
+      formatType: params => {
+        if (params === "棰楃矑" || params === "鍥轰綋" || params === "鑶忎綋") {
+          return "success";
+        } else {
+          return "info";
+        }
+      },
+    },
+    {
+      label: "妫�娴嬫�ц川",
+      prop: "inspectNature",
+      dataType: "tag",
+      formatType: params => {
+        if (params === "鏃ュ父妫�楠�") {
+          return "success";
+        } else if (params === "鍏ュ満楠屾敹") {
+          return "warning";
+        } else {
+          return null;
+        }
+      },
+    },
+    {
+      label: "鍙栨牱鏃ユ湡",
+      prop: "sampleTime",
+      width: 150,
+      className: "date-cell",
+    },
+    {
+      label: "妫�娴嬪崟浣�",
+      prop: "checkCompany",
+    },
+    {
+      label: "妫�娴嬬粨鏋�",
+      prop: "checkResult",
+      dataType: "tag",
+      formatType: params => {
+        if (params === "涓嶅悎鏍�") {
+          return "danger";
+        } else if (params === "鍚堟牸") {
+          return "success";
+        } else {
+          return null;
+        }
+      },
+    },
+    {
+      label: "鎻愪氦鐘舵��",
+      prop: "inspectState",
+      dataType: "tag",
+      formatType: params => {
+        if (params) {
+          return "success";
+        } else {
+          return "info";
+        }
+      },
+      formatData: params => {
+        if (params) {
+          return "宸叉彁浜�";
+        } else {
+          return "鏈彁浜�";
+        }
+      },
+    },
+    {
+      dataType: "action",
+      label: "鎿嶄綔",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      operation: [
+        {
+          name: "缂栬緫",
+          type: "text",
+          clickFun: row => {
+            openForm("edit", row);
+          },
+          disabled: row => {
+            // 宸叉彁浜ゅ垯绂佺敤
+            if (row.inspectState == 1) return true;
+            // 濡傛灉妫�楠屽憳鏈夊�硷紝鍙湁褰撳墠鐧诲綍鐢ㄦ埛鑳界紪杈�
+            if (row.checkName) {
+              return row.checkName !== userStore.nickName;
+            }
+            return false;
+          },
+        },
+        {
+          name: "闄勪欢",
+          type: "text",
+          clickFun: row => {
+            openFilesFormDia(row);
+          },
+        },
+        {
+          name: "鎻愪氦",
+          type: "text",
+          clickFun: row => {
+            submit(row.id);
+          },
+          disabled: row => {
+            // 宸叉彁浜ゅ垯绂佺敤
+            if (row.inspectState == 1) return true;
+            // 濡傛灉妫�楠屽憳鏈夊�硷紝鍙湁褰撳墠鐧诲綍鐢ㄦ埛鑳芥彁浜�
+            if (row.checkName) {
+              return row.checkName !== userStore.nickName;
+            }
+            return false;
+          },
+        },
+        {
+          name: "鍒嗛厤妫�楠屽憳",
+          type: "text",
+          clickFun: row => {
+            if (!row.checkName) {
+              open(row);
+            } else {
+              proxy.$modal.msgError("妫�楠屽憳宸插瓨鍦�");
+            }
+          },
+          disabled: row => {
+            return row.inspectState == 1 || row.checkName;
+          },
+        },
+        {
+          name: "涓嬭浇",
+          type: "text",
+          clickFun: row => {
+            downLoadFile(row);
+          },
+        },
+      ],
+    },
+  ]);
+  const tableData = ref([]);
+  const selectedRows = ref([]);
+  const tableLoading = ref(false);
+  const userList = ref([]);
+  const dialogFormVisible = ref(false);
+  const form = ref({
+    checkName: "",
+  });
+  const page = reactive({
+    current: 1,
+    size: 100,
+    total: 0,
+  });
+  const currentRow = ref(null);
+  const formDia = ref();
+  const filesDia = ref();
+  const inspectionFormDia = ref();
+  const { proxy } = getCurrentInstance();
+  const userStore = useUserStore();
+  const changeDaterange = value => {
+    searchForm.value.entryDateStart = undefined;
+    searchForm.value.entryDateEnd = undefined;
+    if (value) {
+      searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+      searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+    }
+    getList();
+  };
+  // 鏌ヨ鍒楄〃
+  /** 鎼滅储鎸夐挳鎿嶄綔 */
+  const handleQuery = () => {
+    page.current = 1;
+    getList();
+  };
+  const pagination = obj => {
+    page.current = obj.page;
+    page.size = obj.limit;
+    getList();
+  };
+  const getList = () => {
+    tableLoading.value = true;
+    const params = { ...searchForm.value, ...page };
+    params.entryDate = undefined;
+    qualityInspectListPage({ ...params, inspectType: 0 })
+      .then(res => {
+        tableLoading.value = false;
+        tableData.value = res.data.records;
+        page.total = res.data.total;
+      })
+      .catch(err => {
+        tableLoading.value = false;
+      });
+  };
+  // 琛ㄦ牸閫夋嫨鏁版嵁
+  const handleSelectionChange = selection => {
+    selectedRows.value = selection;
+  };
 
-// 鎵撳紑寮规
-const openForm = (type, row) => {
-  nextTick(() => {
-    formDia.value?.openDialog(type, row)
-  })
-};
-// 鎵撳紑鏂板妫�楠屽脊妗�
-const openInspectionForm = (type, row) => {
-  nextTick(() => {
-    inspectionFormDia.value?.openDialog(type, row)
-  })
-};
-// 鎵撳紑闄勪欢寮规
-const openFilesFormDia = (type, row) => {
-  nextTick(() => {
-    filesDia.value?.openDialog(type, row)
-  })
-};
+  // 鎵撳紑寮规
+  const openForm = (type, row) => {
+    nextTick(() => {
+      formDia.value?.openDialog(type, row);
+    });
+  };
+  // 鎵撳紑闄勪欢寮规
+  const openFilesFormDia = (type, row) => {
+    nextTick(() => {
+      filesDia.value?.openDialog(type, row);
+    });
+  };
 
-// 鍒犻櫎
-const handleDelete = () => {
-  let ids = [];
-  if (selectedRows.value.length > 0) {
-    ids = selectedRows.value.map((item) => item.id);
-  } else {
-    proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
-    return;
-  }
-  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
-    confirmButtonText: "纭",
-    cancelButtonText: "鍙栨秷",
-    type: "warning",
-  })
+  // 鍒犻櫎
+  const handleDelete = () => {
+    let ids = [];
+    if (selectedRows.value.length > 0) {
+      ids = selectedRows.value.map(item => item.id);
+    } else {
+      proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+      return;
+    }
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
       .then(() => {
-        qualityInspectDel(ids).then((res) => {
+        qualityInspectDel(ids).then(res => {
           proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
           getList();
         });
@@ -218,24 +395,432 @@
       .catch(() => {
         proxy.$modal.msg("宸插彇娑�");
       });
-};
-// 瀵煎嚭
-const handleOut = () => {
-  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
-    confirmButtonText: "纭",
-    cancelButtonText: "鍙栨秷",
-    type: "warning",
-  })
+  };
+  // 瀵煎嚭
+  const handleOut = () => {
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
       .then(() => {
-        proxy.download("/quality/qualityInspect/export", {inspectType: 0}, "鍘熸潗鏂欐楠�.xlsx");
+        proxy.download(
+          "/quality/qualityInspect/export",
+          { inspectType: 0 },
+          "鍘熸潗鏂欐楠�.xlsx"
+        );
       })
       .catch(() => {
         proxy.$modal.msg("宸插彇娑�");
       });
-};
-onMounted(() => {
-  getList();
-});
+  };
+
+  // 鎻愪环
+  const submit = async id => {
+    const res = await submitQualityInspect({ id: id });
+    if (res.code === 200) {
+      proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+      getList();
+    }
+  };
+
+  // 鍏抽棴寮规
+  const closeDia = () => {
+    proxy.resetForm("formRef");
+    dialogFormVisible.value = false;
+  };
+
+  const submitForm = () => {
+    if (currentRow.value) {
+      const data = {
+        ...form.value,
+        id: currentRow.value.id,
+      };
+      qualityInspectUpdate(data).then(res => {
+        proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+        closeDia();
+        getList();
+      });
+    }
+  };
+
+  const open = async row => {
+    let userLists = await userListNoPage();
+    userList.value = userLists.data;
+    currentRow.value = row;
+    dialogFormVisible.value = true;
+  };
+
+  const downLoadFile = row => {
+    downloadQualityInspect({ id: row.id }).then(blobData => {
+      const blob = new Blob([blobData], {
+        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      });
+      const downloadUrl = window.URL.createObjectURL(blob);
+
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = "鍘熸潗鏂欐楠屾姤鍛�.docx";
+      document.body.appendChild(link);
+      link.click();
+
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+    });
+  };
+
+  onMounted(() => {
+    getList();
+  });
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+  .app-container {
+    padding: 20px;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+  }
+
+  .search_form {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+
+  .search_form > div {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .search_title {
+    font-size: 14px;
+    color: #303133;
+    font-weight: 500;
+  }
+
+  .table_list {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  }
+
+  /* 琛ㄦ牸鏍峰紡浼樺寲 */
+  :deep(.el-table) {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+  }
+
+  :deep(.el-table:hover) {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  }
+
+  :deep(.el-table th) {
+    background-color: #f5f7fa;
+    font-weight: 600;
+    color: #303133;
+    border-bottom: 2px solid #e4e7ed;
+  }
+
+  :deep(.el-table td) {
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  :deep(.el-table tr:hover) {
+    background-color: #f0f9ff;
+  }
+
+  :deep(.el-table .el-table__row) {
+    transition: background-color 0.3s ease;
+  }
+
+  /* 琛ㄦ牸鍒楁牱寮� */
+  :deep(.date-cell) {
+    font-family: "Courier New", monospace;
+    color: #606266;
+  }
+
+  :deep(.supplier-cell) {
+    font-weight: 500;
+    color: #303133;
+  }
+
+  :deep(.inspector-cell) {
+    color: #409eff;
+  }
+
+  :deep(.product-cell) {
+    font-weight: 500;
+  }
+
+  :deep(.model-cell) {
+    color: #606266;
+  }
+
+  :deep(.unit-cell) {
+    font-size: 12px;
+    color: #909399;
+  }
+
+  :deep(.quantity-cell) {
+    font-family: "Courier New", monospace;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  :deep(.volume-cell) {
+    font-family: "Courier New", monospace;
+    color: #67c23a;
+    font-weight: 500;
+  }
+
+  :deep(.state-cell) {
+    font-weight: 500;
+  }
+
+  :deep(.nature-cell) {
+    color: #606266;
+  }
+
+  :deep(.company-cell) {
+    color: #606266;
+  }
+
+  :deep(.result-cell) {
+    font-weight: 600;
+  }
+
+  :deep(.status-cell) {
+    font-weight: 500;
+  }
+
+  /* 鎸夐挳鏍峰紡浼樺寲 */
+  .el-button {
+    transition: all 0.3s ease;
+    border-radius: 4px;
+    font-weight: 500;
+  }
+
+  .el-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .el-button--primary:hover {
+    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
+  }
+
+  .el-button--danger:hover {
+    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.4);
+  }
+
+  /* 杈撳叆妗嗘牱寮忎紭鍖� */
+  :deep(.el-input__wrapper) {
+    transition: all 0.3s ease;
+    border-radius: 4px;
+  }
+
+  :deep(.el-input__wrapper:hover) {
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
+  }
+
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4) !important;
+  }
+
+  /* 鏃ユ湡閫夋嫨鍣ㄦ牱寮忎紭鍖� */
+  :deep(.el-date-editor) {
+    transition: all 0.3s ease;
+  }
+
+  :deep(.el-date-editor:hover .el-input__wrapper) {
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
+  }
+
+  /* 瀵硅瘽妗嗘牱寮忎紭鍖� */
+  :deep(.el-dialog) {
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  :deep(.el-dialog__header) {
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #e4e7ed;
+    padding: 15px 20px;
+    margin: 0;
+  }
+
+  :deep(.el-dialog__title) {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+
+  :deep(.el-dialog__footer) {
+    padding: 15px 20px;
+    border-top: 1px solid #e4e7ed;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  /* 琛ㄥ崟鏍峰紡浼樺寲 */
+  :deep(.el-form-item__label) {
+    font-weight: 500;
+    color: #606266;
+  }
+
+  :deep(.el-select) {
+    width: 100%;
+  }
+
+  /* 鍒嗛〉鏍峰紡浼樺寲 */
+  :deep(.el-pagination) {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-pagination button) {
+    border-radius: 4px;
+    transition: all 0.3s ease;
+  }
+
+  :deep(.el-pagination button:hover) {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  /* 鏍囩鏍峰紡浼樺寲 */
+  :deep(.el-tag) {
+    border-radius: 4px;
+    font-weight: 500;
+  }
+
+  :deep(.el-tag--success) {
+    background-color: #f0f9ff;
+    border-color: #b3d8ff;
+    color: #409eff;
+  }
+
+  :deep(.el-tag--danger) {
+    background-color: #fef0f0;
+    border-color: #fbc4c4;
+    color: #f56c6c;
+  }
+
+  /* 鎿嶄綔鎸夐挳鏍峰紡 */
+  :deep(.el-button--text) {
+    padding: 0 8px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+  }
+
+  :deep(.el-button--text:hover) {
+    transform: translateY(-1px);
+  }
+
+  /* 鍝嶅簲寮忚璁� */
+  @media screen and (max-width: 1200px) {
+    .search_form {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .search_form > div {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .search_form > div:first-child {
+      flex-wrap: wrap;
+    }
+
+    .search_title {
+      width: 100%;
+      margin-bottom: 8px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .app-container {
+      padding: 10px;
+    }
+
+    .search_form {
+      padding: 15px;
+    }
+
+    .table_list {
+      padding: 15px;
+    }
+
+    .search_form > div {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .search_form > div .el-input,
+    .search_form > div .el-date-picker {
+      width: 100% !important;
+    }
+
+    .search_form > div .el-button {
+      width: 100%;
+      margin-top: 10px;
+    }
+
+    :deep(.el-dialog) {
+      width: 90% !important;
+    }
+
+    :deep(.el-table) {
+      font-size: 12px;
+    }
+  }
+  :deep(.el-table) {
+    .el-table__body-wrapper {
+      .quantity-cell,
+      .volume-cell,
+      .dimension-cell {
+        font-weight: 600;
+        color: #409eff;
+        font-family: "Courier New", monospace;
+        text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
+      }
+      .spec-cell {
+        color: #67c23a;
+        font-weight: 500;
+
+        padding: 4px 8px;
+        border-radius: 4px;
+      }
+
+      .code-cell {
+        color: #e6a23c;
+        font-family: "Courier New", monospace;
+        font-weight: 500;
+        padding: 4px 8px;
+        border-radius: 4px;
+      }
+    }
+  }
+</style>

--
Gitblit v1.9.3