From d1455d4d4df6ea277405d3219d25deb8d284f0b0 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 07 十二月 2023 14:12:31 +0800
Subject: [PATCH] scoped样式整合代码
---
Source/UBCS-WEB/src/views/modeling/LinkType.vue | 223 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 138 insertions(+), 85 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/modeling/LinkType.vue b/Source/UBCS-WEB/src/views/modeling/LinkType.vue
index 18e6791..d28d2bc 100644
--- a/Source/UBCS-WEB/src/views/modeling/LinkType.vue
+++ b/Source/UBCS-WEB/src/views/modeling/LinkType.vue
@@ -1,36 +1,30 @@
<template>
<el-container>
<!-- 椤剁鎸夐挳 -->
- <el-header class="businessHeader" style="height: 40px;">
- <el-button-group>
- <el-button type="primary" @click="linkTypeAdd" size="small">
- <i class="el-icon-plus"></i>
- 鏂板
- </el-button>
- <el-button type="primary" @click="linkTypeEdit" size="small">
- <i class="el-icon-edit"></i>
- 淇敼
- </el-button>
- <el-button type="primary" @click="selectFromTable" size="small">
- <i class="el-icon-thumb"></i>
- 浠庡凡鏈変腑鑾峰彇
- </el-button>
- </el-button-group>
- </el-header>
+
<!-- 渚ц竟鏍忔爲 -->
<el-container>
- <el-aside width="240px">
+ <el-aside style="width: 20%;">
<basic-container class="businessTreeContainer">
- <p style="margin-top: 10px;font-weight: 570;font-size: 19px">{{ treeOption.title }}</p>
- <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick"
- class="businessTree">
- <span class="el-tree-node__label" slot-scope="{ node, data }">
+ <div class="app">
+ <div style="display: flex;margin-bottom: 10px;">
+ <el-button type="primary" @click="linkTypeAdd" size="mini" v-if="permissionList.addBtn" plain>
+ 鏂板
+ </el-button>
+ <el-button type="primary" @click="linkTypeEdit" size="mini" v-if="permissionList.editBtn" plain>
+ 淇敼
+ </el-button>
+ </div>
+ <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick"
+ class="businessTree">
+ <template class="el-tree-node__label" slot-scope="{ node, data }">
<span>
<i class="el-icon-star-on"></i>
{{ (node || {}).label }}
</span>
- </span>
+ </template>
</avue-tree>
+ </div>
</basic-container>
</el-aside>
<el-container>
@@ -38,88 +32,90 @@
<basic-container>
<p style="margin-top: 10px;font-weight: 570;font-size: 19px">鍩烘湰淇℃伅</p>
<el-descriptions class="margin-top" :column="2" size="medium" border>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-finished"></i>
+ <i :class="icons.id"></i>
鑻辨枃鍚嶇О
</template>
{{ obj.id }}
</el-descriptions-item>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-info"></i>
+ <i :class="icons.name"></i>
涓枃鍚嶇О
</template>
{{ obj.name }}
</el-descriptions-item>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-date"></i>
+ <i :class="icons.tableName"></i>
鏁版嵁搴撹〃鍚�
</template>
{{ obj.tableName }}
</el-descriptions-item>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-folder-opened"></i>
+ <i :class="icons.domain"></i>
鎵�灞為鍩�
</template>
- <el-tag size="small">
+ <el-tag v-if="obj.domainText" size="small">
{{ obj.domainText }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="2" border>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-sort-down"></i>
+ <i :class="icons.from"></i>
From绔被鍨�
</template>
<span v-for="item in obj.fromBtmTypes" style="margin-left:2px;">
- <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;">
+ <el-tag size="small" effect="plain" style="margin-top: 2px;">
{{ item.id + '锛�' + item.name + '锛�' }}
</el-tag>
</span>
</el-descriptions-item>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-sort-up"></i>
+ <i :class="icons.to"></i>
To娈电被鍨�
</template>
- <span v-for="item in obj.toBtmTypes" style="height:26px;width:140px;margin-left:2px">
- <el-tag size="small" effect="plain" style="width:130px;margin-top: 2px;">
+ <span v-for="item in obj.toBtmTypes" style="margin-left:2px">
+ <el-tag size="small" effect="plain" style="margin-top: 2px;">
{{ item.id + '锛�' + item.name + '锛�' }}
</el-tag>
</span>
</el-descriptions-item>
</el-descriptions>
- <el-descriptions class="margin-top" :column="2" size="medium" border>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions class="margin-top" :column="2" size="medium" border>
+ <!--
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-info"></i>
+ <i :class="icons.main"></i>
涓荤被鍨�
</template>
{{ obj.fromBtmTypeName }}
</el-descriptions-item>
- <el-descriptions-item labelStyle="text-align:center;width:120px"
- contentStyle="width:240px;text-align:center;word-break;break-all;">
+ <el-descriptions-item :labelStyle="descriptionOption.labelStyle"
+ :contentStyle="descriptionOption.contentStyle">
<template slot="label">
- <i class="el-icon-info"></i>
+ <i :class="icons.main"></i>
涓荤被鍨�
</template>
{{ obj.toBtmTypeName }}
</el-descriptions-item>
+ -->
<el-descriptions-item span='2' labelStyle="text-align:center;width:120px">
<template slot="label">
- <i class="el-icon-chat-line-square"></i>
+ <i :class="icons.desc"></i>
鎻忚堪
</template>
{{ obj.description }}
@@ -130,19 +126,21 @@
<basic-container>
<p style="margin-top: 10px;font-weight: 570;font-size: 19px">灞炴�у垪琛�</p>
<avue-crud class="attributeCrud" v-model="obj" :data="obj.attributes" :option="loadOption">
- <template slot="attrDataType" slot-scope="{row}">
- <el-tag>{{ row.attrDataType }}</el-tag>
+ <template slot="attrDataTypeText" slot-scope="{row}">
+ <el-tag>{{ row.attrDataTypeText }}</el-tag>
</template>
</avue-crud>
</basic-container>
</el-main>
</el-container>
</el-container>
-
+ <link-type-add ref="linkAdd" :linkType="addOption.linkType" :domainOption="domainOptions" :icons="icons"
+ @refreshTable="initTreeOnLoad">
+ </link-type-add>
</el-container>
</template>
-
+
<script>
import {
initTree,
@@ -151,17 +149,36 @@
saveFromTable,
getDetail
} from "@/api/omd/linkType"
+import {mapGetters} from "vuex";
export default {
name: "LinkType",
data() {
return {
- treeData: [
- { id: "1", name: "2", label: "label" },
- { id: "a", name: "b", label: "c" }
- ],
+ addOption: {
+ linkType: {
+ attributes:[]
+ },
+ },
+ domain: null,
+ domainOptions: [],
+ icons: {
+ id: 'el-icon-finished',
+ name: 'el-icon-tickets',
+ tableName: 'el-icon-date',
+ domain: 'el-icon-folder-opened',
+ from: 'el-icon-sort-down',
+ to: 'el-icon-sort-up',
+ main: 'el-icon-warning-outline',
+ desc: 'el-icon-chat-line-square'
+ },
+ treeData: [],
+ descriptionOption: {
+ labelStyle: 'text-align:center;width:120px',
+ contentStyle: 'width:240px;text-align:center;word-break;break-all;'
+ },
loadOption: {
border: true,
- height: 360,
+ height: 'auto',
editBtn: false,
addBtn: false,
menu: false,
@@ -180,7 +197,7 @@
},
{
label: '绫诲瀷',
- prop: 'attrDataType',
+ prop: 'attrDataTypeText',
align: 'center',
slot: true
},
@@ -196,68 +213,104 @@
}
]
},
- obj: {
- id: 'linkType',
- name: '閾炬帴绫诲瀷',
- tableName: 'PLLT_OMD_LINKTYPE',
- domain: 'ubcs-omd',
- domainText: '瀵硅薄寤烘ā',
- fromBtmTypes: [
- { id: 'btm', name: '涓氬姟绫诲瀷' },
- { id: 'btm2', name: '涓氬姟绫诲瀷2' }
- ],
- toBtmTypes: [{ id: 'btm', name: '涓氬姟绫诲瀷' }, { id: 'btm2', name: '涓氬姟绫诲瀷2' }],
- fromBtmTypeName: '',
- toBtmTypeName: '',
- },
+ obj: {},
treeOption: {
+ height:'auto',
defaultExpandAll: true,
title: '閾炬帴绫诲瀷鏍�',
addBtn: false,
props: {
labelText: '',
- label: 'name',
+ label: 'label',
value: 'oid',
children: 'childList',
}
},
}
},
+ computed:{
+ ...mapGetters(["permission"]),
+ permissionList() {
+ return {
+ addBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_add, false),
+ editBtn: this.vaildData(this.permission.modeling_LinkType.LinkType_edit, false),
+ }
+ }
+ },
created() {
this.initTreeOnLoad();
- // this.initDomainOption();
+ this.initDomainOption();
},
methods: {
// 鏍戠偣鍑�
nodeClick(data) {
- console.log(data);
+ getDetail(data.oid).then(res => {
+ this.obj = res.data.data;
+ })
},
// 娣诲姞鎸夐挳鐐瑰嚮浜嬩欢
linkTypeAdd() {
-
+ this.$refs.linkAdd.linkType = {};
+ this.$refs.linkAdd.showSubmitDialog = true;
},
// 缂栬緫鎸夐挳鐐瑰嚮浜嬩欢
linkTypeEdit() {
-
+ var linktype = this.obj;
+ linktype.fromBtmValues = this.obj.fromBtmTypes;
+ linktype.toBtmValues = this.obj.toBtmTypes;
+ linktype.attributes = this.obj.attributes;
+ var json = JSON.stringify(linktype);
+ this.addOption.linkType = JSON.parse(json);
+ this.$refs.linkAdd.linkType = this.addOption.linkType;
+ this.$refs.linkAdd.showSubmitDialog = true;
},
// 浠庡凡鏈変腑鑾峰彇鎸夐挳鐐瑰嚮浜嬩欢
selectFromTable() {
},
+ // 鍔犺浇鏈嶅姟鏍�
initTreeOnLoad() {
initTree().then(res => {
this.treeData = res.data.data;
});
- }
+ },
+ // 鍔犺浇鏈嶅姟涓嬫媺妗�
+ initDomainOption() {
+ getDomain().then(res => {
+ this.domainOptions = res.data.data;
+ })
+ },
}
}
</script>
-
-<style lang="scss">
+
+<style lang="scss" scoped>
.attributeCrud>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu {
display: none !important;
}
+.app {
+ overflow: auto;
+ height: 84.3vh;
+}
+
+.app::-webkit-scrollbar {
+ height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
+ background: white;
+ border: white;
+ width: 10px;
+
+}
+
+// 婊氬姩鏉＄殑婊戝潡
+.app::-webkit-scrollbar-thumb {
+ width: 10px;
+ height: 10px;
+ background-color: #ececec;
+ border-radius: 20px;
+ border: #ececec;
+}
+
+
</style>
-
\ No newline at end of file
--
Gitblit v1.9.3