521 lines
16 KiB
Vue
521 lines
16 KiB
Vue
<template>
|
|
<view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'input' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_input">
|
|
<input :type="objInfo.config.inputType?objInfo.config.inputType:'text'" v-if="isEdit" :class="objInfo.value ? 'valueActive' : '' " @input="changeInput"
|
|
placeholder-style="color:#999;font-size:32rpx;" :value="objInfo.value"
|
|
:placeholder="!isEdit ? '' : objInfo.config.placeholder" />
|
|
<view class="valueActive" v-if="!isEdit">{{objInfo.value?objInfo.value:''}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'input-number' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_input">
|
|
<input type="" @input="changeInput" :class="objInfo.value ? 'valueActive' : '' "
|
|
placeholder-style="color:#999;font-size:32rpx;" :disabled="!isEdit" :value="objInfo.value"
|
|
:placeholder="!isEdit ? '' : objInfo.config.placeholder" />
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'select' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_right" @click="changeSelect">
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">
|
|
{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}
|
|
</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'Rate' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_right">
|
|
<view>
|
|
<u-rate @change="changeRate" :disabled="!isEdit" v-model="objInfo.value" active-color="#FFD049" inactive-color="#b2b2b2" :size="35" :gutter="10"></u-rate>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'TimePicker' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<picker @change="changeTime" @columnchange="changeColumn" mode="multiSelector" :disabled="!isEdit"
|
|
:range="dateTimeArray" :value="dateTime">
|
|
<view class="form_right">
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">
|
|
{{objInfo.value ? objInfo.value : objInfo.config.placeholder}}
|
|
</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<picker @change="changeAlipayTime" mode="date">
|
|
<view class="form_right" >
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">
|
|
{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}
|
|
</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="fllow_area" v-if="objInfo.component == 'textarea' && (objInfo.config.required == true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view class="area_head">
|
|
<text :class="objInfo.config.required == true ? 'b_color' : 'bo_color' ">*</text>
|
|
{{objInfo.config.label}}
|
|
</view>
|
|
<textarea
|
|
@input="changeTextarea"
|
|
maxlength="-1"
|
|
:auto-height="autoHeight"
|
|
:style="{height:height+'rpx'}"
|
|
:class="objInfo.value ? 'valueActive' : '' "
|
|
:value="objInfo.value ? objInfo.value : ''"
|
|
:disabled="!isEdit"
|
|
:placeholder="!isEdit ? '' : objInfo.config.placeholder"
|
|
placeholder-style="color:#999;font-size:32rpx;" />
|
|
</view>
|
|
<view class="fllow_form" v-if="objInfo.component == 'radio' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_right">
|
|
<radio-group @change="changeRadio" :disabled="!isEdit" class="labellist">
|
|
<label class="" class="labelbox" v-for="(item,index) in objInfo.config.content" :key="index">
|
|
<view>
|
|
<radio color="#008EFF" :disabled="!isEdit" :value="item.value"
|
|
:checked="item.value == objInfo.value" />
|
|
</view>
|
|
<view>{{item.value}}</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fllow_area" v-if="objInfo.component == 'checkbox' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view class="area_head"><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<checkbox-group @change="changeCheckbox" style="display: flex;justify-content: flex-start;flex-wrap: wrap;" :value="objInfo.value">
|
|
<label class="" style="margin-right:15rpx;margin-bottom:25rpx;display: block;" v-for="(item,index) in objInfo.config.content" :key="index">
|
|
<checkbox class="checkbox" color="#ff7800" :value="item.value" :checked="objInfo.value.indexOf(item.value) != -1" :disabled="!isEdit"/>
|
|
<span>{{item.value}}</span>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
|
|
<!-- #ifdef MP-WEIXIN || APP-PLUS-->
|
|
<view class="fllow_form" v-if="objInfo.component == 'Cascader' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<picker @change="changeAddress" :disabled="!isEdit" mode="region">
|
|
<view class="form_right">
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">
|
|
{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}
|
|
</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-ALIPAY || H5 -->
|
|
<view class="fllow_form" v-if="objInfo.component == 'Cascader' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<view class="form_right" v-if="!isEdit">
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
<view class="form_right" @click="show = true" v-else>
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<view class="fllow_form" v-if="objInfo.component == 'DatePicker' && (objInfo.config.required ==true || !isNotRequired) && !objInfo.config.addShow">
|
|
<view><text :class="objInfo.config.required ==true ? 'b_color' : 'bo_color' ">*</text>{{objInfo.config.label}}</view>
|
|
<picker mode="date" @change="changeDate" :disabled="!isEdit">
|
|
<view class="form_right">
|
|
<view :class="objInfo.value ? 'valueActive' : '' ">
|
|
{{!isEdit && !objInfo.value ? '' : objInfo.value ? objInfo.value : objInfo.config.placeholder}}
|
|
</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<!-- 上传图片 -->
|
|
<upload-image
|
|
v-if="objInfo.component == 'uploadImage' && (objInfo.config.required || !isNotRequired) && !objInfo.config.addShow"
|
|
:flag="objInfo.config.required"
|
|
:imgList="objInfo.value?objInfo.value:[]"
|
|
@uploadImg="uploadImg"
|
|
@delImg="delImg"
|
|
:title="objInfo.config.label"
|
|
:single="objInfo.config.maxnum"
|
|
:isEdit="isEdit"
|
|
:istype="istype"
|
|
></upload-image>
|
|
<!-- 上传文件 -->
|
|
<upload-file
|
|
v-if="objInfo.component == 'uploadFile' && (objInfo.config.required || !isNotRequired) && !objInfo.config.addShow"
|
|
:title="objInfo.config.label"
|
|
:flag="objInfo.config.required"
|
|
:fileList="objInfo.value?objInfo.value:[]"
|
|
@uploadFile="uploadFile"
|
|
@delFile="delFile"
|
|
:isEdit="isEdit"
|
|
>
|
|
</upload-file>
|
|
|
|
<tki-tree
|
|
ref="tkitree"
|
|
v-if="objInfo.component == 'select'"
|
|
:range="objInfo.config.content"
|
|
:multiple="objInfo.config.multiple"
|
|
:rangeKey="'label'"
|
|
:idKey="'nodeKey'"
|
|
confirmColor="#008EFF"
|
|
@confirm="selectTree"
|
|
/>
|
|
|
|
<!-- 位置选择 -->
|
|
<u-select
|
|
v-model="show"
|
|
mode="mutil-column-auto"
|
|
value-name="code"
|
|
label-name="name"
|
|
child-name="children"
|
|
:list="addressList"
|
|
@confirm="confirm"
|
|
></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
dateTimePicker,
|
|
getMonthDay
|
|
} from '@/util/dateTimePicker.js'
|
|
import tkiTree from "@/components/tki-tree/tki-tree.vue"
|
|
import uploadImage from "@/components/uploadImg/index.vue"
|
|
import uploadFile from '@/components/uploadFile/index.vue'
|
|
const citysJSON = require('@/util/address.js');
|
|
|
|
|
|
export default {
|
|
props: {
|
|
objInfo: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
isEdit: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
autoHeight: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
index: {
|
|
type:Number,
|
|
default: null
|
|
},
|
|
isNotRequired:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
istype:{
|
|
type:String,
|
|
default:'all'
|
|
}
|
|
},
|
|
components: {
|
|
tkiTree,
|
|
uploadImage,
|
|
uploadFile
|
|
},
|
|
data() {
|
|
return {
|
|
dateTimeArray: [],
|
|
dateArr: [],
|
|
dateTime: [],
|
|
//地址
|
|
addressList:[],
|
|
show:false,
|
|
}
|
|
},
|
|
//监听属性
|
|
computed: {
|
|
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
created() {
|
|
if (this.objInfo.component == 'TimePicker') {
|
|
this.initTime()
|
|
}
|
|
// #ifdef MP-ALIPAY || H5
|
|
if (this.objInfo.component == 'Cascader') {
|
|
this.addressList = citysJSON.citys
|
|
}
|
|
// #endif
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
changeInput(e) {
|
|
let name = this.objInfo.id
|
|
let value = e.detail.value
|
|
this.$emit('changeData', name, value, this.objInfo)
|
|
},
|
|
changeSelect() {
|
|
if (this.isEdit) {
|
|
this.$refs.tkitree._show()
|
|
}
|
|
},
|
|
selectTree(arr) {
|
|
console.log(arr,'选择')
|
|
let name = this.objInfo.id
|
|
if(arr.length > 0) {
|
|
console.log('123456')
|
|
let value = []
|
|
arr.forEach(ele=>{
|
|
value.push(ele.label)
|
|
})
|
|
this.$emit('changeData', name, value.join(','), this.objInfo)
|
|
}else{
|
|
this.$emit('changeData', name, '', this.objInfo)
|
|
}
|
|
},
|
|
changeRate(e) {
|
|
let value = e
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, value, this.objInfo)
|
|
},
|
|
changeTextarea(e) {
|
|
let name = this.objInfo.id
|
|
let value = e.detail.value
|
|
this.$emit('changeData', name, value, this.objInfo)
|
|
},
|
|
changeRadio(e) {
|
|
let value = e.detail.value
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, value, this.objInfo)
|
|
},
|
|
changeCheckbox(e) {
|
|
let name = this.objInfo.id
|
|
let value = e.detail.value
|
|
this.$emit('changeData', name, value.join(','), this.objInfo)
|
|
},
|
|
changeAddress(e) {
|
|
let firstr = e.detail.value[0]
|
|
if (firstr.indexOf('市') != -1) {
|
|
let index = firstr.indexOf('市')
|
|
firstr = firstr.substring(0, index)
|
|
}
|
|
let address = firstr + '/' + e.detail.value[1] + '/' + e.detail.value[2]
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, address, this.objInfo)
|
|
},
|
|
confirm(e) {
|
|
let address = e[0].label+e[1].label+e[2].label
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, address, this.objInfo)
|
|
},
|
|
changeDate(e) {
|
|
let date = e.detail.value
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, date, this.objInfo)
|
|
},
|
|
withData(param) {
|
|
return param < 10 ? '0' + param : '' + param;
|
|
},
|
|
initTime() {
|
|
// 获取完整的年月日 时分秒，以及默认显示的数组
|
|
let obj = dateTimePicker()
|
|
// 精确到分的处理，将数组的秒去掉
|
|
let lastArray = obj.dateTimeArray.pop();
|
|
let lastTime = obj.dateTime.pop();
|
|
let lastDate = obj.dateArray.pop()
|
|
this.dateTimeArray = obj.dateTimeArray
|
|
this.dateArr = obj.dateArray
|
|
this.dateTime = obj.dateTime
|
|
},
|
|
changeColumn(e) {
|
|
let index = e.detail.column
|
|
let value = e.detail.value
|
|
if (index == 1) {
|
|
let obj = dateTimePicker()
|
|
// 精确到分的处理，将数组的秒去掉
|
|
let lastArray = obj.dateTimeArray.pop();
|
|
let lastTime = obj.dateTime.pop();
|
|
let lastDate = obj.dateArray.pop()
|
|
this.dateTimeArray = obj.dateTimeArray
|
|
this.dateArr = obj.dateArray
|
|
this.dateTime = obj.dateTime
|
|
}
|
|
},
|
|
//下次联系时间
|
|
changeTime(e) {
|
|
let arr = e.detail.value
|
|
if (arr.includes(-1)) {
|
|
uni.showToast({
|
|
title: '请选择正确的时间',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let str = this.handleTime(arr)
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, str, this.objInfo,this.index)
|
|
},
|
|
changeAlipayTime(e) {
|
|
let name = this.objInfo.id
|
|
this.$emit('changeData', name, e.detail.value, this.objInfo)
|
|
},
|
|
|
|
handleTime(arr) {
|
|
let year = this.dateArr[0][arr[0]]
|
|
let month = this.dateArr[1][arr[1]]
|
|
let day = this.dateArr[2][arr[2]]
|
|
let hour = this.dateArr[3][arr[3]]
|
|
let minu = this.dateArr[4][arr[4]]
|
|
let str = year + '-' + month + '-' + day + ' ' + hour + ':' + minu
|
|
return str
|
|
},
|
|
//图片
|
|
uploadImg(obj){
|
|
let name = this.objInfo.id
|
|
let arr = this.objInfo.value?this.objInfo.value:[]
|
|
arr.push(obj)
|
|
this.$emit('changeData', name, arr, this.objInfo)
|
|
},
|
|
delImg(index) {
|
|
let name = this.objInfo.id
|
|
let arr = this.objInfo.value
|
|
arr.splice(index,1)
|
|
this.$emit('changeData', name, arr, this.objInfo)
|
|
},
|
|
//文件
|
|
uploadFile(obj) {
|
|
let name = this.objInfo.id
|
|
let arr = this.objInfo.value?this.objInfo.value:[]
|
|
arr.push(obj)
|
|
this.$emit('changeData', name, arr, this.objInfo)
|
|
},
|
|
delFile(index) {
|
|
let name = this.objInfo.id
|
|
let arr = this.objInfo.value
|
|
arr.splice(index,1)
|
|
this.$emit('changeData', name, arr, this.objInfo)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.b_color{
|
|
color: #f00;
|
|
}
|
|
.bo_color{
|
|
color: #ffffff;
|
|
}
|
|
.valueActive {
|
|
color: #333;
|
|
}
|
|
|
|
.labellist {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.labelbox {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
radio {
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
.sales_item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-bottom: 15rpx;
|
|
flex-wrap: wrap;
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.u-checkbox__icon {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.fllow_form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
padding: 30rpx 20rpx;
|
|
color: #999;
|
|
font-size: 32rpx;
|
|
:first-child {
|
|
flex-shrink: 0;
|
|
font-weight: 32rpx;
|
|
}
|
|
|
|
.form_right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:flex-end;
|
|
flex-wrap: wrap;
|
|
color: #999;
|
|
text-align: right;
|
|
font-weight: 32rpx;
|
|
}
|
|
|
|
.theme {
|
|
color: #5ca9fe;
|
|
}
|
|
|
|
text {
|
|
// color: #f00;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.form_input {
|
|
input {
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fllow_area {
|
|
background-color: #fff;
|
|
padding: 30rpx 20rpx;
|
|
padding-bottom: 30rpx;
|
|
color: #999;
|
|
font-size: 32rpx;
|
|
.area_head {
|
|
margin-bottom:24rpx;
|
|
}
|
|
textarea {
|
|
width: 80%;
|
|
height: 300rpx;
|
|
padding: 30rpx;
|
|
background: #f8f8f8;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|