From e846eefa54a7a2274a34d43d4601e192a1ada3d9 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 25 六月 2022 13:16:07 +0800
Subject: [PATCH] 1.项目整体样式的配置2.实现工艺设置动态添加的静态样式
---
src/views/zzmx/gylx.vue | 183 ++++++++++++++++++++++++++++++++++++---------
1 files changed, 145 insertions(+), 38 deletions(-)
diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index db93532..906dacb 100644
--- a/src/views/zzmx/gylx.vue
+++ b/src/views/zzmx/gylx.vue
@@ -136,11 +136,12 @@
<el-form-item prop="SupUnit" label="浣跨敤鐘舵��" style="margin-right: 20px">
<el-select
v-model="dialogForm.isEnable"
+ :popper-append-to-body="false"
style="width: 220px"
placeholder="璇烽�夋嫨"
>
<el-option
- v-for="item in SupUnitArr"
+ v-for="item in isEnableArr"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -152,43 +153,51 @@
</el-form-item>
</div>
<el-form-item label="宸ヨ壓璁剧疆" prop="OrgName">
- <div style="display: flex;width:100%;overflow-y: scroll">
+ <div class="settingDiv">
<!-- 瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔�-->
- <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;">
- <el-tag
- v-if="flag||tag.label!==flagSelected"
- closable
- :disable-transitions="false"
- style="margin-left: 0;width: 100px;"
- :class="tagClass(tag.label)"
- :effect="tag.effect"
- @close="handleTagClose(tag.label)"
- @click="elTagClick(tag)"
- >
- {{ tag.label }}
- <i class="el-icon-edit" @click="tagEdit(tag)" />
- </el-tag>
+ <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;align-items: center">
+ <div style="display: flex;align-items: center;position: relative">
- <el-autocomplete
- v-if="!flag&&tag.label===flagSelected"
- :ref="'saveTagInput'+tag.id"
- v-model="value"
- class="input-new-tag"
- size="small"
- :fetch-suggestions="querySearch"
- style="margin-left: 0px;width: 100px;transform: translate(1)"
- autofocus
- @select="handleSelect"
- @keyup.enter.native="handleInputConfirm2"
- />
- <!-- @blur="handleBlur2"-->
-
- <div v-if="index!==dynamicTags.length-1" style="width: 40px;">----></div>
+ <el-tooltip class="item" effect="dark" :content="tag.label" placement="top">
+ <el-tag
+ v-if="flag||tag.label!==flagSelected"
+ :closable="index!==0"
+ :disable-transitions="false"
+ class="elTag"
+ :class="tagClass(tag.label)"
+ :effect="tag.effect"
+ @close="handleTagClose(tag.label)"
+ @click="elTagClick(tag)"
+ >
+ <!-- <div class="orderNumber">{{ index }}</div>-->
+ {{ tag.label }}
+ <i class="el-icon-edit" @click="tagEdit(tag)" />
+ </el-tag>
+ </el-tooltip>
+ <el-autocomplete
+ v-if="!flag&&tag.label===flagSelected"
+ :ref="'saveTagInput'+tag.id"
+ v-model="value"
+ class="input-new-tag"
+ size="small"
+ :fetch-suggestions="querySearch"
+ style="margin-left: 0;width: 200px;transform: translate(1)"
+ autofocus
+ @select="handleSelect"
+ @keyup.enter.native="handleInputConfirm2"
+ />
+ <!-- @blur="handleBlur2"-->
+ <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
+ </div>
</div>
<!-- :disabled="addDisabled"-->
- <el-button type="primary" style="margin-left: 20px;width: 100px;height: 32px;" size="small" @click="showInput">+
- 娣诲姞
- </el-button>
+ <el-button
+ type="success"
+ class="tagSuccess"
+ size="small"
+ icon="el-icon-plus"
+ @click="showInput"
+ />
</div>
</el-form-item>
@@ -247,7 +256,7 @@
page: 1, // 绗嚑椤�
rows: 10 // 姣忛〉澶氬皯鏉�
},
- isEnable: [
+ isEnableArr: [
{ label: '鏄�', value: 'Y' },
{ label: '鍚�', value: 'N' }
],
@@ -340,8 +349,10 @@
this.flag = !this.flag
},
tagEdit(tag) {
+ console.log(tag, 2)
+
this.addDisabled = true
- this.flagSelect = tag.label
+ this.flagSelected = tag.label
this.value = tag.label
this.flag = !this.flag
this.$nextTick(_ => {
@@ -349,7 +360,7 @@
})
},
elTagClick(tag) {
- console.log(tag)
+ console.log(tag, 1)
this.tagSelectedId = tag.id
if (tag.effect === 'dark') {
@@ -397,7 +408,7 @@
}
this.flag = !this.flag
this.$nextTick(_ => {
- this.$refs['saveTagInput' + this.dynamicTags.length ][0].focus()
+ this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
})
// this.$nextTick(_ => {
// console.log(this.$refs['saveTagInput'], 321)
@@ -585,6 +596,10 @@
line-height: 30px;
}
+::v-deep .el-input__inner:focus {
+ border-color: $main_color;
+}
+
::v-deep .el-table .caret-wrapper {
transform: scale(0.8);
}
@@ -653,4 +668,96 @@
margin-bottom: 0;
}
+::v-deep .el-input__inner:focus {
+ border-color: $main_color;
+}
+
+::v-deep .el-select .el-input__inner:focus {
+ border-color: $main_color;
+}
+
+::v-deep .el-select-dropdown__item.selected {
+ color: $main_color;
+}
+
+::v-deep .el-checkbox__inner:hover {
+ border-color: $main_color;
+}
+
+::v-deep .el-textarea__inner:focus {
+ border-color: $main_color;
+}
+
+/*
+瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
+*/
+
+.orderNumber{
+
+}
+.el-icon-edit {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ padding: 3px 0 0 3px;
+ margin-left: 5px;
+ cursor: pointer;
+}
+
+.el-icon-edit:hover {
+ background-color: #99a9bf;
+ color: #FFFFFF;
+}
+
+.el-tag--dark {
+ background-color: $main_color;
+ border-color: $main_color;
+}
+
+.tagSuccess {
+ margin-left: 20px;
+ width: 100px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ color: $main_color;
+}
+
+::v-deep .el-tag__close {
+ padding: 1px 0 0 1px !important;
+}
+::v-deep .el-tag__close:hover {
+ background-color: #99a9bf;
+}
+
+::v-deep .el-button--success {
+ width: 40px !important;
+ background-color: #ecf5ff;
+ border-radius: 0;
+ color: $main_color;
+}
+
+::v-deep .el-tag {
+ //height: 30px;
+ border-radius: 0;
+}
+
+::v-deep .el-input--small .el-input__inner {
+ border-radius: 0;
+}
+
+.settingDiv {
+ display: flex;
+ width: 100%;
+ height: 40px;
+ overflow-y: scroll;
+ align-items: center;
+}
+
+.elTag {
+ margin-left: 0;
+ width: 100px;
+ position: relative;
+}
+
</style>
--
Gitblit v1.9.3