|
|
@@ -50,7 +50,7 @@
|
|
|
<el-tag v-else type="info">隐藏</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="排序" align="center" prop="sort" width="80" />
|
|
|
+ <el-table-column label="分类排序" align="center" prop="sort" width="80" />
|
|
|
<el-table-column label="关联商品" align="center" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="text" @click="showCategoryProducts(scope.row)">查看</el-button>
|
|
|
@@ -97,11 +97,26 @@
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 关联商品弹窗 -->
|
|
|
- <el-dialog title="关联商品" :visible.sync="productsOpen" width="960px" append-to-body>
|
|
|
- <div class="mb8">关联商品数量: {{ productsTotal }}个</div>
|
|
|
+ <el-dialog title="关联商品" :visible.sync="productsOpen" width="1000px" append-to-body @closed="onProductsDialogClosed">
|
|
|
+ <div class="products-toolbar mb8">
|
|
|
+ <el-button
|
|
|
+ v-hasPermi="['store:userEndCategory:edit']"
|
|
|
+ size="small"
|
|
|
+ :type="productsSortEditMode ? 'warning' : 'default'"
|
|
|
+ @click="toggleProductsSortEdit"
|
|
|
+ >{{ productsSortEditMode ? '取消调整' : '调整排序' }}</el-button>
|
|
|
+ <el-button
|
|
|
+ v-hasPermi="['store:userEndCategory:edit']"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ :disabled="!productsSortEditMode"
|
|
|
+ @click="saveProductsSortAction"
|
|
|
+ >保存排序</el-button>
|
|
|
+ <span class="products-count">关联商品数量: {{ productsTotal }}个</span>
|
|
|
+ </div>
|
|
|
<el-table v-loading="productsLoading" :data="productsList" border>
|
|
|
<el-table-column label="商品ID" align="center" prop="productId" width="80" />
|
|
|
- <el-table-column label="商品名称" align="center" prop="productName" min-width="140" show-overflow-tooltip />
|
|
|
+ <el-table-column label="商品名称" align="center" prop="productName" min-width="100" show-overflow-tooltip />
|
|
|
<el-table-column label="售价" align="center" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
<span v-if="scope.row.price != null">¥{{ scope.row.price.toFixed(2) }}</span>
|
|
|
@@ -123,6 +138,20 @@
|
|
|
<span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="商品排序" align="center" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="scope.row.sort"
|
|
|
+ :min="0"
|
|
|
+ :max="9999"
|
|
|
+ :step="1"
|
|
|
+ size="small"
|
|
|
+ controls-position="right"
|
|
|
+ :disabled="!productsSortEditMode"
|
|
|
+ class="product-sort-input"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
<pagination v-show="productsTotal>0" :total="productsTotal" :page.sync="productsQuery.pageNum" :limit.sync="productsQuery.pageSize" @pagination="loadCategoryProducts" />
|
|
|
</el-dialog>
|
|
|
@@ -130,7 +159,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listUserEndCategory, getUserEndCategory, addUserEndCategory, updateUserEndCategory, delUserEndCategory, listCategoryProducts } from '@/api/hisStore/userEndCategory'
|
|
|
+import { listUserEndCategory, getUserEndCategory, addUserEndCategory, updateUserEndCategory, delUserEndCategory, listCategoryProducts, saveCategoryProductsSort } from '@/api/hisStore/userEndCategory'
|
|
|
import Material from '@/components/Material'
|
|
|
|
|
|
export default {
|
|
|
@@ -169,7 +198,8 @@ export default {
|
|
|
productsList: [],
|
|
|
productsTotal: 0,
|
|
|
productsQuery: { pageNum: 1, pageSize: 10 },
|
|
|
- currentCategoryId: null
|
|
|
+ currentCategoryId: null,
|
|
|
+ productsSortEditMode: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -252,14 +282,44 @@ export default {
|
|
|
showCategoryProducts(row) {
|
|
|
this.currentCategoryId = row.id
|
|
|
this.productsQuery = { pageNum: 1, pageSize: 10 }
|
|
|
+ this.productsSortEditMode = false
|
|
|
this.productsOpen = true
|
|
|
this.loadCategoryProducts()
|
|
|
},
|
|
|
+ onProductsDialogClosed() {
|
|
|
+ this.productsSortEditMode = false
|
|
|
+ },
|
|
|
+ toggleProductsSortEdit() {
|
|
|
+ if (this.productsSortEditMode) {
|
|
|
+ this.productsSortEditMode = false
|
|
|
+ this.loadCategoryProducts()
|
|
|
+ } else {
|
|
|
+ this.productsSortEditMode = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saveProductsSortAction() {
|
|
|
+ if (!this.productsSortEditMode || !this.currentCategoryId) return
|
|
|
+ const payload = this.productsList.map(r => {
|
|
|
+ let s = r.sort != null && r.sort !== '' ? Number(r.sort) : 0
|
|
|
+ if (Number.isNaN(s)) s = 0
|
|
|
+ s = Math.min(9999, Math.max(0, s))
|
|
|
+ return { productId: r.productId, sort: s }
|
|
|
+ })
|
|
|
+ saveCategoryProductsSort(this.currentCategoryId, payload).then(() => {
|
|
|
+ this.msgSuccess('保存成功')
|
|
|
+ this.productsSortEditMode = false
|
|
|
+ this.loadCategoryProducts()
|
|
|
+ })
|
|
|
+ },
|
|
|
loadCategoryProducts() {
|
|
|
if (!this.currentCategoryId) return
|
|
|
this.productsLoading = true
|
|
|
listCategoryProducts(this.currentCategoryId, this.productsQuery).then(response => {
|
|
|
- this.productsList = response.rows || []
|
|
|
+ const rows = response.rows || []
|
|
|
+ this.productsList = rows.map(r => ({
|
|
|
+ ...r,
|
|
|
+ sort: r.sort != null && r.sort !== '' ? Number(r.sort) : 0
|
|
|
+ }))
|
|
|
this.productsTotal = response.total || 0
|
|
|
this.productsLoading = false
|
|
|
})
|
|
|
@@ -270,4 +330,18 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
.mr4 { margin-right: 4px; }
|
|
|
+.products-toolbar {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+.products-count {
|
|
|
+ margin-left: auto;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.product-sort-input >>> .el-input__inner {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
</style>
|