Commit 7dc51540 authored by renjintao's avatar renjintao

getdown

parents 603bc8b1 26d0af89
<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
<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() {
......
<template> <template>
<div> <div>
<Card> <Card>
<EditGrid :columns="columns" ref="grid" :items="list"> <EditGrid :columns="columns" ref="grid" :items="list"
<template slot="easySearch"> >
<Form ref="formInline" :model="easySearch" inline> <template slot="easySearch"><Form ref="formInline" :model="easySearch" inline><FormItem prop="keys"><Input placeholder="请输入关键字标题" v-model="easySearch.keys.value" /> </FormItem>
<FormItem prop="keys"><Input placeholder="请输入关键字标题" v-model="easySearch.keys.value" /> </FormItem> <FormItem><Button type="primary" @click="search">查询</Button>
<FormItem><Button type="primary" @click="search">查询</Button> </FormItem>
</FormItem> </Form></template>
</Form> <!-- <template slot="searchForm">
</template>
<!-- <template slot="searchForm">
<Search /> <Search />
</template> --> </template> -->
<template slot="buttons"> <template slot="buttons">
<Button type="primary" @click="add(null)">新增</Button> <Button type="primary" @click="add(null)">新增</Button>
</template> </template>
</EditGrid> </EditGrid>
</Card> </Card>
<Modal v-model="modal" :title="title" width="1200" footer-hide> <Modal v-model="modal" :title="title" width="1200" footer-hide>
<component :is="detail" :eid="curId" :v="row" @on-close="cancel" @on-ok="ok" /> <component :is="detail" :eid="curId" :v="row" @on-close="cancel" @on-ok="ok" />
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import Search from "./search"; import Search from "./search";
export default { export default {
name: "list", name: "list",
components: { components: {
Search, Search,
}, },
head: { head: {
title: "项目计划", title: "项目计划",
author: "henq", author: "henq",
description: "project_plan 10/19/2020 10:23:07 AM", description: "project_plan 10/19/2020 10:23:07 AM",
}, },
props: { props:{
eid: { eid:{
type: String type:String
},
data: {
type: Object,
default: () => {
return {
id: "33930562-a9f7-bd95-88ab-d01eb1c4c369",
title: "示例项目"
}
}
}
}, },
data() { data:{
type:Object,
default:()=>{
return { return {
entity: {}, id:"33930562-a9f7-bd95-88ab-d01eb1c4c369",
row: {}, title:"示例项目"
action: Api.index, }
easySearch: { }
keys: { }
op: "title", },
value: null data() {
}, return {
}, entity:{},
modal: false, row:{},
title: "新增", action: Api.index,
detail: null, easySearch: {
curId: null, keys: { op: "title", value: null },
list: [], },
columns: [ modal: false,
// { key:"id",title:this.$t("id") ,hide:true ,align:"left" ,high:true }, title: "新增",
// { key:"creationTime",title:this.l("creationTime") ,align:"left" ,high:true }, detail: null,
// { key:"creatorUserId",title:this.l("creatorUserId") ,align:"left" ,high:true }, curId:null,
// { key:"lastModificationTime",title:this.l("lastModificationTime") ,align:"left" ,high:true }, list: [],
// { key:"lastModifierUserId",title:this.l("lastModifierUserId") ,align:"left" ,high:true }, columns: [
// { key:"isDeleted",title:this.l("isDeleted") ,align:"left" ,high:true }, // { key:"id",title:this.$t("id") ,hide:true ,align:"left" ,high:true },
// { key:"deletionTime",title:this.l("deletionTime") ,align:"left" ,high:true }, // { key:"creationTime",title:this.l("creationTime") ,align:"left" ,high:true },
// { key:"deleterUserId",title:this.l("deleterUserId") ,align:"left" ,high:true }, // { key:"creatorUserId",title:this.l("creatorUserId") ,align:"left" ,high:true },
// { key:"projectId",title:this.l("projectId") ,align:"left" ,high:true }, // { key:"lastModificationTime",title:this.l("lastModificationTime") ,align:"left" ,high:true },
// { key:"upId",title:this.l("upId") ,align:"left" ,high:true }, // { key:"lastModifierUserId",title:this.l("lastModifierUserId") ,align:"left" ,high:true },
// { type: "selection", width: 80, align: "center" }, // { key:"isDeleted",title:this.l("isDeleted") ,align:"left" ,high:true },
{ // { key:"deletionTime",title:this.l("deletionTime") ,align:"left" ,high:true },
title: "操作", // { key:"deleterUserId",title:this.l("deleterUserId") ,align:"left" ,high:true },
key: "action", // { key:"projectId",title:this.l("projectId") ,align:"left" ,high:true },
width: 150, // { key:"upId",title:this.l("upId") ,align:"left" ,high:true },
align: "center", // { type: "selection", width: 80, align: "center" },
// render:(h,params)=>{ {
// return h("Actions" title: "操作",
// ,{ key: "action",
// attrs:{ width: 150,
// row:params, align: "center",
// render:(h,params)=>{
// }, // return h("Actions"
// on:{ // ,{
// 'on-click':this.rowclick // attrs:{
// } // row:params,
// }
// )
// }
render: (h, params) => { // },
return h("div", { // on:{
class: "action" // 'on-click':this.rowclick
}, [ // }
h( // }
"op", { // )
attrs: { // }
icon: "md-arrow-dropright-circle",
type: "icon", render: (h, params) => {
title: "派发", return h("div", { class: "action" }, [
oprate: "edit", h(
}, "op",
on: {
click: () => this.copy(params.row.id)
},
},
),
h(
"op", {
attrs: {
icon: "md-add",
type: "icon",
title: "新增子任务",
oprate: "edit",
},
on: {
click: () => this.add(params.row)
},
}
),
h(
"op", {
attrs: {
icon: "md-eye",
type: "icon",
title: "编辑",
oprate: "edit",
},
on: {
click: () => this.edit(params.row.id)
},
}
),
h(
"op", {
attrs: {
icon: "ios-trash",
type: "icon",
title: "删除",
oprate: "delete",
msg: "确认要删除吗?"
},
on: {
click: () => this.remove(params.row.id)
},
}
),
]);
},
},
{ {
key: "type", key: "type",
width: 90, width: 90,
...@@ -165,14 +103,19 @@ export default { ...@@ -165,14 +103,19 @@ export default {
high: true, high: true,
code: "mes.project_plan.Type", code: "mes.project_plan.Type",
}, },
),
h(
"op",
{ {
key: "title", attrs: { icon: "md-add",
title: this.l("title"), type: "icon",
align: "left", title: "新增子任务",
tree: true, oprate: "edit",},
easy: true, on: { click: () => this.add(params.row) },
high: true, }
}, ),
h(
"op",
{ {
key: "status", key: "status",
title: this.l("status"), title: this.l("status"),
...@@ -188,131 +131,163 @@ export default { ...@@ -188,131 +131,163 @@ export default {
type: "date" type: "date"
}, },
{ {
key: "endDate", attrs: { icon: "ios-trash",
title: this.l("endDate"), type: "icon",
align: "left", title: "删除",
high: true, oprate: "delete",
type: "date" msg: "确认要删除吗?" },
}, on: { click: () => this.remove(params.row.id) },
// {
// key: "attachment",
// title: this.l("attachment"),
// align: "left",
// high: true,
// },
{
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type: "users",
},
],
};
},
mounted() {
console.log(this);
this.search();
},
async fetch({
store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
ok() {
this.search();
this.modal = false;
this.curId = null;
},
search() {
// this.$refs.grid.reload(this.easySearch);
var params = {
conditions: [{
fieldName: "projectId",
conditionalType: 'Equal',
fieldValue: this.eid
}],
// conditions: []
};
Api.list(params).then((r) => {
let res = r.result;
var data = this.$u.toTree(
res,
null,
(u) => {
// console.log(u);
u.expanded = true;
u.selected = false;
u.checked = false;
},
"upId"
);
this.list = data;
});
},
// rowclick(row,li){
// return {
// test(){
// alert(1);
// }
// }
// },
add(row) {
if (row) {
this.curId = row.id;
this.row = row
} else {
this.curId = null;
this.row = {
projectId: this.data.id,
} }
} ),
]);
this.title = "新增"; },
this.detail = () => import("./add");
this.modal = true;
}, },
copy(id) { {
this.curId = id; key: "type",
this.title = "克隆"; width: 90,
this.detail = () => import("./add"); title: this.l("type"),
this.modal = true; align: "left",
high: true,
code: "mes.project_plan.Type",
}, },
view(id) { {
this.curId = id; key: "title",
this.title = "详情"; title: this.l("title"),
this.detail = () => import("./detail"); align: "left",
this.modal = true; tree: true,
easy: true,
high: true,
}, },
edit(id) { {
this.curId = id; key: "status",
this.title = "编辑"; title: this.l("status"),
this.detail = () => import("./edit"); align: "left",
this.modal = true; high: true,
code: "mes.project_plan.Status",
}, },
remove(id) { {
Api.delete(id).then((r) => { key: "startDate",
if (r.success) { title: this.l("startDate"),
this.search(); align: "left",
this.$Message.success("删除成功"); high: true
} ,type:"date"
});
},
cancel() {
this.curId = null;
this.modal = false;
}, },
l(key) { { key: "endDate", title: this.l("endDate"), align: "left", high: true,type:"date" },
let vkey = "project_plan" + "." + key; // {
return this.$t(vkey) || key; // key: "attachment",
// title: this.l("attachment"),
// align: "left",
// high: true,
// },
{
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type:"users",
}, },
],
};
},
mounted() {
console.log(this);
this.search();
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
ok() {
this.search();
this.modal = false;
this.curId = null;
}, },
search() {
// this.$refs.grid.reload(this.easySearch);
var params = {
conditions: [{
fieldName:"projectId",
conditionalType: 'Equal',
fieldValue:this.eid
}],
// conditions: []
};
Api.list(params).then((r) => {
let res = r.result;
var data = this.$u.toTree(
res,
null,
(u) => {
// console.log(u);
u.expanded = true;
u.selected = false;
u.checked = false;
},
"upId"
);
this.list =data;
});
},
// rowclick(row,li){
// return {
// test(){
// alert(1);
// }
// }
// },
add(row) {
if(row){
this.curId=row.id;
this.row=row
}else{
this.curId=null;
this.row={
projectId:this.data.id
}
}
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
},
copy(id) {
this.curId = id;
this.title = "克隆";
this.detail = () => import("./add");
this.modal = true;
},
view(id) {
this.curId = id;
this.title = "详情";
this.detail = () => import("./detail");
this.modal = true;
},
edit(id) {
this.curId = id;
this.title = "编辑";
this.detail = () => import("./edit");
this.modal = true;
},
remove(id) {
Api.delete(id).then((r) => {
if (r.success) {
this.search();
this.$Message.success("删除成功");
}
});
},
cancel() {
this.curId = null;
this.modal = false;
},
l(key) {
let vkey = "project_plan" + "." + key;
return this.$t(vkey) || key;
},
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
</style> </style>
\ No newline at end of file
...@@ -14,33 +14,45 @@ ...@@ -14,33 +14,45 @@
<Filed :span="12" :name="l('endDate') + ':'">{{ <Filed :span="12" :name="l('endDate') + ':'">{{
entity.endDate entity.endDate
}}</Filed> }}</Filed>
</Row> </Row>
</div> </div>
<ul> <ul>
<li> <li>
<a @click="details"> <Icon type="ios-log-in" />详情 </a> <a @click="details">
&nbsp; <Icon type="ios-log-in" />详情
<span>|</span> </a>
</li> &nbsp;
<li> <span>|</span>
<a @click="template"> <Icon type="ios-photos" />模版</a> </li>
&nbsp; <li>
<span>|</span> <a @click="template">
</li> <Icon type="ios-photos" />模版
<li> </a>
<a @click="task"> <Icon type="md-create" />任务 </a> &nbsp;
&nbsp; <span>|</span>
<span>|</span> </li>
</li> <li>
<li> <a @click="task">
<a @click="group"> <Icon type="md-create" />成员 </a> <Icon type="md-create" />任务
<span>|</span> </a>
</li> &nbsp;
<li> <span>|</span>
<a @click="task"> <Icon type="md-create" />动态 </a> </li>
<span>|</span> <li>
</li> <a @click="group">
</ul> <Icon type="md-create" />成员
</a>
&nbsp;
<span>|</span>
</li>
<li>
<a @click="task">
<Icon type="md-create" />动态
</a>
&nbsp;
<span>|</span>
</li>
</ul>
</div> </div>
<div class="body-document"> <div class="body-document">
<h4 v-text="title"></h4> <h4 v-text="title"></h4>
...@@ -91,14 +103,44 @@ export default { ...@@ -91,14 +103,44 @@ export default {
} }
this.detail = () => import("./details"); this.detail = () => import("./details");
}, },
group() { methods: {
// this.curId = this.eid; load(v) {
this.title = "成员管理"; Api.get({
this.detail = () => import("../groupUser/index1"); id: v
}, }).then((r) => {
l(key) { this.entity = r.result;
key = "project_main" + "." + key; // this.$emit("on-load");
return this.$t(key); });
},
details() {
this.title = "详细信息";
this.detail = () => import("./details");
},
template() {
// this.curId = this.eid;
this.title = "项目模板";
this.detail = () => import("../plan");
},
task() {
this.curId = this.eid;
this.title = "任务";
//this.detail = () => import("../task/index");
this.$router.push({
name: "project-task",
params: {
id: this.curId
}
});
},
group() {
this.title = "项目成员";
this.detail = () => import("../groupUser/index1");
},
l(key) {
key = "project_main" + "." + key;
return this.$t(key);
},
}, },
watch: { watch: {
eid(v) { eid(v) {
......
...@@ -412,12 +412,13 @@ export default { ...@@ -412,12 +412,13 @@ export default {
}; };
this.$refs.grid.reload(where); this.$refs.grid.reload(where);
}, },
updatepart(valId, valStatus) { updatestatus(valId, valStatus) {
let params = { let params = {
id: valId, id: valId,
status: valStatus, status: valStatus,
detail: ''
} }
Api.updatepart(params).then(r => { Api.updatestatus(params).then(r => {
if (r.success) { if (r.success) {
this.$refs.grid.load(); this.$refs.grid.load();
this.$Message.success('操作成功') this.$Message.success('操作成功')
...@@ -491,19 +492,4 @@ export default { ...@@ -491,19 +492,4 @@ export default {
} }
} }
} }
.actionCur {
a {
span {
padding: 4px;
}
i {
padding: 4px;
border-radius: 3px;
font-weight: bold;
font-size: 18px;
}
}
}
</style> </style>
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',
name: 'components', name: 'components',
title: '基础组件', title: '基础组件',
children: [{ children: [{
route: '/test/example/tag', route: '/test/example/tag',
title: 'tag组件', title: 'tag组件',
name: 'components-tag', name: 'components-tag',
icon: 'ios-albums' icon: 'ios-albums'
}, },
{ {
route: '/test/example/table', route: '/test/example/table',
title: '表格', title: '表格',
name: 'components-table', name: 'components-table',
icon: 'md-aperture' icon: 'md-aperture'
}, },
{ {
route: '/test/example/tree', route: '/test/example/tree',
title: '树', title: '树',
name: 'tree', name: 'tree',
icon: 'md-aperture' icon: 'md-aperture'
}, },
{ {
route: '/test/example/select', route: '/test/example/select',
title: 'select组件', title: 'select组件',
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
<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
...@@ -53,6 +53,7 @@ import imgUploadFile from '@/components/page/imgUploadFile.vue' ...@@ -53,6 +53,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'
...@@ -94,12 +95,12 @@ Vue.use(VueEditor) ...@@ -94,12 +95,12 @@ 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';
...@@ -128,7 +129,7 @@ Vue.component("Materiel", Materiel) ...@@ -128,7 +129,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("UserGroup", UserGroup) Vue.component("UserGroup", UserGroup)
...@@ -150,115 +151,116 @@ Vue.component("OutputTime", OutputTime) ...@@ -150,115 +151,116 @@ 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,
store store
}) => { }) => {
Vue.use(VueI18n) Vue.use(VueI18n)
Vue.use(VueDND) Vue.use(VueDND)
app.i18n = new VueI18n({ app.i18n = new VueI18n({
locale: 'zh-CN', locale: 'zh-CN',
messages: Languages messages: Languages
}); });
app.i18n.locale = "zh-CN" app.i18n.locale = "zh-CN"
Vue.use(ViewUI, { Vue.use(ViewUI, {
// locale:'zh-CN', // locale:'zh-CN',
i18n: (key, value) => app.i18n.t(key, value) i18n: (key, value) => app.i18n.t(key, value)
}) })
Vue.use(iViewPro); Vue.use(iViewPro);
Vue.use(BaiduMap, { Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc' ak: 'NMVkIGzyFBL6g3ekXIZqIYMCnvz74YOc'
})
Vue.prototype.$log = {
...util.log,
push(data) {
if (typeof data === 'string') {
// 如果传递来的数据是字符串
// 赋值给 message 字段
// 为了方便使用
// eg: this.$log.push('foo text')
store.dispatch('admin/log/push', {
message: data
});
} else if (typeof data === 'object') {
// 如果传递来的数据是对象
store.dispatch('admin/log/push', data);
}
}
}
Vue.config.errorHandler = function (error, instance, info) {
Vue.nextTick(() => {
// store 追加 log
store.dispatch('admin/log/push', {
message: `${info}: ${error.message}`,
type: 'error',
meta: {
error
// instance
}
});
// 只在开发模式下打印 log
if (process.env.NODE_ENV === 'development') {
util.log.capsule('iView Admin', 'ErrorHandler', 'error');
util.log.error('>>>>>> 错误信息 >>>>>>');
console.log(info);
util.log.error('>>>>>> Vue 实例 >>>>>>');
console.log(instance);
util.log.error('>>>>>> Error >>>>>>');
console.log(error)
}
}) })
} Vue.prototype.$log = {
...util.log,
push(data) {
if (typeof data === 'string') {
// 如果传递来的数据是字符串
// 赋值给 message 字段
// 为了方便使用
// eg: this.$log.push('foo text')
store.dispatch('admin/log/push', {
message: data
});
} else if (typeof data === 'object') {
// 如果传递来的数据是对象
store.dispatch('admin/log/push', data);
}
}
}
Vue.directive('auth',{ Vue.config.errorHandler = function(error, instance, info) {
inserted (el, binding, vnode) { Vue.nextTick(() => {
const { value } = binding; // store 追加 log
const access = store.state.admin.user.info.access; store.dispatch('admin/log/push', {
message: `${info}: ${error.message}`,
if (value && value instanceof Array && value.length && access && access.length) { type: 'error',
const isPermission = includeArray(value, access); meta: {
if (!isPermission) { error
el.parentNode && el.parentNode.removeChild(el); // instance
} }
} });
} // 只在开发模式下打印 log
} ) if (process.env.NODE_ENV === 'development') {
Vue.directive('paste', { util.log.capsule('iView Admin', 'ErrorHandler', 'error');
bind(el, binding, vnode) { util.log.error('>>>>>> 错误信息 >>>>>>');
el.addEventListener('paste', function (event) { //这里直接监听元素的粘贴事件 console.log(info);
binding.value(event) util.log.error('>>>>>> Vue 实例 >>>>>>');
}) console.log(instance);
util.log.error('>>>>>> Error >>>>>>');
console.log(error)
}
})
} }
})
// 防重复点击(指令实现) Vue.directive('auth', {
Vue.directive('noClick', { inserted(el, binding, vnode) {
inserted (el, binding) { const { value } = binding;
el.addEventListener('click', () => { const access = store.state.admin.user.info.access;
if (!el.disabled) {
el.disabled = true if (value && value instanceof Array && value.length && access && access.length) {
setTimeout(() => { const isPermission = includeArray(value, access);
el.disabled = false if (!isPermission) {
}, binding.value || 3000) el.parentNode && el.parentNode.removeChild(el);
}
}
} }
}) })
} Vue.directive('paste', {
}) bind(el, binding, vnode) {
// console.warn("this:",app.i18n.locale,app) el.addEventListener('paste', function(event) { //这里直接监听元素的粘贴事件
binding.value(event)
})
}
})
// 防重复点击(指令实现)
Vue.directive('noClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
// console.warn("this:",app.i18n.locale,app)
} }
\ No newline at end of file
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