mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
551 lines
17 KiB
Vue
551 lines
17 KiB
Vue
<template>
|
|
<div class="search">
|
|
<el-card>
|
|
<el-form
|
|
ref="searchForm"
|
|
:model="searchForm"
|
|
inline
|
|
label-width="70px"
|
|
class="search-form"
|
|
@keyup.enter.prevent="handleSearch"
|
|
>
|
|
<el-form-item label="商品名称" prop="goodsName">
|
|
<el-input
|
|
v-model="searchForm.goodsName"
|
|
placeholder="请输入商品名称"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="商品品牌" prop="brandId">
|
|
<el-select
|
|
v-model="searchForm.brandId"
|
|
placeholder="请选择商品品牌"
|
|
clearable
|
|
filterable
|
|
style="width: 240px"
|
|
>
|
|
<el-option
|
|
v-for="item in brandList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="店铺分类" prop="storeCategoryPath">
|
|
<el-cascader
|
|
v-model="searchForm.storeCategoryPath"
|
|
:options="shopCategoryList"
|
|
:props="shopCategoryProps"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择店铺分类"
|
|
style="width: 240px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="商品类型" prop="goodsType">
|
|
<el-select
|
|
v-model="searchForm.goodsType"
|
|
placeholder="请选择商品类型"
|
|
clearable
|
|
style="width: 240px"
|
|
>
|
|
<el-option label="实物商品" value="PHYSICAL_GOODS" />
|
|
<el-option label="虚拟商品" value="VIRTUAL_GOODS" />
|
|
<el-option label="电子卡券" value="E_COUPON" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card class="list-card">
|
|
<el-tabs v-model="currentAuthStatus" class="auth-tabs" @tab-change="onAuthStatusChange">
|
|
<el-tab-pane label="全部" name="ALL" />
|
|
<el-tab-pane label="待审核" name="TOBEAUDITED" />
|
|
<el-tab-pane label="已审核" name="PASS" />
|
|
<el-tab-pane label="审核未通过" name="REFUSE" />
|
|
</el-tabs>
|
|
|
|
<div class="operation">
|
|
<el-button type="primary" @click="add">添加</el-button>
|
|
</div>
|
|
|
|
<el-table
|
|
ref="table"
|
|
v-loading="loading"
|
|
border
|
|
:data="data"
|
|
class="mt_10"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="skuId" label="ID" min-width="180" show-overflow-tooltip />
|
|
<el-table-column label="商品图片" width="90" align="center">
|
|
<template #default="{ row }">
|
|
<img v-if="row?.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品名称" min-width="180" class-name="goods-name-column">
|
|
<template #default="{ row }">
|
|
<span v-if="row" class="goods-name-text">{{ row.goodsName }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="规格" min-width="140" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
{{ row?.specs || "-" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品类型" min-width="110">
|
|
<template #default="{ row }">
|
|
<span v-if="row">{{ goodsTypeText(row.goodsType) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品金额" min-width="110">
|
|
<template #default="{ row }">
|
|
<span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, "￥") }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="佣金金额" min-width="110">
|
|
<template #default="{ row }">
|
|
<span v-if="row" :style="{ color: $mainColor }">
|
|
{{ $filters.unitPrice(row.commission ?? 0, "￥") }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="quantity" label="库存" min-width="80" align="center" />
|
|
<el-table-column label="审核状态" min-width="110" align="center">
|
|
<template #default="{ row }">
|
|
<span v-if="row">{{ authStatusText(row.authStatus) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="添加时间" min-width="160" />
|
|
<el-table-column label="操作" min-width="120" align="center" fixed="right">
|
|
<template #default="{ row }">
|
|
<template v-if="row">
|
|
<a class="link-text" @click="edit(row)">编辑</a>
|
|
<span class="op-split">|</span>
|
|
<a class="link-text" @click="remove(row)">删除</a>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
|
<el-pagination
|
|
v-model:current-page="searchForm.pageNumber"
|
|
v-model:page-size="searchForm.pageSize"
|
|
:page-sizes="[20, 50, 100]"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
size="small"
|
|
@current-change="changePage"
|
|
@size-change="changePageSize"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
|
|
|
|
<el-dialog
|
|
v-model="modalVisible"
|
|
:title="modalTitle"
|
|
width="900px"
|
|
:close-on-click-modal="false"
|
|
append-to-body
|
|
class="add-distribution-goods-dialog"
|
|
>
|
|
<el-table :data="selectedGoodsList" border max-height="420">
|
|
<el-table-column label="商品图片" width="90" align="center">
|
|
<template #default="{ row }">
|
|
<img v-if="row?.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品名称" min-width="160" class-name="goods-name-column">
|
|
<template #default="{ row }">
|
|
<span class="goods-name-text">{{ row.goodsName }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="规格" min-width="120" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
{{ row.specs || "-" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品价格" width="110" align="right">
|
|
<template #default="{ row }">
|
|
<span :style="{ color: $mainColor }">{{ $filters.unitPrice(row.price, "￥") }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="分销佣金" width="160" align="center">
|
|
<template #default="{ row, $index }">
|
|
<el-input
|
|
v-model="row.commission"
|
|
clearable
|
|
placeholder="请输入佣金"
|
|
:class="{ 'commission-input-error': row.commissionError }"
|
|
@blur="validateRowCommission(row, $index)"
|
|
@input="row.commissionError = false"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="80" align="center">
|
|
<template #default="{ $index }">
|
|
<a
|
|
v-if="selectedGoodsList.length > 1"
|
|
class="link-text"
|
|
@click="removeSelectedGoods($index)"
|
|
>移除</a>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<template #footer>
|
|
<el-button @click="modalVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
v-model="editVisible"
|
|
title="编辑分销商品"
|
|
width="480px"
|
|
:close-on-click-modal="false"
|
|
append-to-body
|
|
>
|
|
<el-form ref="editFormRef" :model="editForm" label-width="100px">
|
|
<el-form-item label="商品名称">
|
|
<span>{{ editForm.goodsName }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="分销佣金" prop="commission">
|
|
<el-input
|
|
v-model="editForm.commission"
|
|
clearable
|
|
placeholder="请输入分销佣金"
|
|
:class="{ 'commission-input-error': editForm.commissionError }"
|
|
@input="editForm.commissionError = false"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="editVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="editLoading" @click="handleEditSubmit">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getDistributionGoods,
|
|
distributionGoodsCancel,
|
|
distributionGoodsBatchCheck,
|
|
updateDistributionGoodsCommission,
|
|
} from "@/api/distribution";
|
|
import { getBrandListData, getShopGoodsLabelListSeller } from "@/api/goods";
|
|
import liliDialog from "@/views/lili-dialog";
|
|
|
|
export default {
|
|
name: "distributionGoods",
|
|
components: { liliDialog },
|
|
data() {
|
|
return {
|
|
modalVisible: false,
|
|
modalTitle: "添加分销商品",
|
|
editVisible: false,
|
|
editLoading: false,
|
|
submitLoading: false,
|
|
loading: true,
|
|
currentAuthStatus: "ALL",
|
|
searchForm: {
|
|
pageNumber: 1,
|
|
pageSize: 20,
|
|
sort: "createTime",
|
|
order: "desc",
|
|
goodsName: "",
|
|
brandId: "",
|
|
storeCategoryPath: "",
|
|
goodsType: "",
|
|
authStatus: "",
|
|
},
|
|
brandList: [],
|
|
shopCategoryList: [],
|
|
shopCategoryProps: {
|
|
value: "value",
|
|
label: "label",
|
|
children: "children",
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
},
|
|
selectedGoodsList: [],
|
|
editForm: {
|
|
id: "",
|
|
goodsName: "",
|
|
commission: "",
|
|
commissionError: false,
|
|
},
|
|
commissionPattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
|
data: [],
|
|
total: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.loadFilterOptions();
|
|
this.getDataList();
|
|
},
|
|
loadFilterOptions() {
|
|
getBrandListData().then((res) => {
|
|
this.brandList = Array.isArray(res) ? res : res?.result || [];
|
|
});
|
|
getShopGoodsLabelListSeller().then((res) => {
|
|
if (res?.success) {
|
|
this.shopCategoryList = this.formatShopCategory(res.result || []);
|
|
}
|
|
});
|
|
},
|
|
formatShopCategory(list) {
|
|
return (list || []).map((item) => ({
|
|
value: item.id,
|
|
label: item.labelName,
|
|
children:
|
|
item.children && item.children.length
|
|
? this.formatShopCategory(item.children)
|
|
: undefined,
|
|
}));
|
|
},
|
|
goodsTypeText(value) {
|
|
if (value === "PHYSICAL_GOODS") return "实物商品";
|
|
if (value === "VIRTUAL_GOODS") return "虚拟商品";
|
|
if (value === "E_COUPON") return "电子卡券";
|
|
return "-";
|
|
},
|
|
authStatusText(value) {
|
|
if (value === "TOBEAUDITED") return "待审核";
|
|
if (value === "REFUSE") return "审核未通过";
|
|
return "已审核";
|
|
},
|
|
onAuthStatusChange(name) {
|
|
this.searchForm.authStatus = name === "ALL" ? "" : name;
|
|
this.searchForm.pageNumber = 1;
|
|
this.getDataList();
|
|
},
|
|
add() {
|
|
this.$refs.liliDialog.goodsData = [];
|
|
this.$refs.liliDialog.open("goods");
|
|
},
|
|
selectedGoodsData(selected) {
|
|
if (!selected?.length) return;
|
|
this.selectedGoodsList = selected.map((item) => ({
|
|
skuId: item.id,
|
|
goodsId: item.goodsId,
|
|
thumbnail: item.thumbnail,
|
|
goodsName: item.goodsName,
|
|
specs: item.simpleSpecs || "-",
|
|
price: item.price,
|
|
commission: "1",
|
|
commissionError: false,
|
|
}));
|
|
this.modalVisible = true;
|
|
this.modalTitle = `添加分销商品（已选${this.selectedGoodsList.length}项）`;
|
|
},
|
|
validateRowCommission(row) {
|
|
const valid = this.commissionPattern.test(String(row.commission || "").trim());
|
|
row.commissionError = !valid;
|
|
return valid;
|
|
},
|
|
validateAllCommission() {
|
|
let valid = true;
|
|
this.selectedGoodsList.forEach((row) => {
|
|
if (!this.validateRowCommission(row)) {
|
|
valid = false;
|
|
}
|
|
});
|
|
return valid;
|
|
},
|
|
removeSelectedGoods(index) {
|
|
this.selectedGoodsList.splice(index, 1);
|
|
if (!this.selectedGoodsList.length) {
|
|
this.modalVisible = false;
|
|
return;
|
|
}
|
|
this.modalTitle = `添加分销商品（已选${this.selectedGoodsList.length}项）`;
|
|
},
|
|
handleSubmit() {
|
|
if (!this.selectedGoodsList.length) return;
|
|
if (!this.validateAllCommission()) {
|
|
this.$Message.error("请为所有商品填写大于1且小于9999的合法佣金金额");
|
|
return;
|
|
}
|
|
this.submitLoading = true;
|
|
const items = this.selectedGoodsList.map((item) => ({
|
|
skuId: item.skuId,
|
|
commission: Number(item.commission),
|
|
}));
|
|
distributionGoodsBatchCheck(items)
|
|
.then((res) => {
|
|
if (res?.success || res?.message === "success") {
|
|
const addedCount = Array.isArray(res?.result) ? res.result.length : 0;
|
|
if (addedCount > 0) {
|
|
this.$Message.success(`成功添加${addedCount}个分销商品`);
|
|
} else {
|
|
this.$Message.info("所选商品均已是分销商品，已跳过");
|
|
}
|
|
}
|
|
this.modalVisible = false;
|
|
this.selectedGoodsList = [];
|
|
this.getDataList();
|
|
})
|
|
.finally(() => {
|
|
this.submitLoading = false;
|
|
});
|
|
},
|
|
changePage(v) {
|
|
this.searchForm.pageNumber = v;
|
|
this.getDataList();
|
|
},
|
|
changePageSize(v) {
|
|
this.searchForm.pageSize = v;
|
|
this.searchForm.pageNumber = 1;
|
|
this.getDataList();
|
|
},
|
|
handleSearch() {
|
|
this.searchForm.pageNumber = 1;
|
|
this.getDataList();
|
|
},
|
|
getDataList() {
|
|
this.loading = true;
|
|
getDistributionGoods(this.searchForm)
|
|
.then((res) => {
|
|
if (res?.success) {
|
|
const page = res.result || {};
|
|
this.data = page.records || [];
|
|
this.total = page.total || 0;
|
|
} else {
|
|
this.data = [];
|
|
this.total = 0;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
remove(row) {
|
|
this.$Modal.confirm({
|
|
title: "确认删除",
|
|
content: "您确认要删除此分销商品吗?",
|
|
loading: true,
|
|
onOk: () => {
|
|
distributionGoodsCancel(row.id).then((res) => {
|
|
this.$Modal.remove();
|
|
if (res?.success) {
|
|
this.$Message.success("删除成功");
|
|
this.getDataList();
|
|
}
|
|
});
|
|
},
|
|
});
|
|
},
|
|
edit(row) {
|
|
this.editForm = {
|
|
id: row.id,
|
|
goodsName: row.goodsName,
|
|
commission: row.commission != null ? String(row.commission) : "1",
|
|
commissionError: false,
|
|
};
|
|
this.editVisible = true;
|
|
},
|
|
handleEditSubmit() {
|
|
const valid = this.commissionPattern.test(String(this.editForm.commission || "").trim());
|
|
this.editForm.commissionError = !valid;
|
|
if (!valid) {
|
|
this.$Message.error("请输入大于1且小于9999的合法佣金金额");
|
|
return;
|
|
}
|
|
this.editLoading = true;
|
|
updateDistributionGoodsCommission(this.editForm.id, {
|
|
commission: Number(this.editForm.commission),
|
|
})
|
|
.then((res) => {
|
|
if (res?.success || res?.message === "success") {
|
|
this.$Message.success("修改成功");
|
|
this.editVisible = false;
|
|
this.getDataList();
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.editLoading = false;
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.operation {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.goods-thumb {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.link-text {
|
|
color: #409eff;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.op-split {
|
|
margin: 0 6px;
|
|
color: #dcdfe6;
|
|
}
|
|
|
|
.goods-name-text {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:deep(.goods-name-column .cell) {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.mt_10 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.list-card {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.auth-tabs {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.commission-input-error {
|
|
:deep(.el-input__wrapper) {
|
|
box-shadow: 0 0 0 1px #f56c6c inset;
|
|
}
|
|
}
|
|
|
|
.add-distribution-goods-dialog {
|
|
:deep(.goods-name-column .cell) {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
</style>
|