438 lines
14 KiB
Vue
438 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<!-- type:text -->
|
||
<view class="input_container" v-if="'text'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<input :disabled="!define.disabled" class="input_" :class="{'input_disabled' : !define.disabled}" type="text" :placeholder="define.placeholder" v-model="fieldSource[define.fieldName]" >
|
||
</view>
|
||
</view>
|
||
<!-- type:number -->
|
||
<view class="input_container" v-if="'number'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<input :disabled="!define.disabled" class="input_" :class="{'input_disabled' : !define.disabled}" type="number" :placeholder="define.placeholder" v-model.number="fieldSource[define.fieldName]" >
|
||
</view>
|
||
</view>
|
||
<!-- type:date -->
|
||
<view class="input_container" v-else-if="'date'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view class="uni-list-cell-db">
|
||
<picker class="picker_" mode="date" :value="date" :disabled="!define.disabled" :start="define.start" :end="define.end" :fields="define.fields" @change="bindDateChange">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]">
|
||
</picker>
|
||
<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- type:time -->
|
||
<view class="input_container" v-else-if="'time'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view class="uni-list-cell-db">
|
||
<picker class="picker_" mode="time" :value="time" :disabled="!define.disabled" start="00:00" end="23:59" @change="bindTimeChange">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
|
||
</picker>
|
||
<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- type:textarea -->
|
||
<view class="textarea_container" v-else-if="'textarea'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="textarea_out" :class="[{'isrequired':define.required}]">
|
||
<textarea class="textarea_" :class="{'input_disabled' : !define.disabled}" :disabled="!define.disabled" :placeholder="define.placeholder" v-model="fieldSource[define.fieldName]"></textarea>
|
||
</view>
|
||
</view>
|
||
<!-- type:selector -->
|
||
<view class="input_container" v-else-if="'selector'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view class="uni-list-cell-db">
|
||
<picker class="picker_" mode="selector" :disabled="!define.disabled" :value="selectorValue" :range="define.dataSource" @change="bindPickerChange">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
|
||
</picker>
|
||
<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- type:id-selector -->
|
||
<view class="input_container" v-else-if="'id-selector'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view class="uni-list-cell-db">
|
||
<picker class="picker_" mode="selector" :disabled="!define.disabled" :value="idSelectValue" :range="define.dataSource" :range-key="define.displayFieldName" @change="bindIdPickerChange">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" :value="idSelectText">
|
||
</picker>
|
||
<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- type:multi-selector ps：暂时不用 -->
|
||
<view class="input_container" v-else-if="'multi-selector'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view class="uni-list-cell-db">
|
||
<picker class="picker_" mode="multiSelector" :disabled="!define.disabled" :value="mutilSelectValue" :range="define.dataSource" @change="bindPickerChangeMulti">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" type="text" disabled="false" v-model="fieldSource[define.fieldName]">
|
||
</picker>
|
||
<uni-icons type="arrowdown" class="icon_dowm" color="#333" size="16"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- type:kd-vlookup-edit -->
|
||
<view class="input_container" v-else-if="'kd-vlookup-edit'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view @click="kdVlookupEdit_show_search(define.disabled)">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
|
||
<view class="input_search" >
|
||
<uni-icons type="search" color="#bbb" size="20" style="display: block;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="clear" color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<!-- type:kd-vlookup-scan -->
|
||
<view class="input_container" v-else-if="'kd-vlookup-scan'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view @click="kdVlookupEdit_show_scan(define.disabled)">
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
|
||
<view class="input_search" >
|
||
<uni-icons type="scan" color="#bbb" size="20" style="display: block;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="clear" color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<!-- type:kd-vlookup-scan-edit -->
|
||
<view class="input_container" v-else-if="'kd-vlookup-scan-edit'===define.type">
|
||
<view class="name_">{{define.title}}</view>
|
||
<view class="input_out" :class="[{'isrequired':define.required}]">
|
||
<view >
|
||
<input class="input_" :class="{'input_disabled' : !define.disabled}" disabled="false" type="text" v-model="fieldSource[define.fieldName]" style="padding-right: 64px;" :placeholder="define.placeholder">
|
||
<view class="input_search1" @click="kdVlookupEdit_show_search(define.disabled)">
|
||
<uni-icons type="search" color="#bbb" size="20" style="display: block;"></uni-icons>
|
||
</view>
|
||
<view class="input_search" @click="kdVlookupEdit_show_scan(define.disabled)">
|
||
<uni-icons type="scan" color="#bbb" size="20" style="display: block;"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="clear" color="#bbb" size="20" class="clearinput" v-if="fieldSource[define.fieldName]!=''&&define.disabled&&define.canClear" @click="clear_input()"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mysearchlist" style="z-index: 10000;">
|
||
<xinsoft-search-list ref="mysearchlist"
|
||
:singleRow="define.singleRow"
|
||
:url_="define.url"
|
||
:form_id="define.formId"
|
||
:fieldName="define.showFields"
|
||
:orderStr="define.orderStr"
|
||
:showsearch.sync="kdVlookupEditShowSearch"
|
||
:itemInfo_.sync="kdVlookupEditValue">
|
||
</xinsoft-search-list>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import xinsoftSearchList from '@/components/xinsoft-search-list/xinsoft-search-list.vue'
|
||
import uniIcons from '@/components/uni-icons/uni-icons.vue'
|
||
export default {
|
||
name: 'xinsoft-form-input',
|
||
components: {
|
||
// xinsoftSearchList,
|
||
uniIcons
|
||
},
|
||
props: {
|
||
itemDefine: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
bindSource: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true
|
||
})
|
||
|
||
return {
|
||
define: this.itemDefine,
|
||
fieldSource: this.bindSource,
|
||
date: currentDate,
|
||
time: '00:00',
|
||
selectorValue:'',
|
||
idSelectValue:this.bindSource[this.itemDefine.fieldName],
|
||
idSelectText:this.bindSource[this.itemDefine.fieldText],
|
||
mutilSelectValue:[],
|
||
// kdVlookupEditValue:[],
|
||
// kdVlookupEditText:"",
|
||
// kdVlookupEditShowSearch:false
|
||
}
|
||
},
|
||
mounted() {
|
||
//如果为日期类型，则默认赋值当天日期
|
||
if(this.define.type === 'date') {
|
||
this.fieldSource[this.define.fieldName] = this.date
|
||
}
|
||
},
|
||
watch: {
|
||
fieldSource: {
|
||
handler: function(newVal, oldVal) {
|
||
this.$emit('update:bindSource', newVal)
|
||
},
|
||
deep: true
|
||
},
|
||
// kdVlookupEditValue: {
|
||
// handler: function(newVal, oldVal) {
|
||
// this.fieldSource[this.define.fieldName] = newVal[this.define.fieldIndex[0]]
|
||
// this.fieldSource[this.define.fieldText] = newVal[this.define.fieldIndex[1]]
|
||
// this.kdVlookupEditText = newVal[newVal[this.define.fieldIndex[1]]]
|
||
// },
|
||
// deep: true
|
||
// },
|
||
bindSource: {
|
||
handler: function(newVal, oldVal) {
|
||
this.fieldSource = newVal
|
||
if(this.define.type === 'id-selector') {
|
||
this.idSelectValue = newVal[this.define.fieldName]
|
||
this.idSelectText = newVal[this.define.fieldText]
|
||
}
|
||
|
||
if(this.define.type === 'kd-vlookup-edit') {
|
||
// this.kdVlookupEditText = newVal[this.define.fieldText]
|
||
}
|
||
|
||
if(this.define.type === 'date') {
|
||
this.fieldSource[this.define.fieldName] = this.date
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
bindDateChange(e) {
|
||
this.fieldSource[this.define.fieldName] = this.date = e.target.value
|
||
},
|
||
bindTimeChange(e) {
|
||
this.fieldSource[this.define.fieldName] = this.time = e.target.value
|
||
},
|
||
bindPickerChange(e) {
|
||
this.selectorValue = e.target.value
|
||
this.fieldSource[this.define.fieldName] = this.define.dataSource[e.target.value]
|
||
},
|
||
bindIdPickerChange(e) {
|
||
this.idSelectText = this.define.dataSource[e.target.value][this.define.displayFieldName]
|
||
this.idSelectValue = e.target.value
|
||
this.fieldSource[this.define.fieldName] = this.define.dataSource[e.target.value][this.define.valueFieldName]
|
||
this.fieldSource[this.define.fieldText] = this.define.dataSource[e.target.value][this.define.displayFieldName]
|
||
},
|
||
bindPickerChangeMulti(e) {
|
||
this.mutilSelectValue = e.target.value
|
||
let selectArray = []
|
||
e.target.value.forEach((x) => {
|
||
selectArray.push(this.define.dataSource[x])
|
||
})
|
||
this.fieldSource[this.define.fieldName] = selectArray
|
||
},
|
||
//点击搜索
|
||
kdVlookupEdit_show_search(isDisabled) {
|
||
uni.hideKeyboard()
|
||
if(!isDisabled){//不可编辑
|
||
return
|
||
}
|
||
this.$emit('toSearch')
|
||
// this.kdVlookupEditShowSearch = true;
|
||
// this.$refs.mysearchlist.set_request('');
|
||
},
|
||
//点击扫码
|
||
kdVlookupEdit_show_scan(isDisabled) {
|
||
uni.hideKeyboard()
|
||
if(!isDisabled){//不可编辑
|
||
return
|
||
}
|
||
this.$emit('toScan')
|
||
// this.kdVlookupEditShowSearch = true;
|
||
// this.$refs.mysearchlist.set_request('');
|
||
},
|
||
changeSearch() {
|
||
this.$nextTick(function() {
|
||
this.$emit("update:value_", this.search_value)
|
||
})
|
||
},
|
||
clear_input() {
|
||
// this.kdVlookupEditText = '';
|
||
this.fieldSource[this.define.fieldName] = ''
|
||
// this.fieldSource[this.define.fieldText] = ''
|
||
},
|
||
//获取当前日期，格式yyyy-mm-dd
|
||
getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
if (type === 'start') {
|
||
year = year - 60;
|
||
} else if (type === 'end') {
|
||
year = year + 2;
|
||
}
|
||
month = month > 9 ? month : '0' + month;;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mysearchlist {
|
||
z-index: 1;
|
||
}
|
||
|
||
.input_container,
|
||
.textarea_container {
|
||
z-index: 0;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-height: 46px;
|
||
padding: 0 4%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.textarea_container {
|
||
min-height: 100px;
|
||
|
||
}
|
||
|
||
.input_container:after,
|
||
.textarea_container:after {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 1px;
|
||
content: '';
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #e6e6e6;
|
||
}
|
||
|
||
.name_ {
|
||
display: flex;
|
||
top: 0;
|
||
width: 30%;
|
||
line-height: 20px;
|
||
padding: 13px 0;
|
||
font-size: 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.input_out,
|
||
.textarea_out {
|
||
position: relative;
|
||
width: 70%;
|
||
display: flex;
|
||
height:36px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 1px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.input_,
|
||
.textarea_ {
|
||
position: absolute;
|
||
font-size: 15px;
|
||
width: 100%;
|
||
display: flex;
|
||
height: 34px;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
background-color: #fff;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.input_disabled{
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.textarea_,
|
||
.textarea_out {
|
||
height: 88px;
|
||
}
|
||
.textarea_{
|
||
height: 86px;
|
||
|
||
}
|
||
.input_search {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 40px;
|
||
height: 35px;
|
||
right: 0;
|
||
top: 0;
|
||
border-left: 1px solid #ccc;
|
||
}
|
||
.input_search1 {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 40px;
|
||
height: 35px;
|
||
right: 18%;
|
||
top: 0;
|
||
border-left: 1px solid #ccc;
|
||
}
|
||
|
||
.clearinput {
|
||
position: absolute;
|
||
right: 42px;
|
||
height: 40px;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.uni-list-cell-db {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.isrequired:before {
|
||
position: absolute;
|
||
content: "*";
|
||
font-size: 15px;
|
||
left: -10px;
|
||
top: 6px;
|
||
color: red;
|
||
}
|
||
|
||
.icon_dowm {
|
||
position: absolute;
|
||
display: block;
|
||
right: 8px;
|
||
bottom: 10px;
|
||
line-height: 16px;
|
||
|
||
}
|
||
</style>
|