chuangte/smart-switch-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

临时提交

Browse Source
This commit is contained in:
磷叶 2025-03-03 18:04:29 +08:00
parent 92fe012388
commit 5f44ec715b
12 changed files with 819 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/ss/suit.js
View File

@ -9,6 +9,13 @@ export function listSuit(query) {
})
}
// 查询套餐列表
export function listSuitByIds(ids) {
return request({
url: `/ss/suit/listByIds/${ids}`,
method: 'get',
})
}
// 查询套餐详细
export function getSuit(suitId) {
return request({

12
src/api/system/device.js
View File

@ -219,3 +219,15 @@ export function deviceSetWxs(deviceId, wxs) {
}
})
}
// 设置设备反转参数
export function deviceSetSet(deviceId, set) {
return request({
url: '/system/device/setSet',
method: 'put',
data: {
deviceId,
set
}
})
}

31
src/components/Business/StoreType/StoreTypeSelect.vue
View File

@ -1,21 +1,22 @@
<template>
<el-select
<el-cascader
v-model="selectValue"
:placeholder="placeholder"
clearable
filterable
:disabled="disabled"
:multiple="multiple"
@change="handleChange"
v-on="$listeners"
style="width: 100%;"
>
<el-option
v-for="item in list"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
:options="options"
:show-all-levels="false"
:props="{
emitPath: false,
multiple: multiple,
expandTrigger: 'hover',
value: 'id',
label: 'name',
checkStrictly: checkStrictly
}"
/>
</template>
<script>
@ -39,11 +40,16 @@ export default {
multiple: {
type: Boolean,
default: false
},
checkStrictly: {
type: Boolean,
default: false
}
},
data() {
return {
list: [],
options: [],
};
},
computed: {
@ -63,6 +69,7 @@ export default {
getList() {
listAllStoreType().then(response => {
this.list = response.data;
this.options = this.handleTree(response.data, 'id', 'parentId', 'children');
});
},
handleChange(val) {

128
src/components/Business/Suit/SuitCheckDialog.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<check-dialog
:show.sync="dialogVisible"
:title="title"
:columns="columns"
:selected-ids="selectedIds"
:list-api="listApi"
:load-api="loadApi"
:query-params="queryParams"
:query="query"
@confirm="handleConfirm"
:multiple="multiple"
prop="suitId"
ref="checkDialog"
>
<template #search-form>
<suit-search-form :queryParams="queryParams" @query="handleQuery"/>
</template>
<template #table-column="{column, row}">
<suit-table-column :column="column" :row="row"/>
</template>
</check-dialog>
</template>
<script>
import { listSuit, listSuitByIds } from "@/api/ss/suit";
import CheckDialog from "@/components/CheckDialog/index.vue";
import SuitSearchForm from '@/views/ss/suit/component/SuitSearchForm.vue'
import SuitTableColumn from '@/views/ss/suit/component/SuitTableColumn.vue'
export default {
name: "SuitDialog",
components: {
CheckDialog,
SuitSearchForm,
SuitTableColumn
},
dicts: ['customer_status'],
props: {
// 弹窗标题
title: {
type: String,
default: "选择套餐"
},
// 是否显示弹窗
show: {
type: Boolean,
default: false
},
// 默认选中的ID列表
selectedIds: {
type: [String, Array],
default: null,
},
// 列表API
listApi: {
type: Function,
default: listSuit
},
// 加载API
loadApi: {
type: Function,
default: listSuitByIds
},
// 是否多选
multiple: {
type: Boolean,
default: false
},
// 查询参数
query: {
type: Object,
default: null
}
},
data() {
return {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
code: null,
name: null,
status: null,
intentLevel: null,
mobile: null,
wechat: null,
followId: null
},
// 字段列表
columns: [
{key: 'suitId', visible: true, label: 'ID', minWidth: null, overflow: false, align: 'center', width: "80"},
{key: 'name', visible: true, label: '套餐名称', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'mobileOrUserName', visible: true, label: '所属用户', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'feeMode', visible: true, label: '收费模式', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'feeType', visible: true, label: '收费类型', minWidth: null, overflow: false, align: 'center', width: "120"},
{key: 'price', visible: true, label: '价格', minWidth: null, overflow: false, align: 'center', width: "180"},
{key: 'deposit', visible: true, label: '押金', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'description', visible: true, label: '详细说明', minWidth: null, overflow: true, align: 'center', width: null},
{key: 'deviceList', visible: true, label: '应用设备', minWidth: "200", overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, overflow: false, align: 'center', width: "100"},
],
}
},
computed: {
dialogVisible: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
}
}
},
methods: {
// 确认选择
handleConfirm(selection) {
this.$emit('confirm', selection);
},
// 处理查询
handleQuery() {
this.$refs.checkDialog.handleQuery();
}
}
}
</script>

70
src/components/Business/Suit/SuitInput.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div>
<el-input
:value="text"
@focus="showDialog = true"
placeholder="点击选择套餐"
:disabled="disabled"
/>
<suit-check-dialog
:show.sync="showDialog"
@confirm="handleConfirm"
:selected-ids="value"
:multiple="multiple"
:query="query"
/>
</div>
</template>
<script>
import SuitCheckDialog from '@/components/Business/Suit/SuitCheckDialog.vue';
export default {
components: { SuitCheckDialog },
props: {
// 选中数据
value: {
type: [String, Array],
default: null
},
// 文本
text: {
type: String,
default: null,
},
// 是否多选
multiple: {
type: Boolean,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
default: false,
},
// 查询参数
query: {
type: Object,
default: () => ({})
}
},
data() {
return {
showDialog: false,
prop: "suitId",
}
},
methods: {
handleConfirm(selection) {
if (this.multiple) {
this.$emit('input', selection.map(item => item[this.prop]));
this.$emit('update:text', selection.map(item => item.name).join(','));
} else {
this.$emit('input', selection?.[this.prop]);
this.$emit('update:text', selection?.name);
}
this.$emit('confirm', selection);
}
}
}
</script>

270
src/components/CheckDialog/index.vue Normal file
View File

@ -0,0 +1,270 @@
<template>
<el-dialog
:visible.sync="dialogVisible"
:title="title"
width="1080px"
append-to-body
@open="init"
@close="handleClose"
>
<!-- 搜索区域 -->
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">
<slot name="search-form"></slot>
<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-table
v-loading="loading"
:data="list"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDbClick"
:highlight-current-row="!multiple"
height="400"
ref="table"
>
<el-table-column type="selection" width="55" align="center" v-if="multiple" />
<template v-for="(column, index) in columns">
<el-table-column
:key="index"
:prop="column.key"
:label="column.label"
:align="column.align || 'center'"
:width="column.width"
:min-width="column.minWidth"
:show-overflow-tooltip="column.overflow"
>
<template slot-scope="scope">
<slot name="table-column" :row="scope.row" :column="column">
{{ scope.row[column.key] | dv }}
</slot>
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 底部按钮 -->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirm">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "CheckDialog",
props: {
// 弹窗标题
title: {
type: String,
default: "选择数据"
},
// 是否显示弹窗
show: {
type: Boolean,
default: false
},
// 默认选中的ID列表
selectedIds: {
type: [String, Array],
default: null
},
// 表格列配置
columns: {
type: Array,
required: true
},
// 获取列表数据的API
listApi: {
type: Function,
required: true
},
// 获取详情数据的API
loadApi: {
type: Function,
required: true
},
// 选中数据对应的ID字段
prop: {
type: String,
default: "id"
},
// 多选
multiple: {
type: Boolean,
default: false,
},
// 静态查询条件
queryParams: {
type: Object,
default: () => {
return {
pageNum: 1,
pageSize: 20
}
}
},
// 动态查询条件
query: {
type: Object,
default: () => ({})
}
},
data() {
return {
// 遮罩层
loading: false,
// 选中数据ID
selection: [],
// 总条数
total: 0,
// 表格数据
list: [],
}
},
computed: {
dialogVisible: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
}
}
},
methods: {
// 初始化
async init() {
if (this.multiple && this.selectedIds != null) {
this.selection = [...this.selectedIds];
} else {
this.selection = [this.selectedIds];
}
Object.assign(this.queryParams, {
pageNum: 1,
pageSize: 20,
...this.query
});
this.getList();
},
// 查询列表
getList() {
this.loading = true;
this.listApi(this.queryParams).then(res => {
this.list = res.rows;
this.total = res.total;
this.loading = false;
// 回显数据
this.handleReShow();
});
},
// 回显数据
handleReShow() {
// 需要回显的数据
let reshowList = [];
this.list.forEach((row) => {
if (this.selection.includes(row[this.prop])) {
reshowList.push(row);
}
});
// 回显数据
this.$nextTick(() => {
reshowList.forEach((row) => {
this.$refs.table.toggleRowSelection(row, true);
});
});
},
// 搜索按钮操作
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
// 重置按钮操作
resetQuery() {
this.$refs["queryForm"].resetFields();
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.selection = selection.map(item => item[this.prop]);
},
// 确认按钮
handleConfirm() {
if (this.loadApi) {
this.loading = true;
this.loadApi(this.selection).then((res) => {
this.confirm(res.data);
this.handleClose();
}).finally(() => {
this.loading = false;
});
} else {
this.confirm(res.data);
this.handleClose();
}
},
confirm(data) {
if (this.multiple) {
this.$emit("confirm", data);
} else {
if (data.length > 0) {
this.$emit("confirm", data[0]);
} else {
this.$emit("confirm", null);
}
}
},
// 关闭弹窗
handleClose() {
this.dialogVisible = false;
},
// 处理行点击
handleRowClick(row) {
console.log("row", row);
if (this.multiple) {
if (this.selection.includes(row[this.prop])) {
this.$refs.table.toggleRowSelection(row, false);
} else {
this.$refs.table.toggleRowSelection(row, true);
}
} else {
this.selection = [row[this.prop]];
}
},
// 处理行双击
handleRowDbClick(row) {
if (!this.multiple) {
this.selection = [row[this.prop]];
this.handleConfirm();
}
}
}
}
</script>
<style lang="scss" scoped>
.el-dialog {
.el-table {
margin: 10px 0;
}
}
</style>

47
src/views/ss/storeType/index.vue
View File

@ -50,7 +50,16 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="storeTypeList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
<el-table
v-loading="loading"
:data="treeData"
@selection-change="handleSelectionChange"
:default-sort="defaultSort"
@sort-change="onSortChange"
:tree-props="{children: 'children'}"
row-key="id"
:default-expand-all="true"
>
<el-table-column type="selection" width="55" align="center" />
<template v-for="column of showColumns">
<el-table-column
@ -69,7 +78,7 @@
{{d.row[column.key]}}
</template>
<template v-else-if="column.key === 'icon'">
<image-preview :src="d.row[column.key]" :width="50" :height="50"/>
<image-preview :src="d.row[column.key]" :width="24" :height="24"/>
</template>
<template v-else>
{{d.row[column.key]}}
@ -79,6 +88,13 @@
</template>
<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-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['ss:storeType:add']"
>新增</el-button>
<el-button
size="mini"
type="text"
@ -97,17 +113,20 @@
</el-table-column>
</el-table>
<pagination
<!-- <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="parentId">
<store-type-select v-model="form.parentId" placeholder="请选择上级类型" style="width: 100%" :check-strictly="true"/>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
@ -129,6 +148,8 @@
<script>
import { listStoreType, getStoreType, delStoreType, addStoreType, updateStoreType } from "@/api/ss/storeType";
import { $showColumns } from '@/utils/mixins';
import StoreTypeSelect from '@/components/Business/StoreType/StoreTypeSelect.vue';
import { listAllStoreType } from '@/api/ss/storeApply';
// 默认排序字段
const defaultSort = {
@ -139,12 +160,16 @@ const defaultSort = {
export default {
name: "StoreType",
mixins: [$showColumns],
components: {
StoreTypeSelect
},
data() {
return {
treeData: [],
// 字段列表
columns: [
{key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
{key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'name', visible: true, label: '名称', minWidth: null, sortable: true, overflow: false, align: 'left', width: null},
{key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
{key: 'icon', visible: true, label: '图标', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
@ -207,9 +232,9 @@ export default {
/** 查询店铺类型列表 */
getList() {
this.loading = true;
listStoreType(this.queryParams).then(response => {
this.storeTypeList = response.rows;
this.total = response.total;
listAllStoreType(this.queryParams).then(response => {
this.storeTypeList = response.data;
this.treeData = this.handleTree(response.data, 'id', 'parentId', 'children');
this.loading = false;
});
},
@ -225,6 +250,7 @@ export default {
name: null,
icon: null,
createTime: null,
parentId: null,
sort: 0,
};
this.resetForm("form");
@ -246,8 +272,9 @@ export default {
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
handleAdd(row) {
this.reset();
this.form.parentId = row.id;
this.open = true;
this.title = "添加店铺类型";
},

67
src/views/ss/suit/component/SuitSearchForm.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div>
<el-form-item label="设备名称" prop="deviceId" v-if="notHasView(views.device)">
<el-input
v-model="queryParams.deviceName"
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="userMobile">
<el-input
v-model="queryParams.userMobile"
placeholder="请输入用户手机号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="套餐名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入套餐名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="收费模式" prop="feeMode">
<el-select v-model="queryParams.feeMode" placeholder="请选择收费模式" clearable @change="handleQuery">
<el-option v-for="dict in dict.type.suit_fee_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="收费类型" prop="feeType">
<el-select v-model="queryParams.feeType" placeholder="请选择收费类型" clearable @change="handleQuery">
<el-option v-for="dict in dict.type.suit_fee_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</div>
</template>
<script>
import { $view } from '@/utils/mixins'
export default {
name: "SuitSearchForm",
mixins: [$view],
dicts: ['suit_fee_mode', 'suit_fee_type'],
props: {
queryParams: {
type: Object,
required: true
}
},
methods: {
handleQuery() {
this.$emit('query');
}
}
}
</script>

122
src/views/ss/suit/component/SuitTable.vue
View File

@ -1,48 +1,7 @@
<template>
<div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备名称" prop="deviceId" v-if="notHasView(views.device)">
<el-input
v-model="queryParams.deviceName"
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="userMobile">
<el-input
v-model="queryParams.userMobile"
placeholder="请输入用户手机号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="套餐名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入套餐名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="收费模式" prop="feeMode">
<el-select v-model="queryParams.feeMode" placeholder="请选择收费模式" clearable @change="handleQuery">
<el-option v-for="dict in dict.type.suit_fee_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="收费类型" prop="feeType">
<el-select v-model="queryParams.feeType" placeholder="请选择收费类型" clearable @change="handleQuery">
<el-option v-for="dict in dict.type.suit_fee_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<suit-search-form :queryParams="queryParams" @query="handleQuery"/>
<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>
@ -51,45 +10,26 @@
<el-row :gutter="10" class="mb8">
<slot name="table-operator"/>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="suitList" v-on="$listeners">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="套餐ID" align="center" prop="suitId" width="80"/>
<el-table-column label="套餐名称" align="center" prop="name" width="100"/>
<el-table-column label="所属用户" align="center" prop="mobileOrUserName" width="100">
<user-link slot-scope="d" :id="d.row.userId" :name="d.row.mobileOrUserName"/>
</el-table-column>
<el-table-column label="收费模式" align="center" prop="feeMode" width="100">
<dict-tag slot-scope="d" :value="d.row.feeMode" :options="dict.type.suit_fee_mode"/>
</el-table-column>
<el-table-column label="收费类型" align="center" prop="feeType" width="120">
<dict-tag slot-scope="d" :value="d.row.feeType" :options="dict.type.suit_fee_type"/>
</el-table-column>
<el-table-column label="价格" align="center" prop="price" width="180">
<template slot-scope="d">
<template v-if="SuitFeeType.TIMING === d.row.feeType">
{{d.row.price | money}} 元 / {{d.row.value}} {{suitTimeUnit(d.row.timeUnit)}}
<template v-for="column of showColumns">
<el-table-column
:key="column.key"
:label="column.label"
:prop="column.key"
:align="column.align"
:min-width="column.minWidth"
:width="column.width"
:show-overflow-tooltip="column.overflow"
>
<template slot-scope="d">
<suit-table-column :column="column" :row="d.row"/>
</template>
<template v-else-if="SuitFeeType.COUNT === d.row.feeType">
{{d.row.price | money}} 元 / {{d.row.value}} 度
</template>
<template v-else>动态计算</template>
</template>
</el-table-column>
<el-table-column label="押金" align="center" prop="deposit" width="100">
<template slot-scope="d">{{d.row.deposit | money}} 元</template>
</el-table-column>
<el-table-column label="详细说明" align="center" prop="description" show-overflow-tooltip/>
<el-table-column label="应用设备" align="center" prop="deviceList" min-width="200">
<template slot-scope="d">
<template v-for="(item, index) in d.row.deviceList" >
<device-link type="tag" style="margin-right: 4px" :key="index" :id="item.deviceId" :text="`${item.deviceName}(${item.deviceNo})`"/>
</template>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="100"/>
</el-table-column>
</template>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
<template slot-scope="scope">
<slot name="row-operator" :row="scope.row"/>
@ -114,14 +54,16 @@ import DeviceInput from '@/components/Business/Device/DeviceInput.vue'
import { findLabel, isEmpty } from '@/utils'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import { $view } from '@/utils/mixins'
import { $view, $showColumns } from '@/utils/mixins'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import { SuitFeeMode, SuitFeeType } from '@/utils/constants'
import SuitEditDialog from '@/views/ss/suit/component/SuitEditDialog.vue'
import SuitSearchForm from '@/views/ss/suit/component/SuitSearchForm.vue'
import SuitTableColumn from '@/views/ss/suit/component/SuitTableColumn.vue'
export default {
name: "SuitTable",
mixins: [$view],
mixins: [$view, $showColumns],
dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
computed: {
SuitFeeType() {
@ -134,7 +76,15 @@ export default {
}
},
},
components: { SuitEditDialog, DeviceLink, UserInput, UserLink, DeviceInput },
components: {
SuitEditDialog,
DeviceLink,
UserInput,
UserLink,
DeviceInput,
SuitSearchForm,
SuitTableColumn
},
props: {
query: {
type: Object,
@ -178,9 +128,23 @@ export default {
description: null,
deleted: null
},
// 字段列表
columns: [
{key: 'suitId', visible: true, label: 'ID', minWidth: null, overflow: false, align: 'center', width: "80"},
{key: 'name', visible: true, label: '套餐名称', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'mobileOrUserName', visible: true, label: '所属用户', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'feeMode', visible: true, label: '收费模式', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'feeType', visible: true, label: '收费类型', minWidth: null, overflow: false, align: 'center', width: "120"},
{key: 'price', visible: true, label: '价格', minWidth: null, overflow: false, align: 'center', width: "180"},
{key: 'deposit', visible: true, label: '押金', minWidth: null, overflow: false, align: 'center', width: "100"},
{key: 'description', visible: true, label: '详细说明', minWidth: null, overflow: true, align: 'center', width: null},
{key: 'deviceList', visible: true, label: '应用设备', minWidth: "200", overflow: false, align: 'center', width: null},
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, overflow: false, align: 'center', width: "100"},
],
};
},
created() {
this.initColumns();
this.queryParams = {
...this.queryParams,
...this.query

75
src/views/ss/suit/component/SuitTableColumn.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div>
<template v-if="column.key === 'suitId'">
{{row[column.key]}}
</template>
<template v-else-if="column.key === 'name'">
{{row[column.key]}}
</template>
<template v-else-if="column.key === 'mobileOrUserName'">
<user-link :id="row.userId" :name="row.mobileOrUserName"/>
</template>
<template v-else-if="column.key === 'feeMode'">
<dict-tag :value="row[column.key]" :options="dict.type.suit_fee_mode"/>
</template>
<template v-else-if="column.key === 'feeType'">
<dict-tag :value="row[column.key]" :options="dict.type.suit_fee_type"/>
</template>
<template v-else-if="column.key === 'price'">
<template v-if="SuitFeeType.TIMING === row.feeType">
{{row.price | money}} 元 / {{row.value}} {{suitTimeUnit(row.timeUnit)}}
</template>
<template v-else-if="SuitFeeType.COUNT === row.feeType">
{{row.price | money}} 元 / {{row.value}} 度
</template>
<template v-else>动态计算</template>
</template>
<template v-else-if="column.key === 'deposit'">
{{row[column.key] | money}} 元
</template>
<template v-else-if="column.key === 'deviceList'">
<template v-for="(item, index) in row.deviceList">
<device-link type="tag" style="margin-right: 4px" :key="index" :id="item.deviceId" :text="`${item.deviceName}(${item.deviceNo})`"/>
</template>
</template>
<template v-else>
{{row[column.key]}}
</template>
</div>
</template>
<script>
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
import { findLabel } from '@/utils'
import { SuitFeeType } from '@/utils/constants'
export default {
name: "SuitTableColumn",
components: {
UserLink,
DeviceLink
},
dicts: ['time_unit', 'suit_fee_mode', 'suit_fee_type'],
props: {
column: {
type: Object,
required: true
},
row: {
type: Object,
required: true
}
},
computed: {
SuitFeeType() {
return SuitFeeType
}
},
methods: {
suitTimeUnit(unit) {
return findLabel(this.dict.type.time_unit, unit);
}
}
}
</script>

67
src/views/system/device/components/DeviceEditDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dialog :visible.sync="dialogVisible" :title="title" @open="handleOpen" :close-on-click-modal="false" width="900px" append-to-body>
<el-form ref="form" :model="form" size="small" :rules="rules" label-width="6em">
<el-form ref="form" :model="form" size="small" :rules="rules" label-width="6em" v-loading="loading">
<el-row :gutter="gutter">
<form-col :span="span" label="自定义图片" prop="customPicture">
<image-upload v-model="form.customPicture" :limit="1" :is-show-tip="false"/>
@ -26,16 +26,16 @@
</el-row>
<collapse-panel title="费用设置" :value="true">
<el-row :gutter="gutter">
<form-col :span="12" label="服务模式" prop="serviceMode">
<form-col :span="12" label="服务模式" prop="serviceMode" tip="直营模式：官方收取商户服务费。代理模式：代理商收取商户服务费，官方收取代理商服务费。">
<el-radio-group v-model="form.serviceMode">
<el-radio v-for="item of dict.type.device_service_mode" :label="item.value" :key="item.value">{{item.label}}</el-radio>
</el-radio-group>
</form-col>
<template v-if="form.serviceMode === DeviceServiceMode.AGENT">
<template v-if="form.serviceMode === DeviceServiceMode.AGENT" >
<form-col :span="12" label="代理商" prop="agentId">
<user-input v-model="form.agentId" :query="{type: SmUserType.AGENT}" />
</form-col>
<form-col :span="12" label="代理服务费" prop="agentServiceRate" label-width="7em">
<form-col :span="12" label="代理服务费" prop="agentServiceRate" label-width="7em" tip="代理商收取商户的服务费">
<el-input v-model="form.agentServiceRate" placeholder="请输入代理服务费" type="number">
<template #append>%</template>
</el-input>
@ -68,6 +68,19 @@
</form-col>
</el-row>
</collapse-panel>
<collapse-panel title="套餐设置" :value="true" v-if="form.userId != null">
<el-row :gutter="gutter">
<form-col :span="24" label="关联套餐" prop="suitIds">
<suit-input
:value="form.suitList.map(item => item.suitId)"
:text="form.suitList.map(item => item.name).join(',')"
:multiple="true"
@confirm="handleSuitConfirm"
:query="{userId: form.userId}"
/>
</form-col>
</el-row>
</collapse-panel>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -82,10 +95,11 @@ import ModelSelect from "@/components/Business/Model/modelSelect.vue";
import UserInput from '@/components/Business/SmUser/UserInput.vue'
import { DeviceServiceMode, SmUserType } from '@/utils/constants'
import CollapsePanel from '@/components/CollapsePanel/index.vue'
import SuitInput from '@/components/Business/Suit/SuitInput.vue'
export default {
name: 'DeviceEditDialog',
components: { UserInput, ModelSelect, CollapsePanel },
components: { UserInput, ModelSelect, CollapsePanel, SuitInput },
dicts: ['device_service_mode'],
props: {
visible: {
@ -99,24 +113,11 @@ export default {
},
data() {
return {
loading: false,
showFee: true,
form: {
deviceId: null,
picture: null,
modelId: null,
mac: null,
deviceNo: null,
deviceName: null,
serviceType: '1',
serviceRate: null,
remark: null,
startTime: null,
startUnit: "3",
startPrice: null,
overTime: null,
overUnit: "3",
overPrice: null,
serviceMode: '1'
suitIds: [],
suitList: [],
},
span: 8,
gutter: 8,
@ -159,21 +160,34 @@ export default {
}
},
methods: {
// 套餐确认
handleSuitConfirm(selection) {
this.form.suitList = selection;
},
// 打开
handleOpen() {
if (this.deviceId != null) {
getDevice(this.deviceId).then(response => {
this.form = response.data;
});
this.getDetail();
} else {
this.reset();
}
},
// 获取详情
getDetail() {
this.loading = true;
getDevice(this.deviceId).then(response => {
this.form = response.data;
}).finally(() => {
this.loading = false;
})
},
reset() {
this.form = {
deviceId: null,
picture: null,
modelId: null,
mac: null,
mac2: null,
deviceNo: null,
deviceName: null,
serviceType: '1',
@ -185,7 +199,9 @@ export default {
overTime: null,
overUnit: "3",
overPrice: null,
serviceMode: '1'
serviceMode: '1',
// vo
suitList: [],
};
this.$nextTick(() => {
this.$refs.form?.resetFields();
@ -206,6 +222,7 @@ export default {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.form.suitIds = this.form.suitList.map(item => item.suitId);
if (this.form.deviceId != null) {
updateDevice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");

63
src/views/system/device/detail.vue
View File

@ -8,14 +8,17 @@
<!-- 主要信息 -->
<div class="device-title">
<i class="el-icon-monitor"></i>
<span class="device-name">{{deviceData.deviceName | dv}}</span>
<div class="device-name">
{{deviceData.deviceName | dv}}
<el-link type="primary" icon="el-icon-edit" @click="handleEditDevice"></el-link>
</div>
<dot-status :active="deviceData.onlineStatus === DeviceOnlineStatus.ONLINE" show-text/>
<dot-status :active="isOpen" show-text active-text="已开启" inactive-text="已关闭"/>
<dot-status
:active="deviceData.status === DeviceStatus.FREE"
show-text
active-text="空闲"
:inactive-text="deviceData.status === DeviceStatus.USING ? '使用中' : '调度中'"
:inactive-text="deviceData.status === DeviceStatus.USING ? '使用中' : '调试中'"
/>
<span class="last-online-time">
<i class="el-icon-time"></i>
@ -26,6 +29,8 @@
<!-- 操作按钮组 -->
<el-row class="device-actions">
<el-button size="small" plain icon="el-icon-setting" @click="handleReverse(true)" v-if="!isReverse">反转开关</el-button>
<el-button size="small" plain icon="el-icon-setting" @click="handleReverse(false)" v-if="isReverse">正转开关</el-button>
<el-button size="small" plain icon="el-icon-plus" @click="handleAddTime">增加时长</el-button>
<el-button size="small" plain icon="el-icon-plus" @click="handleAddEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">增加电量</el-button>
<el-button size="small" plain icon="el-icon-refresh" @click="handleReset">时长归零</el-button>
@ -341,6 +346,9 @@
</el-dialog>
<device-set-wifi-dialog :show.sync="showSetWifi" :device-id="deviceData.deviceId" @success="onSetWifiSuccess"/>
<device-edit-dialog :visible.sync="editDialogVisible" :device-id="deviceData.deviceId"/>
</div>
</template>
@ -349,6 +357,7 @@
import {
addEle,
addTime, deviceInitTotalEle,
deviceSetSet,
deviceSetWxs,
getDevice,
refreshIot,
@ -382,6 +391,8 @@ import DeviceSetWifiDialog from '@/views/system/device/components/DeviceSetWifiD
import CommandLog from "@/views/ss/commandLog/index.vue";
import DotStatus from '@/components/DotStatus/index.vue'
import DeviceSn from '@/views/system/device/components/DeviceSn.vue'
import DeviceEditDialog from '@/views/system/device/components/DeviceEditDialog.vue'
export default {
name: 'Device/:deviceId',
@ -400,17 +411,14 @@ export default {
'device_set'
],
components: {
CommandLog,
DeviceSetWifiDialog,
LineField,
BindAgentButton,
BindMchButton,
BooleanTag,
Recharge,
UserLink,
StoreLink,
RecordTime,
Suit, ResetRecord, BindRecord, ReadingRecord, MeterRecordReport, QrCode, RechargeRecord, LineChart, DotStatus, DeviceSn},
CommandLog, DeviceSetWifiDialog, LineField,
BindAgentButton, BindMchButton, BooleanTag,
Recharge, UserLink, StoreLink,
RecordTime, Suit, ResetRecord,
BindRecord, ReadingRecord, MeterRecordReport,
QrCode, RechargeRecord, LineChart,
DotStatus, DeviceSn, DeviceEditDialog
},
data() {
return {
showSetWifi: false,
@ -437,7 +445,8 @@ export default {
DeviceStatus,
ModelTag,
DeviceServiceMode,
DeviceOnlineType
DeviceOnlineType,
editDialogVisible: false
}
},
computed: {
@ -474,6 +483,10 @@ export default {
isOpen() {
return this.deviceData != null && this.deviceData.powerStatus === '1';
},
// 是否反转
isReverse() {
return this.deviceData != null && this.deviceData.set === '1';
},
// 是否限制充值
isLimitRecharge() {
if (this.deviceData == null || this.deviceData.limitRechargeTime == null) {
@ -490,6 +503,26 @@ export default {
clearInterval(this.timer);
},
methods: {
handleEditDevice() {
this.editDialogVisible = true;
},
// 反转设备
handleReverse(reverse) {
this.$confirm(`是否确认${reverse ? '反转' : '正转'}设备？`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let set = reverse ? '1' : '0';
deviceSetSet(this.deviceData.deviceId, set).then(res => {
if (res.code === 200) {
this.$message.success('操作成功');
this.deviceData.set = set;
}
})
})
},
// 修改电量系数
handleSetWxs() {
this.$prompt('请输入电量系数', '修改电量系数', {
confirmButtonText: '确定',
@ -729,6 +762,8 @@ export default {
font-size: 18px;
font-weight: bold;
margin-right: 6px;
display: flex;
align-items: center;
}
.last-online-time {