end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

组件优化

master
陈裕财 3 years ago
parent
9c8b7d637e
commit
44b78b1d45
8 changed files with 326 additions and 649 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      src/components/Mdp/index.scss
  2. 78
      src/components/MdpDateRangeX/index.vue
  3. 73
      src/components/MdpDateX/index.vue
  4. 78
      src/components/MdpFieldX/index.vue
  5. 29
      src/components/MdpSelectDictTag/index.vue
  6. 191
      src/components/MdpSelectDictX/index.vue
  7. 102
      src/components/MdpSelectUserX/index.vue
  8. 101
      src/views/xm/core/components/MdpSelectUserXm/index.vue

79
src/components/Mdp/index.scss
View File

@ -0,0 +1,79 @@
.field-box {
display: flex;
margin-right: 5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.field-avater {
background-color: #ff9f73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #c0c4cc;
}
}
.field-oper {
height: 40px;
line-height: 40px;
margin-left: 5px;
margin-right: 5px;
display: none;
}
}
.field-box:hover .field-info.enabled {
display: none;
}
.field-box:hover .field-oper.enabled {
display: inline;
}
.dashed-circle {
width: 40px;
height: 40px;
border: 2px dashed #000000;
border-radius: 40px/40px;
}
.field-box:hover .dashed-circle {
border: 2px dashed #409eff;
}
.avatar-container {
height: 40px;
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: 0.75rem;
}
.el-icon-caret-bottom {
font-size: 22px;
}
}
}

78
src/components/MdpDateRangeX/index.vue
View File

@ -1,15 +1,19 @@
<template>
<div class="field-box">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info">
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="field-info" :value="dateRange">
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span class="field-value" v-else><span class="label-font-color">无</span></span>
<slot name="label">
<span class="field-label">{{label}}</span>
<div v-if="disabled!==true" class="my-select" name="select" :value="dateRange">
</slot>
</slot>
</div>
<div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<el-date-picker :type="type" :style="styleObj" v-model="dateRange" :value-format="valueFormat" :format="format"
unlink-panels
@ -21,16 +25,13 @@
:picker-options="pickerOptions"
></el-date-picker>
</div>
</slot>
</slot>
</div>
</div>
</template>
<script>
import util from '@/common/js/util'
export default {
name: 'date-range',
name: 'mdp-date-range-x',
components: { },
computed: {
avaterCpd(){
@ -231,66 +232,5 @@ export default {
<style lang="scss" scoped>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.my-select{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .my-select{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
@import '../Mdp/index.scss';
</style>

73
src/components/MdpDateX/index.vue
View File

@ -3,20 +3,21 @@
<div class="field-box">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info">
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="field-info" :value="dateRange">
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span class="field-value" v-else><span class="label-font-color">无</span></span>
<slot name="label">
<span class="field-label">{{label}}</span>
<div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
</slot>
</slot>
</div>
<div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<el-date-picker v-model="myVal" :value-format="valueFormat" :format="format"
@change="onChange"
:picker-options="pickerOptions"></el-date-picker>
</div>
</slot>
</slot>
</div>
</div>
</template>
@ -161,66 +162,6 @@
<style lang="scss" scoped>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.my-select{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .my-select{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
@import '../Mdp/index.scss';
</style>

78
src/components/MdpFieldX/index.vue
View File

@ -1,8 +1,11 @@
<template>
<div class="field-box" @click="showSelect">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info" >
<slot>
<slot name="avater" :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
<el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
</slot>
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="info">
<span class="field-value">
<slot name="value" :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
@ -13,13 +16,15 @@
<span class="field-label" >
<slot name="label"> {{label}}</slot>
</span>
<span class="oper" ref="operRef">
</slot>
</div>
<div class="field-oper" ref="operRef" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="oper" :value="myVal" :field="{label:label,color:color,getColor:getColor,icon:icon,getIcon:getIcon,disabled:disabled,clearable:clearable}">
</slot>
</span>
</slot>
</div>
</slot>
</div>
</template>
@ -162,67 +167,6 @@ import util from '@/common/js/util'
<style lang="scss" scoped>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.oper{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .oper{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
@import '../Mdp/index.scss';
</style>

29
src/components/MdpSelectDictTag/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="item-box">
<div :class="{'item-info':disabled!==true}">
<el-tag v-if="currentItem" :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag>
<div class="field-box">
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<div><el-tag v-if="currentItem" :type="currentItem.className" :closable="closable" :effect="effect">{{currentItem.name}}</el-tag></div>
</div>
<div v-if="disabled!==true" class="item-select">
<div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<mdp-select-dict :dict="dict" v-model="myVal" @change="onChange" :clearable="closable"></mdp-select-dict>
</div>
</div>
@ -78,24 +78,7 @@
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.item-box{
display: flex;
cursor: pointer;
.item-info{
display:inherit;
height: 33px;
}
.item-select{
display: none;
}
}
.item-box:hover .item-info{
display: none;
}
.item-box:hover .item-select{
display:inherit;
}
<style lang="scss" scoped>
@import '../Mdp/index.scss';
</style>

191
src/components/MdpSelectDictX/index.vue
View File

@ -1,109 +1,134 @@
<template>
<div class="field-box" @click="showSelect">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info" >
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span class="field-value" v-else><span class="label-font-color">无</span></span>
<slot name="avater" class="field-avater">
<el-avatar
:class="{ 'dashed-circle': avaterCpd.isNull }"
:icon="avaterCpd.icon"
:style="{ backgroundColor: avaterCpd.color }"
>{{ avaterCpd.innerText }}</el-avatar
>
</slot>
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="info">
<span class="field-value" v-if="!avaterCpd.isNull"
>{{ avaterCpd.innerText }}
</span>
<span class="field-value" v-else
><span class="label-font-color">无</span></span
>
<span class="field-label">{{ label }}</span>
<mdp-select-dict v-if="disabled!==true" :dict="dict" ref="selectRef" v-model="myVal" @change="onChange" :get-icon="getIcon" :get-color="getColor" :icon="icon"></mdp-select-dict>
</slot>
</div>
<div class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="oper">
<mdp-select-dict
v-if="disabled !== true"
:dict="dict"
ref="selectRef"
v-model="myVal"
@change="onChange"
:get-icon="getIcon"
:get-color="getColor"
:icon="icon"
></mdp-select-dict>
</slot>
</div>
</div>
</template>
<script>
import util from '@/common/js/util'
import util from "@/common/js/util";
export default {
name: 'mdp-select-dict-x',
name: "mdp-select-dict-x",
components: {},
computed: {
currentItem() {
if (this.dict) {
return this.dict.find(k=>k.id==this.myVal)
return this.dict.find((k) => k.id == this.myVal);
} else {
return null;
}
},
avaterCpd() {
var currentItem = null
var currentItem = null;
if (this.dict) {
currentItem= this.dict.find(k=>k.id==this.myVal)
}
var isEmpty=this.isEmpty(this.myVal)
var obj={isNull:isEmpty,icon:'el-icon-full-screen',color:'#E4E7ED',innerText:''}
currentItem = this.dict.find((k) => k.id == this.myVal);
}
var isEmpty = this.isEmpty(this.myVal);
var obj = {
isNull: isEmpty,
icon: "el-icon-full-screen",
color: "#E4E7ED",
innerText: "",
};
if (this.getColor || this.color) {
if (this.getColor) {
obj.color= this.getColor(this.myVal,currentItem,this.dict)
obj.color = this.getColor(this.myVal, currentItem, this.dict);
} else {
obj.color=this.color
obj.color = this.color;
}
} else {
if (!isEmpty) {
if (currentItem && currentItem.color) {
obj.color=currentItem.color
obj.color = currentItem.color;
} else {
obj.color= util.getColor(this.myVal)
obj.color = util.getColor(this.myVal);
}
}
}
if (this.getIcon || this.icon) {
if (this.getIcon) {
obj.icon= this.getIcon(this.myVal,currentItem,this.dict)
obj.icon = this.getIcon(this.myVal, currentItem, this.dict);
} else if (this.icon) {
obj.icon=this.icon
obj.icon = this.icon;
}
} else {
if (!isEmpty) {
if (currentItem && currentItem.icon) {
obj.icon= currentItem.icon
obj.icon = currentItem.icon;
} else {
obj.icon=''
obj.icon = "";
}
}
}
if (isEmpty) {
obj.innerText=''
obj.innerText = "";
} else {
if (currentItem == null) {
obj.innerText=this.myVal
obj.innerText = this.myVal;
} else {
obj.innerText=currentItem.name
obj.innerText = currentItem.name;
}
}
return obj;
}
},
},
data() {
return {
myVal:'',
}
myVal: "",
};
},
watch: {
value: {
deep: true,
handler() {
this.initData();
}
},
},
myVal() {
this.$emit('input',this.myVal)
}
this.$emit("input", this.myVal);
},
},
props: {
disabled: {
type: Boolean,
default: false,
},
label: {
type: String,
default:''
default: "",
},
clearable: {
type: Boolean,
@ -111,21 +136,21 @@ import util from '@/common/js/util'
},
dict: {
type: Array,
default:function(){return []}
default: function () {
return [];
},
value: {
},
value: {},
icon: {
type: String,
default: null,
},
getIcon: {
type:Function
type: Function,
},
getColor: {
type:Function
type: Function,
},
},
methods: {
@ -140,21 +165,20 @@ import util from '@/common/js/util'
}
},
initData() {
this.myVal=this.value
this.myVal = this.value;
},
onChange(data) {
this.$emit('change',data)
this.$emit("change", data);
},
isEmpty(v) {
switch (typeof v) {
case 'undefined':
case "undefined":
return true;
case 'string':
case "string":
if (v.length == 0) return true;
break;
case 'object':
case "object":
if (null === v || v.length === 0) return true;
for (var i in v) {
return false;
@ -162,77 +186,16 @@ import util from '@/common/js/util'
return true;
}
return false;
}
},
},
mounted() {
this.initData();
}
}
},
};
</script>
<style lang="scss" scoped>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.my-select{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .my-select{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
@import '../Mdp/index.scss';
</style>

102
src/components/MdpSelectUserX/index.vue
View File

@ -3,13 +3,16 @@
<div class="field-box">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info">
<slot name="field-info" :value="myVal">
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="info" :value="myVal">
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span class="field-value" v-else><span class="label-font-color">无</span></span>
<slot name="label">
<span class="field-label">{{label}}</span>
<div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
</slot>
</slot>
</div>
<div v-if="disabled!==true" class="field-oper" :value="myVal" :class="{disabled:disabled===true,enabled:disabled!==true}">
<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 v-if="projectId" :type="projectVisible?'primary':''" @click.stop="projectVisible=true">项目组</el-button> </el-row>
@ -25,9 +28,6 @@
</el-option>
</el-select>
</div>
</slot>
</slot>
</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>
@ -258,95 +258,9 @@
}
</script>
<style lang="scss" scoped>
@import '../Mdp/index.scss';
</style>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.my-select{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .my-select{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
.avatar-container {
height: 40px;
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: 0.75rem;
}
.el-icon-caret-bottom {
font-size: 22px;
}
}
}
</style>

101
src/views/xm/core/components/MdpSelectUserXm/index.vue
View File

@ -1,16 +1,18 @@
<template>
<el-row>
<div class="field-box">
<el-avatar class="avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<el-avatar class="field-avater" :class="{'dashed-circle':avaterCpd.isNull}" :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar>
<div class="field-info">
<div class="field-info" :class="{disabled:disabled===true,enabled:disabled!==true}">
<slot name="field-info" :value="myVal" >
<span class="field-value" v-if="!avaterCpd.isNull">{{avaterCpd.innerText}} </span>
<span class="field-value" v-else><span class="label-font-color">无</span></span>
<slot name="label">
<span class="field-label">{{label}}</span>
</slot>
<div v-if="disabled!==true" class="my-select" name="select" :value="myVal">
</slot>
</div>
<div v-if="disabled!==true" class="field-oper" :class="{disabled:disabled===true,enabled:disabled!==true}">
<el-select v-model="myVal" @change="onSelectChange" :clearable="clearable" filterable>
<el-option :value="myVal" disabled v-if="users && users.length>10">
@ -30,9 +32,6 @@
</el-option>
</el-select>
</div>
</slot>
</div>
</div>
<el-dialog v-if="disabled!==true" :visible.sync="deptUserVisible" append-to-body top="20px" width="60%">
<users-select :visible="deptUserVisible" :isSingleUser="true" :isSelectByDept="true" @confirm="onConfirmUsers"></users-select>
@ -260,94 +259,8 @@
}
</script>
<style lang="scss" scoped>
.field-box {
display: flex;
margin-right:5px;
align-items: center;
cursor: pointer;
height: 40px;
line-height: 40px;
.avater {
background-color:#FF9F73;
}
.field-info {
height: 40px;
line-height: 40px;
margin-left: 10px;
display: flex;
flex-direction: column;
.field-value {
height: 20px;
line-height: 20px;
font-size: 0.75rem;
}
.field-label{
height: 20px;
line-height: 20px;
font-size: 0.75rem;
color: #C0C4CC;
}
}
.my-select{
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right:5px;
max-width: 250px;
display: none;
}
}
.field-box:hover .field-label{
display: none;
}
.field-box:hover .my-select{
height: 20px;
margin-left: 5px;
display: inline;
}
.dashed-circle{
width:40px;
height:40px;
border:2px dashed #000000;
border-radius:40px/40px;
}
.field-box:hover .dashed-circle{
border:2px dashed #409EFF;
}
.avatar-container {
height: 40px;
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: 0.75rem;
}
.el-icon-caret-bottom {
font-size: 22px;
}
}
}
@import '@/components/Mdp/index.scss';
</style>
Write Preview
Loading…
Cancel
Save