零售端的备注

hdApp/src/admin/billing/index2.vue

@@ -33,7 +33,7 @@
 						<view v-if="!$util.isEmpty(globalItemData)">
 							<template v-for="(productItem, productIndex) in globalItemData">
 								<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
-								<view style="height: 175upx" :key="productIndex">
+								<view class="item-row item-row--h175" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
 									<Commondity
 										:globalCheckStock="true"
 										:selectJobType="selectJobType"
@@ -42,6 +42,7 @@
 										@replaceItemFn="replaceItemFn"
 										@goToSpecialVariety="goToSpecialVariety"
 										@delProduct="delProduct"
+										@remarkCleared="onItemRemarkCleared"
 									></Commondity>
 								</view>
 							</template>
@@ -247,6 +248,16 @@ export default {
 
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			if (this.$util.isEmpty(this.globalItemData)) {
+				return
+			}
+			this.globalItemData.forEach((item, index) => {
+				if (item.id == id) {
+					this.$set(this.globalItemData[index], 'itemRemark', '')
+				}
+			})
+		},
 		delProduct(info){
 			let that = this
 			that.$util.confirmModal({content:'确认删除?'},() => {
@@ -377,6 +388,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .billing_box_bg {
 	background: white;
 	height: 100%;

hdApp/src/admin/breakage/index.vue

@@ -28,12 +28,13 @@
 					<view class="item_list_bx selectAll">
 						<template v-for="(productItem, productIndex) in globalItemData">
 							<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
-							<view style="height: 175upx" :key="productIndex">
+							<view class="item-row item-row--h175" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
 								<Commondity
 									:checkStock="true"
 									:info="productItem"
 									@showAddModelFn="showAddModelFn"
 									@replaceItemFn="replaceItemFn"
+									@remarkCleared="onItemRemarkCleared"
 								></Commondity>
 							</view>
 						</template>
@@ -135,6 +136,16 @@ export default {
 		this.initData()
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			if (this.$util.isEmpty(this.globalItemData)) {
+				return
+			}
+			this.globalItemData.forEach((item, index) => {
+				if (item.id == id) {
+					this.$set(this.globalItemData[index], 'itemRemark', '')
+				}
+			})
+		},
 		selectFlowerNumFn(){
 			this.$refs.globalClassImgRef.open('top')
 		},
@@ -159,6 +170,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .billing_box_bg {
 	height: 100%;
 	background: white;

hdApp/src/admin/changePrice/components/Item2.vue

@@ -55,6 +55,8 @@
 		</view>
 	</view>
 
+	<item-remark-bar :text="info.itemRemark" :item-id="info.id" :info="info" @cleared="onItemRemarkCleared" />
+
 	<view class="level-price">
 		<text>剩余 {{info.stock?parseFloat(info.stock):0}}</text>
 		<text style="position:absolute;left:40upx;">毛利 ￥{{ info.ml ? parseFloat(info.ml) : 0 }}</text>
@@ -64,9 +66,12 @@
 </view>
 </template>
 <script>
+import ItemRemarkBar from '@/components/module/itemRemarkBar.vue'
+
 export default {
 	name: "item",
 	components: {
+		ItemRemarkBar
 	},
 	props: {
 		isPrice: {
@@ -137,6 +142,10 @@ export default {
 		}
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			this.$set(this.info, 'itemRemark', '')
+			this.$emit('remarkCleared', id)
+		},
 		hideChangeFn(item,status){
 			this.$emit("hideChangeFn",item,status)
 		},

hdApp/src/admin/changePrice/list2.vue

@@ -33,9 +33,10 @@
 
 							<template v-for="(productItem, productIndex) in globalItemData">
 								<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
-								<view style="height:230upx" :key="productIndex">
+								<view class="item-row item-row--h230" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
 									<ItemComponent :isPrice="false" :info="productItem" @hideChangeFn="hideChangeFn" :ref="`productRef${productItem.id}`"
-									@savePrice="savePrice" @cancelDiscountFn="cancelDiscountFn" @cancelFullOff="cancelFullOff" @cancelPreSellFn="cancelPreSellFn"></ItemComponent>
+									@savePrice="savePrice" @cancelDiscountFn="cancelDiscountFn" @cancelFullOff="cancelFullOff" @cancelPreSellFn="cancelPreSellFn"
+									@remarkCleared="onItemRemarkCleared"></ItemComponent>
 								</view>
 							</template>
 
@@ -106,6 +107,16 @@ export default {
 		this.initProduct()
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			if (this.$util.isEmpty(this.globalItemData)) {
+				return
+			}
+			this.globalItemData.forEach((item, index) => {
+				if (item.id == id) {
+					this.$set(this.globalItemData[index], 'itemRemark', '')
+				}
+			})
+		},
 		goBatchChange(){
 			this.$util.pageTo({url: '/admin/changePrice/batchChange'})
 		},
@@ -253,6 +264,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .billing_box_bg {
 	height: 100%;
 	background: white;

hdApp/src/admin/item/components/item2.vue

@@ -62,10 +62,7 @@
 		</view>
 	</view>
 
-	<view class="remark-bar" v-if="info.itemRemark">
-		<text class="remark-label">备注</text>
-		<text class="remark-text">{{ info.itemRemark }}</text>
-	</view>
+	<item-remark-bar :text="info.itemRemark" :item-id="info.id" :info="info" @cleared="onItemRemarkCleared" />
 
 	<view class="bottom-buttons-container">
 		<text class="bottom-button" @click.stop="doPrintLabel(info,1)">价码</text>
@@ -79,9 +76,12 @@
 </template>
 <script>
 import { mapGetters } from "vuex";
+import ItemRemarkBar from '@/components/module/itemRemarkBar.vue'
+
 export default {
 	name: "item",
 	components: {
+		ItemRemarkBar
 	},
 	props: {
 		info: {
@@ -110,6 +110,10 @@ export default {
 		}
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			this.$set(this.info, 'itemRemark', '')
+			this.$emit('remarkCleared', id)
+		},
 		hideChangeFn(item){
 			let status = this.frontHide == 0 ? 1 : 0
 			this.$emit("hideChangeFn",item,status)
@@ -140,36 +144,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .product{
-	min-height:230upx;
-}
-.remark-bar {
-	display: flex;
-	align-items: center;
-	margin-top: 4upx;
-	margin-bottom: 6upx;
-	padding: 6upx 10upx;
-	background: #fff8f2;
-	border-left: 5upx solid #ff8c3a;
-	box-sizing: border-box;
-}
-.remark-label {
-	font-size: 28upx;
-	font-weight: bold;
-	color: #ff8c3a;
-	line-height: 1.2;
-	margin-right: 10upx;
-	flex-shrink: 0;
-}
-.remark-text {
-	font-size: 30upx;
-	font-weight: bold;
-	color: #ff2842;
-	line-height: 1.3;
 	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	flex: 1;
-	min-width: 0;
 }
 .bottom-buttons-container{
 	display: flex;

hdApp/src/admin/item/detail.vue

@@ -345,6 +345,19 @@
               <input v-model="form.skMore" placeholder-class="phcolor" class="tui-input" name="skMore" @focus="form.skMore=''" placeholder="在成本价基础上多卖的金额" type="digit" />
             </tui-list-cell>
           </block>
+          <tui-list-cell class="line-cell item-remark-line" :hover="false">
+            <view class="tui-title item-remark-line__title">备注</view>
+            <input
+              v-model="form.itemRemark"
+              placeholder-class="item-remark-line__ph"
+              class="tui-input item-remark-line__input"
+              name="itemRemark"
+              placeholder="选填，最多200字"
+              maxlength="200"
+              type="text"
+            />
+          </tui-list-cell>
+
           <tui-list-cell class="line-cell" :hover="false">
             <view class="tui-title">顺序值</view>
             <input v-model="form.inTurn" placeholder-class="phcolor" class="tui-input" name="inTurn" @focus="form.inTurn=''" placeholder="请填写数字" type="number" />
@@ -611,6 +624,7 @@ export default {
         virtualStock:0,
         ratioType:0,
         inTurn:100,
+        itemRemark:'',
         cpInfo:[]
       },
       itemClassData:[],
@@ -1506,6 +1520,11 @@ export default {
       }
 
       let form = JSON.parse(JSON.stringify(this.form))
+      form.itemRemark = (form.itemRemark || '').trim()
+      if (form.itemRemark.length > 200) {
+        this.$msg('备注不能超过200字')
+        return
+      }
       form.images = form.images.join(',')
       uni.showLoading()
       requestHost({...form,appVersion:3}).then(res => {
@@ -1694,6 +1713,17 @@ export default {
   font-size: 28upx;
   background-color: #fff;
 }
+.item-remark-line {
+  .item-remark-line__title,
+  .item-remark-line__input {
+    color: #ff2842;
+    font-weight: bold;
+  }
+}
+.item-remark-line__ph {
+  color: #ff2842;
+  font-weight: bold;
+}
 .app-footer {
   justify-content: space-evenly;
   z-index: 9999;

hdApp/src/admin/item/list2.vue

@@ -48,11 +48,12 @@
 								<template v-for="(productItem, productIndex) in globalItemData">
 									<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
 									<!-- 下面这个key显示有问题，不要动，动了好像会有问题！！！！ -->
-									<view class="item-row" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
+									<view class="item-row item-row--h260" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
 										<ItemStock :info="productItem" @moreAction="moreAction" 
 										@doPrintLabel="doPrintLabel" @cancelDiscountFn="cancelDiscountFn" @cancelFullOff="cancelFullOff"
 										:ref="`productRef${productItem.id}`" @hideChangeFn="hideChangeFn" 
-										@cancelPreSellFn="cancelPreSellFn" @breakSingleItem="breakSingleItem">
+										@cancelPreSellFn="cancelPreSellFn" @breakSingleItem="breakSingleItem"
+										@remarkCleared="syncItemRemark($event, '')">
 										</ItemStock>
 									</view>
 								</template>
@@ -721,6 +722,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .app-content {
 	display: flex;
 	flex-direction: column;
@@ -795,12 +798,6 @@ export default {
 	.item_list_bx {
 		padding: 40upx 16upx;
 	}
-	.item-row {
-		min-height: 255upx;
-	}
-	.item-row--remark {
-		min-height: 300upx;
-	}
 	.item_list_title {
 		margin-bottom: 20upx;
 		font-size: 30upx;

hdApp/src/admin/part/index.vue

@@ -28,12 +28,13 @@
 					<view class="item_list_bx selectAll">
 						<template v-for="(productItem, productIndex) in globalItemData">
 							<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
-							<view style="height: 175upx" :key="productIndex">
+							<view class="item-row item-row--h175" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
 								<Commondity
 									:checkStock="true"
 									:info="productItem"
 									@showAddModelFn="showAddModelFn"
 									@replaceItemFn="replaceItemFn"
+									@remarkCleared="onItemRemarkCleared"
 								></Commondity>
 							</view>
 						</template>
@@ -135,6 +136,16 @@ export default {
 		this.initData()
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			if (this.$util.isEmpty(this.globalItemData)) {
+				return
+			}
+			this.globalItemData.forEach((item, index) => {
+				if (item.id == id) {
+					this.$set(this.globalItemData[index], 'itemRemark', '')
+				}
+			})
+		},
 		selectFlowerNumFn(){
 			this.$refs.globalClassImgRef.open('top')
 		},
@@ -159,6 +170,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .billing_box_bg {
 	height: 100%;
 	background: white;

hdApp/src/components/module/app-commodity.vue

@@ -1,4 +1,5 @@
 <template>
+	<view class="commodity-wrap">
 	<view class="item-cmd_bx" @click="showAddModelFn()">
 		<view class="img_bx" style="background:#eeeeee">
 			<image :src="info.cover" lazy-load="true" :lazy-load-margin="0"></image>
@@ -22,11 +23,17 @@
 			</view>
 		</view>
 	</view>
+	<item-remark-bar :text="info.itemRemark" :item-id="info.id" :info="info" @cleared="onItemRemarkCleared" />
+	</view>
 </template>
 <script>
+import ItemRemarkBar from '@/components/module/itemRemarkBar.vue'
+
 export default {
 	name: "Commodity",
-	components: {},
+	components: {
+		ItemRemarkBar
+	},
 	mixins: [],
 	props: {
 		info: {
@@ -99,6 +106,10 @@ export default {
 
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			this.$set(this.info, 'itemRemark', '')
+			this.$emit('remarkCleared', id)
+		},
 		addItemFn () {
 			this.$emit("replaceItemFn", this.info,0,'add')
 		},
@@ -113,9 +124,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.commodity-wrap {
+	width: 100%;
+	overflow: hidden;
+}
 .item-cmd_bx {
 	position: relative;
-	margin-bottom: 20upx;
+	margin-bottom: 0;
 	.img_bx {
 		height: 140upx;
 		width: 140upx;

hdApp/src/components/module/app-commodity2.vue

@@ -1,4 +1,5 @@
 <template>
+	<view class="commodity-wrap">
 	<view class="item-cmd_bx" @click.stop="showAddModelFn()">
 		<view class="img_bx" style="background:#eeeeee">
 			<block v-if="info.frontHide == 1">
@@ -44,11 +45,17 @@
 			</view>
 		</view>
 	</view>
+	<item-remark-bar :text="info.itemRemark" :item-id="info.id" :info="info" @cleared="onItemRemarkCleared" />
+	</view>
 </template>
 <script>
+import ItemRemarkBar from '@/components/module/itemRemarkBar.vue'
+
 export default {
 	name: "Commodity",
-	components: {},
+	components: {
+		ItemRemarkBar
+	},
 	mixins: [],
 	props: {
 		info: {
@@ -110,6 +117,10 @@ export default {
 		this.remark = this.info.remark||''
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			this.$set(this.info, 'itemRemark', '')
+			this.$emit('remarkCleared', id)
+		},
 		copyCreate(){
 			this.pageTo({url: '/admin/item/copy?id='+this.info.id})
 		},
@@ -145,9 +156,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.commodity-wrap {
+	width: 100%;
+	overflow: hidden;
+}
 .item-cmd_bx {
 	position: relative;
-	margin-bottom: 20upx;
+	margin-bottom: 0;
 	.img_bx {
 		height: 140upx;
 		width: 140upx;

hdApp/src/components/module/itemRemarkBar.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="item-remark-bar" v-if="displayText">
+		<text class="item-remark-bar__label">备注</text>
+		<view class="item-remark-bar__text-wrap">
+			<text class="item-remark-bar__text">{{ displayText }}</text>
+		</view>
+		<text
+			v-if="showCancelBtn"
+			class="item-remark-bar__cancel"
+			@click.stop="onCancelRemark"
+		>取消</text>
+	</view>
+</template>
+
+<script>
+import { clearItemRemark } from '@/api/item'
+
+export default {
+	name: 'ItemRemarkBar',
+	props: {
+		text: {
+			type: String,
+			default: ''
+		},
+		itemId: {
+			type: [Number, String],
+			default: ''
+		},
+		info: {
+			type: Object,
+			default: null
+		},
+		cancelable: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			remarkHidden: false
+		}
+	},
+	computed: {
+		remarkSource() {
+			if (this.info && this.info.itemRemark != null && this.info.itemRemark !== undefined) {
+				return this.info.itemRemark
+			}
+			return this.text
+		},
+		displayText() {
+			if (this.remarkHidden) {
+				return ''
+			}
+			const t = this.remarkSource == null ? '' : String(this.remarkSource).trim()
+			return t
+		},
+		showCancelBtn() {
+			return this.cancelable && !!this.itemId
+		}
+	},
+	watch: {
+		text() {
+			this.resetRemarkHidden()
+		},
+		'info.itemRemark'() {
+			this.resetRemarkHidden()
+		}
+	},
+	methods: {
+		resetRemarkHidden() {
+			const t = this.remarkSource == null ? '' : String(this.remarkSource).trim()
+			if (t) {
+				this.remarkHidden = false
+			}
+		},
+		onCancelRemark() {
+			const id = this.itemId
+			if (!id) {
+				return
+			}
+			this.$util.confirmModal({ content: '确定取消备注？' }, () => {
+				clearItemRemark({ id }).then(res => {
+					if (res.code == 1) {
+						if (this.info) {
+							this.$set(this.info, 'itemRemark', '')
+						}
+						this.remarkHidden = true
+						this.$emit('cleared', id)
+						this.$nextTick(() => {
+							this.$forceUpdate()
+						})
+						uni.showToast({
+							title: res.msg || '已取消备注',
+							duration: 1500
+						})
+					} else if (res.msg) {
+						this.$msg(res.msg)
+					}
+				})
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.item-remark-bar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: 100%;
+	height: 48upx;
+	max-height: 48upx;
+	margin-top: 4upx;
+	margin-bottom: 4upx;
+	padding: 0 10upx;
+	background: #fff8f2;
+	border-left: 5upx solid #ff8c3a;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+.item-remark-bar__label {
+	font-size: 26upx;
+	font-weight: bold;
+	color: #ff8c3a;
+	line-height: 48upx;
+	margin-right: 8upx;
+	flex-shrink: 0;
+}
+.item-remark-bar__text-wrap {
+	flex: 1;
+	min-width: 0;
+	height: 48upx;
+	overflow: hidden;
+}
+.item-remark-bar__text {
+	display: block;
+	font-size: 28upx;
+	font-weight: bold;
+	color: #ff2842;
+	line-height: 48upx;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.item-remark-bar__cancel {
+	flex-shrink: 0;
+	font-size: 26upx;
+	color: #3385ff;
+	line-height: 48upx;
+	padding-left: 12upx;
+	white-space: nowrap;
+}
+</style>

hdApp/src/pagesStorehouse/inventory/select.vue

@@ -28,13 +28,14 @@
 						{{ classItem.className }}
 					</view>
 					<template v-for="(productItem, productIndex) in classItem.child">
-						<view style="height: 160upx" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
+						<view class="item-row item-row--h175" :class="{ 'item-row--remark': productItem.itemRemark }" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
 						<Commondity v-if="classItem.isActive"
 							:key="productIndex"
 							:info="productItem"
 							:selectJobType="selectJobType"
 							@showAddModelFn="showAddModelFn"
 							@replaceItemFn="replaceItemFn"
+							@remarkCleared="onItemRemarkCleared"
 						></Commondity>
 						</view>
 					</template>
@@ -114,6 +115,21 @@ export default {
 		};
 	},
 	methods: {
+		onItemRemarkCleared(id) {
+			if (this.$util.isEmpty(this.globalClassItemList)) {
+				return
+			}
+			this.globalClassItemList.forEach((classItem, classIndex) => {
+				if (this.$util.isEmpty(classItem.child)) {
+					return
+				}
+				classItem.child.forEach((item, itemIndex) => {
+					if (item.id == id) {
+						this.$set(this.globalClassItemList[classIndex].child[itemIndex], 'itemRemark', '')
+					}
+				})
+			})
+		},
 		confirmSelectEvent() {
 			this.$util.pageTo({url: "/pagesStorehouse/inventory/update",type:2})
 		}
@@ -121,6 +137,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '@/static/css/item-list-row.scss';
+
 .billing_box_bg {
 	height: 100%;
 	display: flex;

hdApp/src/static/css/item-list-row.scss

@@ -0,0 +1,52 @@
+.item-row {
+	box-sizing: border-box;
+	overflow: hidden;
+}
+.item-row--h175 {
+	min-height: 175upx;
+	max-height: 175upx;
+}
+.item-row--h175.item-row--remark {
+	min-height: 230upx;
+	max-height: 230upx;
+}
+.item-row--h190 {
+	min-height: 190upx;
+	max-height: 190upx;
+}
+.item-row--h190.item-row--remark {
+	min-height: 245upx;
+	max-height: 245upx;
+}
+.item-row--h230 {
+	min-height: 230upx;
+	max-height: 230upx;
+}
+.item-row--h230.item-row--remark {
+	min-height: 285upx;
+	max-height: 285upx;
+}
+.item-row--h240 {
+	min-height: 240upx;
+	max-height: 240upx;
+}
+.item-row--h240.item-row--remark {
+	min-height: 295upx;
+	max-height: 295upx;
+}
+.item-row--h255 {
+	min-height: 255upx;
+	max-height: 255upx;
+}
+.item-row--h255.item-row--remark {
+	min-height: 310upx;
+	max-height: 310upx;
+}
+.item-row--h260 {
+	min-height: 260upx;
+	max-height: 260upx;
+}
+.item-row--h260.item-row--remark {
+	min-height: 315upx;
+	max-height: 315upx;
+}