订单
This commit is contained in:
yanran200730
336
project/fengdu/app/AppIntegratingSupermarket/goodsManagement.vue
Normal file
336
project/fengdu/app/AppIntegratingSupermarket/goodsManagement.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user