花材管理

ghs/src/cool/request/index.js

@@ -24,9 +24,10 @@ import sassMember from '@/service/sass/member/index';
 import sassPtMember from '@/service/sass/pt-member/index';
 import sassFest from '@/service/sass/fest/index';
 import sassAuth from '@/service/sass/auth/index';
-
 import shop from '@/service/shop/index';
 import chat from '@/service/chat/index';
+import itemClass from '@/service/item-class/index';
+import item from '@/service/item/index';
 
 export function SET_SERVICE({ store }) {
 	// const files = require.context('@/service/', true, /\.js$/);
@@ -58,7 +59,9 @@ export function SET_SERVICE({ store }) {
 		sassFest,
 		sassAuth,
 		shop,
-		chat
+		chat,
+		itemClass,
+		item
 	};
 
 	Vue.prototype.$service = modules;

ghs/src/mock/userInfo.js

@@ -118,22 +118,6 @@ let userList = [
 	}
 ];
 
-let userInfo = {
-	createTime: '2019-06-25 10:20:20',
-	email: '123456@qq.com',
-	headImg: 'https://pic.qqtn.com/up/2019-11/2019110209212070747.jpg',
-	id: '1',
-	name: '超级管理员',
-	nickName: '超管',
-	passwordV: 1,
-	phone: '18000000000',
-	remark: '备注',
-	roleIdList: ['1'],
-	status: 1,
-	updateTime: '2019-11-12 09:40:27',
-	username: 'admin'
-};
-
 let menu = {
 	perms: [
 		'sys:menu:add',
@@ -241,11 +225,11 @@ let menu = {
             viewPath: 'views/order/add.vue',
             keepAlive: 1
 		},
-		// 商品管理
+		//花材管理
 		{
 			id: '4',
 			parentId: null,
-			name: '商品',
+			name: '花材',
 			type: 0,
 			icon: 'iconshangpinguanli',
 			orderNum: 4,
@@ -256,24 +240,24 @@ let menu = {
 		{
 			id: '401',
 			parentId: '4',
-			name: '商品列表',
+			name: '花材分类',
 			type: 1,
 			icon: 'icon-user',
 			orderNum: 4,
-			router: '/goods/list',
-			viewPath: 'views/goods/goods-list.vue',
+			router: '/item-class/list',
+			viewPath: 'views/item-class/list.vue',
 			keepAlive: 1
 		},
 		{
-			id: '403',
+			id: '405',
 			parentId: '4',
-			name: '添加商品',
+			name: '花材列表',
 			type: 1,
 			icon: 'icon-user',
 			orderNum: 4,
-			router: '/goods/add',
-			viewPath: 'views/goods/goods-add.vue',
-			keepAlive: 0
+			router: '/item/list',
+			viewPath: 'views/item/list.vue',
+			keepAlive: 1
 		},
 		{
 			id: '404',
@@ -286,6 +270,28 @@ let menu = {
 			viewPath: 'views/goods/category.vue',
 			keepAlive: 1
 		},
+		{
+			id: '402',
+			parentId: '4',
+			name: '商品列表',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 4,
+			router: '/goods/list',
+			viewPath: 'views/goods/goods-list.vue',
+			keepAlive: 1
+		},
+		{
+			id: '403',
+			parentId: '4',
+			name: '添加商品',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 4,
+			router: '/goods/add',
+			viewPath: 'views/goods/goods-add.vue',
+			keepAlive: 0
+		},
 		// 邀请有礼
 		{
 			id: '6',

ghs/src/service/item-class/index.js

@@ -0,0 +1,7 @@
+import { BaseService, Service } from '@/cool';
+
+@Service('item-class')
+export class ItemClassService extends BaseService {
+
+}
+export default new ItemClassService();

ghs/src/service/item/index.js

@@ -0,0 +1,7 @@
+import { BaseService, Service } from '@/cool';
+
+@Service('item-class')
+export class ItemService extends BaseService {
+
+}
+export default new ItemService();

ghs/src/store/modules/menu.js

@@ -120,30 +120,6 @@ let menu = {
 		'sys:log:clear'
 	],
 	menus: [
-		// {
-		// 	id: '48',
-		// 	parentId: '47',
-		// 	name: '文档',
-		// 	type: 1,
-		// 	icon: 'icon-favorfill',
-		// 	orderNum: 0,
-		// 	router: '/tutorial/doc',
-		// 	viewPath: 'https://docs.x-admin.com/#/',
-		// 	keepAlive: 1
-		// },
-		// 工作台
-		// {
-		// 	id: '1',
-		// 	parentId: null,
-		// 	name: '工作台',
-		// 	type: 0,
-		// 	icon: 'icongongzuotai',
-		// 	orderNum: 1,
-		// 	router: '/',
-		// 	viewPath: null,
-		// 	keepAlive: 1
-		// },
-		// 商家管理
 		{
 			id: '1',
 			parentId: null,

ghs/src/views/item-class/list.vue

@@ -0,0 +1,239 @@
+<template>
+	<div class="app-list-content">
+		<x-crud class="liu-crud-wrap" @load="onLoad">
+			<template #slot-tabs="{ scope }">
+				<el-tabs
+					class="liu-tabs"
+					type="border-card"
+					v-model="tabIndex"
+					@tab-click="handleClick"
+				>
+					<el-tab-pane
+						v-for="(item, index) in tabsData"
+						:key="index"
+						:label="item.text"
+						:name="item.key"
+					>
+					</el-tab-pane>
+				</el-tabs>
+			</template>
+
+			<template #table-column-avatarUrl="{scope}">
+				<cl-avatar
+					shape="square"
+					:size="32"
+					:src="scope.row.smallImgList[0]"
+					:style="{ margin: 'auto' }"
+				></cl-avatar>
+			</template>
+
+			<template #table-column-goodsName="{scope}">
+				<span>{{ scope.row.goodsName }}</span>
+			</template>
+
+			<template #table-column-inTurn="{scope}">
+				<span v-if="!sort.status">{{ scope.row.inTurn }}</span>
+
+				<el-input-number
+					ref="sort-input"
+					focus
+					size="mini"
+					v-else
+					v-model="scope.row.inTurn"
+					@blur="changeSort(scope.row)"
+				></el-input-number>
+			</template>
+
+			<!-- 排序 -->
+			<template #table-header-inTurn>
+				<div class="set-sort">
+					<span>排序</span>
+					<el-button
+						v-if="!sort.status"
+						icon="el-icon-edit-outline"
+						size="small"
+						type="text"
+						@click="showSort"
+						class="show"
+					></el-button>
+
+					<el-button class="hide" v-else size="mini" @click="hideSort" type="primary"
+						>完成</el-button
+					>
+				</div>
+			</template>
+
+			<!-- 添加分类 -->
+			<template #slot-add-goods-btn="{scope}">
+				<el-button type="primary" size="mini" @click="getItemList(scope.row)">添加</el-button>
+			</template>
+
+			<template #slot-item-list="{scope}">
+				<el-button type="text" @click="getItemList(scope.row)">花材列表</el-button>
+			</template>
+
+			<template #slot-modify="{scope}">
+				<el-button type="text" @click="getItemList(scope.row)">修改</el-button>
+			</template>
+
+		</x-crud>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+	data() {
+		return {
+			app: null,
+			sortLink: '',
+			operateData: {},
+			tabIndex: '-1',
+			tabsData: [
+				{
+					text: '全部分类',
+					key: '-1'
+				}
+			],
+			selects: {},
+			sort: {
+				status: false
+			}
+		};
+	},
+	computed: {
+	},
+	methods: {
+		handleClick(tab, e) {
+			this.app.refresh({ type: this.tabIndex });
+		},
+		//添加花材
+		getItemList(data) {
+			let query = {};
+			query.classId = data.id;
+			this.$router.push({ path: '/item/list', query });
+		},
+		// x-crud 组件
+		onLoad({ ctx, app }) {
+			this.app = app;
+			ctx.service(this.$service.itemClass)
+				.set('table', {
+					columns: [
+						{
+							prop: 'id',
+							label: 'ID',
+							align: 'center'
+						},
+						{
+							prop: 'name',
+							label: '标题',
+							align: 'center',
+							'min-width': 180
+						},
+						{
+							prop: 'num',
+							label: '花材数量',
+							align: 'center',
+							'min-width': 100
+						},
+						{
+							prop: 'inTurn',
+							label: '排序',
+							align: 'center',
+							minWidth: 100
+						},
+						{
+							prop: 'addTime',
+							label: '创建时间',
+							align: 'center',
+							minWidth: 180
+						}
+					],
+					op: {
+						visible: true,
+						props: {
+							width: 300,
+							align: 'center',
+							fixed: 'right',
+							label: '操作'
+						},
+						layout: ['slot-item-list','slot-modify','delete',]
+					}
+				})
+				.set('dict', {
+					search: {
+						keyWord: 'goodsName'
+					}
+				})
+				.set('search', {
+					key: {
+						placeholder: '分类名称'
+					}
+				})
+				.set('layout', [
+					['slot-tabs'],
+					['flex1', 'slot-add-goods-btn', 'refresh-btn'],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				.on('delete', (selection, { next }) => {
+					next({
+						id: selection.map(e => e.id).join(',')
+					});
+				})
+				.done();
+			app.refresh({ status: this.tabIndex });
+		},
+
+		refresh(params) {
+			this.app.refresh(params);
+		},
+
+		showSort(e) {
+			this.sort.status = true;
+		},
+
+		hideSort(e) {
+			this.sort.status = false;
+		},
+
+		changeSort(d) {
+			this.$service.goods
+				.sort({
+					inTurn: d.inTurn,
+					id: d.id
+				})
+				.then(() => {
+					this.$message.success('修改成功');
+					this.refresh();
+				})
+				.catch(err => {
+					this.$message.error(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.short-link {
+	color: $mainColor;
+	margin-left: 10px;
+	cursor: pointer;
+}
+.set-sort {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.el-button {
+		margin-left: 10px;
+	}
+	.show {
+		font-size: 16px;
+	}
+	.hide {
+		padding: 2px 5px;
+	}
+}
+</style>

ghs/src/views/item/list.vue

@@ -0,0 +1,224 @@
+<template>
+	<div class="app-list-content">
+		<x-crud class="liu-crud-wrap" @load="onLoad">
+			<template #slot-tabs="{ scope }">
+				<el-tabs
+					class="liu-tabs"
+					type="border-card"
+					v-model="tabIndex"
+					@tab-click="handleClick"
+				>
+					<el-tab-pane
+						v-for="(item, index) in tabsData"
+						:key="index"
+						:label="item.text"
+						:name="item.key"
+					>
+					</el-tab-pane>
+				</el-tabs>
+			</template>
+
+			<template #table-column-avatarUrl="{scope}">
+				<cl-avatar
+					shape="square"
+					:size="32"
+					:src="scope.row.smallImgList[0]"
+					:style="{ margin: 'auto' }"
+				></cl-avatar>
+			</template>
+
+			<template #table-column-goodsName="{scope}">
+				<span>{{ scope.row.goodsName }}</span>
+			</template>
+
+			<template #table-column-inTurn="{scope}">
+				<span v-if="!sort.status">{{ scope.row.inTurn }}</span>
+
+				<el-input-number
+					ref="sort-input"
+					focus
+					size="mini"
+					v-else
+					v-model="scope.row.inTurn"
+					@blur="changeSort(scope.row)"
+				></el-input-number>
+			</template>
+
+			<!-- 排序 -->
+			<template #table-header-inTurn>
+				<div class="set-sort">
+					<span>排序</span>
+					<el-button
+						v-if="!sort.status"
+						icon="el-icon-edit-outline"
+						size="small"
+						type="text"
+						@click="showSort"
+						class="show"
+					></el-button>
+
+					<el-button class="hide" v-else size="mini" @click="hideSort" type="primary"
+						>完成</el-button
+					>
+				</div>
+			</template>
+			<template #slot-add-goods-btn="{scope}">
+				<el-button type="primary" size="mini" @click="add()">添加</el-button>
+			</template>
+			<template #slot-modify="{scope}">
+				<el-button type="text" @click="modify(scope.row)">修改</el-button>
+			</template>
+		</x-crud>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+	data() {
+		return {
+			app: null,
+			sortLink: '',
+			operateData: {},
+			tabIndex: '-1',
+			tabsData: [
+				{
+					text: '全部',
+					key: '-1'
+				}
+			],
+			selects: {},
+			sort: {
+				status: false
+			}
+		};
+	},
+	computed: {
+	},
+	methods: {
+		handleClick(tab, e) {
+			this.app.refresh({ type: this.tabIndex });
+		},
+		onLoad({ ctx, app }) {
+			this.app = app;
+			ctx.service(this.$service.item)
+				.set('table', {
+					columns: [
+						{
+							prop: 'id',
+							label: 'ID',
+							align: 'center'
+						},
+						{
+							prop: 'name',
+							label: '标题',
+							align: 'center',
+							'min-width': 180
+						},
+						{
+							prop: 'num',
+							label: '花材数量',
+							align: 'center',
+							'min-width': 100
+						},
+						{
+							prop: 'inTurn',
+							label: '排序',
+							align: 'center',
+							minWidth: 100
+						},
+						{
+							prop: 'addTime',
+							label: '创建时间',
+							align: 'center',
+							minWidth: 180
+						}
+					],
+					op: {
+						visible: true,
+						props: {
+							width: 300,
+							align: 'center',
+							fixed: 'right',
+							label: '操作'
+						},
+						layout: ['slot-modify','delete',]
+					}
+				})
+				.set('dict', {
+					search: {
+						keyWord: 'goodsName'
+					}
+				})
+				.set('search', {
+					key: {
+						placeholder: '分类名称'
+					}
+				})
+				.set('layout', [
+					['slot-tabs'],
+					['flex1', 'slot-add-goods-btn', 'refresh-btn'],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				.on('delete', (selection, { next }) => {
+					next({
+						id: selection.map(e => e.id).join(',')
+					});
+				})
+				.done();
+			app.refresh({ status: this.tabIndex });
+		},
+
+		refresh(params) {
+			this.app.refresh(params);
+		},
+
+		showSort(e) {
+			this.sort.status = true;
+		},
+
+		hideSort(e) {
+			this.sort.status = false;
+		},
+
+		changeSort(d) {
+			this.$service.goods
+				.sort({
+					inTurn: d.inTurn,
+					id: d.id
+				})
+				.then(() => {
+					this.$message.success('修改成功');
+					this.refresh();
+				})
+				.catch(err => {
+					this.$message.error(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.short-link {
+	color: $mainColor;
+	margin-left: 10px;
+	cursor: pointer;
+}
+.set-sort {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.el-button {
+		margin-left: 10px;
+	}
+	.show {
+		font-size: 16px;
+	}
+	.hide {
+		padding: 2px 5px;
+	}
+}
+</style>

ghs/vue.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-const proxyTarget = 'https://api.shop.hzghd.com';
+const proxyTarget = 'http://api.shop.hzghd.com';
 
 function resolve(dir) {
 	return path.join(__dirname, dir);