更多 优化

ghs/src/assets/css/more-panel.scss

@@ -0,0 +1,83 @@
+/**
+ * 列表「更多」宫格下拉（el-dropdown-menu）
+ * 勿改 display：!important 会盖住关闭态的 display:none，导致菜单挡住操作列
+ */
+.order-more-panel.el-dropdown-menu {
+	padding: 10px !important;
+	margin: 5px 0 !important;
+	border-radius: 8px !important;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+	width: 300px;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	.el-dropdown-menu__item {
+		float: left;
+		width: 50%;
+		padding: 14px 6px 12px !important;
+		line-height: 1.35 !important;
+		text-align: center;
+		font-size: 16px;
+		color: #606266;
+		border-radius: 6px;
+		box-sizing: border-box;
+
+		i {
+			display: block;
+			font-size: 24px;
+			margin-bottom: 6px;
+			color: #409eff;
+		}
+
+		span {
+			display: block;
+			line-height: 1.3;
+		}
+
+		&:not(.is-disabled):hover,
+		&:not(.is-disabled):focus {
+			background: #ecf5ff !important;
+			color: #409eff;
+		}
+
+		&.is-disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+
+			i {
+				color: #c0c4cc;
+			}
+		}
+
+		&.is-danger i {
+			color: #f56c6c;
+		}
+
+		&.is-danger:not(.is-disabled):hover,
+		&.is-danger:not(.is-disabled):focus {
+			background: #fef0f0 !important;
+			color: #f56c6c;
+		}
+	}
+
+	&::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	/* 花材等条目多的三列布局 */
+	&.item-more-panel {
+		width: 400px !important;
+
+		.el-dropdown-menu__item {
+			width: 33.333%;
+			padding: 14px 4px 12px;
+			font-size: 15px;
+
+			i {
+				font-size: 22px;
+			}
+		}
+	}
+}

ghs/src/main.js

@@ -13,6 +13,7 @@ import '@/icons/index';
 import '@/filter/index';
 import '@/assets/css/element-variables.scss';
 import '@/assets/css/viewer.css';
+import '@/assets/css/more-panel.scss';
 
 import '@/assets/iconfont/iconfont.css';
 

ghs/src/views/in/list.vue

@@ -101,13 +101,28 @@
         <el-button size="small" v-if="scope.row.status == 5 || scope.row.status == 1">打小票({{ scope.row.printNum }})</el-button>
         <el-button @click.stop="printOrder(scope.row)" size="small" type="primary" v-else>打小票({{ scope.row.printNum }})</el-button>
 
-        <el-dropdown @command="doMore($event,scope.row)" style="margin-left:10px;">
-          <el-button size="small" v-if="scope.row.status == 5 || scope.row.status == 1">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-          <el-button type="primary" size="small" v-else>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="refundShowRecord">售后记录</el-dropdown-item>
-            <el-dropdown-item command="downExcel">下载excel</el-dropdown-item>
-            <el-dropdown-item command="cancelCurrentOrder">取消</el-dropdown-item>
+        <!-- 更多：悬停宫格面板 -->
+        <el-dropdown
+          trigger="hover"
+          style="margin-left:10px;"
+          @command="doMore($event,scope.row)"
+          @click.native.stop
+        >
+          <el-button size="small" v-if="scope.row.status == 5 || scope.row.status == 1" plain>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+          <el-button type="primary" size="small" plain v-else>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+          <el-dropdown-menu slot="dropdown" class="order-more-panel">
+            <el-dropdown-item command="refundShowRecord">
+              <i class="el-icon-document"></i>
+              <span>售后记录</span>
+            </el-dropdown-item>
+            <el-dropdown-item command="downExcel">
+              <i class="el-icon-document-checked"></i>
+              <span>下载excel</span>
+            </el-dropdown-item>
+            <el-dropdown-item command="cancelCurrentOrder" class="is-danger">
+              <i class="el-icon-close"></i>
+              <span>取消</span>
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 

ghs/src/views/item/list.vue

@@ -96,29 +96,28 @@
 		<el-button type="primary" size="small" v-if="scope.row.delStatus==0" @click.native.stop="setDelStatusFun(scope.row.id,1)" >删除</el-button>
 		<el-button type="primary" size="small" v-if="scope.row.delStatus==1" @click.native.stop="setDelStatusFun(scope.row.id,0)" >恢复</el-button>
 
-        <el-dropdown @command="doMore($event,scope.row)" style="margin-left:10px;">
-          <el-button type="primary" size="small">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-          <el-dropdown-menu slot="dropdown">
-			<el-dropdown-item command="costChange">成本变动</el-dropdown-item>
-			<el-dropdown-item command="avCostChange">平均成本变动</el-dropdown-item>
-			<el-dropdown-item command="priceChange">价格变动记录</el-dropdown-item>
-			<el-dropdown-item command="varietyManage">多颜色</el-dropdown-item>
-			<el-dropdown-item command="copyCreate">复制新建</el-dropdown-item>
-			<el-dropdown-item command="editDesc">图文介绍</el-dropdown-item>
-			<el-dropdown-item command="onStockChange">路上库存变动</el-dropdown-item>
-			<el-dropdown-item command="posterHd">批发海报</el-dropdown-item>
-			<el-dropdown-item command="posterSk">零售海报</el-dropdown-item>
-			<el-dropdown-item command="orderRecord">下单记录</el-dropdown-item>
-			<el-dropdown-item command="preSell">预售</el-dropdown-item>
-			<el-dropdown-item command="doWaste">报损</el-dropdown-item>
-			<el-dropdown-item command="doPart">拆散</el-dropdown-item>
-			<el-dropdown-item command="addItemRemark">增加备注</el-dropdown-item>
-			<el-dropdown-item command="delItem">删除</el-dropdown-item>
-			<el-dropdown-item command="sendStock">分配库存</el-dropdown-item>
-			<el-dropdown-item command="moveToLose">挪到处理区</el-dropdown-item>
-            <el-dropdown-item command="downCode" divided>下载商品码</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+		<!-- 更多：用 dropdown 宫格（fixed 列下 popover+v-model 会闪关无效） -->
+		<el-dropdown
+			trigger="hover"
+			style="margin-left:10px;"
+			@command="doMore($event, scope.row)"
+			@click.native.stop
+		>
+			<el-button type="primary" size="small" plain>
+				更多<i class="el-icon-arrow-down el-icon--right"></i>
+			</el-button>
+			<el-dropdown-menu slot="dropdown" class="order-more-panel item-more-panel">
+				<el-dropdown-item
+					v-for="act in moreActionList"
+					:key="act.cmd"
+					:command="act.cmd"
+					:class="{ 'is-danger': act.danger }"
+				>
+					<i :class="act.icon"></i>
+					<span>{{ act.text }}</span>
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
 
 	</template>
 
@@ -320,6 +319,27 @@ export default {
 		staffData:{},
 		app: null,
 		hasStock:'-1',
+		// 「更多」面板项（与 item-more-actions.run 命令一致）
+		moreActionList: [
+			{ cmd: 'costChange', text: '成本变动', icon: 'el-icon-coin' },
+			{ cmd: 'avCostChange', text: '平均成本', icon: 'el-icon-data-line' },
+			{ cmd: 'priceChange', text: '价格变动', icon: 'el-icon-s-data' },
+			{ cmd: 'varietyManage', text: '多颜色', icon: 'el-icon-picture-outline-round' },
+			{ cmd: 'copyCreate', text: '复制新建', icon: 'el-icon-document-copy' },
+			{ cmd: 'editDesc', text: '图文介绍', icon: 'el-icon-edit-outline' },
+			{ cmd: 'onStockChange', text: '路上库存', icon: 'el-icon-truck' },
+			{ cmd: 'posterHd', text: '批发海报', icon: 'el-icon-picture' },
+			{ cmd: 'posterSk', text: '零售海报', icon: 'el-icon-picture-outline' },
+			{ cmd: 'orderRecord', text: '下单记录', icon: 'el-icon-tickets' },
+			{ cmd: 'preSell', text: '预售', icon: 'el-icon-time' },
+			{ cmd: 'doWaste', text: '报损', icon: 'el-icon-delete-solid' },
+			{ cmd: 'doPart', text: '拆散', icon: 'el-icon-share' },
+			{ cmd: 'addItemRemark', text: '增加备注', icon: 'el-icon-edit' },
+			{ cmd: 'delItem', text: '删除', icon: 'el-icon-delete', danger: true },
+			{ cmd: 'sendStock', text: '分配库存', icon: 'el-icon-s-goods' },
+			{ cmd: 'moveToLose', text: '挪处理区', icon: 'el-icon-s-unfold' },
+			{ cmd: 'downCode', text: '商品码', icon: 'el-icon-download' }
+		],
 		sortLink: '',
 		operateData: {},
 		statusOption: [
@@ -1304,4 +1324,5 @@ overflow: hidden;
 text-overflow:ellipsis;
 white-space: nowrap;
 }
-</style>
+</style>
+

ghs/src/views/order/list.vue

@@ -137,22 +137,52 @@
         <el-button v-if="scope.row.status != 1 && scope.row.status != 5" @click.stop="printOrder(scope.row)" size="small" type="primary">打A4</el-button>
         <el-button v-else size="small">打A4</el-button>
 
-        <el-button @click.stop="down(scope.row)" size="small" type="primary" v-if="scope.row.status!=5 && scope.row.status!=1">下载</el-button>
-        <el-button size="small" v-else>下载</el-button>
-
-        <el-button @click.stop="allDown(scope.row)" size="small" type="primary" v-if="scope.row.status!=5 && scope.row.status!=1 && scope.row.sameTimeIdsNum>1">全下载</el-button>
-        <el-button size="small" v-else>全下载</el-button>
-
-        <el-button v-if="scope.row.status != 1 && scope.row.status != 5" @click.stop="printPin(scope.row)" size="small" type="primary">打多联</el-button>
-        <el-button v-else size="small">打多联</el-button>
-
-        <el-dropdown @command="doMore($event,scope.row)" style="margin-left:10px;">
-          <el-button type="primary" size="small" v-if="scope.row.status!=5 && scope.row.status!=1">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-          <el-button size="small" v-else>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="refundShowRecord">售后记录</el-dropdown-item>
-            <el-dropdown-item command="downExcel">下载excel</el-dropdown-item>
-            <el-dropdown-item command="cancelCurrentOrder">取消</el-dropdown-item>
+        <!-- 更多：dropdown 宫格（fixed 列下勿用受控 popover） -->
+        <el-dropdown
+          trigger="hover"
+          style="margin-left:10px;"
+          @command="runMore($event, scope.row)"
+          @click.native.stop
+        >
+          <el-button
+            size="small"
+            :type="scope.row.status!=5 && scope.row.status!=1 ? 'primary' : ''"
+            plain
+          >更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+          <el-dropdown-menu slot="dropdown" class="order-more-panel">
+            <el-dropdown-item
+              command="down"
+              :disabled="scope.row.status == 5 || scope.row.status == 1"
+            >
+              <i class="el-icon-download"></i>
+              <span>下载</span>
+            </el-dropdown-item>
+            <el-dropdown-item
+              command="allDown"
+              :disabled="!(scope.row.status!=5 && scope.row.status!=1 && scope.row.sameTimeIdsNum>1)"
+            >
+              <i class="el-icon-folder-opened"></i>
+              <span>全下载</span>
+            </el-dropdown-item>
+            <el-dropdown-item
+              command="printPin"
+              :disabled="scope.row.status == 1 || scope.row.status == 5"
+            >
+              <i class="el-icon-printer"></i>
+              <span>打多联</span>
+            </el-dropdown-item>
+            <el-dropdown-item command="refundShowRecord">
+              <i class="el-icon-document"></i>
+              <span>售后记录</span>
+            </el-dropdown-item>
+            <el-dropdown-item command="downExcel">
+              <i class="el-icon-document-checked"></i>
+              <span>下载excel</span>
+            </el-dropdown-item>
+            <el-dropdown-item command="cancelCurrentOrder" class="is-danger">
+              <i class="el-icon-close"></i>
+              <span>取消</span>
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 
@@ -459,6 +489,26 @@ export default {
       this.staffData = {title:'修改开单人',changeType:'changeKd',obj:order}
       this.$refs.selectStaffRef.init()
     },
+    /**
+     * 「更多」宫格命令：下载类直接调方法，其余走 doMore
+     * @param {string} cmd 动作标识
+     * @param {object} info 当前订单行
+     */
+    runMore(cmd, info) {
+      if (cmd === 'down') {
+        this.down(info);
+        return;
+      }
+      if (cmd === 'allDown') {
+        this.allDown(info);
+        return;
+      }
+      if (cmd === 'printPin') {
+        this.printPin(info);
+        return;
+      }
+      this.doMore(cmd, info);
+    },
     doMore(cmd,info){
       if(cmd == 'cancelCurrentOrder'){
         if(info.book == 1 && info.status == 2){
@@ -971,7 +1021,7 @@ export default {
             op: {
               visible: true,
               props: {
-                width: 710,
+                width: 520,
                 align: 'center',
                 fixed: 'right',
                 label: '操作'
@@ -1068,4 +1118,5 @@ export default {
     top: 9px;
   }
 }
-</style>
+
+</style>

hd/src/assets/css/more-panel.scss

@@ -0,0 +1,82 @@
+/**
+ * 列表「更多」宫格下拉（el-dropdown-menu）
+ * 勿改 display：!important 会盖住关闭态的 display:none，导致菜单挡住操作列
+ */
+.order-more-panel.el-dropdown-menu {
+	padding: 10px !important;
+	margin: 5px 0 !important;
+	border-radius: 8px !important;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+	width: 300px;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	.el-dropdown-menu__item {
+		float: left;
+		width: 50%;
+		padding: 14px 6px 12px !important;
+		line-height: 1.35 !important;
+		text-align: center;
+		font-size: 16px;
+		color: #606266;
+		border-radius: 6px;
+		box-sizing: border-box;
+
+		i {
+			display: block;
+			font-size: 24px;
+			margin-bottom: 6px;
+			color: #409eff;
+		}
+
+		span {
+			display: block;
+			line-height: 1.3;
+		}
+
+		&:not(.is-disabled):hover,
+		&:not(.is-disabled):focus {
+			background: #ecf5ff !important;
+			color: #409eff;
+		}
+
+		&.is-disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+
+			i {
+				color: #c0c4cc;
+			}
+		}
+
+		&.is-danger i {
+			color: #f56c6c;
+		}
+
+		&.is-danger:not(.is-disabled):hover,
+		&.is-danger:not(.is-disabled):focus {
+			background: #fef0f0 !important;
+			color: #f56c6c;
+		}
+	}
+
+	&::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	&.item-more-panel {
+		width: 400px !important;
+
+		.el-dropdown-menu__item {
+			width: 33.333%;
+			padding: 14px 4px 12px;
+			font-size: 15px;
+
+			i {
+				font-size: 22px;
+			}
+		}
+	}
+}

hd/src/main.js

@@ -13,6 +13,7 @@ import '@/icons/index';
 import '@/filter/index';
 import '@/assets/css/element-variables.scss';
 import '@/assets/css/viewer.css';
+import '@/assets/css/more-panel.scss';
 
 import '@/assets/iconfont/iconfont.css';
 

hd/src/views/goods/bouquet-list.vue

@@ -154,7 +154,7 @@
 							{{ formatTime(row.updateTime || row.createTime) }}
 						</template>
 					</el-table-column>
-					<el-table-column label="操作" width="220" fixed="right" align="center">
+					<el-table-column label="操作" width="280" fixed="right" align="center">
 						<template slot-scope="{ row }">
 							<el-button type="text" size="mini" @click="goEdit(row)">编辑</el-button>
 							<el-button type="text" size="mini" @click="openStock(row)">库存明细</el-button>
@@ -164,11 +164,18 @@
 							<el-button type="text" size="mini" @click="goEdit(row)">
 								{{ Number(row.priceType) === 1 ? '修改价格' : '设置价格' }}
 							</el-button>
-							<el-dropdown trigger="click" @command="cmd => onMore(cmd, row)">
-								<el-button type="text" size="mini">更多</el-button>
-								<el-dropdown-menu slot="dropdown">
-									<el-dropdown-item command="print">打标签</el-dropdown-item>
-									<el-dropdown-item command="poster">分享海报</el-dropdown-item>
+							<!-- 更多：悬停宫格面板 -->
+							<el-dropdown trigger="hover" @command="cmd => onMore(cmd, row)" @click.native.stop>
+								<el-button type="primary" size="mini" plain>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+								<el-dropdown-menu slot="dropdown" class="order-more-panel">
+									<el-dropdown-item command="print">
+										<i class="el-icon-printer"></i>
+										<span>打标签</span>
+									</el-dropdown-item>
+									<el-dropdown-item command="poster">
+										<i class="el-icon-picture-outline"></i>
+										<span>分享海报</span>
+									</el-dropdown-item>
 								</el-dropdown-menu>
 							</el-dropdown>
 						</template>

hd/src/views/order/list.vue

@@ -184,13 +184,33 @@
 						:disabled="!isPaid(scope.row)"
 						@click="confirmPrintTicket(scope.row)"
 					>打小票</el-button>
-					<el-dropdown style="margin-left:10px;" @command="doMore($event, scope.row)">
-						<el-button type="primary" size="small">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item command="confirmSend" :disabled="!canSend(scope.row)">确认发货</el-dropdown-item>
-							<el-dropdown-item command="confirmReach" :disabled="!canReach(scope.row)">确认送达</el-dropdown-item>
-							<el-dropdown-item command="confirmSendWork" :disabled="!canSendWork(scope.row)">制作通知</el-dropdown-item>
-							<el-dropdown-item command="refundRecord">售后记录</el-dropdown-item>
+					<!-- 更多：dropdown 宫格（fixed 列下勿用受控 popover） -->
+					<el-dropdown
+						trigger="hover"
+						style="margin-left:10px;"
+						@command="doMore($event, scope.row)"
+						@click.native.stop
+					>
+						<el-button type="primary" size="small" plain>
+							更多<i class="el-icon-arrow-down el-icon--right"></i>
+						</el-button>
+						<el-dropdown-menu slot="dropdown" class="order-more-panel">
+							<el-dropdown-item command="confirmSend" :disabled="!canSend(scope.row)">
+								<i class="el-icon-truck"></i>
+								<span>确认发货</span>
+							</el-dropdown-item>
+							<el-dropdown-item command="confirmReach" :disabled="!canReach(scope.row)">
+								<i class="el-icon-circle-check"></i>
+								<span>确认送达</span>
+							</el-dropdown-item>
+							<el-dropdown-item command="confirmSendWork" :disabled="!canSendWork(scope.row)">
+								<i class="el-icon-bell"></i>
+								<span>制作通知</span>
+							</el-dropdown-item>
+							<el-dropdown-item command="refundRecord">
+								<i class="el-icon-document"></i>
+								<span>售后记录</span>
+							</el-dropdown-item>
 						</el-dropdown-menu>
 					</el-dropdown>
 				</div>
@@ -509,8 +529,8 @@ export default {
 				.catch(() => {});
 		},
 		/**
-		 * 「更多」下拉：确认发货 / 确认送达 / 制作通知 / 售后记录
-		 * @param {string} cmd 下拉 command
+		 * 「更多」动作分发：确认发货 / 确认送达 / 制作通知 / 售后记录
+		 * @param {string} cmd 动作标识
 		 * @param {object} row 当前订单行
 		 */
 		doMore(cmd, row) {
@@ -772,9 +792,6 @@ export default {
 	.el-button {
 		margin: 0 4px;
 	}
-	.el-dropdown {
-		margin-left: 4px;
-	}
 }
 .ellipsis {
 	display: inline-block;

pt/src/assets/css/more-panel.scss

@@ -0,0 +1,82 @@
+/**
+ * 列表「更多」宫格下拉（el-dropdown-menu）
+ * 勿改 display：!important 会盖住关闭态的 display:none，导致菜单挡住操作列
+ */
+.order-more-panel.el-dropdown-menu {
+	padding: 10px !important;
+	margin: 5px 0 !important;
+	border-radius: 8px !important;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+	width: 300px;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	.el-dropdown-menu__item {
+		float: left;
+		width: 50%;
+		padding: 14px 6px 12px !important;
+		line-height: 1.35 !important;
+		text-align: center;
+		font-size: 16px;
+		color: #606266;
+		border-radius: 6px;
+		box-sizing: border-box;
+
+		i {
+			display: block;
+			font-size: 24px;
+			margin-bottom: 6px;
+			color: #409eff;
+		}
+
+		span {
+			display: block;
+			line-height: 1.3;
+		}
+
+		&:not(.is-disabled):hover,
+		&:not(.is-disabled):focus {
+			background: #ecf5ff !important;
+			color: #409eff;
+		}
+
+		&.is-disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+
+			i {
+				color: #c0c4cc;
+			}
+		}
+
+		&.is-danger i {
+			color: #f56c6c;
+		}
+
+		&.is-danger:not(.is-disabled):hover,
+		&.is-danger:not(.is-disabled):focus {
+			background: #fef0f0 !important;
+			color: #f56c6c;
+		}
+	}
+
+	&::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	&.item-more-panel {
+		width: 400px !important;
+
+		.el-dropdown-menu__item {
+			width: 33.333%;
+			padding: 14px 4px 12px;
+			font-size: 15px;
+
+			i {
+				font-size: 22px;
+			}
+		}
+	}
+}

pt/src/main.js

@@ -13,6 +13,7 @@ import '@/icons/index';
 import '@/filter/index';
 import '@/assets/css/element-variables.scss';
 import '@/assets/css/viewer.css';
+import '@/assets/css/more-panel.scss';
 
 import '@/assets/iconfont/iconfont.css';