chaoshi/src/pages/erp/want/wantDetail.vue

<template>
	<Drawer :closable="false" width="1000" class-name="order_box" v-model="modals" :styles="{ padding: 0 }">

		<Card :bordered="false" dis-hover class="ivu-mt">
			<Tabs v-model="activeName">
				<TabPane v-for="(item, index) in list" :key="index" :label="item.label" :name="item.val">
					<template v-if="item.val === 'info'">
						<Table :columns="columns" :data="info.info" ref="table" 
							no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
							<template slot-scope="{ row,index }" slot="price">
								<div >{{row.price*1}}元/{{row.unit_name}}</div>
							</template>
						</Table>
					</template>
					<template v-if="item.val === 'base'">
						<div class="user-info">
							<div class="section" v-if=" info.ware && info.ware.id">
								<div class="section-hd">要货仓库</div>
								<div class="section-bd" >
									<div class="item">
										<div>仓库ID：</div>
										<div class="value">{{ info.ware.id}}</div>
									</div>
									<div class="item">
										<div>仓库名称：</div>
										<div class="value">{{ info.ware.title}}</div>
									</div>
									<div class="item">
										<div>手机号码：</div>
										<div class="value">{{ info.ware.phone}}</div>
									</div>
									<div class="item">
										<div>详细地址：</div>
										<div class="value">{{info.ware.detailed_address}}</div>
									</div>
								</div>
							</div>
							<div class="section" v-if=" info.tware && info.tware.id">
								<div class="section-hd">出货仓库</div>
								<div class="section-bd" >
									<div class="item">
										<div>仓库ID：</div>
										<div class="value">{{ info.tware.id}}</div>
									</div>
									<div class="item">
										<div>仓库名称：</div>
										<div class="value">{{ info.tware.title}}</div>
									</div>
									<div class="item">
										<div>手机号码：</div>
										<div class="value">{{ info.tware.phone}}</div>
									</div>
									<div class="item">
										<div>详细地址：</div>
										<div class="value">{{info.tware.detailed_address}}</div>
									</div>
								</div>
							</div>
							<div class="section" v-if=" info.store && info.store.id">
								<div class="section-hd">要货仓库</div>
								<div class="section-bd" >
									<div class="item">
										<div>仓库ID：</div>
										<div class="value">{{ info.store.id}}</div>
									</div>
									<div class="item">
										<div>仓库名称：</div>
										<div class="value">{{ info.store.name}}</div>
									</div>
									<div class="item">
										<div>手机号码：</div>
										<div class="value">{{ info.store.phone}}</div>
									</div>
									<div class="item">
										<div>详细地址：</div>
										<div class="value">{{info.store.detailed_address}}</div>
									</div>
								</div>
							</div>
							<div class="section" v-if=" info.tstore && info.tstore.id">
								<div class="section-hd">出货仓库</div>
								<div class="section-bd" >
									<div class="item">
										<div>仓库ID：</div>
										<div class="value">{{ info.tstore.id}}</div>
									</div>
									<div class="item">
										<div>仓库名称：</div>
										<div class="value">{{ info.tstore.name}}</div>
									</div>
									<div class="item">
										<div>手机号码：</div>
										<div class="value">{{ info.tstore.phone}}</div>
									</div>
									<div class="item">
										<div>详细地址：</div>
										<div class="value">{{info.tstore.detailed_address}}</div>
									</div>
								</div>
							</div>
							<div class="section" v-if="info.cuser && info.cuser.id">
								<div class="section-hd">创建人</div>
								<div class="section-bd" >
									<div class="item">
										<div>创建人ID：</div>
										<div class="value">{{ info.cuser.id}}</div>
									</div>
									<div class="item">
										<div>创建人名称：</div>
										<div class="value">{{ info.cuser.staff_name}}</div>
									</div>
									<div class="item">
										<div>手机号码：</div>
										<div class="value">{{ info.cuser.phone}}</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</TabPane>
			</Tabs>
		</Card>
	</Drawer>

</template>

<script>
	import {
		getGodownList,
		createUser,
		getUserInfo,
		getWantInfo
	} from "@/api/erp";
	import Setting from "@/setting";

	export default {
		name: 'wantDetail',
		data() {
			return {
				info: {},
				roterPre: Setting.roterPre,
				psInfo: {},
				modals: false,
				activeName: 'base',
				list: [{
						val: 'base',
						label: '基础信息'
					},{
						val: 'info',
						label: '商品信息'
					},
					
				],
				ckColumns: [
					{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "title",
						key: "title",
						width: 200,
					},
				],
				columns: [{
					title: "ID",
					key: "product_id",
					width: 80,
				},
				{
					title: "商品名称",
					key: "product_name",
					width: 150,
				},
				{
					title: "要货数量",
					key: "want_product_num",
					width: 120,
				},
				{
					title: "单位",
					key: "unit_name",
					width: 75,
				},
				 ]
			}
		},
		watch: {

		},
		created() {},
		methods: {
			deit() {
				this.$router.push({
					path: this.roterPre + "/erp/user_add?id=" + this.formValidate.id
				});
			},
			getInfo(id) {
				getWantInfo(id).then(res => {
					console.log(res, 'res');
					this.modals = true
					this.info = res.data
				}).catch(err => {
					this.modals = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.ivu-modal-body {
		padding: 0;
	}

	.user-info {
		.section {
			padding: 25px 25px;
			border-bottom: 1px dashed #EEEEEE;
	
			&-hd {
				padding-left: 10px;
				border-left: 3px solid #1890FF;
				font-weight: 500;
				font-size: 14px;
				line-height: 16px;
				color: #303133;
			}
	
			&-bd {
				display: flex;
				flex-wrap: wrap;
			}
	
			.item {
				// flex: 0 0 calc(~"(100% - 60px) / 3");
				width: 25%;
				display: flex;
				margin: 16px 30px 0 0;
				font-size: 13px;
				color: #606266;
	
				&:nth-child(3n+3) {
					margin: 16px 0 0;
				}
			}
	
			.value {
				flex: 1;
			}
	
			.avatar {
				width: 60px;
				height: 60px;
				overflow: hidden;
	
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.user-row {
		padding: 30px 35px 0;

		&-text {
			flex: 1;
			align-self: center;
		}

		&-action {

			.ivu-btn {
				margin-left: 12px;
				font-size: 13px !important;
				color: rgba(0, 0, 0, 0.85);

				&:first-child {
					margin-left: 0;
				}

				&.ivu-btn-primary {
					border-color: #1890FF;
					background-color: #1890FF;
					color: #FFFFFF;
				}

				&.ivu-btn-success {
					border-color: #00C050;
					background-color: #00C050;
					color: #FFFFFF;
				}
			}
		}

		.nickname {
			font-weight: 500;
			font-size: 16px;
			line-height: 16px;
			color: rgba(0, 0, 0, 0.85);
		}

		.iconfont {
			margin-left: 7px;
			font-size: 18px;

			&:nth-child(2) {
				margin-left: 9px;
			}

			&.iconxiaochengxu {
				color: #007DFF;
			}

			&.icongongzhonghao {
				color: #00BF00;
			}

			&.iconPC {
				color: #F69B00;
			}

			&.iconh5 {
				color: #9F5CE3;
			}

			&.iconapp {
				color: #E36734;
			}
		}

		.level {
			margin-top: 5px;

			img {
				width: 42px;
				height: 20px;
				vertical-align: middle;

				+span {
					margin-left: 7px;
				}
			}

			.vip {
				display: inline-block;
				width: 56px;
				height: 26px;
				padding-left: 30px;
				// background: url("../../../../assets/images/vip-bg.png") left top/100% 100% no-repeat;
				font-weight: bold;
				font-size: 9px;
				line-height: 26px;
				color: #5F7DB5;
				transform-origin: left;
				transform: scale(0.75, 0.75);
				vertical-align: middle;
			}
		}
	}

	.info-row {
		flex-wrap: nowrap;
		padding: 20px 35px 24px;

		&-item {
			flex: none;
			width: 155px;
			font-size: 14px;
			line-height: 14px;
			color: rgba(0, 0, 0, 0.85);

			&-title {
				margin-bottom: 12px;
				font-size: 13px;
				line-height: 13px;
				color: #666666;
			}
		}
	}

	.ivu-tabs {
		color: rgba(0, 0, 0, 0.85);

		/deep/ .ivu-tabs-bar {
			border-bottom: 0;
			margin-bottom: 0;
			background-color: #F5F7FA;

			.ivu-tabs-nav-container {
				font-size: 13px;
			}

			.ivu-tabs-ink-bar {
				display: none;
			}

			.ivu-tabs-tab {
				padding: 7px 19px !important;
				margin-right: 0;
				line-height: 26px;
			}

			.ivu-tabs-tab-active {
				background-color: #FFFFFF;
				color: rgba(0, 0, 0, 0.85);

				&:before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: #1890FF;
				}
			}
		}

		/deep/ .ivu-tabs-content {
			.ivu-tabs-tabpane {
				padding: 15px 15px !important;

				&:first-child {
					padding: 0 25px !important;
				}
			}
		}

		.product {
			display: flex;

			.image {
				width: 50px;
				height: 50px;
			}

			img {
				width: 100%;
				height: 100%;
				border-radius: 4px;
			}

			.title {
				flex: 1;
				padding-left: 13px;
				text-align: left;
			}
		}
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.dashboard-workplace {
		&-header {
			&-avatar {
				width: 64px;
				height: 64px;
				border-radius: 50%;
				margin-right: 16px;
				font-weight: 600;
			}

			&-tip {
				width: 82%;
				display: inline-block;
				vertical-align: middle;

				&-title {
					font-size: 13px;
					color: #000000;
					margin-bottom: 12px;
				}

				&-desc {
					&-sp {
						width: 33.33%;
						color: #17233D;
						font-size: 13px;
						display: inline-block;
					}
				}
			}

			&-extra {
				.ivu-col {
					p {
						text-align: right;
					}

					p:first-child {
						span:first-child {
							margin-right: 4px;
						}

						span:last-child {
							color: #808695;
						}
					}

					p:last-child {
						font-size: 22px;
					}
				}
			}
		}
	}
</style>
<style scoped lang="stylus">
	.user_menu>>>.ivu-menu {
		width 100% !important;
	}

	/deep/ .ivu-form-item {
		margin: 20px 0 0 0 !important;
	}

	.info-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 0 20px;

		div {
			width: 50%
		}
	}

	.tit {
		font-weight: bold;
		padding: 20px 0 10px 0;
	}
</style>