Compare commits
No commits in common. "3b07de8287f88863abd071cdfec6d7caf6b44946" and "6b153719e385c8f36dbb01185d39eb9d2b77b9df" have entirely different histories.
3b07de8287
...
6b153719e3
|
|
@ -0,0 +1,403 @@
|
|||
<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="orderId">
|
||||
<el-input
|
||||
v-model="queryParams.orderId"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input
|
||||
v-model="queryParams.uid"
|
||||
placeholder="请输入用户"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input
|
||||
v-model="queryParams.userPhone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input
|
||||
v-model="queryParams.userAddress"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-input
|
||||
v-model="queryParams.productId"
|
||||
placeholder="请输入商品"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input
|
||||
v-model="queryParams.deliveryNum"
|
||||
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:IntegralOrder: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:IntegralOrder: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:IntegralOrder: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:IntegralOrder:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralOrderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="用户" align="center" prop="uid" />
|
||||
<el-table-column label="姓名" align="center" prop="userName" />
|
||||
<el-table-column label="电话" align="center" prop="userPhone" />
|
||||
<el-table-column label="地址" align="center" prop="userAddress" />
|
||||
<el-table-column label="商品" align="center" prop="productId" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="单价" align="center" prop="price" />
|
||||
<el-table-column label="总积分" align="center" prop="totalPrice" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:IntegralOrder:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralOrder: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input v-model="form.userPhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input v-model="form.userAddress" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-input v-model="form.productId" 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="数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总积分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="快递" prop="deliveryId">
|
||||
<el-input v-model="form.deliveryId" placeholder="请输入快递" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input v-model="form.deliveryNum" placeholder="请输入单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralOrder, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder } from "@/api/system/IntegralOrder"
|
||||
|
||||
export default {
|
||||
name: "IntegralOrder",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分订单表格数据
|
||||
IntegralOrderList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
deliveryNum: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
userPhone: [
|
||||
{ required: true, message: "电话不能为空", trigger: "blur" }
|
||||
],
|
||||
userAddress: [
|
||||
{ required: true, message: "地址不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "商品不能为空", trigger: "blur" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "单价不能为空", trigger: "blur" }
|
||||
],
|
||||
totalPrice: [
|
||||
{ required: true, message: "总积分不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "1：待发货 2：待收货 3：已完成不能为空", trigger: "change" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询积分订单列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralOrder(this.queryParams).then(response => {
|
||||
this.IntegralOrderList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
sku: null,
|
||||
num: null,
|
||||
price: null,
|
||||
totalPrice: null,
|
||||
status: null,
|
||||
deliveryId: null,
|
||||
deliveryNum: null,
|
||||
mark: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分订单"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralOrder(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) {
|
||||
updateIntegralOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralOrder(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 delIntegralOrder(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralOrder/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralOrder_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
<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="orderId">
|
||||
<el-input
|
||||
v-model="queryParams.orderId"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input
|
||||
v-model="queryParams.userPhone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input
|
||||
v-model="queryParams.userAddress"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="queryParams.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input
|
||||
v-model="queryParams.deliveryNum"
|
||||
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 v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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:IntegralOrder: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:IntegralOrder: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:IntegralOrder: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:IntegralOrder:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralOrderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="用户" align="center" prop="uid" />
|
||||
<el-table-column label="姓名" align="center" prop="userName" />
|
||||
<el-table-column label="电话" align="center" prop="userPhone" />
|
||||
<el-table-column label="地址" align="center" prop="userAddress" />
|
||||
<el-table-column label="商品" align="center" prop="productId" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="单价" align="center" prop="price" />
|
||||
<el-table-column label="总积分" align="center" prop="totalPrice" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:IntegralOrder:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralOrder: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="form.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input v-model="form.userPhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input v-model="form.userAddress" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="form.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</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="数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总积分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="快递" prop="deliveryId">
|
||||
<el-input v-model="form.deliveryId" placeholder="请输入快递" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input v-model="form.deliveryNum" placeholder="请输入单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralOrder, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder } from "@/api/system/IntegralOrder"
|
||||
import request from "@/utils/request"
|
||||
|
||||
export default {
|
||||
name: "IntegralOrder",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分订单表格数据
|
||||
IntegralOrderList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
deliveryNum: null,
|
||||
status: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
userPhone: [
|
||||
{ required: true, message: "电话不能为空", trigger: "blur" }
|
||||
],
|
||||
userAddress: [
|
||||
{ required: true, message: "地址不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "商品不能为空", trigger: "blur" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "单价不能为空", trigger: "blur" }
|
||||
],
|
||||
totalPrice: [
|
||||
{ required: true, message: "总积分不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "1：待发货 2：待收货 3：已完成不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
users: [],
|
||||
serviceGoods: [],
|
||||
statusOptions: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getOptions()
|
||||
},
|
||||
methods: {
|
||||
getOptions() {
|
||||
request.get("/system/IntegralOrder/userOptions").then(res => { this.users = res.data || []; });
|
||||
request.get("/system/IntegralOrder/goodsOptions").then(res => { this.serviceGoods = res.data || []; });
|
||||
request.get("/system/IntegralOrder/statusOptions").then(res => { this.statusOptions = res.data || []; });
|
||||
},
|
||||
/** 查询积分订单列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralOrder(this.queryParams).then(response => {
|
||||
this.IntegralOrderList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
sku: null,
|
||||
num: null,
|
||||
price: null,
|
||||
totalPrice: null,
|
||||
status: null,
|
||||
deliveryId: null,
|
||||
deliveryNum: null,
|
||||
mark: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分订单"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralOrder(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) {
|
||||
updateIntegralOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralOrder(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 delIntegralOrder(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralOrder/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralOrder_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
<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="orderId">
|
||||
<el-input
|
||||
v-model="queryParams.orderId"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input
|
||||
v-model="queryParams.userPhone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input
|
||||
v-model="queryParams.userAddress"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="queryParams.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input
|
||||
v-model="queryParams.deliveryNum"
|
||||
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 v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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:IntegralOrder: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:IntegralOrder: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:IntegralOrder: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:IntegralOrder:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralOrderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="用户" align="center" prop="uid" />
|
||||
<el-table-column label="姓名" align="center" prop="userName" />
|
||||
<el-table-column label="电话" align="center" prop="userPhone" />
|
||||
<el-table-column label="地址" align="center" prop="userAddress" />
|
||||
<el-table-column label="商品" align="center" prop="productId" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="单价" align="center" prop="price" />
|
||||
<el-table-column label="总积分" align="center" prop="totalPrice" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:IntegralOrder:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralOrder: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="form.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input v-model="form.userPhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input v-model="form.userAddress" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="form.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</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="数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总积分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="快递" prop="deliveryId">
|
||||
<el-input v-model="form.deliveryId" placeholder="请输入快递" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input v-model="form.deliveryNum" placeholder="请输入单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralOrder, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder } from "@/api/system/IntegralOrder"
|
||||
import request from "@/utils/request"
|
||||
|
||||
export default {
|
||||
name: "IntegralOrder",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分订单表格数据
|
||||
IntegralOrderList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
deliveryNum: null,
|
||||
status: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
userPhone: [
|
||||
{ required: true, message: "电话不能为空", trigger: "blur" }
|
||||
],
|
||||
userAddress: [
|
||||
{ required: true, message: "地址不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "商品不能为空", trigger: "blur" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "单价不能为空", trigger: "blur" }
|
||||
],
|
||||
totalPrice: [
|
||||
{ required: true, message: "总积分不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "1：待发货 2：待收货 3：已完成不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
users: [],
|
||||
serviceGoods: [],
|
||||
statusOptions: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getOptions()
|
||||
},
|
||||
methods: {
|
||||
getOptions() {
|
||||
request.get("/system/IntegralOrder/userOptions").then(res => { this.users = res.data || []; });
|
||||
request.get("/system/IntegralOrder/goodsOptions").then(res => { this.serviceGoods = res.data || []; });
|
||||
request.get("/system/IntegralOrder/statusOptions").then(res => { this.statusOptions = res.data || []; });
|
||||
},
|
||||
/** 查询积分订单列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralOrder(this.queryParams).then(response => {
|
||||
this.IntegralOrderList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
sku: null,
|
||||
num: null,
|
||||
price: null,
|
||||
totalPrice: null,
|
||||
status: null,
|
||||
deliveryId: null,
|
||||
deliveryNum: null,
|
||||
mark: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分订单"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralOrder(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) {
|
||||
updateIntegralOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralOrder(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 delIntegralOrder(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralOrder/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralOrder_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
<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="orderId">
|
||||
<el-input
|
||||
v-model="queryParams.orderId"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input
|
||||
v-model="queryParams.userPhone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input
|
||||
v-model="queryParams.userAddress"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="queryParams.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input
|
||||
v-model="queryParams.deliveryNum"
|
||||
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 v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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:IntegralOrder: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:IntegralOrder: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:IntegralOrder: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:IntegralOrder:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralOrderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="用户" align="center" prop="uid" />
|
||||
<el-table-column label="姓名" align="center" prop="userName" />
|
||||
<el-table-column label="电话" align="center" prop="userPhone" />
|
||||
<el-table-column label="地址" align="center" prop="userAddress" />
|
||||
<el-table-column label="商品" align="center" prop="productId" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="单价" align="center" prop="price" />
|
||||
<el-table-column label="总积分" align="center" prop="totalPrice" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:IntegralOrder:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralOrder: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="form.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input v-model="form.userPhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input v-model="form.userAddress" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="form.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</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="数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总积分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="快递" prop="deliveryId">
|
||||
<el-input v-model="form.deliveryId" placeholder="请输入快递" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input v-model="form.deliveryNum" placeholder="请输入单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralOrder, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder } from "@/api/system/IntegralOrder"
|
||||
import request from "@/utils/request"
|
||||
|
||||
export default {
|
||||
name: "IntegralOrder",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分订单表格数据
|
||||
IntegralOrderList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
deliveryNum: null,
|
||||
status: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
userPhone: [
|
||||
{ required: true, message: "电话不能为空", trigger: "blur" }
|
||||
],
|
||||
userAddress: [
|
||||
{ required: true, message: "地址不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "商品不能为空", trigger: "blur" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "单价不能为空", trigger: "blur" }
|
||||
],
|
||||
totalPrice: [
|
||||
{ required: true, message: "总积分不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "1：待发货 2：待收货 3：已完成不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
users: [],
|
||||
serviceGoods: [],
|
||||
statusOptions: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getOptions()
|
||||
},
|
||||
methods: {
|
||||
getOptions() {
|
||||
request.get("/system/IntegralOrder/userOptions").then(res => { this.users = res.data || []; });
|
||||
request.get("/system/IntegralOrder/goodsOptions").then(res => { this.serviceGoods = res.data || []; });
|
||||
request.get("/system/IntegralOrder/statusOptions").then(res => { this.statusOptions = res.data || []; });
|
||||
},
|
||||
/** 查询积分订单列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralOrder(this.queryParams).then(response => {
|
||||
this.IntegralOrderList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
sku: null,
|
||||
num: null,
|
||||
price: null,
|
||||
totalPrice: null,
|
||||
status: null,
|
||||
deliveryId: null,
|
||||
deliveryNum: null,
|
||||
mark: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分订单"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralOrder(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) {
|
||||
updateIntegralOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralOrder(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 delIntegralOrder(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralOrder/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralOrder_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,415 @@
|
|||
<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="orderId">
|
||||
<el-input
|
||||
v-model="queryParams.orderId"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input
|
||||
v-model="queryParams.userPhone"
|
||||
placeholder="请输入电话"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="queryParams.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input
|
||||
v-model="queryParams.deliveryNum"
|
||||
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 v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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:IntegralOrder: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:IntegralOrder: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:IntegralOrder: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:IntegralOrder:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="IntegralOrderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" prop="id" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="用户" align="center" prop="uid" />
|
||||
<el-table-column label="姓名" align="center" prop="userName" />
|
||||
<el-table-column label="电话" align="center" prop="userPhone" />
|
||||
<el-table-column label="地址" align="center" prop="userAddress" />
|
||||
<el-table-column label="商品" align="center" prop="productId" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="单价" align="center" prop="price" />
|
||||
<el-table-column label="总积分" align="center" prop="totalPrice" />
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:IntegralOrder:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:IntegralOrder: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="form.uid" placeholder="请选择用户" clearable filterable>
|
||||
<el-option v-for="item in users" :key="item.userId" :label="item.userName" :value="item.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="userPhone">
|
||||
<el-input v-model="form.userPhone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="userAddress">
|
||||
<el-input v-model="form.userAddress" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品" prop="productId">
|
||||
<el-select v-model="form.productId" placeholder="请选择商品" clearable filterable>
|
||||
<el-option v-for="item in serviceGoods" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</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="数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单价" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="总积分" prop="totalPrice">
|
||||
<el-input v-model="form.totalPrice" placeholder="请输入总积分" />
|
||||
</el-form-item>
|
||||
<el-form-item label="快递" prop="deliveryId">
|
||||
<el-input v-model="form.deliveryId" placeholder="请输入快递" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单号" prop="deliveryNum">
|
||||
<el-input v-model="form.deliveryNum" placeholder="请输入单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listIntegralOrder, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder } from "@/api/system/IntegralOrder"
|
||||
import request from "@/utils/request"
|
||||
|
||||
export default {
|
||||
name: "IntegralOrder",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 积分订单表格数据
|
||||
IntegralOrderList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
deliveryNum: null,
|
||||
status: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
userName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
userPhone: [
|
||||
{ required: true, message: "电话不能为空", trigger: "blur" }
|
||||
],
|
||||
userAddress: [
|
||||
{ required: true, message: "地址不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "商品不能为空", trigger: "blur" }
|
||||
],
|
||||
sku: [
|
||||
{ required: true, message: "规格不能为空", trigger: "blur" }
|
||||
],
|
||||
num: [
|
||||
{ required: true, message: "数量不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "单价不能为空", trigger: "blur" }
|
||||
],
|
||||
totalPrice: [
|
||||
{ required: true, message: "总积分不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "1：待发货 2：待收货 3：已完成不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
users: [],
|
||||
serviceGoods: [],
|
||||
statusOptions: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getOptions()
|
||||
},
|
||||
methods: {
|
||||
getOptions() {
|
||||
request.get("/system/IntegralOrder/userOptions").then(res => { this.users = res.data || []; });
|
||||
request.get("/system/IntegralOrder/goodsOptions").then(res => { this.serviceGoods = res.data || []; });
|
||||
request.get("/system/IntegralOrder/statusOptions").then(res => { this.statusOptions = res.data || []; });
|
||||
},
|
||||
/** 查询积分订单列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listIntegralOrder(this.queryParams).then(response => {
|
||||
this.IntegralOrderList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
userName: null,
|
||||
userPhone: null,
|
||||
userAddress: null,
|
||||
productId: null,
|
||||
sku: null,
|
||||
num: null,
|
||||
price: null,
|
||||
totalPrice: null,
|
||||
status: null,
|
||||
deliveryId: null,
|
||||
deliveryNum: null,
|
||||
mark: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加积分订单"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getIntegralOrder(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) {
|
||||
updateIntegralOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addIntegralOrder(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 delIntegralOrder(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/IntegralOrder/export', {
|
||||
...this.queryParams
|
||||
}, `IntegralOrder_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
<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="订单ID" prop="oid">
|
||||
<el-input
|
||||
v-model="queryParams.oid"
|
||||
placeholder="请输入订单ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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:PayMoneyLog: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:PayMoneyLog: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:PayMoneyLog: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:PayMoneyLog:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="PayMoneyLogList" @selection-change="handleSelectionChange" border>
|
||||
<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="uname" />
|
||||
<el-table-column label="订单ID" align="center" prop="ocode" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="price" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.price.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="mark" />
|
||||
<el-table-column label="支付时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:PayMoneyLog:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:PayMoneyLog: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单ID" prop="oid">
|
||||
<el-input v-model="form.oid" placeholder="请输入订单ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择支付时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPayMoneyLog, getPayMoneyLog, delPayMoneyLog, addPayMoneyLog, updatePayMoneyLog,getUserDataList } from "@/api/system/PayMoneyLog"
|
||||
|
||||
export default {
|
||||
name: "PayMoneyLog",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// 支付记录表格数据
|
||||
PayMoneyLogList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
oid: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
price: null,
|
||||
mark: null,
|
||||
payTime: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oid: [
|
||||
{ required: true, message: "订单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
mark: [
|
||||
{ required: true, message: "备注不能为空", trigger: "blur" }
|
||||
],
|
||||
payTime: [
|
||||
{ required: true, message: "支付时间不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询支付记录列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listPayMoneyLog(this.queryParams).then(response => {
|
||||
this.PayMoneyLogList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
oid: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
price: null,
|
||||
mark: null,
|
||||
payTime: 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
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加支付记录"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getPayMoneyLog(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) {
|
||||
updatePayMoneyLog(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addPayMoneyLog(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 delPayMoneyLog(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/PayMoneyLog/export', {
|
||||
...this.queryParams
|
||||
}, `PayMoneyLog_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
<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="oid">
|
||||
<el-input
|
||||
v-model="queryParams.oid"
|
||||
placeholder="请输入订单ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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:PayMoneyLog: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:PayMoneyLog: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:PayMoneyLog: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:PayMoneyLog:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="PayMoneyLogList" @selection-change="handleSelectionChange" border>
|
||||
<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="uname" />
|
||||
<el-table-column label="订单ID" align="center" prop="ocode" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="price" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.price.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="mark" />
|
||||
<el-table-column label="支付时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:PayMoneyLog:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:PayMoneyLog: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="订单ID" prop="oid">
|
||||
<el-input v-model="form.oid" placeholder="请输入订单ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="mark">
|
||||
<el-input v-model="form.mark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择支付时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listPayMoneyLog, getPayMoneyLog, delPayMoneyLog, addPayMoneyLog, updatePayMoneyLog,getUserDataList } from "@/api/system/PayMoneyLog"
|
||||
|
||||
export default {
|
||||
name: "PayMoneyLog",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// 支付记录表格数据
|
||||
PayMoneyLogList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
oid: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
price: null,
|
||||
mark: null,
|
||||
payTime: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oid: [
|
||||
{ required: true, message: "订单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
mark: [
|
||||
{ required: true, message: "备注不能为空", trigger: "blur" }
|
||||
],
|
||||
payTime: [
|
||||
{ required: true, message: "支付时间不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询支付记录列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listPayMoneyLog(this.queryParams).then(response => {
|
||||
this.PayMoneyLogList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
oid: null,
|
||||
orderId: null,
|
||||
uid: null,
|
||||
price: null,
|
||||
mark: null,
|
||||
payTime: 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
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加支付记录"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getPayMoneyLog(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) {
|
||||
updatePayMoneyLog(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addPayMoneyLog(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 delPayMoneyLog(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/PayMoneyLog/export', {
|
||||
...this.queryParams
|
||||
}, `PayMoneyLog_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<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="typeId">
|
||||
<el-input
|
||||
v-model="queryParams.typeId"
|
||||
placeholder="请输入类型"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<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="unit">
|
||||
<el-input
|
||||
v-model="queryParams.unit"
|
||||
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:QuoteCraft: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:QuoteCraft: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:QuoteCraft: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:QuoteCraft:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="QuoteCraftList" @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="serviceName" />
|
||||
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="价格" align="center" width="75" prop="price" />
|
||||
<el-table-column label="单位" align="center" width="75" prop="unit" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="130">
|
||||
<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="130">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150" 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:QuoteCraft:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:QuoteCraft: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="服务" prop="goodId">
|
||||
<el-input v-model="form.goodId" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeId">
|
||||
<el-input v-model="form.typeId" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuoteCraft, getQuoteCraft, delQuoteCraft, addQuoteCraft, updateQuoteCraft } from "@/api/system/QuoteCraft"
|
||||
|
||||
export default {
|
||||
name: "QuoteCraft",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 项目报价--服务工艺表格数据
|
||||
QuoteCraftList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
goodId: [
|
||||
{ required: true, message: "服务不能为空", trigger: "blur" }
|
||||
],
|
||||
typeId: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "价格不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询项目报价--服务工艺列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listQuoteCraft(this.queryParams).then(response => {
|
||||
this.QuoteCraftList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加项目报价--服务工艺"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getQuoteCraft(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) {
|
||||
updateQuoteCraft(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addQuoteCraft(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 delQuoteCraft(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/QuoteCraft/export', {
|
||||
...this.queryParams
|
||||
}, `QuoteCraft_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<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="goodId">
|
||||
<el-select v-model="queryParams.goodId" filterable placeholder="请选择服务项目" clearable>
|
||||
<el-option
|
||||
v-for="type in typeDataList"
|
||||
:key="type.id"
|
||||
:label="type.title"
|
||||
:value="type.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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:QuoteCraft: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:QuoteCraft: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:QuoteCraft: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:QuoteCraft:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="QuoteCraftList" @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="serviceName" />
|
||||
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="价格" align="center" width="75" prop="price" />
|
||||
<el-table-column label="单位" align="center" width="75" prop="unit" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="130">
|
||||
<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="130">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150" 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:QuoteCraft:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:QuoteCraft: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="服务" prop="goodId">
|
||||
<el-input v-model="form.goodId" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeId">
|
||||
<el-input v-model="form.typeId" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuoteCraft, getQuoteCraft, delQuoteCraft, addQuoteCraft, updateQuoteCraft } from "@/api/system/QuoteCraft"
|
||||
|
||||
export default {
|
||||
name: "QuoteCraft",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
typeDataList: [],
|
||||
// 项目报价--服务工艺表格数据
|
||||
QuoteCraftList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
goodId: [
|
||||
{ required: true, message: "服务不能为空", trigger: "blur" }
|
||||
],
|
||||
typeId: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "价格不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询项目报价--服务工艺列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listQuoteCraft(this.queryParams).then(response => {
|
||||
this.QuoteCraftList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加项目报价--服务工艺"
|
||||
},
|
||||
getTypeList() {
|
||||
getGoodsDataList().then(response => {
|
||||
this.typeDataList = response.data;
|
||||
})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getQuoteCraft(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) {
|
||||
updateQuoteCraft(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addQuoteCraft(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 delQuoteCraft(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/QuoteCraft/export', {
|
||||
...this.queryParams
|
||||
}, `QuoteCraft_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<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="goodId">
|
||||
<el-select v-model="queryParams.goodId" filterable placeholder="请选择服务项目" clearable>
|
||||
<el-option
|
||||
v-for="type in typeDataList"
|
||||
:key="type.id"
|
||||
:label="type.title"
|
||||
:value="type.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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:QuoteCraft: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:QuoteCraft: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:QuoteCraft: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:QuoteCraft:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="QuoteCraftList" @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="serviceName" />
|
||||
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="价格" align="center" width="75" prop="price" />
|
||||
<el-table-column label="单位" align="center" width="75" prop="unit" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="130">
|
||||
<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="130">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150" 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:QuoteCraft:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:QuoteCraft: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="服务" prop="goodId">
|
||||
<el-input v-model="form.goodId" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeId">
|
||||
<el-input v-model="form.typeId" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuoteCraft, getQuoteCraft, delQuoteCraft, addQuoteCraft, updateQuoteCraft } from "@/api/system/QuoteCraft"
|
||||
import { getGoodsDataList } from "@/api/system/QuoteType"
|
||||
|
||||
export default {
|
||||
name: "QuoteCraft",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
typeDataList: [],
|
||||
// 项目报价--服务工艺表格数据
|
||||
QuoteCraftList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
goodId: [
|
||||
{ required: true, message: "服务不能为空", trigger: "blur" }
|
||||
],
|
||||
typeId: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "价格不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询项目报价--服务工艺列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listQuoteCraft(this.queryParams).then(response => {
|
||||
this.QuoteCraftList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加项目报价--服务工艺"
|
||||
},
|
||||
getTypeList() {
|
||||
getGoodsDataList().then(response => {
|
||||
this.typeDataList = response.data;
|
||||
})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getQuoteCraft(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) {
|
||||
updateQuoteCraft(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addQuoteCraft(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 delQuoteCraft(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/QuoteCraft/export', {
|
||||
...this.queryParams
|
||||
}, `QuoteCraft_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<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="goodId">
|
||||
<el-select v-model="queryParams.goodId" filterable placeholder="请选择服务项目" clearable>
|
||||
<el-option
|
||||
v-for="type in typeDataList"
|
||||
:key="type.id"
|
||||
:label="type.title"
|
||||
:value="type.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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:QuoteCraft: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:QuoteCraft: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:QuoteCraft: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:QuoteCraft:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="QuoteCraftList" @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="serviceName" />
|
||||
|
||||
<el-table-column label="标题" align="center" prop="title" />
|
||||
<el-table-column label="价格" align="center" width="75" prop="price" />
|
||||
<el-table-column label="单位" align="center" width="75" prop="unit" />
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="130">
|
||||
<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="130">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="150" 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:QuoteCraft:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:QuoteCraft: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="服务" prop="goodId">
|
||||
<el-input v-model="form.goodId" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="typeId">
|
||||
<el-input v-model="form.typeId" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="form.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入单位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuoteCraft, getQuoteCraft, delQuoteCraft, addQuoteCraft, updateQuoteCraft } from "@/api/system/QuoteCraft"
|
||||
import { getGoodsDataList } from "@/api/system/QuoteType"
|
||||
|
||||
export default {
|
||||
name: "QuoteCraft",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
typeDataList: [],
|
||||
// 项目报价--服务工艺表格数据
|
||||
QuoteCraftList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
goodId: [
|
||||
{ required: true, message: "服务不能为空", trigger: "blur" }
|
||||
],
|
||||
typeId: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
title: [
|
||||
{ required: true, message: "标题不能为空", trigger: "blur" }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: "价格不能为空", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getTypeList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询项目报价--服务工艺列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listQuoteCraft(this.queryParams).then(response => {
|
||||
this.QuoteCraftList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
goodId: null,
|
||||
typeId: null,
|
||||
title: null,
|
||||
price: null,
|
||||
unit: 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
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加项目报价--服务工艺"
|
||||
},
|
||||
getTypeList() {
|
||||
getGoodsDataList().then(response => {
|
||||
this.typeDataList = response.data;
|
||||
})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getQuoteCraft(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) {
|
||||
updateQuoteCraft(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addQuoteCraft(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 delQuoteCraft(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/QuoteCraft/export', {
|
||||
...this.queryParams
|
||||
}, `QuoteCraft_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,417 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort" />
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse" />
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,478 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
</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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,478 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'sort', '排序')">{{ scope.row.sort }}</span>
|
||||
</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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,493 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<span 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>
|
||||
</span>
|
||||
</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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,493 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<span 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>
|
||||
</span>
|
||||
</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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<span style="cursor:pointer;color:#409EFF;display:inline-block;">
|
||||
<span @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,496 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,496 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,496 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,494 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,496 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,509 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'type', '浏览量')">{{ scope.row.type }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,499 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,498 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,498 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;white-space:nowrap;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,498 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;white-space:nowrap;">
|
||||
<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="状态" width="85" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div >
|
||||
<div >
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,504 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div >
|
||||
<div >
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">
|
||||
|
||||
{{ scope.row.sort }}
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;align-items:center;justify-content:center;width:80px;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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;flex:1;margin-left:4px;height:0;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
</span>
|
||||
<svg @click="openEditDialog(scope.row, 'type', '类型')" 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" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<span style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg 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>
|
||||
</span>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg 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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg 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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:10px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:10px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:2px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:10px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:10px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="14" height="14" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:8px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:10px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="20" height="20" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:8px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:10px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="20" height="20" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:4px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:6px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,501 @@
|
|||
<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="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input
|
||||
v-model="queryParams.browse"
|
||||
placeholder="请输入浏览量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 button-group">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:ServiceCate: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:ServiceCate: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:ServiceCate: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:ServiceCate:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ServiceCateList" @selection-change="handleSelectionChange" stripe highlight-current-row border style="margin-bottom: 20px;">
|
||||
<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="title" />
|
||||
<el-table-column label="图标" align="center" prop="icon" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.icon" :width="50" :height="50"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" align="center" prop="sort">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-flex;flex-direction:column;align-items:center;width:60px;">
|
||||
<div style="display:flex;align-items:center;white-space:nowrap;">
|
||||
<span @click="openEditDialog(scope.row, 'sort', '排序')" style="cursor:pointer;color:#409EFF;">{{ 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>
|
||||
<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="handlefenleiStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="浏览量" align="center" prop="browse">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;">
|
||||
<span @click="openEditDialog(scope.row, 'browse', '浏览量')">{{ scope.row.browse }}</span>
|
||||
<svg @click="openEditDialog(scope.row, 'browse', '浏览量')" 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" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<div style="display:inline-block;cursor:pointer;color:#409EFF;line-height:1;">
|
||||
<div style="vertical-align:middle;display: flex;" @click="openEditDialog(scope.row, 'type', '类型')">
|
||||
<dict-tag :options="dict.type.service_sate_type" :value="scope.row.type"/>
|
||||
<svg width="20" height="20" viewBox="0 0 1024 1024" fill="#bbb" style="margin-left:4px;margin-top:4px;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>
|
||||
|
||||
<div style="border-bottom:1px dashed #bbb;width:100%;margin-top:6px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
|
||||
<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="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:ServiceCate:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:ServiceCate: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="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="dialog-form">
|
||||
<el-form-item label="名称" prop="title">
|
||||
<el-input v-model="form.title" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<image-upload v-model="form.icon"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="浏览量" prop="browse">
|
||||
<el-input v-model="form.browse" placeholder="请输入浏览量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer right-align">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="editDialogVisible" :title="'编辑' + editFieldLabel" width="300px">
|
||||
<el-form>
|
||||
<el-form-item :label="editFieldLabel">
|
||||
<el-radio-group v-if="editField === 'type'" v-model="editFieldValue">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.service_sate_type"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-input v-else 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 { listServiceCate, getServiceCate, delServiceCate, addServiceCate, updateServiceCate,changefenleiStatus} from "@/api/system/ServiceCate"
|
||||
export default {
|
||||
name: "ServiceCate",
|
||||
dicts: ['service_sate_status', 'service_sate_type'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 服务分类表格数据
|
||||
ServiceCateList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: "名称不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "排序不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态1：打开 0：关闭不能为空", trigger: "change" }
|
||||
],
|
||||
browse: [
|
||||
{ required: true, message: "浏览量不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型1：服务 2：商城不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
editFieldValue: '',
|
||||
editField: '',
|
||||
editFieldLabel: '',
|
||||
editRow: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务分类列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listServiceCate(this.queryParams).then(response => {
|
||||
this.ServiceCateList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
title: null,
|
||||
icon: null,
|
||||
sort: null,
|
||||
status: null,
|
||||
browse: null,
|
||||
type: null,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
deletedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 任务状态修改
|
||||
handlefenleiStatusChange(row) {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.title + '"状态吗？').then(function() {
|
||||
return changefenleiStatus(row.id, row.status)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功")
|
||||
}).catch(function() {
|
||||
row.status = row.status === "0" ? "1" : "0"
|
||||
})
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加服务分类"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getServiceCate(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) {
|
||||
updateServiceCate(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addServiceCate(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 delServiceCate(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/ServiceCate/export', {
|
||||
...this.queryParams
|
||||
}, `ServiceCate_${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 = ['sort', 'browse', 'type'];
|
||||
const value = numberFields.includes(this.editField)
|
||||
? Number(this.editFieldValue)
|
||||
: this.editFieldValue;
|
||||
const payload = {
|
||||
id: this.editRow.id,
|
||||
[this.editField]: value
|
||||
};
|
||||
try {
|
||||
await updateServiceCate(payload);
|
||||
this.$message.success('修改成功');
|
||||
this.editDialogVisible = false;
|
||||
this.getList();
|
||||
} catch (e) {
|
||||
this.$message.error('修改失败');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 24px 32px 16px 32px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
.button-group .el-button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.el-table {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table th, .el-table td {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.dialog-form .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 320px;
|
||||
}
|
||||
.dialog-footer.right-align {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.app-container {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.el-form-item .el-input, .el-form-item .el-select {
|
||||
width: 100px;
|
||||
}
|
||||
.dialog-form .el-input, .dialog-form .el-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
<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="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间">
|
||||
<el-date-picker
|
||||
v-model="daterangePayTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></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:transfer: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:transfer: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:transfer: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:transfer:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="85" prop="id" />
|
||||
<el-table-column label="用户" align="center" prop="uname" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="money" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.money.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="是否到账" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.money_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="到账时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发起时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:transfer:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:transfer: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改wechat_transfer对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信批次单号" prop="batchId">
|
||||
<el-input v-model="form.batchId" placeholder="请输入微信批次单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="money">
|
||||
<el-input v-model="form.money" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="openid">
|
||||
<el-input v-model="form.openid" placeholder="请输入${comment}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0：未到账" prop="paid">
|
||||
<el-input v-model="form.paid" placeholder="请输入0：未到账" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择到账时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="time">
|
||||
<el-input v-model="form.time" placeholder="请输入操作时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTransfer, getTransfer, delTransfer, addTransfer, updateTransfer,getUserDataList} from "@/api/system/transfer"
|
||||
export default {
|
||||
name: "Transfer",
|
||||
dicts: ['money_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// wechat_transfer表格数据
|
||||
transferList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// $comment时间范围
|
||||
daterangePayTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
status: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
openid: [
|
||||
{ required: true, message: "$comment不能为空", trigger: "blur" }
|
||||
],
|
||||
paid: [
|
||||
{ required: true, message: "0：未到账不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询wechat_transfer列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.params = {}
|
||||
if (null != this.daterangePayTime && '' != this.daterangePayTime) {
|
||||
this.queryParams.params["beginPayTime"] = this.daterangePayTime[0]
|
||||
this.queryParams.params["endPayTime"] = this.daterangePayTime[1]
|
||||
}
|
||||
listTransfer(this.queryParams).then(response => {
|
||||
this.transferList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
money: null,
|
||||
status: null,
|
||||
orderId: null,
|
||||
openid: null,
|
||||
paid: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangePayTime = []
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加wechat_transfer"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getTransfer(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改wechat_transfer"
|
||||
})
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除wechat_transfer编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delTransfer(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/transfer/export', {
|
||||
...this.queryParams
|
||||
}, `transfer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,414 @@
|
|||
<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="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="金额" prop="priceRange">
|
||||
<el-input
|
||||
v-model="queryParams.priceMin"
|
||||
placeholder="最低"
|
||||
style="width: 100px; margin-right: 10px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px;">-</span>
|
||||
<el-input
|
||||
v-model="queryParams.priceMax"
|
||||
placeholder="最高"
|
||||
style="width: 100px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间">
|
||||
<el-date-picker
|
||||
v-model="daterangePayTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></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:transfer: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:transfer: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:transfer: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:transfer:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="85" prop="id" />
|
||||
<el-table-column label="用户" align="center" prop="uname" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="money" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.money.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="是否到账" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.money_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="到账时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发起时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:transfer:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:transfer: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改wechat_transfer对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信批次单号" prop="batchId">
|
||||
<el-input v-model="form.batchId" placeholder="请输入微信批次单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="money">
|
||||
<el-input v-model="form.money" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="openid">
|
||||
<el-input v-model="form.openid" placeholder="请输入${comment}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0：未到账" prop="paid">
|
||||
<el-input v-model="form.paid" placeholder="请输入0：未到账" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择到账时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="time">
|
||||
<el-input v-model="form.time" placeholder="请输入操作时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTransfer, getTransfer, delTransfer, addTransfer, updateTransfer,getUserDataList} from "@/api/system/transfer"
|
||||
export default {
|
||||
name: "Transfer",
|
||||
dicts: ['money_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// wechat_transfer表格数据
|
||||
transferList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// $comment时间范围
|
||||
daterangePayTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
priceMin: null,
|
||||
priceMax: null,
|
||||
pageSize: 10,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
status: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
openid: [
|
||||
{ required: true, message: "$comment不能为空", trigger: "blur" }
|
||||
],
|
||||
paid: [
|
||||
{ required: true, message: "0：未到账不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询wechat_transfer列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.params = {}
|
||||
if (null != this.daterangePayTime && '' != this.daterangePayTime) {
|
||||
this.queryParams.params["beginPayTime"] = this.daterangePayTime[0]
|
||||
this.queryParams.params["endPayTime"] = this.daterangePayTime[1]
|
||||
}
|
||||
listTransfer(this.queryParams).then(response => {
|
||||
this.transferList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
money: null,
|
||||
status: null,
|
||||
orderId: null,
|
||||
openid: null,
|
||||
paid: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangePayTime = []
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加wechat_transfer"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getTransfer(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改wechat_transfer"
|
||||
})
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除wechat_transfer编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delTransfer(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/transfer/export', {
|
||||
...this.queryParams
|
||||
}, `transfer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,414 @@
|
|||
<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="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="金额" prop="priceRange">
|
||||
<el-input
|
||||
v-model="queryParams.priceMin"
|
||||
placeholder="最低"
|
||||
style="width: 100px; margin-right: 10px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px;">-</span>
|
||||
<el-input
|
||||
v-model="queryParams.priceMax"
|
||||
placeholder="最高"
|
||||
style="width: 100px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间">
|
||||
<el-date-picker
|
||||
v-model="daterangePayTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></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:transfer: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:transfer: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:transfer: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:transfer:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="85" prop="id" />
|
||||
<el-table-column label="用户" align="center" prop="uname" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="money" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.money.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="是否到账" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.money_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="到账时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发起时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:transfer:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:transfer: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改wechat_transfer对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信批次单号" prop="batchId">
|
||||
<el-input v-model="form.batchId" placeholder="请输入微信批次单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="money">
|
||||
<el-input v-model="form.money" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="openid">
|
||||
<el-input v-model="form.openid" placeholder="请输入${comment}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0：未到账" prop="paid">
|
||||
<el-input v-model="form.paid" placeholder="请输入0：未到账" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择到账时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="time">
|
||||
<el-input v-model="form.time" placeholder="请输入操作时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTransfer, getTransfer, delTransfer, addTransfer, updateTransfer,getUserDataList} from "@/api/system/transfer"
|
||||
export default {
|
||||
name: "Transfer",
|
||||
dicts: ['money_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// wechat_transfer表格数据
|
||||
transferList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// $comment时间范围
|
||||
daterangePayTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
priceMin: null,
|
||||
priceMax: null,
|
||||
pageSize: 10,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
status: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
openid: [
|
||||
{ required: true, message: "$comment不能为空", trigger: "blur" }
|
||||
],
|
||||
paid: [
|
||||
{ required: true, message: "0：未到账不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询wechat_transfer列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.params = {}
|
||||
if (null != this.daterangePayTime && '' != this.daterangePayTime) {
|
||||
this.queryParams.params["beginPayTime"] = this.daterangePayTime[0]
|
||||
this.queryParams.params["endPayTime"] = this.daterangePayTime[1]
|
||||
}
|
||||
listTransfer(this.queryParams).then(response => {
|
||||
this.transferList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
money: null,
|
||||
status: null,
|
||||
orderId: null,
|
||||
openid: null,
|
||||
paid: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangePayTime = []
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加wechat_transfer"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getTransfer(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改wechat_transfer"
|
||||
})
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除wechat_transfer编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delTransfer(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/transfer/export', {
|
||||
...this.queryParams
|
||||
}, `transfer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
<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="uid">
|
||||
<el-select v-model="queryParams.uid" filterable placeholder="请选择用户" clearable>
|
||||
<el-option
|
||||
v-for="user in userDataList"
|
||||
:key="user.id"
|
||||
:label="user.name"
|
||||
:value="user.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="金额" prop="priceRange">
|
||||
<el-input
|
||||
v-model="queryParams.priceMin"
|
||||
placeholder="最低"
|
||||
style="width: 100px; margin-right: 10px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px;">-</span>
|
||||
<el-input
|
||||
v-model="queryParams.priceMax"
|
||||
placeholder="最高"
|
||||
style="width: 100px;"
|
||||
type="number"
|
||||
min="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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:transfer: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:transfer: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:transfer: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:transfer:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange" border>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="ID" align="center" width="85" prop="id" />
|
||||
<el-table-column label="用户" align="center" prop="uname" />
|
||||
<el-table-column label="金额" width="120px" align="left" prop="money" >
|
||||
<template slot-scope="scope">
|
||||
<span >￥{{scope.row.money.toFixed(2)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="是否到账" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.money_status" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="到账时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发起时间" align="center" prop="payTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.time, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" 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:transfer:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:transfer: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"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改wechat_transfer对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户" prop="uid">
|
||||
<el-input v-model="form.uid" placeholder="请输入用户" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信批次单号" prop="batchId">
|
||||
<el-input v-model="form.batchId" placeholder="请输入微信批次单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="money">
|
||||
<el-input v-model="form.money" placeholder="请输入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.money_status"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入订单号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="openid">
|
||||
<el-input v-model="form.openid" placeholder="请输入${comment}" />
|
||||
</el-form-item>
|
||||
<el-form-item label="0：未到账" prop="paid">
|
||||
<el-input v-model="form.paid" placeholder="请输入0：未到账" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到账时间" prop="payTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.payTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择到账时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="time">
|
||||
<el-input v-model="form.time" placeholder="请输入操作时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="createdAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.createdAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="${comment}" prop="updatedAt">
|
||||
<el-date-picker clearable
|
||||
v-model="form.updatedAt"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择${comment}">
|
||||
</el-date-picker>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTransfer, getTransfer, delTransfer, addTransfer, updateTransfer,getUserDataList} from "@/api/system/transfer"
|
||||
export default {
|
||||
name: "Transfer",
|
||||
dicts: ['money_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
userDataList: [],
|
||||
// wechat_transfer表格数据
|
||||
transferList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// $comment时间范围
|
||||
daterangePayTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
priceMin: null,
|
||||
priceMax: null,
|
||||
pageSize: 10,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
status: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uid: [
|
||||
{ required: true, message: "用户不能为空", trigger: "blur" }
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: "金额不能为空", trigger: "blur" }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "change" }
|
||||
],
|
||||
orderId: [
|
||||
{ required: true, message: "订单号不能为空", trigger: "blur" }
|
||||
],
|
||||
openid: [
|
||||
{ required: true, message: "$comment不能为空", trigger: "blur" }
|
||||
],
|
||||
paid: [
|
||||
{ required: true, message: "0：未到账不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserDataList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询wechat_transfer列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.queryParams.params = {}
|
||||
if (null != this.daterangePayTime && '' != this.daterangePayTime) {
|
||||
this.queryParams.params["beginPayTime"] = this.daterangePayTime[0]
|
||||
this.queryParams.params["endPayTime"] = this.daterangePayTime[1]
|
||||
}
|
||||
listTransfer(this.queryParams).then(response => {
|
||||
this.transferList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uid: null,
|
||||
batchId: null,
|
||||
money: null,
|
||||
status: null,
|
||||
orderId: null,
|
||||
openid: null,
|
||||
paid: null,
|
||||
payTime: null,
|
||||
time: null,
|
||||
createdAt: null,
|
||||
updatedAt: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangePayTime = []
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加wechat_transfer"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getTransfer(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改wechat_transfer"
|
||||
})
|
||||
},
|
||||
|
||||
getUserDataList () {
|
||||
getUserDataList().then(response => {
|
||||
this.userDataList = response.data
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addTransfer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除wechat_transfer编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delTransfer(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('system/transfer/export', {
|
||||
...this.queryParams
|
||||
}, `transfer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
# AppletController 统一响应处理修改说明
|
||||
|
||||
## 修改概述
|
||||
|
||||
对 `AppletController.java` 中的小程序接口进行了统一响应格式处理，按照以下规范：
|
||||
|
||||
- **成功响应**: code: 200
|
||||
- **业务提示**: code: 422
|
||||
- **Token验证失败**: code: 332
|
||||
- **系统错误**: code: 500
|
||||
|
||||
## 新增统一响应方法
|
||||
|
||||
在 `AppletControllerUtil.java` 中新增了以下统一响应处理方法：
|
||||
|
||||
### 1. 成功响应方法
|
||||
```java
|
||||
// 成功响应 - code: 200
|
||||
public static AjaxResult appletSuccess(Object data)
|
||||
public static AjaxResult appletSuccess(String message)
|
||||
public static AjaxResult appletSuccess()
|
||||
```
|
||||
|
||||
### 2. 业务提示方法
|
||||
```java
|
||||
// 业务提示响应 - code: 422
|
||||
public static AjaxResult appletWarning(String message)
|
||||
public static AjaxResult appletWarning(String message, Object data)
|
||||
```
|
||||
|
||||
### 3. Token验证失败方法
|
||||
```java
|
||||
// Token验证失败响应 - code: 332
|
||||
public static AjaxResult appletUnauthorized()
|
||||
public static AjaxResult appletUnauthorized(String message)
|
||||
```
|
||||
|
||||
### 4. 系统错误方法
|
||||
```java
|
||||
// 系统错误响应 - code: 500
|
||||
public static AjaxResult appletError(String message)
|
||||
```
|
||||
|
||||
## 已修改的方法示例
|
||||
|
||||
### 1. 服务分类接口
|
||||
```java
|
||||
// 修改前
|
||||
return success(categoryList);
|
||||
return error("获取服务分类列表失败：" + e.getMessage());
|
||||
|
||||
// 修改后
|
||||
return AppletControllerUtil.appletSuccess(categoryList);
|
||||
return AppletControllerUtil.appletError("获取服务分类列表失败：" + e.getMessage());
|
||||
```
|
||||
|
||||
### 2. Token验证相关
|
||||
```java
|
||||
// 修改前
|
||||
return error("用户未登录或token无效");
|
||||
|
||||
// 修改后
|
||||
return AppletControllerUtil.appletUnauthorized();
|
||||
```
|
||||
|
||||
### 3. 业务验证相关
|
||||
```java
|
||||
// 修改前
|
||||
return error("地址ID无效");
|
||||
return error("参数格式错误");
|
||||
|
||||
// 修改后
|
||||
return AppletControllerUtil.appletWarning("地址ID无效");
|
||||
return AppletControllerUtil.appletWarning("参数格式错误");
|
||||
```
|
||||
|
||||
### 4. 积分兑换特殊处理
|
||||
```java
|
||||
// 修改前
|
||||
AjaxResult result = AjaxResult.error("积分不足");
|
||||
result.put("code", 422);
|
||||
result.put("data", new ArrayList<>());
|
||||
return result;
|
||||
|
||||
// 修改后
|
||||
return AppletControllerUtil.appletWarning("积分不足");
|
||||
```
|
||||
|
||||
## 修改范围
|
||||
|
||||
### 已完成修改的方法：
|
||||
1. `getInfo()` - 获取服务分类列表
|
||||
2. `config()` - 获取系统配置信息
|
||||
3. `getconfig()` - 获取默认配置信息
|
||||
4. `getaddresslist()` - 查询用户收货地址列表
|
||||
5. `getAddressInfo()` - 根据地址ID查询用户收货地址详情
|
||||
6. `editAddress()` - 修改用户收货地址
|
||||
7. `addAddress()` - 新增用户收货地址
|
||||
8. `exchangeIntegralProduct()` - 积分商品兑换接口
|
||||
|
||||
### 待修改的方法（需要继续处理）：
|
||||
由于文件较大，还有以下方法需要继续修改：
|
||||
- 售后返修相关接口
|
||||
- 订单查询相关接口
|
||||
- 支付相关接口
|
||||
- 用户登录验证接口
|
||||
- 商品查询相关接口
|
||||
- 优惠券相关接口
|
||||
- 积分日志相关接口
|
||||
- 通知订阅相关接口
|
||||
|
||||
## 统一响应格式
|
||||
|
||||
### 成功响应 (200)
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "OK",
|
||||
"data": {...}
|
||||
}
|
||||
```
|
||||
|
||||
### 业务提示 (422)
|
||||
```json
|
||||
{
|
||||
"code": 422,
|
||||
"msg": "提示信息",
|
||||
"data": []
|
||||
}
|
||||
```
|
||||
|
||||
### Token验证失败 (332)
|
||||
```json
|
||||
{
|
||||
"code": 332,
|
||||
"msg": "用户未登录或token无效，请重新登录",
|
||||
"data": []
|
||||
}
|
||||
```
|
||||
|
||||
### 系统错误 (500)
|
||||
```json
|
||||
{
|
||||
"code": 500,
|
||||
"msg": "系统错误信息",
|
||||
"data": []
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **Token验证失败**一律返回 332 状态码
|
||||
2. **业务验证失败**（如参数错误、数据不存在、权限不足）返回 422 状态码
|
||||
3. **系统异常**（如数据库异常、网络异常）返回 500 状态码
|
||||
4. **成功操作**返回 200 状态码
|
||||
5. **积分不足**等特殊业务场景也使用 422 状态码
|
||||
|
||||
## 下一步工作
|
||||
|
||||
需要继续对剩余的方法进行统一响应格式处理，确保所有小程序接口都使用统一的响应格式。
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@echo off
|
||||
chcp 65001
|
||||
set JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Duser.language=zh -Duser.country=CN
|
||||
echo 正在以UTF-8编码启动IDEA...
|
||||
echo 请用这个脚本启动IDEA来解决中文显示问题
|
||||
echo.
|
||||
echo 使用方法：
|
||||
echo 1. 将此文件复制到IDEA安装目录的bin文件夹中
|
||||
echo 2. 双击运行此文件来启动IDEA
|
||||
echo 3. 或者修改IDEA的桌面快捷方式指向此文件
|
||||
echo.
|
||||
pause
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"quill": "^1.3.7",
|
||||
"quill-image-resize-module": "^3.0.0",
|
||||
"vue-quill-editor": "^3.0.6"
|
||||
}
|
||||
}
|
||||
31
qodana.yaml
31
qodana.yaml
|
|
@ -1,31 +0,0 @@
|
|||
#-------------------------------------------------------------------------------#
|
||||
# Qodana analysis is configured by qodana.yaml file #
|
||||
# https://www.jetbrains.com/help/qodana/qodana-yaml.html #
|
||||
#-------------------------------------------------------------------------------#
|
||||
version: "1.0"
|
||||
|
||||
#Specify inspection profile for code analysis
|
||||
profile:
|
||||
name: qodana.starter
|
||||
|
||||
#Enable inspections
|
||||
#include:
|
||||
# - name: <SomeEnabledInspectionId>
|
||||
|
||||
#Disable inspections
|
||||
#exclude:
|
||||
# - name: <SomeDisabledInspectionId>
|
||||
# paths:
|
||||
# - <path/where/not/run/inspection>
|
||||
|
||||
projectJDK: "21" #(Applied in CI/CD pipeline)
|
||||
|
||||
#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
|
||||
#bootstrap: sh ./prepare-qodana.sh
|
||||
|
||||
#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
|
||||
#plugins:
|
||||
# - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
|
||||
|
||||
#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
|
||||
linter: jetbrains/qodana-jvm:2025.1
|
||||
|
|
@ -4,8 +4,6 @@ import java.util.ArrayList;
|
|||
import java.util.List;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
|
||||
import com.ruoyi.common.utils.spring.SpringUtils;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
|
|
@ -44,12 +42,6 @@ public class CommonController
|
|||
|
||||
private static final String FILE_DELIMETER = ",";
|
||||
|
||||
|
||||
private static QiniuConfig getQiniuConfig() {
|
||||
return SpringUtils.getBean(QiniuConfig.class);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 通用下载请求
|
||||
*
|
||||
|
|
@ -99,8 +91,7 @@ public class CommonController
|
|||
// 使用七牛云上传
|
||||
String fileUrl = QiniuUploadUtil.uploadFile(file);
|
||||
AjaxResult ajax = AjaxResult.success();
|
||||
ajax.put("url", fileUrl);
|
||||
ajax.put("EditorURL", "https://" + getQiniuConfig().getDomain() + "/" +fileUrl);
|
||||
ajax.put("url", fileUrl);
|
||||
ajax.put("fileName", fileUrl);
|
||||
ajax.put("newFileName", FileUtils.getName(file.getOriginalFilename()));
|
||||
ajax.put("originalFilename", file.getOriginalFilename());
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import org.springframework.web.bind.annotation.*;
|
|||
import javax.servlet.http.HttpServletRequest;
|
||||
import java.math.BigDecimal;
|
||||
import java.math.RoundingMode;
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.Date;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
|
|
@ -109,11 +108,11 @@ public class AppleMemberController extends BaseController {
|
|||
* @return 支付结果，包含prepayId等微信支付参数
|
||||
*/
|
||||
@PostMapping("/member/recharge/pay")
|
||||
public AjaxResult memberRechargePay(@RequestBody Map<String, Object> params,HttpServletRequest request) {
|
||||
public AjaxResult memberRechargePay(HttpServletRequest request) {
|
||||
try {
|
||||
// 1. 验证用户登录状态
|
||||
//Map<String, Object> params = new HashMap<>();
|
||||
//params.put("money", 300); // 测试用固定金额，实际应从请求参数获取
|
||||
Map<String, Object> params = new HashMap<>();
|
||||
params.put("money", 300); // 测试用固定金额，实际应从请求参数获取
|
||||
|
||||
String token = request.getHeader("token");
|
||||
Map<String, Object> userValidation = AppletLoginUtil.validateUserToken(token, usersService);
|
||||
|
|
@ -255,75 +254,15 @@ public class AppleMemberController extends BaseController {
|
|||
* @return 充值类目列表
|
||||
*/
|
||||
@GetMapping("/member/recharge/catalogue")
|
||||
public AjaxResult getRechargeCatalogue(HttpServletRequest request) {
|
||||
public AjaxResult getRechargeCatalogue() {
|
||||
try {
|
||||
|
||||
SimpleDateFormat sdfday = new SimpleDateFormat("yyyy-MM-dd");
|
||||
HomeUtril homeUtril = new HomeUtril();
|
||||
Map<String, Object> params = new HashMap<>();
|
||||
String token = request.getHeader("token");
|
||||
Map<String, Object> userValidation = AppletLoginUtil.validateUserToken(token, usersService);
|
||||
if (!(Boolean) userValidation.get("valid")) {
|
||||
return AppletControllerUtil.appletWarning("用户未登录或token无效");
|
||||
}
|
||||
|
||||
// 2. 获取用户信息
|
||||
Users user = (Users) userValidation.get("user");
|
||||
if (user == null) {
|
||||
return AppletControllerUtil.appletWarning("用户信息获取失败");
|
||||
}
|
||||
UserMemberRechargeProgram query = new UserMemberRechargeProgram();
|
||||
query.setStatus(0); // 0=启用状态
|
||||
query.setType(0); // 0=普通充值类型
|
||||
|
||||
List<UserMemberRechargeProgram> list = userMemberRechargeProgramService
|
||||
.selectUserMemberRechargeProgramList(query);
|
||||
params.put("balance", user.getBalance());
|
||||
params.put("ismember", user.getIsmember());
|
||||
params.put("member_begin",user.getMemberBegin() != null ? sdfday.format(user.getMemberBegin()) : null );
|
||||
params.put("member_end",user.getMemberEnd() != null ? sdfday.format(user.getMemberEnd()) : null );
|
||||
|
||||
// params.put("member_begin", user.getIsmember());
|
||||
// params.put("member_end", user.getIsmember());
|
||||
|
||||
int nu= homeUtril.getMemberType(user);
|
||||
if (nu==0){//新会员
|
||||
// 新增：根据会员状态查询充值项目
|
||||
Integer queryType = 1;
|
||||
UserMemberRechargeProgram query2 = new UserMemberRechargeProgram();
|
||||
query2.setType(queryType);
|
||||
query2.setStatus(0); // 只查启用
|
||||
java.util.List<UserMemberRechargeProgram> rechargePrograms = userMemberRechargeProgramService.selectUserMemberRechargeProgramList(query2);
|
||||
params.put("memberpay", rechargePrograms.getFirst());
|
||||
}
|
||||
if (nu==2){//续费会员
|
||||
// 新增：根据会员状态查询充值项目
|
||||
Integer queryType =2;
|
||||
UserMemberRechargeProgram query2 = new UserMemberRechargeProgram();
|
||||
query2.setType(queryType);
|
||||
query2.setStatus(0); // 只查启用
|
||||
java.util.List<UserMemberRechargeProgram> rechargePrograms = userMemberRechargeProgramService.selectUserMemberRechargeProgramList(query2);
|
||||
params.put("memberpay", rechargePrograms.getFirst());
|
||||
}
|
||||
if (nu==1){//已经是会员
|
||||
// 新增：根据会员状态查询充值项目
|
||||
Integer queryType =2;
|
||||
UserMemberRechargeProgram query2 = new UserMemberRechargeProgram();
|
||||
query2.setType(queryType);
|
||||
query2.setStatus(0); // 只查启用
|
||||
java.util.List<UserMemberRechargeProgram> rechargePrograms = userMemberRechargeProgramService.selectUserMemberRechargeProgramList(query2);
|
||||
params.put("memberpay", rechargePrograms.getFirst());
|
||||
}
|
||||
params.put("list", list);
|
||||
Map<String, Object> homeNoticeList = homeUtril.getConfigData("config_one");
|
||||
JSONObject js= JSONObject.parseObject(homeNoticeList.get("data").toString());
|
||||
params.put("notice", js.get("notice"));
|
||||
//公司简介
|
||||
params.put("member", homeUtril.getConfigData("config_five").get("data"));
|
||||
|
||||
|
||||
|
||||
return AppletControllerUtil.appletSuccess(params);
|
||||
return AppletControllerUtil.appletSuccess(list);
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("获取充值类目失败：" + e.getMessage());
|
||||
}
|
||||
|
|
@ -487,58 +426,6 @@ public class AppleMemberController extends BaseController {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询用户充值记录（只返回订单号和金额，带分页）
|
||||
* @param request HTTP请求对象（需要包含token）
|
||||
* @param page 页码（默认1）
|
||||
* @param limit 每页条数（默认10）
|
||||
* @return 订单号和金额列表
|
||||
*/
|
||||
@GetMapping("/member/recharge/simplelog")
|
||||
public AjaxResult getRechargeSimpleLog(HttpServletRequest request,
|
||||
@RequestParam(value = "page", defaultValue = "1") int page,
|
||||
@RequestParam(value = "limit", defaultValue = "10") int limit) {
|
||||
try {
|
||||
// 1. 验证分页参数
|
||||
Map<String, Object> pageValidation = PageUtil.validatePageParams(page, limit);
|
||||
if (!(Boolean) pageValidation.get("valid")) {
|
||||
return AppletControllerUtil.appletWarning((String) pageValidation.get("message"));
|
||||
}
|
||||
// 2. 验证用户登录状态
|
||||
String token = request.getHeader("token");
|
||||
Map<String, Object> userValidation = AppletLoginUtil.validateUserToken(token, usersService);
|
||||
if (!(Boolean) userValidation.get("valid")) {
|
||||
return AppletControllerUtil.appletWarning("用户未登录或token无效");
|
||||
}
|
||||
// 3. 获取用户信息
|
||||
Users user = (Users) userValidation.get("user");
|
||||
if (user == null) {
|
||||
return AppletControllerUtil.appletWarning("用户信息获取失败");
|
||||
}
|
||||
// 4. 设置分页参数
|
||||
com.github.pagehelper.PageHelper.startPage(page, limit);
|
||||
// 5. 查询充值记录
|
||||
UserMemberRechargeLog query = new UserMemberRechargeLog();
|
||||
query.setUid(Math.toIntExact(user.getId()));
|
||||
List<UserMemberRechargeLog> list = userMemberRechargeLogService.selectUserMemberRechargeLogList(query);
|
||||
// 6. 只返回订单号和金额
|
||||
// List<Map<String, Object>> result = new java.util.ArrayList<>();
|
||||
// for (UserMemberRechargeLog log : list) {
|
||||
// Map<String, Object> map = new java.util.HashMap<>();
|
||||
// map.put("orderid", log.getOrderid());
|
||||
// map.put("inmoney", log.getInmoney());
|
||||
// result.add(map);
|
||||
// }
|
||||
// 7. 构建分页响应
|
||||
TableDataInfo tableDataInfo = getDataTable(list);
|
||||
Map<String, Object> pageData = PageUtil.buildPageResponse(tableDataInfo, page, limit);
|
||||
//pageData.put("rows", result); // 用精简后的数据覆盖rows
|
||||
return AppletControllerUtil.appletSuccess(pageData);
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("获取充值记录失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 订单评价相关接口 ====================
|
||||
|
||||
/**
|
||||
|
|
@ -935,28 +822,24 @@ public class AppleMemberController extends BaseController {
|
|||
}
|
||||
|
||||
/**
|
||||
* 小程序用户余额日志查询接口（带分页）
|
||||
* 小程序用户余额日志查询接口
|
||||
*
|
||||
* 查询用户的余额变动日志
|
||||
* 调用工具类方法统一处理
|
||||
*
|
||||
* @param request HTTP请求对象（需要包含token）
|
||||
* @param params 查询参数，需包含 page/limit
|
||||
* @param params 查询参数
|
||||
* @return 余额日志列表
|
||||
*/
|
||||
@PostMapping("/user/balance/logs")
|
||||
public AjaxResult getBalanceLogList(HttpServletRequest request, @RequestBody Map<String, Object> params) {
|
||||
try {
|
||||
// 从请求体获取分页参数
|
||||
int page = params.get("page") != null ? Integer.parseInt(params.get("page").toString()) : 1;
|
||||
int limit = params.get("limit") != null ? Integer.parseInt(params.get("limit").toString()) : 10;
|
||||
// 验证分页参数
|
||||
Map<String, Object> pageValidation = PageUtil.validatePageParams(page, limit);
|
||||
if (!(Boolean) pageValidation.get("valid")) {
|
||||
return AppletControllerUtil.appletWarning((String) pageValidation.get("message"));
|
||||
}
|
||||
// 从请求头获取token
|
||||
String token = request.getHeader("token");
|
||||
// 调用工具类方法统一处理（保持原有4参调用）
|
||||
|
||||
// 调用工具类方法统一处理
|
||||
return AppletControllerUtil.getUserBalanceLogList(params, token, usersService, userMemnerConsumptionLogService);
|
||||
|
||||
} catch (Exception e) {
|
||||
System.err.println("查询用户余额日志异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("查询余额日志失败：" + e.getMessage());
|
||||
|
|
|
|||
|
|
@ -108,8 +108,6 @@ public class AppletController extends BaseController {
|
|||
private IGoodsOrderCursorService goodsOrderCursorService;
|
||||
@Autowired
|
||||
private IWorkerApplyService workerApplyService;
|
||||
@Autowired
|
||||
private IUserMemberRechargeProgramService userMemberRechargeProgramService;
|
||||
/**
|
||||
* 获取服务分类列表
|
||||
* 功能说明：
|
||||
|
|
@ -132,7 +130,6 @@ public class AppletController extends BaseController {
|
|||
// 1. 查询所有启用状态的服务分类
|
||||
ServiceCate serviceCateQuery = new ServiceCate();
|
||||
serviceCateQuery.setStatus(1L);
|
||||
serviceCateQuery.setType(1L);
|
||||
List<ServiceCate> allCategoryList = serviceCateService.selectServiceCateList(serviceCateQuery);
|
||||
|
||||
// 2. 分离一级分类和二级分类
|
||||
|
|
@ -1091,6 +1088,7 @@ public class AppletController extends BaseController {
|
|||
/**
|
||||
* 根据分类ID查询商品列表
|
||||
*
|
||||
* @param cateId 分类ID
|
||||
* @param request HTTP请求对象
|
||||
* @return 该分类下的商品列表
|
||||
* <p>
|
||||
|
|
@ -1101,58 +1099,29 @@ public class AppletController extends BaseController {
|
|||
* - 自动添加图片CDN前缀
|
||||
* - 无需用户登录验证
|
||||
*/
|
||||
@PostMapping(value = "/api/goods/cate")
|
||||
public AjaxResult getGoodsByCategory(@RequestBody Map<String, Object> params, HttpServletRequest request) {
|
||||
@GetMapping(value = "/api/goods/cate/{cateId}")
|
||||
public AjaxResult getGoodsByCategory(@PathVariable("cateId") Long cateId, HttpServletRequest request) {
|
||||
try {
|
||||
// 1. 获取分页参数
|
||||
int page = params.get("page") != null ? (Integer) params.get("page") : 1;
|
||||
int limit = params.get("limit") != null ? (Integer) params.get("limit") : 15;
|
||||
String cateId = params.get("cateId").toString();
|
||||
// // 1. 参数验证
|
||||
// if (cateId == null) {
|
||||
// return AppletControllerUtil.appletWarning("分类ID不能为空");
|
||||
// }
|
||||
|
||||
// 验证分页参数
|
||||
// if (page < 1) page = 1;
|
||||
// if (limit < 1) limit = 15;
|
||||
// if (limit > 100) limit = 100; // 限制最大每页数量
|
||||
|
||||
// 2. 设置分页参数
|
||||
PageHelper.startPage(page, limit);
|
||||
|
||||
// 3. 构建查询条件
|
||||
ServiceGoods queryGoods = new ServiceGoods();
|
||||
queryGoods.setStatus("1"); // 只查询启用状态的商品
|
||||
|
||||
// 判断是否查询全部商品
|
||||
boolean queryAll = "00".equals(cateId.trim()) || cateId.trim().isEmpty();
|
||||
|
||||
if (!queryAll) {
|
||||
// 验证分类ID格式
|
||||
Long categoryId;
|
||||
try {
|
||||
categoryId = Long.parseLong(cateId);
|
||||
if (categoryId <= 0) {
|
||||
return AppletControllerUtil.appletWarning("分类ID无效");
|
||||
}
|
||||
} catch (NumberFormatException e) {
|
||||
return AppletControllerUtil.appletWarning("分类ID格式错误");
|
||||
}
|
||||
|
||||
// 验证分类是否存在
|
||||
ServiceCate category = serviceCateService.selectServiceCateById(categoryId);
|
||||
if (category == null) {
|
||||
return AppletControllerUtil.appletWarning("分类不存在");
|
||||
}
|
||||
|
||||
queryGoods.setCateId(categoryId); // 根据分类ID查询
|
||||
// 参数验证
|
||||
if (cateId == null || cateId <= 0) {
|
||||
return AppletControllerUtil.appletWarning("分类ID无效");
|
||||
}
|
||||
|
||||
// 4. 查询商品列表
|
||||
// 验证分类是否存在
|
||||
ServiceCate category = serviceCateService.selectServiceCateById(cateId);
|
||||
if (category == null) {
|
||||
return AppletControllerUtil.appletWarning("分类不存在");
|
||||
}
|
||||
|
||||
// 构建查询条件
|
||||
ServiceGoods queryGoods = new ServiceGoods();
|
||||
queryGoods.setCateId(cateId); // 根据分类ID查询
|
||||
queryGoods.setStatus("1"); // 只查询启用状态的商品
|
||||
|
||||
// 查询该分类下的商品列表
|
||||
List<ServiceGoods> goodsList = serviceGoodsService.selectServiceGoodsList(queryGoods);
|
||||
|
||||
// 5. 构建返回数据
|
||||
// 构建返回数据
|
||||
List<Map<String, Object>> resultList = new ArrayList<>();
|
||||
for (ServiceGoods goods : goodsList) {
|
||||
Map<String, Object> goodsData = new HashMap<>();
|
||||
|
|
@ -1161,34 +1130,10 @@ public class AppletController extends BaseController {
|
|||
goodsData.put("icon", AppletControllerUtil.buildImageUrl(goods.getIcon()));
|
||||
goodsData.put("price", goods.getPrice() != null ? goods.getPrice().toString() : "0.00");
|
||||
goodsData.put("sales", goods.getSales() != null ? goods.getSales() : 0L);
|
||||
goodsData.put("cate_id", goods.getCateId());
|
||||
resultList.add(goodsData);
|
||||
}
|
||||
|
||||
// 6. 构建分页信息
|
||||
PageInfo<ServiceGoods> pageInfo = new PageInfo<>(goodsList);
|
||||
|
||||
// 7. 构建返回数据格式
|
||||
Map<String, Object> responseData = new HashMap<>();
|
||||
responseData.put("current_page", pageInfo.getPageNum());
|
||||
responseData.put("data", resultList);
|
||||
responseData.put("from", pageInfo.getStartRow());
|
||||
responseData.put("last_page", pageInfo.getPages());
|
||||
responseData.put("per_page", pageInfo.getPageSize());
|
||||
responseData.put("to", pageInfo.getEndRow());
|
||||
responseData.put("total", pageInfo.getTotal());
|
||||
|
||||
// 构建分页链接信息
|
||||
String baseUrl = "https://www.huafurenjia.cn/api/goods/cate/" + cateId;
|
||||
responseData.put("first_page_url", baseUrl + "?page=1");
|
||||
responseData.put("last_page_url", baseUrl + "?page=" + pageInfo.getPages());
|
||||
responseData.put("next_page_url", pageInfo.isHasNextPage() ?
|
||||
baseUrl + "?page=" + pageInfo.getNextPage() : null);
|
||||
responseData.put("prev_page_url", pageInfo.isHasPreviousPage() ?
|
||||
baseUrl + "?page=" + pageInfo.getPrePage() : null);
|
||||
responseData.put("path", baseUrl);
|
||||
|
||||
return AppletControllerUtil.appletSuccess(responseData);
|
||||
return AppletControllerUtil.appletSuccess(resultList);
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("查询分类商品失败：" + e.getMessage());
|
||||
}
|
||||
|
|
@ -1311,105 +1256,6 @@ public class AppletController extends BaseController {
|
|||
// 使用AppletLoginUtil执行完整的微信登录流程
|
||||
return AppletLoginUtil.executeWechatLogin(params, usersService);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// /**
|
||||
// * 获取用户基本信息接口
|
||||
// *
|
||||
// * @param request HTTP请求对象
|
||||
// * @return 用户基本信息
|
||||
// * <p>
|
||||
// * 接口说明：
|
||||
// * - 通过token获取当前登录用户的基本信息
|
||||
// * - 返回完整的用户数据
|
||||
// * - 需要用户登录验证
|
||||
// * <p>
|
||||
// */
|
||||
// @GetMapping(value = "/api/user/info")
|
||||
// public AjaxResult getUserInfo(HttpServletRequest request) {
|
||||
// try {
|
||||
// Map<String, Object> order_num = new HashMap<>();
|
||||
// Map<String, Object> goods_order_num = new HashMap<>();
|
||||
// // 1. 验证用户登录状态
|
||||
// String token = request.getHeader("token");
|
||||
// Map<String, Object> userValidation = AppletLoginUtil.validateUserToken(token, usersService);
|
||||
// if (!(Boolean) userValidation.get("valid")) {
|
||||
// return AppletControllerUtil.appletUnauthorized();
|
||||
// }
|
||||
//
|
||||
// // 2. 获取用户信息
|
||||
// Users user = (Users) userValidation.get("user");
|
||||
// if (user == null) {
|
||||
// return AppletControllerUtil.appletWarning("用户信息获取失败");
|
||||
// }
|
||||
//
|
||||
// // 3. 构建精简用户信息响应数据
|
||||
// Map<String, Object> userInfo = new HashMap<>();
|
||||
// userInfo.put("nickname", user.getNickname());
|
||||
// userInfo.put("phone", user.getPhone());
|
||||
// userInfo.put("ismember", user.getIsmember());
|
||||
// userInfo.put("member_begin", user.getMemberBegin());
|
||||
// userInfo.put("member_end", user.getMemberEnd());
|
||||
// userInfo.put("balance", user.getBalance());
|
||||
// userInfo.put("integral", user.getIntegral());
|
||||
// userInfo.put("shop_money", user.getConsumption());
|
||||
// userInfo.put("service_money", user.getServicefee());
|
||||
// userInfo.put("birthday", user.getBirthday());
|
||||
// userInfo.put("remember_token", userInfo.get("rememberToken"));
|
||||
//
|
||||
// // 头像处理
|
||||
// String avatar = user.getAvatar();
|
||||
// if (avatar != null && !avatar.isEmpty()) {
|
||||
// userInfo.put("avatar", AppletControllerUtil.buildImageUrl(avatar));
|
||||
// } else {
|
||||
// userInfo.put("avatar", "https://img.huafurenjia.cn/default/user_avatar.jpeg");
|
||||
// }
|
||||
// order_num.put("pending_accept", orderService.selectCountOrderByUid(user.getId(), 2L));
|
||||
// order_num.put("pending_service", orderService.selectCountOrderByUid(user.getId(), 3L));
|
||||
// order_num.put("in_service", orderService.selectCountOrderByUid(user.getId(), 4L));
|
||||
// order_num.put("other_status", orderService.selectAllCountOrderByUid(user.getId()));
|
||||
// userInfo.put("order_num", order_num);
|
||||
//
|
||||
//
|
||||
// goods_order_num.put("pending_accept", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 2L));
|
||||
// goods_order_num.put("pending_service", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 3L));
|
||||
// goods_order_num.put("in_service", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 5L));
|
||||
// goods_order_num.put("other_status", goodsOrderService.selectAllCountGoodsOrderByUid(user.getId()));
|
||||
// userInfo.put("goods_order_num", goods_order_num);
|
||||
// // 新增tx_time字段
|
||||
// List<Object> txTimeArr = new ArrayList<>();
|
||||
// try {
|
||||
// SiteConfig configQuery = new SiteConfig();
|
||||
// configQuery.setName("config_four");
|
||||
// List<SiteConfig> configList = siteConfigService.selectSiteConfigList(configQuery);
|
||||
// if (configList != null && !configList.isEmpty()) {
|
||||
// String configValue = configList.get(0).getValue();
|
||||
// if (configValue != null && !configValue.trim().isEmpty()) {
|
||||
// JSONObject json = JSONObject.parse(configValue);
|
||||
// if (json.containsKey("time")) {
|
||||
// Object timeObj = json.get("time");
|
||||
// if (timeObj instanceof List) {
|
||||
// txTimeArr = (List<Object>) timeObj;
|
||||
// } else if (timeObj instanceof JSONArray) {
|
||||
// txTimeArr = ((JSONArray) timeObj).toJavaList(Object.class);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// } catch (Exception ignore) {
|
||||
// }
|
||||
// userInfo.put("tx_time", txTimeArr);
|
||||
// return AppletControllerUtil.appletSuccess(userInfo);
|
||||
// } catch (Exception e) {
|
||||
// System.err.println("查询用户基本信息异常：" + e.getMessage());
|
||||
// return AppletControllerUtil.appletError("查询用户信息失败：" + e.getMessage());
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取用户基本信息接口
|
||||
*
|
||||
|
|
@ -1423,7 +1269,7 @@ public class AppletController extends BaseController {
|
|||
* <p>
|
||||
*/
|
||||
@GetMapping(value = "/api/user/info")
|
||||
public AjaxResult apiuserinfo(HttpServletRequest request) {
|
||||
public AjaxResult getUserInfo(HttpServletRequest request) {
|
||||
try {
|
||||
Map<String, Object> order_num = new HashMap<>();
|
||||
Map<String, Object> goods_order_num = new HashMap<>();
|
||||
|
|
@ -1445,25 +1291,18 @@ public class AppletController extends BaseController {
|
|||
|
||||
userInfo.put("remember_token", userInfo.get("rememberToken"));
|
||||
|
||||
// 新增：根据会员状态查询充值项目
|
||||
Integer queryType = (user.getIsmember() != null && user.getIsmember() == 1) ? 2 : 1;
|
||||
UserMemberRechargeProgram query = new UserMemberRechargeProgram();
|
||||
query.setType(queryType);
|
||||
query.setStatus(0); // 只查启用
|
||||
java.util.List<UserMemberRechargeProgram> rechargePrograms = userMemberRechargeProgramService.selectUserMemberRechargeProgramList(query);
|
||||
userInfo.put("memberRechargePrograms", rechargePrograms.getFirst());
|
||||
|
||||
order_num.put("yikoujia", 0);
|
||||
order_num.put("baojia", 0);
|
||||
order_num.put("yuyue", 0);
|
||||
|
||||
order_num.put("pending_accept", orderService.selectCountOrderByUid(user.getId(), 2L));
|
||||
order_num.put("pending_service", orderService.selectCountOrderByUid(user.getId(), 3L));
|
||||
order_num.put("in_service", orderService.selectCountOrderByUid(user.getId(), 4L));
|
||||
order_num.put("other_status", orderService.selectAllCountOrderByUid(user.getId()));
|
||||
userInfo.put("order_num", order_num);
|
||||
|
||||
goods_order_num.put("daifukuan",0);
|
||||
goods_order_num.put("daifahuo",0);
|
||||
goods_order_num.put("daishouhuo", 0);
|
||||
goods_order_num.put("daipingjia",0);
|
||||
goods_order_num.put("shouhou",0);
|
||||
|
||||
goods_order_num.put("pending_accept", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 2L));
|
||||
goods_order_num.put("pending_service", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 3L));
|
||||
goods_order_num.put("in_service", goodsOrderService.selectCountGoodsOrderByUid(user.getId(), 5L));
|
||||
goods_order_num.put("other_status", goodsOrderService.selectAllCountGoodsOrderByUid(user.getId()));
|
||||
userInfo.put("goods_order_num", goods_order_num);
|
||||
|
||||
// 新增tx_time字段
|
||||
|
|
@ -1489,19 +1328,6 @@ public class AppletController extends BaseController {
|
|||
} catch (Exception ignore) {
|
||||
}
|
||||
userInfo.put("tx_time", txTimeArr);
|
||||
|
||||
// 新增：查询该用户可用优惠券数量
|
||||
int couponNum = 0;
|
||||
try {
|
||||
com.ruoyi.system.domain.CouponUser queryCoupon = new com.ruoyi.system.domain.CouponUser();
|
||||
queryCoupon.setUid(user.getId());
|
||||
queryCoupon.setStatus(0L); // 0=可用
|
||||
java.util.List<com.ruoyi.system.domain.CouponUser> couponList = couponUserService.selectCouponUserList(queryCoupon);
|
||||
couponNum = couponList != null ? couponList.size() : 0;
|
||||
} catch (Exception e) {
|
||||
}
|
||||
userInfo.put("couponNum", couponNum);
|
||||
|
||||
return AppletControllerUtil.appletSuccess(userInfo);
|
||||
|
||||
} catch (Exception e) {
|
||||
|
|
@ -1511,7 +1337,6 @@ public class AppletController extends BaseController {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 构建用户信息响应数据
|
||||
*
|
||||
|
|
@ -1521,7 +1346,6 @@ public class AppletController extends BaseController {
|
|||
private Map<String, Object> buildUserInfoResponse(Users user) {
|
||||
Map<String, Object> userInfo = new HashMap<>();
|
||||
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
|
||||
SimpleDateFormat sdfday = new SimpleDateFormat("yyyy-MM-dd");
|
||||
|
||||
// 基本信息
|
||||
userInfo.put("id", user.getId());
|
||||
|
|
@ -1529,19 +1353,7 @@ public class AppletController extends BaseController {
|
|||
userInfo.put("nickname", user.getNickname());
|
||||
userInfo.put("phone", user.getPhone());
|
||||
userInfo.put("password", null); // 密码不返回
|
||||
// userInfo.put("ismember", user.getIsmember());
|
||||
// if (user.getMemberBegin() != null) {
|
||||
// userInfo.put("member_begin", sdfday.format(user.getMemberBegin()));
|
||||
// }
|
||||
// if (user.getMemberEnd() != null){
|
||||
// userInfo.put("member_end", sdfday.format(user.getMemberEnd()));
|
||||
// }
|
||||
// userInfo.put("member_begin", sdfday.format(user.getMemberBegin()));
|
||||
// userInfo.put("member_end", sdfday.format(user.getMemberEnd()));
|
||||
userInfo.put("balance", user.getBalance());
|
||||
userInfo.put("shop_money", user.getConsumption());
|
||||
userInfo.put("service_money", user.getServicefee());
|
||||
userInfo.put("birthday", user.getBirthday());
|
||||
|
||||
// 头像处理
|
||||
String avatar = user.getAvatar();
|
||||
if (avatar != null && !avatar.isEmpty()) {
|
||||
|
|
@ -1560,8 +1372,8 @@ public class AppletController extends BaseController {
|
|||
if (user.getType().equals("1")) {
|
||||
userInfo.put("balance", user.getBalance().toString() != null ? user.getBalance().toString() : "0.00");
|
||||
userInfo.put("ismember", user.getIsmember());
|
||||
userInfo.put("member_begin",user.getMemberBegin() != null ? sdfday.format(user.getMemberBegin()) : null );
|
||||
userInfo.put("member_end",user.getMemberEnd() != null ? sdfday.format(user.getMemberEnd()) : null );
|
||||
userInfo.put("member_begin",user.getMemberBegin() != null ? sdf.format(user.getMemberBegin()) : null );
|
||||
userInfo.put("member_end",user.getMemberEnd() != null ? sdf.format(user.getMemberEnd()) : null );
|
||||
}
|
||||
|
||||
userInfo.put("integral", user.getIntegral() != null ? user.getIntegral() : 0);
|
||||
|
|
@ -3577,6 +3389,10 @@ public class AppletController extends BaseController {
|
|||
return AppletControllerUtil.appletWarning("取消失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 师傅接单接口
|
||||
* 参考OrderController+OrderUtil+OrderLogHandler的json_status=2分支
|
||||
*/
|
||||
@GetMapping("/api/worker/accept/order/{id}")
|
||||
public AjaxResult workerAcceptOrder(@PathVariable("id") Long id, HttpServletRequest request) {
|
||||
try {
|
||||
|
|
@ -6163,14 +5979,6 @@ public class AppletController extends BaseController {
|
|||
@GetMapping(value = "/api/public/notice/list")
|
||||
public AjaxResult getHomeNoticeList(HttpServletRequest request) {
|
||||
try {
|
||||
// 新增：获取category参数（1=首页，2=活动）
|
||||
String categoryParam = request.getParameter("category");
|
||||
String filterCategory = null;
|
||||
if ("1".equals(categoryParam)) {
|
||||
filterCategory = "home";
|
||||
} else if ("2".equals(categoryParam)) {
|
||||
filterCategory = "activity";
|
||||
}
|
||||
// 1. 查询config_seven配置
|
||||
SiteConfig configQuery = new SiteConfig();
|
||||
configQuery.setName("config_seven");
|
||||
|
|
@ -6216,19 +6024,13 @@ public class AppletController extends BaseController {
|
|||
for (int i = 0; i < noticeArray.size(); i++) {
|
||||
try {
|
||||
JSONObject noticeItem = noticeArray.getJSONObject(i);
|
||||
|
||||
// 检查状态是否为上线（status=1）
|
||||
Integer status = noticeItem.getInteger("status");
|
||||
if (status == null || status != 1) {
|
||||
continue; // 跳过下线或状态异常的公告
|
||||
}
|
||||
// 新增：按分类过滤
|
||||
if (filterCategory != null) {
|
||||
String itemCategory = noticeItem.getString("category");
|
||||
if (itemCategory == null) itemCategory = "home"; // 兼容老数据
|
||||
if (!filterCategory.equals(itemCategory)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// 构建公告数据
|
||||
Map<String, Object> notice = new HashMap<>();
|
||||
notice.put("title", noticeItem.getString("title"));
|
||||
|
|
@ -6236,6 +6038,7 @@ public class AppletController extends BaseController {
|
|||
notice.put("link", noticeItem.getString("link"));
|
||||
notice.put("sort", noticeItem.getInteger("sort"));
|
||||
notice.put("status", status);
|
||||
|
||||
resultList.add(notice);
|
||||
} catch (Exception e) {
|
||||
// 单个公告解析失败时跳过，继续处理其他公告
|
||||
|
|
@ -6243,6 +6046,7 @@ public class AppletController extends BaseController {
|
|||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 按sort字段升序排序
|
||||
resultList.sort((a, b) -> {
|
||||
Integer sortA = (Integer) a.get("sort");
|
||||
|
|
@ -6251,7 +6055,9 @@ public class AppletController extends BaseController {
|
|||
if (sortB == null) sortB = Integer.MAX_VALUE;
|
||||
return sortA.compareTo(sortB);
|
||||
});
|
||||
|
||||
return AppletControllerUtil.appletSuccess(resultList);
|
||||
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取首页通知公告列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取通知公告列表失败：" + e.getMessage());
|
||||
|
|
@ -6437,134 +6243,4 @@ public class AppletController extends BaseController {
|
|||
return AppletControllerUtil.appletError("查询报价产品列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取活动专区展示接口
|
||||
* 查询config_eight配置，返回activities数组
|
||||
*/
|
||||
@GetMapping(value = "/api/public/activity/list")
|
||||
public AjaxResult getActivityList(HttpServletRequest request) {
|
||||
try {
|
||||
// 查询config_eight配置
|
||||
SiteConfig configQuery = new SiteConfig();
|
||||
configQuery.setName("config_eight");
|
||||
List<SiteConfig> configList = siteConfigService.selectSiteConfigList(configQuery);
|
||||
|
||||
if (configList.isEmpty()) {
|
||||
// 配置不存在时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
SiteConfig config = configList.get(0);
|
||||
String configValue = config.getValue();
|
||||
|
||||
if (configValue == null || configValue.trim().isEmpty()) {
|
||||
// 配置值为空时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 解析JSON配置
|
||||
JSONObject configJson;
|
||||
try {
|
||||
configJson = JSONObject.parseObject(configValue);
|
||||
} catch (Exception e) {
|
||||
System.err.println("解析config_eight配置JSON失败：" + e.getMessage());
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 获取activities数组
|
||||
if (!configJson.containsKey("activities")) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
Object activitiesObj = configJson.get("activities");
|
||||
if (!(activitiesObj instanceof JSONArray)) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
JSONArray activitiesArray = (JSONArray) activitiesObj;
|
||||
// 直接返回activities数组
|
||||
return AppletControllerUtil.appletSuccess(activitiesArray);
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取活动专区列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取活动专区列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页拼团专区列表接口
|
||||
* 查询type=1且isgroup=1的服务商品前4个
|
||||
* 返回icon、标题、price、groupprice字段
|
||||
*/
|
||||
@GetMapping(value = "/api/public/group/list")
|
||||
public AjaxResult getGroupList(HttpServletRequest request) {
|
||||
try {
|
||||
// 构建查询条件
|
||||
ServiceGoods queryGoods = new ServiceGoods();
|
||||
queryGoods.setType(1); // type=1
|
||||
queryGoods.setIsgroup(1); // isgroup=1
|
||||
queryGoods.setStatus("1"); // 只查询启用状态的商品
|
||||
|
||||
// 查询服务商品列表
|
||||
List<ServiceGoods> goodsList = serviceGoodsService.selectServiceGoodsList(queryGoods);
|
||||
|
||||
// 只取前4个
|
||||
if (goodsList.size() > 4) {
|
||||
goodsList = goodsList.subList(0, 6);
|
||||
}
|
||||
|
||||
// 构建返回数据
|
||||
List<Map<String, Object>> resultList = new ArrayList<>();
|
||||
|
||||
for (ServiceGoods goods : goodsList) {
|
||||
Map<String, Object> goodsData = new HashMap<>();
|
||||
|
||||
// 基本信息
|
||||
goodsData.put("id", goods.getId());
|
||||
goodsData.put("groupnum", goods.getGroupnum());
|
||||
goodsData.put("title", goods.getTitle());
|
||||
goodsData.put("price", goods.getPrice() != null ? goods.getPrice().toString() : "0.00");
|
||||
goodsData.put("groupprice", goods.getGroupprice() != null ? goods.getGroupprice().toString() : "0.00");
|
||||
|
||||
// 处理图片URL - 添加CDN前缀
|
||||
goodsData.put("icon", AppletControllerUtil.buildImageUrl(goods.getIcon()));
|
||||
|
||||
resultList.add(goodsData);
|
||||
}
|
||||
|
||||
return AppletControllerUtil.appletSuccess(resultList);
|
||||
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取拼团专区列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取拼团专区列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 首页接口汇总
|
||||
*/
|
||||
@GetMapping(value = "/api/public/home/data")
|
||||
public AjaxResult publichomedata() {
|
||||
Map<String, Object> responseData = new HashMap<>();
|
||||
|
||||
HomeUtril homeUtril = new HomeUtril();
|
||||
//轮播图
|
||||
responseData.put("lunbotu", homeUtril.getAdvImgData(2L));
|
||||
//首页公告
|
||||
responseData.put("shouyegonggao", homeUtril.getHomeNoticeList("1"));
|
||||
//分类列表
|
||||
responseData.put("shouyefenlei", homeUtril.getServiceCategories());
|
||||
//活动专区
|
||||
responseData.put("huodongzhuanqu", homeUtril.getActivityList());
|
||||
//活动专区公告
|
||||
responseData.put("huodongzhuanqugonggao", homeUtril.getHomeNoticeList("2"));
|
||||
//公司简介
|
||||
responseData.put("gongsijianjie", homeUtril.getConfig("config_one"));
|
||||
//资质证书
|
||||
responseData.put("zizhizhengshu", homeUtril.getAdvImgData(1L));
|
||||
//拼团专区
|
||||
responseData.put("pintuanzhuanqu", homeUtril.getGroupList());
|
||||
|
||||
return AppletControllerUtil.appletSuccess(responseData);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ public class PayNotifyController extends BaseController {
|
|||
// order
|
||||
// order
|
||||
// order
|
||||
// order
|
||||
// order
|
||||
// order
|
||||
}
|
||||
|
||||
|
|
@ -261,7 +261,7 @@ public class PayNotifyController extends BaseController {
|
|||
|
||||
|
||||
/**
|
||||
* 用户支付接口
|
||||
* 商品支付回调接口
|
||||
*
|
||||
* @param request HTTP请求对象
|
||||
* @return XML格式响应给微信服务器
|
||||
|
|
@ -328,30 +328,15 @@ public class PayNotifyController extends BaseController {
|
|||
userMemnerConsumptionLog.setNowmoney(users.getBalance().subtract(userMemberRechargeLog.getComemoney()));
|
||||
userMemnerConsumptionLog.setType(2);
|
||||
userMemnerConsumptionLogService.insertUserMemnerConsumptionLog(userMemnerConsumptionLog);
|
||||
|
||||
|
||||
if (userMemberRechargeLog.getIsmember() == 1) {
|
||||
// 会员包年充值
|
||||
if (users.getIsmember() == 1 && users.getMemberEnd() != null) {
|
||||
// 续费会员：在原有会员结束时间基础上加一年
|
||||
Calendar calendar = Calendar.getInstance();
|
||||
calendar.setTime(users.getMemberEnd());
|
||||
calendar.add(Calendar.YEAR, 1);
|
||||
users.setMemberEnd(calendar.getTime());
|
||||
} else if (users.getIsmember() == 0) {
|
||||
// 新会员：会员开始时间为当前，结束时间为一年后
|
||||
users.setMemberBegin(new Date());
|
||||
Calendar calendar = Calendar.getInstance();
|
||||
calendar.setTime(new Date());
|
||||
calendar.add(Calendar.YEAR, 1);
|
||||
users.setMemberEnd(calendar.getTime());
|
||||
}
|
||||
users.setIsmember(1);
|
||||
users.setBalance(users.getBalance().subtract(userMemberRechargeLog.getComemoney()));
|
||||
usersService.updateUsers(users);
|
||||
}
|
||||
users.setIsmember(1);
|
||||
users.setMemberBegin(new Date());
|
||||
//会员结束时间是一年后
|
||||
Calendar calendar = Calendar.getInstance();
|
||||
calendar.add(Calendar.YEAR, 1);
|
||||
users.setMemberEnd(calendar.getTime());
|
||||
|
||||
|
||||
usersService.updateUsers(users);
|
||||
}
|
||||
//WXsendMsgUtil.sendUserForMoneySuccess(users.getOpenid(),userMemberRechargeLog,users);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import java.util.List;
|
|||
import javax.servlet.http.HttpServletResponse;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
|
||||
import com.ruoyi.system.ControllerUtil.AppletControllerUtil;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
|
@ -49,21 +48,14 @@ public class ServiceCateController extends BaseController
|
|||
if (pageSizeStr != null && Integer.parseInt(pageSizeStr) > 1000) {
|
||||
// 不分页查询
|
||||
List<ServiceCate> list = serviceCateService.selectServiceCateList(serviceCate);
|
||||
for (ServiceCate serviceCate1 : list){
|
||||
serviceCate1.setIcon(AppletControllerUtil.buildImageUrl(serviceCate1.getIcon()));
|
||||
}
|
||||
TableDataInfo dataTable = new TableDataInfo();
|
||||
dataTable.setRows(list);
|
||||
dataTable.setTotal(list.size());
|
||||
|
||||
return dataTable;
|
||||
} else {
|
||||
// 正常分页查询
|
||||
startPage();
|
||||
List<ServiceCate> list = serviceCateService.selectServiceCateList(serviceCate);
|
||||
for (ServiceCate serviceCate2 : list){
|
||||
serviceCate2.setIcon(AppletControllerUtil.buildImageUrl(serviceCate2.getIcon()));
|
||||
}
|
||||
return getDataTable(list);
|
||||
}
|
||||
}
|
||||
|
|
@ -99,8 +91,8 @@ public class ServiceCateController extends BaseController
|
|||
@PostMapping
|
||||
public AjaxResult add(@RequestBody ServiceCate serviceCate)
|
||||
{
|
||||
// 允许 parentId 为 null 或 0，表示一级分类
|
||||
if (serviceCate.getParentId() == null || serviceCate.getParentId() == 0L) {
|
||||
// 验证分类级别（只允许二级分类）
|
||||
if (serviceCate.getParentId() == null) {
|
||||
serviceCate.setParentId(0L); // 一级分类
|
||||
} else {
|
||||
// 检查父级分类是否为一级分类
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
// 评价订单
|
||||
public function comment(Request $request)
|
||||
{
|
||||
|
||||
$validator = Validator::make($request->all(),$this->comment_rule()['rules'],$this->comment_rule()['messages']);
|
||||
if($validator->fails()){
|
||||
return $this->error($validator->errors()->all()[0]);
|
||||
}
|
||||
$param = $request->post();
|
||||
// 是否已经评价过
|
||||
$info = Comment::where(['uid'=>$this->user_info['id'],'order_id'=>$param['order_id']])->first();
|
||||
if($info){
|
||||
return $this->error('请勿重复提交');
|
||||
}
|
||||
$num_type = $param['num'] == 1 ? 3 : (in_array($param['num'],[2,3]) ? 2 : 1);
|
||||
// 商品id
|
||||
$order_info = Order::select('product_id','id','worker_id')->where(['order_id'=>$param['order_id']])->first();
|
||||
$data = [
|
||||
'oid' => $order_info['id'],
|
||||
'order_id' => $param['order_id'],
|
||||
'product_id' => $order_info['product_id'],
|
||||
'content' => $param['content'],
|
||||
'num' => $param['num'],
|
||||
'uid' => $this->user_info['id'],
|
||||
'images' => $param['images'] ? json_encode($param['images']) : null,
|
||||
'num_type' => $num_type,
|
||||
'worker_id' => $order_info['worker_id'],
|
||||
'created_at' => date('Y-m-d H:i:s'),
|
||||
'updated_at' => date('Y-m-d H:i:s'),
|
||||
];
|
||||
DB::beginTransaction();
|
||||
try{
|
||||
Comment::insert($data);
|
||||
// 订单评价记录
|
||||
$log_data = [
|
||||
'oid' => $order_info['id'],
|
||||
'order_id' => $param['order_id'],
|
||||
'title' => '订单评价',
|
||||
'type' => 8,
|
||||
'content' => json_encode(['text'=>$param['content'],'image'=>$param['images'],'num'=>$data['num']]),
|
||||
'created_at'=> date('Y-m-d H:i:s'),
|
||||
'updated_at'=> date('Y-m-d H:i:s'),
|
||||
];
|
||||
Log::insert($log_data);
|
||||
// 更改订单状态为完成--评价状态改为已评价
|
||||
Order::where(['order_id'=>$param['order_id']])->update(['status'=>4,'is_comment'=>1]);
|
||||
DB::commit();
|
||||
return $this->success();
|
||||
}catch(\Exception $e){
|
||||
DB::rollBack();
|
||||
return $this->error('操作失败'.$e->getMessage());
|
||||
}
|
||||
}
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
package com.ruoyi.system.ControllerUtil;
|
||||
|
||||
import java.util.*;
|
||||
|
||||
/**
|
||||
* 算法使用示例类
|
||||
*
|
||||
* 演示雪花算法和红黑树的基本使用方法
|
||||
* 包含性能测试和功能验证
|
||||
*
|
||||
* @author Mr. Zhang Pan
|
||||
* @date 2025-01-03
|
||||
* @version 1.0
|
||||
*/
|
||||
public class AlgorithmExample {
|
||||
|
||||
/**
|
||||
* 雪花算法使用示例
|
||||
*/
|
||||
public static void snowflakeExample() {
|
||||
System.out.println("========== 雪花算法使用示例 ==========");
|
||||
|
||||
// 1. 创建雪花算法实例
|
||||
SnowflakeIdGenerator generator = new SnowflakeIdGenerator(1);
|
||||
|
||||
// 2. 生成单个ID
|
||||
long id1 = generator.nextId();
|
||||
long id2 = generator.nextId();
|
||||
System.out.println("生成的ID1: " + id1);
|
||||
System.out.println("生成的ID2: " + id2);
|
||||
|
||||
// 3. 批量生成ID
|
||||
long[] ids = generator.nextIds(5);
|
||||
System.out.println("批量生成ID: " + Arrays.toString(ids));
|
||||
|
||||
// 4. 解析ID
|
||||
Map<String, Object> parsed = generator.parseId(id1);
|
||||
System.out.println("ID解析结果: " + parsed);
|
||||
|
||||
// 5. 使用静态方法快速生成
|
||||
long quickId = SnowflakeIdGenerator.generateId();
|
||||
String quickIdStr = SnowflakeIdGenerator.generateIdString();
|
||||
System.out.println("快速生成ID: " + quickId);
|
||||
System.out.println("快速生成ID字符串: " + quickIdStr);
|
||||
|
||||
// 6. 性能测试
|
||||
Map<String, Object> perfResult = generator.performanceTest(10000);
|
||||
System.out.println("性能测试结果: " + perfResult);
|
||||
|
||||
System.out.println();
|
||||
}
|
||||
|
||||
/**
|
||||
* 红黑树使用示例
|
||||
*/
|
||||
public static void redBlackTreeExample() {
|
||||
System.out.println("========== 红黑树使用示例 ==========");
|
||||
|
||||
// 1. 创建红黑树
|
||||
RedBlackTree<Integer> rbt = new RedBlackTree<>();
|
||||
|
||||
// 2. 插入数据
|
||||
int[] data = {10, 5, 15, 3, 7, 12, 18, 1, 6, 8, 11, 13, 16, 20};
|
||||
System.out.println("插入数据: " + Arrays.toString(data));
|
||||
|
||||
for (int num : data) {
|
||||
boolean inserted = rbt.insert(num);
|
||||
System.out.println("插入 " + num + ": " + (inserted ? "成功" : "失败（已存在）"));
|
||||
}
|
||||
|
||||
// 3. 基本信息
|
||||
System.out.println("\n树的基本信息:");
|
||||
System.out.println("大小: " + rbt.size());
|
||||
System.out.println("高度: " + rbt.getHeight());
|
||||
System.out.println("黑色高度: " + rbt.getBlackHeight());
|
||||
System.out.println("是否为有效红黑树: " + rbt.isValidRedBlackTree());
|
||||
|
||||
// 4. 查找操作
|
||||
System.out.println("\n查找操作:");
|
||||
System.out.println("查找7: " + rbt.contains(7));
|
||||
System.out.println("查找100: " + rbt.contains(100));
|
||||
System.out.println("最小值: " + rbt.findMin());
|
||||
System.out.println("最大值: " + rbt.findMax());
|
||||
|
||||
// 5. 遍历操作
|
||||
System.out.println("\n遍历操作:");
|
||||
System.out.println("中序遍历: " + rbt.inorderTraversal());
|
||||
System.out.println("前序遍历: " + rbt.preorderTraversal());
|
||||
System.out.println("后序遍历: " + rbt.postorderTraversal());
|
||||
System.out.println("层序遍历: " + rbt.levelOrderTraversal());
|
||||
|
||||
// 6. 删除操作
|
||||
System.out.println("\n删除操作:");
|
||||
boolean deleted = rbt.delete(5);
|
||||
System.out.println("删除5: " + (deleted ? "成功" : "失败"));
|
||||
System.out.println("删除后中序遍历: " + rbt.inorderTraversal());
|
||||
System.out.println("删除后是否为有效红黑树: " + rbt.isValidRedBlackTree());
|
||||
|
||||
// 7. 打印树结构
|
||||
System.out.println("\n树结构:");
|
||||
System.out.println(rbt.printTree());
|
||||
|
||||
System.out.println();
|
||||
}
|
||||
|
||||
/**
|
||||
* 红黑树性能测试
|
||||
*/
|
||||
public static void redBlackTreePerformanceTest() {
|
||||
System.out.println("========== 红黑树性能测试 ==========");
|
||||
|
||||
RedBlackTree<Integer> rbt = new RedBlackTree<>();
|
||||
Random random = new Random();
|
||||
|
||||
// 插入性能测试
|
||||
int testSize = 100000;
|
||||
long startTime = System.currentTimeMillis();
|
||||
|
||||
for (int i = 0; i < testSize; i++) {
|
||||
rbt.insert(random.nextInt(testSize * 2));
|
||||
}
|
||||
|
||||
long insertTime = System.currentTimeMillis() - startTime;
|
||||
System.out.println("插入 " + testSize + " 个随机数耗时: " + insertTime + "ms");
|
||||
System.out.println("实际插入数量: " + rbt.size() + " (去重后)");
|
||||
System.out.println("树高度: " + rbt.getHeight());
|
||||
System.out.println("理论最优高度: " + (int)(Math.log(rbt.size()) / Math.log(2)));
|
||||
|
||||
// 查找性能测试
|
||||
startTime = System.currentTimeMillis();
|
||||
int foundCount = 0;
|
||||
|
||||
for (int i = 0; i < testSize; i++) {
|
||||
if (rbt.contains(random.nextInt(testSize * 2))) {
|
||||
foundCount++;
|
||||
}
|
||||
}
|
||||
|
||||
long searchTime = System.currentTimeMillis() - startTime;
|
||||
System.out.println("查找 " + testSize + " 次耗时: " + searchTime + "ms");
|
||||
System.out.println("找到数量: " + foundCount);
|
||||
|
||||
// 遍历性能测试
|
||||
startTime = System.currentTimeMillis();
|
||||
List<Integer> sorted = rbt.inorderTraversal();
|
||||
long traversalTime = System.currentTimeMillis() - startTime;
|
||||
System.out.println("中序遍历耗时: " + traversalTime + "ms");
|
||||
|
||||
// 验证排序正确性
|
||||
boolean isSorted = true;
|
||||
for (int i = 1; i < sorted.size(); i++) {
|
||||
if (sorted.get(i - 1) > sorted.get(i)) {
|
||||
isSorted = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
System.out.println("遍历结果是否有序: " + isSorted);
|
||||
System.out.println("红黑树性质验证: " + rbt.isValidRedBlackTree());
|
||||
|
||||
System.out.println();
|
||||
}
|
||||
|
||||
/**
|
||||
* 实际应用场景示例
|
||||
*/
|
||||
public static void practicalApplicationExample() {
|
||||
System.out.println("========== 实际应用场景示例 ==========");
|
||||
|
||||
// 场景1：订单ID生成
|
||||
System.out.println("场景1：订单ID生成");
|
||||
SnowflakeIdGenerator orderIdGenerator = new SnowflakeIdGenerator(1);
|
||||
|
||||
for (int i = 0; i < 5; i++) {
|
||||
String orderId = "ORDER_" + orderIdGenerator.generateIdString();
|
||||
System.out.println("生成订单ID: " + orderId);
|
||||
}
|
||||
|
||||
// 场景2：用户积分排行榜
|
||||
System.out.println("\n场景2：用户积分排行榜");
|
||||
RedBlackTree<UserScore> scoreRanking = new RedBlackTree<>();
|
||||
|
||||
// 添加用户积分
|
||||
scoreRanking.insert(new UserScore("张三", 1500));
|
||||
scoreRanking.insert(new UserScore("李四", 2300));
|
||||
scoreRanking.insert(new UserScore("王五", 1800));
|
||||
scoreRanking.insert(new UserScore("赵六", 2100));
|
||||
scoreRanking.insert(new UserScore("孙七", 1200));
|
||||
|
||||
System.out.println("积分排行榜（从低到高）:");
|
||||
List<UserScore> ranking = scoreRanking.inorderTraversal();
|
||||
for (int i = 0; i < ranking.size(); i++) {
|
||||
System.out.println((i + 1) + ". " + ranking.get(i));
|
||||
}
|
||||
|
||||
System.out.println();
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户积分类（用于红黑树示例）
|
||||
*/
|
||||
private static class UserScore implements Comparable<UserScore> {
|
||||
private String username;
|
||||
private int score;
|
||||
|
||||
public UserScore(String username, int score) {
|
||||
this.username = username;
|
||||
this.score = score;
|
||||
}
|
||||
|
||||
@Override
|
||||
public int compareTo(UserScore other) {
|
||||
return Integer.compare(this.score, other.score);
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return username + "(" + score + "分)";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 主方法 - 运行所有示例
|
||||
*/
|
||||
public static void main(String[] args) {
|
||||
System.out.println("开始算法示例演示...\n");
|
||||
|
||||
// 运行所有示例
|
||||
snowflakeExample();
|
||||
redBlackTreeExample();
|
||||
redBlackTreePerformanceTest();
|
||||
practicalApplicationExample();
|
||||
|
||||
System.out.println("算法示例演示完成！");
|
||||
}
|
||||
}
|
||||
|
|
@ -92,23 +92,6 @@ public class AppletControllerUtil {
|
|||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 业务提示响应 - code:500
|
||||
*
|
||||
* @param message 提示消息
|
||||
* @return AjaxResult
|
||||
*/
|
||||
public static AjaxResult appletkaifaWarning(String message) {
|
||||
AjaxResult result = new AjaxResult();
|
||||
result.put("code", 500);
|
||||
result.put("msg", message);
|
||||
result.put("data", new ArrayList<>());
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 业务提示响应 - code: 422，带数据
|
||||
*
|
||||
|
|
@ -2918,7 +2901,7 @@ public class AppletControllerUtil {
|
|||
goodsData.put("title", goods.getTitle());
|
||||
goodsData.put("icon", buildImageUrl(goods.getIcon()));
|
||||
goodsData.put("cate_id", goods.getCateId());
|
||||
goodsData.put("price", goods.getPrice());
|
||||
goodsData.put("price", goods.getPriceZn());
|
||||
goodsData.put("price_zn", goods.getPriceZn());
|
||||
goodsData.put("sales", goods.getSales() != null ? goods.getSales() : 0);
|
||||
goodsData.put("stock", goods.getStock() != null ? goods.getStock() : 0);
|
||||
|
|
@ -4404,7 +4387,6 @@ public class AppletControllerUtil {
|
|||
amountStr = "-" + amount.setScale(2, BigDecimal.ROUND_HALF_UP).toString();
|
||||
}
|
||||
logData.put("amount", amountStr);
|
||||
logData.put("paytime", sdf.format(log.getConsumptiontime()));
|
||||
|
||||
// 余额信息
|
||||
logData.put("before_amount", log.getBeformoney() != null ?
|
||||
|
|
@ -4414,16 +4396,15 @@ public class AppletControllerUtil {
|
|||
|
||||
// 备注信息
|
||||
logData.put("remark", log.getReamk() != null ? log.getReamk() : "");
|
||||
logData.put("orderid", log.getOrderid() != null ? log.getOrderid() : "");
|
||||
|
||||
// // 时间信息
|
||||
// if (log.getCreatedAt() != null) {
|
||||
// logData.put("created_time", sdf.format(log.getCreatedAt()));
|
||||
// } else if (log.getConsumptiontime() != null) {
|
||||
// logData.put("created_time", sdf.format(log.getConsumptiontime()));
|
||||
// } else {
|
||||
// logData.put("created_time", null);
|
||||
// }
|
||||
// 时间信息
|
||||
if (log.getCreatedAt() != null) {
|
||||
logData.put("created_time", sdf.format(log.getCreatedAt()));
|
||||
} else if (log.getConsumptiontime() != null) {
|
||||
logData.put("created_time", sdf.format(log.getConsumptiontime()));
|
||||
} else {
|
||||
logData.put("created_time", null);
|
||||
}
|
||||
|
||||
formattedList.add(logData);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,442 +0,0 @@
|
|||
package com.ruoyi.system.ControllerUtil;
|
||||
|
||||
import com.alibaba.fastjson2.JSONArray;
|
||||
import com.alibaba.fastjson2.JSONObject;
|
||||
import com.ruoyi.common.core.domain.AjaxResult;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import com.ruoyi.common.utils.spring.SpringUtils;
|
||||
import com.ruoyi.system.domain.*;
|
||||
import com.ruoyi.system.service.IAdvImgService;
|
||||
import com.ruoyi.system.service.IServiceCateService;
|
||||
import com.ruoyi.system.service.IServiceGoodsService;
|
||||
import com.ruoyi.system.service.ISiteConfigService;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
public class HomeUtril {
|
||||
|
||||
private static final IAdvImgService advImgService = SpringUtils.getBean(IAdvImgService.class);
|
||||
private static final ISiteConfigService siteConfigService = SpringUtils.getBean(ISiteConfigService.class);
|
||||
private static final IServiceCateService serviceCateService = SpringUtils.getBean(IServiceCateService.class);
|
||||
private static final IServiceGoodsService serviceGoodsService = SpringUtils.getBean(IServiceGoodsService.class);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取广告图片列表
|
||||
*
|
||||
* @return 广告图片列表
|
||||
* <p>
|
||||
* 接口说明：
|
||||
* - 根据广告类型获取对应的图片列表
|
||||
* - 自动添加图片CDN前缀
|
||||
* - 支持多种广告位配置
|
||||
*/
|
||||
public Map<String, Object> getAdvImgData(long type) {
|
||||
try {
|
||||
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
// 构建查询条件
|
||||
AdvImg advImgQuery = new AdvImg();
|
||||
advImgQuery.setType(type);
|
||||
advImgQuery.setStatus(1L);
|
||||
|
||||
// 查询广告图片列表
|
||||
List<AdvImg> advImgList = advImgService.selectAdvImgList(advImgQuery);
|
||||
System.out.println("#####################"+advImgList.size());
|
||||
// 为每张图片添加CDN前缀
|
||||
for (AdvImg advImg : advImgList) {
|
||||
advImg.setImage(AppletControllerUtil.buildImageUrl(advImg.getImage()));
|
||||
}
|
||||
result.put("data", advImgList);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletWarning("获取广告图片失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取首页通知公告列表接口
|
||||
*
|
||||
* @return 上线状态的通知公告列表
|
||||
* <p>
|
||||
* 接口说明：
|
||||
* - 查询config_seven配置中的通知公告数据
|
||||
* - 只返回status=1（上线）状态的公告
|
||||
* - 按sort字段升序排列
|
||||
* - 返回title、content、link、sort等字段
|
||||
* - 无需用户登录验证
|
||||
* <p>
|
||||
*/
|
||||
public Map<String, Object> getHomeNoticeList(String categoryParam) {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
String filterCategory = null;
|
||||
if ("1".equals(categoryParam)) {
|
||||
filterCategory = "home";
|
||||
} else if ("2".equals(categoryParam)) {
|
||||
filterCategory = "activity";
|
||||
}
|
||||
// 1. 查询config_seven配置
|
||||
SiteConfig configQuery = new SiteConfig();
|
||||
configQuery.setName("config_seven");
|
||||
List<SiteConfig> configList = siteConfigService.selectSiteConfigList(configQuery);
|
||||
|
||||
if (configList.isEmpty()) {
|
||||
// 配置不存在时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
SiteConfig config = configList.get(0);
|
||||
String configValue = config.getValue();
|
||||
|
||||
if (configValue == null || configValue.trim().isEmpty()) {
|
||||
// 配置值为空时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 2. 解析JSON配置
|
||||
JSONObject configJson;
|
||||
try {
|
||||
configJson = JSONObject.parseObject(configValue);
|
||||
} catch (Exception e) {
|
||||
System.err.println("解析config_seven配置JSON失败：" + e.getMessage());
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 3. 获取notice数组
|
||||
if (!configJson.containsKey("notice")) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
Object noticeObj = configJson.get("notice");
|
||||
if (!(noticeObj instanceof JSONArray)) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
JSONArray noticeArray = (JSONArray) noticeObj;
|
||||
|
||||
// 4. 过滤上线状态的公告并构建返回数据
|
||||
List<Map<String, Object>> resultList = new ArrayList<>();
|
||||
|
||||
for (int i = 0; i < noticeArray.size(); i++) {
|
||||
try {
|
||||
JSONObject noticeItem = noticeArray.getJSONObject(i);
|
||||
// 检查状态是否为上线（status=1）
|
||||
Integer status = noticeItem.getInteger("status");
|
||||
if (status == null || status != 1) {
|
||||
continue; // 跳过下线或状态异常的公告
|
||||
}
|
||||
// 新增：按分类过滤
|
||||
if (filterCategory != null) {
|
||||
String itemCategory = noticeItem.getString("category");
|
||||
if (itemCategory == null) itemCategory = "home"; // 兼容老数据
|
||||
if (!filterCategory.equals(itemCategory)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// 构建公告数据
|
||||
Map<String, Object> notice = new HashMap<>();
|
||||
notice.put("title", noticeItem.getString("title"));
|
||||
notice.put("content", noticeItem.getString("content"));
|
||||
notice.put("link", noticeItem.getString("link"));
|
||||
notice.put("sort", noticeItem.getInteger("sort"));
|
||||
notice.put("status", status);
|
||||
resultList.add(notice);
|
||||
} catch (Exception e) {
|
||||
// 单个公告解析失败时跳过，继续处理其他公告
|
||||
System.err.println("解析单个公告数据失败：" + e.getMessage());
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// 5. 按sort字段升序排序
|
||||
resultList.sort((a, b) -> {
|
||||
Integer sortA = (Integer) a.get("sort");
|
||||
Integer sortB = (Integer) b.get("sort");
|
||||
if (sortA == null) sortA = Integer.MAX_VALUE;
|
||||
if (sortB == null) sortB = Integer.MAX_VALUE;
|
||||
return sortA.compareTo(sortB);
|
||||
});
|
||||
result.put("data", resultList);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取首页通知公告列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取通知公告列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取服务分类列表
|
||||
* 功能说明：
|
||||
* - 获取状态为启用的服务分类
|
||||
* - 支持二级分类树形结构
|
||||
* - 将二级分类组装在一级分类下的children字段
|
||||
* - 只返回title和icon字段
|
||||
* - 自动添加图片CDN前缀
|
||||
* - 支持用户登录状态验证（可选）
|
||||
*
|
||||
* @return 分类树形列表数据（只包含title和icon）
|
||||
*/
|
||||
public Map<String, Object> getServiceCategories() {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
|
||||
// 1. 查询所有启用状态的服务分类
|
||||
ServiceCate serviceCateQuery = new ServiceCate();
|
||||
serviceCateQuery.setStatus(1L);
|
||||
serviceCateQuery.setType(1L);
|
||||
List<ServiceCate> allCategoryList = serviceCateService.selectServiceCateList(serviceCateQuery);
|
||||
|
||||
// 2. 分离一级分类和二级分类
|
||||
List<ServiceCate> firstLevelCategories = new ArrayList<>();
|
||||
Map<Long, List<ServiceCate>> secondLevelMap = new HashMap<>();
|
||||
|
||||
for (ServiceCate category : allCategoryList) {
|
||||
if (category.getParentId() == null || category.getParentId() == 0L) {
|
||||
// 一级分类
|
||||
firstLevelCategories.add(category);
|
||||
} else {
|
||||
// 二级分类，按父级ID分组
|
||||
secondLevelMap.computeIfAbsent(category.getParentId(), k -> new ArrayList<>()).add(category);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 构建简化的分类数据（只包含title和icon）
|
||||
List<Map<String, Object>> resultList = new ArrayList<>();
|
||||
|
||||
for (ServiceCate firstLevel : firstLevelCategories) {
|
||||
Map<String, Object> firstLevelData = new HashMap<>();
|
||||
firstLevelData.put("id", firstLevel.getId());
|
||||
firstLevelData.put("title", firstLevel.getTitle());
|
||||
firstLevelData.put("icon", AppletControllerUtil.buildImageUrl(firstLevel.getIcon()));
|
||||
|
||||
// 4. 处理二级分类
|
||||
List<Map<String, Object>> childrenList = new ArrayList<>();
|
||||
List<ServiceCate> children = secondLevelMap.get(firstLevel.getId());
|
||||
if (children != null && !children.isEmpty()) {
|
||||
for (ServiceCate child : children) {
|
||||
Map<String, Object> childData = new HashMap<>();
|
||||
childData.put("id", child.getId());
|
||||
childData.put("title", child.getTitle());
|
||||
childData.put("icon", AppletControllerUtil.buildImageUrl(child.getIcon()));
|
||||
childrenList.add(childData);
|
||||
}
|
||||
}
|
||||
firstLevelData.put("children", childrenList);
|
||||
|
||||
resultList.add(firstLevelData);
|
||||
}
|
||||
result.put("data", resultList);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("获取服务分类列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取活动专区展示接口
|
||||
* 查询config_eight配置，返回activities数组
|
||||
*/
|
||||
public Map<String, Object> getActivityList() {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
// 查询config_eight配置
|
||||
SiteConfig configQuery = new SiteConfig();
|
||||
configQuery.setName("config_eight");
|
||||
List<SiteConfig> configList = siteConfigService.selectSiteConfigList(configQuery);
|
||||
|
||||
if (configList.isEmpty()) {
|
||||
// 配置不存在时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
SiteConfig config = configList.get(0);
|
||||
String configValue = config.getValue();
|
||||
|
||||
if (configValue == null || configValue.trim().isEmpty()) {
|
||||
// 配置值为空时返回空数组
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 解析JSON配置
|
||||
JSONObject configJson;
|
||||
try {
|
||||
configJson = JSONObject.parseObject(configValue);
|
||||
} catch (Exception e) {
|
||||
System.err.println("解析config_eight配置JSON失败：" + e.getMessage());
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
|
||||
// 获取activities数组
|
||||
if (!configJson.containsKey("activities")) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
Object activitiesObj = configJson.get("activities");
|
||||
if (!(activitiesObj instanceof JSONArray)) {
|
||||
return AppletControllerUtil.appletSuccess(new ArrayList<>());
|
||||
}
|
||||
JSONArray activitiesArray = (JSONArray) activitiesObj;
|
||||
// 直接返回activities数组
|
||||
result.put("data", activitiesArray);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取活动专区列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取活动专区列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 首页拼团专区列表接口
|
||||
* 查询type=1且isgroup=1的服务商品前4个
|
||||
* 返回icon、标题、price、groupprice字段
|
||||
*/
|
||||
public Map<String, Object> getGroupList() {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
// 构建查询条件
|
||||
ServiceGoods queryGoods = new ServiceGoods();
|
||||
queryGoods.setType(1); // type=1
|
||||
queryGoods.setIsgroup(1); // isgroup=1
|
||||
queryGoods.setStatus("1"); // 只查询启用状态的商品
|
||||
|
||||
// 查询服务商品列表
|
||||
List<ServiceGoods> goodsList = serviceGoodsService.selectServiceGoodsList(queryGoods);
|
||||
|
||||
// 只取前4个
|
||||
if (goodsList.size() > 4) {
|
||||
goodsList = goodsList.subList(0, 6);
|
||||
}
|
||||
|
||||
// 构建返回数据
|
||||
List<Map<String, Object>> resultList = new ArrayList<>();
|
||||
|
||||
for (ServiceGoods goods : goodsList) {
|
||||
Map<String, Object> goodsData = new HashMap<>();
|
||||
|
||||
// 基本信息
|
||||
goodsData.put("id", goods.getId());
|
||||
goodsData.put("groupnum", goods.getGroupnum());
|
||||
goodsData.put("title", goods.getTitle());
|
||||
goodsData.put("price", goods.getPrice() != null ? goods.getPrice().toString() : "0.00");
|
||||
goodsData.put("groupprice", goods.getGroupprice() != null ? goods.getGroupprice().toString() : "0.00");
|
||||
|
||||
// 处理图片URL - 添加CDN前缀
|
||||
goodsData.put("icon", AppletControllerUtil.buildImageUrl(goods.getIcon()));
|
||||
|
||||
resultList.add(goodsData);
|
||||
}
|
||||
result.put("data", resultList);
|
||||
return result;
|
||||
|
||||
} catch (Exception e) {
|
||||
System.err.println("获取拼团专区列表异常：" + e.getMessage());
|
||||
return AppletControllerUtil.appletError("获取拼团专区列表失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取系统配置信息
|
||||
* 功能说明：
|
||||
* - 根据配置名称获取对应的配置值
|
||||
* - 配置值以JSON格式返回
|
||||
* - 支持动态配置管理
|
||||
*
|
||||
* @param name 配置项名称
|
||||
* @return 配置信息数据
|
||||
*/
|
||||
public Map<String, Object> getConfig(String name) {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
name="config_two";
|
||||
// 参数验证
|
||||
if (StringUtils.isEmpty(name)) {
|
||||
return AppletControllerUtil.appletWarning("配置名称不能为空");
|
||||
}
|
||||
// 查询配置信息
|
||||
SiteConfig config = AppletControllerUtil.getSiteConfig(name, siteConfigService);
|
||||
if (config == null) {
|
||||
return AppletControllerUtil.appletWarning("未找到指定的配置项：" + name);
|
||||
}
|
||||
// 解析配置值为JSON对象
|
||||
JSONObject configJson = AppletControllerUtil.parseConfigValue(config.getValue());
|
||||
result.put("data", configJson);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("获取配置信息失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取系统配置信息
|
||||
* 功能说明：
|
||||
* - 根据配置名称获取对应的配置值
|
||||
* - 配置值以JSON格式返回
|
||||
* - 支持动态配置管理
|
||||
*
|
||||
* @param name 配置项名称
|
||||
* @return 配置信息数据
|
||||
*/
|
||||
public Map<String, Object> getConfigData(String name) {
|
||||
try {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
|
||||
// 参数验证
|
||||
if (StringUtils.isEmpty(name)) {
|
||||
return AppletControllerUtil.appletWarning("配置名称不能为空");
|
||||
}
|
||||
// 查询配置信息
|
||||
SiteConfig config = AppletControllerUtil.getSiteConfig(name, siteConfigService);
|
||||
if (config == null) {
|
||||
return AppletControllerUtil.appletWarning("未找到指定的配置项：" + name);
|
||||
}
|
||||
// 解析配置值为JSON对象
|
||||
JSONObject configJson = AppletControllerUtil.parseConfigValue(config.getValue());
|
||||
result.put("data", configJson);
|
||||
return result;
|
||||
} catch (Exception e) {
|
||||
return AppletControllerUtil.appletError("获取配置信息失败：" + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断用户的会员性质
|
||||
* @param user 用户对象
|
||||
* @return 1=会员，0=新会员，2=续费会员，-1=未知
|
||||
*/
|
||||
public static int getMemberType(Users user) {
|
||||
if (user == null) return -1;
|
||||
Integer ismember = user.getIsmember();
|
||||
Object begin = null, end = null;
|
||||
try {
|
||||
begin = user.getClass().getMethod("getMemberBegin").invoke(user);
|
||||
end = user.getClass().getMethod("getMemberEnd").invoke(user);
|
||||
} catch (Exception e) {
|
||||
// 兼容没有getMemberBegin/getMemberEnd方法的情况
|
||||
}
|
||||
if (ismember != null && ismember == 0) {
|
||||
if (begin == null && end == null) {
|
||||
return 0; // 新会员
|
||||
} else if (begin != null && end != null) {
|
||||
return 2; // 续费会员
|
||||
}
|
||||
} else if (ismember != null && ismember == 1) {
|
||||
return 1; // 会员
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -59,10 +59,10 @@ public class PageUtil {
|
|||
pageData.put("data", tableDataInfo.getRows());
|
||||
pageData.put("from", from);
|
||||
pageData.put("last_page", lastPage);
|
||||
// pageData.put("next_page_url", nextPageUrl);
|
||||
pageData.put("next_page_url", nextPageUrl);
|
||||
pageData.put("per_page", String.valueOf(perPage));
|
||||
//pageData.put("prev_page_url", prevPageUrl);
|
||||
//pageData.put("to", to);
|
||||
pageData.put("prev_page_url", prevPageUrl);
|
||||
pageData.put("to", to);
|
||||
pageData.put("total", total);
|
||||
|
||||
return pageData;
|
||||
|
|
|
|||
|
|
@ -1,882 +0,0 @@
|
|||
package com.ruoyi.system.ControllerUtil;
|
||||
|
||||
import java.util.*;
|
||||
|
||||
/**
|
||||
* 红黑树算法实现
|
||||
*
|
||||
* 红黑树是一种自平衡二叉搜索树，具有以下特性：
|
||||
* 1. 每个节点要么是红色，要么是黑色
|
||||
* 2. 根节点是黑色
|
||||
* 3. 所有叶子节点（NIL）都是黑色
|
||||
* 4. 如果一个节点是红色，则它的两个子节点都是黑色
|
||||
* 5. 从任一节点到其每个叶子的所有简单路径都包含相同数目的黑色节点
|
||||
*
|
||||
* 时间复杂度：
|
||||
* - 查找：O(log n)
|
||||
* - 插入：O(log n)
|
||||
* - 删除：O(log n)
|
||||
*
|
||||
* 应用场景：
|
||||
* - Java TreeMap/TreeSet 底层实现
|
||||
* - 数据库索引
|
||||
* - 内存管理
|
||||
* - 任务调度
|
||||
*
|
||||
* @author Mr. Zhang Pan
|
||||
* @date 2025-01-03
|
||||
* @version 1.0
|
||||
* @param <T> 数据类型，必须实现Comparable接口
|
||||
*/
|
||||
public class RedBlackTree<T extends Comparable<T>> {
|
||||
|
||||
// ============================== 节点颜色常量 ==============================
|
||||
|
||||
/** 红色节点 */
|
||||
private static final boolean RED = true;
|
||||
|
||||
/** 黑色节点 */
|
||||
private static final boolean BLACK = false;
|
||||
|
||||
// ============================== 内部节点类 ==============================
|
||||
|
||||
/**
|
||||
* 红黑树节点
|
||||
*/
|
||||
private class Node {
|
||||
/** 节点数据 */
|
||||
T data;
|
||||
|
||||
/** 左子节点 */
|
||||
Node left;
|
||||
|
||||
/** 右子节点 */
|
||||
Node right;
|
||||
|
||||
/** 父节点 */
|
||||
Node parent;
|
||||
|
||||
/** 节点颜色 */
|
||||
boolean color;
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
*
|
||||
* @param data 节点数据
|
||||
* @param color 节点颜色
|
||||
*/
|
||||
Node(T data, boolean color) {
|
||||
this.data = data;
|
||||
this.color = color;
|
||||
this.left = null;
|
||||
this.right = null;
|
||||
this.parent = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造函数 - 默认红色
|
||||
*
|
||||
* @param data 节点数据
|
||||
*/
|
||||
Node(T data) {
|
||||
this(data, RED);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为红色节点
|
||||
*
|
||||
* @return true=红色，false=黑色
|
||||
*/
|
||||
boolean isRed() {
|
||||
return color == RED;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为黑色节点
|
||||
*
|
||||
* @return true=黑色，false=红色
|
||||
*/
|
||||
boolean isBlack() {
|
||||
return color == BLACK;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置为红色
|
||||
*/
|
||||
void setRed() {
|
||||
color = RED;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置为黑色
|
||||
*/
|
||||
void setBlack() {
|
||||
color = BLACK;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return String.format("%s(%s)", data, color == RED ? "R" : "B");
|
||||
}
|
||||
}
|
||||
|
||||
// ============================== 实例变量 ==============================
|
||||
|
||||
/** 根节点 */
|
||||
private Node root;
|
||||
|
||||
/** 树的大小 */
|
||||
private int size;
|
||||
|
||||
// ============================== 构造方法 ==============================
|
||||
|
||||
/**
|
||||
* 默认构造函数
|
||||
*/
|
||||
public RedBlackTree() {
|
||||
root = null;
|
||||
size = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造函数 - 从数组创建
|
||||
*
|
||||
* @param array 数据数组
|
||||
*/
|
||||
public RedBlackTree(T[] array) {
|
||||
this();
|
||||
if (array != null) {
|
||||
for (T item : array) {
|
||||
if (item != null) {
|
||||
insert(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造函数 - 从集合创建
|
||||
*
|
||||
* @param collection 数据集合
|
||||
*/
|
||||
public RedBlackTree(Collection<T> collection) {
|
||||
this();
|
||||
if (collection != null) {
|
||||
for (T item : collection) {
|
||||
if (item != null) {
|
||||
insert(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================== 基本操作 ==============================
|
||||
|
||||
/**
|
||||
* 获取树的大小
|
||||
*
|
||||
* @return 节点数量
|
||||
*/
|
||||
public int size() {
|
||||
return size;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断树是否为空
|
||||
*
|
||||
* @return true=空树，false=非空
|
||||
*/
|
||||
public boolean isEmpty() {
|
||||
return size == 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空树
|
||||
*/
|
||||
public void clear() {
|
||||
root = null;
|
||||
size = 0;
|
||||
}
|
||||
|
||||
// ============================== 查找操作 ==============================
|
||||
|
||||
/**
|
||||
* 查找指定数据
|
||||
*
|
||||
* @param data 要查找的数据
|
||||
* @return true=存在，false=不存在
|
||||
*/
|
||||
public boolean contains(T data) {
|
||||
return findNode(data) != null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找节点
|
||||
*
|
||||
* @param data 要查找的数据
|
||||
* @return 找到的节点，null表示不存在
|
||||
*/
|
||||
private Node findNode(T data) {
|
||||
if (data == null) return null;
|
||||
|
||||
Node current = root;
|
||||
while (current != null) {
|
||||
int cmp = data.compareTo(current.data);
|
||||
if (cmp == 0) {
|
||||
return current;
|
||||
} else if (cmp < 0) {
|
||||
current = current.left;
|
||||
} else {
|
||||
current = current.right;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找最小值
|
||||
*
|
||||
* @return 最小值，null表示空树
|
||||
*/
|
||||
public T findMin() {
|
||||
Node minNode = findMinNode(root);
|
||||
return minNode != null ? minNode.data : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找最大值
|
||||
*
|
||||
* @return 最大值，null表示空树
|
||||
*/
|
||||
public T findMax() {
|
||||
Node maxNode = findMaxNode(root);
|
||||
return maxNode != null ? maxNode.data : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找最小节点
|
||||
*
|
||||
* @param node 起始节点
|
||||
* @return 最小节点
|
||||
*/
|
||||
private Node findMinNode(Node node) {
|
||||
if (node == null) return null;
|
||||
while (node.left != null) {
|
||||
node = node.left;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查找最大节点
|
||||
*
|
||||
* @param node 起始节点
|
||||
* @return 最大节点
|
||||
*/
|
||||
private Node findMaxNode(Node node) {
|
||||
if (node == null) return null;
|
||||
while (node.right != null) {
|
||||
node = node.right;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
// ============================== 插入操作 ==============================
|
||||
|
||||
/**
|
||||
* 插入数据
|
||||
*
|
||||
* @param data 要插入的数据
|
||||
* @return true=插入成功，false=数据已存在
|
||||
*/
|
||||
public boolean insert(T data) {
|
||||
if (data == null) return false;
|
||||
|
||||
// 空树情况
|
||||
if (root == null) {
|
||||
root = new Node(data, BLACK);
|
||||
size++;
|
||||
return true;
|
||||
}
|
||||
|
||||
// 查找插入位置
|
||||
Node parent = null;
|
||||
Node current = root;
|
||||
int cmp = 0;
|
||||
|
||||
while (current != null) {
|
||||
parent = current;
|
||||
cmp = data.compareTo(current.data);
|
||||
if (cmp == 0) {
|
||||
return false; // 数据已存在
|
||||
} else if (cmp < 0) {
|
||||
current = current.left;
|
||||
} else {
|
||||
current = current.right;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新节点
|
||||
Node newNode = new Node(data, RED);
|
||||
newNode.parent = parent;
|
||||
|
||||
// 插入新节点
|
||||
if (cmp < 0) {
|
||||
parent.left = newNode;
|
||||
} else {
|
||||
parent.right = newNode;
|
||||
}
|
||||
|
||||
size++;
|
||||
|
||||
// 修复红黑树性质
|
||||
insertFixup(newNode);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 插入后修复红黑树性质
|
||||
*
|
||||
* @param node 新插入的节点
|
||||
*/
|
||||
private void insertFixup(Node node) {
|
||||
while (node != root && node.parent.isRed()) {
|
||||
if (node.parent == node.parent.parent.left) {
|
||||
// 父节点是祖父节点的左子节点
|
||||
Node uncle = node.parent.parent.right;
|
||||
|
||||
if (uncle != null && uncle.isRed()) {
|
||||
// 情况1：叔叔节点是红色
|
||||
node.parent.setBlack();
|
||||
uncle.setBlack();
|
||||
node.parent.parent.setRed();
|
||||
node = node.parent.parent;
|
||||
} else {
|
||||
if (node == node.parent.right) {
|
||||
// 情况2：叔叔节点是黑色，当前节点是右子节点
|
||||
node = node.parent;
|
||||
leftRotate(node);
|
||||
}
|
||||
// 情况3：叔叔节点是黑色，当前节点是左子节点
|
||||
node.parent.setBlack();
|
||||
node.parent.parent.setRed();
|
||||
rightRotate(node.parent.parent);
|
||||
}
|
||||
} else {
|
||||
// 父节点是祖父节点的右子节点（对称情况）
|
||||
Node uncle = node.parent.parent.left;
|
||||
|
||||
if (uncle != null && uncle.isRed()) {
|
||||
// 情况1：叔叔节点是红色
|
||||
node.parent.setBlack();
|
||||
uncle.setBlack();
|
||||
node.parent.parent.setRed();
|
||||
node = node.parent.parent;
|
||||
} else {
|
||||
if (node == node.parent.left) {
|
||||
// 情况2：叔叔节点是黑色，当前节点是左子节点
|
||||
node = node.parent;
|
||||
rightRotate(node);
|
||||
}
|
||||
// 情况3：叔叔节点是黑色，当前节点是右子节点
|
||||
node.parent.setBlack();
|
||||
node.parent.parent.setRed();
|
||||
leftRotate(node.parent.parent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根节点始终为黑色
|
||||
root.setBlack();
|
||||
}
|
||||
|
||||
// ============================== 删除操作 ==============================
|
||||
|
||||
/**
|
||||
* 删除指定数据
|
||||
*
|
||||
* @param data 要删除的数据
|
||||
* @return true=删除成功，false=数据不存在
|
||||
*/
|
||||
public boolean delete(T data) {
|
||||
if (data == null) return false;
|
||||
|
||||
Node nodeToDelete = findNode(data);
|
||||
if (nodeToDelete == null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
deleteNode(nodeToDelete);
|
||||
size--;
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除节点
|
||||
*
|
||||
* @param node 要删除的节点
|
||||
*/
|
||||
private void deleteNode(Node node) {
|
||||
Node y = node;
|
||||
Node x;
|
||||
boolean yOriginalColor = y.color;
|
||||
|
||||
if (node.left == null) {
|
||||
x = node.right;
|
||||
transplant(node, node.right);
|
||||
} else if (node.right == null) {
|
||||
x = node.left;
|
||||
transplant(node, node.left);
|
||||
} else {
|
||||
y = findMinNode(node.right);
|
||||
yOriginalColor = y.color;
|
||||
x = y.right;
|
||||
|
||||
if (y.parent == node) {
|
||||
if (x != null) x.parent = y;
|
||||
} else {
|
||||
transplant(y, y.right);
|
||||
y.right = node.right;
|
||||
if (y.right != null) y.right.parent = y;
|
||||
}
|
||||
|
||||
transplant(node, y);
|
||||
y.left = node.left;
|
||||
if (y.left != null) y.left.parent = y;
|
||||
y.color = node.color;
|
||||
}
|
||||
|
||||
if (yOriginalColor == BLACK) {
|
||||
deleteFixup(x);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 节点移植
|
||||
*
|
||||
* @param u 被替换的节点
|
||||
* @param v 替换节点
|
||||
*/
|
||||
private void transplant(Node u, Node v) {
|
||||
if (u.parent == null) {
|
||||
root = v;
|
||||
} else if (u == u.parent.left) {
|
||||
u.parent.left = v;
|
||||
} else {
|
||||
u.parent.right = v;
|
||||
}
|
||||
|
||||
if (v != null) {
|
||||
v.parent = u.parent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除后修复红黑树性质
|
||||
*
|
||||
* @param node 替换节点
|
||||
*/
|
||||
private void deleteFixup(Node node) {
|
||||
while (node != root && (node == null || node.isBlack())) {
|
||||
if (node == getParent(node).left) {
|
||||
Node sibling = getParent(node).right;
|
||||
|
||||
if (sibling != null && sibling.isRed()) {
|
||||
sibling.setBlack();
|
||||
getParent(node).setRed();
|
||||
leftRotate(getParent(node));
|
||||
sibling = getParent(node).right;
|
||||
}
|
||||
|
||||
if ((sibling == null) ||
|
||||
(getLeft(sibling) == null || getLeft(sibling).isBlack()) &&
|
||||
(getRight(sibling) == null || getRight(sibling).isBlack())) {
|
||||
if (sibling != null) sibling.setRed();
|
||||
node = getParent(node);
|
||||
} else {
|
||||
if (getRight(sibling) == null || getRight(sibling).isBlack()) {
|
||||
if (getLeft(sibling) != null) getLeft(sibling).setBlack();
|
||||
if (sibling != null) sibling.setRed();
|
||||
rightRotate(sibling);
|
||||
sibling = getParent(node).right;
|
||||
}
|
||||
|
||||
if (sibling != null) sibling.color = getParent(node).color;
|
||||
getParent(node).setBlack();
|
||||
if (getRight(sibling) != null) getRight(sibling).setBlack();
|
||||
leftRotate(getParent(node));
|
||||
node = root;
|
||||
}
|
||||
} else {
|
||||
Node sibling = getParent(node).left;
|
||||
|
||||
if (sibling != null && sibling.isRed()) {
|
||||
sibling.setBlack();
|
||||
getParent(node).setRed();
|
||||
rightRotate(getParent(node));
|
||||
sibling = getParent(node).left;
|
||||
}
|
||||
|
||||
if ((sibling == null) ||
|
||||
(getRight(sibling) == null || getRight(sibling).isBlack()) &&
|
||||
(getLeft(sibling) == null || getLeft(sibling).isBlack())) {
|
||||
if (sibling != null) sibling.setRed();
|
||||
node = getParent(node);
|
||||
} else {
|
||||
if (getLeft(sibling) == null || getLeft(sibling).isBlack()) {
|
||||
if (getRight(sibling) != null) getRight(sibling).setBlack();
|
||||
if (sibling != null) sibling.setRed();
|
||||
leftRotate(sibling);
|
||||
sibling = getParent(node).left;
|
||||
}
|
||||
|
||||
if (sibling != null) sibling.color = getParent(node).color;
|
||||
getParent(node).setBlack();
|
||||
if (getLeft(sibling) != null) getLeft(sibling).setBlack();
|
||||
rightRotate(getParent(node));
|
||||
node = root;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node != null) node.setBlack();
|
||||
}
|
||||
|
||||
// ============================== 旋转操作 ==============================
|
||||
|
||||
/**
|
||||
* 左旋转
|
||||
*
|
||||
* @param node 旋转节点
|
||||
*/
|
||||
private void leftRotate(Node node) {
|
||||
Node rightChild = node.right;
|
||||
node.right = rightChild.left;
|
||||
|
||||
if (rightChild.left != null) {
|
||||
rightChild.left.parent = node;
|
||||
}
|
||||
|
||||
rightChild.parent = node.parent;
|
||||
|
||||
if (node.parent == null) {
|
||||
root = rightChild;
|
||||
} else if (node == node.parent.left) {
|
||||
node.parent.left = rightChild;
|
||||
} else {
|
||||
node.parent.right = rightChild;
|
||||
}
|
||||
|
||||
rightChild.left = node;
|
||||
node.parent = rightChild;
|
||||
}
|
||||
|
||||
/**
|
||||
* 右旋转
|
||||
*
|
||||
* @param node 旋转节点
|
||||
*/
|
||||
private void rightRotate(Node node) {
|
||||
Node leftChild = node.left;
|
||||
node.left = leftChild.right;
|
||||
|
||||
if (leftChild.right != null) {
|
||||
leftChild.right.parent = node;
|
||||
}
|
||||
|
||||
leftChild.parent = node.parent;
|
||||
|
||||
if (node.parent == null) {
|
||||
root = leftChild;
|
||||
} else if (node == node.parent.right) {
|
||||
node.parent.right = leftChild;
|
||||
} else {
|
||||
node.parent.left = leftChild;
|
||||
}
|
||||
|
||||
leftChild.right = node;
|
||||
node.parent = leftChild;
|
||||
}
|
||||
|
||||
// ============================== 辅助方法 ==============================
|
||||
|
||||
/**
|
||||
* 安全获取父节点
|
||||
*/
|
||||
private Node getParent(Node node) {
|
||||
return node != null ? node.parent : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全获取左子节点
|
||||
*/
|
||||
private Node getLeft(Node node) {
|
||||
return node != null ? node.left : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全获取右子节点
|
||||
*/
|
||||
private Node getRight(Node node) {
|
||||
return node != null ? node.right : null;
|
||||
}
|
||||
|
||||
// ============================== 遍历操作 ==============================
|
||||
|
||||
/**
|
||||
* 中序遍历
|
||||
*
|
||||
* @return 有序数据列表
|
||||
*/
|
||||
public List<T> inorderTraversal() {
|
||||
List<T> result = new ArrayList<>();
|
||||
inorderTraversal(root, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 中序遍历递归方法
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @param result 结果列表
|
||||
*/
|
||||
private void inorderTraversal(Node node, List<T> result) {
|
||||
if (node != null) {
|
||||
inorderTraversal(node.left, result);
|
||||
result.add(node.data);
|
||||
inorderTraversal(node.right, result);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 前序遍历
|
||||
*
|
||||
* @return 数据列表
|
||||
*/
|
||||
public List<T> preorderTraversal() {
|
||||
List<T> result = new ArrayList<>();
|
||||
preorderTraversal(root, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 前序遍历递归方法
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @param result 结果列表
|
||||
*/
|
||||
private void preorderTraversal(Node node, List<T> result) {
|
||||
if (node != null) {
|
||||
result.add(node.data);
|
||||
preorderTraversal(node.left, result);
|
||||
preorderTraversal(node.right, result);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 后序遍历
|
||||
*
|
||||
* @return 数据列表
|
||||
*/
|
||||
public List<T> postorderTraversal() {
|
||||
List<T> result = new ArrayList<>();
|
||||
postorderTraversal(root, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 后序遍历递归方法
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @param result 结果列表
|
||||
*/
|
||||
private void postorderTraversal(Node node, List<T> result) {
|
||||
if (node != null) {
|
||||
postorderTraversal(node.left, result);
|
||||
postorderTraversal(node.right, result);
|
||||
result.add(node.data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 层序遍历
|
||||
*
|
||||
* @return 数据列表
|
||||
*/
|
||||
public List<T> levelOrderTraversal() {
|
||||
List<T> result = new ArrayList<>();
|
||||
if (root == null) return result;
|
||||
|
||||
Queue<Node> queue = new LinkedList<>();
|
||||
queue.offer(root);
|
||||
|
||||
while (!queue.isEmpty()) {
|
||||
Node node = queue.poll();
|
||||
result.add(node.data);
|
||||
|
||||
if (node.left != null) {
|
||||
queue.offer(node.left);
|
||||
}
|
||||
if (node.right != null) {
|
||||
queue.offer(node.right);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// ============================== 验证方法 ==============================
|
||||
|
||||
/**
|
||||
* 验证红黑树性质
|
||||
*
|
||||
* @return true=符合红黑树性质，false=不符合
|
||||
*/
|
||||
public boolean isValidRedBlackTree() {
|
||||
return isValidRedBlackTree(root) != -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证红黑树性质（递归）
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @return 黑色节点数量，-1表示不符合红黑树性质
|
||||
*/
|
||||
private int isValidRedBlackTree(Node node) {
|
||||
if (node == null) return 1; // NIL节点为黑色
|
||||
|
||||
// 检查红色节点的子节点必须是黑色
|
||||
if (node.isRed()) {
|
||||
if ((node.left != null && node.left.isRed()) ||
|
||||
(node.right != null && node.right.isRed())) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
// 递归检查左右子树
|
||||
int leftBlackHeight = isValidRedBlackTree(node.left);
|
||||
int rightBlackHeight = isValidRedBlackTree(node.right);
|
||||
|
||||
// 检查黑色高度是否相等
|
||||
if (leftBlackHeight == -1 || rightBlackHeight == -1 ||
|
||||
leftBlackHeight != rightBlackHeight) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
// 返回黑色节点数量
|
||||
return leftBlackHeight + (node.isBlack() ? 1 : 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取树的高度
|
||||
*
|
||||
* @return 树的高度
|
||||
*/
|
||||
public int getHeight() {
|
||||
return getHeight(root);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取树的高度（递归）
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @return 高度
|
||||
*/
|
||||
private int getHeight(Node node) {
|
||||
if (node == null) return 0;
|
||||
return 1 + Math.max(getHeight(node.left), getHeight(node.right));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取黑色高度
|
||||
*
|
||||
* @return 黑色高度
|
||||
*/
|
||||
public int getBlackHeight() {
|
||||
return getBlackHeight(root);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取黑色高度（递归）
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @return 黑色高度
|
||||
*/
|
||||
private int getBlackHeight(Node node) {
|
||||
if (node == null) return 1;
|
||||
int leftHeight = getBlackHeight(node.left);
|
||||
return leftHeight + (node.isBlack() ? 1 : 0);
|
||||
}
|
||||
|
||||
// ============================== 工具方法 ==============================
|
||||
|
||||
/**
|
||||
* 转换为数组
|
||||
*
|
||||
* @return 有序数组
|
||||
*/
|
||||
@SuppressWarnings("unchecked")
|
||||
public T[] toArray() {
|
||||
List<T> list = inorderTraversal();
|
||||
return (T[]) list.toArray();
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换为列表
|
||||
*
|
||||
* @return 有序列表
|
||||
*/
|
||||
public List<T> toList() {
|
||||
return inorderTraversal();
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印树结构
|
||||
*
|
||||
* @return 树结构字符串
|
||||
*/
|
||||
public String printTree() {
|
||||
if (root == null) return "Empty tree";
|
||||
|
||||
StringBuilder sb = new StringBuilder();
|
||||
printTree(root, "", true, sb);
|
||||
return sb.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印树结构（递归）
|
||||
*
|
||||
* @param node 当前节点
|
||||
* @param prefix 前缀
|
||||
* @param isLast 是否为最后一个节点
|
||||
* @param sb 字符串构建器
|
||||
*/
|
||||
private void printTree(Node node, String prefix, boolean isLast, StringBuilder sb) {
|
||||
if (node != null) {
|
||||
sb.append(prefix);
|
||||
sb.append(isLast ? "└── " : "├── ");
|
||||
sb.append(node.toString()).append("\n");
|
||||
|
||||
List<Node> children = new ArrayList<>();
|
||||
if (node.left != null) children.add(node.left);
|
||||
if (node.right != null) children.add(node.right);
|
||||
|
||||
for (int i = 0; i < children.size(); i++) {
|
||||
boolean last = (i == children.size() - 1);
|
||||
String newPrefix = prefix + (isLast ? " " : "│ ");
|
||||
if (children.get(i) == node.left) {
|
||||
printTree(node.left, newPrefix, node.right == null, sb);
|
||||
} else {
|
||||
printTree(node.right, newPrefix, true, sb);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return String.format("RedBlackTree[size=%d, height=%d, valid=%s]",
|
||||
size, getHeight(), isValidRedBlackTree());
|
||||
}
|
||||
}
|
||||
|
|
@ -1,326 +0,0 @@
|
|||
package com.ruoyi.system.ControllerUtil;
|
||||
|
||||
/**
|
||||
* 雪花算法 - 分布式唯一ID生成器
|
||||
*
|
||||
* 雪花算法原理：
|
||||
* - 64位Long类型数字
|
||||
* - 第1位：符号位，固定为0
|
||||
* - 第2-42位：时间戳（毫秒级），可使用69年
|
||||
* - 第43-52位：机器ID（10位），支持1024台机器
|
||||
* - 第53-64位：序列号（12位），每毫秒可生成4096个ID
|
||||
*
|
||||
* 优点：
|
||||
* 1. 高性能：本地生成，无网络消耗
|
||||
* 2. 高可用：不依赖数据库或第三方系统
|
||||
* 3. 高并发：每毫秒可生成4096个ID
|
||||
* 4. 趋势递增：时间戳在高位，ID整体趋势递增
|
||||
* 5. 信息安全：不暴露系统信息
|
||||
*
|
||||
* @author Mr. Zhang Pan
|
||||
* @date 2025-01-03
|
||||
* @version 1.0
|
||||
*/
|
||||
public class SnowflakeIdGenerator {
|
||||
|
||||
// ============================== 位数分配 ==============================
|
||||
|
||||
/** 机器ID所占的位数 */
|
||||
private final long workerIdBits = 10L;
|
||||
|
||||
/** 序列号所占的位数 */
|
||||
private final long sequenceBits = 12L;
|
||||
|
||||
/** 机器ID最大值 (2^10 - 1 = 1023) */
|
||||
private final long maxWorkerId = ~(-1L << workerIdBits);
|
||||
|
||||
/** 序列号最大值 (2^12 - 1 = 4095) */
|
||||
private final long sequenceMask = ~(-1L << sequenceBits);
|
||||
|
||||
/** 机器ID左移位数 */
|
||||
private final long workerIdShift = sequenceBits;
|
||||
|
||||
/** 时间戳左移位数 */
|
||||
private final long timestampLeftShift = sequenceBits + workerIdBits;
|
||||
|
||||
// ============================== 实例变量 ==============================
|
||||
|
||||
/** 机器ID */
|
||||
private final long workerId;
|
||||
|
||||
/** 上次生成ID的时间戳 */
|
||||
private long lastTimestamp = -1L;
|
||||
|
||||
/** 序列号 */
|
||||
private long sequence = 0L;
|
||||
|
||||
/** 起始时间戳 (2021-01-01 00:00:00) */
|
||||
private final long startTimestamp = 1609459200000L;
|
||||
|
||||
// ============================== 构造方法 ==============================
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
*
|
||||
* @param workerId 机器ID (0-1023)
|
||||
* @throws IllegalArgumentException 机器ID超出范围时抛出
|
||||
*/
|
||||
public SnowflakeIdGenerator(long workerId) {
|
||||
if (workerId > maxWorkerId || workerId < 0) {
|
||||
throw new IllegalArgumentException(
|
||||
String.format("机器ID必须在0到%d之间", maxWorkerId));
|
||||
}
|
||||
this.workerId = workerId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认构造函数 - 使用本机IP最后一段作为机器ID
|
||||
*/
|
||||
public SnowflakeIdGenerator() {
|
||||
this.workerId = getDefaultWorkerId();
|
||||
}
|
||||
|
||||
// ============================== 核心方法 ==============================
|
||||
|
||||
/**
|
||||
* 生成下一个唯一ID
|
||||
*
|
||||
* @return 64位长整型ID
|
||||
* @throws RuntimeException 时钟回拨时抛出
|
||||
*/
|
||||
public synchronized long nextId() {
|
||||
long timestamp = timeGen();
|
||||
|
||||
// 检查时钟回拨
|
||||
if (timestamp < lastTimestamp) {
|
||||
throw new RuntimeException(
|
||||
String.format("时钟回拨异常，拒绝生成ID。当前时间戳：%d，上次时间戳：%d",
|
||||
timestamp, lastTimestamp));
|
||||
}
|
||||
|
||||
// 同一毫秒内
|
||||
if (lastTimestamp == timestamp) {
|
||||
// 序列号递增
|
||||
sequence = (sequence + 1) & sequenceMask;
|
||||
|
||||
// 序列号溢出，等待下一毫秒
|
||||
if (sequence == 0) {
|
||||
timestamp = tilNextMillis(lastTimestamp);
|
||||
}
|
||||
} else {
|
||||
// 不同毫秒，序列号重置
|
||||
sequence = 0L;
|
||||
}
|
||||
|
||||
// 更新上次时间戳
|
||||
lastTimestamp = timestamp;
|
||||
|
||||
// 组装64位ID
|
||||
return ((timestamp - startTimestamp) << timestampLeftShift) |
|
||||
(workerId << workerIdShift) |
|
||||
sequence;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量生成ID
|
||||
*
|
||||
* @param count 生成数量
|
||||
* @return ID数组
|
||||
*/
|
||||
public long[] nextIds(int count) {
|
||||
if (count <= 0) {
|
||||
throw new IllegalArgumentException("生成数量必须大于0");
|
||||
}
|
||||
|
||||
long[] ids = new long[count];
|
||||
for (int i = 0; i < count; i++) {
|
||||
ids[i] = nextId();
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
// ============================== 辅助方法 ==============================
|
||||
|
||||
/**
|
||||
* 获取当前时间戳（毫秒）
|
||||
*
|
||||
* @return 当前时间戳
|
||||
*/
|
||||
private long timeGen() {
|
||||
return System.currentTimeMillis();
|
||||
}
|
||||
|
||||
/**
|
||||
* 等待下一毫秒
|
||||
*
|
||||
* @param lastTimestamp 上次时间戳
|
||||
* @return 下一毫秒时间戳
|
||||
*/
|
||||
private long tilNextMillis(long lastTimestamp) {
|
||||
long timestamp = timeGen();
|
||||
while (timestamp <= lastTimestamp) {
|
||||
timestamp = timeGen();
|
||||
}
|
||||
return timestamp;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取默认机器ID（基于本机IP）
|
||||
*
|
||||
* @return 机器ID
|
||||
*/
|
||||
private long getDefaultWorkerId() {
|
||||
try {
|
||||
java.net.InetAddress inetAddress = java.net.InetAddress.getLocalHost();
|
||||
String hostAddress = inetAddress.getHostAddress();
|
||||
String[] segments = hostAddress.split("\\.");
|
||||
if (segments.length == 4) {
|
||||
// 使用IP最后一段作为机器ID
|
||||
long id = Long.parseLong(segments[3]);
|
||||
return id & maxWorkerId; // 确保在范围内
|
||||
}
|
||||
} catch (Exception e) {
|
||||
// 获取失败时使用随机数
|
||||
return (long) (Math.random() * maxWorkerId);
|
||||
}
|
||||
return 1L; // 默认值
|
||||
}
|
||||
|
||||
// ============================== ID解析方法 ==============================
|
||||
|
||||
/**
|
||||
* 解析雪花ID的各个组成部分
|
||||
*
|
||||
* @param id 雪花ID
|
||||
* @return 解析结果Map
|
||||
*/
|
||||
public java.util.Map<String, Object> parseId(long id) {
|
||||
java.util.Map<String, Object> result = new java.util.HashMap<>();
|
||||
|
||||
// 提取各部分
|
||||
long sequence = id & sequenceMask;
|
||||
long workerId = (id >> workerIdShift) & ~(-1L << workerIdBits);
|
||||
long timestamp = (id >> timestampLeftShift) + startTimestamp;
|
||||
|
||||
result.put("id", id);
|
||||
result.put("timestamp", timestamp);
|
||||
result.put("workerId", workerId);
|
||||
result.put("sequence", sequence);
|
||||
result.put("datetime", new java.util.Date(timestamp));
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// ============================== 工具方法 ==============================
|
||||
|
||||
/**
|
||||
* 获取机器ID
|
||||
*
|
||||
* @return 当前机器ID
|
||||
*/
|
||||
public long getWorkerId() {
|
||||
return workerId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取起始时间戳
|
||||
*
|
||||
* @return 起始时间戳
|
||||
*/
|
||||
public long getStartTimestamp() {
|
||||
return startTimestamp;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查ID是否为雪花算法生成
|
||||
*
|
||||
* @param id 待检查的ID
|
||||
* @return true=是雪花ID，false=不是
|
||||
*/
|
||||
public boolean isSnowflakeId(long id) {
|
||||
try {
|
||||
java.util.Map<String, Object> parsed = parseId(id);
|
||||
long timestamp = (Long) parsed.get("timestamp");
|
||||
|
||||
// 检查时间戳是否合理（在起始时间之后，当前时间之前）
|
||||
return timestamp >= startTimestamp && timestamp <= System.currentTimeMillis();
|
||||
} catch (Exception e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================== 静态工具方法 ==============================
|
||||
|
||||
/** 默认实例 */
|
||||
private static volatile SnowflakeIdGenerator defaultInstance;
|
||||
|
||||
/**
|
||||
* 获取默认实例（单例模式）
|
||||
*
|
||||
* @return 默认雪花算法实例
|
||||
*/
|
||||
public static SnowflakeIdGenerator getDefaultInstance() {
|
||||
if (defaultInstance == null) {
|
||||
synchronized (SnowflakeIdGenerator.class) {
|
||||
if (defaultInstance == null) {
|
||||
defaultInstance = new SnowflakeIdGenerator();
|
||||
}
|
||||
}
|
||||
}
|
||||
return defaultInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速生成ID（使用默认实例）
|
||||
*
|
||||
* @return 雪花ID
|
||||
*/
|
||||
public static long generateId() {
|
||||
return getDefaultInstance().nextId();
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速生成ID字符串（使用默认实例）
|
||||
*
|
||||
* @return 雪花ID字符串
|
||||
*/
|
||||
public static String generateIdString() {
|
||||
return String.valueOf(generateId());
|
||||
}
|
||||
|
||||
// ============================== 性能测试方法 ==============================
|
||||
|
||||
/**
|
||||
* 性能测试
|
||||
*
|
||||
* @param count 测试数量
|
||||
* @return 测试结果
|
||||
*/
|
||||
public java.util.Map<String, Object> performanceTest(int count) {
|
||||
java.util.Map<String, Object> result = new java.util.HashMap<>();
|
||||
|
||||
long startTime = System.currentTimeMillis();
|
||||
java.util.Set<Long> idSet = new java.util.HashSet<>();
|
||||
|
||||
// 生成ID并检查重复
|
||||
for (int i = 0; i < count; i++) {
|
||||
long id = nextId();
|
||||
if (!idSet.add(id)) {
|
||||
result.put("duplicate", true);
|
||||
result.put("duplicateId", id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
long endTime = System.currentTimeMillis();
|
||||
long duration = endTime - startTime;
|
||||
|
||||
result.put("count", count);
|
||||
result.put("duration", duration + "ms");
|
||||
result.put("qps", count * 1000L / Math.max(duration, 1));
|
||||
result.put("duplicate", result.getOrDefault("duplicate", false));
|
||||
result.put("workerId", workerId);
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ public class WechatPayUtil {
|
|||
private static final String WECHAT_TRANSFER_URL = "https://api.mch.weixin.qq.com/mmpaymkttransfers/promotion/transfers"; // 企业付款
|
||||
|
||||
|
||||
public static final String PAY_FH = "https://1571276c.r3.cpolar.top/";
|
||||
public static final String PAY_FH = "https://4b29b18c.r3.cpolar.top/";
|
||||
/**
|
||||
* 其他配置常量
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -42,12 +42,6 @@ public class UserMemnerConsumptionLog extends BaseEntity
|
|||
@Excel(name = "备注说明")
|
||||
private String reamk;
|
||||
|
||||
/** 备注说明 */
|
||||
@Excel(name = "订单编号")
|
||||
private String orderid;
|
||||
|
||||
|
||||
|
||||
/** 消费前用户余额 */
|
||||
@Excel(name = "消费前用户余额")
|
||||
private BigDecimal beformoney;
|
||||
|
|
@ -220,14 +214,6 @@ public class UserMemnerConsumptionLog extends BaseEntity
|
|||
this.type = type;
|
||||
}
|
||||
|
||||
public String getOrderid() {
|
||||
return orderid;
|
||||
}
|
||||
|
||||
public void setOrderid(String orderid) {
|
||||
this.orderid = orderid;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ public class QiniuUploadUtil {
|
|||
DefaultPutRet putRet = JSON.parseObject(response.bodyString(), DefaultPutRet.class);
|
||||
|
||||
// 返回完整的访问URL
|
||||
return putRet.key;
|
||||
return "https://" + config.getDomain() + "/" + putRet.key;
|
||||
|
||||
} catch (QiniuException ex) {
|
||||
Response r = ex.response;
|
||||
|
|
|
|||
|
|
@ -72,7 +72,6 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="firstCateId != null "> and first_cate_id = #{firstCateId}</if>
|
||||
<if test="secondCateId != null "> and second_cate_id = #{secondCateId}</if>
|
||||
<if test="type != null "> and type = #{type}</if>
|
||||
<if test="isgroup != null "> and isgroup = #{isgroup}</if>
|
||||
|
||||
</where>
|
||||
order by id desc
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<result property="nowmoney" column="nowmoney" />
|
||||
<result property="createdAt" column="created_at" />
|
||||
<result property="type" column="type" />
|
||||
<result property="orderid" column="orderid" />
|
||||
|
||||
<result property="updatedAt" column="updated_at" />
|
||||
<result property="deletedAt" column="deleted_at" />
|
||||
|
|
@ -24,7 +23,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
</resultMap>
|
||||
|
||||
<sql id="selectUserMemnerConsumptionLogVo">
|
||||
select id, uid, consumptiontype, consumptiontime,orderid, consumptionmoney,type, reamk, beformoney, aftermoney, nowmoney, created_at, updated_at, deleted_at, del from user_memner_consumption_log
|
||||
select id, uid, consumptiontype, consumptiontime, consumptionmoney,type, reamk, beformoney, aftermoney, nowmoney, created_at, updated_at, deleted_at, del from user_memner_consumption_log
|
||||
</sql>
|
||||
|
||||
<select id="selectUserMemnerConsumptionLogList" parameterType="UserMemnerConsumptionLog" resultMap="UserMemnerConsumptionLogResult">
|
||||
|
|
@ -55,8 +54,6 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="deletedAt != null">deleted_at,</if>
|
||||
<if test="del != null">del,</if>
|
||||
<if test="type != null">type,</if>
|
||||
<if test="orderid != null">orderid,</if>
|
||||
|
||||
created_at,
|
||||
updated_at
|
||||
</trim>
|
||||
|
|
@ -72,7 +69,6 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="deletedAt != null">#{deletedAt},</if>
|
||||
<if test="del != null">#{del},</if>
|
||||
<if test="type != null">#{type},</if>
|
||||
<if test="orderid != null">#{orderid},</if>
|
||||
NOW(),
|
||||
NOW()
|
||||
</trim>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@
|
|||
"vue-meta": "2.4.0",
|
||||
"vue-router": "3.4.9",
|
||||
"vue-sku-form": "^0.4.1",
|
||||
"vue-ueditor-wrap": "^2.5.6",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,138 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<link rel="stylesheet" href="./../../themes/default/dialog.css?7dab4ea0">
|
||||
<script type="text/javascript" src="../internal.js?df5a6b9e"></script>
|
||||
<style type="text/css">
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 620px;
|
||||
padding: 10px;
|
||||
height: 399px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
}
|
||||
.wrapper .input::placeholder{
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.ai-operate {
|
||||
display: block;
|
||||
min-width: 8em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 30px;
|
||||
background: var(--edui-color-border);
|
||||
color: #111;
|
||||
border-radius: 15px;
|
||||
padding: 0 10px;
|
||||
margin: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.ai-operate:hover {
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: red !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper" id="app" v-cloak>
|
||||
|
||||
<div>
|
||||
<div v-if="selectText"
|
||||
style="line-height:30px;padding:0 10px;border-radius:5px;margin-bottom:10px;display:inline-flex;align-items:center;">
|
||||
<div style="margin-right:5px;">
|
||||
<i class="edui-iconfont edui-icon-outline" style="font-size:18px;"></i>
|
||||
</div>
|
||||
<div style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:550px;">
|
||||
{{ selectText }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="padding: 5px; border-radius: 30px; box-shadow: 0 0 10px #CCC;">
|
||||
<div class="flex-grow">
|
||||
<input type="text" v-model="inputText"
|
||||
class="input"
|
||||
style="width:540px;border-color:transparent;font-size:14px;"
|
||||
placeholder="告诉 AI 下一步应该如何？比如：帮我翻译成英语"/>
|
||||
</div>
|
||||
<div class="flex-shrink-0" style="width:32px;padding-right:5px;">
|
||||
<a href="javascript:;" class="btn primary"
|
||||
@click="doSubmit"
|
||||
style="width:30px;text-align:center;padding:0;border-radius:50%;">
|
||||
<i v-if="loading" class="edui-iconfont edui-icon-refresh"
|
||||
style="display:inline-block;animation:spin 2s linear infinite;"></i>
|
||||
<i v-else class="edui-iconfont edui-icon-right-direction"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="resultHtml || resultError"
|
||||
style="border-top:1px solid #F2F2F2;margin-top:10px;padding-top:10px;">
|
||||
<div v-if="resultError"
|
||||
style="color:red;background:rgba(255,0,0,0.1);margin-bottom:10px;padding:10px;border-radius:10px;">
|
||||
{{ resultError }}
|
||||
</div>
|
||||
<div class="flex flex-items-center" style="height:30px;">
|
||||
<div class="flex-grow">
|
||||
<i class="edui-iconfont edui-icon-robot" style="font-size:16px;"></i>
|
||||
以下为生成的结果
|
||||
</div>
|
||||
<div>
|
||||
<a v-if="!loading" @click="doInsert" href="javascript:;" class="btn sm">
|
||||
<i class="edui-iconfont edui-icon-page-break"></i>
|
||||
插入
|
||||
</a>
|
||||
<a v-if="!loading&&selectText" @click="doReplace" href="javascript:;" class="btn sm">
|
||||
<i class="edui-iconfont edui-icon-eraser"></i>
|
||||
替换
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top:10px;background:rgba(0,0,0,0.03);padding:10px;border-radius:10px;overflow:auto;"
|
||||
:style="{height:resultHeight}"
|
||||
>
|
||||
<div class="ub-html" v-html="resultHtml"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
style="border-top:1px solid #F2F2F2;margin-top:10px;padding-top:10px;">
|
||||
<div v-if="functions.length" style="color:#999;">
|
||||
<i class="edui-iconfont edui-icon-bell" style="font-size:16px;"></i>
|
||||
提示：您可以在上面输入文字生成内容 或 选择下方的操作
|
||||
</div>
|
||||
<div v-else style="color:#999;">
|
||||
<i class="edui-iconfont edui-icon-bell" style="font-size:16px;"></i>
|
||||
提示：您可以在上面输入文字生成内容
|
||||
</div>
|
||||
<div style="padding-top:10px;display:flex;">
|
||||
<a href="javascript:;" v-for="f in functions"
|
||||
@click="doSubmitFunction(f)"
|
||||
class="ai-operate">
|
||||
<span v-html="f.text"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="../../third-party/vue.js?1f65e021"></script>
|
||||
<script src="../../third-party/showdown.js?d5372104"></script>
|
||||
<script src="../../third-party/jquery-1.10.2.js?628072e7"></script>
|
||||
<script type="text/javascript" src="../../third-party/clipboard/clipboard.js?555edf0a"></script>
|
||||
<script type="text/javascript" src="./ai.js?eb799e7f"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
var aiConfig=editor.getOpt("ai");var aiFunctions=editor.getOpt("aiFunctions");var isMultiLine=function(text){return text.indexOf("\n")!==-1};var fetchStream=function(url,option,onStream,onFinish){fetch(url,Object.assign({method:"POST"},option)).then(response=>{if(!response.ok){onFinish({code:-1,msg:`HTTP error! status: ${response.status}`});return}const reader=response.body.getReader();const decoder=new TextDecoder("utf-8");let buffer="";const textList=[];function processChunk(chunk){buffer+=decoder.decode(chunk,{stream:true});const lines=buffer.split("\n");for(let line of lines){line=line.trim();if(line.startsWith("data:")){const jsonStr=line.replace("data:","").trim();if(jsonStr==="[DONE]"){onFinish({code:0,msg:"ok",data:{text:textList.join("")}});return}try{let text=null;const data=JSON.parse(jsonStr);if(data.choices&&data.choices.length>0&&data.choices[0].delta){text=data.choices[0].delta.content}else if(data.type){if(data.type==="error"){onFinish({code:-1,msg:data.data});return}else if(data.type==="end"){onFinish({code:0,msg:"ok",data:{text:textList.join("")}});return}else if(data.type==="data"){text=data.data}}if(text!==null){textList.push(text);onStream({code:0,msg:"ok",data:{text:text}})}else{onFinish({code:-1,msg:"No text found!"});console.log("data:",data)}}catch(e){onFinish({code:-1,msg:"JSON parse error!"+e})}}}buffer=lines.pop()||""}function read(){reader.read().then(({done,value})=>{if(done){if(buffer)processChunk(new Uint8Array);return}processChunk(value);read()}).catch(error=>{onFinish({code:-1,msg:"Stream error!"+error})})}read()}).catch(error=>{onFinish({code:-1,msg:"Request error!"+error})})};var openAiCompletion=function(url,param,option){option=Object.assign({body:null},option);if(!option.body){option.body={model:aiConfig.driverConfig.model,messages:[{role:"user",content:param.promptText}],stream:true}}fetchStream(url,{headers:{Authorization:`Bearer ${aiConfig.driverConfig.key}`,"Content-Type":"application/json"},body:JSON.stringify(option.body)},param.onStream,param.onFinish)};var drivers={ModStart:function(param){openAiCompletion(aiConfig.driverConfig.url,param,{body:{prompt:param.promptText}})},OpenAi:function(param){openAiCompletion(aiConfig.driverConfig.url||"https://api.openai.com/v1/engines/davinci/completions",param)},DeepSeek:function(param){openAiCompletion(aiConfig.driverConfig.url||"https://api.deepseek.com/chat/completions",param)}};function getRequest(driver){if(aiConfig.driverRequest){return aiConfig.driverRequest}if(driver in drivers){return drivers[driver]}return null}var converter=new window.showdown.Converter;var Ai={runtime:{range:null},init:function(){new Vue({el:"#app",data:{loading:false,selectText:"",inputText:"",promptText:"",resultText:"",resultError:"",functions:[]},mounted:function(){Ai.runtime.range=editor.selection.getRange();var cloneContents=Ai.runtime.range.cloneContents();if(cloneContents){this.selectText=cloneContents.textContent.trim()}else{this.selectText=""}this.buildFunctions()},computed:{resultHtml:function(){if(!this.resultText){return""}return converter.makeHtml(this.resultText)},resultHeight:function(){let height=255;if(this.selectText){height-=45}if(this.resultError){height-=45}return height+"px"}},methods:{buildFunctions:function(){var enableParam={selectText:this.selectText};this.functions=aiFunctions.map(function(f){if(!f.enable(enableParam)){return null}f.prompt=f.prompt.replace(/\{selectText\}/g,enableParam.selectText);return f}).filter(function(f){return!!f})},doSubmit:function(){if(this.loading){return}if(this.inputText){if(this.selectText){this.promptText=this.selectText+"\n\n"+this.inputText}else{this.promptText=this.inputText}}if(!this.promptText){editor.tipError("请输入内容");return}this.loading=true;this.resultError="";this.resultText="";var driverRequest=getRequest(aiConfig.driver);if(!driverRequest){editor.tipError("未找到驱动");return}driverRequest({promptText:this.promptText,onStream:res=>{if(res.code){this.resultError=res.msg;return}this.resultText+=res.data.text},onFinish:res=>{this.loading=false;if(res.code){this.resultError=res.msg;return}this.resultText=res.data.text}})},doSubmitFunction:function(f){this.promptText=f.prompt;this.doSubmit()},doInsert:function(){editor.fireEvent("saveScene");if(this.selectText){if(isMultiLine(this.resultText)){Ai.runtime.range.insertNode(document.createRange().createContextualFragment(this.resultHtml))}else{Ai.runtime.range.insertNode(document.createTextNode(this.resultText))}}else{if(isMultiLine(this.resultText)){editor.execCommand("insertHtml",this.resultHtml)}else{editor.execCommand("insertHtml",this.resultText)}}dialog.close(true)},doReplace:function(){editor.fireEvent("saveScene");Ai.runtime.range.deleteContents();if(isMultiLine(this.resultText)){Ai.runtime.range.insertNode(document.createRange().createContextualFragment(this.resultHtml))}else{Ai.runtime.range.insertNode(document.createTextNode(this.resultText))}dialog.close(true)}}})}};utils.domReady(function(){Ai.init()});
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
color: #838383;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 5px 0 0 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 210px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #F2F2F2;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<span><var id="lang_input_anchorName"></var></span><input id="anchorName" value=""/>
|
||||
</div>
|
||||
<script type="text/javascript" src="../internal.js?df5a6b9e"></script>
|
||||
<script type="text/javascript">
|
||||
var anchorInput = $G('anchorName'),
|
||||
node = editor.selection.getRange().getClosedNode();
|
||||
if (node && node.tagName == 'IMG' && (node = node.getAttribute('anchorname'))) {
|
||||
anchorInput.value = node;
|
||||
}
|
||||
anchorInput.onkeydown = function (evt) {
|
||||
evt = evt || window.event;
|
||||
if (evt.keyCode == 13) {
|
||||
editor.execCommand('anchor', anchorInput.value);
|
||||
dialog.close();
|
||||
domUtils.preventDefault(evt)
|
||||
}
|
||||
};
|
||||
dialog.onok = function () {
|
||||
editor.execCommand('anchor', anchorInput.value);
|
||||
dialog.close();
|
||||
};
|
||||
$focus(anchorInput);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,61 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ueditor图片对话框</title>
|
||||
<script type="text/javascript" src="../internal.js?df5a6b9e"></script>
|
||||
|
||||
<!-- jquery -->
|
||||
<script type="text/javascript" src="../../third-party/jquery-1.10.2.js?628072e7"></script>
|
||||
|
||||
<!-- webuploader -->
|
||||
<script src="../../third-party/webuploader/webuploader.js?dfd458e1"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?b8f06036">
|
||||
|
||||
<!-- attachment dialog -->
|
||||
<link rel="stylesheet" href="attachment.css?32c6a90a" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="tabhead" class="tabhead">
|
||||
<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>
|
||||
<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>
|
||||
</div>
|
||||
<div id="tabbody" class="tabbody">
|
||||
<!-- 上传图片 -->
|
||||
<div id="upload" class="panel focus">
|
||||
<div id="queueList" class="queueList">
|
||||
<div class="statusBar element-invisible">
|
||||
<div class="progress">
|
||||
<span class="text">0%</span>
|
||||
<span class="percentage"></span>
|
||||
</div>
|
||||
<div class="info"></div>
|
||||
<div class="btns">
|
||||
<div id="filePickerBtn"></div>
|
||||
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dndArea" class="placeholder">
|
||||
<div class="filePickerContainer">
|
||||
<div id="filePickerReady"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="filelist element-invisible">
|
||||
<li id="filePickerBlock" class="filePickerBlock"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在线图片 -->
|
||||
<div id="online" class="panel">
|
||||
<div id="fileList"><var id="lang_imgLoading"></var></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="attachment.js?30c88b65"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,797 +0,0 @@
|
|||
/**
|
||||
* User: Jinqn
|
||||
* Date: 14-04-08
|
||||
* Time: 下午16:34
|
||||
* 上传图片对话框逻辑代码,包括tab: 远程图片/上传图片/在线图片/搜索图片
|
||||
*/
|
||||
|
||||
(function () {
|
||||
|
||||
var uploadFile,
|
||||
onlineFile;
|
||||
|
||||
window.onload = function () {
|
||||
initTabs();
|
||||
initButtons();
|
||||
};
|
||||
|
||||
/* 初始化tab标签 */
|
||||
function initTabs() {
|
||||
var tabs = $G('tabhead').children;
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
domUtils.on(tabs[i], "click", function (e) {
|
||||
var target = e.target || e.srcElement;
|
||||
setTabFocus(target.getAttribute('data-content-id'));
|
||||
});
|
||||
}
|
||||
|
||||
setTabFocus('upload');
|
||||
}
|
||||
|
||||
/* 初始化tabbody */
|
||||
function setTabFocus(id) {
|
||||
if (!id) return;
|
||||
var i, bodyId, tabs = $G('tabhead').children;
|
||||
for (i = 0; i < tabs.length; i++) {
|
||||
bodyId = tabs[i].getAttribute('data-content-id')
|
||||
if (bodyId == id) {
|
||||
domUtils.addClass(tabs[i], 'focus');
|
||||
domUtils.addClass($G(bodyId), 'focus');
|
||||
} else {
|
||||
domUtils.removeClasses(tabs[i], 'focus');
|
||||
domUtils.removeClasses($G(bodyId), 'focus');
|
||||
}
|
||||
}
|
||||
switch (id) {
|
||||
case 'upload':
|
||||
uploadFile = uploadFile || new UploadFile('queueList');
|
||||
break;
|
||||
case 'online':
|
||||
onlineFile = onlineFile || new OnlineFile('fileList');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* 初始化onok事件 */
|
||||
function initButtons() {
|
||||
|
||||
dialog.onok = function () {
|
||||
var list = [], id, tabs = $G('tabhead').children;
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
if (domUtils.hasClass(tabs[i], 'focus')) {
|
||||
id = tabs[i].getAttribute('data-content-id');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
switch (id) {
|
||||
case 'upload':
|
||||
list = uploadFile.getInsertList();
|
||||
var count = uploadFile.getQueueCount();
|
||||
if (count) {
|
||||
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
case 'online':
|
||||
list = onlineFile.getInsertList();
|
||||
break;
|
||||
}
|
||||
|
||||
editor.execCommand('insertfile', list);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/* 上传附件 */
|
||||
function UploadFile(target) {
|
||||
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
|
||||
this.init();
|
||||
}
|
||||
|
||||
UploadFile.prototype = {
|
||||
init: function () {
|
||||
this.fileList = [];
|
||||
this.initContainer();
|
||||
this.initUploader();
|
||||
},
|
||||
initContainer: function () {
|
||||
this.$queue = this.$wrap.find('.filelist');
|
||||
},
|
||||
/* 初始化容器 */
|
||||
initUploader: function () {
|
||||
var _this = this,
|
||||
$ = jQuery, // just in case. Make sure it's not an other libaray.
|
||||
$wrap = _this.$wrap,
|
||||
// 图片容器
|
||||
$queue = $wrap.find('.filelist'),
|
||||
// 状态栏，包括进度和控制按钮
|
||||
$statusBar = $wrap.find('.statusBar'),
|
||||
// 文件总体选择信息。
|
||||
$info = $statusBar.find('.info'),
|
||||
// 上传按钮
|
||||
$upload = $wrap.find('.uploadBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBtn = $wrap.find('.filePickerBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBlock = $wrap.find('.filePickerBlock'),
|
||||
// 没选择文件之前的内容。
|
||||
$placeHolder = $wrap.find('.placeholder'),
|
||||
// 总体进度条
|
||||
$progress = $statusBar.find('.progress').hide(),
|
||||
// 添加的文件数量
|
||||
fileCount = 0,
|
||||
// 添加的文件总大小
|
||||
fileSize = 0,
|
||||
// 优化retina, 在retina下这个值是2
|
||||
ratio = window.devicePixelRatio || 1,
|
||||
// 缩略图大小
|
||||
thumbnailWidth = 113 * ratio,
|
||||
thumbnailHeight = 113 * ratio,
|
||||
// 可能有pedding, ready, uploading, confirm, done.
|
||||
state = '',
|
||||
// 所有文件的进度信息，key为file id
|
||||
percentages = {},
|
||||
supportTransition = (function () {
|
||||
var s = document.createElement('p').style,
|
||||
r = 'transition' in s ||
|
||||
'WebkitTransition' in s ||
|
||||
'MozTransition' in s ||
|
||||
'msTransition' in s ||
|
||||
'OTransition' in s;
|
||||
s = null;
|
||||
return r;
|
||||
})(),
|
||||
// WebUploader实例
|
||||
uploader,
|
||||
actionUrl = editor.getActionUrl(editor.getOpt('fileActionName')),
|
||||
fileMaxSize = editor.getOpt('fileMaxSize'),
|
||||
acceptExtensions = (editor.getOpt('fileAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');
|
||||
;
|
||||
|
||||
if (!WebUploader.Uploader.support()) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
|
||||
return;
|
||||
} else if (!editor.getOpt('fileActionName')) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var uploaderOption = {
|
||||
pick: {
|
||||
id: '#filePickerReady',
|
||||
label: lang.uploadSelectFile
|
||||
},
|
||||
swf: '../../third-party/webuploader/Uploader.swf',
|
||||
server: actionUrl,
|
||||
fileVal: editor.getOpt('fileFieldName'),
|
||||
duplicate: true,
|
||||
fileSingleSizeLimit: fileMaxSize,
|
||||
headers: editor.getOpt('serverHeaders') || {},
|
||||
compress: false
|
||||
};
|
||||
if(editor.getOpt('uploadServiceEnable')) {
|
||||
uploaderOption.customUpload = function (file, callback) {
|
||||
editor.getOpt('uploadServiceUpload')('attachment', file, {
|
||||
success: function( res ) {
|
||||
callback.onSuccess(file, {_raw:JSON.stringify(res)});
|
||||
},
|
||||
error: function( err ) {
|
||||
callback.onError(file, err);
|
||||
},
|
||||
progress: function( percent ) {
|
||||
callback.onProgress(file, percent);
|
||||
}
|
||||
}, {
|
||||
from: 'attachment'
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
uploader = _this.uploader = WebUploader.create(uploaderOption);
|
||||
uploader.addButton({
|
||||
id: '#filePickerBlock'
|
||||
});
|
||||
uploader.addButton({
|
||||
id: '#filePickerBtn',
|
||||
label: lang.uploadAddFile
|
||||
});
|
||||
|
||||
setState('pedding');
|
||||
|
||||
// 当有文件添加进来时执行，负责view的创建
|
||||
function addFile(file) {
|
||||
var $li = $('<li id="' + file.id + '">' +
|
||||
'<p class="title">' + file.name + '</p>' +
|
||||
'<p class="imgWrap"></p>' +
|
||||
'<p class="progress"><span></span></p>' +
|
||||
'</li>'),
|
||||
|
||||
$btns = $('<div class="file-panel">' +
|
||||
'<span class="cancel">' + lang.uploadDelete + '</span>' +
|
||||
'<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
|
||||
'<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
|
||||
$prgress = $li.find('p.progress span'),
|
||||
$wrap = $li.find('p.imgWrap'),
|
||||
$info = $('<p class="error"></p>').hide().appendTo($li),
|
||||
|
||||
showError = function (code) {
|
||||
switch (code) {
|
||||
case 'exceed_size':
|
||||
text = lang.errorExceedSize;
|
||||
break;
|
||||
case 'interrupt':
|
||||
text = lang.errorInterrupt;
|
||||
break;
|
||||
case 'http':
|
||||
text = lang.errorHttp;
|
||||
break;
|
||||
case 'not_allow_type':
|
||||
text = lang.errorFileType;
|
||||
break;
|
||||
default:
|
||||
text = lang.errorUploadRetry;
|
||||
break;
|
||||
}
|
||||
$info.text(text).show();
|
||||
};
|
||||
|
||||
if (file.getStatus() === 'invalid') {
|
||||
showError(file.statusText);
|
||||
} else {
|
||||
$wrap.text(lang.uploadPreview);
|
||||
if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') == -1) {
|
||||
$wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
|
||||
'<span class="file-title" title="' + file.name + '">' + file.name + '</span>');
|
||||
} else {
|
||||
if (browser.ie && browser.version <= 7) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
uploader.makeThumb(file, function (error, src) {
|
||||
if (error || !src) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
var $img = $('<img src="' + src + '">');
|
||||
$wrap.empty().append($img);
|
||||
$img.on('error', function () {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
});
|
||||
}
|
||||
}, thumbnailWidth, thumbnailHeight);
|
||||
}
|
||||
}
|
||||
percentages[file.id] = [file.size, 0];
|
||||
file.rotation = 0;
|
||||
|
||||
/* 检查文件格式 */
|
||||
if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
|
||||
showError('not_allow_type');
|
||||
uploader.removeFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
file.on('statuschange', function (cur, prev) {
|
||||
if (prev === 'progress') {
|
||||
$prgress.hide().width(0);
|
||||
} else if (prev === 'queued') {
|
||||
$li.off('mouseenter mouseleave');
|
||||
$btns.remove();
|
||||
}
|
||||
// 成功
|
||||
if (cur === 'error' || cur === 'invalid') {
|
||||
showError(file.statusText);
|
||||
percentages[file.id][1] = 1;
|
||||
} else if (cur === 'interrupt') {
|
||||
showError('interrupt');
|
||||
} else if (cur === 'queued') {
|
||||
percentages[file.id][1] = 0;
|
||||
} else if (cur === 'progress') {
|
||||
$info.hide();
|
||||
$prgress.css('display', 'block');
|
||||
} else if (cur === 'complete') {
|
||||
}
|
||||
|
||||
$li.removeClass('state-' + prev).addClass('state-' + cur);
|
||||
});
|
||||
|
||||
$li.on('mouseenter', function () {
|
||||
$btns.stop().animate({height: 30});
|
||||
});
|
||||
$li.on('mouseleave', function () {
|
||||
$btns.stop().animate({height: 0});
|
||||
});
|
||||
|
||||
$btns.on('click', 'span', function () {
|
||||
var index = $(this).index(),
|
||||
deg;
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
uploader.removeFile(file);
|
||||
return;
|
||||
case 1:
|
||||
file.rotation += 90;
|
||||
break;
|
||||
case 2:
|
||||
file.rotation -= 90;
|
||||
break;
|
||||
}
|
||||
|
||||
if (supportTransition) {
|
||||
deg = 'rotate(' + file.rotation + 'deg)';
|
||||
$wrap.css({
|
||||
'-webkit-transform': deg,
|
||||
'-mos-transform': deg,
|
||||
'-o-transform': deg,
|
||||
'transform': deg
|
||||
});
|
||||
} else {
|
||||
$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$li.insertBefore($filePickerBlock);
|
||||
}
|
||||
|
||||
// 负责view的销毁
|
||||
function removeFile(file) {
|
||||
var $li = $('#' + file.id);
|
||||
delete percentages[file.id];
|
||||
updateTotalProgress();
|
||||
$li.off().find('.file-panel').off().end().remove();
|
||||
}
|
||||
|
||||
function updateTotalProgress() {
|
||||
var loaded = 0,
|
||||
total = 0,
|
||||
spans = $progress.children(),
|
||||
percent;
|
||||
|
||||
$.each(percentages, function (k, v) {
|
||||
total += v[0];
|
||||
loaded += v[0] * v[1];
|
||||
});
|
||||
|
||||
percent = total ? loaded / total : 0;
|
||||
|
||||
spans.eq(0).text(Math.round(percent * 100) + '%');
|
||||
spans.eq(1).css('width', Math.round(percent * 100) + '%');
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function setState(val, files) {
|
||||
|
||||
if (val != state) {
|
||||
|
||||
var stats = uploader.getStats();
|
||||
|
||||
$upload.removeClass('state-' + state);
|
||||
$upload.addClass('state-' + val);
|
||||
|
||||
switch (val) {
|
||||
|
||||
/* 未选择文件 */
|
||||
case 'pedding':
|
||||
$queue.addClass('element-invisible');
|
||||
$statusBar.addClass('element-invisible');
|
||||
$placeHolder.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.hide();
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 可以开始上传 */
|
||||
case 'ready':
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$queue.removeClass('element-invisible');
|
||||
$statusBar.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
$upload.text(lang.uploadStart);
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 上传中 */
|
||||
case 'uploading':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadPause);
|
||||
break;
|
||||
|
||||
/* 暂停上传 */
|
||||
case 'paused':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadContinue);
|
||||
break;
|
||||
|
||||
case 'confirm':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadStart);
|
||||
|
||||
stats = uploader.getStats();
|
||||
if (stats.successNum && !stats.uploadFailNum) {
|
||||
setState('finish');
|
||||
return;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'finish':
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
if (stats.uploadFailNum) {
|
||||
$upload.text(lang.uploadRetry);
|
||||
} else {
|
||||
$upload.text(lang.uploadStart);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
state = val;
|
||||
updateStatus();
|
||||
|
||||
}
|
||||
|
||||
if (!_this.getQueueCount()) {
|
||||
$upload.addClass('disabled')
|
||||
} else {
|
||||
$upload.removeClass('disabled')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateStatus() {
|
||||
var text = '', stats;
|
||||
|
||||
if (state === 'ready') {
|
||||
text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
|
||||
} else if (state === 'confirm') {
|
||||
stats = uploader.getStats();
|
||||
if (stats.uploadFailNum) {
|
||||
text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
|
||||
}
|
||||
} else {
|
||||
stats = uploader.getStats();
|
||||
text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum);
|
||||
|
||||
if (stats.uploadFailNum) {
|
||||
text += lang.updateStatusError.replace('_', stats.uploadFailNum);
|
||||
}
|
||||
}
|
||||
|
||||
$info.html(text);
|
||||
}
|
||||
|
||||
uploader.on('fileQueued', function (file) {
|
||||
if (file.ext && acceptExtensions.indexOf(file.ext.toLowerCase()) != -1 && file.size <= fileMaxSize) {
|
||||
fileCount++;
|
||||
fileSize += file.size;
|
||||
}
|
||||
|
||||
if (fileCount === 1) {
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$statusBar.show();
|
||||
}
|
||||
|
||||
addFile(file);
|
||||
});
|
||||
|
||||
uploader.on('fileDequeued', function (file) {
|
||||
if (file.ext && acceptExtensions.indexOf(file.ext.toLowerCase()) != -1 && file.size <= fileMaxSize) {
|
||||
fileCount--;
|
||||
fileSize -= file.size;
|
||||
}
|
||||
|
||||
removeFile(file);
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('filesQueued', function (file) {
|
||||
if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
|
||||
setState('ready');
|
||||
}
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('all', function (type, files) {
|
||||
switch (type) {
|
||||
case 'uploadFinished':
|
||||
setState('confirm', files);
|
||||
break;
|
||||
case 'startUpload':
|
||||
/* 添加额外的GET参数 */
|
||||
var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
|
||||
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + 'encode=utf-8&' + params);
|
||||
uploader.option('server', url);
|
||||
setState('uploading', files);
|
||||
break;
|
||||
case 'stopUpload':
|
||||
setState('paused', files);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadBeforeSend', function (file, data, header) {
|
||||
//这里可以通过data对象添加POST参数
|
||||
if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
|
||||
header['X_Requested_With'] = 'XMLHttpRequest';
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
var $li = $('#' + file.id),
|
||||
$percent = $li.find('.progress span');
|
||||
|
||||
$percent.css('width', percentage * 100 + '%');
|
||||
percentages[file.id][1] = percentage;
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('uploadSuccess', function (file, ret) {
|
||||
var $file = $('#' + file.id);
|
||||
try {
|
||||
var responseText = (ret._raw || ret),
|
||||
json = utils.str2json(responseText);
|
||||
json = editor.getOpt('serverResponsePrepare')(json);
|
||||
if (json.state == 'SUCCESS') {
|
||||
_this.fileList.push(json);
|
||||
$file.append('<span class="success"></span>');
|
||||
// 触发上传附件事件
|
||||
editor.fireEvent("uploadsuccess", {
|
||||
res: json,
|
||||
type: 'file'
|
||||
});
|
||||
} else {
|
||||
$file.find('.error').text(json.state).show();
|
||||
}
|
||||
} catch (e) {
|
||||
$file.find('.error').text(lang.errorServerUpload).show();
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadError', function (file, code) {
|
||||
});
|
||||
uploader.on('error', function (code, param1, param2) {
|
||||
if (code === 'F_EXCEED_SIZE') {
|
||||
editor.getOpt('tipError')(lang.errorExceedSize + ' ' + (param1 / 1024 / 1024).toFixed(1) + 'MB');
|
||||
} else {
|
||||
console.log('error', code, param1, param2);
|
||||
}
|
||||
});
|
||||
uploader.on('uploadComplete', function (file, ret) {
|
||||
});
|
||||
|
||||
$upload.on('click', function () {
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (state === 'ready') {
|
||||
uploader.upload();
|
||||
} else if (state === 'paused') {
|
||||
uploader.upload();
|
||||
} else if (state === 'uploading') {
|
||||
uploader.stop();
|
||||
}
|
||||
});
|
||||
|
||||
$upload.addClass('state-' + state);
|
||||
updateTotalProgress();
|
||||
},
|
||||
getQueueCount: function () {
|
||||
var file, i, status, readyFile = 0, files = this.uploader.getFiles();
|
||||
for (i = 0; file = files[i++];) {
|
||||
status = file.getStatus();
|
||||
if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
|
||||
}
|
||||
return readyFile;
|
||||
},
|
||||
getInsertList: function () {
|
||||
var i, link, data, list = [],
|
||||
prefix = editor.getOpt('fileUrlPrefix');
|
||||
for (i = 0; i < this.fileList.length; i++) {
|
||||
data = this.fileList[i];
|
||||
link = data.url;
|
||||
list.push({
|
||||
title: data.original || link.substr(link.lastIndexOf('/') + 1),
|
||||
url: prefix + link
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/* 在线附件 */
|
||||
function OnlineFile(target) {
|
||||
this.container = utils.isString(target) ? document.getElementById(target) : target;
|
||||
this.init();
|
||||
}
|
||||
|
||||
OnlineFile.prototype = {
|
||||
init: function () {
|
||||
this.initContainer();
|
||||
this.initEvents();
|
||||
this.initData();
|
||||
},
|
||||
/* 初始化容器 */
|
||||
initContainer: function () {
|
||||
this.container.innerHTML = '';
|
||||
this.list = document.createElement('ul');
|
||||
this.clearFloat = document.createElement('li');
|
||||
|
||||
domUtils.addClass(this.list, 'list');
|
||||
domUtils.addClass(this.clearFloat, 'clearFloat');
|
||||
|
||||
this.list.appendChild(this.clearFloat);
|
||||
this.container.appendChild(this.list);
|
||||
},
|
||||
/* 初始化滚动事件,滚动到地步自动拉取数据 */
|
||||
initEvents: function () {
|
||||
var _this = this;
|
||||
|
||||
/* 滚动拉取图片 */
|
||||
domUtils.on($G('fileList'), 'scroll', function (e) {
|
||||
var panel = this;
|
||||
if (panel.scrollHeight - (panel.offsetHeight + panel.scrollTop) < 10) {
|
||||
_this.getFileData();
|
||||
}
|
||||
});
|
||||
/* 选中图片 */
|
||||
domUtils.on(this.list, 'click', function (e) {
|
||||
var target = e.target || e.srcElement,
|
||||
li = target.parentNode;
|
||||
|
||||
if (li.tagName.toLowerCase() == 'li') {
|
||||
if (domUtils.hasClass(li, 'selected')) {
|
||||
domUtils.removeClasses(li, 'selected');
|
||||
} else {
|
||||
domUtils.addClass(li, 'selected');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 初始化第一次的数据 */
|
||||
initData: function () {
|
||||
|
||||
/* 拉取数据需要使用的值 */
|
||||
this.state = 0;
|
||||
this.listSize = editor.getOpt('fileManagerListSize');
|
||||
this.listIndex = 0;
|
||||
this.listEnd = false;
|
||||
|
||||
/* 第一次拉取数据 */
|
||||
this.getFileData();
|
||||
},
|
||||
/* 向后台拉取图片列表数据 */
|
||||
getFileData: function () {
|
||||
var _this = this;
|
||||
|
||||
if (!_this.listEnd && !this.isLoadingData) {
|
||||
this.isLoadingData = true;
|
||||
ajax.request(editor.getActionUrl(editor.getOpt('fileManagerActionName')), {
|
||||
timeout: 100000,
|
||||
data: utils.extend({
|
||||
start: this.listIndex,
|
||||
size: this.listSize
|
||||
}, editor.queryCommandValue('serverparam')),
|
||||
headers: editor.options.serverHeaders || {},
|
||||
method: 'get',
|
||||
onsuccess: function (r) {
|
||||
try {
|
||||
var json = eval('(' + r.responseText + ')');
|
||||
if (json.state == 'SUCCESS') {
|
||||
_this.pushData(json.list);
|
||||
_this.listIndex = parseInt(json.start) + parseInt(json.list.length);
|
||||
if (_this.listIndex >= json.total) {
|
||||
_this.listEnd = true;
|
||||
}
|
||||
_this.isLoadingData = false;
|
||||
}
|
||||
} catch (e) {
|
||||
if (r.responseText.indexOf('ue_separate_ue') != -1) {
|
||||
var list = r.responseText.split(r.responseText);
|
||||
_this.pushData(list);
|
||||
_this.listIndex = parseInt(list.length);
|
||||
_this.listEnd = true;
|
||||
_this.isLoadingData = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
onerror: function () {
|
||||
_this.isLoadingData = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 添加图片到列表界面上 */
|
||||
pushData: function (list) {
|
||||
var i, item, img, filetype, preview, icon, _this = this,
|
||||
urlPrefix = editor.getOpt('fileManagerUrlPrefix');
|
||||
for (i = 0; i < list.length; i++) {
|
||||
if (list[i] && list[i].url) {
|
||||
item = document.createElement('li');
|
||||
icon = document.createElement('span');
|
||||
filetype = list[i].url.substr(list[i].url.lastIndexOf('.') + 1);
|
||||
|
||||
if ("png|jpg|jpeg|gif|bmp".indexOf(filetype) != -1) {
|
||||
preview = document.createElement('img');
|
||||
domUtils.on(preview, 'load', (function (image) {
|
||||
return function () {
|
||||
_this.scale(image, image.parentNode.offsetWidth, image.parentNode.offsetHeight);
|
||||
};
|
||||
})(preview));
|
||||
preview.width = 113;
|
||||
preview.setAttribute('src', urlPrefix + list[i].url + (list[i].url.indexOf('?') == -1 ? '?noCache=' : '&noCache=') + (+new Date()).toString(36));
|
||||
} else {
|
||||
var ic = document.createElement('i'),
|
||||
textSpan = document.createElement('span');
|
||||
textSpan.innerHTML = list[i].original || list[i].url.substr(list[i].url.lastIndexOf('/') + 1);
|
||||
preview = document.createElement('div');
|
||||
preview.appendChild(ic);
|
||||
preview.appendChild(textSpan);
|
||||
domUtils.addClass(preview, 'file-wrapper');
|
||||
domUtils.addClass(textSpan, 'file-title');
|
||||
domUtils.addClass(ic, 'file-type-' + filetype);
|
||||
domUtils.addClass(ic, 'file-preview');
|
||||
}
|
||||
domUtils.addClass(icon, 'icon');
|
||||
item.setAttribute('data-url', urlPrefix + list[i].url);
|
||||
if (list[i].original) {
|
||||
item.setAttribute('data-title', list[i].original);
|
||||
}
|
||||
|
||||
item.appendChild(preview);
|
||||
item.appendChild(icon);
|
||||
this.list.insertBefore(item, this.clearFloat);
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 改变图片大小 */
|
||||
scale: function (img, w, h, type) {
|
||||
var ow = img.width,
|
||||
oh = img.height;
|
||||
|
||||
if (type == 'justify') {
|
||||
if (ow >= oh) {
|
||||
img.width = w;
|
||||
img.height = h * oh / ow;
|
||||
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
|
||||
} else {
|
||||
img.width = w * ow / oh;
|
||||
img.height = h;
|
||||
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
|
||||
}
|
||||
} else {
|
||||
if (ow >= oh) {
|
||||
img.width = w * ow / oh;
|
||||
img.height = h;
|
||||
img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
|
||||
} else {
|
||||
img.width = w;
|
||||
img.height = h * oh / ow;
|
||||
img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
|
||||
}
|
||||
}
|
||||
},
|
||||
getInsertList: function () {
|
||||
var i, lis = this.list.children, list = [];
|
||||
for (i = 0; i < lis.length; i++) {
|
||||
if (domUtils.hasClass(lis[i], 'selected')) {
|
||||
var url = lis[i].getAttribute('data-url');
|
||||
var title = lis[i].getAttribute('data-title') || url.substr(url.lastIndexOf('/') + 1);
|
||||
list.push({
|
||||
title: title,
|
||||
url: url
|
||||
});
|
||||
}
|
||||
}
|
||||
return list;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 453 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 445 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||||
<script type="text/javascript" src="../internal.js?df5a6b9e"></script>
|
||||
<link rel="stylesheet" type="text/css" href="audio.css?c30cd625"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div id="audioTab">
|
||||
<div id="tabHeads" class="tabhead">
|
||||
<span tabSrc="audio" class="focus" data-content-id="audio"><var id="lang_tab_insertV"></var></span>
|
||||
<span tabSrc="upload" style="display:none;" data-content-id="upload"><var
|
||||
id="lang_tab_uploadV"></var></span>
|
||||
</div>
|
||||
<div id="tabBodys" class="tabbody">
|
||||
<div id="audio" class="panel focus">
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="audioUrl" class="url"><var id="lang_audio_url"></var></label></td>
|
||||
<td><input id="audioUrl" type="text"><a href="javascript:;" id="audioSelect"
|
||||
style="display:none;">选择音频</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="padding:0 5px 5px 5px;color:#999;">
|
||||
外链音频支持MP3格式
|
||||
</div>
|
||||
<div id="preview"></div>
|
||||
<div id="audioInfo">
|
||||
<fieldset>
|
||||
<legend><var id="lang_alignment"></var></legend>
|
||||
<div id="audioFloat"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="upload" class="panel">
|
||||
<div id="upload_left">
|
||||
<div id="queueList" class="queueList">
|
||||
<div class="statusBar element-invisible">
|
||||
<div class="progress">
|
||||
<span class="text">0%</span>
|
||||
<span class="percentage"></span>
|
||||
</div>
|
||||
<div class="info"></div>
|
||||
<div class="btns">
|
||||
<div id="filePickerBtn"></div>
|
||||
<div class="uploadBtn"><var id="lang_start_upload"></var></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dndArea" class="placeholder">
|
||||
<div class="filePickerContainer">
|
||||
<div id="filePickerReady"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="filelist element-invisible">
|
||||
<li id="filePickerBlock" class="filePickerBlock"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="uploadaudioInfo">
|
||||
<fieldset>
|
||||
<legend><var id="lang_upload_alignment"></var></legend>
|
||||
<div id="upload_alignment"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jquery -->
|
||||
<script type="text/javascript" src="../../third-party/jquery-1.10.2.js?628072e7"></script>
|
||||
|
||||
<!-- webuploader -->
|
||||
<script type="text/javascript" src="../../third-party/webuploader/webuploader.js?dfd458e1"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css?b8f06036">
|
||||
|
||||
<!-- audio -->
|
||||
<script type="text/javascript" src="audio.js?2d786af4"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,805 +0,0 @@
|
|||
/**
|
||||
* Created by JetBrains PhpStorm.
|
||||
* User: taoqili
|
||||
* Date: 12-2-20
|
||||
* Time: 上午11:19
|
||||
* To change this template use File | Settings | File Templates.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
|
||||
var audio = {},
|
||||
uploadaudioList = [],
|
||||
isModifyUploadaudio = false,
|
||||
uploadFile;
|
||||
var editorOpt = {};
|
||||
|
||||
window.onload = function () {
|
||||
editorOpt = editor.getOpt('audioConfig');
|
||||
$focus($G("audioUrl"));
|
||||
initTabs();
|
||||
initAudio();
|
||||
initUpload();
|
||||
};
|
||||
|
||||
/* 初始化tab标签 */
|
||||
function initTabs() {
|
||||
var tabs = $G('tabHeads').children;
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
domUtils.on(tabs[i], "click", function (e) {
|
||||
var j, bodyId, target = e.target || e.srcElement;
|
||||
for (j = 0; j < tabs.length; j++) {
|
||||
bodyId = tabs[j].getAttribute('data-content-id');
|
||||
if (tabs[j] == target) {
|
||||
domUtils.addClass(tabs[j], 'focus');
|
||||
domUtils.addClass($G(bodyId), 'focus');
|
||||
} else {
|
||||
domUtils.removeClasses(tabs[j], 'focus');
|
||||
domUtils.removeClasses($G(bodyId), 'focus');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!editorOpt.disableUpload) {
|
||||
$G('tabHeads').querySelector('[data-content-id="upload"]').style.display = 'inline-block';
|
||||
}
|
||||
if (!!editorOpt.selectCallback) {
|
||||
$G('audioSelect').style.display = 'inline-block';
|
||||
domUtils.on($G('audioSelect'), "click", function (e) {
|
||||
editorOpt.selectCallback(editor, function (info) {
|
||||
if (info) {
|
||||
$G('audioUrl').value = info.path;
|
||||
createPreview(info.path);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initAudio() {
|
||||
createAlignButton(["audioFloat", "upload_alignment"]);
|
||||
addUrlChangeListener($G("audioUrl"));
|
||||
addOkListener();
|
||||
|
||||
//编辑视频时初始化相关信息
|
||||
(function () {
|
||||
var img = editor.selection.getRange().getClosedNode(), url;
|
||||
if (img && img.className) {
|
||||
var hasFakedClass = (img.className == "edui-faked-audio"),
|
||||
hasUploadClass = img.className.indexOf("edui-upload-audio") != -1;
|
||||
if (hasFakedClass || hasUploadClass) {
|
||||
$G("audioUrl").value = url = img.getAttribute("_url");
|
||||
var align = domUtils.getComputedStyle(img, "float"),
|
||||
parentAlign = domUtils.getComputedStyle(img.parentNode, "text-align");
|
||||
updateAlignButton(parentAlign === "center" ? "center" : align);
|
||||
}
|
||||
if (hasUploadClass) {
|
||||
isModifyUploadaudio = true;
|
||||
}
|
||||
}
|
||||
createPreview(url);
|
||||
})();
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听确认和取消两个按钮事件，用户执行插入或者清空正在播放的视频实例操作
|
||||
*/
|
||||
function addOkListener() {
|
||||
dialog.onok = function () {
|
||||
$G("preview").innerHTML = "";
|
||||
var currentTab = findFocus("tabHeads", "tabSrc");
|
||||
switch (currentTab) {
|
||||
case "audio":
|
||||
return insertSingle();
|
||||
break;
|
||||
// case "audioSearch":
|
||||
// return insertSearch("searchList");
|
||||
// break;
|
||||
case "upload":
|
||||
return insertUpload();
|
||||
break;
|
||||
}
|
||||
};
|
||||
dialog.oncancel = function () {
|
||||
$G("preview").innerHTML = "";
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 依据传入的align值更新按钮信息
|
||||
* @param align
|
||||
*/
|
||||
function updateAlignButton(align) {
|
||||
var aligns = $G("audioFloat").children;
|
||||
for (var i = 0, ci; ci = aligns[i++];) {
|
||||
if (ci.getAttribute("name") == align) {
|
||||
if (ci.className != "focus") {
|
||||
ci.className = "focus";
|
||||
}
|
||||
} else {
|
||||
if (ci.className == "focus") {
|
||||
ci.className = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将单个视频信息插入编辑器中
|
||||
*/
|
||||
function insertSingle() {
|
||||
var url = $G('audioUrl').value,
|
||||
align = findFocus("audioFloat", "name");
|
||||
if (!url) return false;
|
||||
editor.execCommand('insertaudio', {
|
||||
url: url,
|
||||
}, isModifyUploadaudio ? 'upload' : null);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将元素id下的所有代表视频的图片插入编辑器中
|
||||
* @param id
|
||||
*/
|
||||
function insertSearch(id) {
|
||||
var imgs = domUtils.getElementsByTagName($G(id), "img"),
|
||||
audioObjs = [];
|
||||
for (var i = 0, img; img = imgs[i++];) {
|
||||
if (img.getAttribute("selected")) {
|
||||
audioObjs.push({
|
||||
url: img.getAttribute("ue_audio_url"),
|
||||
width: 420,
|
||||
height: 280,
|
||||
align: "none"
|
||||
});
|
||||
}
|
||||
}
|
||||
editor.execCommand('insertaudio', audioObjs);
|
||||
}
|
||||
|
||||
/**
|
||||
* 找到id下具有focus类的节点并返回该节点下的某个属性
|
||||
* @param id
|
||||
* @param returnProperty
|
||||
*/
|
||||
function findFocus(id, returnProperty) {
|
||||
var tabs = $G(id).children,
|
||||
property;
|
||||
for (var i = 0, ci; ci = tabs[i++];) {
|
||||
if (ci.className == "focus") {
|
||||
property = ci.getAttribute(returnProperty);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return property;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数字判断
|
||||
* @param value
|
||||
*/
|
||||
function isNumber(value) {
|
||||
return /(0|^[1-9]\d*$)/.test(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建图片浮动选择按钮
|
||||
* @param ids
|
||||
*/
|
||||
function createAlignButton(ids) {
|
||||
for (var i = 0, ci; ci = ids[i++];) {
|
||||
var floatContainer = $G(ci),
|
||||
nameMaps = {
|
||||
"none": lang['default'],
|
||||
"left": lang.floatLeft,
|
||||
"right": lang.floatRight,
|
||||
"center": lang.block
|
||||
};
|
||||
for (var j in nameMaps) {
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("name", j);
|
||||
if (j == "none") div.className = "focus";
|
||||
div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
|
||||
div.setAttribute("title", nameMaps[j]);
|
||||
floatContainer.appendChild(div);
|
||||
}
|
||||
switchSelect(ci);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择切换
|
||||
* @param selectParentId
|
||||
*/
|
||||
function switchSelect(selectParentId) {
|
||||
var selects = $G(selectParentId).children;
|
||||
for (var i = 0, ci; ci = selects[i++];) {
|
||||
domUtils.on(ci, "click", function () {
|
||||
for (var j = 0, cj; cj = selects[j++];) {
|
||||
cj.className = "";
|
||||
cj.removeAttribute && cj.removeAttribute("class");
|
||||
}
|
||||
this.className = "focus";
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听url改变事件
|
||||
* @param url
|
||||
*/
|
||||
function addUrlChangeListener(url) {
|
||||
if (browser.ie) {
|
||||
url.onpropertychange = function () {
|
||||
createPreview(this.value);
|
||||
}
|
||||
} else {
|
||||
url.addEventListener("input", function () {
|
||||
createPreview(this.value);
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
|
||||
function createAudioHtml(url, param) {
|
||||
param = param || {};
|
||||
var str = [
|
||||
"<audio",
|
||||
(param.id ? ' id="' + param.id + '"' : ""),
|
||||
(param.cls ? ' class="' + param.cls + '"' : ''),
|
||||
' controls >',
|
||||
'<source src="' + url + '" type="audio/mpeg' + '" />',
|
||||
'</audio>',
|
||||
];
|
||||
return str.join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据url生成视频预览
|
||||
* @param url
|
||||
*/
|
||||
function createPreview(url) {
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
|
||||
$G("preview").innerHTML = '<div class="previewMsg"><span>' + lang.urlError + '</span></div>' +
|
||||
'<div style="position: absolute; inset: 0; background: #FFF; text-align: center; display: flex; justify-items: center; align-items: center;">' +
|
||||
'<div style="text-align:center;flex-grow:1;">' + createAudioHtml(url) + '</div>'
|
||||
+ '</div>';
|
||||
}
|
||||
|
||||
|
||||
/* 插入上传视频 */
|
||||
function insertUpload() {
|
||||
var audioObjs = [],
|
||||
uploadDir = editor.getOpt('audioUrlPrefix'),
|
||||
align = findFocus("upload_alignment", "name") || 'none';
|
||||
for (var key in uploadaudioList) {
|
||||
var file = uploadaudioList[key];
|
||||
audioObjs.push({
|
||||
url: uploadDir + file.url,
|
||||
align: align
|
||||
});
|
||||
}
|
||||
|
||||
var count = uploadFile.getQueueCount();
|
||||
if (count) {
|
||||
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
|
||||
return false;
|
||||
} else {
|
||||
editor.execCommand('insertaudio', audioObjs, 'upload');
|
||||
}
|
||||
}
|
||||
|
||||
/*初始化上传标签*/
|
||||
function initUpload() {
|
||||
uploadFile = new UploadFile('queueList');
|
||||
}
|
||||
|
||||
|
||||
/* 上传附件 */
|
||||
function UploadFile(target) {
|
||||
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
|
||||
this.init();
|
||||
}
|
||||
|
||||
UploadFile.prototype = {
|
||||
init: function () {
|
||||
this.fileList = [];
|
||||
this.initContainer();
|
||||
this.initUploader();
|
||||
},
|
||||
initContainer: function () {
|
||||
this.$queue = this.$wrap.find('.filelist');
|
||||
},
|
||||
/* 初始化容器 */
|
||||
initUploader: function () {
|
||||
var _this = this,
|
||||
$ = jQuery, // just in case. Make sure it's not an other libaray.
|
||||
$wrap = _this.$wrap,
|
||||
// 图片容器
|
||||
$queue = $wrap.find('.filelist'),
|
||||
// 状态栏，包括进度和控制按钮
|
||||
$statusBar = $wrap.find('.statusBar'),
|
||||
// 文件总体选择信息。
|
||||
$info = $statusBar.find('.info'),
|
||||
// 上传按钮
|
||||
$upload = $wrap.find('.uploadBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBtn = $wrap.find('.filePickerBtn'),
|
||||
// 上传按钮
|
||||
$filePickerBlock = $wrap.find('.filePickerBlock'),
|
||||
// 没选择文件之前的内容。
|
||||
$placeHolder = $wrap.find('.placeholder'),
|
||||
// 总体进度条
|
||||
$progress = $statusBar.find('.progress').hide(),
|
||||
// 添加的文件数量
|
||||
fileCount = 0,
|
||||
// 添加的文件总大小
|
||||
fileSize = 0,
|
||||
// 优化retina, 在retina下这个值是2
|
||||
ratio = window.devicePixelRatio || 1,
|
||||
// 缩略图大小
|
||||
thumbnailWidth = 113 * ratio,
|
||||
thumbnailHeight = 113 * ratio,
|
||||
// 可能有pedding, ready, uploading, confirm, done.
|
||||
state = '',
|
||||
// 所有文件的进度信息，key为file id
|
||||
percentages = {},
|
||||
supportTransition = (function () {
|
||||
var s = document.createElement('p').style,
|
||||
r = 'transition' in s ||
|
||||
'WebkitTransition' in s ||
|
||||
'MozTransition' in s ||
|
||||
'msTransition' in s ||
|
||||
'OTransition' in s;
|
||||
s = null;
|
||||
return r;
|
||||
})(),
|
||||
// WebUploader实例
|
||||
uploader,
|
||||
actionUrl = editor.getActionUrl(editor.getOpt('audioActionName')),
|
||||
fileMaxSize = editor.getOpt('audioMaxSize'),
|
||||
acceptExtensions = (editor.getOpt('audioAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');
|
||||
;
|
||||
|
||||
if (!WebUploader.Uploader.support()) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
|
||||
return;
|
||||
} else if (!editor.getOpt('audioActionName')) {
|
||||
$('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var uploaderOption = {
|
||||
pick: {
|
||||
id: '#filePickerReady',
|
||||
label: lang.uploadSelectFile
|
||||
},
|
||||
swf: '../../third-party/webuploader/Uploader.swf',
|
||||
server: actionUrl,
|
||||
fileVal: editor.getOpt('audioFieldName'),
|
||||
duplicate: true,
|
||||
fileSingleSizeLimit: fileMaxSize,
|
||||
headers: editor.getOpt('serverHeaders') || {},
|
||||
compress: false
|
||||
};
|
||||
|
||||
if(editor.getOpt('uploadServiceEnable')) {
|
||||
uploaderOption.customUpload = function (file, callback) {
|
||||
editor.getOpt('uploadServiceUpload')('audio', file, {
|
||||
success: function( res ) {
|
||||
callback.onSuccess(file, {_raw:JSON.stringify(res)});
|
||||
},
|
||||
error: function( err ) {
|
||||
callback.onError(file, err);
|
||||
},
|
||||
progress: function( percent ) {
|
||||
callback.onProgress(file, percent);
|
||||
}
|
||||
}, {
|
||||
from: 'audio'
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
uploader = _this.uploader = WebUploader.create(uploaderOption);
|
||||
uploader.addButton({
|
||||
id: '#filePickerBlock'
|
||||
});
|
||||
uploader.addButton({
|
||||
id: '#filePickerBtn',
|
||||
label: lang.uploadAddFile
|
||||
});
|
||||
|
||||
setState('pedding');
|
||||
|
||||
// 当有文件添加进来时执行，负责view的创建
|
||||
function addFile(file) {
|
||||
var $li = $('<li id="' + file.id + '">' +
|
||||
'<p class="title">' + file.name + '</p>' +
|
||||
'<p class="imgWrap"></p>' +
|
||||
'<p class="progress"><span></span></p>' +
|
||||
'</li>'),
|
||||
|
||||
$btns = $('<div class="file-panel">' +
|
||||
'<span class="cancel">' + lang.uploadDelete + '</span>' +
|
||||
'<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
|
||||
'<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
|
||||
$prgress = $li.find('p.progress span'),
|
||||
$wrap = $li.find('p.imgWrap'),
|
||||
$info = $('<p class="error"></p>').hide().appendTo($li),
|
||||
|
||||
showError = function (code) {
|
||||
switch (code) {
|
||||
case 'exceed_size':
|
||||
text = lang.errorExceedSize;
|
||||
break;
|
||||
case 'interrupt':
|
||||
text = lang.errorInterrupt;
|
||||
break;
|
||||
case 'http':
|
||||
text = lang.errorHttp;
|
||||
break;
|
||||
case 'not_allow_type':
|
||||
text = lang.errorFileType;
|
||||
break;
|
||||
default:
|
||||
text = lang.errorUploadRetry;
|
||||
break;
|
||||
}
|
||||
$info.text(text).show();
|
||||
};
|
||||
|
||||
if (file.getStatus() === 'invalid') {
|
||||
showError(file.statusText);
|
||||
} else {
|
||||
$wrap.text(lang.uploadPreview);
|
||||
if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') == -1) {
|
||||
$wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
|
||||
'<span class="file-title">' + file.name + '</span>');
|
||||
} else {
|
||||
if (browser.ie && browser.version <= 7) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
uploader.makeThumb(file, function (error, src) {
|
||||
if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
} else {
|
||||
var $img = $('<img src="' + src + '">');
|
||||
$wrap.empty().append($img);
|
||||
$img.on('error', function () {
|
||||
$wrap.text(lang.uploadNoPreview);
|
||||
});
|
||||
}
|
||||
}, thumbnailWidth, thumbnailHeight);
|
||||
}
|
||||
}
|
||||
percentages[file.id] = [file.size, 0];
|
||||
file.rotation = 0;
|
||||
|
||||
/* 检查文件格式 */
|
||||
if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
|
||||
showError('not_allow_type');
|
||||
uploader.removeFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
file.on('statuschange', function (cur, prev) {
|
||||
if (prev === 'progress') {
|
||||
$prgress.hide().width(0);
|
||||
} else if (prev === 'queued') {
|
||||
$li.off('mouseenter mouseleave');
|
||||
$btns.remove();
|
||||
}
|
||||
// 成功
|
||||
if (cur === 'error' || cur === 'invalid') {
|
||||
showError(file.statusText);
|
||||
percentages[file.id][1] = 1;
|
||||
} else if (cur === 'interrupt') {
|
||||
showError('interrupt');
|
||||
} else if (cur === 'queued') {
|
||||
percentages[file.id][1] = 0;
|
||||
} else if (cur === 'progress') {
|
||||
$info.hide();
|
||||
$prgress.css('display', 'block');
|
||||
} else if (cur === 'complete') {
|
||||
}
|
||||
|
||||
$li.removeClass('state-' + prev).addClass('state-' + cur);
|
||||
});
|
||||
|
||||
$li.on('mouseenter', function () {
|
||||
$btns.stop().animate({height: 30});
|
||||
});
|
||||
$li.on('mouseleave', function () {
|
||||
$btns.stop().animate({height: 0});
|
||||
});
|
||||
|
||||
$btns.on('click', 'span', function () {
|
||||
var index = $(this).index(),
|
||||
deg;
|
||||
|
||||
switch (index) {
|
||||
case 0:
|
||||
uploader.removeFile(file);
|
||||
return;
|
||||
case 1:
|
||||
file.rotation += 90;
|
||||
break;
|
||||
case 2:
|
||||
file.rotation -= 90;
|
||||
break;
|
||||
}
|
||||
|
||||
if (supportTransition) {
|
||||
deg = 'rotate(' + file.rotation + 'deg)';
|
||||
$wrap.css({
|
||||
'-webkit-transform': deg,
|
||||
'-mos-transform': deg,
|
||||
'-o-transform': deg,
|
||||
'transform': deg
|
||||
});
|
||||
} else {
|
||||
$wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$li.insertBefore($filePickerBlock);
|
||||
}
|
||||
|
||||
// 负责view的销毁
|
||||
function removeFile(file) {
|
||||
var $li = $('#' + file.id);
|
||||
delete percentages[file.id];
|
||||
updateTotalProgress();
|
||||
$li.off().find('.file-panel').off().end().remove();
|
||||
}
|
||||
|
||||
function updateTotalProgress() {
|
||||
var loaded = 0,
|
||||
total = 0,
|
||||
spans = $progress.children(),
|
||||
percent;
|
||||
|
||||
$.each(percentages, function (k, v) {
|
||||
total += v[0];
|
||||
loaded += v[0] * v[1];
|
||||
});
|
||||
|
||||
percent = total ? loaded / total : 0;
|
||||
|
||||
spans.eq(0).text(Math.round(percent * 100) + '%');
|
||||
spans.eq(1).css('width', Math.round(percent * 100) + '%');
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function setState(val, files) {
|
||||
|
||||
if (val != state) {
|
||||
|
||||
var stats = uploader.getStats();
|
||||
|
||||
$upload.removeClass('state-' + state);
|
||||
$upload.addClass('state-' + val);
|
||||
|
||||
switch (val) {
|
||||
|
||||
/* 未选择文件 */
|
||||
case 'pedding':
|
||||
$queue.addClass('element-invisible');
|
||||
$statusBar.addClass('element-invisible');
|
||||
$placeHolder.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.hide();
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 可以开始上传 */
|
||||
case 'ready':
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$queue.removeClass('element-invisible');
|
||||
$statusBar.removeClass('element-invisible');
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
$upload.text(lang.uploadStart);
|
||||
uploader.refresh();
|
||||
break;
|
||||
|
||||
/* 上传中 */
|
||||
case 'uploading':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadPause);
|
||||
break;
|
||||
|
||||
/* 暂停上传 */
|
||||
case 'paused':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadContinue);
|
||||
break;
|
||||
|
||||
case 'confirm':
|
||||
$progress.show();
|
||||
$info.hide();
|
||||
$upload.text(lang.uploadStart);
|
||||
|
||||
stats = uploader.getStats();
|
||||
if (stats.successNum && !stats.uploadFailNum) {
|
||||
setState('finish');
|
||||
return;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'finish':
|
||||
$progress.hide();
|
||||
$info.show();
|
||||
if (stats.uploadFailNum) {
|
||||
$upload.text(lang.uploadRetry);
|
||||
} else {
|
||||
$upload.text(lang.uploadStart);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
state = val;
|
||||
updateStatus();
|
||||
|
||||
}
|
||||
|
||||
if (!_this.getQueueCount()) {
|
||||
$upload.addClass('disabled')
|
||||
} else {
|
||||
$upload.removeClass('disabled')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateStatus() {
|
||||
var text = '', stats;
|
||||
|
||||
if (state === 'ready') {
|
||||
text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
|
||||
} else if (state === 'confirm') {
|
||||
stats = uploader.getStats();
|
||||
if (stats.uploadFailNum) {
|
||||
text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
|
||||
}
|
||||
} else {
|
||||
stats = uploader.getStats();
|
||||
text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum);
|
||||
|
||||
if (stats.uploadFailNum) {
|
||||
text += lang.updateStatusError.replace('_', stats.uploadFailNum);
|
||||
}
|
||||
}
|
||||
|
||||
$info.html(text);
|
||||
}
|
||||
|
||||
uploader.on('fileQueued', function (file) {
|
||||
fileCount++;
|
||||
fileSize += file.size;
|
||||
|
||||
if (fileCount === 1) {
|
||||
$placeHolder.addClass('element-invisible');
|
||||
$statusBar.show();
|
||||
}
|
||||
|
||||
addFile(file);
|
||||
});
|
||||
|
||||
uploader.on('fileDequeued', function (file) {
|
||||
fileCount--;
|
||||
fileSize -= file.size;
|
||||
|
||||
removeFile(file);
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('filesQueued', function (file) {
|
||||
if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
|
||||
setState('ready');
|
||||
}
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('all', function (type, files) {
|
||||
switch (type) {
|
||||
case 'uploadFinished':
|
||||
setState('confirm', files);
|
||||
break;
|
||||
case 'startUpload':
|
||||
/* 添加额外的GET参数 */
|
||||
var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
|
||||
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + 'encode=utf-8&' + params);
|
||||
uploader.option('server', url);
|
||||
setState('uploading', files);
|
||||
break;
|
||||
case 'stopUpload':
|
||||
setState('paused', files);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadBeforeSend', function (file, data, header) {
|
||||
//这里可以通过data对象添加POST参数
|
||||
if (actionUrl.toLowerCase().indexOf('jsp') != -1) {
|
||||
header['X_Requested_With'] = 'XMLHttpRequest';
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
var $li = $('#' + file.id),
|
||||
$percent = $li.find('.progress span');
|
||||
|
||||
$percent.css('width', percentage * 100 + '%');
|
||||
percentages[file.id][1] = percentage;
|
||||
updateTotalProgress();
|
||||
});
|
||||
|
||||
uploader.on('uploadSuccess', function (file, ret) {
|
||||
var $file = $('#' + file.id);
|
||||
try {
|
||||
var responseText = (ret._raw || ret),
|
||||
json = utils.str2json(responseText);
|
||||
json = editor.getOpt('serverResponsePrepare')(json);
|
||||
if (json.state == 'SUCCESS') {
|
||||
uploadaudioList.push({
|
||||
'url': json.url,
|
||||
'type': json.type,
|
||||
'original': json.original
|
||||
});
|
||||
$file.append('<span class="success"></span>');
|
||||
} else {
|
||||
$file.find('.error').text(json.state).show();
|
||||
}
|
||||
} catch (e) {
|
||||
$file.find('.error').text(lang.errorServerUpload).show();
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on('uploadError', function (file, code) {
|
||||
});
|
||||
uploader.on('error', function (code, param1, param2) {
|
||||
if (code === 'F_EXCEED_SIZE') {
|
||||
editor.getOpt('tipError')(lang.errorExceedSize + ' ' + (param1 / 1024 / 1024).toFixed(1) + 'MB');
|
||||
} else {
|
||||
console.log('error', code, param1, param2);
|
||||
}
|
||||
});
|
||||
uploader.on('uploadComplete', function (file, ret) {
|
||||
});
|
||||
|
||||
$upload.on('click', function () {
|
||||
if ($(this).hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (state === 'ready') {
|
||||
uploader.upload();
|
||||
} else if (state === 'paused') {
|
||||
uploader.upload();
|
||||
} else if (state === 'uploading') {
|
||||
uploader.stop();
|
||||
}
|
||||
});
|
||||
|
||||
$upload.addClass('state-' + state);
|
||||
updateTotalProgress();
|
||||
},
|
||||
getQueueCount: function () {
|
||||
var file, i, status, readyFile = 0, files = this.uploader.getFiles();
|
||||
for (i = 0; file = files[i++];) {
|
||||
status = file.getStatus();
|
||||
if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
|
||||
}
|
||||
return readyFile;
|
||||
},
|
||||
refresh: function () {
|
||||
this.uploader.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue