自定义表格组件优化

ghs/src/admin/billing/affirm.vue

@@ -211,7 +211,7 @@
 			:pickerValueDefault="cityPickerValueDefault"
 			@onConfirm="onCityConfirm"
 		></simple-address>
-		<!-- 选择地区 -->
+		<!-- 选择客户 -->
 		<AppCustomerSel
 			:show.sync="showCustomer"
 			@change="changeCustomerFn"

ghs/src/admin/warehouse/components/table.vue

@@ -34,11 +34,17 @@
 			>
 				<!-- {{ item[column.dataIndex] || "" }} -->
 
-				<slot v-if="column.custom" :row="item" :column="column">
-					{{ item[column.dataIndex] }}
+				<slot
+					v-if="column.custom"
+					:row="item"
+					:column="column"
+					:index="index"
+					:parentData="parentData"
+				>
+					{{ item[column.dataIndex] || "" }}
 				</slot>
 				<text v-else :class="[column.color || '']">
-					{{ item[column.dataIndex] }}
+					{{ (column.dataIndex && item[column.dataIndex]) || "" }}
 				</text>
 			</view>
 		</view>
@@ -47,6 +53,7 @@
 <script>
 export default {
 	props: {
+		parentData: {},
 		columns: {
 			type: Array,
 			default: []

ghs/src/admin/warehouse/flower/manage.vue

@@ -7,34 +7,82 @@
 					:columns="columns"
 					:dataList="dataList"
 					:fontSize="28"
+					:parentData="{
+						isSort: isSort,
+						dataList: dataList,
+						upSortByIndex: upSortByIndex,
+						downSortByIndex: downSortByIndex,
+						delEvent: delEvent,
+						changeItem: changeItem
+					}"
 				>
-					<template v-slot="{ row, column }">
+					<template v-slot="{ row, column, index, parentData }">
 						<view v-if="column.custom == 'edit'" class="edit-td">
-							<text class="iconfont icondelete"> </text>
+							<template v-if="parentData.isSort">
+								<text
+									:class="['iconfont', 'iconshangyi', { disabled: index == 0 }]"
+									@click.stop="upSortByIndex(index)"
+								></text>
+								<text
+									:class="[
+										'iconfont',
+										'iconxiayi',
+										{ disabled: index >= parentData.dataList.length - 1 }
+									]"
+									@click.stop="downSortByIndex(index)"
+								></text>
+							</template>
+							<text
+								v-else
+								class="iconfont icondelete"
+								@click.stop="delEvent(row, index)"
+							>
+							</text>
 						</view>
 						<view v-else>
-							<view class="input-td"> <input type="number" /> </view>
+							<view class="input-td">
+								<input
+									type="number"
+									:value="row[column.dataIndex]"
+									@input="changeItem($event, column.dataIndex, index)"
+								/>
+							</view>
 						</view>
 					</template>
 				</Tabel>
 			</view>
 		</scroll-view>
 		<view class="under-bar">
-			<button :class="['admin-button-com', 'default']" @click="">
+			<button
+				v-if="!isSort"
+				:class="['admin-button-com', 'default']"
+				@click="isSort = true"
+			>
 				排序
 			</button>
+			<button
+				v-else
+				:class="['admin-button-com', 'default']"
+				@click="confirmSortEvent"
+			>
+				确认排序
+			</button>
 			<button :class="['admin-button-com']" @click="">
 				添加
 			</button>
 		</view>
+		<AppFlowerSel :show.sync="showFlower" @select="changeFlowerFn" />
 	</view>
 </template>
 <script>
 import Tabel from "../components/table";
+import AppFlowerSel from "@/components/app-flower-sel";
 export default {
-	components: { Tabel },
+	components: { Tabel, AppFlowerSel },
 	data() {
 		return {
+			isSort: false,
+			showFlower: true,
 			columns: [
 				{
 					name: "名称",
@@ -46,6 +94,7 @@ export default {
 					width: 130,
 					color: "info",
 					align: "center",
+					dataIndex: "warn",
 					custom: "warn"
 				},
 				{
@@ -53,6 +102,7 @@ export default {
 					width: 130,
 					color: "info",
 					align: "center",
+					dataIndex: "weight",
 					custom: "weight"
 				},
 				{
@@ -60,6 +110,7 @@ export default {
 					width: 130,
 					color: "info",
 					align: "center",
+					dataIndex: "price",
 					custom: "price"
 				},
 				{
@@ -73,10 +124,10 @@ export default {
 					name: "调拨入库"
 				},
 				{
-					name: "调拨入库"
+					name: "调拨出库"
 				},
 				{
-					name: "调拨入库"
+					name: "调拨预警"
 				}
 			]
 		};
@@ -84,6 +135,28 @@ export default {
 	methods: {
 		searchSelectEvent(params) {
 			console.log(3333, pramrs);
+		},
+		confirmSortEvent() {},
+		upSortByIndex(index) {
+			if (index > 0) {
+				const delItem = this.dataList.splice(index, 1, this.dataList[index - 1]);
+				this.$set(this.dataList, index - 1, delItem[0]);
+			}
+		},
+		downSortByIndex(index) {
+			if (index < this.dataList.length - 1) {
+				const delItem = this.dataList.splice(index, 1, this.dataList[index + 1]);
+				this.$set(this.dataList, index + 1, delItem[0]);
+			}
+		},
+		delEvent(item, index) {},
+		changeItem(e, key, index) {
+			console.log(33333, e);
+			const {
+				detail: { value }
+			} = e;
+
+			this.$set(this.dataList, index, { ...this.dataList[index], [key]: value });
 		}
 	}
 };
@@ -108,7 +181,7 @@ export default {
 			align-items: center;
 			justify-content: center;
 			margin: 0 20upx;
-			width: 140upx;
+			// width: 140upx;
 			height: 70upx;
 			font-size: 32upx;
 		}
@@ -157,6 +230,10 @@ export default {
 			/deep/.edit-td {
 				.iconfont {
 					font-size: 40upx;
+					margin: 0 5upx;
+					&.disabled {
+						color: #eeeeee;
+					}
 				}
 			}
 		}

ghs/src/components/app-flower-sel.vue

@@ -0,0 +1,279 @@
+<template>
+	<div class="app-area-sel">
+		<bottom-popup class="popup-wrap" :show="showPopup" @close="hidePopup">
+			<div class="map-wrap">
+				<div class="map-top-tit-wrap">
+					<div class="map-top-tit">从平台库添加</div>
+					<app-close icon="iconguanbi" @close="hidePopup" />
+				</div>
+				<!-- 搜索 -->
+				<div class="map-search">
+					<app-search-module
+						ref="aaaaa"
+						placeholder="请输入关键字"
+						:focus="false"
+						@input="searchFn"
+					/>
+				</div>
+				<!-- 地图 -->
+				<!-- <div class="map-box">
+					<map id="myMap" style="width: 100%; height: 140px;" :latitude="latitude" :longitude="longitude" @regionchange="mapChange">
+						<cover-image class="current-site-icon" src="../../static/images/common/localposition.png"></cover-image>
+						<cover-view class="reload" @click="reload">
+							<cover-view class="center1">
+								<cover-view class="center2"></cover-view>
+							</cover-view>
+						</cover-view>
+					</map>
+				</div>-->
+				<!-- 列表 -->
+				<scroll-view class="customer-list" scroll-y>
+					<view
+						v-for="(item, itemIndex) in flowerList"
+						:key="itemIndex"
+						@click="switchAddress(item, itemIndex)"
+						class="customer-item"
+					>
+						<view class="item-avatar">
+							<image
+								src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+								alt="商品图"
+							/>
+						</view>
+						<view class="item-info">
+							<view class="item-name"> 粉佳人</view>
+							<view class="item-weight">2斤/扎</view>
+							<view class="item-price"> ¥6.00/扎</view></view
+						>
+
+						<view class="item-tag" v-if="index == itemIndex">
+							<text class="iconfont icondagou"> </text>
+						</view>
+					</view>
+				</scroll-view>
+			</div>
+		</bottom-popup>
+	</div>
+</template>
+
+<script>
+import BottomPopup from "@/components/plugin/bottom-popup";
+import AppClose from "@/components/module/app-close";
+import AppSearchModule from "@/components/module/app-search";
+// api
+// import { suggestion } from "@/api/common";
+export default {
+	name: "app-customer-sel",
+	components: {
+		BottomPopup,
+		AppClose,
+		AppSearchModule
+	},
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			showPopup: false,
+			keyword: "",
+			flowerList: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
+			index: -1
+		};
+	},
+	mounted() {
+		this.showPopup = this.show;
+	},
+	// onLoad(val) {
+	// 	this.mapCtx = uni.createMapContext('myMap')
+	// 	this.query = val
+	// 	this.reload()
+	// },
+
+	watch: {
+		show(val) {
+			this.showPopup = val;
+
+			// #ifdef H5
+			this.$nextTick(function() {
+				setTimeout(() => {
+					this.$refs.aaaaa.$refs.searchInput._focusInput();
+				}, 1000);
+			});
+			// #endif
+
+			// if (val) {
+			// 	this.getAreaList()
+			// }
+		}
+	},
+	methods: {
+		getAreaList() {
+			if (!this.keyword) {
+				return false;
+			}
+			// suggestion({ region: this.city, keyword: this.keyword }).then(res => {
+			// 	this.flowerList = res.data.data;
+			// });
+		},
+		// 搜索
+		searchFn(e) {
+			this.keyword = e;
+			this.getAreaList();
+			// this.$emit('search', e)
+		},
+		hidePopup() {
+			this.$emit("update:show", false);
+			this.$emit("hide");
+		},
+		switchAddress(item, index) {
+			this.index = index;
+			this.$emit("select", item);
+			this.hidePopup();
+		}
+		// 地图操作
+		// reload() {
+		// 	uni.getLocation({
+		// 		type: 'wgs84',
+		// 		success: res => {
+		// 			this.latitude = res.latitude
+		// 			this.longitude = res.longitude
+		// 			// this.customerList()
+		// 		},
+		// 		// eslint-disable-next-line handle-callback-err
+		// 		fail: err => {
+		// 			this.$msg('定位失败')
+		// 			// setTimeout(function() {
+		// 			// 	uni.navigateBack({
+		// 			// 		delta: 1
+		// 			// 	})
+		// 			// }, 1500)
+		// 		}
+		// 	})
+		// },
+		// mapChange(e) {
+		// 	if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
+		// 		this.mapCtx.getCenterLocation({
+		// 			success: res => {
+		// 				this.longitude = res.longitude
+		// 				this.latitude = res.latitude
+		// 				// this.customerList()
+		// 			}
+		// 		})
+		// 	}
+		// },
+		// 获取列表
+		// customerList() {
+		// 	geocoder({
+		// 		latitude: this.latitude,
+		// 		longitude: this.longitude
+		// 	}).then(res => {
+		// 		console.log(res)
+		// 		let data = res.result
+		// 		this.currentSelectAddress = 0
+		// 		this.flowerList = data.pois
+		// 		// this.currentRegion = [data.address_component.province, data.address_component.city, data.address_component.district]
+		// 	})
+		// },
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+// 弹窗
+/deep/.popup-wrap {
+	.tui-popup-class {
+		border-top-left-radius: 20px;
+		border-top-right-radius: 20px;
+	}
+}
+.map-wrap {
+	.map-top-tit-wrap {
+		padding: 30px 0;
+		text-align: center;
+		font-size: 34px;
+	}
+	.map-search {
+		padding: 0 30px;
+		margin-bottom: 20px;
+	}
+	.map-box {
+		.current-site-icon {
+			width: 63px;
+			height: 90px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	// 列表
+	.customer-list {
+		min-height: 500rpx;
+		max-height: 820rpx;
+		// padding-bottom: 110rpx;
+		box-sizing: border-box;
+		.customer-item {
+			display: flex;
+			width: 100%;
+			align-items: center;
+			line-height: 40rpx;
+			padding: 18rpx 30px;
+			text-align: left;
+			border-bottom: 1px solid #eee;
+			position: relative;
+			.item-avatar {
+				flex-shrink: 0;
+				width: 66px;
+				height: 66px;
+				border-radius: 50%;
+				overflow: hidden;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.item-info {
+				margin: 0 20upx;
+				flex: 1;
+				display: flex;
+				align-items: center;
+			}
+			.item-name {
+				margin: 0 20upx;
+				flex: 1;
+			}
+			.item-weight {
+				flex-shrink: 0;
+				margin: 0 20upx;
+				flex: 1;
+			}
+			.item-price {
+				margin: 0 20upx;
+				flex: 1;
+			}
+			.item-tag {
+				display: flex;
+				color: #3385ff;
+				.iconfont {
+					font-size: 32upx;
+				}
+			}
+		}
+	}
+	.add-customer-bar {
+		width: 100%;
+		height: 100px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #3385ff;
+		font-size: 26px;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+	}
+}
+</style>