表单

<el-form-item label="测试" prop="categoryName">
          <el-input v-model="formData.categoryName" placeholder="所属设备测试" readonly>
            <template #append>
              <el-button @click="handleShowDeviceDialog">
                选择
              </el-button>
            </template>
          </el-input>
</el-form-item>

弹窗

<el-dialog v-model="deviceDialogVisible" title="选择关联设备" width="50%" style="max-height: 700px;height: 700px;">
      <div class="device-dialog-content">
        <!-- 搜索和重置区域 -->
        <div class="search-area">
          <el-input v-model="searchKeyword" placeholder="请输入设备名称" style="width: 300px;margin-right: 5px;" clearable />
          <el-button type="primary" @click="handleSearchAssociation">搜索</el-button>
          <el-button @click="handleResetAssociation">重置</el-button>
        </div>

        <!-- 表格区域 -->
        <el-table height="470" ref="tableRef" :data="associationTableData"
          @selection-change="handleSelectionChangeAssociation" style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="deviceName" label="设备名称" />
          <!-- <el-table-column prop="productName" label="产品名称" /> -->
        </el-table>

        <!-- 分页区域 -->
        <el-pagination v-if="associationTotal > 0" :current-page="associationPage" :page-size="associationPageSize"
          :total="associationTotal" @current-change="(page) => { associationPage = page; loadAssociationTable(); }"
          @size-change="(size) => { associationPageSize = size; loadAssociationTable(); }"
          layout="total, prev, pager, next, sizes" style="float: right;margin-top: 20px;" />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmSelectionAssociation">确定</el-button>
        </div>
      </template>
    </el-dialog>

const formData = reactive<CategoryForm>({});
// 关联设备
const tableRef = ref();
const deviceDialogVisible = ref(false);
const searchKeyword = ref('');
const associationTableData = ref<any[]>([]);
const associationTotal = ref(0);
const associationPage = ref(1);
const associationPageSize = ref(10);
const associationSelected = ref<any[]>([]); // 改为数组，存储多个选中项

async function loadAssociationTable() {
  const res = await DeviceAPI.getPage({
    deviceName: searchKeyword.value,
    pageNum: associationPage.value,
    pageSize: associationPageSize.value,
  });
  associationTableData.value = res.list;
  associationTotal.value = res.total;
}

// 显示设备选择对话框
const handleShowDeviceDialog = async () => {
  deviceDialogVisible.value = true;
  searchKeyword.value = '';
  associationPage.value = 1;
  associationSelected.value = []; // 清空已选项
  await loadAssociationTable();
  // 恢复选中状态
  if (formData.categoryIds) {
    const selectedIds = formData.categoryIds.split(',');
    associationTableData.value.forEach(row => {
      if (selectedIds.includes(String(row.id))) {
        nextTick(() => {
          tableRef.value?.toggleRowSelection(row, true);
        });
      }
    });
  }
}

// 处理多选变化
const handleSelectionChangeAssociation = (val: any[]) => {
  associationSelected.value = val;
}

function handleSearchAssociation() {
  associationPage.value = 1;
  loadAssociationTable();
}

function handleResetAssociation() {
  searchKeyword.value = '';
  associationPage.value = 1;
  loadAssociationTable();
}

function handleConfirmSelectionAssociation() {
  if (associationSelected.value.length === 0) {
    ElMessage.warning('请至少选择一个设备');
    return;
  }
  // 获取所有选中项的 id 数组
  const selectedIds = associationSelected.value.map(item => item.id);
  const selectedNames = associationSelected.value.map(item => item.deviceName);
  // 将数组转换为逗号分隔的字符串
  const idsString = selectedIds.join(',');

  // 转换为 JSON 字符串
  const idsJsonString = JSON.stringify(selectedIds);
  const namesString = selectedNames.join('、'); // 使用中文顿号分隔更美观
  // console.log("选中的设备ID数组:", selectsedIds);
  // console.log("逗号拼接的字符串:", idsString);
  console.log("JSON字符串:", idsJsonString);
  console.log("选中的设备名称:", namesString);
  // 根据你的业务需求使用这些值
  // 例如：
  // formData.categoryIds = idsJsonString; // 存储JSON字符串
  // 或者
  // formData.categoryIdsArray = selectedIds; // 存储数组
  // formData.categoryIdsString = idsString; // 存储逗号分隔字符串
  formData.categoryIds = idsString; // 存储逗号分隔字符串
  formData.categoryName = namesString; // 存储名称字符串
  deviceDialogVisible.value = false;
}