代码调整
This commit is contained in:
joylink_cuiweidong
parent
dcefdfab33
commit
c9b5c908a0
@ -231,7 +231,31 @@ export const elementConst = {
|
||||
}
|
||||
],
|
||||
shape: [
|
||||
|
||||
{
|
||||
prop: 'points',
|
||||
label: '坐标集合',
|
||||
type: types.Points,
|
||||
precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: [[0, 0], [100, 100], [100, 200]],
|
||||
description: '每个元素是一个横纵坐标的数组'
|
||||
},
|
||||
{
|
||||
prop: 'smooth',
|
||||
label: '圆滑程度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -255,7 +279,31 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{
|
||||
prop: 'points',
|
||||
label: '坐标集合',
|
||||
type: types.Points,
|
||||
precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: [[0, 0], [100, 100], [100, 200]],
|
||||
description: '每个元素是一个横纵坐标的数组'
|
||||
},
|
||||
{
|
||||
prop: 'smooth',
|
||||
label: '圆滑程度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@ -7,4 +7,4 @@ export default {
|
||||
Point: 'Point',
|
||||
Points: 'Points',
|
||||
NumberArray: 'NumberArray'
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="110px">
|
||||
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
|
||||
<div class="styleGroupName">
|
||||
{{ styleGroup.name }}
|
||||
@ -45,6 +45,7 @@
|
||||
v-for="count in item.length"
|
||||
:key="count"
|
||||
v-model="formModel[styleGroup.code][item.prop][count-1]"
|
||||
style="margin-left:5px"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
@ -52,12 +53,31 @@
|
||||
:precision="item.precision"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-else-if="checkFieldType(item, 'Color')">
|
||||
<el-color-picker
|
||||
v-model="formModel[styleGroup.code][item.prop]"
|
||||
size="small"
|
||||
<template v-else-if="checkFieldType(item, 'Points')">
|
||||
<div class="point-section">
|
||||
<template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
|
||||
<div :key="j" style="overflow: hidden;">
|
||||
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
|
||||
<span class="pointSplice">, </span>
|
||||
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
circle
|
||||
class="point-button"
|
||||
@click="addPoint(j,formModel[styleGroup.code],item.prop)"
|
||||
/>
|
||||
</template> -->
|
||||
<el-button
|
||||
icon="el-icon-minus"
|
||||
:disabled="j <3"
|
||||
circle
|
||||
class="point-button"
|
||||
style="margin-left: 4px;"
|
||||
@click="delPoint(j,formModel[styleGroup.code],item.prop)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
@ -92,6 +112,20 @@ export default {
|
||||
methods: {
|
||||
checkFieldType(field, type) {
|
||||
return field.type === type;
|
||||
},
|
||||
changeNumber(type, index, form, prop) {
|
||||
if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) {
|
||||
const newForm = Object.assign([], form[prop]);
|
||||
newForm[index][type] = parseFloat(form[prop][index][type]) || 0;
|
||||
this.$set(form, prop, newForm);
|
||||
}
|
||||
},
|
||||
addPoint(index, form, prop) {
|
||||
const data = [0, 0];
|
||||
form[prop].splice(index + 1, 0, data);
|
||||
},
|
||||
delPoint(index, form, prop) {
|
||||
form[prop].splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -101,5 +135,13 @@ export default {
|
||||
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
|
||||
.formName .el-form-item__label {font-size:14px;}
|
||||
.formName.el-form-item {margin-bottom:25px}
|
||||
.point-section {float:left;display: inline-block;}
|
||||
.pointSplice{display: inline-block;margin-left: 4px;margin-right:4px;line-height: 28px;font-size:14px}
|
||||
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
|
||||
.point-button {width:28px;height:28px;display:inline-block;margin-left:5px;text-align:center;padding:0px;}
|
||||
// align-items: center;justify-content: center;
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.composeForm .el-form-item__label{line-height:20px;}
|
||||
.composeForm .el-form-item__content{font-size: 0px;}
|
||||
</style>
|
||||
|
||||
@ -117,13 +117,13 @@ export default {
|
||||
|
||||
},
|
||||
onSubmit() {
|
||||
let that=this;
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
let newModel=Object.assign({},formModel.base);
|
||||
const formModel = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
const newModel = Object.assign({}, formModel.base);
|
||||
newModel.type = that.enabledTab;
|
||||
newModel.code = utils.getUID()
|
||||
newModel.code = utils.getUID();
|
||||
newModel.position = [0, 0];
|
||||
newModel.scale = [1, 1];
|
||||
newModel.style = Object.assign({}, formModel.style);
|
||||
@ -133,26 +133,26 @@ export default {
|
||||
});
|
||||
},
|
||||
onModify() {
|
||||
let that=this;
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
const model = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
|
||||
}
|
||||
});
|
||||
},
|
||||
onDelete() {
|
||||
let that=this;
|
||||
const that = this;
|
||||
that.$refs['dataform' + that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model = that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
const model = that.$refs['dataform' + that.enabledTab][0].formModel;
|
||||
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
|
||||
}
|
||||
});
|
||||
},
|
||||
initPage() {
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -182,11 +182,11 @@ export default {
|
||||
}
|
||||
|
||||
.right-card{
|
||||
width: 470px;
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(470px);
|
||||
transform: translateX(550px);
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user