ver 1.0

src/api/design/index.ts

@@ -36,7 +36,7 @@ export function queryDesignTemplates(data) {
   });
 }
 
-//获取设计模板--详情
+//获取设计模板--json
 export function getDesignTemplateEdit(data) {
   return request({
     url: "/design/getDesignTemplateEdit",
@@ -45,6 +45,15 @@ export function getDesignTemplateEdit(data) {
   });
 }
 
+//获取设计模板--item
+export function getDesignTemplateImposition(data) {
+  return request({
+    url: "/design/getDesignTemplateImposition",
+    method: "post",
+    params: data,
+  });
+}
+
 //新增/修改设计模板
 export function updateDesignTemplate(data) {
   return request({
@@ -62,3 +71,21 @@ export function voidDesignTemplate(data) {
     params: data,
   });
 }
+
+//上传设计模板缩略图
+export function updateDesignTemplateThumb(data) {
+  return request({
+    url: "/design/updateDesignTemplateThumb",
+    method: "post",
+    params: data,
+  });
+}
+
+//存储当前用户token
+export function saveCurrentUserTokenInfo(data) {
+  return request({
+    url: "/design/saveCurrentUserTokenInfo",
+    method: "post",
+    params: data,
+  });
+}

src/views/design/designFont/compt/childDialog.vue

@@ -181,7 +181,7 @@ function beforeUploadFont(file) {
 function successFileThumb(res, file, fileList) {
   // console.log(res);
   // formData.posterLocationImage = res.fileLink
-  formData.fontThumbUrl = res.url;
+  formData.fontThumbUrl = res.fileLink;
 
   ElMessage.success("上传成功");
 }
@@ -189,7 +189,7 @@ function successFileThumb(res, file, fileList) {
 function successFileFont(res, file, fileList) {
   // console.log(res);
   // formData.posterLocationImage = res.fileLink
-  formData.fontFilePath = res.url;
+  formData.fontFilePath = res.fileLink;
 
   ElMessage.success("上传成功");
 }

src/views/design/designFont/index.vue

@@ -63,7 +63,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="fontName" width="250" label="字体名称" />
-        <el-table-column prop="fontThumbUrl"  label="缩略图">
+        <el-table-column prop="fontThumbUrl" label="缩略图">
           <template #default="{ row }">
             <el-image
               style="width: 300px; height: 60px"

src/views/design/designTemplate/compt/childDialog.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="580px"
+      @close="closeDialog()"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-row>
+          <el-col :span="24">
+            <el-form-item prop="templateName" label="模板名称">
+              <el-input v-model="formData.templateName" />
+            </el-form-item>
+            <el-form-item prop="viewThumbPath" label="预览图上传">
+              <div>
+                <el-upload
+                  ref="uploadThumb"
+                  :multiple="false"
+                  class="avatar-uploader"
+                  action="apis10/upload/bucketFile"
+                  :headers="headers"
+                  :show-file-list="false"
+                  accept=".jpg,.png"
+                  :on-exceed="handleExceedThumb"
+                  :before-upload="beforeUploadThumb"
+                  :on-success="successFileThumb"
+                  :data="uploadParams"
+                >
+                  <template #trigger>
+                    <el-button type="primary">
+                      <i-ep-Picture />&nbsp;&nbsp;上传预览图
+                    </el-button>
+
+                    <span style="margin-left: 10px">
+                      <img
+                        v-if="formData.viewThumbPath"
+                        height="60px"
+                        style="
+                          cursor: pointer;
+                          border: 1px solid #ddd;
+                          height: 60px;
+                          max-width: 500px;
+                        "
+                        :src="formData.viewThumbPath"
+                      />
+                    </span>
+                  </template>
+                </el-upload>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-throttle type="primary" @click="handleSubmit"
+            >确 定
+          </el-button>
+          <el-button @click="closeDialog()">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  FormInstance,
+  genFileId,
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
+  UploadUserFile,
+} from "element-plus";
+import { getToken } from "@/utils/js-cookie";
+import {addDesignFont, getDesignTemplateImposition, updateDesignTemplateThumb} from "@/api/design";
+
+const uploadThumb = ref<UploadInstance>();
+
+const headers = ref({
+  "X-ERP-User-From": 10,
+  "X-ERP-DataSource-Id": getToken("dataBaseAlias"),
+  "X-ERP-Supplier-Code": getToken("shardingKey"),
+  "X-Token": getToken("shardingKey"),
+});
+const uploadParams = reactive({
+  srcfilename: "",
+  chunks: 1,
+  bucketName: "webImage",
+});
+const handleExceedThumb: UploadProps["onExceed"] = (files) => {
+  uploadThumb.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  uploadThumb.value!.handleStart(file);
+};
+
+function beforeUploadThumb(file) {
+  console.log(file);
+  uploadParams.srcfilename = file.name;
+  return new Promise((resolve, reject) => {
+    if (file.size > 307200) {
+      ElMessage.warning(
+        "图片大小不能大于300KB,请您注意图片的长和宽,网页图片的分辨率为72"
+      );
+      reject();
+    } else {
+      resolve(file);
+    }
+  });
+}
+
+function successFileThumb(res, file, fileList) {
+  // console.log(res);
+  // formData.posterLocationImage = res.fileLink
+  formData.viewThumbPath = res.fileLink;
+
+  ElMessage.success("上传成功");
+}
+
+let dialogVisible = ref(false);
+let dialogTitle = ref("");
+const formRef = ref<FormInstance>();
+const emit = defineEmits(["dialogChange"]);
+const formData = reactive({
+  templateName: "",
+  viewThumbPath: "",
+  id: 0,
+});
+const rules = reactive({
+  templateName: [{ required: true, message: "请输入名称", trigger: "blur" }],
+});
+
+function handleSubmit() {
+  formRef.value.validate((valid: any) => {
+    if (valid) {
+      const itemId = formData.id;
+      if (itemId) {
+        //修改
+        const postData = JSON.stringify(formData);
+        const params = {
+          template: postData,
+        };
+        updateDesignTemplateThumb(params).then((response) => {
+          dialogVisible.value = false;
+          if (response.httpCode == 200) {
+            emit("dialogChange");
+            ElMessage.success("操作成功");
+          }
+        });
+      }
+    }
+  });
+}
+
+function getItemData(item) {
+  const data = {
+    id: item,
+  };
+  getDesignTemplateImposition(data).then((response) => {
+    if (response.httpCode == 200) {
+      const data = response.data;
+      formData.id = data.id;
+      formData.viewThumbPath = data.viewThumbPath;
+      formData.templateName = data.templateName;
+    }
+  });
+}
+
+/**  重置表单 */
+function resetForm() {
+  formRef.value.resetFields();
+  formData.id = undefined;
+}
+
+/**关闭弹窗 */
+function closeDialog() {
+  dialogVisible.value = false;
+  formRef.value.resetFields();
+  formData.id = undefined;
+}
+
+defineExpose({
+  dialogVisible,
+  dialogTitle,
+  getItemData,
+  resetForm,
+});
+</script>

src/views/design/designTemplate/index.vue

@@ -19,7 +19,7 @@
           border
         ></el-checkbox>
       </div>
-      <el-button @click="openDialog()" color="#11a983">
+      <el-button @click="openDesignModule()" color="#11a983">
         <i-ep-plus />
         增加设计模板
       </el-button>
@@ -35,12 +35,16 @@
         highlight-current-row
         border
       >
-        <el-table-column label="操作" width="150">
+        <el-table-column label="操作" width="250">
           <template #default="{ row }">
-            <el-button link @click="openDialog(row.id)" type="primary">
+            <el-button link @click="openDesignModule(row.id)" type="primary">
               <i-ep-edit />
               编辑
             </el-button>
+            <el-button link @click="openDialog(row.id)" type="info">
+              <i-ep-edit />
+              缩略图
+            </el-button>
             <el-button
               v-if="row.voidFlag == 0"
               link
@@ -66,7 +70,7 @@
         <el-table-column prop="viewThumbPath" width="320" label="缩略图">
           <template #default="{ row }">
             <el-image
-              style="width: 300px; height: 300px"
+              style="width: 200px; height: 200px"
               :src="row.viewThumbPath"
               fit="contain"
             />
@@ -96,24 +100,56 @@
         @pagination="getTableData"
       />
     </div>
+    <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
   </div>
 </template>
 <script setup lang="ts">
 import { useTable } from "@/hooks/useTable";
-import { queryDesignTemplates, voidDesignTemplate } from "@/api/design";
+import {
+  queryDesignTemplates,
+  saveCurrentUserTokenInfo,
+  voidDesignTemplate,
+} from "@/api/design";
+import ChildDialog from "./compt/childDialog.vue";
 
-let disableLock = ref("");
+const childDialog = ref<any>();
+const disableLock = ref("");
+
+function generateUUID() {
+  return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
 
 //增加编辑
 function openDialog(item?: any) {
-  //todo 转跳外部模板编辑地址
+  childDialog.value.dialogVisible = true;
   if (item) {
-    window.open("http://192.168.1.44:9191/?template=" + item.id, "_blank");
-  } else {
-    window.open("http://192.168.1.44:9191/", "_blank");
+    childDialog.value.dialogTitle = "编辑";
+    nextTick(() => {
+      childDialog.value.getItemData(item);
+    });
   }
 }
 
+function openDesignModule(item?: any) {
+  //todo 转跳外部模板编辑地址
+  const param = {
+    virtualCode: generateUUID(),
+  };
+  saveCurrentUserTokenInfo(param).then((response) => {
+    if (response.httpCode == 200) {
+      if (item) {
+        window.open("http://192.168.1.44:9191/?virtualCode=" + param.virtualCode + "&template=" + item, "_blank");
+      } else {
+        window.open("http://192.168.1.44:9191/?virtualCode=" + param.virtualCode, "_blank");
+      }
+    }
+  });
+}
+
 //禁用删除
 function handleDisable(id, status) {
   ElMessageBox.confirm("确认操作?", "警告", {

vite.config.ts

@@ -54,10 +54,15 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           // target: "http://vapi.youlai.tech",
           // 开发接口地址
           // target: "http://192.168.1.25:51105",//24涛哥//44春禾//25小梁
-          target: "http://192.168.1.44:9991",//24涛哥//44春禾//25小梁
+          target: "http://192.168.1.44:9991", //24涛哥//44春禾//25小梁
           rewrite: (path) =>
             path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
         },
+        "/static": {
+          target: "http://192.168.1.44:11994",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(new RegExp("^/static"), ""),
+        },
       },
     },
     plugins: [
@@ -69,8 +74,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         hmrTopLevelAwait: false,
       }),
       // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
-      AutoImport(
-        {
+      AutoImport({
         // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
         imports: ["vue", "@vueuse/core"],
         // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
@@ -177,7 +181,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
     // 构建配置
     build: {
-      outDir:'admin',
+      outDir: "admin",
       chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
       minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
       terserOptions: {