|
|
@@ -329,7 +329,14 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="商品选择" v-if="form.isProduct === 1">
|
|
|
<el-button size="small" type="primary" @click="chooseCourseProduct">选取商品</el-button>
|
|
|
- <el-table border width="100%" style="margin-top:5px;" :data="form.courseProducts">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ width="100%"
|
|
|
+ class="course-product-table"
|
|
|
+ style="margin-top:5px;"
|
|
|
+ :data="form.courseProducts"
|
|
|
+ max-height="400"
|
|
|
+ >
|
|
|
<el-table-column label="商品名称" align="center" prop="productName"/>
|
|
|
<el-table-column label="商品价格" align="center" prop="price"/>
|
|
|
<el-table-column label="库存" align="center" prop="stock"/>
|
|
|
@@ -400,14 +407,30 @@
|
|
|
>{{ tag }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" width="160px" fixed="right">
|
|
|
+ <el-table-column label="操作" align="center" width="96" class-name="course-product-op-col">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button size="mini" type="text" icon="el-icon-delete"
|
|
|
- @click="handleCourseProductDelete(scope.row)">删除
|
|
|
- </el-button>
|
|
|
- <el-button size="mini" type="text" icon="el-icon-price-tag"
|
|
|
- @click="handleOpenHotSaleTagDialog(scope.row, scope.$index)">添加热卖标签
|
|
|
- </el-button>
|
|
|
+ <div class="course-product-op-btns">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleCourseProductDelete(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="getHotSaleTagList(scope.row).length"
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-circle-close"
|
|
|
+ @click="handleClearHotSaleTags(scope.row, scope.$index)"
|
|
|
+ >清空标签</el-button>
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-price-tag"
|
|
|
+ @click="handleOpenHotSaleTagDialog(scope.row, scope.$index)"
|
|
|
+ >热卖标签</el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -1187,6 +1210,19 @@ export default {
|
|
|
this.hotSaleTagDialog.tagInput = row.hotSaleTags || '';
|
|
|
this.hotSaleTagDialog.visible = true;
|
|
|
},
|
|
|
+ handleClearHotSaleTags(row, index) {
|
|
|
+ let idx = index;
|
|
|
+ if (idx < 0 || !this.form.courseProducts[idx]) {
|
|
|
+ if (row.productId) {
|
|
|
+ idx = this.form.courseProducts.findIndex(item => item.productId === row.productId);
|
|
|
+ } else if (row.id) {
|
|
|
+ idx = this.form.courseProducts.findIndex(item => item.id === row.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (idx >= 0 && this.form.courseProducts[idx]) {
|
|
|
+ this.$set(this.form.courseProducts[idx], 'hotSaleTags', '');
|
|
|
+ }
|
|
|
+ },
|
|
|
confirmHotSaleTag() {
|
|
|
const tags = (this.hotSaleTagDialog.tagInput || '')
|
|
|
.split(/[,,]/)
|
|
|
@@ -1994,6 +2030,32 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
+/* 商品子表:操作列垂直居中,避免 fixed 列遮挡最后一行 */
|
|
|
+.course-product-table >>> .course-product-op-col .cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: visible;
|
|
|
+ padding: 6px 4px;
|
|
|
+ line-height: normal;
|
|
|
+}
|
|
|
+
|
|
|
+.course-product-op-btns {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.course-product-op-btns .el-button {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ padding: 2px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.course-product-table >>> .el-table__body-wrapper {
|
|
|
+ padding-bottom: 8px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.avatar-uploader .el-upload {
|