|
@@ -0,0 +1,162 @@
|
|
|
+<template>
|
|
|
+ <n-space vertical>
|
|
|
+ <n-page-header @back="() => $router.back()">
|
|
|
+ <template #title> 返回上一级 </template>
|
|
|
+ <template #header>
|
|
|
+ <n-breadcrumb>
|
|
|
+ <n-breadcrumb-item>任务管理</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-space>
|
|
|
+ <n-modal
|
|
|
+ :show-icon="false"
|
|
|
+ v-model:show="modal.showModal"
|
|
|
+ preset="dialog"
|
|
|
+ :title="modal.title"
|
|
|
+ positive-text="提交"
|
|
|
+ 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>
|
|
|
+ </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();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ taskId: String,
|
|
|
+});
|
|
|
+
|
|
|
+const pdfRef = ref(null);
|
|
|
+
|
|
|
+// 任务信息
|
|
|
+const taskInfo = ref({});
|
|
|
+
|
|
|
+// 表单信息
|
|
|
+const formValue = reactive({});
|
|
|
+
|
|
|
+// 模态框数据源
|
|
|
+const modal = reactive({
|
|
|
+ title: "",
|
|
|
+ showModal: false,
|
|
|
+});
|
|
|
+
|
|
|
+// 验证表项的规则
|
|
|
+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;
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 执行 positive 时执行的回调函数
|
|
|
+const submitCallback = () => {
|
|
|
+ if (modal.title === "添加") {
|
|
|
+ console.log("add");
|
|
|
+ } else {
|
|
|
+ console.log("edit");
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 显示上传
|
|
|
+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({
|
|
|
+ T_task_id: props.taskId,
|
|
|
+ });
|
|
|
+ taskInfo.value = res.Data;
|
|
|
+};
|
|
|
+
|
|
|
+getUpFileToken();
|
|
|
+getTaskInfo();
|
|
|
+</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>
|