花材集合

ghsApp/src/admin/home/apply.vue

@@ -48,7 +48,8 @@ export default {
                 {
                     title:'集合',
                     list:[
-                        {name: "列表",img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,url: "/admin/jh/list"}
+                        {name: "列表",img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,url: "/admin/jh/list"},
+                        {name: "集合分类",img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,url: "/admin/jh/class"}
                     ]
                 },
                 {

ghsApp/src/admin/jh/class.vue

@@ -0,0 +1,340 @@
+<template>
+	<div class="app-content" @click="globalClick">
+		<div class="list-wrap">
+			<block v-if="!$util.isEmpty(list.data)">
+				<div class="list" v-for="(item, index) in list.data" :key="index">
+					<div class="list-index">{{ item.id }}</div>
+					<div class="list-det" @click="editItem(item)">
+						<div class="app-size-28 app-color-0" style="font-size:28upx;font-weight:bold;color:#333333;">
+						{{ item.name || '' }}
+						</div>
+						<div class="list-operate">
+							<div class="operate-det" style="color:#333333;">
+								<span>序号 {{ item.inTurn }}</span>
+							</div>
+							<view class="operate-icon">
+								<i class="iconfont iconbianji" style="font-size:38upx;"></i>
+							</view>
+							<view class="operate-icon" @click.stop="delJhClass(item)">
+								<i class="iconfont iconshanchu1" style="font-size:38upx;"></i>
+							</view>
+						</div>
+					</div>
+				</div>
+				<operate-module v-if="operateShow" :top="operateTop" :right="30" @clickFn="operateList" :btnData="btnData" />
+			</block>
+			<block v-else>
+				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+			</block>
+		</div>
+		<div class="app-footer">
+			<button class="admin-button-com middle blue" @click="addCategoryFn">添加分类</button>
+		</div>
+		<modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="replaceModalClick" :title="modifyTitle" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="app-modal-input-wrap modify-modal">
+					<div class="inp-list-line">
+						<div class="line-label">名称</div>
+						<div class="line-input">
+							<input type="text" v-model="replaceForm.name" :adjust-position="false" class="inp-input" placeholder="请填写" />
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">顺序</div>
+						<div class="line-input">
+							<input type="number" v-model="replaceForm.inTurn" @focus="replaceForm.inTurn=''" :adjust-position="false" class="inp-input" placeholder="越大越靠前" />
+						</div>
+					</div>
+					<div class="inp-list-line">
+						<div class="line-label">打印显示</div>
+						<div class="line-input">
+							<switch style="transform:scale(0.7,0.7)" :checked="replaceForm.print == 0 ? false : true" @change="printChange" /> {{replaceForm.print==0 ? '否' : '是'}}
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+		<modal-module :show="delModal" :maskClosable="false" @cancel="modalCancel" @click="delModalClick" content="确定删除？" color="#333" :size="32" padding="30upx 30upx"></modal-module>
+	</div>
+</template>
+<script>
+import ModalModule from '@/components/plugin/modal'
+import AppUploader from '@/components/app-uploader'
+import OperateModule from '@/admin/home/components/module/operate'
+import AppWrapperEmpty from '@/components/app-wrapper-empty'
+import { list } from '@/mixins'
+import { getJhClassList,addJhClass,updateJhClass,delJhClass} from '@/api/jh'
+export default {
+	name: 'item-class-list',
+	components: {
+		ModalModule,
+		AppUploader,
+		OperateModule,
+		AppWrapperEmpty
+	},
+	mixins: [list],
+	data() {
+		return {
+			modifyModal: false,
+			modifyTitle: '添加',
+			replaceForm: {
+				name: '',
+				id:0,
+				inTurn: 100,
+				print:1
+			},
+			delModal: false,
+			operateShow: false,
+			operateData: {},
+			operateIndex: null,
+			operateTop: 0
+		}
+	},
+	computed: {
+		btnData() {
+			return [
+				{
+					text: '编辑',
+					icon: 'iconbianji',
+					click: () => {
+						this.modifyModal = true
+						this.modifyTitle = '编辑'
+						this.modifyForm = {
+							name: this.operateData.name,
+							id: this.operateData.id,
+							inTurn: this.operateData.inTurn,
+							print:this.operateData.print
+						}
+					}
+				},
+				{
+					text: '删除',
+					icon: 'iconshanchu1',
+					click: () => {
+						this.delModal = true
+					}
+				}
+			]
+		}
+	},
+	onPullDownRefresh() {
+		this.resetList()
+		this.getClassList().then(res => {
+			uni.stopPullDownRefresh()
+		})
+	},
+	onReachBottom() {
+		if (!this.list.finished) {
+			this.getClassList().then(res => {
+				uni.stopPullDownRefresh()
+			})
+		} else {
+			uni.stopPullDownRefresh()
+		}
+	},
+	onLoad() {
+	},
+	methods: {
+		printChange(e){
+			this.replaceForm.print = e.target.value ? 1 : 0
+		},
+		delJhClass(item){
+			let that = this
+			that.$util.confirmModal({content:'确认删除？此分类的集合将移到默认分类'},() => {
+				delJhClass({id:item.id}).then(res=>{
+					if(res.code == 1){
+						that.$msg('删除成功')
+						that.getClassList()
+					}
+				})
+			})
+		},
+		editItem(item){
+				this.modifyModal = true
+				this.modifyTitle = '编辑'
+				this.replaceForm = {
+                    id:item.id,
+					name: item.name,
+					inTurn: item.inTurn,
+					print:item.print
+				}			
+		},
+		operateList(index){
+			if(index === 0){
+				this.modifyModal = true
+				this.modifyTitle = '编辑'
+				this.replaceForm = {
+                    id:this.operateData.id,
+					name: this.operateData.name,
+					inTurn: this.operateData.inTurn,
+					print:this.operateData.print
+				}
+			}else if(index === 1) {
+				this.delModal = true
+			}
+		},
+		async init() {
+			this.getClassList()
+		},
+		getClassList() {
+			return getJhClassList({page: this.list.page}).then(res => {
+				this.completes(res)
+			})
+		},
+		replaceClass() {
+			if (!this.replaceForm.name) {
+				this.$msg('请填写分类名称')
+				return false
+			}
+			let host = this.replaceForm.id == 0 ?  addJhClass : updateJhClass;
+			let form = JSON.parse(JSON.stringify(this.replaceForm))
+			host({
+				...form
+			}).then(res => {
+				this.$msg('操作成功')
+				this.modalCancel()
+				this.operateCancle()
+				setTimeout(() => {
+					this.resetList()
+					this.getClassList()
+				}, 1000)
+			})
+		},
+		addCategoryFn() {
+			this.resetForm()
+			this.modifyModal = true
+			this.modifyTitle = '新增'
+		},
+		resetForm() {
+			this.replaceForm = {
+				name: '',
+				inTurn: 0,
+                id:0
+			}
+		},
+		replaceModalClick(e) {
+			if (e.index === 0) {
+				this.modalCancel()
+			} else {
+				this.replaceClass()
+			}
+		},
+		modalCancel() {
+			this.delModal = false
+			this.modifyModal = false
+		},
+		switchChangeFn(e) {
+			this.replaceForm.status = e.detail.value ? 1 : 0
+		},
+		delModalClick(e) {
+			if (e.index === 0) {
+				this.modalCancel()
+			} else {
+                uni.showToast({
+                    title: '开发中',
+                    duration: 2000, 
+                    icon:'none',
+                });
+			}
+		},
+		operateFn(item, index, event) {
+            this.operateData = item
+            this.operateIndex = index
+            this.operateShow = true
+            this.operateTop = event.currentTarget.offsetTop
+		},
+		operateCancle() {
+			this.operateData = {}
+			this.operateIndex = null
+			this.operateShow = false
+		},
+        globalClick(){
+            this.operateCancle()
+        },
+		changeStatusFn() {
+            uni.showToast({
+                title: '开发中',
+                duration: 2000, 
+                icon:'none',
+            });
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		min-height: calc(100vh - 100upx);
+		padding-bottom: 100upx;
+	}
+	.list-wrap {
+		position: relative;
+		background-color: #fff;
+		.list {
+			height: 130upx;
+			@include disFlex(center, flex-start);
+			margin: 0 30upx 0 30upx;
+			color: $fontColor3;
+			border-bottom: 1upx solid $borderColor;
+			.list-index {
+				width: 80upx;
+			}
+			.list-img {
+				img {
+					height: 100%;
+				}
+			}
+			.list-det {
+				width: calc(100% - 50upx);
+				margin-left: 10upx;
+				& > div {
+					margin-top: 14upx;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+				.list-operate {
+					@include disFlex(center, space-between);
+					.operate-det {
+						& > span {
+							margin-left: 60upx;
+							&:first-child {
+								margin-left: 0;
+							}
+						}
+					}
+					.add-price{
+						text-decoration:underline;
+						font-size:30upx;
+						margin-left:10upx;
+					}
+					.operate-icon{
+						margin-left:5upx;
+					}
+				}
+			}
+		}
+	}
+	.app-footer {
+		justify-content: flex-end;
+		.admin-button-com {
+			width: 200upx;
+			margin-right: 30upx;
+		}
+	}
+	.modify-modal {
+		.prompt-text {
+			color: red;
+			position: relative;
+			right: 52upx;
+			bottom: 24upx;
+		}
+		.line-label {
+			width: 140upx;
+			flex-shrink: 0;
+		}
+		.switch-wrap {
+			margin-top: 30upx;
+		}
+	}
+</style>

ghsApp/src/api/jh/index.js

@@ -4,6 +4,22 @@ export const getJhClassMenu = data => {
 	return https.get('/jh-class/get-menu', data)
 }
 
+export const getJhClassList = data => {
+	return https.get('/jh-class/list', data)
+}
+
+export const addJhClass = data => {
+	return https.get('/jh-class/add', data)
+}
+
+export const updateJhClass = data => {
+	return https.get('/jh-class/update', data)
+}
+
+export const delJhClass = data => {
+	return https.get('/jh-class/del', data)
+}
+
 export const getJhList = data => {
 	return https.get('/jh/list', data)
 }

ghsApp/src/pages.json

@@ -413,7 +413,8 @@
 		{
 			"root": "admin/jh",
 			"pages": [
-				{"path": "list","style": {"navigationBarTitleText": "花材集合"}}
+				{"path": "list","style": {"navigationBarTitleText": "花材集合"}},
+				{"path": "class","style": {"navigationBarTitleText": "集合分类"}}
 			]
 		},
 		{