|
|
@@ -11,8 +11,12 @@
|
|
|
custom-class="xl-dialog"
|
|
|
center
|
|
|
>
|
|
|
- <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="110px">
|
|
|
+ <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="70px">
|
|
|
</base-form>
|
|
|
+ <div class="scoped-color-quick" v-if="mteStr === 'polygonAdd'">
|
|
|
+ <div class="t">快速选择颜色</div>
|
|
|
+ <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{fillColor === item.color ? '已选' : ' '}}</div>
|
|
|
+ </div>
|
|
|
<div class="xl-form">
|
|
|
<div class="xl-form-footer">
|
|
|
<el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
|
|
|
@@ -39,11 +43,21 @@ export default {
|
|
|
formData: [],
|
|
|
fillColor: '#DC3021',
|
|
|
strokeColor: '#DC3021',
|
|
|
+ colorArr: [
|
|
|
+ {color: '#fb6557'},
|
|
|
+ {color: '#ff9149'},
|
|
|
+ {color: '#9f7df4'},
|
|
|
+ {color: '#60c68b'},
|
|
|
+ {color: '#4da4ee'},
|
|
|
+ {color: '#e77ad4'}
|
|
|
+ ],
|
|
|
+ cObj: {},
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShow: function(val) {
|
|
|
if (val) {
|
|
|
+ this.cObj = JSON.parse(JSON.stringify(this.curObj))
|
|
|
this.getDef()
|
|
|
}
|
|
|
},
|
|
|
@@ -51,6 +65,12 @@ export default {
|
|
|
methods: {
|
|
|
getDef (str) {
|
|
|
let params = { ...this.curObj.obj }
|
|
|
+ if (str === 'color') {
|
|
|
+ const oldform = this.$refs.ruleForm.baseForm
|
|
|
+ params = {...oldform}
|
|
|
+ params.fillColor = this.fillColor
|
|
|
+ params.strokeColor = this.strokeColor
|
|
|
+ }
|
|
|
if (!params.text) params.text = '标题示例'
|
|
|
if (this.mteStr === 'polygonAdd') {
|
|
|
if (!params.fillColor) {
|
|
|
@@ -69,12 +89,17 @@ export default {
|
|
|
params.color = '#fff'
|
|
|
}
|
|
|
this.formData = [
|
|
|
- { label: '文字内容', key: 'text', rules: 1},
|
|
|
- { label: '文字颜色', key: 'color', type: 'colorPicker', rules: 1},
|
|
|
+ { label: '内容', key: 'text', rules: 1},
|
|
|
+ { label: '颜色', key: 'color', type: 'colorPicker', rules: 1},
|
|
|
]
|
|
|
}
|
|
|
this.setDefaultValue(params)
|
|
|
},
|
|
|
+ colorHandle (item) {
|
|
|
+ this.fillColor = item.color
|
|
|
+ this.strokeColor = item.color
|
|
|
+ this.getDef('color')
|
|
|
+ },
|
|
|
close (str) {
|
|
|
if (str === 'confirm') {
|
|
|
this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
|
|
|
@@ -108,4 +133,22 @@ export default {
|
|
|
height: 300px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.scoped-color-quick {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .t {
|
|
|
+ color: #313131;
|
|
|
+ }
|
|
|
+ .op {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 40px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
