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>
<a-date-picker
dropdownClassName="j-date-picker"
:disabled="disabled || readOnly"
:placeholder="placeholder"
@change="handleDateChange"
:value="momVal"
:showTime="showTime"
:format="dateFormat"
:getCalendarContainer="getCalendarContainer"
/>
<div>
<!--YYYY-MM-DD HH:mm:ss-->
<a-date-picker
v-if="showType === 'time'"
dropdownClassName="j-date-picker"
:disabled="disabled || readOnly"
:placeholder="placeholder"
@change="handleDateChange"
: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>
<script>
import moment from 'moment'
@@ -45,10 +81,11 @@
required: false,
default: false
},
showTime:{
type: Boolean,
//控制选择时分秒
showType:{
type: String,
required: false,
default: false
default:'time'
},
getCalendarContainer: {
type: Function,
@@ -58,10 +95,17 @@
data () {
let dateStr = this.value;
return {
yearShowOne:false, //控制年份模态框的显示与否
addForm:{
all_plan_one:null,//开始年限
},
decorator:"",
momVal:!dateStr?null:moment(dateStr,this.dateFormat)
}
},
mounted(){
console.log(this.showTime)
},
watch: {
value (val) {
if(!val){
@@ -75,6 +119,25 @@
moment,
handleDateChange(mom,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新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
@@ -4,8 +4,7 @@
:placeholder="placeholder"
:value="arrayValue"
@change="onChange"
@search="search"
:filterOption="false"
option-filter-prop="children"
>
<a-select-option
v-for="(item,index) in newOptions"
@@ -75,22 +74,25 @@
this.newOptions = this.options
},
methods:{
search(val){
let newArr = []
this.newOptions = this.options
if (this.options && this.options.length > 0){
this.options.forEach((item,index)=>{
if (item.text.indexOf(val) != -1){
newArr.push(item)
}
})
this.$nextTick(()=>{
this.newOptions = newArr
})
}else {
this.newOptions = this.options
}
},
// search(val){
// let newArr = []
// this.newOptions = this.options
// if (this.options && this.options.length > 0){
// this.options.forEach((item,index)=>{
// if (item.text.indexOf(val) != -1){
// newArr.push(item)
// }
// })
// this.$nextTick(()=>{
// this.newOptions = newArr
// })
// }else {
// this.newOptions = this.options
// }
// },
// blur(){
// this.newOptions = this.options
// },
onChange (selectedValue) {
this.newOptions = this.options
if(this.triggerChange){
+2 -1
View File
@@ -2,6 +2,7 @@
<a-tree-select
allowClear
labelInValue
tree-node-filter-prop="title"
:getPopupContainer="(node) => node.parentNode"
style="width: 100%"
:disabled="disabled"
@@ -85,7 +86,6 @@
tableName:"",
text:"",
code:"",
}
},
watch: {
@@ -152,6 +152,7 @@
}
getAction(this.url,param).then(res=>{
if(res.success){
console.log(res)
for(let i of res.result){
i.value = i.key
if(i.leaf==false){
+1 -1
View File
@@ -158,7 +158,7 @@
<a-row :gutter="24">
<a-col :span="12">
<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-col>
<a-col :span="12">日期选择框(v-model){{ jdate.value }}</a-col>