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>
|