IssueSupportManage/src/views/question/issue/detail.vue

<!--
  功能：功能描述
  作者：Aaron
  时间：2023年07月31日 11:51:23
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="bg-[#fff] p-5">
    <a-spin :spinning="loading">
      <div class="my-3">
        <a-steps :current="current" size="small">
          <a-step title="初始化">
            <template #icon>
              <SvgIcon :size="22" name="init" />
            </template>
          </a-step>

          <a-step title="退回">
            <template #icon>
              <SvgIcon :size="24" name="back" />
            </template>
          </a-step>
          <a-step title="开发">
            <template #icon>
              <SvgIcon :size="24" name="dev" />
            </template>
          </a-step>
          <a-step title="测试">
            <template #icon>
              <SvgIcon :size="24" name="test" />
            </template>
          </a-step>
          <a-step title="结束">
            <template #icon>
              <SvgIcon :size="24" name="end" />
            </template>
          </a-step>
        </a-steps>
      </div>

      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="基础信息">
          <SchemaForm> </SchemaForm>
        </a-tab-pane>
        <a-tab-pane key="2" tab="处理历史">
          <a-steps progress-dot :current="historyList.length - 1" direction="vertical">
            <a-step
              v-for="(item, index) in historyList"
              :key="index"
              :title="item.title"
              :description="item.message"
            />
          </a-steps>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { useForm } from '@/components/core/schema-form';
  import { getEditFormSchema } from './formSchemas';
  import { useRoute } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { findOneById } from '@/api/issue';
  import { SvgIcon } from '@/components/basic/svg-icon';
  import { stateTypeList } from './data';
  const route = useRoute();

  const loading = ref(false);

  const historyList = ref<
    Array<{
      status: number;
      message: string;
      title?: string;
    }>
  >([
    {
      status: 0,
      message: '初始化',
    },
    {
      status: 1,
      message: '退回',
    },
    {
      status: 2,
      message: '开发',
    },
    {
      status: 3,
      message: '测试',
    },
    {
      status: 4,
      message: '结束',
    },
  ]);

  historyList.value = historyList.value.map((item) => {
    return {
      ...item,
      title: stateTypeList.find((e) => e.value === item.status)?.label,
    };
  });

  const current = ref(0);

  const { id } = route.query;

  const [SchemaForm, formRef] = useForm({
    labelWidth: 150,
    schemas: getEditFormSchema({}, true),
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
    submitButtonOptions: {
      text: '保存',
    },
    disabled: true,
  });

  onMounted(async () => {
    loading.value = true;
    const res = await findOneById({ id: id as string });
    loading.value = false;

    if (res?.files && Array.isArray(res.files) && res.files.length) {
      res.files = res.files.map((e) => {
        return {
          name: e.originalFilename,
          url: e.url,
          id: e.id,
        };
      });
    }

    current.value = res?.state;

    formRef?.setFieldsValue(res);
    formRef?.clearValidate();
  });
</script>
<style lang="less" scoped></style>