|
@@ -100,76 +100,89 @@
|
|
|
<span>{{ dialogTitle }}</span>
|
|
<span>{{ dialogTitle }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
- <el-form ref="formRef" :model="formData" :inline="true" :rules="formRules" label-width="80px">
|
|
|
|
|
- <el-form-item label="成套名称" prop="name">
|
|
|
|
|
- <el-input v-model="formData.name" placeholder="请输入成套名称" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
-
|
|
|
|
|
- <el-form-item :label="t('iotDevice.dept')" prop="deptId">
|
|
|
|
|
- <el-tree-select
|
|
|
|
|
- v-model="formData.deptId"
|
|
|
|
|
- :data="deptList"
|
|
|
|
|
- :props="defaultProps"
|
|
|
|
|
- check-strictly
|
|
|
|
|
- node-key="id"
|
|
|
|
|
- filterable
|
|
|
|
|
- placeholder="请选择所在部门"
|
|
|
|
|
- @change="handleDeptChange"
|
|
|
|
|
- style="width: 200px"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
-
|
|
|
|
|
- <el-form-item label="描述" prop="remark">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="formData.remark"
|
|
|
|
|
- style="width: 470px"
|
|
|
|
|
- type="textarea"
|
|
|
|
|
- placeholder="请输入描述"
|
|
|
|
|
- :rows="2"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
-
|
|
|
|
|
- <el-form-item label="选择设备" prop="devices">
|
|
|
|
|
- <div class="transfer-container">
|
|
|
|
|
- <el-transfer
|
|
|
|
|
- v-model="selectedDeviceIds"
|
|
|
|
|
- :data="deviceOptions"
|
|
|
|
|
- :titles="['设备列表', '已选择设备']"
|
|
|
|
|
- :button-texts="['移除', '添加']"
|
|
|
|
|
- filterable
|
|
|
|
|
- :filter-method="filterDeviceMethod"
|
|
|
|
|
- filter-placeholder="请输入设备名称"
|
|
|
|
|
- @change="rightDeviceChange"
|
|
|
|
|
- >
|
|
|
|
|
- <template #left-empty>
|
|
|
|
|
- <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
|
|
|
|
|
- </template>
|
|
|
|
|
- <template #right-empty>
|
|
|
|
|
- <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-transfer>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
-
|
|
|
|
|
- <div v-if="selectedDevices.length > 0" class="mt-4">
|
|
|
|
|
- <el-form-item label="设置主设备" prop="mainDevice" label-width="100">
|
|
|
|
|
- <el-select
|
|
|
|
|
- v-model="mainDeviceId"
|
|
|
|
|
- placeholder="请选择主设备"
|
|
|
|
|
- clearable
|
|
|
|
|
- filterable
|
|
|
|
|
- style="width: 200px"
|
|
|
|
|
- @change="setMainDevice"
|
|
|
|
|
- >
|
|
|
|
|
- <el-option
|
|
|
|
|
- v-for="device in selectedDevices"
|
|
|
|
|
- :key="device.id"
|
|
|
|
|
- :label="device.label"
|
|
|
|
|
- :value="device.id"
|
|
|
|
|
|
|
+ <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="成套名称" prop="name">
|
|
|
|
|
+ <el-input v-model="formData.name" placeholder="请输入成套名称" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item :label="t('iotDevice.dept')" prop="deptId">
|
|
|
|
|
+ <el-tree-select
|
|
|
|
|
+ v-model="formData.deptId"
|
|
|
|
|
+ :data="deptList"
|
|
|
|
|
+ :props="defaultProps"
|
|
|
|
|
+ check-strictly
|
|
|
|
|
+ node-key="id"
|
|
|
|
|
+ filterable
|
|
|
|
|
+ placeholder="请选择所在部门"
|
|
|
|
|
+ @change="handleDeptChange"
|
|
|
/>
|
|
/>
|
|
|
- </el-select>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="24">
|
|
|
|
|
+ <el-form-item label="描述" prop="remark">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="formData.remark"
|
|
|
|
|
+ type="textarea"
|
|
|
|
|
+ placeholder="请输入描述"
|
|
|
|
|
+ :rows="2"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="24">
|
|
|
|
|
+ <el-form-item label="选择设备" prop="devices">
|
|
|
|
|
+ <div class="transfer-container">
|
|
|
|
|
+ <el-transfer
|
|
|
|
|
+ v-model="selectedDeviceIds"
|
|
|
|
|
+ :data="deviceOptions"
|
|
|
|
|
+ :titles="['设备列表', '已选择设备']"
|
|
|
|
|
+ :button-texts="['移除', '添加']"
|
|
|
|
|
+ filterable
|
|
|
|
|
+ :filter-method="filterDeviceMethod"
|
|
|
|
|
+ filter-placeholder="请输入设备名称"
|
|
|
|
|
+ @change="rightDeviceChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ <template #left-empty>
|
|
|
|
|
+ <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #right-empty>
|
|
|
|
|
+ <el-empty :image-size="60" :description="isEdit ? '加载中...' : '请选择设备'" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-transfer>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+
|
|
|
|
|
+ <el-row :gutter="20" v-if="selectedDevices.length > 0">
|
|
|
|
|
+ <el-col :span="12">
|
|
|
|
|
+ <el-form-item label="设置主设备" prop="mainDevice" label-width="100">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="mainDeviceId"
|
|
|
|
|
+ placeholder="请选择主设备"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ filterable
|
|
|
|
|
+ @change="setMainDevice"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="device in selectedDevices"
|
|
|
|
|
+ :key="device.id"
|
|
|
|
|
+ :label="device.label"
|
|
|
|
|
+ :value="device.id"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
|
|
<template #footer>
|
|
<template #footer>
|
|
@@ -522,7 +535,18 @@ onMounted(async () => {
|
|
|
::deep(.el-tree--highlight-current) {
|
|
::deep(.el-tree--highlight-current) {
|
|
|
height: 200px !important;
|
|
height: 200px !important;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+/* 调整穿梭框面板主体高度 */
|
|
|
::deep(.el-transfer-panel__body) {
|
|
::deep(.el-transfer-panel__body) {
|
|
|
- height: 700px !important;
|
|
|
|
|
|
|
+ height: 850px !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 如果需要进一步调整,可以分别设置左右面板的高度 */
|
|
|
|
|
+::deep(.el-transfer-panel .el-transfer-panel__list) {
|
|
|
|
|
+ height: 850px !important; /* 调整列表区域高度 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.el-transfer {
|
|
|
|
|
+ --el-transfer-panel-body-height: 500px;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|