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

八个组件的props透传，事件向上暴露

Browse Source
This commit is contained in:
yaoyanan
2021-04-07 17:57:14 +08:00
parent 53a032bc97
commit 139fe266e1
12 changed files with 108 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JCategorySelect.vue
+1 -1
View File
@@ -254,7 +254,7 @@
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: {
prop: 'value',
event: 'change'
event: 'select-change'
}
}
</script>
jero-web/src/components/jero/JDate.vue
+13 -5
View File
@@ -10,6 +10,8 @@
:value="momVal"
:showTime="true"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
:getCalendarContainer="getCalendarContainer">
</a-date-picker>
<!--YYYY-MM-DD-->
@@ -22,6 +24,8 @@
:value="momVal"
:showTime="false"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
:getCalendarContainer="getCalendarContainer">
</a-date-picker>
<!--YYYY-MM-->
@@ -31,6 +35,8 @@
:value="momVal"
:disabled="disabled || readOnly"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
@change="handleMonthChange">
</a-month-picker>
<!--YYYY-->
@@ -42,6 +48,8 @@
:value="year"
:disabled="disabled || readOnly"
:open="yearShowOne"
v-bind="$attrs"
v-on="$listeners"
:getCalendarContainer="getCalendarContainer"
@openChange="openChangeOne"
@panelChange="panelChangeOne">
@@ -55,7 +63,7 @@
props: {
placeholder:{
type: String,
default: '',
default: '请选择',
required: false
},
value:{
@@ -108,10 +116,10 @@
methods: {
moment,
handleDateChange(mom,dateStr){
this.$emit('change', dateStr);
this.$emit('date-change', dateStr);
},
handleMonthChange(mom,dateStr){
this.$emit('change',dateStr)
this.$emit('date-change',dateStr)
},
/**
* 弹出日历和关闭日历的回调
@@ -125,13 +133,13 @@
this.yearShowOne = false
let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
this.year = value //组件显示的
this.$emit('change',year)
this.$emit('date-change',year)
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'change'
event: 'date-change'
}
}
</script>
jero-web/src/components/jero/JEllipsis.vue
+9 -1
View File
@@ -1,5 +1,8 @@
<template>
<a-tooltip placement="topLeft">
<a-tooltip
placement="topLeft"
v-bind="$attrs"
v-on="$listeners">
<template slot="title">
<span>{{value}}</span>
</template>
@@ -20,6 +23,11 @@
required: false,
default: 25,
}
},
//在定义组件时，指定父组件调用时候的传值属性（prop）和事件类型（event），事件名称要和$emit传的一致
model:{
prop:'value',
event:'change'
}
}
</script>
jero-web/src/components/jero/JImageUpload.vue
+6 -3
View File
@@ -12,6 +12,8 @@
:disabled="disabled"
:isMultiple="isMultiple"
:showUploadList="isMultiple"
v-bind="$attrs"
v-on="$listeners"
@change="handleChange"
@preview="handlePreview"
:class="!isMultiple?'imgupload':''">
@@ -48,7 +50,7 @@
name: 'JImageUpload',
data(){
return {
uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
uploadAction:window._CONFIG['domianURL'] + '/sys/common/upload',
uploadLoading:false,
picUrl:false,
headers:{},
@@ -108,6 +110,7 @@
}
},
created(){
console.log(window._CONFIG['domianURL'] + '/sys/common/upload')
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token":token}
},
@@ -205,7 +208,7 @@
if(arr.length>0){
path = arr.join(",")
}
this.$emit('change', path);
this.$emit('image-change', path);
},
handleDelete(file){
//如有需要新增 删除逻辑
@@ -221,7 +224,7 @@
},
model: {
prop: 'value',
event: 'change'
event: 'image-change'
}
}
</script>
jero-web/src/components/jero/JImportModal.vue
+8 -2
View File
@@ -12,6 +12,8 @@
accept=".xls,.xlsx"
:fileList="fileList"
:remove="handleRemove"
v-bind="$attrs"
v-on="$listeners"
:beforeUpload="beforeUpload">
<a-button>
<a-icon type="upload" />
@@ -43,6 +45,11 @@
default: '',
required: false
},
visible:{
type: Boolean,
default: '',
required: false
},
biz:{
type: String,
default: '',
@@ -51,7 +58,6 @@
},
data(){
return {
visible:false,
uploading:false,
fileList:[],
uploadAction:'',
@@ -66,9 +72,9 @@
}
},
created () {
console.log(this.$attrs)
this.uploadAction = window._CONFIG['domianURL']+this.url
},
methods:{
handleClose(){
this.visible=false
jero-web/src/components/jero/JSelectMultiple.vue
+2 -20
View File
@@ -5,6 +5,8 @@
:value="arrayValue"
@change="onChange"
option-filter-prop="children"
v-bind="$attrs"
v-on="$listeners"
>
<a-select-option
v-for="(item,index) in newOptions"
@@ -74,25 +76,6 @@
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
// }
// },
// blur(){
// this.newOptions = this.options
// },
onChange (selectedValue) {
this.newOptions = this.options
if(this.triggerChange){
@@ -109,6 +92,5 @@
}
}
},
}
</script>
jero-web/src/components/jero/JSwitch.vue
+16 -5
View File
@@ -1,11 +1,22 @@
<template>
<div>
<a-select v-if="query" style="width: 100%" @change="handleSelectChange">
<a-select
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>
</a-select>
<a-switch v-else v-model="checkStatus" :disabled="disabled" @change="handleChange"/>
<a-switch
v-else
v-model="checkStatus"
:disabled="disabled"
@change="handleChange"
v-bind="$attrs"
v-on="$listeners"/>
</div>
</template>
<script>
@@ -69,15 +80,15 @@
methods: {
handleChange(checked){
let flag = checked===false?this.options[1]:this.options[0];
this.$emit('change', flag);
this.$emit('check-change', flag);
},
handleSelectChange(value){
this.$emit('change', value);
this.$emit('check-change', value);
}
},
model: {
prop: 'value',
event: 'change'
event: 'check-change'
}
}
</script>
jero-web/src/components/jero/JTime.vue
+4 -2
View File
@@ -4,6 +4,8 @@
:placeholder="placeholder"
:value="momVal"
:format="dateFormat"
v-bind="$attrs"
v-on="$listeners"
:getCalendarContainer="getCalendarContainer"
@change="handleTimeChange"/>
</template>
@@ -61,13 +63,13 @@
methods: {
moment,
handleTimeChange(mom,timeStr){
this.$emit('change', timeStr);
this.$emit('time-change', timeStr);
}
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: {
prop: 'value',
event: 'change'
event: 'time-change'
}
}
</script>
jero-web/src/components/jero/JTreeDict.vue
+1 -1
View File
@@ -101,7 +101,7 @@
},
model: {
prop: 'value',
event: 'change'
event: 'select-change'
},
methods:{
loadViewInfo(){
jero-web/src/components/jero/JTreeSelect.vue
+4 -4
View File
@@ -281,13 +281,13 @@
return this.treeData
},
validateProp(){
let mycondition = this.condition
let myCondition = this.condition
return new Promise((resolve,reject)=>{
if(!mycondition){
if(!myCondition){
resolve();
}else{
try {
let test=JSON.parse(mycondition);
let test=JSON.parse(myCondition);
if(typeof test == 'object' && test){
resolve()
}else{
@@ -305,7 +305,7 @@
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
model: {
prop: 'value',
event: 'change'
event: 'select-change'
}
}
//递归整个树，判断是否是叶子节点----同步获取数据时用到
jero-web/src/components/jero/JUpload.vue
+8 -6
View File
@@ -12,7 +12,6 @@
<a-upload
name="file"
:multiple="true"
:action="uploadAction"
:headers="headers"
:data="{'biz':bizPath}"
@@ -23,6 +22,8 @@
:returnUrl="returnUrl"
:listType="complistType"
@preview="handlePreview"
v-bind="$attrs"
v-on="$listeners"
:class="{'uploadty-disabled':disabled}">
<template>
<div v-if="isImageComp">
@@ -162,6 +163,7 @@
}
},
created(){
console.log(this.$attrs)
const token = Vue.ls.get(ACCESS_TOKEN);
//---------------------------- begin 图片左右换位置 -------------------------------------
this.headers = {"X-Access-Token":token};
@@ -236,7 +238,7 @@
if(arr.length>0){
path = arr.join(",")
}
this.$emit('change', path);
this.$emit('file-change', path);
},
beforeUpload(file){
this.uploadGoOn=true
@@ -298,7 +300,7 @@
}
// update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
}
this.$emit('change', this.newFileList);
this.$emit('file-change', this.newFileList);
}
}
},
@@ -339,7 +341,7 @@
}
}
this.currentImg = last
this.$emit('change',arr.join(','))
this.$emit('file-change',arr.join(','))
}
},
moveNext(){
@@ -360,7 +362,7 @@
}
}
this.currentImg = next
this.$emit('change',arr.join(','))
this.$emit('file-change',arr.join(','))
}
},
getIndexByUrl(){
@@ -420,7 +422,7 @@
},
model: {
prop: 'value',
event: 'change'
event: 'file-change'
}
}
</script>
jero-web/src/views/demo/SelectDemo.vue
+36 -7
View File
@@ -158,7 +158,7 @@
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="日期选择框">
<j-date v-model="jdate.value" :showType="'year'" dateFormat="YYYY"/>
<j-date v-model="jdate.value" :showType="'time'" dateFormat="YYYY-MM-DD HH:mm:ss"/>
</a-form-item>
</a-col>
<a-col :span="12">日期选择框(v-model)：{{ jdate.value }}</a-col>
@@ -178,7 +178,7 @@
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="过长剪切">
<j-ellipsis :value="jellipsis.value" :length="30"/>
<j-ellipsis :value="jellipsis.value" :length="20" @text-change="selectChange"/>
</a-form-item>
</a-col>
<a-col :span="12">过长剪切：{{ jellipsis.value }}</a-col>
@@ -198,7 +198,7 @@
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="多选下拉框">
<j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
<j-select-multiple v-model="jselectMultiple.value" :options="jselectMultiple.options" @change="selectChange"/>
</a-form-item>
</a-col>
<a-col :span="12">多选下拉框(v-model)：{{ jselectMultiple.value }}</a-col>
@@ -328,11 +328,10 @@
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="图片上传">
<j-image-upload v-model="imgList"></j-image-upload>
<j-image-upload v-model="imgList" title="22"></j-image-upload>
</a-form-item>
</a-col>
<a-col :span="12">选中的值(v-model)：{{ imgList }}</a-col>
@@ -340,7 +339,7 @@
<a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
<a-col :span="12">
<a-form-item label="文件上传">
<j-upload v-model="fileList"></j-upload>
<j-upload v-model="fileList" title="ddd" :multiple="true"></j-upload>
</a-form-item>
</a-col>
<a-col :span="12">
@@ -417,6 +416,23 @@
<a-col :span="12">选择的值(v-model)：{{ formData.jPopup }}</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="JSwitch示例">
<j-switch v-model="formData.sw"></j-switch>
</a-form-item>
</a-col>
<a-col :span="12">选择的值(v-model)：{{ formData.sw }}</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="JTime示例">
<j-time v-model="formData.mm"></j-time>
</a-form-item>
</a-col>
<a-col :span="12">选择的值(v-model)：{{ formData.mm }}</a-col>
</a-row>
</a-form>
</div>
@@ -449,6 +465,9 @@
import JAreaLinkage from '@comp/jero/JAreaLinkage'
import JMarkdownEditor from '@/components/jero/JMarkdownEditor/index'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import JSwitch from '@/components/jero/JSwitch.vue'
import JImportModal from '@/components/jero/JImportModal.vue'
import JTime from '@/components/jero/JTime.vue'
export default {
name: 'SelectDemo',
@@ -470,10 +489,14 @@
JCodeEditor,
JDate, JEditor, JEllipsis, JSlider, JSelectMultiple,
JCron, JTreeSelect, JSuperQuery, JMultiSelectTag,
JSearchSelectTag
JSearchSelectTag,
JSwitch,
JImportModal,
JTime
},
data() {
return {
ss:false,
selectList: [],
selectedDepUsers: '',
formData: {
@@ -589,6 +612,12 @@ sayHi('hello, world!')`
}
},
methods: {
as(){
this.ss = true
},
selectChange(){
console.log("ok")
},
getDepartIdValue() {
return this.form.getFieldValue('departId')
},