chuangte/share-space-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
800899ab70
share-space-vue/src/views/system/hallEqu/index.vue

820 lines
28 KiB
Vue
Raw Normal View History

111
2025-01-21 09:48:54 +08:00
<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">
合伙人 订单详情
2025-01-25 09:30:34 +08:00
<el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择" :disabled="query.storeId">
111
2025-01-21 09:48:54 +08:00
<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>
111
2025-01-21 16:56:57 +08:00
<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>
111
2025-01-21 09:48:54 +08:00
</template>
111
2025-01-21 16:56:57 +08:00
<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>
111
2025-01-21 09:48:54 +08:00
</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>
111
2025-01-21 16:56:57 +08:00
<template v-else-if="column.key === 'equType'">
<dict-tag :options="dict.type.ss_hall_equ_type" :value="d.row[column.key]" />
111
2025-01-21 09:48:54 +08:00
</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>
111
2025-01-21 16:56:57 +08:00
<template v-else-if="column.key === 'tags'">
<dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
111
2025-01-21 09:48:54 +08:00
</template>
111
2025-01-21 16:56:57 +08:00
<template v-else-if="column.key === 'status'">
<dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
111
2025-01-21 09:48:54 +08:00
</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">
合伙人 订单详情
2025-01-25 09:30:34 +08:00
<el-select v-model="form.merchantId" placeholder="请选择商户" @change="handleMerchantChange" :disabled="query.merchantId">
111
2025-01-21 09:48:54 +08:00
<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">
合伙人 订单详情
2025-01-25 09:30:34 +08:00
<el-select v-model="form.storeId" clearable filterable placeholder="请选择" :disabled="query.storeId">
111
2025-01-21 09:48:54 +08:00
<el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
</el-select>
</el-form-item>
合伙人 订单详情
2025-01-25 09:30:34 +08:00
<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>
111
2025-01-21 09:48:54 +08:00
<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>
111
2025-01-21 16:56:57 +08:00
<!-- 绑定设备弹窗 -->
<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>
111
2025-01-21 09:48:54 +08:00
</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";
111
2025-01-21 16:56:57 +08:00
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";
111
2025-01-21 09:48:54 +08:00
// 默认排序字段
const defaultSort = {
111
2025-01-21 16:56:57 +08:00
prop: "roomId",
111
2025-01-21 09:48:54 +08:00
order: "descending"
}
export default {
name: "HallEqu",
111
2025-01-21 16:56:57 +08:00
components: { QrCode },
111
2025-01-21 09:48:54 +08:00
mixins: [$showColumns],
111
2025-01-21 16:56:57 +08:00
dicts: ['ss_hall_equ_type', 'ss_room_status', 'ss_room_tags', 'as_device_status', 'et_device_lock_status'],
props:{
query: {
type: Object,
default: () => {
return {}
}
}
},
111
2025-01-21 09:48:54 +08:00
data() {
return {
111
2025-01-21 16:56:57 +08:00
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
},
111
2025-01-21 09:48:54 +08:00
// 字段列表
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 },
111
2025-01-21 16:56:57 +08:00
{ key: 'qrText', visible: true, label: '二维码', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
111
2025-01-21 09:48:54 +08:00
{ 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,
合伙人 订单详情
2025-01-25 09:30:34 +08:00
storeId: this.query.storeId,
merchantId: this.query.merchantId,
111
2025-01-21 09:48:54 +08:00
type: undefined,
picture: undefined,
pictures: [],
tags: [],
ruleIds: [],
specification: undefined,
111
2025-01-21 16:56:57 +08:00
// billingMode: 'basePrice', // 默认计费方式
111
2025-01-21 09:48:54 +08:00
},
// 表单校验
rules: {
roomName: [
{ required: true, message: "设施名不能为空", trigger: "blur" }
],
storeId: [
{ required: true, message: "店铺不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "类型不能为空", trigger: "blur" }
],
合伙人 订单详情
2025-01-25 09:30:34 +08:00
equType: [
{ required: true, message: "设施类型不能为空", trigger: "blur" }
],
111
2025-01-21 09:48:54 +08:00
tags: [
{ required: true, message: "标签不能为空", trigger: "change" }
],
ruleIds: [
{ required: true, message: "请选择基础价格或套餐", trigger: "change" }
],
basePriceId: [
{ required: true, message: "请选择基础价格或套餐", trigger: "change" }
],
111
2025-01-21 16:56:57 +08:00
// billingMode: [
// { required: true, message: "请选择计费方式", trigger: "change" }
// ],
},
// 设备默认排序
deviceDefaultSort: {
prop: "sn",
order: "descending"
},
// 设备表格选中数组
deviceIds: [],
// 设备表格单个禁用
deviceSingle: true,
// 设备表格多个禁用
deviceMultiple: true,
111
2025-01-21 09:48:54 +08:00
};
},
created() {
111
2025-01-21 16:56:57 +08:00
this.queryParams = {
...this.queryParams,
...this.query
}
111
2025-01-21 09:48:54 +08:00
this.getList();
this.getStoreOptions();
this.getRuleOptions();
this.getBasePriceOptions();
this.getMerchantOptions();
111
2025-01-21 16:56:57 +08:00
this.getDomain2();
111
2025-01-21 09:48:54 +08:00
},
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;
111
2025-01-21 16:56:57 +08:00
// 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;
// }
111
2025-01-21 09:48:54 +08:00
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,
合伙人 订单详情
2025-01-25 09:30:34 +08:00
storeId: this.query.storeId,
merchantId: this.query.merchantId,
111
2025-01-21 09:48:54 +08:00
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('，');
},
日报等
2025-01-27 00:20:30 +08:00
/** 查看详情按钮操作 */
111
2025-01-21 09:48:54 +08:00
handleDetail(row) {
日报等
2025-01-27 00:20:30 +08:00
this.$router.push({
path: `/system/equipmentDetail/index/${row.roomId}`,
query: {
type: 'equipment'
}
});
111
2025-01-21 09:48:54 +08:00
},
/** 获取套餐选项 */
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 = [];
}
},
111
2025-01-21 16:56:57 +08:00
// 获取二维码文本
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 === '';
},
111
2025-01-21 09:48:54 +08:00
},
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;
}
}
111
2025-01-21 16:56:57 +08:00
.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;
}
}
111
2025-01-21 09:48:54 +08:00
</style>
Reference in New Issue Copy Permalink