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>
|