Cold_offline_web/src/views/project/report/create/index.vue

<template>
  <n-space vertical>
    <n-breadcrumb>
      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
      <n-breadcrumb-item>报告生成</n-breadcrumb-item>
    </n-breadcrumb>
    <n-scrollbar style="max-height: 650px">
      <div class="w-1/2 mx-auto">
        <n-form
          ref="formRef"
          :model="formValue"
          :rules="rules"
          label-placement="left"
          label-width="auto"
        >
          <template
            v-for="item of templateDataList"
            :key="item.T_VerifyTemplateMap_id"
          >
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-if="item.T_label === 3"
            >
              <n-select
                v-model:value="formValue.selectedValue"
                :options="options"
              />
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-else-if="item.T_label === 4"
            >
              <n-select
                v-model:value="formValue.selectedValue"
                :options="options"
              />
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-divider v-else-if="item.T_label === 5" />
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-else-if="item.T_label === 7"
            >
              <n-date-picker
                class="w-full"
                v-model:formatted-value="formValue.formattedValue"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
              />
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-else-if="item.T_label === 9"
            >
              <n-date-picker
                class="w-full"
                v-model:formatted-value="formValue.formattedValue"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model:value="formValue.formattedValue"
                type="datetimerange"
                clearable
              />
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-else-if="item.T_label === 10"
            >
              <n-upload :default-upload="false" list-type="image-card" :max="1">
                点击上传
              </n-upload>
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-form-item
              required
              :label="item.T_name"
              :path="item.T_field"
              v-else-if="item.T_label === 11"
            >
              <n-upload :default-upload="false" list-type="image-card" :max="1">
                点击上传
              </n-upload>
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
            <n-form-item :label="item.T_name" :path="item.T_field" v-else>
              <n-input v-model:value="formValue[item.T_field]" />
              <n-popover trigger="hover">
                <template #trigger>
                  <n-icon size="20" class="ml-3">
                    <question-icon />
                  </n-icon>
                </template>
                <n-image width="200" :src="item.T_text" />
              </n-popover>
            </n-form-item>
          </template>
        </n-form>
      </div>
    </n-scrollbar>
  </n-space>
  <n-modal
    :show-icon="false"
    v-model:show="modal.showModal"
    preset="dialog"
    :title="modal.title"
    positive-text="提交"
    negative-text="取消"
    @positive-click="submitCallback"
  >
    123
  </n-modal>
</template>

<script setup>
import { getVerifyTemplateMapDataList } from "@/api";
import { QuestionCircleOutlined as QuestionIcon } from "@vicons/antd";
import { useTaskStore } from "@/store/task";

const taskStore = useTaskStore();

// 表单信息
const formValue = reactive({
  textValue: null,
  formattedValue: null,
  selectedValue: null,
});

// 模板标签数据列表
const templateDataList = ref([]);

// 	配置选项内容
const options = [
  {
    label: "Everybody's Got Something to Hide Except Me and My Monkey",
    value: "song0",
    disabled: true,
  },
  {
    label: "Drive My Car",
    value: "song1",
  },
  {
    label: "Norwegian Wood",
    value: "song2",
  },
];

// 模态框数据源
const modal = reactive({
  title: "",
  showModal: false,
});

// 验证表项的规则
const rules = {
  T_name: { required: true, message: "不能为空", trigger: "blur" },
  time: { required: true, message: "不能为空", trigger: ["blur", "change"] },
  extent: { required: true, message: "不能为空", trigger: ["blur", "change"] },
};

// 执行 positive 时执行的回调函数
const submitCallback = () => {
  if (modal.title === "添加") {
    console.log("add");
  } else {
    console.log("edit");
  }
};

// 模板标签数据（列表）
const getDataList = async () => {
  const { data: res } = await getVerifyTemplateMapDataList({
    T_source: 1,
    T_task_id: taskStore.task.T_task_id,
    T_VerifyTemplate_id: "rtxF",
  });
  templateDataList.value = res.Data;
};

getDataList();
</script>

<style scoped></style>