bxztApp/packages/mobile/src/views/Staff/StaffDetail.vue

<template>
  <div class="home">
    <van-nav-bar title="人员管理" fixed left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-cell title="当前站点" :value="yhzDetail.mc" />
    </van-cell-group>

    <div class="content" v-if="staffDetailData">
      <van-cell-group>
        <van-cell
          title="人员信息"
          style="font-size: 18px; font-weight: bold; line-height: inherit"
        >
        </van-cell>
        <van-cell :title="'姓名： ' + staffDetailData.xm"></van-cell>
        <van-cell :title="'手机号码： ' + staffDetailData.sjhm"> </van-cell>
        <van-cell :title="'岗位： ' + staffDetailData.gw"> </van-cell>
        <van-cell :title="'登记日期： ' + staffDetailData.cjsj"> </van-cell>
        <van-cell
          :title="
            '人员角色： ' +
            (staffDetailData.ryjs === 1
              ? '负责人'
              : staffDetailData.ryjs === 2
              ? '一般工作人员'
              : '未知角色')
          "
        >
        </van-cell>
      </van-cell-group>
    </div>
    <van-tabbar>
      <van-tabbar-item>
        <template #default>
          <van-button
            type="primary"
            style="width: 100px; border-radius: 10px"
            @click="onEditPopupOpen"
          >
            编辑
          </van-button>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #default>
          <van-button
            type="primary"
            style="width: 100px; border-radius: 10px"
            @click="onEditPopupOpen"
          >
            重置密码
          </van-button>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #default>
          <van-button
            type="danger"
            style="width: 100px; border-radius: 10px"
            @click="onDeletePopupOpen"
          >
            删除人员
          </van-button>
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <van-popup
      :show="showDeletePopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '20%' }"
      @close="onDeletePopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 20px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          确认删除？
        </h1>

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="onDeletePopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="onDeleteConfirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
    
    <script setup>
import { ref, onMounted, toRaw, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast, showLoadingToast, showImagePreview } from "vant";
import { request } from "../../../../shared/utils/request";

const router = useRouter();
const route = useRoute();

const yhzDetail = ref({});
const staffData = ref([]);
const staffDetailData = ref(); // 人员详情数据

onMounted(() => {
  const data = JSON.parse(decodeURIComponent(route.params.data));
  yhzDetail.value = data.yhzDetail;
  staffData.value = data.staffData;
  console.log("传递过来的参数:", data);
  getStaffDetail();
});

const onClickLeft = () => {
  router.push({
    name: "StaffManage",
    params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
  });
};

// 获取养护站人员详情
const getStaffDetail = async () => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yhzry/getById?id=${staffData.value.id}`,
      method: "GET",
    });
    if (res.code === "00000") {
      staffDetailData.value = res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({ type: "fail", message: error.message });
  }
};

// 删除人员相关
const showDeletePopup = ref(false);
const onDeletePopupOpen = () => {
  showDeletePopup.value = true;
};
const onDeletePopupClose = () => {
  showDeletePopup.value = false;
};
const onDeleteConfirm = async () => {
  try {
    showLoadingToast({
      message: "删除中...",
      forbidClick: true,
      loadingType: "spinner",
    });
    const res = await request({
      url: `/snow-ops-platform/yhzry/delete`,
      method: "POST",
      data: {
        id: staffData.value.id,
      },
    });
    if (res.code === "00000") {
      showToast({ type: "success", message: "删除成功" });
      router.push({
        name: "StaffManage",
        params: {
          data: encodeURIComponent(JSON.stringify(yhzDetail.value)),
        },
      });
    } else {
      throw new Error(res.data.message);
    }
  } catch (error) {
    showToast({ type: "error", message: "删除失败" });
    console.log("error", error);
  }
  showDeletePopup.value = false;
};
</script>
    
    <style scoped>
.home {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

.content {
  padding: 16px 16px 80px 16px;
}

.grid {
  margin-top: 16px;
}

.btn {
  margin-top: 24px;
}

.status-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
}
.status-good {
  background-color: #07c160;
}
.status-warning {
  background-color: #ff976a;
}
.status-danger {
  background-color: #ee0a24;
}
</style>