Skip to content

M
mes-ui
Commit e3f3d7bc authored by luo ying's avatar luo ying
Browse files
Options

修改的card

parent 6c11c918
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 142 deletions
components/page/Vcard.vue
View file @ e3f3d7bc
<template>
<div class="cardPage mt10 mb10">
<div class="cardPage">
<!-- :columns="rowCard" -->
<div
class="cardBox"
class="cardBox mb10"
:class="{ borderCss: isCard }"
@click="clickCard(columns)"
:columns="columns"
@click="clickCard(row)"
@mouseenter="enterCard"
@mouseleave="leaveCard"
>
<p class="topCard lh40 flex pr" slot="header">
<p
class="topCard lh40 flex pr"
:style="{ background: topStyle }"
slot="header"
>
<span class="checkSingle" v-if="multiple">
<slot name="multiple">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
@on-change="singleChange(single, row)"
></Checkbox>
</slot>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">
<slot name="title">
{{ columns.topTitle }}
<slot name="title" v-if="title">
{{ title }}
</slot>
</span>
<span class="f14 fwBold zh-ellip topCount">
<slot name="topCount">
{{ columns.topCount }}
<slot name="topCount" v-if="subtitle">
{{ subtitle }}
</slot>
</span>
<span
class="triangle pa"
v-show="columns.borCol"
:style="{
'border-color':
'transparent ' + columns.borCol + columns.borCol + ' transparent',
}"
></span>
<span class="triangleName pa f12 fwBold" v-show="columns.borCol">{{
columns.markerName
}}</span>
<slot name="colorBol">
<span
class="triangle pa"
:style="{
'border-right-color': life,
'border-bottom-color': life,
}"
></span>
<span class="triangleName pa f12 fwBold" v-if="lifeCode">
<state
code="taskList.status"
ref="state"
:value="lifeCode"
type="text"
:color="false"
></state>
</span>
</slot>
</p>
<div class="countCard">
<div class="mainCount flex" slot="main">
<div class="imgBox" v-if="img">
<slot name="img">
<img :src="columns.srcImg" v-if="columns.srcImg" alt="图片" />
<div
v-else-if="
columns.srcImg == null || columns.srcImg == underfined
"
>
无图片
</div>
<img :src="downUrl + srcImg" v-if="srcImg" alt="图片" />
<div v-else-if="!srcImg">无图片</div>
<img :src="srcImg1" v-else alt="图片" />
</slot>
</div>
<div class="rightCount mr20 mt20 ml20">
<slot name="fileLine">
<Filed :name="columns.countName4">
{{ columns.content4 }}
<Filed :name="countTitle">
{{ count }}
<Icon class="blueFont" type="md-sync" />
</Filed>
</slot>
</div>
</div>
<div class="bottomCard flex" slot="footer">
<div v-if="leftBottom">
<div>
<span class="earlyWarn f14 fwBold mr20">
<slot name="leftBottom">
<Icon :type="columns.oneIcon" class="iconStyle" />{{
columns.leftT1
}}
<slot name="leftBottom" v-if="leftOneName">
<Icon :type="leftOneIcon" class="iconStyle" />
{{ leftOneName }}
<!-- v-show="leftBtmicon" -->
</slot>
</span>
<span class="overdue f14 fwBold mr20">
<slot name="leftBottom2">
<Icon :type="columns.twoIcon" class="iconStyle" />{{
columns.leftT2
}}
<!-- v-show="leftBtmicon2" -->
<slot name="leftBottom2" v-if="leftTwoName">
<Icon :type="leftTwoIcon" class="iconStyle" />
{{ leftTwoName }}
</slot>
</span>
</div>
<!-- v-if="rightBottom"-->
<span class="rightMore">
<slot name="rightBottom">
<RightM :num="num" :rightM="rightBottom" >
<slot></slot>
</RightM>
</slot>
<slot name="rightBottom"> </slot>
</span>
</div>
</div>
......@@ -98,20 +97,24 @@ export default {
name: "cardPage",
data() {
return {
// num:3,
rightList: [],
// rightBottom: true,
life: "",
topStyle: "rgba(38, 128, 235, 0.2)",
countTitle: "",
count: "",
downUrl: fileUrlDown,
single: false, //是否选中
isCard: false,
// leftBottom: false, //左侧底部是否显示
// rightBottom: false, //右侧底部是否显示
columns: {},
// rowCard: {},
srcImg1: require("../../assets/imgicon/chan_Pin.png"),
};
},
props: {
// datas:{
// type:Array,
// default: [],
// },
// columns: {
// type: Object,
// default: [],
// },
multiple: {
type: Boolean,
default: false,
......@@ -120,37 +123,85 @@ export default {
type: Boolean,
default: false,
},
moreTrue: {
type: Boolean,
default: false,
srcImg: {
type: String,
default: "",
},
leftBottom: {
//底部左侧显示
moreTrue: {
type: Boolean,
default: false,
},
rightBottom: {
//底部右侧显示
type: Boolean,
default: false,
title: {
type: String,
default: "",
},
num:{
type: Number,
default: 0,
subtitle: {
type: String,
default: "",
},
// row: {
// type:[Array,Object],
// default: [],
// life: {
// type: String,
// default: "#666",
// },
lifeCode: {
type: [String, Number],
default: "",
},
leftOneName: {
type: String,
default: "",
},
leftOneIcon: {
type: String,
default: "",
},
leftTwoName: {
type: String,
default: "",
},
leftTwoIcon: {
type: String,
default: "",
},
row: {
type: Object,
default: [],
},
},
created() {
if (this.lifeCode) {
this.tdStyle(this.lifeCode);
}
// this.data = this.$store.getters.dictionaryByKey(this.code) || []; //rightM组件中用到
},
created() {},
methods: {
clickCard(columns) {
enterCard() {
if (this.multiple) {
this.topStyle = "rgba(38, 128, 235, 0.4)";
}
},
leaveCard() {
this.topStyle = "rgba(38, 128, 235, 0.2)";
},
tdStyle(val) {
//动态根据状态值加载状态值对应的颜色
let temDic = this.$store.getters.dictionaryByKey("taskList.status");
this.life = "";
temDic.forEach((s) => {
if (Number(s.code) == val) {
this.life = s.color;
}
});
},
clickCard(value) {
console.log(value);
//点击整个card
this.isCard = !this.isCard;
this.single = !this.single;
},
singleChange(v, columns) {
singleChange(v, rows) {
console.log(v, rows);
//checkbox
event.stopPropagation();
},
......@@ -158,28 +209,29 @@ export default {
};
</script>
<style lang="less" scoped>
<style lang="less" >
.cardBox {
min-height: 310px;
box-sizing: border-box;
width: 498px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
margin-bottom: 15px;
// margin-bottom: 15px;
.topCard {
height: 40px;
background: rgba(38, 128, 235, 0.2);
// background: rgba(38, 128, 235, 0.2);
border-radius: 8px 8px 0px 0px;
border-bottom: 1px dashed #2680eb;
.checkSingle {
margin-left: 16px;
// margin-right: 24px;
}
.titleName {
width: 190px;
// width: 190px;
min-width: 190px;
}
.topCount {
max-width: 205px;
// max-width: 205px;
min-width: 205px;
}
/* css3绘制三角形 */
.triangle {
......@@ -187,17 +239,20 @@ export default {
height: 0px;
border-width: 20px;
border-style: solid; /*定义的是实现边框*/
border-color: transparent;
border-radius: 4px;
transform: rotate(-90deg);
right: 0;
top: 0;
}
.triangleName {
right: -5px;
top: -1px;
right: -3px;
top: -3px;
transform: rotate(45deg);
color: #ffffff;
.ib > span {
font-size: 12px;
}
}
}
.countCard {
......@@ -252,9 +307,9 @@ export default {
}
.cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard {
background: rgba(38, 128, 235, 0.4);
}
// .topCard {
// background: rgba(38, 128, 235, 0.4);
// }
}
.borderCss {
border: 2px solid #2680eb;
......
components/page/rightM.vue
View file @ e3f3d7bc
......@@ -2,19 +2,18 @@
<div
class="rightM flex"
:class="{ mr10: num == 1 }"
v-if="rightM"
v-if="rightM && rightList"
@mouseleave="outPut"
>
<slot>
<op
v-for="(v, i) in data.slice(0, num)"
<slot >
<op v-if="rightList && rightList.slice(0, num).length > 0"
v-for="(v, i) in rightList.slice(0, num)"
:key="i"
:title="v.name"
:type="v.type"
:msg="v.msg"
:disable="v.disable"
@click="v.click(row,$event)"
v-if="data && data.slice(0, num).length > 0"
>
<Icon :type="v.icon==null || v.icon==undefined ? 'ios-paper':v.icon" v-if="v.type=='icon'|| v.type=='' || v.type==undefined || v.type==null "/>
<span v-if="v.name">
......@@ -24,20 +23,20 @@
<span
class="elliPsis fwBold"
slot="elliPsis"
v-if="data && data.length > num > 0"
v-if="rightList && rightList.length > num > 0"
>
<span :class="{ hide: inlines, mr10: !inlines }" @mouseenter="inFo"
>•••</span >
<span class="mr10" :class="{ inline: inlines, hide: !inlines }">
<op
v-for="(value, index) in data.slice(num)"
v-for="(value, index) in rightList.slice(num)"
:key="index"
:title="value.name"
:type="value.type"
:msg="value.msg"
:disable="value.disable"
@click="value.click(row,$event)"
v-if="data && data.slice(num).length >= num"
v-if="rightList && rightList.slice(num).length >= num"
>
<Icon :type="value.icon==''?'ios-paper':value.icon" v-if="value.type=='icon'|| value.type=='' || value.type==undefined || value.type==null"/>
<span v-if="value.name">
......@@ -59,11 +58,11 @@ export default {
},
props: {
row: {
type: [Array, Object],
default: [],
type:[Object,Array],
default: []
},
data: {
type: Array,
rightList: {
type:[Object,Array],
default: [],
},
num: {
......@@ -77,19 +76,12 @@ export default {
},
mounted() {
// console.log("$slots",this.$slots,this.$slots.default)
// if(this.data.length>0){
// this.data.map(v=>{
// if(v.icon='')
// })
// }
console.log(this.data.slice(0, this.num));
},
methods: {
inFo() {
this.inlines = true;
},
outPut() {
// console.log(this.inlines)
this.inlines = false;
},
},
......@@ -103,13 +95,5 @@ export default {
.elliPsis {
color: #2680eb;
}
// .elliPsis:hover {
// .showMore {
// display: inline-block;
// }
// .elliPsisSpan {
// display: none;
// }
// }
}
</style>
\ No newline at end of file
pages/produce/orderlist.vue
View file @ e3f3d7bc
......@@ -5,11 +5,11 @@
ref="grid"
:batch="false"
:type="typeInfo"
:span="8"
:span="6"
:lazy="true"
:conditions="easySearch"
:action="action"
:gutter="40"
:gutter="10"
>
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
......@@ -43,8 +43,8 @@
></Button>
</template>
<template slot="card" slot-scope="{ row }">
<!-- <div
<template slot="card" slot-scope="{ row }" >
<div
class="body"
@click="
toExecute(
......@@ -161,41 +161,40 @@
</Col>
</Row>
</div>
</div> -->
<Vcard :multiple="multiple" :img="img" :leftBottom="leftBottom">
<template slot="title">
{{ row.productName }}
</template>
<template slot="topCount">
{{ row.mesCode }}
</template>
<template slot="img">
<img :src="downUrl + row.productUrl" v-if="row.productUrl" />
</template>
</div>
<!-- <Vcard
v-if='row'
:row='row'
:img="img"
:srcImg='row.productUrl'
:title="row.productName"
:subtitle="row.mesCode"
:lifeCode="row.status"
:leftOneName='row.drawnNumber'
>
<template slot="fileLine">
<Filed :span="24" name="开始时间：">
<Filed :span="24" :name="l('beginTime')">
{{ row.beginTime }}
</Filed>
<Filed :span="24" name="计划结束时间：">
<Filed :span="24" :name="l('endTime')">
{{ row.endTime }}
</Filed>
<Filed :span="14" name="生产数量：">
<Filed :span="12" :name="l('quantity')">
{{ row.quantity }}
</Filed>
<Filed :span="8" name="工序号：">
<Filed :span="12" name="工序号：">
{{ row.taskSeq }}
</Filed>
<Filed :span="24" name="工序名称：">
{{ row.taskName }}
</Filed>
</template>
<template slot="leftBottom"> 图号:{{ row.drawnNumber }} </template>
<template slot="rightBottom">
<RightM :num="100" :rightM="rightBottom" :data="buttons" :row="row">
</template> -->
<!-- <template slot="leftBottom"> 图号:{{ row.drawnNumber }} </template> -->
<!-- <template slot="rightBottom">
<RightM :num="num" :rightM="rightBottom" :rightList="buttons" :row="row">
</RightM>
</template>
</Vcard>
</template> -->
<!-- </Vcard> -->
</template>
</DataGrid>
</div>
......@@ -211,10 +210,10 @@ export default {
},
data() {
return {
num: 2,
num: 2,
span: "9",
rightBottom: true,
leftBottom: true,
rightBottom: true,
multiple: false,
img: true,
action: Api.index,
......@@ -431,6 +430,8 @@ export default {
});
},
tdStyle(val) {
console.log(val);
// debugger
//动态根据状态值加载状态值对应的颜色
let temDic = this.$store.getters.dictionaryByKey("taskList.status");
let temColor = "#666";
......
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