Skip to content

S
self-support
Commit f911e129 authored by 李俊赕's avatar 李俊赕
Browse files
Options

多级联动组件

parent 4ba29899
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 22 deletions
src/common/classify.data.js
View file @ f911e129
......@@ -64,7 +64,10 @@ export default [{
"cat": 10
},
{
"fieldsTitle": "妈妈装",
"fieldsTitle": "多级选择",
"fieldsName": "mutiPicker",
"fieldsType": "mutipicker",
"required": true,
"key": "妈妈装",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg",
"cat": 10
......
src/components/createCom/XhPicker.vue 0 → 100644
View file @ f911e129
<template>
<view class="picker-box">
<view class="u-flex u-row-between" @click="openPicker">
<view class="txt u-flex-1">{{item.fieldsTitle}}</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view>
<u-picker v-model="showPicker" :rangeKey="rangeKey" @columnchange="columnchange" mode="multiSelector" @confirm="pickerConfirm" :default-selector='[0, 1]' :range="settings"></u-picker>
</view>
</template>
<script>
import objMixin from './objMixin'
export default {
name: 'XhPicker',
components: {},
mixins: [objMixin],
props: {
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
defaultSelector: {
type: Array,
default() {
return [0];
}
},
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
rangeKey: {
type: String,
default: ''
},
},
filters:{},
data() {
return {
showPicker:true,
settings:[
[1, 2, 3],
[4, 5, 6]
]
}
},
computed: {
// settings() {
// let setting = [
// [1, 2, 3],
// [4, 5, 6]
// ]
// return setting
// // return this.item.settings || []
// }
},
watch: {},
mounted() {},
methods: {
openPicker(){
this.showPicker = true
},
pickerConfirm(data){
let result = []
data&&data.map((item,index)=>{
let val = this.settings[index][item]
result.push(val)
})
this.dataValue = result
this.valueChange(result)
console.log(result,'result')
},
columnchange(data){
console.log(data,'data')
// 树列改变时进行联动操作
const {column ,index} = data
let arr = [9,10,50]
this.settings.splice(column+1,1,arr)
console.log(this.settings,'this.settings')
},
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/order/complete.vue
View file @ f911e129
......@@ -23,9 +23,9 @@
<view class="title">{{groupItem.groupName}}</view>
<view class="class-bd">
<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
label-position="top"
:prop="item.fieldsName">
<view class="label" v-if="toLowerCase(item.fieldsType)!=='location'" @click="nextStep(item)">
label-position="top" :prop="item.fieldsName">
<view class="label" v-if="toLowerCase(item.fieldsType)!=='location'"
@click="nextStep(item)">
<text class="required" v-if="item.required">*</text>
{{item.fieldsTitle}}
</view>
......@@ -33,24 +33,34 @@
<xh-input v-if="toLowerCase(item.fieldsType)==='input'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
</xh-input>
<xh-radio v-else-if="toLowerCase(item.fieldsType)==='radio'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-radio v-else-if="toLowerCase(item.fieldsType)==='radio'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-radio>
<xh-checkbox v-else-if="toLowerCase(item.fieldsType)==='checkbox'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-checkbox v-else-if="toLowerCase(item.fieldsType)==='checkbox'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-checkbox>
<xh-select v-else-if="toLowerCase(item.fieldsType)==='select'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-select v-else-if="toLowerCase(item.fieldsType)==='select'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-select>
<xh-files v-else-if="toLowerCase(item.fieldsType)==='file'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-files v-else-if="toLowerCase(item.fieldsType)==='file'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-files>
<xh-location v-else-if="toLowerCase(item.fieldsType)==='location'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-location v-else-if="toLowerCase(item.fieldsType)==='location'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-location>
<xh-scan v-else-if="toLowerCase(item.fieldsType)==='scan'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
<xh-scan v-else-if="toLowerCase(item.fieldsType)==='scan'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-scan>
<xh-picker v-else-if="toLowerCase(item.fieldsType)==='mutipicker'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-picker>
</template>
</u-form-item>
</view>
......@@ -71,6 +81,7 @@
import XhFiles from '@/components/createCom/XhFiles.vue'
import XhLocation from '@/components/createCom/XhLocation.vue'
import XhScan from '@/components/createCom/XhScan.vue'
import XhPicker from '@/components/createCom/XhPicker.vue'
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
......@@ -125,7 +136,8 @@
XhSelect,
XhFiles,
XhLocation,
XhScan
XhScan,
XhPicker
// formCom
},
created() {
......@@ -160,14 +172,14 @@
// 下一步
console.log(item, 'item')
},
fieldTypeStatus(type){
let typeArr = ['input','radio','checkbox','select','file']
fieldTypeStatus(type) {
let typeArr = ['input', 'radio', 'checkbox', 'select', 'file']
let fieldsType = type.toLocaleLowerCase()
let flag = false
flag = typeArr.indexOf(fieldsType)>=0
flag = typeArr.indexOf(fieldsType) >= 0
return flag
},
toLowerCase(str){
toLowerCase(str) {
str = str || ''
return str.toLocaleLowerCase()
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment