KH/kh-device-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修复】修复自建组件的问题

Browse Source
This commit is contained in:
zer0Black
2021-05-06 16:31:24 +08:00
parent 38ba2b705a
commit c830b7ba0e
11 changed files with 191 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JCategorySelect.vue
+20 -11
View File
@@ -9,7 +9,7 @@
:loadData="asyncLoadTreeData"
:value="treeValue"
v-bind="_attrs"
v-on="$listeners"
v-on="childListeners"
:treeData="treeData"
:multiple="multiple"
@change="onChange">
@@ -79,6 +79,22 @@
}
},
computed:{
_attrs() {
let attrs
attrs = { ...this.$attrs }
return attrs
},
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch: {
value () {
this.loadItemByCode()
@@ -93,13 +109,6 @@
this.loadItemByCode()
})
},
computed:{
_attrs() {
let attrs
attrs = { ...this.$attrs }
return attrs
}
},
methods: {
/**加载一级节点 */
loadRoot(){
@@ -159,7 +168,7 @@
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', value, obj)
this.$emit('change', value, obj)
},
asyncLoadTreeData (treeNode) {
return new Promise((resolve) => {
@@ -211,7 +220,7 @@
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', '');
this.$emit('change', '');
this.treeValue = ''
} else if (Array.isArray(value)) {
let labels = []
@@ -254,7 +263,7 @@
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: {
prop: 'value',
event: 'select-change'
event: 'change'
}
}
</script>
jero-web/src/components/jero/JDate.vue
+23 -10
View File
@@ -11,7 +11,7 @@
:showTime="true"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
:getCalendarContainer="getCalendarContainer">
</a-date-picker>
<!--YYYY-MM-DD-->
@@ -25,7 +25,7 @@
:showTime="false"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
:getCalendarContainer="getCalendarContainer">
</a-date-picker>
<!--YYYY-MM-->
@@ -36,7 +36,7 @@
:disabled="disabled || readOnly"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
@change="handleMonthChange">
</a-month-picker>
<!--YYYY-->
@@ -49,7 +49,7 @@
:disabled="disabled || readOnly"
:open="yearShowOne"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
:getCalendarContainer="getCalendarContainer"
@openChange="openChangeOne"
@panelChange="panelChangeOne">
@@ -101,13 +101,26 @@
return {
yearShowOne:false, //控制年份模态框的显示与否
year:'', // mode==“year” 专用
momVal:!dateStr?null:moment(dateStr,this.dateFormat),
momVal:!dateStr?null:moment(dateStr,this.dateFormat)
}
},
computed: {
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch: {
value (val) {
let fm = this.dateFormat
moment.prototype.toJSON = function(){return moment(this).format(fm)}
moment.prototype.toJSON = function(){
return moment(this).format(fm)
}
if(!val){
this.momVal = null
}else{
@@ -118,10 +131,10 @@
methods: {
moment,
handleDateChange(mom,dateStr){
this.$emit('date-change', dateStr);
this.$emit('change', dateStr);
},
handleMonthChange(mom,dateStr){
this.$emit('date-change',dateStr)
this.$emit('change',dateStr)
},
/**
* 弹出日历和关闭日历的回调
@@ -135,13 +148,13 @@
this.yearShowOne = false
let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
this.year = value //组件显示的
this.$emit('date-change',year)
this.$emit('change',year)
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'date-change'
event: 'change'
}
}
</script>
jero-web/src/components/jero/JImageUpload.vue
+14 -3
View File
@@ -13,7 +13,7 @@
:isMultiple="isMultiple"
:showUploadList="isMultiple"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
@change="handleChange"
@preview="handlePreview"
:class="!isMultiple?'imgupload':''">
@@ -84,6 +84,17 @@
}
//update-end-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性，用于判断上传数量
},
computed: {
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch:{
value: {
handler(val,oldValue) {
@@ -194,7 +205,7 @@
if(arr.length>0){
path = arr.join(",")
}
this.$emit('image-change', path);
this.$emit('change', path);
},
handleDelete(file){
//如有需要新增 删除逻辑
@@ -209,7 +220,7 @@
},
model: {
prop: 'value',
event: 'image-change'
event: 'change'
}
}
</script>
jero-web/src/components/jero/JInput.vue
+22 -11
View File
@@ -3,7 +3,7 @@
:value="inputVal"
@input="backValue"
v-bind="$props"
v-on="$listeners"
v-on="childListeners"
></a-input>
</template>
@@ -40,6 +40,22 @@
default: false
},
},
data(){
return {
inputVal:''
}
},
computed: {
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch:{
value:{
immediate:true,
@@ -52,15 +68,6 @@
this.backValue({ target: { value: this.inputVal } })
},
},
model: {
prop: 'value',
event: 'input_change'
},
data(){
return {
inputVal:''
}
},
methods:{
initVal(){
if(!this.value){
@@ -108,8 +115,12 @@
break;
default:
}
this.$emit('input_change', text);
this.$emit('change', text);
}
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
jero-web/src/components/jero/JSelectMultiple.vue
-2
View File
@@ -5,8 +5,6 @@
:value="arrayValue"
@change="onChange"
option-filter-prop="children"
v-bind="$attrs"
v-on="$listeners"
>
<a-select-option
v-for="(item,index) in newOptions"
jero-web/src/components/jero/JSwitch.vue
+23 -15
View File
@@ -4,8 +4,7 @@
v-if="query"
style="width: 100%"
@change="handleSelectChange"
v-bind="$attrs"
v-on="$listeners">
>
<a-select-option v-for="(item, index) in queryOption" :key="index" :value="item.value">
{{ item.text }}
</a-select-option>
@@ -16,7 +15,7 @@
:disabled="disabled"
@change="handleChange"
v-bind="$attrs"
v-on="$listeners"/>
v-on="childListeners"/>
</div>
</template>
<script>
@@ -49,6 +48,23 @@
checkStatus: false
}
},
computed:{
queryOption(){
let arr = []
arr.push({value:this.options[0],text:'是'})
arr.push({value:this.options[1],text:'否'})
return arr;
},
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch: {
value:{
immediate: true,
@@ -56,7 +72,7 @@
if(!this.query){
if(!val){
this.checkStatus = false
this.$emit('check-change', this.options[1]);
this.$emit('change', this.options[1]);
}else{
if(this.options[0]==val){
this.checkStatus = true
@@ -69,26 +85,18 @@
}
}
},
computed:{
queryOption(){
let arr = []
arr.push({value:this.options[0],text:'是'})
arr.push({value:this.options[1],text:'否'})
return arr;
}
},
methods: {
handleChange(checked){
let flag = checked===false?this.options[1]:this.options[0];
this.$emit('check-change', flag);
this.$emit('change', flag);
},
handleSelectChange(value){
this.$emit('check-change', value);
this.$emit('change', value);
}
},
model: {
prop: 'value',
event: 'check-change'
event: 'change'
}
}
</script>
jero-web/src/components/jero/JTable.vue
+34 -41
View File
@@ -67,6 +67,10 @@
<script>
import get from 'lodash.get'
const LEFT_FROZEN = 1; // 1为左侧冻结
const RIGHT_FROZEN = 2; // 2为右侧冻结
const NO_FROZEN = 3; // 3为不冻结或解冻
export default {
name: 'JTable',
props: {
@@ -271,28 +275,23 @@ export default {
})
},
fixedChange(e, dataIndex) {
// 冻结列头的参数
// 1为左侧冻结
// 2为右侧冻结
// 3为不冻结或解冻
if (e.target.value === 1) {
if (e.target.value === LEFT_FROZEN) {
//左侧冻结
this.curTableColumns.find((item) => {
if (item.dataIndex === dataIndex) {
item.fixed = 'left'
}
})
// 左侧冻结,先把冻结项删除,再unshift到数组首位
let arr
for (let i = 0; i < this.curTableColumns.length; i++) {
if (this.curTableColumns[i].dataIndex === dataIndex) {
arr = this.curTableColumns.splice(i, 1)
break
}
}
this.curTableColumns.unshift(arr[0])
} else if (e.target.value === 2) {
// // 左侧冻结,先把冻结项删除,再unshift到数组首位
// let arr
// for (let i = 0; i < this.curTableColumns.length; i++) {
// if (this.curTableColumns[i].dataIndex === dataIndex) {
// arr = this.curTableColumns.splice(i, 1)
// break
// }
// }
// this.curTableColumns.unshift(arr[0])
} else if (e.target.value === RIGHT_FROZEN) {
//右侧冻结
this.curTableColumns.find((item) => {
if (item.dataIndex === dataIndex) {
@@ -300,14 +299,14 @@ export default {
}
})
// 右侧冻结,先把冻结项删除,再push到数组末位
let arr
for (let i = 0; i < this.curTableColumns.length; i++) {
if (this.curTableColumns[i].dataIndex === dataIndex) {
arr = this.curTableColumns.splice(i, 1)
break
}
}
this.curTableColumns.push(arr[0])
// let arr
// for (let i = 0; i < this.curTableColumns.length; i++) {
// if (this.curTableColumns[i].dataIndex === dataIndex) {
// arr = this.curTableColumns.splice(i, 1)
// break
// }
// }
// this.curTableColumns.push(arr[0])
} else {
this.curTableColumns.find((item) => {
//解冻
@@ -315,7 +314,7 @@ export default {
item.fixed = false
}
})
this.diffColunms()
// this.diffColunms()
}
},
// 列头重新排序
@@ -326,26 +325,20 @@ export default {
this.curTableColumns.forEach((item) => {
if (!item.fixed) {
newColumnsList.push(item)
}
})
this.curTableColumns.forEach((item) => {
if (item.fixed === 'left') {
} else if (item.fixed === 'left') {
newFixedLeftList.push(item)
}
})
this.curTableColumns.forEach((item) => {
if (item.fixed === 'right') {
} else if (item.fixed === 'right') {
newFixedRightList.push(item)
}
})
// 冒泡排序,根据key重新排序
for (var i = 0; i < newColumnsList.length - 1; i++) {
for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
if (newColumnsList[j].key > newColumnsList[j + 1].key) {
;[newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
}
}
}
// TODO 冒泡排序,根据key重新排序
// for (var i = 0; i < newColumnsList.length - 1; i++) {
// for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
// if (newColumnsList[j].key > newColumnsList[j + 1].key) {
// [newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
// }
// }
// }
// 解构赋值,重新定义列头List
this.curTableColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
},
jero-web/src/components/jero/JTime.vue
+14 -3
View File
@@ -5,7 +5,7 @@
:value="momVal"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
:getCalendarContainer="getCalendarContainer"
@change="handleTimeChange"/>
</template>
@@ -51,6 +51,17 @@
momVal:!timeStr?null:moment(timeStr,this.dateFormat)
}
},
computed: {
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
watch: {
value (val) {
if(!val){
@@ -63,13 +74,13 @@
methods: {
moment,
handleTimeChange(mom,timeStr){
this.$emit('time-change', timeStr);
this.$emit('change', timeStr);
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: {
prop: 'value',
event: 'time-change'
event: 'change'
}
}
</script>
jero-web/src/components/jero/JTreeDict.vue
+13 -4
View File
@@ -12,7 +12,7 @@
@change="onChange"
@search="onSearch"
v-bind="_attrs"
v-on="$listeners">
v-on="childListeners">
</a-tree-select>
</template>
@@ -93,6 +93,15 @@
let attrs
attrs = { ...this.$attrs }
return attrs
},
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
created(){
@@ -101,7 +110,7 @@
},
model: {
prop: 'value',
event: 'select-change'
event: 'change'
},
methods:{
loadViewInfo(){
@@ -191,9 +200,9 @@
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', '');
this.$emit('change', '');
}else{
this.$emit('select-change', value.value);
this.$emit('change', value.value);
}
this.treeValue = value
},
jero-web/src/components/jero/JTreeSelect.vue
+14 -5
View File
@@ -15,7 +15,7 @@
:multiple="multiple"
:show-search="!multiple"
v-bind="_attrs"
v-on="$listeners"
v-on="childListeners"
@change="onChange">
</a-tree-select>
<a-tree-select
@@ -128,6 +128,15 @@
let attrs
attrs = { ...this.$attrs }
return attrs
},
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
}
},
created(){
@@ -267,15 +276,15 @@
/*
* 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
* 解决办法：改变选中时提交的事件名*/
this.$emit('select-change', '');
this.$emit('change', '');
this.treeValue = null
} else if (value instanceof Array) {
//多选
this.$emit('select-change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
this.$emit('change', value.join(',').toString()) //修改第一次选中时，选中为空的情况
this.treeValue = value
} else {
//单选
this.$emit('select-change', value)
this.$emit('change', value)
this.treeValue = value
}
},
@@ -307,7 +316,7 @@
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'select-change'
event: 'change'
}
}
//递归整个树，判断是否是叶子节点----同步获取数据时用到
jero-web/src/components/jero/JUpload.vue
+14 -6
View File
@@ -13,7 +13,7 @@
:listType="complistType"
@preview="handlePreview"
v-bind="$attrs"
v-on="$listeners"
v-on="childListeners"
:class="{'uploadty-disabled':disabled}">
<template>
<div v-if="isImageComp">
@@ -125,12 +125,21 @@
}
},
computed:{
//透传给下级组件的事件，需要排除本组件使用的change事件
childListeners() {
const vm = this;
let result = Object.assign({},
this.$listeners,
)
delete result.change;
return result;
},
isImageComp(){
return this.fileType === FILE_TYPE_IMG
},
complistType(){
return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
}
},
},
created(){
const token = Vue.ls.get(ACCESS_TOKEN);
@@ -139,7 +148,6 @@
this.containerId = 'container-ty-'+new Date().getTime();
//---------------------------- end 图片左右换位置 -------------------------------------
},
methods:{
initFileListArr(val){
if(!val || val.length==0){
@@ -188,7 +196,7 @@
if(arr.length>0){
path = arr.join(",")
}
this.$emit('file-change', path);
this.$emit('change', path);
},
beforeUpload(file){
this.uploadGoOn=true
@@ -249,7 +257,7 @@
}
// update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
}
this.$emit('file-change', this.newFileList);
this.$emit('change', this.newFileList);
}
}
},
@@ -268,7 +276,7 @@
mounted(){},
model: {
prop: 'value',
event: 'file-change'
event: 'change'
}
}
</script>