| | |
| | | <div class="settingDiv"> |
| | | <!-- 实现工艺设置动态添加--> |
| | | <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"> |
| | | |
| | | <div style="display: flex;align-items: center;position: relative;"> |
| | | <div class="orderNumber">{{ index }}</div> |
| | | <el-tooltip class="item" effect="dark" :content="tag.label" placement="top"> |
| | | |
| | | <!-- @close="handleTagClose(tag.label)"--> |
| | | <!-- :closable="index!==0"--> |
| | | <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>--> |
| | |
| | | <i class="el-icon-edit" @click="tagEdit(tag)" /> |
| | | </el-tag> |
| | | </el-tooltip> |
| | | <i v-if="index!==0" class="el-icon-close" @click="handleTagClose(tag.label)" /> |
| | | <el-autocomplete |
| | | v-if="!flag&&tag.label===flagSelected" |
| | | :ref="'saveTagInput'+tag.id" |
| | | v-model="value" |
| | | v-model="tagValue" |
| | | class="input-new-tag" |
| | | size="small" |
| | | :fetch-suggestions="querySearch" |
| | |
| | | ], |
| | | total: 10, |
| | | tableData: [], |
| | | dialogVisible: true, |
| | | dialogVisible: false, |
| | | dialogForm: { |
| | | OrgType: '', |
| | | OrgCode: '', |
| | |
| | | SupUnit: ''// 上级单位 |
| | | }, |
| | | dynamicTags: [// 工艺设置数组 |
| | | { id: 1, label: '标签一', effect: 'light' }, |
| | | { id: 1, label: '标签一标签一标签一标签一标签一标签一', effect: 'light' }, |
| | | { id: 2, label: '标签二', effect: 'light' }, |
| | | { id: 3, label: '标签三', effect: 'light' } |
| | | ], |
| | | tagSelectedId: '', // tag选择中id |
| | | flag: true, |
| | | flagSelected: '', // 判断是否选中 |
| | | value: '', |
| | | tagValue: '', |
| | | restaurants: [], |
| | | addDisabled: false, |
| | | |
| | |
| | | console.log(this.value) |
| | | this.addDisabled = false |
| | | this.flagSelect = '' |
| | | this.value = '' |
| | | this.tagValue = '' |
| | | this.flag = !this.flag |
| | | }, |
| | | tagEdit(tag) { |
| | |
| | | |
| | | this.addDisabled = true |
| | | this.flagSelected = tag.label |
| | | this.value = tag.label |
| | | this.tagValue = tag.label |
| | | this.flag = !this.flag |
| | | this.$nextTick(_ => { |
| | | this.$refs['saveTagInput' + tag.id][0].focus() |
| | |
| | | 实现工艺设置动态添加样式 |
| | | */ |
| | | |
| | | .orderNumber{ |
| | | .orderNumber { |
| | | |
| | | } |
| | | |
| | | .el-icon-edit { |
| | | width: 16px; |
| | | height: 16px; |
| | |
| | | padding: 3px 0 0 3px; |
| | | margin-left: 5px; |
| | | cursor: pointer; |
| | | position: absolute; |
| | | right: 3px; |
| | | bottom: 8px; |
| | | } |
| | | |
| | | .el-icon-edit:hover { |
| | | background-color: #99a9bf; |
| | | color: #FFFFFF; |
| | | } |
| | | .el-icon-close { |
| | | position: absolute ; |
| | | top: -5px ; |
| | | z-index: 100 ; |
| | | cursor: pointer; |
| | | padding: 1px 0 0 1px ; |
| | | } |
| | | |
| | | .el-icon-close:hover { |
| | | background-color: #99a9bf; |
| | | } |
| | | |
| | | .el-tag--dark { |
| | |
| | | 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 { |
| | |
| | | display: flex; |
| | | width: 100%; |
| | | height: 40px; |
| | | overflow-y: scroll; |
| | | overflow-x: scroll; |
| | | overflow-y: hidden; |
| | | align-items: center; |
| | | } |
| | | |
| | |
| | | margin-left: 0; |
| | | width: 100px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | </style> |