337 lines
9.4 KiB
Vue
337 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<section class="order_management">
|
|||
|
|
<ai-list isTabs>
|
|||
|
|
<template slot="content">
|
|||
|
|
<ai-search-bar bottomBorder>
|
|||
|
|
<template slot="left">
|
|||
|
|
<el-select
|
|||
|
|
size="small"
|
|||
|
|
v-model="searchObj.shopId"
|
|||
|
|
placeholder="请选择店铺"
|
|||
|
|
clearable
|
|||
|
|
@change="(page.current = 1), getList()">
|
|||
|
|
<el-option
|
|||
|
|
v-for="(item, i) in shopList"
|
|||
|
|
:key="i"
|
|||
|
|
:label="item.shopName"
|
|||
|
|
:value="item.id">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-select
|
|||
|
|
size="small"
|
|||
|
|
v-model="searchObj.merchandiseType"
|
|||
|
|
placeholder="请选择商品类型"
|
|||
|
|
clearable
|
|||
|
|
@change="(page.current = 1), getList()">
|
|||
|
|
<el-option
|
|||
|
|
v-for="(item, i) in dict.getDict('integralMerchandiseType')"
|
|||
|
|
:key="i"
|
|||
|
|
:label="item.dictName"
|
|||
|
|
:value="item.dictValue">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
<el-select
|
|||
|
|
size="small"
|
|||
|
|
v-model="searchObj.status"
|
|||
|
|
placeholder="请选择状态"
|
|||
|
|
clearable
|
|||
|
|
@change="(page.current = 1), getList()">
|
|||
|
|
<el-option
|
|||
|
|
v-for="(item, i) in dict.getDict('integralMerchandiseStatus')"
|
|||
|
|
:key="i"
|
|||
|
|
:label="item.dictName"
|
|||
|
|
:value="item.dictValue">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</template>
|
|||
|
|
<template slot="right">
|
|||
|
|
<el-input
|
|||
|
|
v-model="searchObj.merchandiseName"
|
|||
|
|
size="small"
|
|||
|
|
placeholder="商品名"
|
|||
|
|
@keyup.enter.native="(page.current = 1), getList()"
|
|||
|
|
@clear="(page.current = 1), searchObj.merchandiseName = '', getList()"
|
|||
|
|
clearable
|
|||
|
|
suffix-icon="iconfont iconSearch" />
|
|||
|
|
</template>
|
|||
|
|
</ai-search-bar>
|
|||
|
|
<ai-search-bar class="mt10">
|
|||
|
|
<template slot="left">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
icon="iconfont iconAdd"
|
|||
|
|
@click="add()"
|
|||
|
|
v-if="$permissions('app_appvillagerintegralmerchandise_edit')">
|
|||
|
|
添加
|
|||
|
|
</el-button>
|
|||
|
|
<ai-download
|
|||
|
|
:instance="instance"
|
|||
|
|
:fileName="'商品列表'"
|
|||
|
|
url="/app/appvillagerintegralmerchandise/export"
|
|||
|
|
v-if="$permissions('app_appvillagerintegralmerchandise_export')"
|
|||
|
|
:params="{ ...searchObj, areaId: areaId }">
|
|||
|
|
</ai-download>
|
|||
|
|
</template>
|
|||
|
|
<template slot="right"> </template>
|
|||
|
|
</ai-search-bar>
|
|||
|
|
<ai-table
|
|||
|
|
:tableData="tableData"
|
|||
|
|
:col-configs="colConfigs"
|
|||
|
|
:total="page.total"
|
|||
|
|
:current.sync="page.current"
|
|||
|
|
:size.sync="page.size"
|
|||
|
|
@getList="getList">
|
|||
|
|
<el-table-column
|
|||
|
|
label="商品图"
|
|||
|
|
slot="photo"
|
|||
|
|
align="center"
|
|||
|
|
width="150">
|
|||
|
|
<template v-slot="{ row }">
|
|||
|
|
<ai-uploader
|
|||
|
|
:disabled="true"
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="row.photo"
|
|||
|
|
:limit="9">
|
|||
|
|
</ai-uploader>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" slot="options" align="center" width="200" fixed="right">
|
|||
|
|
<template v-slot="{ row }">
|
|||
|
|
<div class="table-options">
|
|||
|
|
<el-button
|
|||
|
|
type="text"
|
|||
|
|
title="编辑"
|
|||
|
|
:disabled="!$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
|
|||
|
|
@click="edit(row)">
|
|||
|
|
编辑
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="text"
|
|||
|
|
title="详情"
|
|||
|
|
:disabled="!$permissions('app_appvillagerintegralmerchandise_detail') || row.enable != 1"
|
|||
|
|
@click="goDetail(row)">
|
|||
|
|
详情
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="text"
|
|||
|
|
title="上架"
|
|||
|
|
:disabled="row.status != 0 || !$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
|
|||
|
|
@click="changeStatus(row)">
|
|||
|
|
上架
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="text"
|
|||
|
|
title="下架"
|
|||
|
|
:disabled="row.status != 1 || !$permissions('app_appvillagerintegralmerchandise_edit') || row.enable != 1"
|
|||
|
|
@click="changeStatus(row)">
|
|||
|
|
下架
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</ai-table>
|
|||
|
|
</template>
|
|||
|
|
</ai-list>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "goodsManagement",
|
|||
|
|
props: {
|
|||
|
|
instance: Function,
|
|||
|
|
dict: Object,
|
|||
|
|
permissions: Function,
|
|||
|
|
areaId: String,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
searchObj: {
|
|||
|
|
shopId: "",
|
|||
|
|
status: "",
|
|||
|
|
merchandiseName: "",
|
|||
|
|
merchandiseType: "",
|
|||
|
|
},
|
|||
|
|
page: {
|
|||
|
|
size: 10,
|
|||
|
|
current: 1,
|
|||
|
|
total: 0,
|
|||
|
|
},
|
|||
|
|
tableData: [],
|
|||
|
|
shopList: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
colConfigs() {
|
|||
|
|
let _ = this;
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
prop: "shopId",
|
|||
|
|
label: "店铺名称",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
slot: "photo",
|
|||
|
|
prop: "photo",
|
|||
|
|
align: "center",
|
|||
|
|
label: "商品图",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "merchandiseName",
|
|||
|
|
align: "left",
|
|||
|
|
label: "商品名",
|
|||
|
|
width: 180,
|
|||
|
|
"show-overflow-tooltip": false,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "costIntegral",
|
|||
|
|
align: "center",
|
|||
|
|
label: "单价",
|
|||
|
|
width: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "inventoryNumber",
|
|||
|
|
align: "center",
|
|||
|
|
label: "库存",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "saleNumber",
|
|||
|
|
align: "center",
|
|||
|
|
label: "销量",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
prop: "status",
|
|||
|
|
align: "center",
|
|||
|
|
label: "状态",
|
|||
|
|
render(h, { row }) {
|
|||
|
|
return h(
|
|||
|
|
"span",
|
|||
|
|
{
|
|||
|
|
style: {
|
|||
|
|
color: _.$dict.getColor(
|
|||
|
|
"integralMerchandiseStatus",
|
|||
|
|
row.status
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
_.$dict.getLabel("integralMerchandiseStatus", row.status)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.dict.load("integralMerchandiseType", "integralMerchandiseStatus");
|
|||
|
|
this.getShopList().then(() => {
|
|||
|
|
this.getList();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getList() {
|
|||
|
|
this.instance
|
|||
|
|
.post(`/app/appvillagerintegralmerchandise/list`, null, {
|
|||
|
|
params: {
|
|||
|
|
...this.searchObj,
|
|||
|
|
...this.page,
|
|||
|
|
areaId: this.areaId,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.tableData = res.data.records;
|
|||
|
|
this.tableData.map((e, index) => {
|
|||
|
|
let i = this.shopList.findIndex((item) => item.id == e.shopId);
|
|||
|
|
if (i > -1) {
|
|||
|
|
e.shopId = this.shopList[i].shopName;
|
|||
|
|
}
|
|||
|
|
if (e.photo) {
|
|||
|
|
e.allPhoto = [...JSON.parse(e.photo)];
|
|||
|
|
e.photo = [{ ...e.allPhoto[0] }];
|
|||
|
|
} else {
|
|||
|
|
e.photo = [];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.page.total = res.data.total;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateList() {
|
|||
|
|
this.getShopList().then(() => {
|
|||
|
|
this.getList();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
reset() {
|
|||
|
|
Object.keys(this.searchObj).forEach((e) => {
|
|||
|
|
this.searchObj[e] = "";
|
|||
|
|
});
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
add() {
|
|||
|
|
this.$emit("showDetail", { isAdd: true });
|
|||
|
|
},
|
|||
|
|
edit(row) {
|
|||
|
|
this.$emit("showDetail", { isAdd: true, ...row });
|
|||
|
|
},
|
|||
|
|
goDetail(row) {
|
|||
|
|
this.$emit("showDetail", { isAdd: false, ...row });
|
|||
|
|
},
|
|||
|
|
changeStatus(row) {
|
|||
|
|
let status =
|
|||
|
|
row.status == 0
|
|||
|
|
? `上架 ${row.shopId}-${row.merchandiseName}`
|
|||
|
|
: `下架 ${row.shopId}-${row.merchandiseName}`;
|
|||
|
|
this.$confirm(
|
|||
|
|
`<p>是否要<span style='color:#2266FF;'>${status}</span>？</p>`,
|
|||
|
|
{
|
|||
|
|
type: "error",
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
.then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appvillagerintegralmerchandise/enableOrDisable", null, {
|
|||
|
|
params: { id: row.id },
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res?.code == 0) {
|
|||
|
|
this.$message.success("操作成功!");
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(() => {});
|
|||
|
|
},
|
|||
|
|
getShopList() {
|
|||
|
|
return new Promise((reslove) => {
|
|||
|
|
this.instance
|
|||
|
|
.post(`/app/appvillagerintegralshop/list`, null, {
|
|||
|
|
params: {
|
|||
|
|
size: 100000,
|
|||
|
|
areaId: this.areaId,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.shopList = res.data.records;
|
|||
|
|
reslove();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order_management {
|
|||
|
|
background: #f3f6f9;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
.iconShow {
|
|||
|
|
padding: 0 8px;
|
|||
|
|
}
|
|||
|
|
.iconfont {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|