|
|
@@ -49,6 +49,9 @@
|
|
|
<el-tooltip content="修改" placement="top">
|
|
|
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['digital:deviceGroup:edit']"></el-button>
|
|
|
</el-tooltip>
|
|
|
+ <el-tooltip content="详情" placement="top">
|
|
|
+ <el-button link type="primary" icon="View" @click="handleDevicesInfo(scope.row)" v-hasPermi="['digital:deviceGroup:query']"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
<el-tooltip content="删除" placement="top">
|
|
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['digital:deviceGroup:remove']"></el-button>
|
|
|
</el-tooltip>
|
|
|
@@ -78,16 +81,74 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+ <!-- 查看设备组内的设备详情 -->
|
|
|
+ <el-dialog :title="devicesLog.title" v-model="devicesLog.visible" width="800px" append-to-body>
|
|
|
+ <el-table v-loading="loading" :data="deviceList" @selection-change="handleDevicesSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="设备标识" align="center" prop="deviceIdentifier" />
|
|
|
+ <el-table-column label="场景名称" align="center" prop="sceneName" />
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tooltip content="修改" placement="top">
|
|
|
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['digital:deviceGroup:edit']"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除" placement="top">
|
|
|
+ <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['digital:deviceGroup:remove']"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">新 增</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :title="addDeviceLog.title" v-model="addDeviceLog.visible" width="500px" append-to-body>
|
|
|
+ <el-form ref="deviceGroupRelFormRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="设备组id" prop="deviceGroupId">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入设备组id" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备标识" prop="deviceIdentifier">
|
|
|
+ <el-input v-model="form.capacity" placeholder="请输入设备标识" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="场景名称" prop="sceneName">
|
|
|
+ <el-input v-model="form.sceneName" placeholder="请输入场景名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="DeviceGroup" lang="ts">
|
|
|
-import { listDeviceGroup, getDeviceGroup, delDeviceGroup, addDeviceGroup, updateDeviceGroup } from '@/api/digital/deviceGroup';
|
|
|
-import { DeviceGroupVO, DeviceGroupQuery, DeviceGroupForm } from '@/api/digital/deviceGroup/types';
|
|
|
+import {
|
|
|
+ listDeviceGroup,
|
|
|
+ getDeviceGroup,
|
|
|
+ delDeviceGroup,
|
|
|
+ addDeviceGroup,
|
|
|
+ updateDeviceGroup,
|
|
|
+ getDevicesInfo
|
|
|
+} from '@/api/smsb/digital/deviceGroup';
|
|
|
+import { DeviceGroupVO, DeviceGroupQuery, DeviceGroupForm } from '@/api/smsb/digital/deviceGroup/types';
|
|
|
+import { DeviceGroupRelVO, DeviceGroupRelForm, DeviceGroupRelQuery } from '@/api/smsb/digital/deviceGroupRel/types';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
|
|
const deviceGroupList = ref<DeviceGroupVO[]>([]);
|
|
|
+const deviceList = ref<DeviceGroupRelVO[]>([]);
|
|
|
const buttonLoading = ref(false);
|
|
|
const loading = ref(true);
|
|
|
const showSearch = ref(true);
|
|
|
@@ -98,12 +159,23 @@ const total = ref(0);
|
|
|
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
const deviceGroupFormRef = ref<ElFormInstance>();
|
|
|
+const deviceGroupRelFormRef = ref<ElFormInstance>();
|
|
|
|
|
|
const dialog = reactive<DialogOption>({
|
|
|
visible: false,
|
|
|
title: ''
|
|
|
});
|
|
|
|
|
|
+const devicesLog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
+const addDeviceLog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
const initFormData: DeviceGroupForm = {
|
|
|
id: undefined,
|
|
|
name: undefined,
|
|
|
@@ -131,7 +203,49 @@ const data = reactive<PageData<DeviceGroupForm, DeviceGroupQuery>>({
|
|
|
{ required: true, message: "设备组容量不能为空", trigger: "blur" }
|
|
|
],
|
|
|
remark: [
|
|
|
- { required: true, message: "备注不能为空", trigger: "blur" }
|
|
|
+ { required: false, message: "备注不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const initFormDataRel: DeviceGroupRelForm = {
|
|
|
+ id: undefined,
|
|
|
+ deviceGroupId: undefined,
|
|
|
+ deviceIdentifier: undefined,
|
|
|
+ sceneSort: undefined,
|
|
|
+ sceneName: undefined,
|
|
|
+ remark: undefined,
|
|
|
+}
|
|
|
+const dataRel = reactive<PageData<DeviceGroupRelForm, DeviceGroupRelQuery>>({
|
|
|
+ form: {...initFormDataRel},
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deviceGroupId: undefined,
|
|
|
+ deviceIdentifier: undefined,
|
|
|
+ sceneSort: undefined,
|
|
|
+ sceneName: undefined,
|
|
|
+ params: {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ id: [
|
|
|
+ {required: true, message: "对应表id不能为空", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ deviceGroupId: [
|
|
|
+ {required: true, message: "设备组id不能为空", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ deviceIdentifier: [
|
|
|
+ {required: true, message: "设备标识不能为空", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ sceneSort: [
|
|
|
+ {required: true, message: "场景序号不能为空", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ sceneName: [
|
|
|
+ {required: true, message: "场景名称不能为空", trigger: "blur"}
|
|
|
+ ],
|
|
|
+ remark: [
|
|
|
+ {required: true, message: "备注不能为空", trigger: "blur"}
|
|
|
],
|
|
|
}
|
|
|
});
|
|
|
@@ -147,10 +261,30 @@ const getList = async () => {
|
|
|
loading.value = false;
|
|
|
}
|
|
|
|
|
|
+/** 设备组详情 */
|
|
|
+const handleDevicesInfo = async (row?: DeviceGroupVO) => {
|
|
|
+ loading.value = true;
|
|
|
+ const _id = row?.id || ids.value[0]
|
|
|
+ const res = await getDevicesInfo(_id);
|
|
|
+ deviceList.value = res.data;
|
|
|
+ devicesLog.visible = true;
|
|
|
+ devicesLog.title = "设备组详情";
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+const handleAddDevice = () => {
|
|
|
+ reset();
|
|
|
+ addDeviceLog.visible = true;
|
|
|
+ addDeviceLog.title = "添加设备";
|
|
|
+}
|
|
|
+
|
|
|
/** 取消按钮 */
|
|
|
const cancel = () => {
|
|
|
reset();
|
|
|
dialog.visible = false;
|
|
|
+ devicesLog.visible = false;
|
|
|
+ addDeviceLog.visible = false;
|
|
|
}
|
|
|
|
|
|
/** 表单重置 */
|
|
|
@@ -178,6 +312,13 @@ const handleSelectionChange = (selection: DeviceGroupVO[]) => {
|
|
|
multiple.value = !selection.length;
|
|
|
}
|
|
|
|
|
|
+/** 多选框选中数据 */
|
|
|
+const handleDevicesSelectionChange = (selection: DeviceGroupRelVO[]) => {
|
|
|
+ ids.value = selection.map(item => item.id);
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+}
|
|
|
+
|
|
|
/** 新增按钮操作 */
|
|
|
const handleAdd = () => {
|
|
|
reset();
|