1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
* @Description:补充符号-粗糙度
* @author wx
* @date 2022/12/06
*/
<template>
<div class="flags-elementIcon">
<div v-for="(item,index) in showOptions" :key="index" class="element-item" :class="[selectedDatas.find(r=>r.value === item.value) ?'selected':'']" @click="selectSymbol(item)">
<svg-icon v-if="item.src" :icon-class="item.src" class="f22" />
<span v-else>{{ item.label }}</span>
</div>
</div>
</template>
<script>
import config from './config'
export default {
name: 'FlagsElementIcon',
components: {},
mixins: [config],
props: {
options: {
type: String,
default: () => ''
},
form: {
type: Object,
default: null
}
},
componentName: '公差符号-补充符号',
data() {
return {
activeEl: {},
selectedDatas: []
}
},
computed: {
showOptions() {
if (this.options) {
return JSON.parse(this.options)
} else {
return []
}
}
},
mounted() {},
methods: {
selectSymbol(item) {
this.activeEl = item
const findItemIndex = this.selectedDatas.findIndex(r => r.value === item.value)
if (findItemIndex > -1) {
this.selectedDatas.splice(findItemIndex, 1)
} else {
this.selectedDatas.push(item)
}
const datas = JSON.parse(JSON.stringify(this.form)).dynamicAttrs
const supplyType = this.selectedDatas// flag补充
const symbolPos = this.form.symbolPosition// 符号位置 1上 -1下
if (supplyType && supplyType.length > 0) {
const flag3Item = supplyType.filter(x => x.value === 'flag3')
if (flag3Item && flag3Item.length > 0) {
datas.upFlag3 = true
} else {
datas.upFlag3 = false
}
} else {
if (!this.form.flag3) {
symbolPos === '1' ? this.$set(datas, 'upFlag3', false) : this.$set(datas, 'downFlag3', false)
}
}
this.showOptions.forEach(x => {
const findItem = supplyType.find(r => r.value === x.value)
this.$set(datas, x.value, !!findItem)
})
this.$emit('input', datas)
}
}
}
</script>
<style lang='scss'>
.flags-elementIcon{
padding: 4px;
border: 1px solid #e9e9eb;
display: flex;
flex-wrap: wrap;
.element-item{
cursor: pointer;
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
padding: 2px;
margin: 0 4px 4px 0;
border: 1px solid #ebebe9;
&:hover{
background: #ebebe9
}
}
.selected{
color: #409EFF;
border-color: #409EFF;
box-shadow: 2px 2px 1px 0 #409eff;
}
}
</style>