Compare commits
No commits in common. "81c53e71efe647bc5b13a84c6621f3bf0d2d86b6" and "b35c91db5c676873dde5b3301781bfc88f6456c5" have entirely different histories.
81c53e71ef
...
b35c91db5c
|
|
@ -93,157 +93,37 @@ export const carTypeOptions = [
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// export const treeData = [
|
export const treeData = [
|
||||||
// {
|
{
|
||||||
// id: 1,
|
id: 1,
|
||||||
// label: "D310000000032,动力轮对轴箱组装(带联轴节)",
|
label: "D310000000032,动力轮对轴箱组装(带联轴节)",
|
||||||
// children: [
|
children: [
|
||||||
// {
|
{
|
||||||
// id: 2,
|
id: 2,
|
||||||
// label: "D311000000013,动力轮对(带轴承+联轴节)",
|
label: "D311000000013,动力轮对(带轴承+联轴节)",
|
||||||
// children: [
|
children: [
|
||||||
// { id: 3, label: "D311001000011,动力轮对" },
|
{ id: 3, label: "D311001000011,动力轮对" },
|
||||||
// { id: 4, label: "D325000000013,左轴箱组装" },
|
{ id: 4, label: "D325000000013,左轴箱组装" },
|
||||||
// { id: 5, label: "D326000000037,左轴端装置" },
|
{ id: 5, label: "D326000000037,左轴端装置" },
|
||||||
// { id: 6, label: "D325000000014,右轴箱组装" },
|
{ id: 6, label: "D325000000014,右轴箱组装" },
|
||||||
// { id: 7, label: "D326000000038,右轴端装置" },
|
{ id: 7, label: "D326000000038,右轴端装置" },
|
||||||
// ],
|
],
|
||||||
// },
|
},
|
||||||
// ],
|
],
|
||||||
// },
|
},
|
||||||
// ];
|
];
|
||||||
|
|
||||||
// export const partInfoMap = {
|
export const partInfoMap = {
|
||||||
// 1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
|
1: { id: 1, name: "动力轮对轴箱组装", spec: "组装件", desc: "包含轮对、轴箱等" },
|
||||||
// 2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
|
2: { id: 2, name: "动力轮对", spec: "带轴承+联轴节", desc: "动力传递部件" },
|
||||||
// 3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
|
3: { id: 3, name: "动力轮对", spec: "标准型", desc: "主驱动部件" },
|
||||||
// 4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
|
4: { id: 4, name: "左轴箱组装", spec: "组装件", desc: "左侧支撑" },
|
||||||
// 5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
|
5: { id: 5, name: "左轴端装置", spec: "端装置", desc: "左端保护" },
|
||||||
// 6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
|
6: { id: 6, name: "右轴箱组装", spec: "组装件", desc: "右侧支撑" },
|
||||||
// 7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
|
7: { id: 7, name: "右轴端装置", spec: "端装置", desc: "右端保护" },
|
||||||
// };
|
};
|
||||||
|
|
||||||
export const defaultPaymentTerms = "货物出厂验收合格前，买方需将所提货物全额货款支付给卖方。";
|
export const defaultPaymentTerms = "货物出厂验收合格前，买方需将所提货物全额货款支付给卖方。";
|
||||||
export const defaultObjectionTerms = "买方提出对产品质量异议的时间为收到货物起5个工作日内，卖方应在收到异议书次日起3个工作日内与买方沟通，通过技术指导方式解决问题，如不能解决，买方可以要求卖方前往修理，如修理后仍不能使用，买方可以提出更换请求。如买方在收到货物后5日内未提出异议，则视为同意卖方处理意见。";
|
export const defaultObjectionTerms = "买方提出对产品质量异议的时间为收到货物起5个工作日内，卖方应在收到异议书次日起3个工作日内与买方沟通，通过技术指导方式解决问题，如不能解决，买方可以要求卖方前往修理，如修理后仍不能使用，买方可以提出更换请求。如买方在收到货物后5日内未提出异议，则视为同意卖方处理意见。";
|
||||||
export const defaultForceTerms = "如因不可抗力的原因，致使卖方推迟或不能交货，卖方不需为此承担责任。但卖方需在上述事件发生次日起七天内，以传真等书面方式通知买方，同时，卖方应采取一切必要措施及早交货。";
|
export const defaultForceTerms = "如因不可抗力的原因，致使卖方推迟或不能交货，卖方不需为此承担责任。但卖方需在上述事件发生次日起七天内，以传真等书面方式通知买方，同时，卖方应采取一切必要措施及早交货。";
|
||||||
export const defaultDisputeTerms = "合同双方因履行本合同发生争议时，应本着友好合作的精神共同协商解决。如协商后双方仍然无法达成一致则向买方所在地法院申请裁决。";
|
export const defaultDisputeTerms = "合同双方因履行本合同发生争议时，应本着友好合作的精神共同协商解决。如协商后双方仍然无法达成一致则向买方所在地法院申请裁决。";
|
||||||
|
|
||||||
// 商品参数选择静态树形数据
|
|
||||||
export const productTreeData = [
|
|
||||||
{
|
|
||||||
code: "D310000000032",
|
|
||||||
label: "D310000000032,动力轮对轴箱组成（带联轴节）",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/totle.jpg',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
code: "D311000000013",
|
|
||||||
label: "D311000000013,动力轮对（带轴承+联轴节）",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1.jpg',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
code: "D311001000011",
|
|
||||||
label: "D311001000011,动力轮对",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_1_1.jpg',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
code: "D351200000018",
|
|
||||||
label: "D351200000018,动车组联轴节（鼓形齿式）",
|
|
||||||
replaceable: true,
|
|
||||||
image: '/src/assets/images/cars/1_2_1.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D312000000013",
|
|
||||||
label: "D312000000013,齿轮箱组成",
|
|
||||||
replaceable: true,
|
|
||||||
image: '/src/assets/images/cars/1_2_1_1.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D311101000008",
|
|
||||||
label: "D311101000008,动力车轮组成（带喷漆）",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_2_1_1.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D311299000016",
|
|
||||||
label: "D311299000016,动力车轴（带喷漆）",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_2_1_1_1.jpg'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D311303000007",
|
|
||||||
label: "D311303000007,后挡圈",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_1_2.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "3627401100024",
|
|
||||||
label: "3627401100024,O形橡胶密封圈",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_2.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "3627401100023",
|
|
||||||
label: "3627401100023,O形橡胶密封圈",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_2_1.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D311300000020",
|
|
||||||
label: "D311300000020,轴箱轴承",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/1_2_1_1.jpg'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D325000000013",
|
|
||||||
label: "D325000000013,左轴箱组成",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/2.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D325000000014",
|
|
||||||
label: "D325000000014,右轴箱组成",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/3.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "D326000000037",
|
|
||||||
label: "D326000000037,左轴端装置",
|
|
||||||
replaceable: false,
|
|
||||||
image: '/src/assets/images/cars/4.jpg'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 替换部件列表
|
|
||||||
export const replacePartsMap = {
|
|
||||||
"D351200000018": [
|
|
||||||
{
|
|
||||||
code: "D351200000002",
|
|
||||||
label: "D351200000002,动车组联轴节（鼓形齿式）",
|
|
||||||
replaceable: true,
|
|
||||||
image: '/src/assets/images/cars/1_1_1.jpg'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"D312000000013": [
|
|
||||||
{
|
|
||||||
code: "D312000000014",
|
|
||||||
label: "D312000000014,齿轮箱组成",
|
|
||||||
replaceable: true,
|
|
||||||
image: '/src/assets/images/cars/1_2_1.jpg'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "312000000015",
|
|
||||||
label: "D312000000015，齿轮箱组成",
|
|
||||||
replaceable: true,
|
|
||||||
image: '/src/assets/images/cars/4.jpg'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -114,150 +114,47 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-box right-align">
|
<div class="image-box right-align">
|
||||||
<img src="/images/3D.png" alt="3D结构图" class="main-img" />
|
<img
|
||||||
|
src="/images/3D.png"
|
||||||
|
alt="3D结构图"
|
||||||
|
class="main-img"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-title">商品参数选择</div>
|
<div class="table-title">商品参数选择</div>
|
||||||
<!-- 一级菜单作为表头 -->
|
|
||||||
<div
|
|
||||||
class="header-title"
|
|
||||||
v-for="item in firstLevelItems"
|
|
||||||
:key="item.code"
|
|
||||||
>
|
|
||||||
<div class="header-code">编号：{{ item.code }}</div>
|
|
||||||
<div class="header-name">名称：{{ item.label }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-table-row">
|
<div class="tree-table-row">
|
||||||
<!-- 二级菜单作为tab页 -->
|
<el-tree
|
||||||
<div class="tab-container">
|
:data="treeData"
|
||||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
:props="treeProps"
|
||||||
<el-tab-pane
|
node-key="id"
|
||||||
v-for="item in secondLevelItems"
|
highlight-current
|
||||||
:key="item.code"
|
@current-change="handleTreeSelect"
|
||||||
:name="item.code"
|
class="tree-box"
|
||||||
>
|
default-expand-all
|
||||||
<template #label>
|
|
||||||
<div class="custom-tab-label">
|
|
||||||
<div class="tab-label-image">
|
|
||||||
<img
|
|
||||||
:src="item.image || '/images/part-default.png'"
|
|
||||||
class="tab-img"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
<el-table
|
||||||
<div class="tab-label-info">
|
:data="selectedPartInfo ? [selectedPartInfo] : []"
|
||||||
<div class="tab-label-code">{{ item.code }}</div>
|
border
|
||||||
<div class="tab-label-name">{{ item.label }}</div>
|
class="part-table"
|
||||||
</div>
|
style="width: 600px; margin-left: 24px"
|
||||||
</div>
|
>
|
||||||
|
<el-table-column prop="name" label="部件名称">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input v-model="scope.row.name" />
|
||||||
</template>
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<!-- 三级及以下树形结构 -->
|
<el-table-column prop="spec" label="规格">
|
||||||
<div class="tab-content">
|
<template #default="scope">
|
||||||
1111
|
<el-input v-model="scope.row.spec" />
|
||||||
<template v-if="item.children && item.children.length">
|
|
||||||
<div
|
|
||||||
v-for="thirdLevel in item.children"
|
|
||||||
:key="thirdLevel.code"
|
|
||||||
class="third-level-section"
|
|
||||||
>
|
|
||||||
<div class="third-level-header">
|
|
||||||
<div class="third-level-title">
|
|
||||||
<span class="third-level-code">{{
|
|
||||||
thirdLevel.code
|
|
||||||
}}</span>
|
|
||||||
<span class="third-level-name">{{
|
|
||||||
thirdLevel.label
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="third-level-actions"
|
|
||||||
v-if="
|
|
||||||
thirdLevel.children && thirdLevel.children.length
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="openReplaceDialog(thirdLevel)"
|
|
||||||
>
|
|
||||||
替换
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 四级及以下菜单 -->
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
thirdLevel.children && thirdLevel.children.length
|
|
||||||
"
|
|
||||||
class="fourth-level-container"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="fourthLevel in thirdLevel.children"
|
|
||||||
:key="fourthLevel.code"
|
|
||||||
class="fourth-level-item"
|
|
||||||
>
|
|
||||||
<div class="fourth-level-content">
|
|
||||||
<div
|
|
||||||
class="fourth-level-image"
|
|
||||||
v-if="fourthLevel.image"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="fourthLevel.image"
|
|
||||||
class="fourth-level-img"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="fourth-level-info">
|
|
||||||
<div class="fourth-level-code">
|
|
||||||
{{ fourthLevel.code }}
|
|
||||||
</div>
|
|
||||||
<div class="fourth-level-name">
|
|
||||||
{{ fourthLevel.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="fourth-level-actions"
|
|
||||||
v-if="
|
|
||||||
fourthLevel.children &&
|
|
||||||
fourthLevel.children.length
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="openReplaceDialog(fourthLevel)"
|
|
||||||
>
|
|
||||||
替换
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</el-table-column>
|
||||||
</el-tab-pane>
|
<el-table-column prop="desc" label="描述">
|
||||||
</el-tabs>
|
<template #default="scope">
|
||||||
</div>
|
<el-input v-model="scope.row.desc" />
|
||||||
</div>
|
|
||||||
<el-dialog
|
|
||||||
v-model="replaceDialogVisible"
|
|
||||||
title="特定替换部件"
|
|
||||||
width="500px"
|
|
||||||
>
|
|
||||||
<el-radio-group v-model="replaceSelected">
|
|
||||||
<el-radio
|
|
||||||
v-for="item in replaceList"
|
|
||||||
:key="item.code"
|
|
||||||
:label="item.code"
|
|
||||||
>{{ item.label }}</el-radio
|
|
||||||
>
|
|
||||||
</el-radio-group>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="replaceDialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="handleReplace">替换</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-row">
|
<div class="btn-row">
|
||||||
<el-button @click="handlePrevStep">上一步</el-button>
|
<el-button @click="handlePrevStep">上一步</el-button>
|
||||||
|
|
@ -275,12 +172,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted } from "vue";
|
import { ref, computed, watch } from "vue";
|
||||||
import {
|
import { carTypeOptions, treeData, partInfoMap } from "@/data/stepMockData";
|
||||||
carTypeOptions,
|
|
||||||
productTreeData,
|
|
||||||
replacePartsMap,
|
|
||||||
} from "@/data/stepMockData";
|
|
||||||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -380,67 +273,17 @@ watch(selectedCarTypeProxy, (newVal, oldVal) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 商品参数选择相关逻辑
|
// 模拟树形结构数据
|
||||||
const treeData = ref(productTreeData);
|
const treeProps = { children: "children", label: "label" };
|
||||||
const selectedNode = ref(null);
|
|
||||||
const replaceDialogVisible = ref(false);
|
|
||||||
const replaceList = ref([]);
|
|
||||||
const replaceSelected = ref(null);
|
|
||||||
const activeTab = ref("");
|
|
||||||
|
|
||||||
// 计算一级菜单项
|
function handleTreeSelect(node) {
|
||||||
const firstLevelItems = computed(() => {
|
if (node && node.id && partInfoMap[node.id]) {
|
||||||
return treeData.value.map((item) => ({
|
selectedPartInfo.value = { ...partInfoMap[node.id] };
|
||||||
code: item.code,
|
} else {
|
||||||
label: item.label,
|
selectedPartInfo.value = null;
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
// 计算二级菜单项
|
|
||||||
const secondLevelItems = computed(() => {
|
|
||||||
const activeFirstLevel = treeData.value.find(
|
|
||||||
(item) => item.code === activeTab.value
|
|
||||||
);
|
|
||||||
return activeFirstLevel?.children || [];
|
|
||||||
});
|
|
||||||
|
|
||||||
// 处理tab切换
|
|
||||||
function handleTabClick(tab) {
|
|
||||||
activeTab.value = tab.props.name;
|
|
||||||
selectedNode.value = null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理节点点击
|
|
||||||
function handleNodeClick(node) {
|
|
||||||
selectedNode.value = node;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开替换对话框
|
|
||||||
function openReplaceDialog(node) {
|
|
||||||
replaceList.value = replacePartsMap[node.code] || [];
|
|
||||||
replaceSelected.value = null;
|
|
||||||
replaceDialogVisible.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理替换
|
|
||||||
function handleReplace() {
|
|
||||||
if (!replaceSelected.value) return;
|
|
||||||
const newPart = replaceList.value.find(
|
|
||||||
(item) => item.code === replaceSelected.value
|
|
||||||
);
|
|
||||||
if (newPart) {
|
|
||||||
selectedNode.value.code = newPart.code;
|
|
||||||
selectedNode.value.label = newPart.label;
|
|
||||||
selectedNode.value.image = newPart.image;
|
|
||||||
}
|
|
||||||
replaceDialogVisible.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const treeProps = {
|
|
||||||
label: "label",
|
|
||||||
children: "children",
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleCarTypeChange(value) {
|
function handleCarTypeChange(value) {
|
||||||
// 只有非"其他"选项才显示车型信息弹窗
|
// 只有非"其他"选项才显示车型信息弹窗
|
||||||
if (value !== "其他") {
|
if (value !== "其他") {
|
||||||
|
|
@ -492,12 +335,6 @@ function handleNextStep() {
|
||||||
emit("next-step");
|
emit("next-step");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (treeData.value.length > 0) {
|
|
||||||
activeTab.value = treeData.value[0].code;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
@ -593,67 +430,21 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
.tree-table-row {
|
.tree-table-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
border: 1px solid #bbb;
|
border: 1px solid #bbb;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
.header-title {
|
.tree-box {
|
||||||
flex: 1;
|
min-width: 340px;
|
||||||
padding: 10px;
|
max-width: 400px;
|
||||||
border-radius: 4px;
|
margin-right: 24px;
|
||||||
}
|
|
||||||
.header-code,
|
|
||||||
.header-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.tab-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.tab-header {
|
|
||||||
background: #f5f7fa;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.tab-header-item {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.tab-header-image {
|
|
||||||
width: 200px;
|
|
||||||
height: 150px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.tab-header-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.tab-header-code,
|
|
||||||
.tab-header-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.part-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
.sub-tree {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #eee;
|
}
|
||||||
border-radius: 4px;
|
.part-table {
|
||||||
|
min-width: 350px;
|
||||||
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
.model-form {
|
.model-form {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
|
|
@ -672,247 +463,4 @@ onMounted(() => {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
}
|
}
|
||||||
.custom-tab-label {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-label-image {
|
|
||||||
width: 80px;
|
|
||||||
height: 60px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-label-info {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-label-code {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-label-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__item) {
|
|
||||||
height: auto !important;
|
|
||||||
padding: 0 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__nav) {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__item.is-active) {
|
|
||||||
.tab-label-code,
|
|
||||||
.tab-label-name {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tree-node {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-image {
|
|
||||||
width: 60px;
|
|
||||||
height: 45px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-code {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node__content) {
|
|
||||||
height: auto !important;
|
|
||||||
padding: 4px 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node__children) {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node.is-current > .el-tree-node__content) {
|
|
||||||
background-color: var(--el-color-primary-light-9);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tree-node__content:hover) {
|
|
||||||
background-color: var(--el-color-primary-light-9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
padding: 16px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-top: 16px;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third-level-section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.third-level-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px;
|
|
||||||
background: #f5f7fa;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third-level-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third-level-code {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third-level-name {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--el-color-primary);
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-image {
|
|
||||||
width: 60px;
|
|
||||||
height: 45px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-info {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-code {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourth-level-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__content) {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__item) {
|
|
||||||
height: auto !important;
|
|
||||||
padding: 0 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__nav) {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-tabs__item.is-active) {
|
|
||||||
.tab-label-code,
|
|
||||||
.tab-label-name {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue