2025-03-JS-SDK-PDA/pages/product/features/LIbraryStockTransfer/index.vue

<template>
	<view style="margin: 10rpx;">
		<u-navbar back-text="返回" title="立体库转库" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item class="item2">
				<p>物料:</p>
				<u-input @input="getSdkInfo" v-model="materialSpecName" border></u-input>
			</u-form-item>
			<u-form-item class="item2">
				<p>SDK规格:</p>
				<zxzUniDataSelect @change="getMATERIALSPECNAME" filterable v-model="sdk_id" :localdata="sdkList">
				</zxzUniDataSelect>
			</u-form-item>
			<u-form-item class="item2">
				<p>原库区:</p>
				<zxzUniDataSelect @change="changeSlect" filterable v-model="AreaName" :localdata="Area">
				</zxzUniDataSelect>
			</u-form-item>
			<br />
			<u-form-item class="item2">
				<p>目标库区:</p>
				<zxzUniDataSelect @change="changeAimAreaSlect" filterable v-model="desAreaName" :localdata="Area">
				</zxzUniDataSelect>
			</u-form-item>
			<br />
			<u-form-item>
				<p>出货口:</p>
				<zxzUniDataSelect filterable v-model="outPort" :localdata="outPortList">
				</zxzUniDataSelect>
			</u-form-item>
			<checkbox-group @change="IFHaveBh">
				<label>
					<checkbox value="bh" />是否已备货
				</label>
			</checkbox-group>
			<br />
			<u-card style="border: 1rpx solid #0081ff" :show-head="false" :full="true"
				:body-style="{ height: '100rpx' }">
				<view slot="body">
					<u-row>
						<u-col span="6">
							<view>累计选择支数：{{ sumJs || '0' }}</view>
						</u-col>
						<u-col span="6">
							<view>累计选择数量：{{ sumQuantity || '0' }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<!-- 分栏器 -->
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="flitems" :style-type="styleType"
					:active-color="activeColor" @clickItem="clickitem" />
			</view>
			<view>
				<view v-show="current === 0">

					<view class="pagination">
						<u-button size="mini" @click="prevPage" :disabled="currentPage === 1">上一页</u-button>
						<span v-for="page in displayedPages" :key="page">
							<u-button size="mini" @click="goToPage(page)" :class="{ active: currentPage === page }">
								{{ page }}
							</u-button>
						</span>
						<u-button size="mini" @click="nextPage" :disabled="currentPage === totalPages">下一页</u-button>
					</view>

					<view class="search-box">
						<u-input type="text" placeholder="请输入搜索料号" v-model="searchSpec" class="search-input"
							clearable />
					</view>
					<view class="container" style="margin-bottom: 80px;">
						<view id="list-item" v-for="(item, index) in paginatedlist_detail" :key="item.id"
							class="selectable-view" @click="toggleSelection(item)"
							:class="{ 'selected': isSelected(item), 'hidded' : isHidded(item) }">
							<view>
								<view>
									<!-- <div>
												<text class="card-description"> 序号: {{list_detail.length -  index}}</text>
											</div> -->
									<div>
										<text class="card-description"> 批次: {{ item.CHARGE }}</text>
									</div>
									<div>
										<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }} 阶段:
											{{ item.PHASE }} SDK规格: {{ item.SPECNAME }}</text>
									</div>
									<div>
										<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
									</div>
									<div>
										<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
									</div>
									<div>
										<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
									</div>
									<div>
										<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
									</div>
									<div>
										<text class="card-description"> 数量: {{ item.MATERIALQUANTITY }}
											{{ item.UNIT }}</text>
									</div>
									<div>
										<text class="card-description"> 载具: {{ item.TRAYNAME }} 库区:
											{{ item.DESCRIPTION }}</text>
									</div>
									<div>
										<text class="card-description"> 立库货架: {{ item.SHELFNAME }} </text>
									</div>
									<div>
										<text class="card-description"> 宽幅: {{ item.WIDTH }} 直径: {{ item.DIAMETER }}
										</text>
									</div>
									<div>
										<text class="card-description"> 偏移量: {{ item.DEVIATION }} 重量: {{ item.WEIGHT }}
										</text>
									</div>
									<div>
										<text class="card-description"> 生产线: {{ item.PRODUCTLINE }} </text>
									</div>

								</view>
							</view>
						</view>
					</view>
					<br />
				</view>
				<view v-show="current === 1">
					<view>
						<!-- 选中的项目: {{ selectedItems.map(i => list_detail[i].CHARGE).join(', ') }}  -->
						<view id="list-item" v-for="(item, index) in stockChoose" :key="item.id" class="selectable-view"
							@click="toggleSelection(item)" :class="{ 'selected': isSelected(index) }">
							<view>
								<view>
									<!-- <div>
												<text class="card-description"> 序号: {{list_detail.length -  index}}</text>
											</div> -->
									<div>
										<text class="card-description"> 批次: {{ item.CHARGE }}</text>
									</div>
									<div>
										<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }} 阶段:
											{{ item.PHASE }} SDK规格: {{ item.SPECNAME }}</text>
									</div>
									<div>
										<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
									</div>
									<div>
										<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
									</div>
									<div>
										<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
									</div>
									<div>
										<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
									</div>
									<div>
										<text class="card-description"> 数量: {{ item.MATERIALQUANTITY }}
											{{ item.UNIT }}</text>
									</div>
									<div>
										<text class="card-description"> 载具: {{ item.TRAYNAME }} 库区:
											{{ item.DESCRIPTION }}</text>
									</div>
									<div>
										<text class="card-description"> 立库货架: {{ item.SHELFNAME }} </text>
									</div>
									<div>
										<text class="card-description"> 宽幅: {{ item.WIDTH }} 直径: {{ item.DIAMETER }}
										</text>
									</div>
									<div>
										<text class="card-description"> 偏移量: {{ item.DEVIATION }} 重量: {{ item.WEIGHT }}
										</text>
									</div>
									<div>
										<text class="card-description"> 生产线: {{ item.PRODUCTLINE }} </text>
									</div>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<checkbox-group @change="IFUserAGV" v-if="AreaName != 'E'">
				<label>
					<checkbox value="cb" />是否使用AGV
				</label>
			</checkbox-group>

			<!-- 					
					
					<zb-table
					style="height: 350upx;"
					ref="zbTable"
					:show-header="true"
					:columns="column"
					:stripe="true"
					:fit="false" 
					:highlight="true"
					:border="true"
					:data="list_detail"
					:cell-style="cellStyleFn"
					@toggleAllSelection="toggleAllSelection"
					@toggleRowSelection="stockSelectionChange"
					></zb-table> -->
			<u-form-item label="起始点" v-if="AGVshow">
				<zxzUniDataSelect filterable v-model="INITILATION" :localdata="items_In"></zxzUniDataSelect>
			</u-form-item>
			<u-form-item label="目的点" v-if="AGVshow">
				<zxzUniDataSelect filterable v-model="ENDING" :localdata="items_En"></zxzUniDataSelect>
			</u-form-item>
			<u-form-item label="A/B轴" v-if="AGVshow">
				<zxzUniDataSelect filterable v-model="AB" :localdata="ABS"></zxzUniDataSelect>
				<!-- 	<select v-model="AB">
					<option value="A">A轴</option>
					<option value="B">B轴</option>
				</select> -->
			</u-form-item>
		</u-form>
		<!-- </u-popup>
		</view> -->
		<u-form ref="testForm" style="padding-bottom: 130rpx;" v-if="desAreaName != 'C' && desAreaName != 'B'">
			<u-form-item :border-bottom="false">
				<label>选择仓库:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="ERPLOCATION" :localdata="items" @change="change">
				</zxzUniDataSelect>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<label>选择库位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
				<zxzUniDataSelect filterable v-model="LOCATIONNAME" :localdata="items_Location"></zxzUniDataSelect>
			</u-form-item>
		</u-form>
		<br />
		<view class="tabbar_bottom">
			<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
				@maskClick="maskClick" />

			<u-button class="btn-bottom" @click="FGStockIn" type="primary" :loading="loading">确定</u-button>
		</view>
	</view>
</template>

<script>
	import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
	export default {
		components: {
			zxzUniDataSelect
		},
		data() {
			return {
				sdkList: [],
				sdkListAll: [],
				sdk_id: '',
				list_detail: [],
				column: [],
				MATERIALQUANTITY: null,
				items_In: [],
				items_En: [],
				commitDate: '',
				INITILATION: '', //起始点
				ENDING: '', //目的地
				AB: '', //AB轴
				ABS: [{
						text: "A轴",
						value: "A"
					},
					{
						text: "B轴",
						value: "B"
					}
				],
				DURABLENAMECode: '', //卷芯
				AreaName: '',
				Area: [],
				desAreaName: '',
				value: '',
				show: false,
				AGVshow: false,
				orgObject: {
					ERPFACTORY: '',
					DESCRIPTION: ''
				}, // 组织对象
				datamodel: '',
				LocationName: '', //库位信息
				LOCATIONNAME: '',
				ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY, //组织
				ERPLOCATION: '', //库位
				tabH: 800, //表格的宽度
				MATERIALSPECNAME: '',
				MATERIALPACKINGNAME: '', //条码
				MATERIALPACKINGNAME2: '', //条码
				CHARGE: '', //批次
				DESC_CN: '', //品名
				SPECNAME: '', //规格
				RECEIVEACTNO: '', //入库单号
				UNIT: '', //单位
				PHASE: '', //阶段
				QTY: '', //数量
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				colors: ['#007aff', '#4cd964', '#dd524d'],
				styleType: 'button',
				current: 0,
				BoxListInfo: [], //后端传回来的绑定表格的数据
				colorIndex: 0,
				activeColor: '#007aff',
				loading: false,
				scanData: [], //已扫描箱
				barCode: "", //条码
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				siteName: "",
				userId: "",
				items: [],
				items_Location: [],
				stockChoose: [],
				materialSpecName: "",
				outPort: "",
				outPortList: [],
				currentPage: 1, // 当前页码
				perPage: 10, // 每页显示的项目数  
				pageRange: 1, //前后显示的页码数量 
				isFolded: [], // 用于存储每个项目的折叠状态，初始为 false（不折叠）
				searchSpec: '', //搜索料号

				// 分栏器
				current: 0,
				flitems: ['库存列表', '备货列表'],
				styleType: 'text',
				activeColor: '#007aff',

			}
		},
		mounted() {
			this.GetArea()
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that = this
			uni.getStorage({
				key: "sitename",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
			this.orgObject = JSON.parse(uni.getStorageSync('orgObject'))
			this.getERPLocation();
			this.GetLiberaryBaeIn()
			this.GetLiberaryBaeEn()
			this.getTimeData();

			// let Things = 20
			// for (var i = 0; i < Things; i++) {
			// 	this.list_detail.push({aa:"1"}) 
			// }	
		},
		computed: {
			displayedPages() {
				let start = Math.max(this.currentPage - this.pageRange, 1);
				let end = Math.min(this.currentPage + this.pageRange, this.totalPages);
				let pages = [];
				for (let i = start; i <= end; i++) {
					pages.push(i);
				}
				// 如果第一页不在范围内，添加省略号  
				if (start > 1) {
					pages.unshift('...');
				}
				// 如果最后一页不在范围内，添加省略号  
				if (end < this.totalPages) {
					pages.push('...');
				}
				return pages;
			},
			paginatedlist_detail() {
				const start = (this.currentPage - 1) * this.perPage;
				const end = start + this.perPage;
				return this.list_detail.slice(start, end);
			},
			totalPages() {
				return Math.ceil(this.list_detail.length / this.perPage);
			},

			sumJs() {
				// 计算累计选择支数  
				return this.stockChoose.reduce((total, item) => total + 1, 0);
			},
			sumQuantity() {
				// 计算累计选择数量  
				return this.stockChoose.reduce((total, item) => total + item.MATERIALQUANTITY, 0);
			},


		},
		methods: {
			getMATERIALSPECNAME() {
				if (!this.materialSpecName) {
					this.$showMessage("请输入物料！")
					return;
				}
			},
			getSdkInfo() {
				this.sdkList = []
				this.$MyRequest('/label/getSDKSPEC', {
					materialSpecName: this.materialSpecName
				}).then((res) => {
					// this.sdkListAll = res.resultObj;
					// this.locatioNFilter('1')
					this.sdkList = res.data.resultObj;
				})
			},
			// locatioNFilter(query) {
			// 	console.log(query)
			// 	let arr = this.sdkListAll.filter((item) => {
			// 		return (item.text.includes(query) || item.value.includes(query))
			// 	})
			// 	if (arr.length > 50) {
			// 		this.sdkList = arr.slice(0, 50)
			// 	} else {
			// 		this.sdkList = arr
			// 	}
			// },
			clickitem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			/* 分页方法 */
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
			},
			goToPage(page) {
				if (page != "...") {
					this.currentPage = page;
				}

			},
			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			outPortFn() {
				this.$MyRequest('/MaturationLibrary/getPort', {
					AREANAME: this.AREANAME
				}).then((res) => {
					let list = res.data.resultObj.map(item => {
						return {
							value: item.PORTNO,
							text: item.PORTNAME
						}
					})
					this.outPortList = list
				})
			},
			changeSlect(e) {
				this.list_detail = []
				console.log('1', e)
				this.AREANAME = e.value
				if (this.AREANAME == this.desAreaName) {
					this.AREANAME == ""
					this.$showMessage("目标库区与发出库区不能相同")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					return

				}
				this.outPortFn()
				this.getDetailQuery({
					AREANAME: this.AREANAME,
					SHIPREQUESTNAME: this.IFBh,
					MATERIALSPECNAME: this.materialSpecName,
					SDK_ID: this.sdk_id
				})
			},
			changeAimAreaSlect(e) {
				console.log('1', e)
				this.desAreaName = e.value
				if (this.AREANAME == this.desAreaName) {
					this.desAreaName = ""
					this.$showMessage("目标库区与发出库区不能相同")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					return
				}
			},
			IFHaveBh(e) {
				let value = e.detail.value[0] || ""
				console.log(value)
				this.IFBh = value
				this.list_detail = []
				this.getDetailQuery({
					AREANAME: this.AREANAME,
					SHIPREQUESTNAME: this.IFBh,
					MATERIALSPECNAME: this.materialSpecName,
					SDK_ID: this.sdk_id
				})
			},
			getDetailQuery(data) {
				this.loading = true
				this.$MyRequest('/MaturationLibrary/getPreStockOutByAuto', data).then((res) => {
					console.log("aaa", res.data.resultObj)
					this.list_detail = res.data.resultObj
					this.loading = false
				})
			},
			toggleAllSelection(e, data) {
				console.log('调用了', data)
				this.stockChoose = data
			},
			//选择备货
			stockSelectionChange(e, selection) {
				console.log('调用了', selection)
				this.stockChoose = selection
			},
			toggleSelection(item) {
				const isSelected = this.isSelected(item);
				if (isSelected) {
					// 如果已选中，则移除该项目对象  
					this.stockChoose = this.stockChoose.filter(selectedItem => selectedItem !== item);
				} else {
					// 如果未选中，则添加该项目对象  
					this.stockChoose.push(item);
				}
			},
			isSelected(item) {
				// 检查项目对象是否在已选中的项目数组中  
				return this.stockChoose.includes(item);
			},

			isHidded(item) {
				// 检查项目对象是否在已选中的项目数组中  
				return item.MATERIALSPECNAME && !item.MATERIALSPECNAME.includes(this.searchSpec);
			},
			change(e) {
				this.ERPLOCATION = e.value;
				this.LOCATIONNAME = ""
				this.getLocationName();
			},
			GetArea() {
				this.$MyRequest('/api/storage/getArea2', {}).then(res => {
					if (res.data.success) {
						console.log(res.data.resultObj)
						this.Area = res.data.resultObj
						console.log(this.Area)
					} else {
						this.$showMessage(res.data.message)
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			confirm(e) {
				console.log(e[0].value)
				this.AreaName = e[0].value
			},
			IFUserAGV(e) {
				let value = e.detail.value[0]
				console.log(value)
				if (value == 'cb') {
					this.AGVshow = true
				} else {
					this.AGVshow = false
				}
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			GetLiberaryBaeIn() {
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetLibraryBaseIn",
					version: "00001",
					params: {}
				}).then(res => {
					for (let i = 0; i < res.data.data.length; i++) {
						var _Arr = res.data.data[i];
						this.items_In.push({
							text: _Arr.LABEL,
							value: _Arr.VALUE
						});
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			GetLiberaryBaeEn() {
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetLibraryBaseIn",
					version: "00002",
					params: {}
				}).then(res => {
					for (let i = 0; i < res.data.data.length; i++) {
						var _Arr = res.data.data[i];
						this.items_En.push({
							text: _Arr.LABEL,
							value: _Arr.VALUE
						});
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			getERPLocation() {
				this.items = [];
				this.$MyRequest('/api/storage/getERPLocation', {
					ERPFACTORYNAME: this.ERPFACTORY
				}).then(res => {
					if (res.data.success) {
						for (let i = 0; i < res.data.resultObj.length; i++) {
							var _Arr = res.data.resultObj[i];
							this.items.push({
								text: _Arr.DESCRIPTION,
								value: _Arr.ERPLOCATIONNAME
							});
						}
					} else {
						this.$showMessage(res.data.message)
					}
				});
			},
			getLocationName() {
				this.items_Location = []
				let ERPFACTORY = JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY;
				if (this.ERPLOCATION != '') {
					this.$MyRequest('/api/storage/getLocationNameForERPLocation', {
						ERPLocation: ERPFACTORY
					}).then(res => {
						if (res.data.success) {
							for (let i = 0; i < res.data.resultObj.length; i++) {
								var _Arr = res.data.resultObj[i];
								this.items_Location.push({
									text: _Arr.DESCRIPTION,
									value: _Arr.STORAGENAME
								});

							}
						} else {
							this.$showMessage(res.data.message)
						}
						this.focusBarCode = true
						this.focusShipRequest = false
					}).catch(err => {
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请先选择仓库")
				}

			},
			/**
			 * 转库保存
			 */
			FGStockIn() {
				console.log(this.commitDate)
				console.log(this.AREANAME + "****" + this.desAreaName)
				if (!this.AGVshow && (this.AREANAME == this.desAreaName || this.AREANAME == "" || this.desAreaName ==
					"")) {
					this.$showMessage("目标库区与发出库区不能相同")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					return

				}
				if (this.stockChoose.length > 0) {
					this.loading = true;
					let ISAGV = this.AGVshow ? "TRUE" : "FALSE"
					let MATERIALPACKINGNAMELIST = this.stockChoose.map(item => {
						if (this.AREANAME == this.desAreaName) {
							if (item.ERPLOCATION == this.ERPLOCATION) {
								if (item.LOCATIONNAME == this.LOCATIONNAME) {
									this.$showMessage("不能选择同库区 同仓库 同库位 转移")
									return;
								}
							}
						}
						item.AREANAME = this.AREANAME
						item.FLAG = "MOVE"
						item.OUTDESTINATION = this.AREANAME
						item.INDESTINATION = this.desAreaName
						item.ISAGV = ISAGV
						item.INITILATION = this.INITILATION
						item.ENDING = this.ENDING
						item.AB = this.AB
						item.TRANSPORTCOMMANDTYPE = "MOVE"
						item.PORT = this.outPort
						return item;
					})
					this.$MyRequest('/MaturationLibrary/AutoStockOut', {
						SITENAME: "SDK",
						commitDate: this.commitDate,
						userId: this.userId,
						AREANAME: this.AREANAME,
						aimAreaName: this.desAreaName,
						outProt: '',
						erpLocation: this.ERPLOCATION,
						erpFactory: this.ERPFACTORY,
						locationName: this.LOCATIONNAME,
						barCode: this.MATERIALPACKINGNAME,
						durableName: '',
						shipRequestName: "",
						MATERIALPACKINGNAME: MATERIALPACKINGNAMELIST
					}).then(res => {
						if (res.data.success) {
							this.loading = false;
							this.resetValue();
							this.$showMessage(res.data.message)
							this.list_detail = [];
						} else {
							this.loading = false;
							this.$showMessage(res.data.message)
							this.list_detail = [];
						}
					}).catch(err => {
						this.loading = false;
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请扫描！")
				}
			},

			resetValue() {
				this.MATERIALPACKINGNAME = "";
				this.BoxListInfo = [];
				this.RECEIVEACTNO = "";
				this.MATERIALSPECNAME = "";
				this.PHASE = "";
				this.SPECNAME = "";
				this.DESC_CN = "";
				this.CHARGE = "";
			}
		}
	}
</script>
<style>
	.btn-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
<style lang="scss">
	#list-item {

		margin-top: 16px;
		/* 卡片之间的间距 */
		// padding: 12px;
		/* 卡片内部的内边距 */
		background-color: #aaaa7f;
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片边框圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}

	.selectable-view {
		padding: 10px;
		margin: 5px;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.selected {
		background-color: #007aff;
		color: white;
	}

	.hidded {
		display: none;
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.pagination button {
		margin: 0 5px;
		padding: 5px 10px;
	}

	.pagination button.active {
		font-weight: bold;
		color: red;
		/* 或者其他突出显示的颜色 */
	}

	.button-group button {
		display: inline-block;
		/* 使按钮以内联块级元素显示 */
		margin: 0 5px;
		/* 为按钮添加一些左右外边距 */
		/* 根据需要添加其他样式 */
	}
</style>