chaoshi/src/pages/erp/purchase/goodDetail.vue

<template>
	<div style="width: 100%">
		<Modal v-model="modals" scrollable footer-hide closable title="商品列表" :mask-closable="false" width="700">
			<Form ref="formValidate" :label-width="labelWidth" :label-position="labelPosition" class="tabform"
				@submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="12">
					<FormItem label="关键字：">
						<Input enter-button placeholder="请输入商品名称" element-id="name" v-model="formValidate.key" clearable />
					</FormItem>
					</Col>
					<Col span="4">
					<Button type="primary" icon="ios-search" @click="userSearchs">搜索</Button>
					</Col>
				</Row>
			</Form>
			<!-- <Divider dashed/> -->
			<Table :columns="columns" :data="tabList" ref="table" :loading="loading" no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果" class="table" @on-selection-change="change">
				<template slot-scope="{ row, index }" slot="store">
					<span> {{ row.my.stock }}{{row.my.unit_name}}</span>
				</template>
				<!-- product_num -->
				<template slot-scope="{ row, index }" slot="product_num">
					<span> {{ row.product_num }}{{row.unit_name || row.info['unit_name' + (row.unit_type == 0 ? '':(row.unit_type == 1?"_1":"_2"))]}}</span>
				</template>
				</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
					:page-size="formValidate.limit" />
			</div>
			<Button type="primary"  @click="ok" style="width: 100%;margin-top:20px;">确认</Button>
		</Modal>
	</div>
</template>

<script>
	import {
		commissionDetailApi,
		extractlistApi
	} from '@/api/finance';
	import {
		getGodownList,
		createGodown,
		getGodownInfo,
		getUserList,
		getOutGoods,
		getGoods
	} from "@/api/erp";
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'commissionDetails',
		data() {
			return {
				chooseGoods:[],
				key: '',
				wid: '',
				my_store_id: '',
				store_id: 0,
				type: 0,
				modals: false,
				spinShow: false,
				detailsData: {},
				Ids: 0,
				loading: false,
				formValidate: {
					page: 1, // 当前页
					limit: 10 ,// 每页显示条数
					key: '',
					wid: '',
					my_store_id: '',
					store_id: 0,
					who: 0,
				},
				total: 0,
				columns: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: 'ID',
						key: 'product_id',
						minWidth: 50
					},
					{
						title: '商品名称',
						key: 'store_name',
						minWidth: 200
					},
					{
						title: '仓库库存',
						slot: 'product_num',
						minWidth: 150
					},
					{
						title: '门店库存',
						key: 'stock',
						minWidth: 330
					}
				],
				tabList: []

			}
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		mounted() {
			// if (this.Ids) {
			//     this.getList();
			// }
			this.chooseGoods = []
		},
		methods: {
			clearChoose() {
				this.chooseGoods = []
				this.$refs.table.selectAll(false);
				
			},
			change(e) {
				this.chooseGoods = e
			},
			ok() {
				this.modals = false;
				 this.$emit('setGoods',this.chooseGoods);
			},
			// 时间
			onchangeTime(e) {
				this.formValidate.start_time = e[0];
				this.formValidate.end_time = e[1];
			},
			// 详情
			getDetails(id) {
				this.Ids = id;
				this.spinShow = true;
				commissionDetailApi(id).then(async res => {
					if (res.status === 200) {
						let data = res.data
						this.detailsData = data.user_info;
						this.spinShow = false;
					} else {
						this.spinShow = false;
						this.$Message.error(res.msg);
					}
				}).catch(res => {
					this.spinShow = false;
					this.$Message.error(res.msg);
				})
			},
			// 列表
			getList() {
				let getList;
				if (this.formValidate.who == 1) {
					this.formValidate.wid = ''
					
				} else {
					this.formValidate.store_id = 0
					getList = getGoods
				}
				if(this.formValidate.key == '') {
					return this.$Message.error('请输入关键字')
				}
				this.loading = true;
				getList(this.formValidate).then(async res => {
					let data = res.data;
					this.tabList = data.data;
					this.total = data.count;
					this.loading = false;
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				})
			},
			pageChange(index) {
				this.formValidate.page = index
				this.getList();
			},
			// 搜索
			userSearchs() {
				this.formValidate.page = 1;
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.table {
		.ivu-table-default {
			overflow-y: auto;
			max-height: 350px;
		}
	}

	.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: 12px;
						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>