abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
lvxudong 2023-11-22 18:23:06 +08:00
parent fce14ea749
commit 9148e46211
1 changed files with 103 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/Options/index.vue
View File

@ -1,15 +1,11 @@
<!-- 档位配置 插件 -->
<template>
<el-table-column :label="`选项${index + 1}：`" v-for="(item, index) in posNum" :key="item" class="m-t-20"
:prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue" align="center" prop="options">
<el-input
:min="0"
:formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')"
placeholder="请填写" :disabled="isSee" class="w-200"
v-model="form.value.options[index]"
/>
<v-image v-if="!isSee&&posNum<maxPosLen" :src="addImg" class="img-btn" @click="changePos(index,'add')"/>
<v-image v-if="!isSee&&posNum>1" :src="delImg" @click="changePos(index,'del')" class="img-btn"/>
:prop="`gearValue[${index}]`" :rules="ruleValidate" align="center" prop="options">
<el-input :min="0" :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')" placeholder="请填写"
:disabled="isSee" class="w-200" v-model="form.value.options[index]" />
<v-image v-if="!isSee && posNum < maxPosLen" :src="addImg" class="img-btn" @click="changePos(index, 'add')" />
<v-image v-if="!isSee && posNum > 1" :src="delImg" @click="changePos(index, 'del')" class="img-btn" />
</el-table-column>
</template>
@ -18,114 +14,112 @@
import addImg from '@/assets/images/add-icon.png'
import delImg from '@/assets/images/del-icon.png'
export default {
props: {
enumData: {
type: Object,
default: null
},
isSee: {
type: Boolean,
default: false
},
// label宽度
configWidth: {
type: Number,
default: 120
}
props: {
enumData: {
type: Object,
default: null
},
data() {
return {
addImg: addImg,
delImg: delImg,
maxPosLen: 20, // 最多20档
posNum: 1, // 当前档位数量
formData: {
gearValue: [null] // null:为了不让显示默认1
},
ruleValidate: {
gearValue: [
{ required: true, message: '请填写档位值' }
]
}
}
isSee: {
type: Boolean,
default: false
},
methods: {
// 提交的校验
handleValidate() {
return new Promise((resolve, reject) => {
this.$refs.formPosition.validate((valid) => {
if (valid) {
// 数据转换为接口所需要的形式
let obj = {};
if (this.formData.gearValue) {
if (this.formData.gearValue.length[0] === null) {
obj.gearValue = null;
} else {
obj.gearValue = this.formData.gearValue.join();
}
} else {
obj.gearValue = null;
}
resolve(obj)
}
})
})
},
// 增删档位
changePos(idx, actType) {
if (actType === 'add') {
if (this.formData.gearValue.length < 20) {
this.posNum++;
this.formData.gearValue.splice(idx + 1, 0, null);
}
} else {
this.formData.gearValue.splice(idx, 1);
this.posNum--;
}
},
// 初始化(在父组件中调用)
initData(obj) {
if (obj.gearValue) {
if (obj.gearValue instanceof Array) {
this.formData.gearValue = obj.gearValue;
} else if (typeof obj.gearValue === 'string') {
let arr = [];
if (obj.gearValue.indexOf(';') !== -1) {
// 多个-接口传回来的（接口返回的是;分割）
arr = obj.gearValue.split(';');
} else {
// 多个-正在编辑中 / 只有一个
arr = obj.gearValue.split(',');
}
this.formData.gearValue = arr.map(item => {
return Number(item);
})
}
} else {
this.formData.gearValue = [null];
}
this.posNum = this.formData.gearValue.length;
},
// 重置表单(在父组件中调用)
resetForm() {
this.$refs.formPosition.resetFields();
this.formData.gearValue = [null];
}
// label宽度
configWidth: {
type: Number,
default: 120
}
},
data() {
return {
addImg: addImg,
delImg: delImg,
maxPosLen: 20, // 最多20档
posNum: 1, // 当前档位数量
formData: {
gearValue: [null] // null:为了不让显示默认1
},
ruleValidate: {
required: true, message: '请填写选项'
}
}
},
methods: {
// 提交的校验
handleValidate() {
return new Promise((resolve, reject) => {
this.$refs.formPosition.validate((valid) => {
if (valid) {
// 数据转换为接口所需要的形式
let obj = {};
if (this.formData.gearValue) {
if (this.formData.gearValue.length[0] === null) {
obj.gearValue = null;
} else {
obj.gearValue = this.formData.gearValue.join();
}
} else {
obj.gearValue = null;
}
resolve(obj)
}
})
})
},
// 增删档位
changePos(idx, actType) {
if (actType === 'add') {
if (this.formData.gearValue.length < 20) {
this.posNum++;
this.formData.gearValue.splice(idx + 1, 0, null);
}
} else {
this.formData.gearValue.splice(idx, 1);
this.posNum--;
}
},
// 初始化(在父组件中调用)
initData(obj) {
if (obj.gearValue) {
if (obj.gearValue instanceof Array) {
this.formData.gearValue = obj.gearValue;
} else if (typeof obj.gearValue === 'string') {
let arr = [];
if (obj.gearValue.indexOf(';') !== -1) {
// 多个-接口传回来的（接口返回的是;分割）
arr = obj.gearValue.split(';');
} else {
// 多个-正在编辑中 / 只有一个
arr = obj.gearValue.split(',');
}
this.formData.gearValue = arr.map(item => {
return Number(item);
})
}
} else {
this.formData.gearValue = [null];
}
this.posNum = this.formData.gearValue.length;
},
// 重置表单(在父组件中调用)
resetForm() {
this.$refs.formPosition.resetFields();
this.formData.gearValue = [null];
}
}
}
</script>
<style scoped>
.img-btn {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
width: 20px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
width: 20px;
cursor: pointer;
}
</style>