kev/Drawer/drawer-htmlroot/pages/index.vue

<template>
  <ClientOnly>
    <el-container class="container">
      <div class="content">
        <div class="oper">
          <el-button type="primary" size="default" :icon="Plus" @click="showAddDialog">添加</el-button>
          <!-- <el-button type="danger" size="default" :icon="DeleteFilled">删除</el-button> -->
        </div>
        <el-table :data="areaData" class="data-table" stripe border>
          <el-table-column prop="AreaName" label="工区名称" width="200" />
          <el-table-column prop="CreateDate" label="创建时间" width="200" />
          <el-table-column prop="UpdateTime" label="更新时间" width="*" />
          <!-- <el-table-column label="操作" width="*">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
</el-table-column> -->
        </el-table>
        <el-dialog v-model="showAdd" title="添加工区" style="width: 300px; height: 180px; z-index: 9999"
          @close="handleClose" :close-on-click-modal="false">
          <el-form class="area-form">
            <el-form-item label="工区名称：">
              <el-input v-model="areaName" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="handleAdd" class="btn-confirm">确定</el-button>
        </el-dialog>
      </div>
      <LoadingDialog v-model="loading" ref="loadingRef" :timeout="3000" message="正在加载数据……" @timeout="onTimeout" />
    </el-container>
  </ClientOnly>
</template>
<script setup>
definePageMeta({
  requiresAuth: true
});
import { ref, onMounted } from "vue";
import { getWorkArea, addWorkArea, setWorkArea } from "~/services/workAreaService";
import { Plus, DeleteFilled } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { emitter } from "~/utils/eventBus";
import { EMIT_COMMAND } from '~/utils/commandTypes'
// 消息提示（自动隐藏）
const { $toastMessage } = useNuxtApp();

const loading = ref(false);
const loadingRef = ref(null);

const areaData = ref(null);

const areaName = ref('');

const showAdd = ref(false);
const showAddDialog = () => {
  showAdd.value = true;
}

onMounted(async () => {
  await nextTick();
  await getData();
});

const handleAdd = async () => {
  if (!areaName.value) {
    $toastMessage.warning("请输入'工区名称'！")
    return;
  }

  const response = await addWorkArea(areaName.value);
  if (response.Code === 1) {
    emitter.emit(EMIT_COMMAND.ADD_WORK_AREA);
    await getData();
    handleClose();
  } else {
    $toastMessage.error(`添加失败，错误：${response.Msg}`);
    return;
  }
};

const getData = async () => {
  try {
    loading.value = true;
    const response = await getWorkArea();
    if (response.Count > 0) {
      areaData.value = response.Data;
    }
  } finally {
    if (loadingRef.value) {
      loadingRef.value.close();
    }
  }
};

const handleEdit = async (data) => {
};

const handleDelete = async (data) => {
  ElMessageBox.confirm(`确认删除工区 ${data.AreaName} 吗？`, "删除确认", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      deleteWorkArea(data.AreaID);
    })
    .catch(() => {
    });
};

const handleClose = () => {
  showAdd.value = false;
};

const onTimeout = () => {
  $toastMessage.error("加载数据失败！");
}

</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.data-table {
  width: 100%;
}

.oper {
  width: 100%;
  height: 50px;
  display: flex;
  gap: 12px;
  /* 按钮间距 */
  align-items: center;
  margin-left: 15px;
}

.area-form {
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4); */
  padding: 10px;
}

.btn-confirm {
  display: flex;
  margin-left: auto;
  margin-top: 10px;
}
</style>