2025008071805
This commit is contained in:
parent
2892ce9efc
commit
f1e33acac9
|
|
@ -1,475 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
const newRow = { ...this.editRow, [this.editField]: this.editFieldValue };
|
||||
try {
|
||||
await this.$API.updateIntegralProduct(newRow); // 你可能需要将 updateIntegralProduct 改为实际的API调用
|
||||
this.editRow[this.editField] = this.editFieldValue;
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,549 +0,0 @@
|
|||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,512 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input
|
||||
v-model="queryParams.price"
|
||||
placeholder="请输入市场价"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input
|
||||
v-model="queryParams.tags"
|
||||
placeholder="请输入标签"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,516 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="市场价" align="center" width="75" prop="price">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'price', '市场价')">{{ scope.row.price }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'price', '市场价')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="积分" align="center" width="75" prop="num">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'num', '积分')">{{ scope.row.num }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'num', '积分')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,522 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style >
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style >
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input input[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input input[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input input[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,532 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input input[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,532 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input .el-input__inner[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,532 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-inner-spin-button),
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,535 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner) {
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-inner-spin-button),
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,535 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input .el-input__inner {
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-inner-spin-button),
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,535 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input ::v-deep .el-input__inner {
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-inner-spin-button),
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,535 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.number-input{
|
||||
color: #000;
|
||||
}
|
||||
.number-input ::v-deep .el-input__inner {
|
||||
color: #000;
|
||||
}
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-inner-spin-button),
|
||||
.number-input :deep(.el-input__inner[type="number"]::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,530 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,530 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" class="number-input" type="number" placeholder="最小值" clearable style="width: 80px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" class="number-input" type="number" placeholder="最大值" clearable style="width: 80px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,530 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,531 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" class="number-input" type="number" placeholder="最小值" clearable style="width: 120px;" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" class="number-input" type="number" placeholder="最大值" clearable style="width: 120px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input
|
||||
v-model="queryParams.cateId"
|
||||
placeholder="请输入分类"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：状态 -->
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：创建时间范围 -->
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.beginTime"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="queryParams.endTime"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:IntegralProduct:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:IntegralProduct:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralProductList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="55" prop="id" />
|
||||
<el-table-column label="分类" align="center" prop="cateName" />
|
||||
<el-table-column label="名称" align="center" prop="title" />
|
||||
<el-table-column label="主图" align="center" prop="image" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.image" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 市场价范围 -->
|
||||
<el-form-item label="市场价">
|
||||
<el-input v-model="queryParams.minPrice" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxPrice" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d\\.]/g,'')" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 积分范围 -->
|
||||
<el-form-item label="积分">
|
||||
<el-input v-model="queryParams.minNum" placeholder="最小值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
-
|
||||
<el-input v-model="queryParams.maxNum" placeholder="最大值" style="width: 80px;" oninput="value=value.replace(/[^\\d]/g,'')" />
|
||||
</el-form-item>
|
||||
<el-table-column label="排序" align="center" width="75" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sort', '排序')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="销量" align="center" width="75" prop="sales">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'sales', '销量')">{{ scope.row.sales }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'sales', '销量')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" align="center" width="75" prop="stock">
|
||||
<template slot-scope="scope">
|
||||
<div style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'stock', '库存')">{{ scope.row.stock }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'stock', '库存')" width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;vertical-align:middle;cursor:pointer;"><path d="M880.64 227.84l-84.48-84.48c-25.6-25.6-67.2-25.6-92.8 0l-59.52 59.52 177.28 177.28 59.52-59.52c25.6-25.6 25.6-67.2 0-92.8zM160 736v128h128l376.32-376.32-128-128L160 736z"/></svg>
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updatedAt" width="150">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralProduct:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改积分商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="65%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="市场价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入市场价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存" prop="stock">
|
||||
<el-input v-model="form.stock" placeholder="请输入库存" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-input v-model="form.cateId" placeholder="请输入分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="sku">
|
||||
<el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详情">
|
||||
<editor v-model="form.contetnt" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" title="编辑" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-input v-model="editFieldValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEditField">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralProduct, getIntegralProduct, delIntegralProduct, addIntegralProduct, updateIntegralProduct,changetypeStatus } from "@/api/system/IntegralProduct"
|
||||
|
||||
export default {
|
||||
name: "IntegralProduct",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分商品表格数据
|
||||
IntegralProductList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
price: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
// 市场价范围
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
beginTime: null,
|
||||
endTime: null,
|
||||
// 积分范围
|
||||
minNum: null,
|
||||
maxNum: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "市场价不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "积分不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
sales: [
|
||||
{ required: true, message: "销量不能为空", trigger: "blur" }
|
||||
],
|
||||
stock: [
|
||||
{ required: true, message: "库存不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "blur" }
|
||||
],
|
||||
cateId: [
|
||||
{ required: true, message: "分类不能为空", trigger: "blur" }
|
||||
],
|
||||
skuType: [
|
||||
{ required: true, message: "1：单规格 2：多规格不能为空", trigger: "change" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分商品列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralProduct(this.queryParams).then(response => {
|
||||
this.IntegralProductList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
image: null,
|
||||
images: null,
|
||||
price: null,
|
||||
num: null,
|
||||
sort: null,
|
||||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
cateId: null,
|
||||
skuType: null,
|
||||
sku: null,
|
||||
contetnt: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
// 校验最小最大值逻辑（可选）
|
||||
if (this.queryParams.minPrice !== null && this.queryParams.maxPrice !== null && this.queryParams.minPrice > this.queryParams.maxPrice) {
|
||||
this.$message.warning("市场价范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.queryParams.minNum !== null && this.queryParams.maxNum !== null && this.queryParams.minNum > this.queryParams.maxNum) {
|
||||
this.$message.warning("积分范围不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
},
|
||||
// 任务状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changetypeStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分商品"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralProduct(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改积分商品"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralProduct(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除积分商品编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delIntegralProduct(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralProduct/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralProduct_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
openEditDialog(row, field, label) {
|
||||
this.editRow = row;
|
||||
this.editField = field;
|
||||
this.editFieldLabel = label;
|
||||
this.editFieldValue = row[field];
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
async saveEditField() {
|
||||
if (!this.editRow) return;
|
||||
// 需要转为数字的字段
|
||||
const numberFields = ['price', 'num', 'sort', 'sales', 'stock'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateIntegralProduct(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
|
||||
.number-input ::v-deep .el-input__inner[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,8 @@ package com.ruoyi.system.controller;
|
|||
import java.util.List;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.ruoyi.system.ControllerUtil.AppletControllerUtil;
|
||||
import com.ruoyi.system.domain.IntegralCate;
|
||||
import com.ruoyi.system.service.IIntegralCateService;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
|
|
@ -48,6 +50,7 @@ public class IntegralProductController extends BaseController
|
|||
startPage();
|
||||
List<IntegralProduct> list = integralProductService.selectIntegralProductList(integralProduct);
|
||||
for(IntegralProduct data:list){
|
||||
data.setImage(AppletControllerUtil.buildImageUrl(data.getImage()));
|
||||
IntegralCate integralCate=integralCateService.selectIntegralCateById(data.getCateId());
|
||||
if(integralCate!=null){
|
||||
data.setCateName(integralCate.getTitle());
|
||||
|
|
@ -80,7 +83,24 @@ public class IntegralProductController extends BaseController
|
|||
@GetMapping(value = "/{id}")
|
||||
public AjaxResult getInfo(@PathVariable("id") Long id)
|
||||
{
|
||||
return success(integralProductService.selectIntegralProductById(id));
|
||||
IntegralProduct serviceGoods = integralProductService.selectIntegralProductById(id);
|
||||
serviceGoods.setImage(AppletControllerUtil.buildImageUrl(serviceGoods.getImage()));
|
||||
if (serviceGoods.getSkuType()==null){
|
||||
serviceGoods.setSkuType(1L);
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
serviceGoods.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(serviceGoods);
|
||||
}
|
||||
if (serviceGoods.getSku()!=null){
|
||||
if (serviceGoods.getSku().equals("{}")){
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
serviceGoods.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(serviceGoods);
|
||||
}
|
||||
}
|
||||
return success(serviceGoods);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -102,6 +122,21 @@ public class IntegralProductController extends BaseController
|
|||
@PostMapping
|
||||
public AjaxResult add(@RequestBody IntegralProduct integralProduct)
|
||||
{
|
||||
if (integralProduct.getSkuType()==null){
|
||||
integralProduct.setSkuType(1L);
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
integralProduct.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(integralProduct);
|
||||
}
|
||||
if (integralProduct.getSku()!=null){
|
||||
if (integralProduct.getSku().equals("{}")){
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
integralProduct.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(integralProduct);
|
||||
}
|
||||
}
|
||||
return toAjax(integralProductService.insertIntegralProduct(integralProduct));
|
||||
}
|
||||
|
||||
|
|
@ -113,6 +148,22 @@ public class IntegralProductController extends BaseController
|
|||
@PutMapping
|
||||
public AjaxResult edit(@RequestBody IntegralProduct integralProduct)
|
||||
{
|
||||
|
||||
if (integralProduct.getSkuType()==null){
|
||||
integralProduct.setSkuType(1L);
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
integralProduct.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(integralProduct);
|
||||
}
|
||||
if (integralProduct.getSku()!=null){
|
||||
if (integralProduct.getSku().equals("{}")){
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
integralProduct.setSku(jsonObject.toJSONString());
|
||||
integralProductService.updateIntegralProduct(integralProduct);
|
||||
}
|
||||
}
|
||||
return toAjax(integralProductService.updateIntegralProduct(integralProduct));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
package com.ruoyi.system.controller;
|
||||
|
||||
import java.math.BigDecimal;
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.*;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
|
@ -667,14 +668,25 @@ public class OrderController extends BaseController {
|
|||
return error("订单不存在");
|
||||
}
|
||||
|
||||
// 验证订单状态
|
||||
if (order.getStatus() != 1) {
|
||||
return error("只有待接单状态的订单才能派单");
|
||||
}
|
||||
// // 验证订单状态
|
||||
// if (order.getStatus() != 1) {
|
||||
// return error("只有待接单状态的订单才能派单");
|
||||
// }
|
||||
|
||||
if (order.getWorkerId()!=null){
|
||||
//给师傅派单的时候的推送
|
||||
ServiceGoods serviceGoods = serviceGoodsService.selectServiceGoodsById(order.getProductId());
|
||||
WXsendMsgUtil.sendMsgForWorkerInfo(users.getOpenid(), order, serviceGoods);
|
||||
DispatchUtil.creatWorkerForOrder(order,users);
|
||||
}else{
|
||||
|
||||
changeWorkerOrder(order.getId(), workerId);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
// // 更新订单的派单类型
|
||||
// order.setReceiveType(receiveType.longValue());
|
||||
|
|
@ -694,6 +706,109 @@ public class OrderController extends BaseController {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
public AjaxResult changeWorkerOrder(Long orderId,Long newWorkerId) {
|
||||
try {
|
||||
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
// 1. 查询订单
|
||||
Order order = orderService.selectOrderById(orderId);
|
||||
if (order == null) {
|
||||
return AjaxResult.error("订单不存在");
|
||||
}
|
||||
// 2. 查询新师傅信息
|
||||
Users newWorker = usersService.selectUsersById(newWorkerId);
|
||||
if (newWorker == null) {
|
||||
return AjaxResult.error("新师傅不存在");
|
||||
}
|
||||
// 3. 查询原师傅信息
|
||||
Users oldWorker = null;
|
||||
if (order.getWorkerId() != null) {
|
||||
oldWorker = usersService.selectUsersById(order.getWorkerId());
|
||||
}
|
||||
// 4. 修改订单的师傅id
|
||||
order.setWorkerId(newWorkerId);
|
||||
order.setStatus(1L);
|
||||
order.setIsAccept(0);
|
||||
int updateOrder = orderService.updateOrder(order);
|
||||
if (updateOrder <= 0) {
|
||||
return AjaxResult.error("订单更新失败");
|
||||
}
|
||||
//查询最新的订单日志
|
||||
OrderLog log = orderLogService.selectDataTheFirstNew(order.getId());
|
||||
OrderLog log1 = new OrderLog();
|
||||
log1.setOid(order.getId());
|
||||
//原订单日志下所有师傅id需更换为新的师傅id
|
||||
List<OrderLog> logList = orderLogService.selectOrderLogList(log1);
|
||||
if (!logList.isEmpty()) {
|
||||
for (OrderLog l : logList) {
|
||||
if (l.getWorkerId() != null) {
|
||||
l.setWorkerId(newWorkerId);
|
||||
orderLogService.updateOrderLog(l);
|
||||
}
|
||||
}
|
||||
}
|
||||
//如果订单状态为6就继续做
|
||||
if (log.getType().compareTo(new BigDecimal("6.0")) == 0) {
|
||||
// 2. 组装日志内容为数组格式
|
||||
Map<String, Object> logItem = new LinkedHashMap<>();
|
||||
JSONArray jsonArray = JSONArray.parseArray(log.getContent());
|
||||
logItem.put("name", "师傅" + newWorker.getName() + "将继续为您服务 不需要预约时间");
|
||||
logItem.put("name", "暂停服务");
|
||||
logItem.put("image", "");
|
||||
logItem.put("reson", "由于订单师傅更换，自动暂停服务");
|
||||
logItem.put("next_time", "");
|
||||
logItem.put("type", 2);
|
||||
logItem.put("date", sdf.format(new Date()));
|
||||
jsonArray.add(logItem);
|
||||
if (log != null) {
|
||||
log.setIsPause(2);
|
||||
log.setContent(jsonArray.toJSONString());
|
||||
orderLogService.updateOrderLog(log);
|
||||
order.setIsPause(2);
|
||||
order.setWorkerId(newWorkerId);
|
||||
orderService.updateOrder(order);
|
||||
}
|
||||
} else {
|
||||
// 5. 插入转单日志
|
||||
OrderLog newlog = new OrderLog();
|
||||
if (log.getType().compareTo(new BigDecimal("5.0")) == 0) {
|
||||
newlog.setType(new BigDecimal(6.0));
|
||||
} else {
|
||||
newlog.setType(new BigDecimal(1.1));
|
||||
}
|
||||
com.alibaba.fastjson2.JSONObject jsonObjectnew = new com.alibaba.fastjson2.JSONObject();
|
||||
jsonObjectnew.put("name", "师傅" + newWorker.getName() + "将继续为您服务 不需要预约时间");
|
||||
jsonObjectnew.put("convert", oldWorker.getName() + "将订单转给" + newWorker.getName());
|
||||
newlog.setContent(jsonObjectnew.toJSONString());
|
||||
newlog.setOid(order.getId());
|
||||
newlog.setOrderId(order.getOrderId());
|
||||
newlog.setWorkerId(newWorkerId);
|
||||
newlog.setWorkerLogId(newWorkerId);
|
||||
newlog.setTitle("转单");
|
||||
newlog.setIsPause(2);
|
||||
orderLogService.insertOrderLog(newlog);
|
||||
//需要解绑原订单上原师傅和客户的虚拟号
|
||||
VoiceResponseResult resultObj = YunXinPhoneUtilAPI.httpsPrivacyUnbind(order.getWorkerPhone(), order.getUserPhone(), order.getMiddlePhone(), order.getId());
|
||||
if (resultObj.getResult().equals("000000")) {
|
||||
orderService.updateOrderPhone(order.getId());
|
||||
// orderService.updateOrder(order);
|
||||
}
|
||||
//绑定新师傅的虚拟号
|
||||
//给新师傅进行电话通知
|
||||
YunXinPhoneUtilAPI.httpsAxbTransfer(newWorker.getPhone(), order.getId());
|
||||
}
|
||||
return AjaxResult.success("转单成功");
|
||||
} catch (Exception e) {
|
||||
return AjaxResult.error("转单失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取可派单工人列表
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import java.math.BigDecimal;
|
|||
import java.util.List;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import com.ruoyi.system.ControllerUtil.AppletControllerUtil;
|
||||
import com.ruoyi.system.domain.ServiceCate;
|
||||
import com.ruoyi.system.service.IServiceCateService;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
|
|
@ -311,7 +314,35 @@ public class ServiceGoodsController extends BaseController {
|
|||
@PreAuthorize("@ss.hasPermi('system:ServiceGoods:query')")
|
||||
@GetMapping(value = "/{id}")
|
||||
public AjaxResult getInfo(@PathVariable("id") Long id) {
|
||||
return success(serviceGoodsService.selectServiceGoodsById(id));
|
||||
|
||||
ServiceGoods serviceGoods = serviceGoodsService.selectServiceGoodsById(id);
|
||||
|
||||
serviceGoods.setIcon(AppletControllerUtil.buildImageUrl(serviceGoods.getIcon()));
|
||||
if (serviceGoods != null){
|
||||
if (serviceGoods.getSkuType()==null){
|
||||
serviceGoods.setSkuType(1);
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
serviceGoods.setSku(jsonObject.toJSONString());
|
||||
serviceGoodsService.updateServiceGoods(serviceGoods);
|
||||
}
|
||||
if (serviceGoods.getSku()!=null){
|
||||
if (serviceGoods.getSku().equals("{}")){
|
||||
JSONObject jsonObject =new JSONObject();
|
||||
jsonObject.put("type","single");
|
||||
serviceGoods.setSku(jsonObject.toJSONString());
|
||||
serviceGoodsService.updateServiceGoods(serviceGoods);
|
||||
}
|
||||
}
|
||||
if(StringUtils.isNotBlank(serviceGoods.getSkillIds())){
|
||||
serviceGoods.setSkillIds(AppletControllerUtil.convertToJSONArray(serviceGoods.getSkillIds()).toJSONString());
|
||||
}
|
||||
|
||||
if(StringUtils.isNotBlank(serviceGoods.getImgs())){
|
||||
serviceGoods.setImgs(AppletControllerUtil.convertToJSONArray(serviceGoods.getImgs()).toJSONString());
|
||||
}
|
||||
}
|
||||
return success(serviceGoods);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -330,7 +361,13 @@ public class ServiceGoodsController extends BaseController {
|
|||
if (serviceGoods.getPostage()==null){
|
||||
serviceGoods.setPostage(BigDecimal.ZERO);
|
||||
}
|
||||
if(StringUtils.isNotBlank(serviceGoods.getSkillIds())){
|
||||
serviceGoods.setSkillIds(AppletControllerUtil.convertToJSONArray(serviceGoods.getSkillIds()).toJSONString());
|
||||
}
|
||||
|
||||
if(StringUtils.isNotBlank(serviceGoods.getImgs())){
|
||||
serviceGoods.setImgs(AppletControllerUtil.convertToJSONArray(serviceGoods.getImgs()).toJSONString());
|
||||
}
|
||||
return toAjax(serviceGoodsService.insertServiceGoods(serviceGoods));
|
||||
}
|
||||
|
||||
|
|
@ -343,7 +380,13 @@ public class ServiceGoodsController extends BaseController {
|
|||
public AjaxResult edit(@RequestBody ServiceGoods serviceGoods) {
|
||||
// 验证和处理基检现象数据格式
|
||||
validateAndProcessBasicField(serviceGoods);
|
||||
if(StringUtils.isNotBlank(serviceGoods.getSkillIds())){
|
||||
serviceGoods.setSkillIds(AppletControllerUtil.convertToJSONArray(serviceGoods.getSkillIds()).toJSONString());
|
||||
}
|
||||
|
||||
if(StringUtils.isNotBlank(serviceGoods.getImgs())){
|
||||
serviceGoods.setImgs(AppletControllerUtil.convertToJSONArray(serviceGoods.getImgs()).toJSONString());
|
||||
}
|
||||
// 处理一级和二级分类ID
|
||||
processCategoryIds(serviceGoods);
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
</resultMap>
|
||||
|
||||
<sql id="selectServiceGoodsVo">
|
||||
select id, title, icon, imgs,isforservice,forserviceid, sub_title, info, price,questions, price_zn, sales,servicetype, stock, status, description, sku_type,groupnum,sku, latitude, longitude, type, cate_id, first_cate_id, second_cate_id, project, sort, material, postage, basic, margin, skill_ids, created_at, updated_at, deleted_at, isgroup, groupprice, isonce, onceprice, commissiontype, commission, dispatchtype, workerids, isfixed, fixedprice from service_goods
|
||||
select id, title, icon, imgs,isforservice,city,forserviceid, sub_title, info, price,questions, price_zn, sales,servicetype, stock, status, description, sku_type,groupnum,sku, latitude, longitude, type, cate_id, first_cate_id, second_cate_id, project, sort, material, postage, basic, margin, skill_ids, created_at, updated_at, deleted_at, isgroup, groupprice, isonce, onceprice, commissiontype, commission, dispatchtype, workerids, isfixed, fixedprice from service_goods
|
||||
</sql>
|
||||
|
||||
<select id="selectServiceGoodsList" parameterType="ServiceGoods" resultMap="ServiceGoodsResult">
|
||||
|
|
|
|||
|
|
@ -104,9 +104,10 @@
|
|||
</select>
|
||||
|
||||
<update id="updateWorkerMoneyLogStatusIfEndlookAfterNow">
|
||||
UPDATE worker_money_log
|
||||
SET status = 2
|
||||
WHERE endlook > NOW() AND status = 1
|
||||
|
||||
UPDATE worker_money_log SET status = 2 WHERE endlook < NOW() AND status = 1
|
||||
|
||||
|
||||
</update>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
multiple
|
||||
:multiple="!single"
|
||||
:disabled="disabled"
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:data="data"
|
||||
:limit="limit"
|
||||
:limit="single ? 1 : limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
:headers="headers"
|
||||
:file-list="fileList"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:class="{hide: this.fileList.length >= this.limit}"
|
||||
:class="{hide: this.fileList.length >= (single ? 1 : limit)}"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
|
@ -90,6 +90,11 @@ export default {
|
|||
drag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否为单图片模式
|
||||
single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -115,8 +120,15 @@ export default {
|
|||
onEnd: (evt) => {
|
||||
const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
|
||||
this.fileList.splice(evt.newIndex, 0, movedItem)
|
||||
|
||||
// 如果是单图片模式，只发送第一个图片的URL
|
||||
if (this.single) {
|
||||
const firstImage = this.fileList[0];
|
||||
this.$emit("input", firstImage ? this.getPureUrl(firstImage.url) : "");
|
||||
} else {
|
||||
this.$emit("input", this.fileList.map(f => this.getPureUrl(f.url)))
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -126,26 +138,29 @@ export default {
|
|||
handler(val) {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : this.value.split(',')
|
||||
const list = Array.isArray(val) ? val : (typeof val === 'string' && val.includes(',') ? val.split(',') : [val])
|
||||
// 然后将数组转为对象数组
|
||||
this.fileList = list.map(item => {
|
||||
this.fileList = list.filter(item => item && item.trim()).map(item => {
|
||||
if (typeof item === "string") {
|
||||
let cleanItem = item.trim()
|
||||
// 清理URL中的多余前缀和字符
|
||||
cleanItem = this.cleanImageUrl(cleanItem)
|
||||
|
||||
// 如果是完整URL（七牛云或外部链接），直接使用
|
||||
if (isExternal(item) || item.startsWith('http://') || item.startsWith('https://')) {
|
||||
item = { name: item, url: item }
|
||||
} else if (item.indexOf(this.baseUrl) === -1) {
|
||||
if (isExternal(cleanItem) || cleanItem.startsWith('http://') || cleanItem.startsWith('https://')) {
|
||||
return { name: cleanItem, url: cleanItem }
|
||||
} else if (cleanItem && cleanItem.indexOf(this.baseUrl) === -1) {
|
||||
// 本地相对路径，需要拼接baseUrl
|
||||
item = { name: this.baseUrl + item, url: this.baseUrl + item }
|
||||
return { name: this.baseUrl + cleanItem, url: this.baseUrl + cleanItem }
|
||||
} else {
|
||||
// 已经是完整路径
|
||||
item = { name: item, url: item }
|
||||
return { name: cleanItem, url: cleanItem }
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
this.fileList = []
|
||||
return []
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
|
|
@ -205,6 +220,14 @@ export default {
|
|||
let fileUrl = res.url || res.fileName;
|
||||
let fileName = res.fileName;
|
||||
|
||||
// 清理URL中的多余字符
|
||||
if (fileUrl) {
|
||||
fileUrl = this.cleanImageUrl(fileUrl);
|
||||
}
|
||||
if (fileName) {
|
||||
fileName = this.cleanImageUrl(fileName);
|
||||
}
|
||||
|
||||
// 如果是七牛云完整URL，直接使用
|
||||
if (fileUrl && (fileUrl.startsWith('http://') || fileUrl.startsWith('https://'))) {
|
||||
this.uploadList.push({ name: fileUrl, url: fileUrl })
|
||||
|
|
@ -240,7 +263,15 @@ export default {
|
|||
this.fileList = this.fileList.concat(this.uploadList)
|
||||
this.uploadList = []
|
||||
this.number = 0
|
||||
|
||||
// 如果是单图片模式，只发送第一个图片的URL
|
||||
if (this.single) {
|
||||
const firstImage = this.fileList[0];
|
||||
this.$emit("input", firstImage ? this.getPureUrl(firstImage.url) : "");
|
||||
} else {
|
||||
this.$emit("input", this.fileList.map(f => this.getPureUrl(f.url)))
|
||||
}
|
||||
|
||||
this.$modal.closeLoading()
|
||||
}
|
||||
},
|
||||
|
|
@ -256,6 +287,8 @@ export default {
|
|||
for (let i in list) {
|
||||
if (list[i].url) {
|
||||
let url = list[i].url
|
||||
// 清理URL
|
||||
url = this.cleanImageUrl(url)
|
||||
// 如果是七牛云完整URL，直接使用；如果是本地URL，去掉baseUrl前缀
|
||||
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||
strs += url + separator
|
||||
|
|
@ -266,6 +299,37 @@ export default {
|
|||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : ''
|
||||
},
|
||||
// 清理图片URL，移除多余的前缀和字符
|
||||
cleanImageUrl(url) {
|
||||
if (!url || typeof url !== 'string') return '';
|
||||
|
||||
let cleanUrl = url.trim();
|
||||
|
||||
// 移除/dev-api前缀
|
||||
if (cleanUrl.startsWith('/dev-api')) {
|
||||
cleanUrl = cleanUrl.replace('/dev-api', '');
|
||||
}
|
||||
|
||||
// 移除baseUrl前缀
|
||||
if (cleanUrl.startsWith(this.baseUrl)) {
|
||||
cleanUrl = cleanUrl.replace(this.baseUrl, '');
|
||||
}
|
||||
|
||||
// 清理HTML实体编码
|
||||
cleanUrl = cleanUrl.replace(/"/g, '"');
|
||||
cleanUrl = cleanUrl.replace(/&/g, '&');
|
||||
cleanUrl = cleanUrl.replace(/</g, '<');
|
||||
cleanUrl = cleanUrl.replace(/>/g, '>');
|
||||
|
||||
// 清理多余的引号和方括号
|
||||
cleanUrl = cleanUrl.replace(/^["\[]+|["\]]+$/g, '');
|
||||
|
||||
// 清理多余的斜杠
|
||||
cleanUrl = cleanUrl.replace(/^\/+/, '');
|
||||
|
||||
return cleanUrl;
|
||||
},
|
||||
|
||||
// 去除baseUrl和/dev-api前缀，返回纯相对路径或外链
|
||||
getPureUrl(url) {
|
||||
if (!url) return '';
|
||||
|
|
|
|||
|
|
@ -376,13 +376,37 @@
|
|||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主图" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
<image-upload v-model="form.image" :single="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="images">
|
||||
<image-upload v-model="form.images"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-input v-model="form.tags" placeholder="请输入标签" />
|
||||
<div class="tags-container">
|
||||
<div class="tags-list">
|
||||
<el-tag
|
||||
v-for="(tag, index) in form.tagsArray"
|
||||
:key="index"
|
||||
closable
|
||||
@close="removeTag(index)"
|
||||
style="margin-right: 8px; margin-bottom: 8px;"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="tag-input-container">
|
||||
<el-input
|
||||
v-model="tagInputValue"
|
||||
placeholder="请输入标签，按回车添加"
|
||||
size="small"
|
||||
style="width: 200px;"
|
||||
@keyup.enter.native="addTag"
|
||||
@blur="addTag"
|
||||
>
|
||||
<el-button slot="append" @click="addTag" size="small">添加</el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
|
|
@ -567,6 +591,8 @@ export default {
|
|||
skuList: [{ name: "", value: "" }],
|
||||
specList: [{ name: "", values: [""] }],
|
||||
skuTable: [],
|
||||
// 标签相关
|
||||
tagInputValue: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -601,7 +627,8 @@ export default {
|
|||
sales: null,
|
||||
stock: null,
|
||||
status: null,
|
||||
tags: null,
|
||||
tags: "[]",
|
||||
tagsArray: [],
|
||||
cateId: null,
|
||||
skuType: 1,
|
||||
sku: "{}",
|
||||
|
|
@ -698,6 +725,25 @@ export default {
|
|||
console.warn('解析单规格数据失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理标签数据
|
||||
if (this.form.tags) {
|
||||
try {
|
||||
// 尝试解析JSON格式的标签
|
||||
if (this.form.tags.startsWith('[') && this.form.tags.endsWith(']')) {
|
||||
this.form.tagsArray = JSON.parse(this.form.tags);
|
||||
} else {
|
||||
// 兼容旧的逗号分隔格式
|
||||
this.form.tagsArray = this.form.tags.split(',').filter(tag => tag.trim());
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('解析标签数据失败:', e);
|
||||
this.form.tagsArray = [];
|
||||
}
|
||||
} else {
|
||||
this.form.tagsArray = [];
|
||||
}
|
||||
|
||||
this.open = true;
|
||||
this.title = "修改积分商品";
|
||||
});
|
||||
|
|
@ -707,6 +753,21 @@ export default {
|
|||
// 设置规格类型
|
||||
this.form.skuType = this.skuType;
|
||||
|
||||
// 确保图片字段是字符串格式
|
||||
if (Array.isArray(this.form.image)) {
|
||||
this.form.image = this.form.image.length > 0 ? this.form.image[0] : "";
|
||||
}
|
||||
if (Array.isArray(this.form.images)) {
|
||||
this.form.images = this.form.images.join(',');
|
||||
}
|
||||
|
||||
// 将标签数组转换为JSON字符串格式
|
||||
if (this.form.tagsArray && this.form.tagsArray.length > 0) {
|
||||
this.form.tags = JSON.stringify(this.form.tagsArray);
|
||||
} else {
|
||||
this.form.tags = "[]";
|
||||
}
|
||||
console.log(this.skuType);
|
||||
// 处理规格信息
|
||||
if (this.skuType === 2) {
|
||||
// 多规格模式
|
||||
|
|
@ -721,25 +782,7 @@ export default {
|
|||
this.$modal.msgError("规格信息不能为空");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 单规格模式
|
||||
if (!this.form.skuName || !this.form.skuValue) {
|
||||
this.$modal.msgError("请完善单规格信息");
|
||||
return;
|
||||
}
|
||||
const singleSku = {
|
||||
name: this.form.skuName,
|
||||
value: this.form.skuValue
|
||||
};
|
||||
this.form.sku = JSON.stringify(singleSku);
|
||||
}
|
||||
|
||||
// 验证sku不能为空
|
||||
if (!this.form.sku || this.form.sku === '{}') {
|
||||
this.$modal.msgError("规格信息不能为空");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
|
|
@ -809,6 +852,23 @@ export default {
|
|||
this.$message.error("修改失败");
|
||||
}
|
||||
},
|
||||
|
||||
// 添加标签
|
||||
addTag() {
|
||||
if (this.tagInputValue && this.tagInputValue.trim()) {
|
||||
const tag = this.tagInputValue.trim();
|
||||
// 检查标签是否已存在
|
||||
if (!this.form.tagsArray.includes(tag)) {
|
||||
this.form.tagsArray.push(tag);
|
||||
}
|
||||
this.tagInputValue = "";
|
||||
}
|
||||
},
|
||||
|
||||
// 删除标签
|
||||
removeTag(index) {
|
||||
this.form.tagsArray.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -822,4 +882,18 @@ export default {
|
|||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
margin-bottom: 10px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.tag-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1595,8 +1595,8 @@ export default {
|
|||
this.$message.success("完成服务成功！");
|
||||
this.completeServiceDialogVisible = false;
|
||||
this.completeServiceImages = [];
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.$message.error("完成服务失败：" + (response.msg || "未知错误"));
|
||||
}
|
||||
|
|
@ -1631,8 +1631,8 @@ export default {
|
|||
if (response.code === 200) {
|
||||
this.$message.success("接单成功！");
|
||||
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.$message.error("接单失败：" + response.msg);
|
||||
}
|
||||
|
|
@ -1663,8 +1663,8 @@ export default {
|
|||
|
||||
if (response.code === 200) {
|
||||
this.$message.success("确认到达成功！");
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.$message.error("确认到达失败：" + response.msg);
|
||||
}
|
||||
|
|
@ -1709,8 +1709,8 @@ export default {
|
|||
this.$message.success("开始服务成功！");
|
||||
this.startServiceDialogVisible = false;
|
||||
this.startServiceImages = [];
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.$message.error("开始服务失败：" + (response.msg || "未知错误"));
|
||||
}
|
||||
|
|
@ -1814,8 +1814,8 @@ export default {
|
|||
this.$message.success("订单已结束");
|
||||
this.endOrderDialogVisible = false;
|
||||
this.resetEndOrderForm();
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.$message.error(
|
||||
"结束订单失败：" + (response.msg || "未知错误")
|
||||
|
|
@ -1944,13 +1944,8 @@ export default {
|
|||
this.changeWorkerDialogVisible = false;
|
||||
this.selectedWorker = null;
|
||||
|
||||
// 刷新师傅信息
|
||||
if (this.orderInfo.workerId) {
|
||||
this.loadWorkerInfo();
|
||||
}
|
||||
|
||||
// 不关闭页面，刷新数据
|
||||
await this.refreshOrderData();
|
||||
// 操作完成后关闭页面
|
||||
this.handleClose();
|
||||
} catch (error) {
|
||||
console.error("更换师傅失败:", error);
|
||||
this.$message.error("更换师傅失败：" + (error.message || "未知错误"));
|
||||
|
|
|
|||
|
|
@ -1,5 +1,25 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 添加调试信息 -->
|
||||
<!-- <div v-if="true" style="background: #f0f9ff; border: 1px solid #0ea5e9; padding: 10px; margin-bottom: 10px; border-radius: 4px;">-->
|
||||
<!-- <strong>调试信息：</strong>-->
|
||||
<!-- <div>文件总行数: {{ totalLines }}</div>-->
|
||||
<!-- <div>当前时间: {{ new Date().toLocaleString() }}</div>-->
|
||||
<!-- <div>Element UI 版本: {{ $ELEMENT ? $ELEMENT.version : '未知' }}</div>-->
|
||||
<!-- <div>分类列表长度: {{ serviceCateList.length }}</div>-->
|
||||
<!-- <div>城市列表长度: {{ cityList.length }}</div>-->
|
||||
<!-- <div>技能列表长度: {{ siteSkillList.length }}</div>-->
|
||||
<!-- <el-button size="small" @click="getserviceCateList" style="margin-right: 10px;">重新加载分类</el-button>-->
|
||||
<!-- <el-button size="small" @click="getCityList" style="margin-right: 10px;">重新加载城市</el-button>-->
|
||||
<!-- <el-button size="small" @click="getSiteSkillList">重新加载技能</el-button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- 错误边界 -->
|
||||
<div v-if="hasError" style="background: #fef2f2; border: 1px solid #ef4444; padding: 10px; margin-bottom: 10px; border-radius: 4px;">
|
||||
<strong>组件错误:</strong> {{ errorMessage }}
|
||||
<el-button size="small" @click="retryLoad" style="margin-left: 10px;">重试</el-button>
|
||||
</div>
|
||||
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="分类" prop="cateId">
|
||||
<el-select v-model="queryParams.cateId" placeholder="请选择分类" clearable filterable>
|
||||
|
|
@ -9,7 +29,7 @@
|
|||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="cate in group.children"
|
||||
v-for="cate in getValidChildren(group.children)"
|
||||
:key="cate.id"
|
||||
:label="formatCateLabel(cate)"
|
||||
:value="cate.id"
|
||||
|
|
@ -312,9 +332,20 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon" :limit="1"/>
|
||||
<!-- 调试信息 -->
|
||||
<!-- <div v-if="form.icon" style="margin-top: 8px; font-size: 12px; color: #909399;">-->
|
||||
<!-- <i class="el-icon-info"></i> 当前图标URL: {{ form.icon }}-->
|
||||
<!-- </div>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="轮播图" prop="imgs">
|
||||
<image-upload v-model="form.imgs"/>
|
||||
<!-- 调试信息 -->
|
||||
<!-- <div v-if="form.imgs && form.imgs.length > 0" style="margin-top: 8px; font-size: 12px; color: #909399;">-->
|
||||
<!-- <i class="el-icon-info"></i> 当前轮播图数量: {{ form.imgs.length }}-->
|
||||
<!-- <div v-for="(img, index) in form.imgs" :key="index" style="margin-top: 4px;">-->
|
||||
<!-- {{ index + 1 }}. {{ img }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="info">
|
||||
<el-input v-model="form.info" type="textarea" placeholder="请输入内容" />
|
||||
|
|
@ -341,7 +372,7 @@
|
|||
:label="group.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="cate in group.children"
|
||||
v-for="cate in getValidChildren(group.children)"
|
||||
:key="cate.id"
|
||||
:label="formatCateLabel(cate)"
|
||||
:value="cate.id"
|
||||
|
|
@ -393,13 +424,12 @@
|
|||
style="width: 100%;"
|
||||
:loading="cityLoading"
|
||||
@change="handleCityChange"
|
||||
collapse-tags
|
||||
:collapse-tags-tooltip="true"
|
||||
:class="{ 'city-select-loading': cityLoading }"
|
||||
no-data-text="暂无城市数据，请检查网络连接或联系管理员"
|
||||
>
|
||||
<el-option
|
||||
v-for="city in cityList"
|
||||
v-for="city in getValidCities(cityList)"
|
||||
:key="city.id"
|
||||
:label="city.title"
|
||||
:value="city.id"
|
||||
|
|
@ -414,19 +444,27 @@
|
|||
<span style="color: #c0c4cc;">暂无城市数据</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- 调试信息 -->
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 5px;">
|
||||
<i class="el-icon-info"></i> 城市列表状态: {{ cityLoading ? '加载中...' : `已加载 ${cityList.length} 个城市` }}
|
||||
<el-button
|
||||
v-if="!cityLoading && cityList.length === 0"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="getCityList"
|
||||
style="margin-left: 10px;"
|
||||
>
|
||||
<i class="el-icon-refresh"></i> 重新加载
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- <!– 调试信息 –>-->
|
||||
<!-- <div style="font-size: 12px; color: #909399; margin-top: 5px;">-->
|
||||
<!-- <i class="el-icon-info"></i> 城市列表状态: {{ cityLoading ? '加载中...' : `已加载 ${cityList.length} 个城市` }}-->
|
||||
<!-- <el-button-->
|
||||
<!-- v-if="!cityLoading && cityList.length === 0"-->
|
||||
<!-- type="text"-->
|
||||
<!-- size="mini"-->
|
||||
<!-- @click="getCityList"-->
|
||||
<!-- style="margin-left: 10px;"-->
|
||||
<!-- >-->
|
||||
<!-- <i class="el-icon-refresh"></i> 重新加载-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- 临时调试信息 -->
|
||||
<!-- <div v-if="true" style="font-size: 11px; color: #e6a23c; margin-top: 5px; background: #fdf6ec; padding: 5px; border-radius: 3px;">-->
|
||||
<!-- <strong>调试信息:</strong><br/>-->
|
||||
<!-- 城市列表长度: {{ cityList.length }}<br/>-->
|
||||
<!-- 表单城市数组: {{ form.cityArray }}<br/>-->
|
||||
<!-- 城市选择器值: {{ form.cityArray }}<br/>-->
|
||||
<!-- getValidCities结果长度: {{ getValidCities(cityList).length }}-->
|
||||
<!-- </div>-->
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 5px;">
|
||||
<i class="el-icon-info"></i> 可多选城市，不选择则适用于所有城市
|
||||
</div>
|
||||
|
|
@ -463,7 +501,7 @@
|
|||
@change="handleSkillChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="skill in siteSkillList"
|
||||
v-for="skill in getValidSkills(siteSkillList)"
|
||||
:key="skill.id"
|
||||
:label="skill.title"
|
||||
:value="skill.id"
|
||||
|
|
@ -613,7 +651,7 @@
|
|||
<el-form-item label="指定工人集合" prop="workerids" v-if="form.dispatchtype === 3">
|
||||
<el-select v-model="form.workerids" filterable placeholder="请选择工人" style="width: 100%">
|
||||
<el-option
|
||||
v-for="worker in listworkerlist"
|
||||
v-for="worker in getValidWorkers(listworkerlist)"
|
||||
:key="worker.id"
|
||||
:label="worker.name + '（' + worker.phone + '）'"
|
||||
:value="worker.id"
|
||||
|
|
@ -830,6 +868,8 @@ export default {
|
|||
showSearch: true,
|
||||
// 总条数
|
||||
listworkerlist: [],
|
||||
// 调试信息
|
||||
totalLines: 2555,
|
||||
serviceCateList: [],
|
||||
// 分组后的分类列表
|
||||
groupedServiceCateList: [],
|
||||
|
|
@ -948,16 +988,26 @@ export default {
|
|||
// 城市相关
|
||||
cityList: [],
|
||||
cityLoading: false,
|
||||
hasError: false,
|
||||
errorMessage: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getList();
|
||||
this.getserviceCateList();
|
||||
this.getSiteSkillList();
|
||||
this.testSkillList();
|
||||
this.getlistworkerdatalist();
|
||||
this.testJsonConversion(); // 测试JSON转换功能
|
||||
this.getCityList(); // 获取城市列表
|
||||
this.getlistworkerlist();
|
||||
this.getCityList();
|
||||
|
||||
// 添加调试信息
|
||||
console.log('ServiceGoods 组件已创建');
|
||||
console.log('Element UI 版本:', this.$ELEMENT);
|
||||
console.log('当前组件实例:', this);
|
||||
|
||||
// 强制刷新组件
|
||||
this.$nextTick(() => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
// 监听技能数组变化，确保UI同步
|
||||
|
|
@ -987,6 +1037,62 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取有效的子分类
|
||||
getValidChildren(children) {
|
||||
console.log('getValidChildren 输入:', children);
|
||||
if (!children || !Array.isArray(children)) {
|
||||
console.log('getValidChildren 返回空数组，原因:', !children ? 'children为空' : 'children不是数组');
|
||||
return [];
|
||||
}
|
||||
const validChildren = children.filter(cate => cate && cate.id);
|
||||
console.log('getValidChildren 输出:', validChildren);
|
||||
return validChildren;
|
||||
},
|
||||
// 获取有效的城市列表
|
||||
getValidCities(cities) {
|
||||
console.log('=== getValidCities 调用 ===');
|
||||
console.log('输入参数:', cities);
|
||||
console.log('输入类型:', typeof cities);
|
||||
console.log('是否为数组:', Array.isArray(cities));
|
||||
|
||||
if (!cities || !Array.isArray(cities)) {
|
||||
console.log('getValidCities 返回空数组，原因:', !cities ? 'cities为空' : 'cities不是数组');
|
||||
return [];
|
||||
}
|
||||
|
||||
console.log('输入数组长度:', cities.length);
|
||||
console.log('输入数组前3项:', cities.slice(0, 3));
|
||||
|
||||
const validCities = cities.filter(city => city && city.id);
|
||||
console.log('过滤后的有效城市:', validCities);
|
||||
console.log('有效城市数量:', validCities.length);
|
||||
|
||||
if (validCities.length > 0) {
|
||||
console.log('有效城市示例:', validCities.slice(0, 3).map(city => ({ id: city.id, title: city.title })));
|
||||
}
|
||||
|
||||
console.log('=== getValidCities 完成 ===');
|
||||
return validCities;
|
||||
},
|
||||
// 获取有效的技能列表
|
||||
getValidSkills(skills) {
|
||||
if (!skills || !Array.isArray(skills)) {
|
||||
return [];
|
||||
}
|
||||
return skills.filter(skill => skill && skill.id);
|
||||
},
|
||||
// 获取有效的工人列表
|
||||
getValidWorkers(workers) {
|
||||
if (!workers || !Array.isArray(workers)) {
|
||||
return [];
|
||||
}
|
||||
return workers.filter(worker => worker && worker.id);
|
||||
},
|
||||
// 处理全局错误
|
||||
handleGlobalError(error) {
|
||||
console.error('全局错误:', error);
|
||||
// 可以在这里添加错误上报逻辑
|
||||
},
|
||||
/** 查询服务内容列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
|
|
@ -994,7 +1100,12 @@ export default {
|
|||
this.ServiceGoodsList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
}).catch(error => {
|
||||
console.error('获取服务内容列表失败:', error);
|
||||
this.hasError = true;
|
||||
this.errorMessage = '获取服务内容列表失败，请稍后重试';
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
|
|
@ -1134,9 +1245,18 @@ export default {
|
|||
this.$set(this.form, 'firstCateId', null);
|
||||
this.$set(this.form, 'secondCateId', null);
|
||||
this.$set(this.form, 'cityArray', []); // 初始化城市数组
|
||||
|
||||
// 确保分类和城市数据已加载
|
||||
if (this.serviceCateList.length === 0) {
|
||||
this.getserviceCateList();
|
||||
}
|
||||
if (this.cityList.length === 0) {
|
||||
this.getCityList();
|
||||
}
|
||||
if (this.siteSkillList.length === 0) {
|
||||
this.getSiteSkillList();
|
||||
}
|
||||
|
||||
this.open = true
|
||||
this.title = "添加服务内容"
|
||||
this.handleServiceTypeChange(this.form.servicetype);
|
||||
|
|
@ -1188,15 +1308,33 @@ export default {
|
|||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
this.getlistworkerdatalist();
|
||||
|
||||
// 确保分类和城市数据已加载
|
||||
if (this.serviceCateList.length === 0) {
|
||||
this.getserviceCateList();
|
||||
}
|
||||
if (this.cityList.length === 0) {
|
||||
this.getCityList();
|
||||
}
|
||||
|
||||
const skillPromise = this.siteSkillList.length > 0 ?
|
||||
Promise.resolve(this.siteSkillList) :
|
||||
this.getSiteSkillList();
|
||||
|
||||
// 确保城市数据已加载完成
|
||||
const cityPromise = this.cityList.length > 0 ?
|
||||
Promise.resolve(this.cityList) :
|
||||
this.getCityList().then(() => this.cityList);
|
||||
|
||||
Promise.all([
|
||||
getServiceGoods(id),
|
||||
skillPromise
|
||||
]).then(([serviceResponse, skillData]) => {
|
||||
this.form = serviceResponse.data
|
||||
console.log('编辑数据:', this.form);
|
||||
console.log('原始城市字段值:', this.form.city);
|
||||
console.log('原始城市字段类型:', typeof this.form.city);
|
||||
console.log('原始城市字段内容:', JSON.stringify(this.form.city));
|
||||
|
||||
// 处理问答数据
|
||||
if (this.form.questions) {
|
||||
|
|
@ -1305,40 +1443,59 @@ export default {
|
|||
if (this.form.city) {
|
||||
try {
|
||||
let cityArray = [];
|
||||
console.log('=== 城市数据处理开始 ===');
|
||||
console.log('原始城市数据:', this.form.city, '类型:', typeof this.form.city);
|
||||
console.log('城市数据内容:', JSON.stringify(this.form.city));
|
||||
|
||||
if (typeof this.form.city === 'string') {
|
||||
// 尝试解析JSON格式
|
||||
try {
|
||||
const parsedCity = JSON.parse(this.form.city);
|
||||
console.log('JSON解析成功:', parsedCity);
|
||||
if (Array.isArray(parsedCity)) {
|
||||
cityArray = parsedCity.map(id => parseInt(id)).filter(id => !isNaN(id));
|
||||
console.log('JSON数组转换成功:', cityArray);
|
||||
} else {
|
||||
// 如果不是JSON数组，尝试逗号分隔的字符串
|
||||
cityArray = this.form.city.split(',').map(id => {
|
||||
const numId = parseInt(id.trim());
|
||||
return isNaN(numId) ? null : numId;
|
||||
}).filter(id => id !== null);
|
||||
console.log('逗号分隔转换成功:', cityArray);
|
||||
}
|
||||
} catch (jsonError) {
|
||||
console.log('JSON解析失败，尝试逗号分隔:', jsonError);
|
||||
// JSON解析失败，尝试逗号分隔的字符串
|
||||
cityArray = this.form.city.split(',').map(id => {
|
||||
const numId = parseInt(id.trim());
|
||||
return isNaN(numId) ? null : numId;
|
||||
}).filter(id => id !== null);
|
||||
console.log('逗号分隔转换成功:', cityArray);
|
||||
}
|
||||
} else if (Array.isArray(this.form.city)) {
|
||||
// 如果已经是数组，直接使用
|
||||
cityArray = this.form.city.map(id => parseInt(id)).filter(id => !isNaN(id));
|
||||
console.log('直接数组转换成功:', cityArray);
|
||||
}
|
||||
|
||||
this.$set(this.form, 'cityArray', cityArray);
|
||||
console.log('转换后的城市数组:', this.form.cityArray);
|
||||
console.log('最终设置的城市数组:', this.form.cityArray);
|
||||
console.log('=== 城市数据处理完成 ===');
|
||||
|
||||
// 延迟设置城市数组，确保数据绑定正确
|
||||
setTimeout(() => {
|
||||
console.log('延迟后的城市数组:', this.form.cityArray);
|
||||
if (this.form.cityArray && this.form.cityArray.length > 0) {
|
||||
console.log('城市数组已设置，长度:', this.form.cityArray.length);
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}, 100);
|
||||
} catch (e) {
|
||||
console.error('城市数据转换错误:', e);
|
||||
this.$set(this.form, 'cityArray', []);
|
||||
}
|
||||
} else {
|
||||
console.log('城市数据为空，设置空数组');
|
||||
this.$set(this.form, 'cityArray', []);
|
||||
}
|
||||
|
||||
|
|
@ -1451,6 +1608,32 @@ export default {
|
|||
} else if (!Array.isArray(this.form.imgs)) {
|
||||
this.form.imgs = [];
|
||||
}
|
||||
|
||||
// 清理图片URL中的多余前缀和字符
|
||||
if (this.form.icon && typeof this.form.icon === 'string') {
|
||||
this.form.icon = this.cleanImageUrl(this.form.icon);
|
||||
}
|
||||
if (this.form.imgs && Array.isArray(this.form.imgs)) {
|
||||
this.form.imgs = this.form.imgs.map(img => {
|
||||
if (typeof img === 'string') {
|
||||
return this.cleanImageUrl(img);
|
||||
}
|
||||
return img;
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
// 添加调试信息：检查所有相关数据
|
||||
console.log('=== 编辑表单数据加载完成 ===');
|
||||
console.log('表单城市数组:', this.form.cityArray);
|
||||
console.log('城市列表长度:', this.cityList.length);
|
||||
console.log('城市列表前5项:', this.cityList.slice(0, 5));
|
||||
console.log('getValidCities结果:', this.getValidCities(this.cityList));
|
||||
|
||||
// 强制更新组件以确保数据绑定
|
||||
this.$nextTick(() => {
|
||||
console.log('nextTick后的城市数组:', this.form.cityArray);
|
||||
this.$forceUpdate();
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error('编辑数据加载失败:', error);
|
||||
this.$message.error('编辑数据加载失败，请重试');
|
||||
|
|
@ -1560,6 +1743,14 @@ export default {
|
|||
this.form.imgs = this.form.imgs.filter(Boolean).join(',');
|
||||
}
|
||||
|
||||
// 清理图片URL中的多余前缀和字符
|
||||
if (this.form.icon && typeof this.form.icon === 'string') {
|
||||
this.form.icon = this.cleanImageUrl(this.form.icon);
|
||||
}
|
||||
if (this.form.imgs && typeof this.form.imgs === 'string') {
|
||||
this.form.imgs = this.cleanImageUrl(this.form.imgs);
|
||||
}
|
||||
|
||||
// 构造提交数据，避免直接修改 this.form
|
||||
const submitData = { ...this.form };
|
||||
// workerids 处理，直接以字符串方式存储
|
||||
|
|
@ -1616,15 +1807,22 @@ export default {
|
|||
});
|
||||
},
|
||||
getserviceCateList(){
|
||||
console.log('开始获取分类列表...');
|
||||
// 获取所有分类数据
|
||||
getAllServiceCateList(1).then(response => {
|
||||
console.log('分类API响应:', response);
|
||||
this.serviceCateList = response.rows || []
|
||||
console.log('设置分类列表:', this.serviceCateList);
|
||||
console.log('分类列表长度:', this.serviceCateList.length);
|
||||
this.processServiceCateList()
|
||||
}).catch(error => {
|
||||
console.error('获取分类列表失败:', error)
|
||||
// 降级处理：使用原有接口
|
||||
selectServiceCateList(1).then(response => {
|
||||
console.log('降级分类API响应:', response);
|
||||
this.serviceCateList = response.data || []
|
||||
console.log('降级设置分类列表:', this.serviceCateList);
|
||||
console.log('降级分类列表长度:', this.serviceCateList.length);
|
||||
this.processServiceCateList()
|
||||
}).catch(err => {
|
||||
console.error('降级获取分类列表也失败:', err)
|
||||
|
|
@ -1687,6 +1885,10 @@ export default {
|
|||
分组数: this.groupedServiceCateList.length,
|
||||
分组详情: this.groupedServiceCateList
|
||||
})
|
||||
|
||||
// 添加更多调试信息
|
||||
console.log('groupedServiceCateList 设置完成:', this.groupedServiceCateList);
|
||||
console.log('firstLevelCateList 设置完成:', this.firstLevelCateList);
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
|
|
@ -2256,13 +2458,27 @@ export default {
|
|||
|
||||
/** 获取城市列表 */
|
||||
getCityList() {
|
||||
console.log('开始获取城市列表...');
|
||||
console.log('=== 开始获取城市列表 ===');
|
||||
this.cityLoading = true;
|
||||
getFirstLevelCities().then(response => {
|
||||
console.log('城市API响应:', response);
|
||||
console.log('响应数据类型:', typeof response);
|
||||
console.log('响应结构:', Object.keys(response));
|
||||
|
||||
this.cityList = response.rows || [];
|
||||
console.log('设置城市列表:', this.cityList);
|
||||
console.log('城市列表长度:', this.cityList.length);
|
||||
console.log('城市列表前5项:', this.cityList.slice(0, 5));
|
||||
|
||||
// 验证城市数据的有效性
|
||||
if (this.cityList.length > 0) {
|
||||
const validCities = this.cityList.filter(city => city && city.id && city.title);
|
||||
console.log('有效城市数量:', validCities.length);
|
||||
console.log('有效城市示例:', validCities.slice(0, 3));
|
||||
}
|
||||
|
||||
this.cityLoading = false;
|
||||
console.log('=== 城市列表获取完成 ===');
|
||||
}).catch(error => {
|
||||
console.error("获取城市列表失败:", error);
|
||||
this.cityLoading = false;
|
||||
|
|
@ -2320,7 +2536,80 @@ export default {
|
|||
console.log('删除城市:', cityId, '剩余:', this.form.cityArray);
|
||||
}
|
||||
},
|
||||
|
||||
/** 清理图片URL，移除多余的前缀和字符 */
|
||||
cleanImageUrl(url) {
|
||||
if (!url || typeof url !== 'string') return '';
|
||||
|
||||
let cleanUrl = url.trim();
|
||||
|
||||
// 移除/dev-api前缀
|
||||
if (cleanUrl.startsWith('/dev-api')) {
|
||||
cleanUrl = cleanUrl.replace('/dev-api', '');
|
||||
}
|
||||
|
||||
// 移除baseUrl前缀（如果存在）
|
||||
const baseUrl = process.env.VUE_APP_BASE_API;
|
||||
if (baseUrl && cleanUrl.startsWith(baseUrl)) {
|
||||
cleanUrl = cleanUrl.replace(baseUrl, '');
|
||||
}
|
||||
|
||||
// 清理HTML实体编码
|
||||
cleanUrl = cleanUrl.replace(/"/g, '"');
|
||||
cleanUrl = cleanUrl.replace(/&/g, '&');
|
||||
cleanUrl = cleanUrl.replace(/</g, '<');
|
||||
cleanUrl = cleanUrl.replace(/>/g, '>');
|
||||
|
||||
// 清理多余的引号和方括号
|
||||
cleanUrl = cleanUrl.replace(/^["\[]+|["\]]+$/g, '');
|
||||
|
||||
// 清理多余的斜杠
|
||||
cleanUrl = cleanUrl.replace(/^\/+/, '');
|
||||
|
||||
console.log('清理图片URL:', { 原始: url, 清理后: cleanUrl });
|
||||
|
||||
return cleanUrl;
|
||||
},
|
||||
retryLoad() {
|
||||
this.hasError = false;
|
||||
this.errorMessage = '';
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 添加错误处理
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
// 尝试重新注册 Element UI 组件
|
||||
if (this.$options.components) {
|
||||
console.log('组件已正确注册:', Object.keys(this.$options.components));
|
||||
}
|
||||
|
||||
// 检查 el-option 组件是否可用
|
||||
if (this.$options.components['el-option']) {
|
||||
console.log('el-option 组件已注册');
|
||||
} else {
|
||||
console.warn('el-option 组件未注册，尝试手动注册');
|
||||
// 这里可以尝试手动注册组件
|
||||
}
|
||||
|
||||
// 添加全局错误处理器
|
||||
this.$root.$on('error', this.handleGlobalError);
|
||||
|
||||
// 强制刷新组件
|
||||
this.$forceUpdate();
|
||||
} catch (error) {
|
||||
console.error('组件注册检查失败:', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 移除全局错误处理器
|
||||
if (this.$root) {
|
||||
this.$root.$off('error', this.handleGlobalError);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue