Skip to content

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

配置组建Vcard

parent 87d7e6fc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 922 additions and 86 deletions
components/page/Vcard copy.vue 0 → 100644
View file @ 4466c659
<template>
<div class="cardPage">
<div
class="cardBox"
:class="{ borderCss: isCard }"
@click="clickCard(columns)"
:columns="columns"
>
<p class="topCard lh40 flex pr" slot="header">
<span class="checkSingle" >
<slot name="checkBox" v-if="checkKey">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
></Checkbox>
</slot>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">
<slot name="title">
{{ columns.topTitle }}
</slot>
</span>
<span class="f14 fwBold zh-ellip topCount">
<slot name="topCount">
{{ columns.topCount }}
</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>
</p>
<div class="countCard">
<div class="mainCount flex" slot="main">
<div class="imgBox" >
<slot name="img" v-if="showImgBox" >
<img :src="columns.srcImg" alt="图片"/>
</slot>
</div>
<div class="rightCount mr20 mt20 ml20" >
<!-- <Filed :span="24" :name="v.name" v-for="(v, i) in columns.filedList" :key="i">
{{ v.content}}
<Icon class="blueFont" type="md-sync" v-if="v.name == '工时：'"
/></Filed> -->
<slot name="fileLine" >
<Filed :span="24" :name="columns.countName4">
{{ columns.content4 }}
<!-- <Icon class="blueFont" type="md-sync" v-if="countIcon" /> -->
</Filed>
</slot>
</div>
</div>
<div class="bottomCard flex" slot="footer">
<span class="earlyWarn f14 fwBold mr20" v-if="columns.leftT1">
<Icon
:type="columns.oneIcon"
class="iconStyle"
v-show="iconShow"
/>{{ columns.leftT1 }}
</span>
<span class="overdue f14 fwBold mr20" v-if="columns.leftT2">
<Icon
:type="columns.twoIcon"
class="iconStyle"
v-show="iconShow"
/>{{ columns.leftT2 }}
</span>
<span class="rightMore">
<span
class="mr20"
@click="lookBtn(columns.id)"
v-if="columns.lookName"
>
<a
><Icon :type="columns.lookIcon" class="iconStyle" />{{
columns.lookName
}}</a
>
</span>
<span class="mr20 elliPsis fwBold" v-show="moreTrue" slot="extra">
<span class="elliPsisSpan">•••</span>
<span class="showMore hide">
<a v-if="columns.editName">
<span class="mr20" @click="editBtn(columns.id)">
<Icon :type="columns.editIcon" class="iconStyle" />
{{ columns.editName }}
</span>
</a>
<a v-if="columns.delName">
<span class="mr20" @click="delBtn(columns.id)">
<Icon :type="columns.delIcon" class="iconStyle" />{{
columns.delName
}}</span
>
</a>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "cardPage",
data() {
return {
// countIcon:this.countIcon , //中间刷新页面
// iconShow: this.iconShow, //是否有icon
// moreTrue: this.moreTrue, //详情
// checkKey: this.checkKey, //是否展示选择框
// showImgBox: this.showImgBox, //图片展示
single: false, //是否选中
isCard: false,
// columns:this.columns
// columns: {
// id: "1",
// borCol: "#2680eb",
// topTitle: "文档标题标题",
// topCount: "DDBH_20200519_1",
// markerName: "暂停中",
// srcImg: require("../../assets/images/logo.png"),
// leftT1: "预警",
// oneIcon: "ios-information-circle-outline",
// leftT2: "超期",
// twoIcon: "ios-alarm-outline",
// lookName: "详情",
// lookIcon: "ios-paper",
// editName: "编辑",
// editIcon: "ios-create-outline",
// delName: "删除",
// delIcon: "ios-trash-outline",
// countName1: "创建人：",
// content1: "张三",
// countName2: "创建时间：",
// content2: "今天",
// countName3: "创建人：",
// content3: "张三",
// countName4: "计划时间：",
// content4: "2020-10-10---2020-11-10",
// countName5: "",
// content5:
// "文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
// countName6: "成员：",
// content6: "张三",
// countName7: "工时：",
// content7: "3天4小时",
// filedList: [
// { name: "创建人：", content: "张三" },
// { name: "创建时间：", content: "今天" },
// { name: "计划时间：", content: "2020-10-10---2020-11-10" },
// {
// name: "",
// content:
// "文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
// },
// { name: "成员：", content: "张三" },
// { name: "工时：", content: "3天4小时" },
// ],
// },
};
},
props: {
// columns: {
// type: Object,
// default: {},
// },
// moreTrue: {
// type: Boolean,
// default: false,
// },
multiple: {
type: Boolean,
default: false,
},
img: {
type: Boolean,
default: false,
},
life:{
type: Object,
}
// moreTrue: {
// type: Boolean,
// default: false,
// },
// iconShow: {
// type: Boolean,
// default: false,
// },
// countIcon: {
// type: Boolean,
// default: false,
// },
},
created() {
// this.columns=this.row
console.log("传过来的值：", this.columns);
},
methods: {
lookBtn(id) {
console.log("详情", id);
event.stopPropagation();
},
editBtn(id) {
console.log("编辑", id);
event.stopPropagation();
},
delBtn(id) {
console.log("删除", id);
event.stopPropagation();
},
clickCard(columns) {
//点击整个card
console.log(columns);
this.isCard = !this.isCard;
this.single = !this.single;
},
singleChange(v, columns) {
console.log(v, columns);
event.stopPropagation();
},
},
};
</script>
<style lang="less" scoped>
.cardBox {
box-sizing: border-box;
width: 498px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.topCard {
height: 40px;
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;
}
.topCount {
max-width: 205px;
}
/* css3绘制三角形 */
.triangle {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid; /*定义的是实现边框*/
border-radius: 4px;
transform: rotate(-90deg);
right: 0;
top: 0;
}
.triangleName {
right: -5px;
top: -1px;
transform: rotate(45deg);
color: #ffffff;
}
}
.countCard {
height: auto;
.imgBox {
height: 178px;
// width: 178px;
max-width: 178px;
margin: 20px 0px 23px 14px;
border: 1px dashed #232323;
}
.rightCount {
// width: calc(100% - 192px);
min-width: calc(100% - 212px);
.filed-col {
display: inline-flex;
margin-bottom: 6px;
}
.filed-col > .value {
text-indent: 2em !important;
}
.blueFont {
margin-left: 5px;
color: #2680eb;
}
}
.bottomCard {
padding-bottom: 20px;
padding-left: 14px;
.earlyWarn {
color: #ffa000;
}
.overdue {
color: #fe7777;
}
.rightMore {
margin-left: auto;
.elliPsis {
color: #2680eb;
}
.elliPsis:hover {
.showMore {
display: inline-block;
}
.elliPsisSpan {
display: none;
}
}
}
.iconStyle {
margin-right: 4px;
}
}
}
img {
height: 100%;
width: 100%;
}
}
.cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard {
background: rgba(38, 128, 235, 0.4);
}
}
.borderCss {
border: 2px solid #2680eb;
}
</style>
\ No newline at end of file
components/page/Vcard.vue 0 → 100644
View file @ 4466c659
<template>
<div class="cardPage">
<div
class="cardBox"
:class="{ borderCss: isCard }"
@click="clickCard(columns)"
:columns="columns"
>
<p class="topCard lh40 flex pr" slot="header">
<span class="checkSingle" v-if="multiple">
<slot name="multiple">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
></Checkbox>
</slot>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">
<slot name="title">
{{ columns.topTitle }}
</slot>
</span>
<span class="f14 fwBold zh-ellip topCount">
<slot name="topCount">
{{ columns.topCount }}
</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>
</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="srcImg1" v-else alt="图片" />
</slot>
</div>
<div class="rightCount mr20 mt20 ml20">
<slot name="fileLine">
<Filed :name="columns.countName4">
{{ columns.content4 }}
<Icon class="blueFont" type="md-sync" />
</Filed>
</slot>
</div>
</div>
<div class="bottomCard flex" slot="footer">
<div v-if="leftBottom">
<span class="earlyWarn f14 fwBold mr20">
<slot name="leftBottom">
<Icon :type="columns.oneIcon" class="iconStyle" />{{
columns.leftT1
}}
<!-- 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>
</span>
</div>
<span class="rightMore" v-if="rightBottom">
<slot name="rightBottom">
<span class="mr20" @click="lookBtn(columns.id)">
<a
><Icon :type="columns.lookIcon" class="iconStyle" />{{
columns.lookName
}}</a
>
</span>
<span class="mr20 elliPsis fwBold">
<span class="elliPsisSpan">•••</span>
<span class="showMore hide">
<a v-if="columns.editName">
<span class="mr20" @click="editBtn(columns.id)">
<Icon :type="columns.editIcon" class="iconStyle" />
{{ columns.editName }}
</span>
</a>
<a v-if="columns.delName">
<span class="mr20" @click="delBtn(columns.id)"
><Icon :type="columns.delIcon" class="iconStyle" />
{{ columns.delName }}</span
>
</a>
</span>
</span>
</slot>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "cardPage",
data() {
return {
single: false, //是否选中
isCard: false,
// leftBottom: false, //左侧底部是否显示
// rightBottom: false, //右侧底部是否显示
columns: {},
srcImg1: require("../../assets/imgicon/chan_Pin.png"),
};
},
props: {
// columns: {
// type: Object,
// default: {},
// },
multiple: {
type: Boolean,
default: false,
},
img: {
type: Boolean,
default: false,
},
moreTrue: {
type: Boolean,
default: false,
},
leftBottom: {
//底部左侧显示
type: Boolean,
default: false,
},
rightBottom: {
//底部右侧显示
type: Boolean,
default: false,
},
// leftBtmicon:{//底部左侧图标
// type: Boolean,
// default: false,
// },
// leftBtmicon2:{
// type: Boolean,
// default: false,
// },
},
created() {
// this.columns=this.row
// console.log("传过来的值：", this.columns);
},
methods: {
lookBtn(id) {
console.log("详情", id);
event.stopPropagation();
},
editBtn(id) {
console.log("编辑", id);
event.stopPropagation();
},
delBtn(id) {
console.log("删除", id);
event.stopPropagation();
},
clickCard(columns) {
//点击整个card
console.log(columns);
this.isCard = !this.isCard;
this.single = !this.single;
},
singleChange(v, columns) {
console.log(v, columns);
event.stopPropagation();
},
},
};
</script>
<style lang="less" scoped>
.cardBox {
box-sizing: border-box;
width: 498px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.topCard {
height: 40px;
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;
}
.topCount {
max-width: 205px;
}
/* css3绘制三角形 */
.triangle {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid; /*定义的是实现边框*/
border-radius: 4px;
transform: rotate(-90deg);
right: 0;
top: 0;
}
.triangleName {
right: -5px;
top: -1px;
transform: rotate(45deg);
color: #ffffff;
}
}
.countCard {
height: auto;
.imgBox {
height: 178px;
max-width: 178px;
margin: 20px 0px 23px 14px;
border: 1px dashed #232323;
div {
line-height: 178px;
text-align: center;
width: 178px;
}
}
.rightCount {
min-width: calc(100% - 212px);
.filed-col {
display: flex;
margin-bottom: 6px;
}
.filed-col > .value {
text-indent: 2em !important;
}
.blueFont {
margin-left: 5px;
color: #2680eb;
}
}
.bottomCard {
padding-bottom: 20px;
padding-left: 14px;
.leftBtm {
display: inline-block;
}
.earlyWarn {
color: #ffa000;
}
.overdue {
color: #fe7777;
}
.rightMore {
margin-left: auto;
.elliPsis {
color: #2680eb;
}
.elliPsis:hover {
.showMore {
display: inline-block;
}
.elliPsisSpan {
display: none;
}
}
}
.iconStyle {
margin-right: 4px;
}
}
}
img {
height: 100%;
width: 100%;
}
}
.cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard {
background: rgba(38, 128, 235, 0.4);
}
}
.borderCss {
border: 2px solid #2680eb;
}
</style>
\ No newline at end of file
pages/cardList/index.vue
View file @ 4466c659
This diff is collapsed.
pages/produce/orderlist.vue
View file @ 4466c659
......@@ -43,7 +43,7 @@
></Button>
</template>
<template slot="card" slot-scope="{ row }">
<div
<!-- <div
class="body"
@click="
toExecute(
......@@ -94,14 +94,7 @@
height="100%"
/>
</div>
<!-- <img
:src="getUrl(row.productUrl)"
width="120"
height="120"
:title="row.productUrl"
style="border:#cacbd0 dashed 1px"
onerror="this.src='/imgicon/noPic_product.png';"
/>-->
</Col>
<Col span="16" class="row">
<p>{{ l("beginTime") }}：{{ row.beginTime }}</p>
......@@ -167,7 +160,39 @@
</Col>
</Row>
</div>
</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>
<template slot="fileLine">
<Filed :span="24" name="开始时间：">
{{ row.beginTime }}
</Filed>
<Filed :span="24" name="计划结束时间：">
{{ row.endTime }}
</Filed>
<Filed :span="14" name="生产数量：">
{{ row.quantity }}
</Filed>
<Filed :span="8" name="工序号：">
{{ row.taskSeq }}
</Filed>
<Filed :span="24" name="工序名称：">
{{ row.taskName }}
</Filed>
</template>
<template slot="leftBottom">
图号:{{ row.drawnNumber }}
</template>
</Vcard>
</template>
</DataGrid>
</div>
......@@ -183,6 +208,10 @@ export default {
},
data() {
return {
rightBottom:true,
leftBottom:true,
multiple: false,
img: true,
action: Api.index,
easySearch: {
keys: {
......
plugins/iview.js
View file @ 4466c659
......@@ -78,7 +78,7 @@ import WordTree from '@/components/page/wordTree.vue'
import Actions from '@/components/page/actions.vue'
import DateRange from '@/components/page/dateRange.vue'
import FilesViewer from '@/components/page/filesViewer.vue'
import Vcard from '@/components/page/Vcard.vue'
// import FormMaking from 'form-making'
......@@ -144,7 +144,7 @@ Vue.component("DepartmentSelect", DepartmentSelect)
Vue.component("ProductNumberSelect", ProductNumberSelect)
Vue.component("ProductSelect", ProductSelect)
Vue.component("ProductSelect1", ProductSelect1)
Vue.component("ProjectTaskTree",ProjectTaskTree)
Vue.component("ProjectTaskTree", ProjectTaskTree)
Vue.component("DTSpan", DTSpan)
Vue.component("DTSearch", DTSearch)
Vue.component("InputTime", InputTime)
......@@ -160,8 +160,8 @@ Vue.component("WordTree", WordTree)
Vue.component("Actions", Actions)
Vue.component("DateRange", DateRange)
Vue.component("Life", Life)
Vue.component("FilesViewer",FilesViewer)
Vue.component("FilesViewer", FilesViewer)
Vue.component("Vcard", Vcard)
//注入mock
// require("../mock")
......
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