优化cdn动态加载管理端,修复砍价金额bug,删除部分不规范代码

This commit is contained in:
lemon橪
2021-09-01 10:11:12 +08:00
parent 84cfb26512
commit 71e4c49c3e
59 changed files with 1181 additions and 1527 deletions

View File

@@ -4,7 +4,7 @@
<Row>
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="商品名称" prop="goodsName">
<Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px"/>
<Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
@@ -15,8 +15,8 @@
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间"
style="width: 200px"></DatePicker>
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
@@ -25,7 +25,7 @@
<Button @click="add" type="primary">添加砍价</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
@on-sort-change="changeSort">
@on-sort-change="changeSort">
<template slot-scope="{ row }" slot="goodsName">
<div>
<a class="mr_10" @click="linkTo(row.goodsSku.goodsId,row.skuId)">{{row.goodsName}}</a>
@@ -33,10 +33,10 @@
<div slot="content">
<vue-qr :text="wapLinkTo(row.goodsSku.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
:size="150"></vue-qr>
:size="150"></vue-qr>
</div>
<img src="../../../assets/qrcode.svg" style="vertical-align:middle;" class="hover-pointer" width="20"
height="20" alt="">
height="20" alt="">
</Poptip>
</div>
</template>
@@ -48,279 +48,272 @@
<div>{{ row.goodsSku.quantity }}</div>
</template>
<template slot-scope="{ row,index }" slot="action">
<Button v-if="row.promotionStatus === 'NEW'" type="info"
size="small" style="margin-right: 10px" @click="edit(row)">编辑
<Button v-if="row.promotionStatus === 'NEW'" type="info" size="small" style="margin-right: 10px"
@click="edit(row)">编辑
</Button>
<Button v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'END'" type="error"
size="small" style="margin-right: 10px" @click="delAll(row)">删除
<Button v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'END'" type="error" size="small"
style="margin-right: 10px" @click="delAll(row)">删除
</Button>
</template>
</Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small"
show-total show-elevator show-sizer></Page>
@on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
show-sizer></Page>
</Row>
</Card>
</div>
</template>
<script>
import {
getKanJiaGoodsList,
delKanJiaGoods,
} from "@/api/promotion";
import { getKanJiaGoodsList, delKanJiaGoods } from "@/api/promotion";
import vueQr from "vue-qr";
export default {
name: "coupon",
components: {},
export default {
name: "coupon",
components: {
"vue-qr": vueQr,
},
data() {
return {
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
goodsName: ""
data() {
return {
selectDate: [], //选中的数据
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime", // 默认排序字段
order: "desc", // 默认排序方式
goodsName: "",
},
form: {
// 添加或编辑表单对象初始化数据
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
{
title: "商品名称",
slot: "goodsName",
minWidth: 150,
tooltip: true,
},
form: {
// 添加或编辑表单对象初始化数据
{
title: "库存数量",
slot: "quantity",
width: 100,
},
// 表单验证规则
formValidate: {},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
{
title: "商品名称",
slot: "goodsName",
minWidth: 150,
tooltip: true,
{
title: "剩余活动库存",
key: "stock",
width: 110,
},
{
title: "最低购买金额",
key: "lowestPrice",
minWidth: 110,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.lowestPrice, "¥")
);
},
{
title: "库存数量",
slot: "quantity",
width: 100,
},
{
title: "每人最低砍",
key: "lowestPrice",
minWidth: 100,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.lowestPrice, "¥")
);
},
{
title: "剩余活动库存",
key: "stock",
width: 110,
},
{
title: "每人最高砍",
key: "highestPrice",
minWidth: 100,
tooltip: true,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.highestPrice, "¥")
);
},
{
title: "最低购买金额",
key: "lowestPrice",
minWidth: 110,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.lowestPrice, "¥")
);
},
},
{
title: "结算价格",
key: "settlementPrice",
minWidth: 100,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.settlementPrice, "¥")
);
},
{
title: "每人最低砍",
key: "lowestPrice",
minWidth: 100,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.lowestPrice, "")
);
},
},
{
title: "每人最高砍",
key: "highestPrice",
minWidth: 100,
tooltip: true,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.highestPrice, "")
);
},
},
{
title: "结算价格",
key: "settlementPrice",
minWidth: 100,
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.settlementPrice, "¥")
);
},
},
{
title: "活动开始时间",
slot: "startTime",
minWidth: 150,
},
{
title: "状态",
key: "promotionStatus",
render: (h, params) => {
let text = "未知",
color = "red";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "geekblue";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "red";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
{
title: "活动开始时间",
slot: "startTime",
minWidth: 150,
},
{
title: "状态",
key: "promotionStatus",
render: (h, params) => {
let text = "未知",
color = "red";
if (params.row.promotionStatus == "NEW") {
text = "未开始";
color = "geekblue";
} else if (params.row.promotionStatus == "START") {
text = "已开始";
color = "green";
} else if (params.row.promotionStatus == "END") {
text = "已结束";
color = "red";
} else if (params.row.promotionStatus == "CLOSE") {
text = "已关闭";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
text
),
]);
},
width: 100,
},
text
),
]);
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
width: 150,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectCoupon: [], //本级选中的优惠券
};
},
props: {},
watch: {
$route(to, from) {
if (to.fullPath == "/promotion/manager-coupon") {
this.init();
}
},
},
methods: {
// 选中优惠券 父级传值
selectedList: {
handler(val) {
// 判断是否是父级回调给自己已选择优惠券
if (val.length != 0) {
this.selectCoupon = val;
}
width: 100,
},
deep: true,
immediate: true,
},
check() {
// this.selectCoupon.push(this.selectList)
this.$emit("selected", this.selectCoupon);
},
init() {
this.getDataList();
},
// 添加砍价活动跳转
add() {
this.$router.push({name: "add-kanJia-activity-goods"});
},
{
title: "操作",
slot: "action",
align: "center",
fixed: "right",
width: 150,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
selectCoupon: [], //本级选中的优惠券
};
},
props: {},
watch: {
$route(to, from) {
if (to.fullPath == "/promotion/manager-coupon") {
this.init();
}
},
},
methods: {
check() {
// this.selectCoupon.push(this.selectList)
this.$emit("selected", this.selectCoupon);
},
init() {
this.getDataList();
},
// 添加砍价活动跳转
add() {
this.$router.push({ name: "add-kanJia-activity-goods" });
},
info(v) {
this.$router.push({name: "platform-coupon-info", query: {id: v.id}});
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
// this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 0;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
info(v) {
this.$router.push({ name: "platform-coupon-info", query: { id: v.id } });
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
// this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 0;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
// 带多条件搜索参数获取表单数据 请自行修改接口
getKanJiaGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
// 带多条件搜索参数获取表单数据 请自行修改接口
getKanJiaGoodsList(this.searchForm).then((res) => {
this.loading = false;
},
edit(v) {
this.$router.push({name: "edit-kanJia-activity-goods", query: {id: v.id}});
},
delAll(row) {
this.$Modal.confirm({
title: "确认删除",
content: "确认需要删除此砍价商品",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
// 批量删除
delKanJiaGoods(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.getDataList();
}
});
},
});
},
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
mounted() {
this.init();
edit(v) {
this.$router.push({
name: "edit-kanJia-activity-goods",
query: { id: v.id },
});
},
};
delAll(row) {
this.$Modal.confirm({
title: "确认删除",
content: "确认需要删除此砍价商品",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
// 批量删除
delKanJiaGoods(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
@import "@/styles/table-common.scss";
@import "@/styles/table-common.scss";
</style>