JeechBoot前端表格内操作设置下拉

A_Qyp2026-03-14 18:16

上面是最终的结果，这是在业务场景中很容易碰到的功能操作，下面就是该功能的代码展示。

javascript 复制代码

//接口定义
export const openDoor1 = (params: { id: string; dwState: string }) => {
  return defHttp.post({
    url: Api.openDoor,
    params:params ,  // 参数作为query参数传递
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    } // 将参数放到请求头上
  }, { isTransformResponse: false });
}

javascript 复制代码

//在操作栏区域添加组件
<!-- 门禁远程开门（设备名称为门禁时显示） -->
        <template v-if="record.deviceType == 0">
          <a-space>
            <a-dropdown trigger="click" @click="e => e.preventDefault()">
              <a-button type="text" size="small" :loading="doorLoading[record.id]">
                远程开门 <Icon icon="mdi:chevron-down" />
              </a-button>
              <template #overlay>
                <a-menu @click="({ key }) => handleDoorStateChange(record, key)">
                  <a-menu-item key="0">关闭</a-menu-item>
                  <a-menu-item key="1">打开</a-menu-item>
                  <a-menu-item key="2">常开</a-menu-item>
                  <a-menu-item key="3">常关</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </template>

javascript 复制代码

//逻辑书写
// ------------------- 门禁远程开门逻辑 -------------------
/**
 * 处理门禁开门状态选择
 */
async function handleDoorStateChange(record: any, dwState: string) {
  if (doorLoading.value[record.id]) return;
  
  try {
    doorLoading.value[record.id] = true;
    const params = { id: record.id, dwState: dwState };
    const result = await openDoor1(params);
    
    if (result.success) {
      const stateMap = { '0': '关闭', '1': '打开', '2': '常开', '3': '常关' };
      createMessage.success(`已设置为${stateMap[dwState]}状态，指令已发送`);
      reload();
    } else {
      createMessage.error(result.message || '操作失败');
    }
  } catch (error) {
    console.error('门禁开门失败:', error);
    createMessage.error('操作失败，请重试');
  } finally {
    doorLoading.value[record.id] = false;
  }
}