src/views/equipmentManagement/inspectionManagement/components/formDia.vue
@@ -5,15 +5,11 @@
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="taskId">
              <el-select v-model="form.taskId" @change="setDeviceModel">
                <el-option
                  v-for="(item, index) in deviceOptions"
                  :key="index"
                  :label="item.deviceName"
                  :value="item.id"
                ></el-option>
              </el-select>
            <el-form-item label="设备名称" prop="taskName">
              <div style="display: flex; gap: 8px; width: 100%">
                <el-input v-model="form.taskName" placeholder="请选择设备" readonly style="flex: 1" />
                <el-button @click="openDeviceDialog">选择设备</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -111,6 +107,50 @@
        </div>
      </template>
    </el-dialog>
    <!-- 选择巡检设备弹窗 -->
    <el-dialog v-model="deviceDialogVisible" title="选择巡检设备" width="760px" draggable append-to-body>
      <div class="device-select-wrap">
        <div class="device-select-tree">
          <div class="all-device-node"
               :class="{ active: deviceAreaId === null }"
               @click="selectAllDevice">
            全部设备
          </div>
          <el-tree
            ref="deviceAreaTreeRef"
            v-loading="deviceAreaLoading"
            :data="areaTree"
            node-key="id"
            :props="{ label: 'label', children: 'children' }"
            default-expand-all
            :expand-on-click-node="false"
            highlight-current
            :current-node-key="deviceAreaId"
            @node-click="onDeviceAreaClick"
          />
        </div>
        <div class="device-select-list">
          <el-table
            :data="deviceList"
            v-loading="deviceListLoading"
            border
            height="420"
            style="cursor: pointer"
            @row-click="selectDevice"
          >
            <el-table-column prop="deviceName" label="设备名称" min-width="140" />
            <el-table-column prop="deviceModel" label="规格型号" min-width="120" />
            <el-table-column prop="areaName" label="所属区域" min-width="120" />
            <el-table-column label="操作" width="80" align="center">
              <template #default="scope">
                <el-button link type="primary" @click.stop="selectDevice(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
@@ -120,6 +160,7 @@
import {addOrEditTimingTask} from "@/api/inspectionManagement/index.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import { getDeviceAreaTree } from "@/api/equipmentManagement/area";
const { proxy } = getCurrentInstance()
const emit = defineEmits()
@@ -127,6 +168,16 @@
const dialogVisitable = ref(false);
const operationType = ref('add');
const deviceOptions = ref([]);
// 设备选择弹窗相关
const deviceDialogVisible = ref(false);
const areaTree = ref([]);
const deviceAreaId = ref(null);
const deviceAreaLoading = ref(false);
const deviceAreaTreeRef = ref();
const deviceList = ref([]);
const deviceListLoading = ref(false);
const data = reactive({
  form: {
    taskId: undefined,
@@ -142,7 +193,7 @@
    time: ''
  },
   rules: {
      taskId: [{ required: true, message: "请选择设备", trigger: "change" },],
      taskName: [{ required: true, message: "请选择设备", trigger: "change" },],
      inspector: [{ required: true, message: "请输入巡检人", trigger: "blur" },],
      dateStr: [{ required: true, message: "请选择登记时间", trigger: "change" }],
      frequencyType: [{ required: true, message: "请选择任务频率", trigger: "change" }],
@@ -207,7 +258,7 @@
const loadDeviceName = async () => {
  const { data } = await getDeviceLedger();
  deviceOptions.value = data;
  deviceOptions.value = data || [];
};
const setDeviceModel = (id) => {
@@ -217,29 +268,82 @@
  }
}
// 加载区域树
const loadDeviceAreaTree = () => {
  deviceAreaLoading.value = true;
  getDeviceAreaTree()
    .then((res) => {
      areaTree.value = res.data || [];
    })
    .finally(() => {
      deviceAreaLoading.value = false;
    });
};
// 加载设备列表
const loadDevices = (areaId) => {
  deviceListLoading.value = true;
  getDeviceLedger(areaId ? { areaId } : undefined)
    .then((res) => {
      deviceList.value = res.data || [];
    })
    .finally(() => {
      deviceListLoading.value = false;
    });
};
// 打开设备选择弹窗
const openDeviceDialog = () => {
  deviceDialogVisible.value = true;
  deviceAreaId.value = null;
  loadDeviceAreaTree();
  loadDevices();
};
// 选择全部设备
const selectAllDevice = () => {
  deviceAreaId.value = null;
  loadDevices();
};
// 点击区域节点
const onDeviceAreaClick = (data) => {
  deviceAreaId.value = data.id;
  loadDevices(data.id);
};
// 选中设备回填
const selectDevice = (row) => {
  form.value.taskId = row.id;
  form.value.taskName = row.deviceName;
  deviceDialogVisible.value = false;
};
// 打开弹框
const openDialog = async (type, row) => {
  dialogVisitable.value = true
  operationType.value = type
  // 重置表单
  resetForm();
  // 加载用户列表
  userListNoPageByTenantId().then((res) => {
    userList.value = res.data;
  });
  // 加载设备列表
  // 加载设备列表(编辑回显用)
  await loadDeviceName();
  if (type === 'edit' && row) {
    form.value = {...row}
    form.value.inspector = form.value.inspectorIds.split(',').map(Number)
    // 如果有设备ID,自动设置设备信息
    if (form.value.taskId) {
      setDeviceModel(form.value.taskId);
      if (!form.value.taskName) {
        setDeviceModel(form.value.taskId);
      }
    }
  }
}
@@ -279,16 +383,16 @@
      try {
        form.value.inspectorIds = form.value.inspector.join(',')
        delete form.value.inspector
        if (form.value.frequencyType === 'WEEKLY') {
          let frequencyDetail = ''
          frequencyDetail = form.value.week + ',' + form.value.time
          form.value.frequencyDetail = frequencyDetail
        }
        let res = await userStore.getInfo()
        form.value.registrantId = res.user.userId
        await addOrEditTimingTask(form.value)
        cancel()
        proxy.$modal.msgSuccess('提交成功')
@@ -302,5 +406,34 @@
</script>
<style scoped>
</style>
.device-select-wrap {
  display: flex;
}
.device-select-tree {
  width: 260px;
  flex-shrink: 0;
  padding-right: 12px;
  border-right: 1px solid #ebeef5;
  max-height: 460px;
  overflow-y: auto;
}
.device-select-list {
  flex: 1;
  min-width: 0;
  padding-left: 12px;
}
.all-device-node {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.all-device-node:hover {
  background: #f5f7fa;
}
.all-device-node.active {
  background: #ecf5ff;
  color: #409eff;
}
</style>