|
@@ -4,19 +4,159 @@
|
|
|
<template #title> 返回上一级 </template>
|
|
|
<template #header>
|
|
|
<n-breadcrumb>
|
|
|
- <n-breadcrumb-item>任务管理</n-breadcrumb-item>
|
|
|
+ <n-breadcrumb-item>任务管理1</n-breadcrumb-item>
|
|
|
<n-breadcrumb-item>实施方案</n-breadcrumb-item>
|
|
|
</n-breadcrumb>
|
|
|
</template>
|
|
|
</n-page-header>
|
|
|
- <n-grid x-gap="12" :cols="3">
|
|
|
- <n-gi>
|
|
|
- <n-data-table :columns="columns" :data="data" :bordered="false" />
|
|
|
- </n-gi>
|
|
|
- <n-gi :span="2">
|
|
|
- <div class="green" />
|
|
|
- </n-gi>
|
|
|
- </n-grid>
|
|
|
+ <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"
|
|
@@ -27,54 +167,44 @@
|
|
|
negative-text="取消"
|
|
|
@positive-click="submitCallback"
|
|
|
>
|
|
|
- <n-form
|
|
|
- ref="formRef"
|
|
|
- :model="formValue"
|
|
|
- label-placement="left"
|
|
|
- label-width="auto"
|
|
|
- :rules="rules"
|
|
|
- >
|
|
|
- <n-form-item label="名称" path="T_name">
|
|
|
- <n-input v-model:value="formValue.T_name" />
|
|
|
- </n-form-item>
|
|
|
- <n-form-item label="预览" path="T_img" required>
|
|
|
- <n-space>
|
|
|
- <template v-if="modal.title === '编辑'">
|
|
|
- <n-image width="100" :src="formValue.T_img" />
|
|
|
- </template>
|
|
|
- <n-upload
|
|
|
- :default-upload="false"
|
|
|
- list-type="image-card"
|
|
|
- :max="1"
|
|
|
- @change="handleChange"
|
|
|
- >
|
|
|
- <template v-if="modal.title === '添加'"> 点击上传 </template>
|
|
|
- <template v-else> 重新上传 </template>
|
|
|
- </n-upload>
|
|
|
- </n-space>
|
|
|
- </n-form-item>
|
|
|
- </n-form>
|
|
|
+ 123
|
|
|
</n-modal>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import VuePdfEmbed from "vue-pdf-embed";
|
|
|
-import { getTask, getUpFileTokenData } from "@/api";
|
|
|
-import * as qiniu from "qiniu-js";
|
|
|
-
|
|
|
-const message = useMessage();
|
|
|
+import { getVerifyTemplateMapData } from "@/api";
|
|
|
+import { QuestionCircleOutlined as QuestionIcon } from "@vicons/antd";
|
|
|
|
|
|
const props = defineProps({
|
|
|
taskId: String,
|
|
|
});
|
|
|
|
|
|
-const pdfRef = ref(null);
|
|
|
-
|
|
|
-// 任务信息
|
|
|
-const taskInfo = ref({});
|
|
|
-
|
|
|
// 表单信息
|
|
|
-const formValue = reactive({});
|
|
|
+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({
|
|
@@ -85,37 +215,8 @@ const modal = reactive({
|
|
|
// 验证表项的规则
|
|
|
const rules = {
|
|
|
T_name: { required: true, message: "不能为空", trigger: "blur" },
|
|
|
-};
|
|
|
-
|
|
|
-// 打印pdf
|
|
|
-const onPrint = () => {
|
|
|
- pdfRef.value.print();
|
|
|
-};
|
|
|
-
|
|
|
-// 组件状态变化的回调
|
|
|
-const handleChange = async (options) => {
|
|
|
- const token = await getUpFileToken(options.file.type.split("/")[1]);
|
|
|
- const observable = qiniu.upload(
|
|
|
- options.file.file,
|
|
|
- options.file.name,
|
|
|
- token,
|
|
|
- {},
|
|
|
- {
|
|
|
- useCdnDomain: true,
|
|
|
- }
|
|
|
- );
|
|
|
- observable.subscribe({
|
|
|
- next: (result) => {
|
|
|
- // 主要用来展示进度
|
|
|
- console.warn(result);
|
|
|
- },
|
|
|
- error: () => {
|
|
|
- message.error("上传图片失败");
|
|
|
- },
|
|
|
- complete: (res) => {
|
|
|
- formValue.T_img = res.key;
|
|
|
- },
|
|
|
- });
|
|
|
+ time: { required: true, message: "不能为空", trigger: ["blur", "change"] },
|
|
|
+ extent: { required: true, message: "不能为空", trigger: ["blur", "change"] },
|
|
|
};
|
|
|
|
|
|
// 执行 positive 时执行的回调函数
|
|
@@ -127,36 +228,17 @@ const submitCallback = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 显示上传
|
|
|
-const showUploadModal = () => {};
|
|
|
-
|
|
|
-// 获取上传token
|
|
|
-const getUpFileToken = async () => {
|
|
|
- const { data: res } = await getUpFileTokenData({
|
|
|
- T_suffix: "pdf",
|
|
|
- });
|
|
|
- return res.Data;
|
|
|
-};
|
|
|
-
|
|
|
-// 任务(获取)
|
|
|
-const getTaskInfo = async () => {
|
|
|
- const { data: res } = await getTask({
|
|
|
+// 模板标签数据(列表)
|
|
|
+const getVerifyTemplateMapDataList = async () => {
|
|
|
+ const { data: res } = await getVerifyTemplateMapData({
|
|
|
+ T_source: 1,
|
|
|
T_task_id: props.taskId,
|
|
|
+ T_VerifyTemplate_id: "rtxF",
|
|
|
});
|
|
|
- taskInfo.value = res.Data;
|
|
|
+ templateDataList.value = res.Data;
|
|
|
};
|
|
|
|
|
|
-getUpFileToken();
|
|
|
-getTaskInfo();
|
|
|
+getVerifyTemplateMapDataList();
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.light-green {
|
|
|
- height: 108px;
|
|
|
- background-color: rgba(0, 128, 0, 0.12);
|
|
|
-}
|
|
|
-.green {
|
|
|
- height: 108px;
|
|
|
- background-color: rgba(0, 128, 0, 0.24);
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style scoped></style>
|