group_web_merchant/src/views/licenseManagement/detail.vue

<template>
  <div class="card content-box">
    <el-form :model="formData" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺名称 :">
            <span>{{ formData.storeName }}</span>
          </el-form-item>
          <el-form-item label="名称 :">
            <span>{{ formData.name }}</span>
          </el-form-item>
          <el-form-item label="描述 :">
            <span>{{ formData.description }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:">
            <span>{{ getStatusName(formData.status) }}</span>
          </el-form-item>
          <el-form-item label="拒绝原因:" v-if="formData.status === '2'">
            <span>{{ formData.rejectionReason }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="text-center" style="margin-top: 20px">
        <el-col :span="24">
          <el-button type="primary" @click="goBack"> 确定 </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="tsx" name="licenseManagementDetail">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getStaffConfigDeatail } from "@/api/modules/staffConfig";

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

const formData = ref({});

const id = ref((route.query.id as string) || "");

const getStatusName = (status: string) => {
  switch (status) {
    case "0":
      return "待审核";
    case "1":
      return "审核通过";
    case "2":
      return "审核拒绝";
    default:
      return "未知状态";
  }
};

onMounted(async () => {
  await initData();
});

const initData = async () => {
  if (id.value) {
    try {
      const response = await getStaffConfigDeatail({ id: id.value });
      if (response.code === 200) {
        formData.value = response.data;
      }
    } catch (error) {
      ElMessage.error("获取详情失败");
    }
  }
};

const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 100%;
  .text-center {
    text-align: center;
  }
}
.el-col {
  box-sizing: border-box;
  padding-right: 10px;
}
</style>