Commit 97c5ce5f authored by Facius's avatar Facius
parents e4cb01f0 867a9c33
...@@ -4,7 +4,7 @@ export default [{ ...@@ -4,7 +4,7 @@ export default [{
"required": true, "required": true,
"fieldsTitle": "A字裙", "fieldsTitle": "A字裙",
"fieldsName": "name", "fieldsName": "name",
"fieldsType": "input", "fieldsType": "text",
"fieldsValue": "", "fieldsValue": "",
"key": "A字裙", "key": "A字裙",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg", "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
...@@ -64,7 +64,10 @@ export default [{ ...@@ -64,7 +64,10 @@ export default [{
"cat": 10 "cat": 10
}, },
{ {
"fieldsTitle": "妈妈装", "fieldsTitle": "多级选择",
"fieldsName": "mutiPicker",
"fieldsType": "mutipicker",
"required": true,
"key": "妈妈装", "key": "妈妈装",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg", "icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg",
"cat": 10 "cat": 10
......
<!-- ******************* 多选框 ******************* -->
<template> <template>
<view class="list"> <view class="list">
<view v-for="(item,index) in settings" :key="index" <view v-for="(item,index) in settings" :key="index"
......
<!-- ******************* 文件上传 ******************* -->
<template> <template>
<view class="file-box"> <view class="file-box">
<view class="u-flex" @click="selectUpload"> <view class="u-flex" @click="selectUpload">
......
<!-- ******************* 输入框 ******************* -->
<template>
<view>
<u-input v-model="dataValue" @input="valueChange" :type="type" />
</view>
</template>
<script>
import stringMixin from './stringMixin'
export default {
name: 'XhInput', // 新建 input
components: {},
mixins: [stringMixin],
props: {},
data() {
return {}
},
computed: {
type() {
if (this.item && this.item.fieldsType == 'password') {
return this.item.fieldsType
} else {
return 'text'
}
}
},
watch: {},
mounted() {},
methods: {}
}
</script>
<style>
</style>
<!-- ******************* 输入框 ******************* -->
<template> <template>
<view> <view>
<u-input v-model="dataValue" @input="valueChange" :type="type" /> <u-input v-model="dataValue" @input="valueChange" :type="type" />
......
<!-- ******************* 定位 ******************* -->
<template> <template>
<view class="list u-flex u-row-between"> <view class="list u-flex u-row-between">
<text class="required" v-if="item.required">*</text> <text class="required" v-if="item.required">*</text>
......
<!-- ******************* 单级/多级 选择 ******************* -->
<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:false,
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>
<!-- ******************* 单选框 ******************* -->
<template> <template>
<view class="list"> <view class="list">
<view v-for="(item,index) in settings" :key="index" :class="{'txt':true,'active':item===dataValue}" <view v-for="(item,index) in settings" :key="index" :class="{'txt':true,'active':item===dataValue}"
......
<!-- ******************* 扫码 ******************* -->
<template> <template>
<view class=""> <view class="">
<view class="u-flex"> <view class="u-flex">
......
<!-- ******************* 单个下拉选择 ******************* -->
<template> <template>
<view> <view>
<u-input v-model="dataValue" readOnly @click="show=true" type="select" /> <u-input v-model="dataValue" readOnly @click="show=true" type="select" />
......
...@@ -22,35 +22,44 @@ ...@@ -22,35 +22,44 @@
<view class="class-item" :key="groupIndex"> <view class="class-item" :key="groupIndex">
<view class="title">{{groupItem.groupName}}</view> <view class="title">{{groupItem.groupName}}</view>
<view class="class-bd"> <view class="class-bd">
<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex" <u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
label-position="top" label-position="top" :prop="item.fieldsName">
:prop="item.fieldsName"> <view class="label" v-if="item.fieldsType!=='location'">
<view class="label" v-if="toLowerCase(item.fieldsType)!=='location'" @click="nextStep(item)">
<text class="required" v-if="item.required">*</text> <text class="required" v-if="item.required">*</text>
{{item.fieldsTitle}} {{item.fieldsTitle}}
</view> </view>
<template v-if="item.fieldsType"> <template v-if="item.fieldsType">
<xh-input v-if="toLowerCase(item.fieldsType)==='input'" :groupIndex="groupIndex" <xh-input v-if="typeToComponentType(item.fieldsType)==='input'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
</xh-input> </xh-input>
<xh-radio v-else-if="toLowerCase(item.fieldsType)==='radio'" :groupIndex="groupIndex" <xh-radio v-else-if="typeToComponentType(item.fieldsType)==='radio'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-radio> </xh-radio>
<xh-checkbox v-else-if="toLowerCase(item.fieldsType)==='checkbox'" :groupIndex="groupIndex" <xh-checkbox v-else-if="typeToComponentType(item.fieldsType)==='checkbox'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-checkbox> </xh-checkbox>
<xh-select v-else-if="toLowerCase(item.fieldsType)==='select'" :groupIndex="groupIndex" <xh-select v-else-if="typeToComponentType(item.fieldsType)==='select'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-select> </xh-select>
<xh-files v-else-if="toLowerCase(item.fieldsType)==='file'" :groupIndex="groupIndex" <xh-files v-else-if="typeToComponentType(item.fieldsType)==='file'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-files> </xh-files>
<xh-location v-else-if="toLowerCase(item.fieldsType)==='location'" :groupIndex="groupIndex" <xh-location v-else-if="typeToComponentType(item.fieldsType)==='location'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-location> </xh-location>
<xh-scan v-else-if="toLowerCase(item.fieldsType)==='scan'" :groupIndex="groupIndex" <xh-scan v-else-if="typeToComponentType(item.fieldsType)==='scan'"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange"> :groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-scan> </xh-scan>
<xh-picker v-else-if="typeToComponentType(item.fieldsType)==='picker'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item"
@value-change="fieldValueChange">
</xh-picker>
</template> </template>
</u-form-item> </u-form-item>
</view> </view>
...@@ -71,6 +80,7 @@ ...@@ -71,6 +80,7 @@
import XhFiles from '@/components/createCom/XhFiles.vue' import XhFiles from '@/components/createCom/XhFiles.vue'
import XhLocation from '@/components/createCom/XhLocation.vue' import XhLocation from '@/components/createCom/XhLocation.vue'
import XhScan from '@/components/createCom/XhScan.vue' import XhScan from '@/components/createCom/XhScan.vue'
import XhPicker from '@/components/createCom/XhPicker.vue'
// import XhRadio from '@/components/createCom/XhRadio.vue' // import XhRadio from '@/components/createCom/XhRadio.vue'
export default { export default {
data() { data() {
...@@ -125,7 +135,8 @@ ...@@ -125,7 +135,8 @@
XhSelect, XhSelect,
XhFiles, XhFiles,
XhLocation, XhLocation,
XhScan XhScan,
XhPicker
// formCom // formCom
}, },
created() { created() {
...@@ -160,16 +171,41 @@ ...@@ -160,16 +171,41 @@
// 下一步 // 下一步
console.log(item, 'item') console.log(item, 'item')
}, },
fieldTypeStatus(type){ typeToComponentType(type) {
let typeArr = ['input','radio','checkbox','select','file'] // 将fieldType类型统一转换为公共组件判定类型
let fieldsType = type.toLocaleLowerCase() let formType = ''
let flag = false type = type.toLocaleLowerCase()
flag = typeArr.indexOf(fieldsType)>=0 switch (type) {
return flag case 'text':
}, case 'password':
toLowerCase(str){ case 'textarea':
str = str || '' case 'number':
return str.toLocaleLowerCase() formType = 'input'
break
case 'select':
formType = 'select'
break
case 'checkbox':
formType = 'checkbox'
break
case 'file':
formType = 'file'
break
case 'location':
formType = 'location'
break
case 'scan':
formType = 'scan'
break
case 'picker':
case 'mutipicker':
formType = 'picker'
break
// case 'file':
// formType = 'XhFiles'
// break
}
return formType
}, },
// ------------------------- 以下方法为展示滚动切换 ------------------------- // ------------------------- 以下方法为展示滚动切换 -------------------------
// 点击左边的栏目切换 // 点击左边的栏目切换
......
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