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>
            <template #solution="{ formModel, field }">
              <div class="ql-box">
                <QuillEditor
                  theme="snow"
                  v-model:content="formModel[field]"
                  :options="editorOptions"
                  :readOnly="true"
                  contentType="html"
                />
              </div>
            </template>
          </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.remark"
            />
          </a-steps>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { QuillEditor } from '@vueup/vue-quill';
  import '@vueup/vue-quill/dist/vue-quill.snow.css';
  import { useForm } from '@/components/core/schema-form';
  import { getEditFormSchema } from './formSchemas';
  import { useRoute } from 'vue-router';
  import { onMounted, ref, watch } from 'vue';
  import { findOneById } from '@/api/issue';
  import { SvgIcon } from '@/components/basic/svg-icon';
  import { stateTypeList } from './data';

  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
  });

  const route = useRoute();
  const editorOptions = ref({
    theme: 'snow',
    modules: {
      toolbar: [
        [{ header: '1' }, { header: '2' }, { font: [] }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['bold', 'italic', 'underline'],
        ['link', 'image'], // 添加图片按钮
      ],
    },
  });
  const loading = ref(false);

  const historyList = ref<
    Array<{
      state: number;
      remark: string;
      title?: string;
    }>
  >([]);

  const current = ref(0);

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

  const initData = async () => {
    // 判断route.query.id和props.id是否存在，哪个存在用哪个
    const id = props.id || route.query.id;

    if (!id) {
      return;
    }

    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,
        };
      });
    }

    if (res.historys && Array.isArray(res.historys) && res.historys.length) {
      historyList.value = res.historys.map((e) => {
        return {
          state: e.state,
          remark: `${e.createUserName}于${e.createTime} : ${e.remark}`,
          title: stateTypeList.find((item) => item.value === e.state)?.label,
        };
      });
    }

    current.value = res?.state;

    formRef?.setFieldsValue(res);
    formRef?.clearValidate();
  };

  watch(
    () => props.id,
    (newVal) => {
      if (newVal) {
        initData();
      }
    },
    { immediate: true, deep: true },
  );

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

  defineExpose({
    initData,
  });
</script>
<style lang="less" scoped></style>