From f3b97d08e13224c6bc1d4f267bdb1a4e0b3690c3 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 13 三月 2026 17:41:33 +0800
Subject: [PATCH] 参数配置页面开发（未接接口）
---
src/views/basicData/parameterMaintenance/index.vue | 836 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 836 insertions(+), 0 deletions(-)
diff --git a/src/views/basicData/parameterMaintenance/index.vue b/src/views/basicData/parameterMaintenance/index.vue
new file mode 100644
index 0000000..0400952
--- /dev/null
+++ b/src/views/basicData/parameterMaintenance/index.vue
@@ -0,0 +1,836 @@
+<template>
+ <div class="app-container">
+ <div class="search_form">
+ <div>
+ <span class="search_title ml10">鍙傛暟鍚嶇О锛�</span>
+ <el-input v-model="searchForm.materialCode"
+ style="width: 200px"
+ placeholder="璇疯緭鍏ュ弬鏁板悕绉�"
+ clearable />
+ <span class="search_title ml10">鍏宠仈浜у搧绫诲瀷锛�</span>
+ <el-input v-model="searchForm.productName"
+ style="width: 200px"
+ placeholder="璇疯緭鍏ュ叧鑱斾骇鍝佺被鍨�"
+ clearable />
+ <el-button type="primary"
+ @click="handleQuery"
+ style="margin-left: 10px">鎼滅储</el-button>
+ <el-button @click="handleReset">閲嶇疆</el-button>
+ <el-button type="primary"
+ @click="handleAdd"
+ style="margin-left: 10px">鏂板鍙傛暟</el-button>
+ <el-button type="primary"
+ @click="handleProductTypeMaintenance"
+ style="margin-left: 10px">浜у搧绫诲瀷缁存姢</el-button>
+ </div>
+ </div>
+ <div class="table_list">
+ <PIMTable rowKey="materialCode"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ height="calc(100vh - 320px)"
+ :tableLoading="tableLoading"
+ :isSelection="false"
+ @pagination="pagination">
+ </PIMTable>
+ </div>
+ <!-- 鏂板/缂栬緫瀵硅瘽妗� -->
+ <el-dialog v-model="dialogVisible"
+ :title="dialogTitle"
+ width="500px">
+ <el-form :model="formData"
+ :rules="rules"
+ ref="formRef"
+ label-width="120px">
+ <el-form-item label="鍙傛暟缂栧彿"
+ prop="parameterCode">
+ <el-input v-model="formData.parameterCode"
+ placeholder="璇疯緭鍏ュ弬鏁扮紪鍙�" />
+ </el-form-item>
+ <el-form-item label="鍙傛暟鍚嶇О"
+ prop="parameterName">
+ <el-input v-model="formData.parameterName"
+ placeholder="璇疯緭鍏ュ弬鏁板悕绉�" />
+ </el-form-item>
+ <el-form-item label="鍙傛暟妯″紡"
+ prop="parameterFormat">
+ <el-select v-model="formData.parameterType2"
+ placeholder="璇烽�夋嫨鍙傛暟绫诲瀷">
+ <el-option label="鍗曞��"
+ value="1" />
+ <el-option label="鍖洪棿"
+ value="2" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍙傛暟绫诲瀷"
+ prop="parameterType">
+ <el-select v-model="formData.parameterType"
+ @change="handleParameterTypeChange"
+ placeholder="璇烽�夋嫨鍙傛暟绫诲瀷">
+ <el-option label="鏁板�兼牸寮�"
+ value="鏁板�兼牸寮�" />
+ <el-option label="鏂囨湰鏍煎紡"
+ value="鏂囨湰鏍煎紡" />
+ <el-option label="涓嬫媺閫夐」"
+ value="涓嬫媺閫夐」" />
+ <el-option label="鏃堕棿鏍煎紡"
+ value="鏃堕棿鏍煎紡" />
+ </el-select>
+ </el-form-item>
+ <el-form-item v-if="formData.parameterType === '涓嬫媺閫夐」'"
+ label="鏁版嵁瀛楀吀"
+ prop="parameterFormat">
+ <el-select v-model="formData.parameterFormat"
+ placeholder="璇烽�夋嫨鏁版嵁瀛楀吀">
+ <el-option v-for="item in dictTypes"
+ :key="item.dictType"
+ :label="item.dictName"
+ :value="item.dictType" />
+ </el-select>
+ </el-form-item>
+ <el-form-item v-else-if="formData.parameterType === '鏃堕棿鏍煎紡'"
+ label="鏃堕棿鏍煎紡"
+ prop="parameterFormat">
+ <el-select v-model="formData.parameterFormat"
+ placeholder="璇烽�夋嫨鏃堕棿鏍煎紡">
+ <el-option label="YYYY-MM-DD HH:mm:ss"
+ value="YYYY-MM-DD HH:mm:ss" />
+ <el-option label="YYYY-MM-DD"
+ value="YYYY-MM-DD" />
+ </el-select>
+ </el-form-item>
+ <el-form-item v-else
+ label="鍙傛暟鏍煎紡"
+ prop="parameterFormat">
+ <el-input v-model="formData.parameterFormat"
+ placeholder="璇疯緭鍏ュ弬鏁版牸寮�" />
+ </el-form-item>
+ <el-form-item label="鍏宠仈浜у搧绫诲瀷"
+ prop="parameterValue">
+ <el-select v-model="formData.parameterValue"
+ placeholder="璇烽�夋嫨鍏宠仈浜у搧绫诲瀷">
+ <el-option v-for="item in productTypes"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏍囧噯鍊�"
+ v-if="formData.parameterType2 === '1'"
+ prop="standardValue">
+ <el-input v-model="formData.standardValue"
+ placeholder="璇疯緭鍏ユ爣鍑嗗��" />
+ </el-form-item>
+ <el-form-item label="鏈�澶у��"
+ v-if="formData.parameterType2 === '2'"
+ prop="standardValue">
+ <el-input v-model="formData.standardValue"
+ placeholder="璇疯緭鍏ユ爣鍑嗗��" />
+ </el-form-item>
+ <el-form-item label="鏈�灏忓��"
+ v-if="formData.parameterType2 === '2'"
+ prop="standardValue">
+ <el-input v-model="formData.standardValue"
+ placeholder="璇疯緭鍏ユ爣鍑嗗��" />
+ </el-form-item>
+ <el-form-item label="鍗曚綅"
+ prop="unit">
+ <el-input v-model="formData.unit"
+ placeholder="璇疯緭鍏ュ崟浣�" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary"
+ @click="handleSubmit">纭畾</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <!-- 浜у搧绫诲瀷缁存姢瀵硅瘽妗� -->
+ <el-dialog v-model="productTypeDialogVisible"
+ title="浜у搧绫诲瀷缁存姢"
+ width="600px">
+ <div class="product-type-header">
+ <el-button type="primary"
+ @click="handleAddProductType">鏂板浜у搧绫诲瀷</el-button>
+ </div>
+ <el-table :data="productTypeList"
+ border
+ style="width: 100%; margin-top: 10px; margin-bottom: 20px">
+ <!-- <el-table-column prop="typeCode"
+ label="绫诲瀷缂栫爜"
+ width="150" /> -->
+ <el-table-column prop="typeName"
+ label="绫诲瀷鍚嶇О" />
+ <el-table-column label="鎿嶄綔"
+ width="150">
+ <template #default="scope">
+ <el-button link
+ type="primary"
+ @click="handleEditProductType(scope.row)">缂栬緫</el-button>
+ <el-button link
+ type="danger"
+ @click="handleDeleteProductType(scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-dialog>
+ <!-- 鏂板/缂栬緫浜у搧绫诲瀷瀵硅瘽妗� -->
+ <el-dialog v-model="productTypeFormVisible"
+ :title="productTypeDialogTitle"
+ width="400px">
+ <el-form :model="productTypeForm"
+ :rules="productTypeRules"
+ ref="productTypeFormRef"
+ label-width="100px">
+ <!-- <el-form-item label="绫诲瀷缂栫爜"
+ prop="typeCode">
+ <el-input v-model="productTypeForm.typeCode"
+ placeholder="璇疯緭鍏ョ被鍨嬬紪鐮�" />
+ </el-form-item> -->
+ <el-form-item label="绫诲瀷鍚嶇О"
+ prop="typeName">
+ <el-input v-model="productTypeForm.typeName"
+ placeholder="璇疯緭鍏ョ被鍨嬪悕绉�" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="productTypeFormVisible = false">鍙栨秷</el-button>
+ <el-button type="primary"
+ @click="handleProductTypeSubmit">纭畾</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+ import { onMounted, ref, reactive } from "vue";
+ import {
+ parameterListPage,
+ addParameter,
+ updateParameter,
+ delParameter,
+ getProductTypes as getProductTypesApi,
+ } from "@/api/basicData/parameterMaintenance.js";
+ import { listType } from "@/api/system/dict/type";
+ import PIMTable from "@/components/PIMTable/PIMTable.vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+
+ const tableColumn = ref([
+ {
+ label: "鍙傛暟缂栧彿",
+ prop: "parameterCode",
+ className: "code-cell",
+ },
+ {
+ label: "鍙傛暟鍚嶇О",
+ prop: "parameterName",
+ },
+ {
+ label: "鍙傛暟妯″紡",
+ prop: "parameterType2",
+ },
+ {
+ label: "鍙傛暟绫诲瀷",
+ prop: "parameterType",
+ dataType: "tag",
+ formatType: params => {
+ const typeMap = {
+ 鏁板�兼牸寮�: "primary",
+ 鏂囨湰鏍煎紡: "info",
+ 涓嬫媺閫夐」: "warning",
+ 鏃堕棿鏍煎紡: "success",
+ };
+ return typeMap[params] || "default";
+ },
+ },
+ {
+ label: "鍙傛暟鏍煎紡",
+ prop: "parameterFormat",
+ },
+ {
+ label: "鍏宠仈浜у搧绫诲瀷",
+ prop: "parameterValue",
+ },
+ {
+ label: "鏍囧噯鍊�",
+ prop: "standardValue",
+ className: row => {
+ return row.parameterType == "鏁板�兼牸寮�" ? "quantity-cell" : "";
+ },
+ },
+ {
+ label: "鏈�澶у��",
+ prop: "standardValue",
+ className: row => {
+ return row.parameterType == "鏁板�兼牸寮�" ? "quantity-cell" : "";
+ },
+ },
+ {
+ label: "鏈�灏忓��",
+ prop: "standardValue",
+ className: row => {
+ return row.parameterType == "鏁板�兼牸寮�" ? "quantity-cell" : "";
+ },
+ },
+ {
+ label: "鍗曚綅",
+ prop: "unit",
+ },
+ {
+ label: "鎿嶄綔",
+ dataType: "action",
+ width: "150",
+ operation: [
+ {
+ name: "缂栬緫",
+ clickFun: row => {
+ handleEdit(row);
+ },
+ },
+ {
+ name: "鍒犻櫎",
+ clickFun: row => {
+ handleDelete(row);
+ },
+ },
+ ],
+ },
+ ]);
+ const tableData = ref([]);
+ const tableLoading = ref(false);
+ const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+ });
+
+ // 鎼滅储琛ㄥ崟
+ const searchForm = reactive({
+ materialCode: "",
+ productName: "",
+ });
+
+ // 瀵硅瘽妗嗙浉鍏�
+ const dialogVisible = ref(false);
+ const dialogTitle = ref("");
+ const formRef = ref(null);
+ const formData = reactive({
+ parameterCode: "",
+ parameterName: "",
+ parameterType2: "1",
+ parameterType: "",
+ parameterFormat: "",
+ parameterValue: "",
+ standardValue: "",
+ unit: "",
+ });
+ const rules = reactive({
+ parameterCode: [
+ { required: true, message: "璇疯緭鍏ュ弬鏁扮紪鍙�", trigger: "blur" },
+ ],
+ parameterName: [
+ { required: true, message: "璇疯緭鍏ュ弬鏁板悕绉�", trigger: "blur" },
+ ],
+ parameterType: [
+ { required: true, message: "璇烽�夋嫨鍙傛暟绫诲瀷", trigger: "change" },
+ ],
+ parameterFormat: [
+ { required: true, message: "璇烽�夋嫨鍙傛暟鏍煎紡", trigger: "change" },
+ ],
+ parameterValue: [
+ { required: true, message: "璇烽�夋嫨鍏宠仈浜у搧绫诲瀷", trigger: "change" },
+ ],
+ standardValue: [{ required: true, message: "璇疯緭鍏ユ爣鍑嗗��", trigger: "blur" }],
+ unit: [{ required: true, message: "璇疯緭鍏ュ崟浣�", trigger: "blur" }],
+ });
+ const productTypes = ref([]);
+ const isEdit = ref(false);
+
+ // 浜у搧绫诲瀷缁存姢鐩稿叧
+ const productTypeDialogVisible = ref(false);
+ const productTypeFormVisible = ref(false);
+ const productTypeDialogTitle = ref("");
+ const productTypeFormRef = ref(null);
+ const productTypeList = ref([]);
+ const productTypeForm = reactive({
+ id: null,
+ // typeCode: "",
+ typeName: "",
+ });
+ const productTypeRules = reactive({
+ // typeCode: [{ required: true, message: "璇疯緭鍏ョ被鍨嬬紪鐮�", trigger: "blur" }],
+ typeName: [{ required: true, message: "璇疯緭鍏ョ被鍨嬪悕绉�", trigger: "blur" }],
+ });
+ const isProductTypeEdit = ref(false);
+ const handleParameterTypeChange = () => {
+ if (formData.parameterType === "鏁板�兼牸寮�") {
+ formData.parameterFormat = "#.0000";
+ } else if (formData.parameterType === "鏃堕棿鏍煎紡") {
+ formData.parameterFormat = "YYYY-MM-DD HH:mm:ss";
+ } else {
+ formData.parameterFormat = "";
+ }
+ };
+ // 浜у搧绫诲瀷缁存姢鎸夐挳鐐瑰嚮浜嬩欢
+ const handleProductTypeMaintenance = () => {
+ productTypeDialogVisible.value = true;
+ getProductTypeList();
+ };
+
+ // 鑾峰彇浜у搧绫诲瀷鍒楄〃
+ const getProductTypeList = () => {
+ productTypeList.value = [
+ { id: 1, typeCode: "TYPE001", typeName: "3.5鐮屽潡" },
+ { id: 2, typeCode: "TYPE002", typeName: "5.0鐮屽潡" },
+ { id: 3, typeCode: "TYPE003", typeName: "鏉挎潗" },
+ ];
+ };
+
+ // 鏂板浜у搧绫诲瀷
+ const handleAddProductType = () => {
+ isProductTypeEdit.value = false;
+ productTypeDialogTitle.value = "鏂板浜у搧绫诲瀷";
+ productTypeForm.id = null;
+ productTypeForm.typeCode = "";
+ productTypeForm.typeName = "";
+ productTypeFormVisible.value = true;
+ };
+
+ // 缂栬緫浜у搧绫诲瀷
+ const handleEditProductType = row => {
+ isProductTypeEdit.value = true;
+ productTypeDialogTitle.value = "缂栬緫浜у搧绫诲瀷";
+ productTypeForm.id = row.id;
+ productTypeForm.typeCode = row.typeCode;
+ productTypeForm.typeName = row.typeName;
+ productTypeFormVisible.value = true;
+ };
+
+ // 鍒犻櫎浜у搧绫诲瀷
+ const handleDeleteProductType = row => {
+ ElMessageBox.confirm("纭畾瑕佸垹闄よ浜у搧绫诲瀷鍚楋紵", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ getProductTypeList();
+ })
+ .catch(() => {});
+ };
+
+ // 鎻愪氦浜у搧绫诲瀷琛ㄥ崟
+ const handleProductTypeSubmit = () => {
+ productTypeFormRef.value.validate(valid => {
+ if (valid) {
+ ElMessage.success(isProductTypeEdit.value ? "缂栬緫鎴愬姛" : "鏂板鎴愬姛");
+ productTypeFormVisible.value = false;
+ getProductTypeList();
+ }
+ });
+ };
+
+ // 鏌ヨ鍒楄〃
+ /** 鎼滅储鎸夐挳鎿嶄綔 */
+ const handleQuery = () => {
+ page.current = 1;
+ getList();
+ };
+
+ /** 閲嶇疆鎸夐挳鎿嶄綔 */
+ const handleReset = () => {
+ searchForm.materialCode = "";
+ searchForm.productName = "";
+ page.current = 1;
+ getList();
+ };
+ const pagination = obj => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+ };
+
+ const getList = () => {
+ tableLoading.value = true;
+ // 娉ㄩ噴鎺堿PI璋冪敤锛屼娇鐢ㄥ亣鏁版嵁
+ /*const params = { ...searchForm, ...page };
+ parameterListPage(params)
+ .then(res => {
+ tableLoading.value = false;
+ tableData.value = res.data;
+ page.total = res.total || 0;
+ })
+ .catch(() => {
+ tableLoading.value = false;
+ });*/
+
+ // 鍋囨暟鎹�
+ setTimeout(() => {
+ tableLoading.value = false;
+ tableData.value = [
+ {
+ id: 1,
+ parameterCode: "PARAM001",
+ parameterName: "闀垮害",
+ parameterType2: "1",
+ parameterType: "鏁板�兼牸寮�",
+ parameterFormat: "",
+ parameterValue: "type1",
+ standardValue: "100",
+ unit: "mm",
+ },
+ {
+ id: 2,
+ parameterCode: "PARAM002",
+ parameterName: "娓╁害",
+ parameterType2: "2",
+ parameterType: "鏁板�兼牸寮�",
+ parameterFormat: "",
+ parameterValue: "type1",
+ standardValue: "25",
+ unit: "鈩�",
+ },
+ {
+ id: 3,
+ parameterCode: "PARAM003",
+ parameterName: "棰滆壊",
+ parameterType2: "1",
+ parameterType: "鏂囨湰鏍煎紡",
+ parameterFormat: "",
+ parameterValue: "type2",
+ standardValue: "绾㈣壊",
+ unit: "",
+ },
+ {
+ id: 4,
+ parameterCode: "PARAM004",
+ parameterName: "鐘舵��",
+ parameterType2: "1",
+ parameterType: "涓嬫媺閫夐」",
+ parameterFormat: "status",
+ parameterValue: "type3",
+ standardValue: "姝ｅ父",
+ unit: "",
+ },
+ {
+ id: 5,
+ parameterCode: "PARAM005",
+ parameterName: "鍒涘缓鏃堕棿",
+ parameterType2: "1",
+ parameterType: "鏃堕棿鏍煎紡",
+ parameterFormat: "YYYY-MM-DD HH:mm:ss",
+ parameterValue: "type2",
+ standardValue: "2024-01-01 00:00:00",
+ unit: "",
+ },
+ ];
+ page.total = 5;
+ }, 500);
+ };
+
+ // 鑾峰彇浜у搧绫诲瀷鍒楄〃
+ const getProductTypes = () => {
+ // 娉ㄩ噴鎺堿PI璋冪敤锛屼娇鐢ㄥ亣鏁版嵁
+ /*getProductTypesApi()
+ .then(res => {
+ productTypes.value = res.data || [];
+ })
+ .catch(() => {
+ // 澶辫触鏃朵娇鐢ㄦā鎷熸暟鎹�
+ productTypes.value = [
+ { label: "3.5鐮屽潡", value: "type1" },
+ { label: "5.0鐮屽潡", value: "type2" },
+ { label: "鏉挎潗", value: "type3" },
+ ];
+ });*/
+
+ // 鍋囨暟鎹�
+ productTypes.value = [
+ { label: "3.5鐮屽潡", value: "type1" },
+ { label: "5.0鐮屽潡", value: "type2" },
+ { label: "鏉挎潗", value: "type3" },
+ ];
+ };
+
+ // 鏂板鎸夐挳鐐瑰嚮浜嬩欢
+ const handleAdd = () => {
+ isEdit.value = false;
+ dialogTitle.value = "鏂板鍙傛暟";
+ // 閲嶇疆琛ㄥ崟
+ formData.parameterCode = "";
+ formData.parameterName = "";
+ formData.parameterType2 = "1";
+ formData.parameterType = "";
+ formData.parameterFormat = "";
+ formData.parameterValue = "";
+ formData.standardValue = "";
+ formData.unit = "";
+ dialogVisible.value = true;
+ };
+
+ // 缂栬緫鎸夐挳鐐瑰嚮浜嬩欢
+ const handleEdit = row => {
+ isEdit.value = true;
+ dialogTitle.value = "缂栬緫鍙傛暟";
+ // 濉厖琛ㄥ崟鏁版嵁
+ formData.parameterCode = row.parameterCode;
+ formData.parameterName = row.parameterName;
+ formData.parameterType2 = row.parameterType2 || "1";
+ formData.parameterType = row.parameterType;
+ formData.parameterFormat = row.parameterFormat;
+ formData.parameterValue = row.parameterValue;
+ formData.standardValue = row.standardValue;
+ formData.unit = row.unit;
+ dialogVisible.value = true;
+ };
+
+ // 鍒犻櫎鎸夐挳鐐瑰嚮浜嬩欢
+ const handleDelete = row => {
+ ElMessageBox.confirm("纭畾瑕佸垹闄よ繖鏉℃暟鎹悧锛�", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ // 娉ㄩ噴鎺堿PI璋冪敤锛屼娇鐢ㄥ亣鏁版嵁
+ /*delParameter(row.id)
+ .then(res => {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ getList();
+ })
+ .catch(() => {
+ ElMessage.error("鍒犻櫎澶辫触");
+ });*/
+
+ // 鍋囨暟鎹ā鎷�
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ getList();
+ })
+ .catch(() => {
+ // 鍙栨秷鍒犻櫎
+ });
+ };
+
+ // 鎻愪氦琛ㄥ崟
+ const handleSubmit = () => {
+ formRef.value.validate(valid => {
+ if (valid) {
+ // 娉ㄩ噴鎺堿PI璋冪敤锛屼娇鐢ㄥ亣鏁版嵁
+ /*const api = isEdit.value ? updateParameter : addParameter;
+ api(formData)
+ .then(res => {
+ ElMessage.success(isEdit.value ? "缂栬緫鎴愬姛" : "鏂板鎴愬姛");
+ dialogVisible.value = false;
+ getList();
+ })
+ .catch(() => {
+ ElMessage.error(isEdit.value ? "缂栬緫澶辫触" : "鏂板澶辫触");
+ });*/
+
+ // 鍋囨暟鎹ā鎷�
+ ElMessage.success(isEdit.value ? "缂栬緫鎴愬姛" : "鏂板鎴愬姛");
+ dialogVisible.value = false;
+ getList();
+ } else {
+ return false;
+ }
+ });
+ };
+ const dictTypes = ref([]);
+ const getDictTypes = () => {
+ listType({ pageNum: 1, pageSize: 1000 }).then(res => {
+ dictTypes.value = res.rows || [];
+ });
+ };
+
+ onMounted(() => {
+ getDictTypes();
+ getList();
+ getProductTypes();
+ });
+</script>
+
+<style scoped lang="scss">
+ .app-container {
+ padding: 24px;
+ background-color: #f0f2f5;
+ min-height: calc(100vh - 48px);
+ }
+
+ .search_form {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ padding: 20px;
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+ }
+
+ .search_title {
+ color: #606266;
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ .ml10 {
+ margin-left: 10px;
+ }
+ }
+
+ .table_list {
+ background-color: #ffffff;
+ border-radius: 6px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+ overflow: hidden;
+ height: calc(100vh - 230px);
+ }
+
+ :deep(.el-table) {
+ border: none;
+ border-radius: 6px;
+ overflow: hidden;
+ box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
+
+ .el-table__header-wrapper {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+ th {
+ background: transparent;
+ font-weight: 600;
+ // color: #ffffff;
+ border-bottom: none;
+ padding: 16px 0;
+ letter-spacing: 0.5px;
+ }
+ }
+
+ .el-table__body-wrapper {
+ tr {
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(102, 126, 234, 0.05) 0%,
+ rgba(118, 75, 162, 0.05) 100%
+ );
+ transform: scale(1.002);
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+ }
+
+ td {
+ border-bottom: 1px solid #f0f0f0;
+ padding: 14px 0;
+ color: #303133;
+ }
+ }
+
+ tr.current-row {
+ background: linear-gradient(
+ 90deg,
+ rgba(102, 126, 234, 0.08) 0%,
+ rgba(118, 75, 162, 0.08) 100%
+ );
+ }
+
+ // 鏁板�煎瓧娈垫牱寮�
+ .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;
+ }
+
+ // 鏃ユ湡瀛楁鏍峰紡
+ .date-cell {
+ color: #909399;
+ font-style: italic;
+ }
+ }
+
+ .el-table__empty-block {
+ padding: 60px 0;
+ background-color: #fafafa;
+ }
+ }
+
+ .pagination-container {
+ display: flex;
+ justify-content: flex-end;
+ padding: 16px 20px;
+ background-color: #ffffff;
+ border-top: 1px solid #ebeef5;
+ border-radius: 0 0 12px 12px;
+ }
+
+ :deep(.el-button) {
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-1px);
+ }
+ }
+
+ @media (max-width: 768px) {
+ .app-container {
+ padding: 16px;
+ }
+
+ .search_form {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+
+ .el-form {
+ width: 100%;
+
+ .el-form-item {
+ width: 100%;
+ }
+ }
+
+ .el-button {
+ margin-right: 12px;
+ }
+ }
+
+ :deep(.el-table) {
+ th,
+ td {
+ padding: 10px 0;
+ font-size: 12px;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3