1.JDate添加YYYY-DD,YYYY格式(待完善)

2.j-select-multiple的搜索功能优化
3.j-tree-select已改为由title搜索,搜索全部树的数据需完善目前只能搜索第一级
This commit is contained in:
yaoyanan
2021-03-17 18:38:25 +08:00
parent d5166e711b
commit 3f8f9a679f
4 changed files with 99 additions and 33 deletions
+76 -13
View File
@@ -1,14 +1,50 @@
<template> <template>
<a-date-picker <div>
dropdownClassName="j-date-picker" <!--YYYY-MM-DD HH:mm:ss-->
:disabled="disabled || readOnly" <a-date-picker
:placeholder="placeholder" v-if="showType === 'time'"
@change="handleDateChange" dropdownClassName="j-date-picker"
:value="momVal" :disabled="disabled || readOnly"
:showTime="showTime" :placeholder="placeholder"
:format="dateFormat" @change="handleDateChange"
:getCalendarContainer="getCalendarContainer" :value="momVal"
/> :showTime="true"
:format="dateFormat"
:getCalendarContainer="getCalendarContainer"
/>
<!--YYYY-MM-DD-->
<a-date-picker
v-if="showType === 'day'"
dropdownClassName="j-date-picker"
:disabled="disabled || readOnly"
:placeholder="placeholder"
@change="handleDateChange"
:value="momVal"
:showTime="false"
:format="dateFormat"
:getCalendarContainer="getCalendarContainer"
/>
<!--YYYY-MM-->
<a-month-picker
v-if="showType === 'month'"
:placeholder="placeholder"
:value="momVal"
:disabled="disabled || readOnly"
:format="dateFormat"
@change="handleMonthChange"
/>
<!--YYYY-->
<a-date-picker
v-if="showType === 'year'"
mode="year"
:placeholder="placeholder"
:format="dateFormat"
v-model="addForm.all_plan_one"
:open='yearShowOne'
@openChange="openChangeOne"
@panelChange="panelChangeOne"
@change="handleYearChange"/>
</div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
@@ -45,10 +81,11 @@
required: false, required: false,
default: false default: false
}, },
showTime:{ //控制选择时分秒
type: Boolean, showType:{
type: String,
required: false, required: false,
default: false default:'time'
}, },
getCalendarContainer: { getCalendarContainer: {
type: Function, type: Function,
@@ -58,10 +95,17 @@
data () { data () {
let dateStr = this.value; let dateStr = this.value;
return { return {
yearShowOne:false, //控制年份模态框的显示与否
addForm:{
all_plan_one:null,//开始年限
},
decorator:"", decorator:"",
momVal:!dateStr?null:moment(dateStr,this.dateFormat) momVal:!dateStr?null:moment(dateStr,this.dateFormat)
} }
}, },
mounted(){
console.log(this.showTime)
},
watch: { watch: {
value (val) { value (val) {
if(!val){ if(!val){
@@ -75,6 +119,25 @@
moment, moment,
handleDateChange(mom,dateStr){ handleDateChange(mom,dateStr){
this.$emit('change', dateStr); this.$emit('change', dateStr);
},
handleMonthChange(mom,dateStr){
this.$emit('change',dateStr)
},
// 弹出日历和关闭日历的回调
openChangeOne(status){
//status是打开或关闭的状态
if(status){
this.yearShowOne = true
}
},
// 得到年份选择器的值
panelChangeOne(value){
this.addForm.all_plan_one = value
this.yearShowOne = false
},
handleYearChange(mom,dateStr){
this.yearShowOne = false
this.$emit('change',dateStr)
} }
}, },
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼 //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
@@ -4,8 +4,7 @@
:placeholder="placeholder" :placeholder="placeholder"
:value="arrayValue" :value="arrayValue"
@change="onChange" @change="onChange"
@search="search" option-filter-prop="children"
:filterOption="false"
> >
<a-select-option <a-select-option
v-for="(item,index) in newOptions" v-for="(item,index) in newOptions"
@@ -75,22 +74,25 @@
this.newOptions = this.options this.newOptions = this.options
}, },
methods:{ methods:{
search(val){ // search(val){
let newArr = [] // let newArr = []
this.newOptions = this.options // this.newOptions = this.options
if (this.options && this.options.length > 0){ // if (this.options && this.options.length > 0){
this.options.forEach((item,index)=>{ // this.options.forEach((item,index)=>{
if (item.text.indexOf(val) != -1){ // if (item.text.indexOf(val) != -1){
newArr.push(item) // newArr.push(item)
} // }
}) // })
this.$nextTick(()=>{ // this.$nextTick(()=>{
this.newOptions = newArr // this.newOptions = newArr
}) // })
}else { // }else {
this.newOptions = this.options // this.newOptions = this.options
} // }
}, // },
// blur(){
// this.newOptions = this.options
// },
onChange (selectedValue) { onChange (selectedValue) {
this.newOptions = this.options this.newOptions = this.options
if(this.triggerChange){ if(this.triggerChange){
+2 -1
View File
@@ -2,6 +2,7 @@
<a-tree-select <a-tree-select
allowClear allowClear
labelInValue labelInValue
tree-node-filter-prop="title"
:getPopupContainer="(node) => node.parentNode" :getPopupContainer="(node) => node.parentNode"
style="width: 100%" style="width: 100%"
:disabled="disabled" :disabled="disabled"
@@ -85,7 +86,6 @@
tableName:"", tableName:"",
text:"", text:"",
code:"", code:"",
} }
}, },
watch: { watch: {
@@ -152,6 +152,7 @@
} }
getAction(this.url,param).then(res=>{ getAction(this.url,param).then(res=>{
if(res.success){ if(res.success){
console.log(res)
for(let i of res.result){ for(let i of res.result){
i.value = i.key i.value = i.key
if(i.leaf==false){ if(i.leaf==false){
+1 -1
View File
@@ -158,7 +158,7 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="日期选择框"> <a-form-item label="日期选择框">
<j-date v-model="jdate.value" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss"/> <j-date v-model="jdate.value" :showType="'year'" dateFormat="YYYY"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12">日期选择框(v-model){{ jdate.value }}</a-col> <a-col :span="12">日期选择框(v-model){{ jdate.value }}</a-col>