psAdmin/src/pages/shop/classify.vue

<template>
	<div class="article-manager">
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="artFrom" :model="artFrom" :label-width="75" label-position="right" @submit.native.prevent>
				<Row type="flex">
					<Col v-bind="grid">
					<Button v-auth="['product-save-cate']" type="primary" class="bnt" icon="md-add"
						@click="addClass">添加分类</Button>
					</Col>
				</Row>
			</Form>
			<vxe-table class="mt25" highlight-hover-row :loading="loading" header-row-class-name="false"
				:tree-config="{ children: 'children' }" :data="tableData">
				<vxe-table-column field="merchant_category_id" title="ID" tooltip width="80"></vxe-table-column>
				<vxe-table-column field="category_name" tree-node title="分类名称" min-width="250"></vxe-table-column>
				<!-- <vxe-table-column field="pic" title="分类图标" min-width="100">
					<template v-slot="{ row }">
						<div class="tabBox_img" v-viewer v-if="row.pic">
							<img v-lazy="row.pic" />
						</div>
					</template>
				</vxe-table-column> -->
				<!-- <vxe-table-column field="is_show" title="状态" min-width="120">
					<template v-slot="{ row }">
						<i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0"
							@on-change="onchangeIsShow(row)" size="large">
							<span slot="open">显示</span>
							<span slot="close">隐藏</span>
						</i-switch>
					</template>
				</vxe-table-column> -->
				<vxe-table-column field="date" title="操作" width="250" fixed="right" align="center">
					<template v-slot="{ row, index }">
						<a @click="edit(row)">编辑</a>
						<Divider type="vertical" />
						<a @click="del(row, '删除商户分类', index)">删除</a>
					</template>
				</vxe-table-column>
			</vxe-table>
			<!--            <div class="acea-row row-right page">-->
			<!--                <Page :total="total" :current="artFrom.page" show-elevator show-total @on-change="pageChange"-->
			<!--                      :page-size="artFrom.limit"/>-->
			<!--            </div>-->
		</Card>
		<!-- 添加 编辑表单-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		lst,
		addcreate,
		getedit,
		editcategory,
		deletecategory,
		getCreate
	} from '@/api/shop';
	import editFrom from '../../components/from/from';
	export default {
		name: 'shop_shopClassify',
		components: {
			editFrom,
		},
		data() {
			return {
				treeSelect: [],
				FromData: null,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				loading: false,
				artFrom: {
					page: 1,
					limit: 15,
				},
				total: 0,
				tableData: [],
			};
		},
		computed: {
			...mapState('admin/userLevel', ['categoryId']),
		},
		mounted() {
			this.getList();
		},
		methods: {
			// 列表
			getList() {
				this.loading = true;
				lst(this.artFrom)
					.then(async (res) => {
						this.tableData = res.data
						console.log(this.tableData, 'info');
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.artFrom.page = index;
				this.getList();
			},
			// 添加
			addClass() {
				this.$modalForm(getCreate()).then(() => this.getList());
			},
			// 编辑
			edit(row) {
				console.log(row, 'info');
				this.$modalForm(getedit({}, row.merchant_category_id)).then(() => this.getList());
			},
			// 修改状态
			onchangeIsShow(row) {
				let data = {
					id: row.id,
					is_show: row.is_show,
				};
				setShowApi(data)
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 下拉树
			handleCheckChange(data) {
				let value = '';
				let title = '';
				this.list = [];
				this.artFrom.pid = 0;
				data.forEach((item, index) => {
					value += `${item.id},`;
					title += `${item.title},`;
				});
				value = value.substring(0, value.length - 1);
				title = title.substring(0, title.length - 1);
				this.list.push({
					value,
					title,
				});
				this.artFrom.pid = value;
				this.getList();
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `merchant/category/delete/${row.merchant_category_id}`,
					method: 'get',
					ids: '',
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 表格搜索
			userSearchs() {
				this.artFrom.page = 1;
				this.getList();
			},
		},
	};
</script>
<style scoped lang="stylus">
	.treeSel>>>.ivu-select-dropdown-list {
		padding: 0 10px !important;
		box-sizing: border-box;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

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