443 lines
18 KiB
Vue
443 lines
18 KiB
Vue
<template>
|
||
<div class="p-2">
|
||
<div v-show="show">
|
||
<el-card shadow="hover" class="mb-[10px]">
|
||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="default" class="ry_form">
|
||
<el-form-item label="上架状态" prop="publishStatus">
|
||
<DictRadio v-model="queryParams.publishStatus" @change="handleQuery" radioData="pms_publish_status" :showAll="'all'" />
|
||
</el-form-item>
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="queryParams.nameLike" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="品牌" prop="brandId">
|
||
<el-select v-model="queryParams.brandId" placeholder="请选择品牌" clearable @change="handleQuery">
|
||
<el-option v-for="item in getbrandList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="分类" prop="categoryId">
|
||
<el-select v-model="queryParams.categoryId" placeholder="请选择分类" clearable @change="handleQuery">
|
||
<el-option v-for="item in getCategoryNameLike" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="编码" prop="outProductId">
|
||
<el-input v-model="queryParams.outProductId" placeholder="请输入商品编码" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item class="flex_one tr">
|
||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card shadow="hover">
|
||
<template #header>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<el-table v-loading="loading" :data="pmsProductList" border>
|
||
<el-table-column label="店铺名称" min-width="120" prop="contactUserName" align="center"> </el-table-column>
|
||
<el-table-column label="店铺手机号" prop="contactPhone" min-width="115" align="center"> </el-table-column>
|
||
<el-table-column label="配送方式" prop="distribution" align="center">
|
||
<template v-slot="scope">{{ scope.row.distribution == 1 ? '到店核销' : scope.row.distribution == 2 ? '自提' : '配送' }} </template>
|
||
</el-table-column>
|
||
<el-table-column label="商品名称" prop="name" align="center"> </el-table-column>
|
||
<el-table-column label="商品类型" prop="type" align="center">
|
||
<template v-slot="scope">{{ scope.row.type == 1 ? '团购' : scope.row.type == 2 ? '拼团' : '秒杀' }} </template>
|
||
</el-table-column>
|
||
<el-table-column label="商品分类" prop="productCategoryName" align="center"> </el-table-column>
|
||
<el-table-column label="商品封面图" prop="pic" width="100" align="center">
|
||
<template v-slot="scope">
|
||
<el-image v-if="scope.row.pic" :src="scope.row.pic" class="small-img" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品轮播图" prop="albumPics" width="100" align="center">
|
||
<template v-slot="scope">
|
||
<el-image
|
||
v-if="scope.row.albumPics"
|
||
:src="scope.row.pic"
|
||
:preview-teleported="true"
|
||
class="small-img"
|
||
:preview-src-list="isimgfun(scope.row.albumPics)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品详情" prop="detailHtml" align="center"> </el-table-column>
|
||
<el-table-column label="原价" prop="price" align="center"> </el-table-column>
|
||
<el-table-column label="优惠金额" prop="discountPrice" align="center"> </el-table-column>
|
||
<el-table-column label="销量" prop="sales" align="center"> </el-table-column>
|
||
<el-table-column label="商品状态" prop="publishStatus" fixed="right" align="center">
|
||
<template v-slot="scope">
|
||
<el-switch
|
||
:model-value="scope.row.publishStatus"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="上架"
|
||
inactive-text="下架"
|
||
inline-prompt
|
||
:before-change="
|
||
() => {
|
||
return handleChangeUserStatus(scope.row);
|
||
}
|
||
"
|
||
>
|
||
</el-switch> </template
|
||
></el-table-column>
|
||
<el-table-column label="审核状态" prop="authFlag" fixed="right" min-width="110" align="center">
|
||
<template v-slot="scope">
|
||
{{ scope.row.authFlag == 1 ? '待审核' : scope.row.authFlag == 2 ? '审核通过' : '审核驳回' }}
|
||
</template></el-table-column
|
||
>
|
||
<el-table-column label="操作" class-name="small-padding fixed-width" width="150" align="center" fixed="right">
|
||
<template v-slot="scope">
|
||
<el-button text type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改 </el-button>
|
||
<br />
|
||
<el-button text type="primary" icon="Edit" @click="handleAuth(scope.row)">审核</el-button>
|
||
<br />
|
||
<el-button text type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
</el-card>
|
||
<el-dialog title="商品审核" v-model="isAuthModalOpen" width="600px">
|
||
<el-form label-width="auto" ref="authForm" size="default">
|
||
<el-form-item label="审核状态" prop="authFlag">
|
||
<el-radio-group v-model="authInfo.authFlag">
|
||
<el-radio label="2">通过</el-radio>
|
||
<el-radio label="3">驳回</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="反驳理由" prop="authRemark" v-if="authInfo.authFlag === '3'">
|
||
<el-input v-model.trim="authInfo.reasons" placeholder="请输入反驳理由" />
|
||
</el-form-item>
|
||
<el-form-item prop="authRemark">
|
||
<el-button type="primary" @click="authInfoProduct">确认</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<!--编辑会员基础信息-->
|
||
<el-dialog title="编辑商品详情" v-model="productModalInfo.open" width="600px" append-to-body>
|
||
<el-form label-width="auto" :rules="productEditRules" :model="productModalInfo.data" ref="editForm" size="default">
|
||
<el-form-item label="昵称" prop="nickname">
|
||
<el-input v-model.trim="productModalInfo.data.nickname" placeholder="请输入会员昵称" />
|
||
</el-form-item>
|
||
<el-form-item label="密码" prop="password">
|
||
<el-input v-model.trim="productModalInfo.data.password" placeholder="请输入会员密码" />
|
||
</el-form-item>
|
||
<el-form-item label="手机号" prop="phone">
|
||
<el-input v-model.trim="productModalInfo.data.phone" placeholder="请输入会员手机号" />
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="mark">
|
||
<el-input v-model.trim="productModalInfo.data.mark" placeholder="请输入备注" />
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-switch
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="启用"
|
||
inactive-text="禁用"
|
||
inline-prompt
|
||
v-model="productModalInfo.data.status"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="头像" prop="avatar">
|
||
<!-- 暂时先用输入框组件，后续OSS上传功能好了迁移到上传upload组件-->
|
||
<el-input v-model.trim="productModalInfo.data.avatar" placeholder="请输入头像" />
|
||
</el-form-item>
|
||
<el-form-item label="性别" prop="gender">
|
||
<DictRadio v-model="productModalInfo.data.gender" radioData="sys_user_sex" :show-all="'all'" />
|
||
</el-form-item>
|
||
<el-form-item label="地址" prop="address">
|
||
<AddressSelector v-model="productModalInfo.data.fullArea" style="width: 100%" />
|
||
</el-form-item>
|
||
<el-form-item label="生日" prop="birthday">
|
||
<el-input v-model.trim="productModalInfo.data.birthday" placeholder="请选择生日" />
|
||
</el-form-item>
|
||
<el-form-item label="用户等级" prop="level">
|
||
<el-input v-model.trim="productModalInfo.data.level" placeholder="请输入用户等级" />
|
||
</el-form-item>
|
||
<el-form-item label="剩余积分" prop="integral">
|
||
<el-input v-model.trim="productModalInfo.data.integral" placeholder="请输入剩余积分" />
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12"> </el-col>
|
||
<el-col :span="12">
|
||
<el-button type="danger" @click="closeEditProduct">关闭</el-button>
|
||
<el-button type="primary" @click="submitEditProduct">保存</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
<!-- <SeeAdsComponent ref="seeAdsComponentRef" v-if="!show" @confirmOk="confirmOk"/>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { delPmsProduct, listPmsProduct, productpublish, productaudit, getproductCategoryNameLike, getbrand } from '@/api/pms/product';
|
||
import { isStarRepo } from '@/utils/is-star-plugin';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import AddressSelector from '@/views/components/AddressSelector/index.vue';
|
||
import { editUserData } from '@/api/ums/member.js';
|
||
export default {
|
||
name: 'PmsProduct',
|
||
components: { AddressSelector },
|
||
dicts: ['pms_publish_status'],
|
||
data() {
|
||
return {
|
||
authInfo: {
|
||
id: '',
|
||
authFlag: 1,
|
||
reasons: ''
|
||
},
|
||
//审核弹出
|
||
isAuthModalOpen: false,
|
||
show: true,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 导出遮罩层
|
||
exportLoading: false,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 商品信息表格数据
|
||
pmsProductList: [],
|
||
productModalInfo: {
|
||
open: false,
|
||
data: {}
|
||
},
|
||
productEditRules: {
|
||
nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
|
||
/*password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],*/
|
||
/* address: [{ required: true, message: '地址不能为空', trigger: 'change' }],*/
|
||
/* avatar: [{ required: true, message: '头像不能为空', trigger: 'change' }],*/
|
||
/* gendor: [{ required: true, message: '性别不能为空', trigger: 'change' }],*/
|
||
birthday: [{ required: true, message: '生日不能为空', trigger: 'change' }],
|
||
level: [{ required: true, message: '用户等级不能为空', trigger: 'blur' }],
|
||
integral: [{ required: true, message: '积分不能为空', trigger: 'blur' }],
|
||
/* email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],*/
|
||
phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
|
||
},
|
||
getCategoryNameLike: [],
|
||
getbrandList: [],
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
brandId: null,
|
||
categoryId: null,
|
||
outProductId: null,
|
||
name: null,
|
||
pic: null,
|
||
albumPics: null,
|
||
publishStatus: null,
|
||
sort: null,
|
||
price: null,
|
||
unit: null,
|
||
weight: null,
|
||
detailHtml: null,
|
||
detailMobileHtml: null,
|
||
brandName: null,
|
||
productCategoryName: null,
|
||
brandId: null
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getgetproductCategoryNameLike();
|
||
this.getbrand();
|
||
},
|
||
computed: {
|
||
userId: {
|
||
get() {
|
||
return useUserStore().userId;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 查询商品分类列表
|
||
async getgetproductCategoryNameLike() {
|
||
const res = await getproductCategoryNameLike();
|
||
this.getCategoryNameLike = res.data;
|
||
},
|
||
// 查询商品分类列表
|
||
async getbrand() {
|
||
const res = await getbrand();
|
||
this.getbrandList = res.data;
|
||
},
|
||
//审核
|
||
async authInfoProduct() {
|
||
const res = await productaudit(this.authInfo, this.authInfo);
|
||
if (res.code == 200) {
|
||
this.getList();
|
||
this.$modal.msgSuccess('审核成功');
|
||
this.isAuthModalOpen = false;
|
||
this.authInfo = {
|
||
id: '',
|
||
authFlag: 1,
|
||
reasons: ''
|
||
};
|
||
}
|
||
},
|
||
handleAuth(row) {
|
||
this.authInfo.id = row.id;
|
||
this.isAuthModalOpen = true;
|
||
},
|
||
//上下架
|
||
async handleChangeUserStatus(row) {
|
||
await ElMessageBox.confirm(row.publishStatus == 0 ? '确定要上架该商品吗？' : '确定要下架该商品吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
if (row.publishStatus == 0) {
|
||
const res = await productpublish({ id: row.id, publishStatus: 1 }, { id: row.id, publishStatus: 1 });
|
||
console.log(res.code);
|
||
if (res.code == 200) {
|
||
this.getList();
|
||
this.$modal.msgSuccess('上架成功');
|
||
}
|
||
} else {
|
||
const res = await productpublish({ id: row.id, publishStatus: 0 }, { id: row.id, publishStatus: 0 });
|
||
if (res.code == 200) {
|
||
this.getList();
|
||
this.$modal.msgSuccess('下架成功');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
isimgfun(url) {
|
||
if (!url || typeof url !== 'string') {
|
||
console.log('无效的 URL 输入');
|
||
return [];
|
||
}
|
||
const urls = url.split(',');
|
||
// 过滤掉空的 URL
|
||
const validUrls = urls.filter((item) => item.trim() !== '');
|
||
return validUrls;
|
||
},
|
||
submitEditProduct() {
|
||
this.$refs['editForm'].validate((valid) => {
|
||
if (valid) {
|
||
const { fullArea } = this.userAccountEditModal.data || {};
|
||
const params = {
|
||
...this.userAccountEditModal.data
|
||
};
|
||
if (fullArea && fullArea.length) {
|
||
const [province = '', city = '', district = ''] = fullArea;
|
||
params.province = province;
|
||
params.city = city;
|
||
params.district = district;
|
||
}
|
||
editUserData(params).then((response) => {
|
||
this.$modal.msgSuccess('修改成功');
|
||
this.closeEditUser();
|
||
this.getList();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
closeEditProduct() {
|
||
this.productModalInfo = {
|
||
open: false,
|
||
data: {}
|
||
};
|
||
},
|
||
// 编辑商品详情弹框
|
||
showProductEditModal(record) {
|
||
this.productModalInfo = {
|
||
data: { ...record, gender: String(record.gender) } || {},
|
||
open: true
|
||
};
|
||
},
|
||
async confirmOk(success) {
|
||
if (success) {
|
||
const res = await isStarRepo(
|
||
'zccbbg',
|
||
'RuoYi-Mall',
|
||
this.userId,
|
||
'https://mall.ichengle.top/pms/product',
|
||
'ruoyi-mall-商城',
|
||
'https://gitee.com/zccbbg/RuoYi-Mall'
|
||
);
|
||
this.show = res;
|
||
if (res) {
|
||
this.getList();
|
||
}
|
||
}
|
||
},
|
||
/** 查询商品信息列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
const { pageNum, pageSize } = this.queryParams;
|
||
const query = { ...this.queryParams, pageNum: undefined, pageSize: undefined };
|
||
const pageReq = { current: pageNum - 1, size: pageSize };
|
||
listPmsProduct(query, pageReq).then((response) => {
|
||
const { records, total } = response.data || {};
|
||
this.pmsProductList = records;
|
||
this.total = total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm('queryForm');
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map((item) => item.id);
|
||
this.single = selection.length !== 1;
|
||
this.multiple = !selection.length;
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.$router.push({ path: '/product/edit' });
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.$router.push({ path: '/product/edit', query: { id: row.id } });
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const ids = row.id || this.ids;
|
||
this.$modal
|
||
.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？')
|
||
.then(function () {
|
||
return delPmsProduct(ids);
|
||
})
|
||
.then(() => {
|
||
this.$modal.msgSuccess('删除成功');
|
||
this.getList();
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep {
|
||
.el-image-viewer__canvas {
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
</style>
|