chaoshi/src/pages/erp/product/index.vue

<template>
	<!-- 营销-积分商品 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 查询条件 -->
				<Form ref="tableFrom" inline :model="tableFrom" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<!-- <FormItem label="创建时间：" label-for="user_time">
            <DatePicker
                :editable="false"
                @on-change="onchangeTime"
                :value="timeVal"
                format="yyyy/MM/dd"
                type="datetimerange"
                placement="bottom-start"
                placeholder="自定义时间"
                class="mr20 input-add"
                :options="options"
            ></DatePicker>
          </FormItem> -->
					<!-- <FormItem label="上架状态：">
            <Select
                placeholder="请选择"
                clearable
                class="input-add"
                v-model="tableFrom.is_show"
            >
              <Option value="1">上架</Option>
              <Option value="0">下架</Option>
            </Select>
          </FormItem> -->
					<FormItem label="仓位搜索：" label-for="store_name">
						<Input class="input-add mr14" placeholder="请输入仓位名称" v-model="tableFrom.key" />
						<Button type="primary" @click="tableSearchs()">查询</Button>
					</FormItem>
					<!-- <Button
            v-auth="['marketing-store_seckill-create']"
            type="primary"
            icon="md-add"
            @click="addMore"
            class="mr10"
            >批量添加积分商品</Button
          > -->
					<!--<Button v-auth="['export-storeSeckill']" class="export" icon="ios-share-outline" @click="exports">导出</Button>-->
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 操作 -->
			<Button v-auth="['admin-erp-add_position']" type="primary" @click="add" class="mr10">添加商品</Button>
			<!-- 积分商品-表格 -->
			<Table :columns="columns1" :data="tableList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果" class="ivu-mt">
				<template slot-scope="{ row, index }" slot="passageway">
					<span> {{ row.bin_number.slice(0,2) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="control">
					<span> {{ row.bin_number.slice(2,3) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="layer">
					<span> {{ row.bin_number.slice(3,4) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="number">
					<span> {{ row.bin_number.slice(4) }}</span>
				</template>
				<template slot-scope="{ row, index }" slot="unit_name_1">
					<div v-if="row.unit_name_1">
						<div>名称：{{row.unit_name_1}}</div>
						<div>转换率：1{{row.unit_name_1}} = {{row.unit_rate_1*1}}{{row.unit_name}}</div>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="unit_name_2">
					<div v-if="row.unit_name_2">
						<div>名称：{{row.unit_name_2}}</div>
						<div>转换率：1{{row.unit_name_2}} = {{row.unit_rate_2*1}}{{row.unit_name}}</div>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="is_weigh">
					{{row.is_weigh == 1?'是': '否'}}
				</template>
				<template slot-scope="{ row, index }" slot="action">
				<!-- 	<a @click="look(row)">详情</a>
					<Divider type="vertical" /> -->
					<a @click="edit(row)">编辑</a>
					<!-- <Divider type="vertical" />
					<a @click="del(row, '删除仓位', index)">删除</a> -->
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
					:page-size="tableFrom.limit" />
			</div>
		</Card>
		<productDetail ref="productDetail"></productDetail>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		integralProductListApi,
		integralIsShowApi,
		storeSeckillApi,
	} from "@/api/marketing";
	import {
		getGoods,
		getUserInfo,
		getGoodInfo
	} from "@/api/erp";
	import {
		formatDate
	} from "@/utils/validate";
	import timeOptions from "@/utils/timeOptions";
	import Setting from "@/setting";
	import productDetail from './productDetail.vue'
	export default {
		name: "godownList",
		components: {
			productDetail
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, "yyyy-MM-dd");
				}
			},
		},
		data() {
			return {
				roterPre: Setting.roterPre,
				loading: false,
				options: timeOptions,
				columns1: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "商品名称",
						key: "store_name",
						minWidth: 90,
					},
					
					{
						title: "总销量",
						key: "all_sales",
						minWidth: 90,
					},
					{
						title: "总库存",
						key: "stock",
						minWidth: 90,
					},
					{
						title: "基础单位",
						key: "unit_name",
						minWidth: 90,
					},
					{
						title: "大单位",
						slot: "unit_name_1",
						minWidth: 90,
					},
					{
						title: "超大单位",
						slot: "unit_name_2",
						minWidth: 90,
					},
					{
						title: "商品条码",
						key: "bar_code",
						minWidth: 90,
					},
					{
						title: "成本价",
						key: "cost",
						minWidth: 90,
					},
					{
						title: "是否称重",
						slot: "is_weigh",
						minWidth: 90,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						width: 200,
					},
				],
				tableList: [],
				timeVal: [],
				grid: {
					xl: 7,
					lg: 10,
					md: 12,
					sm: 24,
					xs: 24,
				},
				tableFrom: {
					// integral_time: "",
					// is_show: "",
					// store_name: "",
					key: '',
					page: 1,
					limit: 10,
				},
				total: 0,
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getList();
		},
		methods: {
			look(row) {
				try{
					this.$refs.productDetail.getInfo(row.id)
				}catch(e){
					//TODO handle the exception
					
				}
				// getGoodInfo(row.id).then(res=> {
				// 	console.log(res,'商品详情');
				// })
				
			},
			// 添加
			add() {
				this.$router.push({
					path: this.roterPre + "/erp/product_add?id=0"
				});
			},
			addMore() {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/add_store_integral",
				});
			},
			orderList(row) {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/order_list",
					query: {
						product_id: row.id,
					},
				});
			},
			// 导出
			exports() {
				let formValidate = this.tableFrom;
				let data = {
					start_status: formValidate.start_status,
					status: formValidate.status,
					store_name: formValidate.store_name,
				};
				storeSeckillApi(data)
					.then((res) => {
						location.href = res.data[0];
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑
			edit(row) {
				this.$router.push({
					path: this.roterPre + "/erp/product_add?id=" + row.id
				});
			},
			// 一键复制
			copy(row) {
				this.$router.push({
					path: this.roterPre + "/marketing/store_integral/create/" + row.id + "/1",
				});
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `/erp/Warehouse/position_del/${row.id}`,
					method: "DELETE",
					ids: "",
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.tableList.splice(num, 1);
						if (!this.tableList.length) {
							this.tableFrom.page =
								this.tableFrom.page == 1 ? 1 : this.tableFrom.page - 1;
						}
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 列表
			getList() {
				this.loading = true;
				// this.tableFrom.start_status = this.tableFrom.start_status || "";
				// this.tableFrom.is_show = this.tableFrom.is_show || "";
				getGoods(this.tableFrom)
					.then(async (res) => {
						let data = res.data;
						this.tableList = data.data;
						this.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.tableFrom.page = index;
				this.getList();
			},
			// 表格搜索
			tableSearchs() {
				this.tableFrom.page = 1;
				this.getList();
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.tableFrom.integral_time = this.timeVal[0] ? this.timeVal.join("-") : "";
			},
			// 修改是否显示
			onchangeIsShow(row) {
				let data = {
					id: row.id,
					is_show: row.is_show,
				};
				integralIsShowApi(data)
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
		},
	};
</script>

<style scoped lang="stylus">
	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>