陈裕财
3 years ago
4 changed files with 536 additions and 42 deletions
-
198src/components/DateField/index.vue
-
309src/components/UserField/index.vue
-
4src/main.js
-
67src/views/xm/core/xmQuestion/XmQuestionEdit.vue
@ -0,0 +1,198 @@ |
|||
<template> |
|||
|
|||
<div class="field-box"> |
|||
<el-avatar class="avater" :icon="getMyIcon(myVal)" :style="{backgroundColor:getMyColor(myVal)}">{{getMyAvaterInfo(myVal)}}</el-avatar> |
|||
|
|||
<div class="field-info"> |
|||
<slot name="field-info" :value="myVal"> |
|||
<span class="field-value">{{myVal?formatDate( new Date(myVal),format):'' }} </span> |
|||
<slot name="label"> |
|||
<span class="field-label">{{label}}</span> |
|||
</slot> |
|||
</slot> |
|||
</div> |
|||
<div v-if="disabled!==true" class="my-select" name="select" :value="myVal"> |
|||
<el-date-picker v-model="myVal" :value-format="valueFormat" :format="format" |
|||
@change="onChange" |
|||
:picker-options="pickerOptions"></el-date-picker> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import util from '@/common/js/util';//全局公共库 |
|||
export default { |
|||
name: 'date-field', |
|||
components: { }, |
|||
computed: { |
|||
}, |
|||
data(){ |
|||
return { |
|||
myVal:'', |
|||
} |
|||
}, |
|||
watch:{ |
|||
value:{ |
|||
deep:true, |
|||
handler(){ |
|||
this.initData(); |
|||
} |
|||
|
|||
}, |
|||
|
|||
myVal(){ |
|||
this.$emit('input',this.myVal) |
|||
} |
|||
}, |
|||
props: { |
|||
|
|||
disabled:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
label:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
clearable:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
value: { |
|||
|
|||
}, |
|||
|
|||
getIcon:{ |
|||
type:Function |
|||
}, |
|||
getColor:{ |
|||
type:Function |
|||
}, |
|||
|
|||
styleObj:{ |
|||
type:Object, |
|||
default:function(){return { maxWidth:'100%' }} |
|||
}, |
|||
|
|||
valueFormat: { |
|||
type: String, |
|||
default: 'yyyy-MM-dd HH:mm:ss' |
|||
}, |
|||
|
|||
format: { |
|||
type: String, |
|||
default: 'yyyy-MM-dd' |
|||
}, |
|||
pickerOptions:{ |
|||
type:Object, |
|||
default:function(){return util.getPickerOptions('date')} |
|||
}, |
|||
}, |
|||
methods: { |
|||
formatDate:util.formatDate, |
|||
getPickerOptions:util.getPickerOptions, |
|||
getMyAvaterInfo(item){ |
|||
if(!item){ |
|||
return "" |
|||
}else{ |
|||
return item.icon?"":item.name |
|||
} |
|||
}, |
|||
getMyColor(item){ |
|||
if(item){ |
|||
|
|||
if(this.getColor){ |
|||
return this.getColor(item) |
|||
} |
|||
return util.getColor(item) |
|||
|
|||
}else{ |
|||
if(this.getColor){ |
|||
return this.getColor(this.myVal) |
|||
}else{ |
|||
return util.getColor(this.myVal) |
|||
} |
|||
} |
|||
}, |
|||
getMyIcon(item){ |
|||
if(item){ |
|||
if(this.getIcon){ |
|||
return this.getIcon(item) |
|||
} |
|||
return "el-icon-date"; |
|||
}else{ |
|||
if(this.getIcon){ |
|||
return this.getIcon(this.myVal) |
|||
}else{ |
|||
return "el-icon-date" |
|||
} |
|||
} |
|||
}, |
|||
initData(){ |
|||
this.myVal=this.value |
|||
|
|||
}, |
|||
|
|||
onChange(data){ |
|||
this.$emit('change',data) |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initData(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
|
|||
|
|||
.field-box { |
|||
display: flex; |
|||
margin-right:5px; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.avater { |
|||
background-color:#FF9F73; |
|||
} |
|||
|
|||
.field-info { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.field-value { |
|||
font-size: 16px; |
|||
} |
|||
.field-label{ |
|||
font-size: 14px; |
|||
color: #C0C4CC; |
|||
} |
|||
|
|||
} |
|||
.my-select{ |
|||
margin-left: 5px; |
|||
margin-right:5px; |
|||
max-width: 120px; |
|||
display: none; |
|||
} |
|||
.btn{ |
|||
margin-top: 0px; |
|||
visibility:hidden; |
|||
} |
|||
|
|||
} |
|||
.field-box:hover .btn{ |
|||
visibility: visible !important; |
|||
} |
|||
.field-box:hover .my-select{ |
|||
|
|||
margin-left: 5px; |
|||
display: inline; |
|||
} |
|||
.field-box:hover .field-info{ |
|||
display: none; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<el-row> |
|||
<div class="field-box"> |
|||
<el-avatar class="avater" :icon="getMyIcon(myVal)" :style="{backgroundColor:getMyColor(myVal)}">{{getMyAvaterInfo(myVal)}}</el-avatar> |
|||
|
|||
<div class="field-info"> |
|||
<slot name="field-info" :value="myVal"> |
|||
<span class="field-value">{{showMyValue( myVal )}} </span> |
|||
<slot name="label"> |
|||
<span class="field-label">{{label}}</span> |
|||
</slot> |
|||
</slot> |
|||
</div> |
|||
<div v-if="disabled!==true" class="my-select" name="select" :value="myVal"> |
|||
<el-select v-model="myVal" @change="onSelectChange" :clearable="clearable"> |
|||
<el-option disabled value="" style="margin-bottom:5px;"> |
|||
<el-row><el-button :type="deptUserVisible?'':'primary'" @click.stop="deptUserVisible=false">常用用户</el-button> <el-button :type="deptUserVisible?'primary':''" @click.stop="deptUserVisible=true">部门用户</el-button><el-button :type="deptUserVisible?'primary':''" @click.stop="projectVisible=true">项目组</el-button> </el-row> |
|||
</el-option> |
|||
<el-option class="avatar-container" v-for="(item,index) in users" :key="index" :value="item" :label="item.username"> |
|||
|
|||
<div class="avatar-wrapper"> |
|||
<el-avatar class="user-avatar" :style="{backgroundColor:getMyColor(item)}">{{item.username}}</el-avatar> |
|||
<span class="username">{{item.username}}</span> |
|||
<i v-if="myVal.userid==item.userid" class="el-icon-check"></i> |
|||
<i v-else> </i> |
|||
</div> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<el-dialog :visible.sync="deptUserVisible" append-to-body top="20px" width="60%"> |
|||
<users-select :visible="deptUserVisible" :isSingleUser="true" :isSelectByDept="true" @confirm="onConfirmUsers"></users-select> |
|||
</el-dialog> |
|||
|
|||
</el-row> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import util from '@/common/js/util';//全局公共库 |
|||
import UsersSelect from '@/views/mdp/sys/user/UsersSelectOnly.vue' |
|||
export default { |
|||
name: 'user-field', |
|||
components: { UsersSelect, }, |
|||
computed: { |
|||
}, |
|||
data(){ |
|||
return { |
|||
myVal:null, |
|||
users:[], |
|||
deptUserVisible:false, |
|||
projectVisible:false, |
|||
} |
|||
}, |
|||
watch:{ |
|||
value:{ |
|||
handler(){ |
|||
this.initData(); |
|||
} |
|||
|
|||
}, |
|||
|
|||
myVal(){ |
|||
if(this.value instanceof String){ |
|||
this.$emit('input',this.myVal) |
|||
}else if(this.value instanceof Object){ |
|||
if(!this.myVal||!this.myVal.userid){ |
|||
if(this.value[this.useridKey]){ |
|||
this.value[this.useridKey]="" |
|||
this.value[this.usernameKey]="" |
|||
this.$emit('input',this.value) |
|||
} |
|||
|
|||
}else{ |
|||
if(this.value[this.useridKey]!=this.myVal.userid){ |
|||
this.value[this.useridKey]=this.myVal.userid |
|||
this.value[this.usernameKey]=this.myVal.userid |
|||
this.$emit('input',this.value) |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
|
|||
disabled:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
label:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
clearable:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
value: { |
|||
|
|||
}, |
|||
useridKey: { |
|||
type: String, |
|||
default: 'userid' |
|||
}, |
|||
|
|||
usernameKey: { |
|||
type: String, |
|||
default: 'username' |
|||
}, |
|||
|
|||
}, |
|||
methods: { |
|||
showMyValue(myVal){ |
|||
if(!myVal){ |
|||
return "" |
|||
}else{ |
|||
if(this.value instanceof String){ |
|||
return myVal |
|||
}else if(this.value instanceof Object){ |
|||
if(!myVal||!myVal.userid){ |
|||
return "" |
|||
} |
|||
if(myVal.username){ |
|||
return myVal.username |
|||
}else if(myVal.userid){ |
|||
return myVal.userid |
|||
}else{ |
|||
return "" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
getMyAvaterInfo(item){ |
|||
return this.showMyValue(item) |
|||
}, |
|||
getMyColor(item){ |
|||
if(this.value instanceof String){ |
|||
if(item){ |
|||
|
|||
if(this.getColor){ |
|||
return this.getColor(item) |
|||
} |
|||
return util.getColor(item) |
|||
|
|||
}else{ |
|||
if(this.getColor){ |
|||
return this.getColor("0") |
|||
}else{ |
|||
return util.getColor(0) |
|||
} |
|||
} |
|||
|
|||
|
|||
}else if(this.value instanceof Object){ |
|||
|
|||
if(item&&item.userid){ |
|||
|
|||
if(this.getColor){ |
|||
return this.getColor(item.userid) |
|||
} |
|||
return util.getColor(item.userid) |
|||
|
|||
}else{ |
|||
if(this.getColor){ |
|||
return this.getColor("0") |
|||
}else{ |
|||
return util.getColor(0) |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
}, |
|||
getMyIcon(item){ |
|||
if(item){ |
|||
if(this.getIcon){ |
|||
return this.getIcon(item) |
|||
} |
|||
return "el-icon-user"; |
|||
}else{ |
|||
if(this.getIcon){ |
|||
return this.getIcon(this.myVal) |
|||
}else{ |
|||
return "el-icon-user" |
|||
} |
|||
} |
|||
}, |
|||
|
|||
initData(){ |
|||
if(this.value instanceof String){ |
|||
this.myVal=this.value |
|||
}else if(this.value instanceof Object){ |
|||
this.myVal={} |
|||
this.myVal.userid=this.value[this.useridKey] |
|||
this.myVal.username=this.value[this.usernameKey] |
|||
} |
|||
|
|||
}, |
|||
onSelectChange(item){ |
|||
this.onChange([item]) |
|||
}, |
|||
onChange(data){ |
|||
this.$emit('change',data) |
|||
}, |
|||
onConfirmUsers(users){ |
|||
this.onChange(users) |
|||
this.myVal=users[0] |
|||
this.deptUserVisible=false; |
|||
var notHad=false; |
|||
users.forEach(u=>{ |
|||
if(!this.users.some(k=>k.userid==u.userid)){ |
|||
notHad=true; |
|||
this.users.unshift(u) |
|||
} |
|||
}) |
|||
if(notHad){ |
|||
var us=JSON.stringify(this.users) |
|||
localStorage.setItem("mdp-his-users",us) |
|||
} |
|||
} |
|||
}, |
|||
mounted(){ |
|||
var us=localStorage.getItem("mdp-his-users") |
|||
this.users=us?JSON.parse(us):[] |
|||
|
|||
this.initData(); |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
|
|||
|
|||
.field-box { |
|||
display: flex; |
|||
margin-right:5px; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.avater { |
|||
background-color:#FF9F73; |
|||
} |
|||
|
|||
.field-info { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.field-value { |
|||
font-size: 16px; |
|||
} |
|||
.field-label{ |
|||
font-size: 14px; |
|||
color: #C0C4CC; |
|||
} |
|||
|
|||
} |
|||
.my-select{ |
|||
margin-left: 5px; |
|||
margin-right:5px; |
|||
max-width: 120px; |
|||
display: none; |
|||
} |
|||
.btn{ |
|||
margin-top: 0px; |
|||
visibility:hidden; |
|||
} |
|||
|
|||
} |
|||
.field-box:hover .btn{ |
|||
visibility: visible !important; |
|||
} |
|||
.field-box:hover .my-select{ |
|||
|
|||
margin-left: 5px; |
|||
display: inline; |
|||
} |
|||
|
|||
|
|||
|
|||
.avatar-container { |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
.avatar-wrapper { |
|||
cursor: pointer; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.user-avatar { |
|||
height: 34px; |
|||
width: 34px; |
|||
border-radius: 50%; |
|||
margin-right: 12px; |
|||
} |
|||
.username{ |
|||
color: #7D7D7D; |
|||
font-size: 14px; |
|||
} |
|||
.el-icon-caret-bottom { |
|||
font-size: 22px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue