Skip to content

M
mes-ui
Commit 27eb9b6d authored by 骆瑛's avatar 骆瑛
Browse files
Options

生命周期

parent e7c84fbe
Show whitespace changes
Inline Side-by-side
Showing with 711 additions and 141 deletions
components/page/life.vue 0 → 100644
View file @ 27eb9b6d
<template>
<div class="datalife">
<div class="bigBing" :style="{width:220*bigNum+'px'}" v-if="mode">
<div v-for="(item, index) in data" :key="index" class="linebox">
<div class="box" :class="curIndex == index ? 'boxBorder1':curIndex<index ? ' boxBorder2':' boxBorder' " >
<Tag type="dot" :color="item.color?item.color:tagColor" >{{ item.name }}</Tag>
</div>
<div class="line" :class="[curIndex == index ? 'borderBotCol1' : curIndex<index? 'borderBotCol2':'borderBotCol']" v-if="bigNum != index+1" >
<span class="item arrow-right" :class="[curIndex==index? 'boxBorder1' :curIndex<index? 'boxBorder2':'boxBorder']" ></span>
</div>
</div>
</div>
<div class="bigBing" :style="{width:240*bigNum+'px'}" v-else>
<div class="lifeBox" v-for="(item, index) in data" :key="index">
<div class="arrow-left">
<b class="right" v-if="index != 0">
<i class="right-arrow" :class="curIndex==index ? 'rightCol1' :curIndex<index ? 'rightCol2' : 'rightCol' " ></i><i class="right-arrow2"></i>
</b>
</div>
<div class="lifeBoxfish" :class="[curIndex==index? 'boxBorder1' : curIndex<index ? 'boxBorder2' : 'boxBorder', bigNum != index + 1 ? 'borderR' : 'borderR1', ]" >
<Tag type="dot" :color="item.color?item.color:tagColor">{{ item.name }}</Tag>
</div>
<div class="arrow-right">
<b class="right" v-if="bigNum != index + 1"
><i class="right-arrow" :class="curIndex==index ? 'rightCol1' : curIndex<index ? 'rightCol2' : 'rightCol' " ></i><i class="right-arrow2"></i
></b>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "life",
data() {
return {
data:[],
tagColor:'#000',
bigNum: 0,
curIndex:-1,
};
},
props:{
code:{
//字典编码
type:String,
default:"Process.routing_detail.resource_type"
},
row:{
//行数据
type:Object
},
value:{
//当前值
type:[String,Number]
},
mode:{
//显示形式
type:String,
default:""
}
},
created() {
this.data = this.$store.getters.dictionaryByKey(this.code) || [];
this.bigNum = this.data.length;
this.data.forEach((u,i)=>{
if(u.code==this.value){
this.curIndex=i;
}
})
},
methods: {
},
};
</script>
<style lang="less" >
.datalife {
overflow-x: auto;
.linebox {
display: inline-flex;
.box {
background: white;
border-radius: 4px;
width: 120px;
height: 50px;
line-height: 50px;
margin: 10px 0 20px 8px;
text-align: center;
border: 3px solid;
.ivu-tag-dot{
font-weight: bolder;
font-size: 14px;
height: 100%;
line-height: 43px;
border: 0px solid #e8eaec !important;
width: 100%;
background: transparent !important;
}
}
.boxBorder {
border-color: #0dd78d;
}
.boxBorder1 {
border-color: #5b9ff0;
}
.boxBorder2 {
border-color: #b8bcc4;
}
.borderBotCol {
border-bottom: 3px solid #0dd78d;
}
.borderBotCol1 {
border-bottom: 3px solid #5b9ff0;
}
.borderBotCol2 {
border-bottom: 3px solid #b8bcc4;
}
.line {
position: relative;
width: 100px;
height: 20px;
margin-top: 21px;
margin-left: -3px;
z-index: 3;
border-left: 4px solid white;
/* 向右的箭头 */
.item {
position: absolute;
right: -6px;
top: 10px;
float: left;
clear: both;
margin-bottom: 23px;
}
.arrow-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
}
}
.lifeBox {
display: inline-flex;
position: relative;
width: 220px;
.lifeBoxfish {
line-height: 50px;
text-align: center;
width: 200px;
// padding: 0 20px;
height: 50px;
border: 3px solid;
margin: 10px 0 20px 8px;
background: white;
.ivu-tag-dot{
font-weight: bolder;
font-size: 14px;
height: 100%;
line-height: 43px;
border: 0px solid #e8eaec !important;
width: 100%;
background: transparent !important;
}
.borderR {
border-right-color: #0dd78d;
}
.borderR1 {
border-right-color: transparent;
}
}
.boxBorder {
border-color: #0dd78d;
}
.boxBorder1 {
border-color: #5b9ff0;
}
.boxBorder2 {
border-color: #b8bcc4;
}
.arrow-left {
position: relative;
/*右箭头*/
.right {
width: 30px;
height: 50px;
position: absolute;
left: 8px;
top: 10px;
}
.right-arrow,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 25px transparent dashed;
border-right: 2px transparent dashed;
border-bottom: 25px transparent dashed;
/* border-left: 10px white solid !important; */
overflow: hidden;
}
.right-arrow {
left: 1px;
/*重要*/
border-left: 17px solid;
}
.right-arrow2 {
border-left: 16px white solid;
}
.rightCol{
border-left-color: #0dd78d;
}
.rightCol1{
border-left-color: #5b9ff0;
}
.rightCol2{
border-left-color: #b8bcc4;
}
}
.arrow-right {
position: relative;
/*右箭头*/
.right {
width: 30px;
height: 50px;
position: absolute;
left: -2px;
top: 10px;
}
.right-arrow,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 25px transparent dashed;
border-right: 2px transparent dashed;
border-bottom: 25px transparent dashed;
/* border-left: 10px white solid !important; */
overflow: hidden;
}
.right-arrow {
left: 1px;
/*重要*/
border-left: 17px solid;
}
.right-arrow2 {
border-left: 16px white solid;
}
.rightCol{
border-left-color: #0dd78d;
}
.rightCol1{
border-left-color: #5b9ff0;
}
.rightCol2{
border-left-color: #b8bcc4;
}
}
}
}
</style>
\ No newline at end of file
components/page/state.vue
View file @ 27eb9b6d
<template> <template>
<div class="ib"> <div class="ib" @click="showLife">
<div class="ib" v-if="!isMore"> <div class="ib" v-if="!isMore">
<span v-if="type=='text'" :style="style">{{name}}</span> <span v-if="type=='text'" :style="style">{{name}}</span>
<Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag> <Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag>
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
<Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag> <Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag>
<Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />&nbsp; <Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
</div> </div>
<Modal v-model="modal" title="生命周期" width="800" footer-hide :mask-closable="false">
<component :is="detail" :code="code" :value="value" :mode="mode" />
</Modal>
</div> </div>
</template> </template>
<script> <script>
...@@ -18,11 +21,14 @@ export default { ...@@ -18,11 +21,14 @@ export default {
name: "state", name: "state",
data() { data() {
return { return {
mode:'0',
name: "", name: "",
isMore: false, isMore: false,
modal:false,
item: {}, item: {},
items: [], items: [],
data: [] data: [],
detail:null,
}; };
}, },
props: { props: {
...@@ -94,6 +100,10 @@ export default { ...@@ -94,6 +100,10 @@ export default {
this.items = items; this.items = items;
} }
} }
,showLife(){
this.modal= true ;
this.detail=()=>import("./life");
}
}, },
computed: { computed: {
tagcolor() { tagcolor() {
......
pages/test/api.js
View file @ 27eb9b6d
export const exampleRouter = [ export const exampleRouter = [{
{
// path:'/test/example/components/:id', // path:'/test/example/components/:id',
route: '/test/example/components', route: '/test/example/components',
icon: 'md-add', icon: 'md-add',
...@@ -29,7 +28,12 @@ export const exampleRouter = [ ...@@ -29,7 +28,12 @@ export const exampleRouter = [
name: 'components-select', name: 'components-select',
icon: 'md-arrow-dropdown' icon: 'md-arrow-dropdown'
}, },
{
route: '/test/statueLine',
title: '生命周期',
name: 'components-statuLine',
icon: 'md-arrow-dropdown'
},
] ]
}, }, ]
]
export default exampleRouter; export default exampleRouter;
\ No newline at end of file
pages/test/statueLine/index.vue 0 → 100644
View file @ 27eb9b6d
<template>
<div class="datalife">
<div class="bigBing" v-if="mode">
<div v-for="(item, index) in data" :key="index" class="linebox">
<div class="box" :class="curIndex == index ? 'boxBorder1':curIndex<index ? ' boxBorder':' boxBorder2' " >
<Tag type="dot" :color="item.color?item.color:tagColor" >{{ item.name }}</Tag>
</div>
<div class="line" :class="[curIndex == index ? 'borderBotCol1' : curIndex<index? 'borderBotCol':'borderBotCol2']" v-if="bigNum != index+1" >
<span class="item arrow-right" :class="[curIndex==index? 'boxBorder1' :curIndex<index? 'boxBorder':'boxBorder2']" ></span>
</div>
</div>
</div>
<div class="bigBing" v-else>
<div class="lifeBox" v-for="(item, index) in data" :key="index">
<div class="arrow-left">
<b class="right" v-if="index != 0">
<i class="right-arrow" :class="curIndex==index ? 'rightCol1' :curIndex<index ? 'rightCol2' : 'rightCol' " ></i><i class="right-arrow2"></i>
</b>
</div>
<div class="lifeBoxfish" :class="[curIndex==index? 'boxBorder1' : curIndex<index ? 'boxBorder2' : 'boxBorder', bigNum != index + 1 ? 'borderR' : 'borderR1', ]" >
<Tag type="dot" :color="item.color?item.color:tagColor">{{ item.name }}</Tag>
</div>
<div class="arrow-right">
<b class="right" v-if="bigNum != index + 1"
><i class="right-arrow" :class="curIndex==index ? 'rightCol1' : curIndex<index ? 'rightCol2' : 'rightCol' " ></i><i class="right-arrow2"></i
></b>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// name: "",
data() {
return {
data:[],
tagColor:'#000',
bigNum: 0,
curIndex:-1,
};
},
props:{
code:{
//字典编码
type:String,
default:"Process.routing_detail.resource_type"
},
row:{
//行数据
type:Object
},
value:{
//当前值
type:[String,Number]
},
mode:{
//显示形式
type:String,
default:""
}
},
watch: {},
created() {
this.data = this.$store.getters.dictionaryByKey(this.code) || [];
this.bigNum = this.data.length;
this.data.forEach((u,i)=>{
if(u.code==this.value){
this.curIndex=i;
}
})
console.log("data",this.data)
},
methods: {
},
};
</script>
<style lang="less" >
.datalife {
.bigBing{
width: 100%;
}
.linebox {
display: inline-flex;
.box {
background: white;
border-radius: 4px;
width: 120px;
height: 50px;
line-height: 50px;
margin: 10px 0 20px 8px;
text-align: center;
border: 3px solid;
.ivu-tag-dot{
font-weight: bolder;
font-size: 14px;
height: 100%;
line-height: 43px;
border: 0px solid #e8eaec !important;
width: 100%;
background: transparent !important;
}
}
.boxBorder {
border-color: #0dd78d;
}
.boxBorder1 {
border-color: #5b9ff0;
}
.boxBorder2 {
border-color: #b8bcc4;
}
.borderBotCol {
border-bottom: 3px solid #0dd78d;
}
.borderBotCol1 {
border-bottom: 3px solid #5b9ff0;
}
.borderBotCol2 {
border-bottom: 3px solid #b8bcc4;
}
.line {
position: relative;
width: 100px;
height: 20px;
margin-top: 21px;
margin-left: -3px;
z-index: 3;
border-left: 4px solid white;
/* 向右的箭头 */
.item {
position: absolute;
right: -6px;
top: 10px;
float: left;
clear: both;
margin-bottom: 23px;
}
.arrow-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
}
}
.lifeBox {
display: inline-flex;
position: relative;
width: 220px;
.lifeBoxfish {
line-height: 50px;
text-align: center;
width: 200px;
// padding: 0 20px;
height: 50px;
border: 3px solid;
margin: 10px 0 20px 8px;
background: white;
.ivu-tag-dot{
font-weight: bolder;
font-size: 14px;
height: 100%;
line-height: 43px;
border: 0px solid #e8eaec !important;
width: 100%;
background: transparent !important;
}
.borderR {
border-right-color: #0dd78d;
}
.borderR1 {
border-right-color: transparent;
}
}
.boxBorder {
border-color: #0dd78d;
}
.boxBorder1 {
border-color: #5b9ff0;
}
.boxBorder2 {
border-color: #b8bcc4;
}
.arrow-left {
position: relative;
/*右箭头*/
.right {
width: 30px;
height: 50px;
position: absolute;
left: 8px;
top: 10px;
}
.right-arrow,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 25px transparent dashed;
border-right: 2px transparent dashed;
border-bottom: 25px transparent dashed;
/* border-left: 10px white solid !important; */
overflow: hidden;
}
.right-arrow {
left: 1px;
/*重要*/
border-left: 17px solid;
}
.right-arrow2 {
border-left: 16px white solid;
}
.rightCol{
border-left-color: #0dd78d;
}
.rightCol1{
border-left-color: #5b9ff0;
}
.rightCol2{
border-left-color: #b8bcc4;
}
}
.arrow-right {
position: relative;
/*右箭头*/
.right {
width: 30px;
height: 50px;
position: absolute;
left: -2px;
top: 10px;
}
.right-arrow,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 25px transparent dashed;
border-right: 2px transparent dashed;
border-bottom: 25px transparent dashed;
/* border-left: 10px white solid !important; */
overflow: hidden;
}
.right-arrow {
left: 1px;
/*重要*/
border-left: 17px solid;
}
.right-arrow2 {
border-left: 16px white solid;
}
.rightCol{
border-left-color: #0dd78d;
}
.rightCol1{
border-left-color: #5b9ff0;
}
.rightCol2{
border-left-color: #b8bcc4;
}
}
}
}
</style>
\ No newline at end of file
plugins/iview.js
View file @ 27eb9b6d
...@@ -52,6 +52,7 @@ import imgUploadFile from '@/components/page/imgUploadFile.vue' ...@@ -52,6 +52,7 @@ import imgUploadFile from '@/components/page/imgUploadFile.vue'
import files from '@/components/page/files.vue' import files from '@/components/page/files.vue'
import FilesList from '@/components/page/filesList.vue' import FilesList from '@/components/page/filesList.vue'
import FilesView from '@/components/page/filesView.vue' import FilesView from '@/components/page/filesView.vue'
import Life from '@/components/page/life.vue'
import DataGrid from '@/components/page/dataGrid.vue' import DataGrid from '@/components/page/dataGrid.vue'
import TreeGrid from '@/components/page/treeGrid/index.vue' import TreeGrid from '@/components/page/treeGrid/index.vue'
...@@ -93,11 +94,11 @@ Vue.use(VueEditor) ...@@ -93,11 +94,11 @@ Vue.use(VueEditor)
Vue.use(Viewer) Vue.use(Viewer)
Viewer.setDefaults({ Viewer.setDefaults({
zIndexInline: 2017 zIndexInline: 2017
}) })
// Vue.use(Element, { // Vue.use(Element, {
// size: 'small', // size: 'small',
// zIndex: 3000 // zIndex: 3000
// }); // });
// 内置组件 // 内置组件
import iLink from '@/components/link'; import iLink from '@/components/link';
...@@ -126,7 +127,7 @@ Vue.component("Materiel", Materiel) ...@@ -126,7 +127,7 @@ Vue.component("Materiel", Materiel)
Vue.component("RoleSelect", RoleSelect) Vue.component("RoleSelect", RoleSelect)
Vue.component("UserExamSelect", UserExamSelect) Vue.component("UserExamSelect", UserExamSelect)
Vue.component("WorkShopSelect", WorkShopSelect) Vue.component("WorkShopSelect", WorkShopSelect)
Vue.component("WorkShopName",WorkShopName) Vue.component("WorkShopName", WorkShopName)
Vue.component("workShopDefault", workShopDefault) Vue.component("workShopDefault", workShopDefault)
Vue.component("WorkShop", WorkShop) Vue.component("WorkShop", WorkShop)
Vue.component("EquipSelect", EquipSelect) Vue.component("EquipSelect", EquipSelect)
...@@ -146,20 +147,21 @@ Vue.component("OutputTime", OutputTime) ...@@ -146,20 +147,21 @@ Vue.component("OutputTime", OutputTime)
Vue.component("ViewerImg", ViewerImg) Vue.component("ViewerImg", ViewerImg)
Vue.component("StoreTree", StoreTree) Vue.component("StoreTree", StoreTree)
Vue.component("StoreSelect", StoreSelect) Vue.component("StoreSelect", StoreSelect)
Vue.component("ImportExcel",ImportExcel) Vue.component("ImportExcel", ImportExcel)
Vue.component("CustomProperties",CustomProperties) Vue.component("CustomProperties", CustomProperties)
Vue.component("InputCode",InputCode) Vue.component("InputCode", InputCode)
Vue.component("Pictrue",Pictrue) Vue.component("Pictrue", Pictrue)
Vue.component("WordTree",WordTree) Vue.component("WordTree", WordTree)
Vue.component("Actions",Actions) Vue.component("Actions", Actions)
Vue.component("TimeDifference",TimeDifference) Vue.component("TimeDifference", TimeDifference)
Vue.component("Life", Life)
//注入mock //注入mock
// require("../mock") // require("../mock")
Vue.prototype.$api=request; Vue.prototype.$api = request;
Vue.prototype.$http=Api; Vue.prototype.$http = Api;
Vue.prototype.$u = Henq; Vue.prototype.$u = Henq;
export default ({ export default ({
app, app,
...@@ -199,7 +201,7 @@ export default ({ ...@@ -199,7 +201,7 @@ export default ({
} }
} }
Vue.config.errorHandler = function (error, instance, info) { Vue.config.errorHandler = function(error, instance, info) {
Vue.nextTick(() => { Vue.nextTick(() => {
// store 追加 log // store 追加 log
store.dispatch('admin/log/push', { store.dispatch('admin/log/push', {
...@@ -223,8 +225,8 @@ export default ({ ...@@ -223,8 +225,8 @@ export default ({
}) })
} }
Vue.directive('auth',{ Vue.directive('auth', {
inserted (el, binding, vnode) { inserted(el, binding, vnode) {
const { value } = binding; const { value } = binding;
const access = store.state.admin.user.info.access; const access = store.state.admin.user.info.access;
...@@ -235,17 +237,17 @@ export default ({ ...@@ -235,17 +237,17 @@ export default ({
} }
} }
} }
} ) })
Vue.directive('paste', { Vue.directive('paste', {
bind(el, binding, vnode) { bind(el, binding, vnode) {
el.addEventListener('paste', function (event) { //这里直接监听元素的粘贴事件 el.addEventListener('paste', function(event) { //这里直接监听元素的粘贴事件
binding.value(event) binding.value(event)
}) })
} }
}) })
// 防重复点击(指令实现) // 防重复点击(指令实现)
Vue.directive('noClick', { Vue.directive('noClick', {
inserted (el, binding) { inserted(el, binding) {
el.addEventListener('click', () => { el.addEventListener('click', () => {
if (!el.disabled) { if (!el.disabled) {
el.disabled = true el.disabled = true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment