820 lines
28 KiB
Vue
820 lines
28 KiB
Vue
<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="roomName">
|
||
<el-input v-model="queryParams.roomName" placeholder="请输入设施名" clearable @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item label="店铺" prop="storeId" v-if="!storeId">
|
||
<el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择" :disabled="query.storeId">
|
||
<el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="类型" prop="equType">
|
||
<el-select v-model="queryParams.equType" placeholder="请选择类型" clearable style="width: 240px">
|
||
<el-option v-for="dict in dict.type.ss_hall_equ_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">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||
v-hasPermi="['system:room: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:room: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:room: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:room:export']">导出</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange" :default-sort="defaultSort"
|
||
@sort-change="onSortChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<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" :sort-orders="orderSorts" :sortable="column.sortable"
|
||
:show-overflow-tooltip="column.overflow" :width="column.width">
|
||
<template slot-scope="d">
|
||
<template v-if="column.key === 'roomId'">
|
||
{{ d.row[column.key] }}
|
||
</template>
|
||
<template v-else-if="column.key === 'roomName'">
|
||
<router-link :to="'/system/equipmentDetail/index/' + d.row.roomId" class="link-type">
|
||
<span>{{ d.row[column.key] }}</span>
|
||
</router-link>
|
||
</template>
|
||
<template v-else-if="column.key === 'qrText'">
|
||
<el-popover placement="top" trigger="hover">
|
||
<div class="qr-code-box">
|
||
<qr-code :text="getCodeText(d.row)" :width="150" :height="150" />
|
||
<p>扫描二维码进入设施</p>
|
||
</div>
|
||
<el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
|
||
</el-popover>
|
||
</template>
|
||
<template v-else-if="column.key === 'sn'">
|
||
<router-link :to="`/system/deviceDetail/index/${d.row.deviceId}`" class="link-type" v-if="d.row.sn">
|
||
<span>{{ d.row[column.key] }}</span>
|
||
</router-link>
|
||
<el-button v-else type="text" size="mini" class="bind-button" @click="openBindDeviceDialog(d.row)">去绑定</el-button>
|
||
</template>
|
||
<template v-else-if="column.key === 'storeName'">
|
||
<router-link :to="`/system/storeDetail/index/${d.row.storeId}`" class="link-type">
|
||
{{ d.row[column.key] }}
|
||
</router-link>
|
||
</template>
|
||
<template v-else-if="column.key === 'pictures'">
|
||
<image-preview
|
||
:src="Array.isArray(d.row[column.key]) ? d.row[column.key][0] : d.row[column.key]"
|
||
:width="50"
|
||
:height="50"
|
||
fit="cover"
|
||
/>
|
||
</template>
|
||
<template v-else-if="column.key === 'equType'">
|
||
<dict-tag :options="dict.type.ss_hall_equ_type" :value="d.row[column.key]" />
|
||
</template>
|
||
<template v-else-if="column.key === 'feeRules'">
|
||
<el-tooltip placement="top" :content="getFeeRulesExplain(d.row[column.key])">
|
||
<span>{{ getFeeRulesExplain(d.row[column.key]) }}</span>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else-if="column.key === 'tags'">
|
||
<dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
|
||
</template>
|
||
<template v-else-if="column.key === 'status'">
|
||
<dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
|
||
</template>
|
||
<template v-else>
|
||
{{ d.row[column.key] }}
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
</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-view"
|
||
@click="handleDetail(scope.row)"
|
||
v-hasPermi="['system:room:query']"
|
||
>详情</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
v-hasPermi="['system:room:edit']"
|
||
>修改</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
v-hasPermi="['system:room: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="800px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item v-if="isAdmin" label="商户" prop="merchantId">
|
||
<el-select v-model="form.merchantId" placeholder="请选择商户" @change="handleMerchantChange" :disabled="query.merchantId">
|
||
<el-option
|
||
v-for="merchant in merchantOptions"
|
||
:key="merchant.userId"
|
||
:label="merchant.userName"
|
||
:value="merchant.userId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="店铺" prop="storeId">
|
||
<el-select v-model="form.storeId" clearable filterable placeholder="请选择" :disabled="query.storeId">
|
||
<el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="类型" prop="equType">
|
||
<el-select v-model="form.equType" placeholder="请选择类型" clearable filterable>
|
||
<el-option v-for="dict in dict.type.ss_hall_equ_type" :key="dict.value" :label="dict.label"
|
||
:value="dict.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设施名" prop="roomName">
|
||
<el-input v-model="form.roomName" placeholder="请输入设施名" />
|
||
</el-form-item>
|
||
<el-form-item label="图片" prop="picture">
|
||
<image-upload
|
||
v-model="form.picture"
|
||
:value="form.picture || (Array.isArray(form.pictures) ? form.pictures.join(',') : '')"
|
||
:limit="5"
|
||
:fileSize="5"
|
||
:fileType="['png', 'jpg', 'jpeg']"
|
||
tip="建议尺寸：750px * 750px，大小不超过5M"
|
||
@input="val => {
|
||
form.picture = val;
|
||
form.pictures = val ? val.split(',').filter(Boolean) : [];
|
||
}"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="标签" prop="tags">
|
||
<el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
|
||
<el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
|
||
:value="dict.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>
|
||
|
||
<!-- 绑定设备弹窗 -->
|
||
<el-dialog title="绑定设备" :visible.sync="bindDeviceDialogVisible" width="1000px" append-to-body>
|
||
<el-form :model="deviceQueryParams" ref="deviceQueryForm" :inline="true" label-width="68px">
|
||
<el-form-item label="MAC" prop="mac">
|
||
<el-input v-model="deviceQueryParams.mac" placeholder="请输入MAC" clearable style="width: 200px"/>
|
||
</el-form-item>
|
||
<el-form-item label="SN" prop="sn">
|
||
<el-input v-model="deviceQueryParams.sn" placeholder="请输入SN" clearable style="width: 200px"/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeviceQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetDeviceQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table v-loading="deviceTableLoading" :data="deviceList" @selection-change="handleDeviceSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="MAC-1" prop="mac" align="center" />
|
||
<el-table-column label="SN" prop="sn" align="center" />
|
||
<el-table-column label="图片" align="center" width="80">
|
||
<template slot-scope="scope">
|
||
<image-preview v-if="isEmpty(scope.row.customPicture)" :src="scope.row.picture" :width="50" :height="50" />
|
||
<image-preview v-else :src="scope.row.customPicture" :width="50" :height="50" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="名称" prop="deviceName" align="center" />
|
||
<el-table-column label="状态" prop="status" align="center">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.as_device_status" :value="scope.row.status" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="开关状态" prop="powerStatus" align="center">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.et_device_lock_status" :value="scope.row.powerStatus" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="网络" prop="onlineStatus" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag size="small" :type="scope.row.onlineStatus === 1 ? 'success' : 'danger'">
|
||
{{ scope.row.onlineStatus === 1 ? '在线' : '离线' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" prop="createTime" align="center" />
|
||
</el-table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="handlePlacementDevice" :disabled="deviceIds.length !== 1">确 定</el-button>
|
||
<el-button @click="bindDeviceDialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room";
|
||
import { $showColumns } from '@/utils/mixins';
|
||
import { listStore } from "@/api/system/store";
|
||
import { listRule } from "@/api/system/rule";
|
||
import { listUser } from "@/api/system/user";
|
||
import { listDevice } from "@/api/system/device";
|
||
import { placementDevice } from "@/api/system/device";
|
||
import QrCode from "@/components/QrCode/index.vue";
|
||
import { getDomain } from "@/api/common/common";
|
||
|
||
// 默认排序字段
|
||
const defaultSort = {
|
||
prop: "roomId",
|
||
order: "descending"
|
||
}
|
||
|
||
export default {
|
||
name: "HallEqu",
|
||
components: { QrCode },
|
||
mixins: [$showColumns],
|
||
dicts: ['ss_hall_equ_type', 'ss_room_status', 'ss_room_tags', 'as_device_status', 'et_device_lock_status'],
|
||
props:{
|
||
query: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
domain: '', // 域名
|
||
// 设备绑定相关
|
||
bindDeviceDialogVisible: false,
|
||
selectedEquipment: null,
|
||
deviceTableLoading: false,
|
||
deviceList: [],
|
||
deviceTotal: 0,
|
||
deviceQueryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
mac: undefined,
|
||
sn: undefined,
|
||
placementStatus: 0, // 未投放
|
||
storeId: undefined,
|
||
merchantId: undefined
|
||
},
|
||
// 字段列表
|
||
columns: [
|
||
{ key: 'roomId', visible: true, label: '设施id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'roomName', visible: true, label: '设施名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'qrText', visible: true, label: '二维码', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'pictures', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'equType', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null },
|
||
{ key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
{ key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||
],
|
||
// 排序方式
|
||
orderSorts: ['ascending', 'descending', null],
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
storeOptions: [],
|
||
ruleOptions: [], // 套餐选项
|
||
basePriceOptions: [], // 基础价格选项
|
||
merchantOptions: [], // 商户选项
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 设施表格数据
|
||
roomList: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
defaultSort,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
orderByColumn: defaultSort.prop,
|
||
isAsc: defaultSort.order,
|
||
roomName: null,
|
||
storeName: null,
|
||
storeId: null,
|
||
merchantId: null,
|
||
type: undefined,
|
||
type2: "2",
|
||
equType: undefined,
|
||
picture: null,
|
||
tags: [],
|
||
specification: null,
|
||
status: null,
|
||
},
|
||
// 表单参数
|
||
form: {
|
||
equipmentId: undefined,
|
||
equipmentName: undefined,
|
||
storeId: this.query.storeId,
|
||
merchantId: this.query.merchantId,
|
||
type: undefined,
|
||
picture: undefined,
|
||
pictures: [],
|
||
tags: [],
|
||
ruleIds: [],
|
||
specification: undefined,
|
||
// billingMode: 'basePrice', // 默认计费方式
|
||
},
|
||
// 表单校验
|
||
rules: {
|
||
roomName: [
|
||
{ required: true, message: "设施名不能为空", trigger: "blur" }
|
||
],
|
||
storeId: [
|
||
{ required: true, message: "店铺不能为空", trigger: "blur" }
|
||
],
|
||
type: [
|
||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||
],
|
||
equType: [
|
||
{ required: true, message: "设施类型不能为空", trigger: "blur" }
|
||
],
|
||
tags: [
|
||
{ required: true, message: "标签不能为空", trigger: "change" }
|
||
],
|
||
ruleIds: [
|
||
{ required: true, message: "请选择基础价格或套餐", trigger: "change" }
|
||
],
|
||
basePriceId: [
|
||
{ required: true, message: "请选择基础价格或套餐", trigger: "change" }
|
||
],
|
||
// billingMode: [
|
||
// { required: true, message: "请选择计费方式", trigger: "change" }
|
||
// ],
|
||
},
|
||
// 设备默认排序
|
||
deviceDefaultSort: {
|
||
prop: "sn",
|
||
order: "descending"
|
||
},
|
||
// 设备表格选中数组
|
||
deviceIds: [],
|
||
// 设备表格单个禁用
|
||
deviceSingle: true,
|
||
// 设备表格多个禁用
|
||
deviceMultiple: true,
|
||
};
|
||
},
|
||
created() {
|
||
this.queryParams = {
|
||
...this.queryParams,
|
||
...this.query
|
||
}
|
||
this.getList();
|
||
this.getStoreOptions();
|
||
this.getRuleOptions();
|
||
this.getBasePriceOptions();
|
||
this.getMerchantOptions();
|
||
this.getDomain2();
|
||
},
|
||
methods: {
|
||
getStoreOptions(merchantId) {
|
||
listStore({ pageNum: 1, pageSize: 999, merchantId }).then(response => {
|
||
this.storeOptions = response.rows;
|
||
});
|
||
},
|
||
/** 当排序按钮被点击时触发 **/
|
||
onSortChange(column) {
|
||
if (column.order == null) {
|
||
this.queryParams.orderByColumn = defaultSort.prop;
|
||
this.queryParams.isAsc = defaultSort.order;
|
||
} else {
|
||
this.queryParams.orderByColumn = column.prop;
|
||
this.queryParams.isAsc = column.order;
|
||
}
|
||
this.getList();
|
||
},
|
||
/** 查询设施列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
// if (this.storeId) {
|
||
// this.queryParams.storeId = this.storeId;
|
||
// }
|
||
// if (this.roomId) {
|
||
// this.queryParams.roomId = this.roomId;
|
||
// this.queryParams.type2 = null;
|
||
// }
|
||
// if (this.merchantId) {
|
||
// this.queryParams.merchantId = this.merchantId;
|
||
// }
|
||
listRoom(this.queryParams).then(response => {
|
||
this.roomList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
roomId: undefined,
|
||
roomName: undefined,
|
||
storeId: this.query.storeId,
|
||
merchantId: this.query.merchantId,
|
||
type: undefined,
|
||
picture: undefined,
|
||
tags: [],
|
||
specification: undefined
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
if (Array.isArray(this.queryParams.tags) && this.queryParams.tags.length > 0) {
|
||
this.queryParams.tags = this.queryParams.tags.join(',');
|
||
}
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.queryParams.type = undefined;
|
||
this.queryParams.tags = [];
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.roomId)
|
||
this.single = selection.length !== 1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加设施";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.reset();
|
||
const roomId = row.roomId || this.ids
|
||
getRoom(roomId).then(response => {
|
||
this.form = response.data;
|
||
// 处理图片回显
|
||
if (Array.isArray(this.form.pictures) && this.form.pictures.length > 0) {
|
||
this.form.picture = this.form.pictures.join(',');
|
||
} else {
|
||
this.form.picture = '';
|
||
this.form.pictures = [];
|
||
}
|
||
// 确保套餐ID是数组格式
|
||
this.form.ruleIds = Array.isArray(response.data.feeRules)
|
||
? response.data.feeRules.map(rule => rule.ruleId)
|
||
: [];
|
||
|
||
// 调用 handleMerchantChange 以根据商户 ID 初始化数据
|
||
this.handleMerchantChange(this.form.merchantId);
|
||
|
||
this.open = true;
|
||
this.title = "修改设施";
|
||
});
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
const submitData = { ...this.form };
|
||
// 处理图片数据格式
|
||
if (submitData.picture) {
|
||
submitData.pictures = submitData.picture.split(',').filter(Boolean);
|
||
submitData.picture = submitData.pictures.join(',');
|
||
}
|
||
submitData.type2 = "2";
|
||
|
||
// 确保基础价格和套餐的选择逻辑
|
||
if (submitData.basePriceId) {
|
||
submitData.ruleIds = [submitData.basePriceId];
|
||
}
|
||
|
||
if (this.form.roomId != null) {
|
||
updateRoom(submitData).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
addRoom(submitData).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const roomIds = row.roomId || this.ids;
|
||
this.$modal.confirm('是否确认删除设施编号为"' + roomIds + '"的数据项？').then(function () {
|
||
return delRoom(roomIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => { });
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('system/room/export', {
|
||
...this.queryParams
|
||
}, `room_${new Date().getTime()}.xlsx`)
|
||
},
|
||
/** 获取套餐说明文字 */
|
||
getFeeRulesExplain(feeRules) {
|
||
if (!feeRules || !Array.isArray(feeRules)) {
|
||
return '-';
|
||
}
|
||
return feeRules.map(rule => rule.explain).filter(Boolean).join('，');
|
||
},
|
||
/** 查看详情按钮操作 */
|
||
handleDetail(row) {
|
||
this.$router.push({
|
||
path: `/system/equipmentDetail/index/${row.roomId}`,
|
||
query: {
|
||
type: 'equipment'
|
||
}
|
||
});
|
||
},
|
||
/** 获取套餐选项 */
|
||
getRuleOptions(merchantId) {
|
||
listRule({ pageSize: 999, mode: 2, merchantId }).then(response => {
|
||
this.ruleOptions = response.rows;
|
||
});
|
||
},
|
||
getBasePriceOptions(merchantId) {
|
||
listRule({ pageSize: 999, mode: 1, merchantId }).then(response => {
|
||
this.basePriceOptions = response.rows;
|
||
});
|
||
},
|
||
getMerchantOptions() {
|
||
// 获取商户列表，userType = '01'
|
||
listUser({ userType: '01', pageSize: 999 }).then(response => {
|
||
this.merchantOptions = response.rows;
|
||
});
|
||
},
|
||
handleMerchantChange(merchantId) {
|
||
// 根据商户ID筛选套餐
|
||
if (this.form.billingMode === 'package') {
|
||
this.getRuleOptions(merchantId);
|
||
}
|
||
// 根据商户ID筛选店铺
|
||
this.getStoreOptions(merchantId);
|
||
|
||
// 根据商户ID筛选押金
|
||
if (this.form.billingMode === 'basePrice') {
|
||
this.getBasePriceOptions(merchantId);
|
||
}
|
||
},
|
||
handleBillingModeChange() {
|
||
if (this.form.billingMode === 'package' && this.form.merchantId) {
|
||
this.getRuleOptions(this.form.merchantId);
|
||
} else if (this.form.billingMode === 'basePrice' && this.form.merchantId) {
|
||
this.getBasePriceOptions(this.form.merchantId);
|
||
} else {
|
||
this.ruleOptions = [];
|
||
this.basePriceOptions = [];
|
||
}
|
||
},
|
||
// 获取二维码文本
|
||
getCodeText(equipment) {
|
||
let url = this.domain + `?roomId=` + equipment.qrText;
|
||
return this.domain ? url : '';
|
||
},
|
||
// 获取域名
|
||
getDomain2() {
|
||
getDomain().then(response => {
|
||
if (response.data) {
|
||
this.domain = response.data;
|
||
}
|
||
}).catch(error => {
|
||
this.$message.error("获取全局域名失败")
|
||
})
|
||
},
|
||
// 打开绑定设备弹窗
|
||
openBindDeviceDialog(row) {
|
||
this.bindDeviceDialogVisible = true;
|
||
// console.log("room----------",JSON.stringify(row))
|
||
this.selectedEquipment = row;
|
||
// this.deviceQueryParams.storeId = row.storeId;
|
||
this.deviceQueryParams.merchantId = row.merchantId;
|
||
this.getDeviceList();
|
||
},
|
||
// 获取设备列表
|
||
getDeviceList() {
|
||
this.deviceTableLoading = true;
|
||
listDevice(this.deviceQueryParams).then(response => {
|
||
this.deviceList = response.rows;
|
||
this.deviceTotal = response.total;
|
||
this.deviceTableLoading = false;
|
||
});
|
||
},
|
||
// 重置设备查询条件
|
||
resetDeviceQuery() {
|
||
this.deviceQueryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
mac: undefined,
|
||
sn: undefined,
|
||
placementStatus: 0,
|
||
storeId: this.selectedEquipment?.storeId,
|
||
merchantId: this.selectedEquipment?.merchantId
|
||
};
|
||
this.getDeviceList();
|
||
},
|
||
// 搜索设备
|
||
handleDeviceQuery() {
|
||
this.deviceQueryParams.pageNum = 1;
|
||
this.getDeviceList();
|
||
},
|
||
// 设备表格多选
|
||
handleDeviceSelectionChange(selection) {
|
||
this.deviceIds = selection.map(item => item.deviceId);
|
||
},
|
||
// 投放设备
|
||
handlePlacementDevice() {
|
||
if (this.deviceIds.length !== 1) {
|
||
this.$modal.msgError("请选择一个设备");
|
||
return;
|
||
}
|
||
|
||
const selectedDevice = this.deviceList.find(item => item.deviceId === this.deviceIds[0]);
|
||
if (!selectedDevice) {
|
||
this.$modal.msgError("设备数据异常");
|
||
return;
|
||
}
|
||
|
||
// 根据设施类型判断投放类型
|
||
let type;
|
||
switch(this.selectedEquipment.equType) {
|
||
case '1': // 麻将机
|
||
type = 2;
|
||
break;
|
||
case '2': // 台球桌
|
||
type = 3;
|
||
break;
|
||
default:
|
||
this.$modal.msgError("不支持的设施类型");
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
deviceId: selectedDevice.deviceId,
|
||
type: type,
|
||
objId: this.selectedEquipment.equipmentList[0].equipmentId
|
||
};
|
||
|
||
this.$modal.confirm('是否确认投放该设备？').then(() => {
|
||
placementDevice(data).then(response => {
|
||
this.$modal.msgSuccess("投放成功");
|
||
this.bindDeviceDialogVisible = false;
|
||
this.getList();
|
||
});
|
||
});
|
||
},
|
||
// 判断是否为空
|
||
isEmpty(val) {
|
||
return val === undefined || val === null || val === '';
|
||
},
|
||
},
|
||
computed: {
|
||
isAdmin() {
|
||
return this.$store.state.user.name === 'admin';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-select {
|
||
:deep(.el-select__tags) {
|
||
flex-wrap: wrap;
|
||
|
||
// 标签换行显示
|
||
.el-tag {
|
||
margin: 2px;
|
||
// 确保标签文字完整显示
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
// 输入框高度自适应
|
||
:deep(.el-input__inner) {
|
||
height: auto;
|
||
min-height: 32px;
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
}
|
||
}
|
||
|
||
// 下拉选项样式优化
|
||
.el-select-dropdown__item {
|
||
padding: 0 10px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// 表单项样式优化
|
||
.el-form-item {
|
||
margin-bottom: 18px;
|
||
|
||
// 标签选择器容器自适应
|
||
.el-select {
|
||
width: auto;
|
||
min-width: 240px;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
.el-table {
|
||
:deep(.el-tooltip__trigger) {
|
||
display: inline-block;
|
||
max-width: 200px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.link-type {
|
||
color: #11A983;
|
||
text-decoration: underline;
|
||
|
||
&:hover {
|
||
color: #11A98330;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.bind-button {
|
||
color: #11A983;
|
||
padding: 0;
|
||
|
||
&:hover {
|
||
color: #11A98330;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.qr-code-box {
|
||
text-align: center;
|
||
padding: 10px;
|
||
|
||
p {
|
||
margin: 10px 0 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|