czg_team/management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增商品列表拖拽排序

Browse Source
This commit is contained in:
gyq
2024-06-06 09:13:37 +08:00
parent 526aeda953
commit 192c37c946
6 changed files with 74 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -1,10 +1,10 @@
ENV = 'development'
# 接口地址
# VUE_APP_BASE_API = 'http://192.168.2.44:8000'
VUE_APP_BASE_API = 'http://192.168.2.42:8000'
# VUE_APP_BASE_API = 'http://192.168.2.133:8000'
# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'http://192.168.2.96:8000'
VUE_APP_WS_API = 'ws://192.168.2.128:8000'

4
.env.production
View File

@@ -2,8 +2,8 @@ ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
# VUE_APP_BASE_API = 'http://192.168.2.98:8000'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = 'wss://123.56.110.252

2
package.json
View File

@@ -45,7 +45,7 @@
"path-to-regexp": "2.4.0",
"qs": "^6.10.1",
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"sortablejs": "^1.15.2",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
"vue-clipboard2": "^0.3.3",

12
src/api/shop.js
View File

@@ -443,3 +443,15 @@ export function queryAllShopUser(params) {
}
});
}
/**
* 修改商品排序
* @returns
*/
export function upProSort(data) {
return request({
url: `/api/tbProduct/upProSort`,
method: "post",
data
});
}

10
src/views/application/components/winestorage/record.vue
View File

@@ -18,8 +18,8 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button>重置</el-button>
<el-button type="primary" @click="getTableData">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -122,8 +122,10 @@ export default {
methods: {
// 重置查询
resetHandle() {
this.tableData.page = 0;
this.tableData.page = 0
this.query.name = ''
this.query.telphone = ''
this.query.status = 1
this.getTableData()
},
// 分页回调
@@ -133,8 +135,8 @@ export default {
},
// 获取商品列表
async getTableData() {
this.tableData.loading = true
try {
this.tableData.loading = true
const res = await storageList({
...this.query,
page: this.tableData.page,

55
src/views/product/index.vue
View File

@@ -31,8 +31,9 @@
</el-col>
</el-row>
</div>
<div class="head-container">
<el-table :data="tableData.data" v-loading="tableData.loading">
<div class="head-container" id="table_drag">
<el-table ref="table" :data="tableData.data" v-loading="tableData.loading">
<el-table-column prop="id" label="ID" width="50px"></el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="shop_info">
@@ -79,7 +80,9 @@
</el-table-column>
<el-table-column label="操作" width="200">
<template v-slot="scope">
<router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
<el-button type="text" icon="el-icon-rank">排序</el-button>
<router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }"
style="margin-left: 20px !important;">
<el-button type="text" icon="el-icon-edit">编辑</el-button>
</router-link>
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
@@ -98,9 +101,10 @@
</template>
<script>
import Sortable from 'sortablejs'
import dayjs from 'dayjs'
import settings from '@/settings'
import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot } from '@/api/shop'
import { tbProduct, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort } from '@/api/shop'
export default {
data() {
return {
@@ -124,8 +128,41 @@ export default {
mounted() {
this.getTableData()
this.tbShopCategoryGet()
this.$nextTick(() => {
this.tableDrag()
})
},
methods: {
//表格拖炸
tableDrag() {
const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
new Sortable(el, {
animation: 150,
onEnd: async e => {
console.log('拖拽结束===', e);
if (e.oldIndex == e.newIndex) return
let oid = this.tableData.data[e.oldIndex].id
let nid = this.tableData.data[e.newIndex].id
let ids = this.tableData.data.map(item => item.id)
// let arr = [...this.tableData.data] // 获取表数据
// arr.splice(e.oldIndex, 1, ...arr.splice(e.newIndex, 1, arr[e.oldIndex])); // 数据处理
// this.$nextTick(() => {
// this.tableData.data = [...arr]
// })
try {
await upProSort({
strId: oid,
endId: nid,
ids: ids
})
// await this.getTableData()
window.location.reload();
} catch (error) {
console.log(error);
}
}
});
},
// 设置热门
async changeHot(e, row) {
console.log(row)
@@ -145,6 +182,7 @@ export default {
this.query.name = ''
this.query.categoryId = ''
this.query.typeEnum = ''
this.tableData.page = 0
this.getTableData()
},
// 分页回调
@@ -199,6 +237,15 @@ export default {
</script>
<style scoped lang="scss">
.handle {
font-size: 18px;
color: #999;
&:hover {
cursor: grab;
}
}
.shop_info {
display: flex;