设计前端demo

src/views/baseInfo/basePaperInfo/compt/childDialog.vue

@@ -1,55 +1,69 @@
 <template>
   <div class="dialog">
     <el-dialog
-        v-model="dialogVisible"
-        :title="dialogTitle"
-        width="480px"
-        @close="closeDialog()"
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="480px"
+      @close="closeDialog()"
     >
       <el-form
-          ref="formRef"
-          :model="formData"
-          :rules="rules"
-          label-width="120px"
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
       >
         <el-row>
           <el-col :span="24">
             <el-form-item prop="idPaperType" label="纸张类型">
-              <el-select v-model="formData.idPaperType" filterable placeholder="请选择"
-                         :disabled="formData.id!=''">
+              <el-select
+                v-model="formData.idPaperType"
+                filterable
+                placeholder="请选择"
+                :disabled="formData.id != ''"
+              >
                 <el-option
-                    v-for="item in typeOptions"
-                    :key="item.id"
-                    :label="item.paperTypeName"
-                    :value="item.id">
+                  v-for="item in typeOptions"
+                  :key="item.id"
+                  :label="item.paperTypeName"
+                  :value="item.id"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item prop="priceType" label="计价方式">
-              <el-select v-model="formData.priceType" filterable placeholder="请选择">
+              <el-select
+                v-model="formData.priceType"
+                filterable
+                placeholder="请选择"
+              >
                 <el-option
-                    v-for="item in priceOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
+                  v-for="item in priceOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item prop="mtSuttle" label="克重">
-              <el-input :disabled="formData.id!=''" v-model="formData.mtSuttle"/>
+              <el-input
+                :disabled="formData.id != ''"
+                v-model="formData.mtSuttle"
+              />
             </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 v-throttle type="primary" @click="handleSubmit"
+            >确 定</el-button
+          >
           <el-button @click="closeDialog()">取 消</el-button>
         </div>
       </template>
@@ -57,34 +71,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import {addPaperBaseInfo, getPaperBaseInfo, updatePaperBaseInfo,getPaperTypeList} from "@/api/baseInfo";
-import type {FormInstance} from 'element-plus'
-const typeOptions = ref <any> ()
-let dialogVisible = ref(false)
-let dialogTitle = ref("")
-const formRef = ref<FormInstance>()
-const emit = defineEmits(['dialogChange'])
+import {
+  addPaperBaseInfo,
+  getPaperBaseInfo,
+  updatePaperBaseInfo,
+  getPaperTypeList,
+} from "@/api/baseInfo";
+import type { FormInstance } from "element-plus";
+
+const typeOptions = ref<any>();
+let dialogVisible = ref(false);
+let dialogTitle = ref("");
+const formRef = ref<FormInstance>();
+const emit = defineEmits(["dialogChange"]);
 const formData = reactive({
-  paperName: '',
-  idPaperType: '',
-  paperTypeName: '',
+  paperName: "",
+  idPaperType: "",
+  paperTypeName: "",
   priceType: 0,
-  paperPrice: '',
-  mtSuttle: '',
-  id: ""
-})
+  paperPrice: "",
+  mtSuttle: "",
+  id: "",
+});
 const priceOptions = [
-      {
-        label: '吨价',
-        value: 0
-      },
-      {
-        label: '平方单价',
-        value: 1
-      }
-    ]
+  {
+    label: "吨价",
+    value: 0,
+  },
+  {
+    label: "平方单价",
+    value: 1,
+  },
+];
 const rules = reactive({
-  paperName: [{required: true, message: "请输入基础纸张名称", trigger: "blur"}],
+  paperName: [
+    { required: true, message: "请输入基础纸张名称", trigger: "blur" },
+  ],
 });
 
 function handleSubmit() {
@@ -93,77 +115,80 @@ function handleSubmit() {
       const itemId = formData.id;
       if (itemId) {
         //修改
-        const postData = JSON.stringify(formData)
+        const postData = JSON.stringify(formData);
         const params = {
-          "info": postData,
-        }
+          info: postData,
+        };
         updatePaperBaseInfo(params).then((response) => {
-          dialogVisible.value = false
+          dialogVisible.value = false;
           if (response.httpCode == 200) {
-            emit('dialogChange');
+            emit("dialogChange");
             ElMessage.success("操作成功");
           }
-        })
+        });
       } else {
         //增加
-        const postData = JSON.stringify(formData)
+        const postData = JSON.stringify(formData);
         const params = {
-          "info": postData,
-        }
+          info: postData,
+        };
         addPaperBaseInfo(params).then((response) => {
-          dialogVisible.value = false
+          dialogVisible.value = false;
           if (response.httpCode == 200) {
-            emit('dialogChange');
+            emit("dialogChange");
             ElMessage.success("操作成功");
           }
-        })
+        });
       }
     }
   });
 }
+
 function getPaperTypeInfo() {
   const page = {
     pageIndex: 1,
-    pageSize: 10000
-  }
+    pageSize: 10000,
+  };
 
   const data = {
-    'params': JSON.stringify({
-      'voidFlag': 0
+    params: JSON.stringify({
+      voidFlag: 0,
     }),
-    'page': JSON.stringify(page)
-  }
+    page: JSON.stringify(page),
+  };
   getPaperTypeList(data).then((response) => {
     if (response.httpCode == 200) {
-      const { data } = response
-      typeOptions.value = data
+      const { data } = response;
+      typeOptions.value = data;
     }
-  })
+  });
 }
+
 onMounted(() => {
-  getPaperTypeInfo()
-})
+  getPaperTypeInfo();
+});
+
 function getItemData(item) {
   const data = {
-    id: item
-  }
-  getPaperBaseInfo(data).then(response => {
+    id: item,
+  };
+  getPaperBaseInfo(data).then((response) => {
     if (response.httpCode == 200) {
-      const data = response.data
-      Object.assign(formData, {...data});
+      const data = response.data;
+      Object.assign(formData, { ...data });
     }
-  })
+  });
 }
 
 /**  重置表单 */
 function resetForm() {
   formRef.value.resetFields();
-  formData.id = ''
+  formData.id = "";
 }
 
 /**关闭弹窗 */
 function closeDialog() {
-  dialogVisible.value = false
+  dialogVisible.value = false;
   formRef.value.resetFields();
   formData.id = undefined;
 }
@@ -172,11 +197,8 @@ defineExpose({
   dialogVisible,
   dialogTitle,
   getItemData,
-  resetForm
-})
+  resetForm,
+});
 </script>
 
-
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

src/views/designFront/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button type="primary" @click="submitDesignOrder">
+        <i-ep-search />
+        搜索
+      </el-button>
+    </div>
+    <div class="table-con">
+      <el-tabs v-model="activeName" @tab-click="handleChangeProduct">
+        <el-tab-pane label="条幅" name="banner">
+          <el-form ref="formRef" :model="formData" label-width="120px">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="backgroundColor" label="材料">
+                  <el-select
+                    v-model="formData.backgroundColor"
+                    filterable
+                    placeholder="请选择"
+                    @change="refreshPreview"
+                  >
+                    <el-option
+                      v-for="item in bannerBgColorOptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.color"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="backgroundSize" label="尺寸">
+                  <el-input-number
+                    :precision="2"
+                    :controls="false"
+                    v-model="formData.backgroundWidth"
+                    @change="refreshPreview"
+                  />
+                  <span style="margin-left: 20px; margin-right: 20px">*</span>
+                  <el-input-number
+                    :precision="2"
+                    :controls="false"
+                    v-model="formData.backgroundHeight"
+                    @change="refreshPreview"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="fontColor" label="印色">
+                  <el-select
+                    v-model="bannerFontObject.color"
+                    filterable
+                    placeholder="请选择"
+                    @change="refreshPreview"
+                  >
+                    <el-option
+                      v-for="item in bannerFontColorOptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.color"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="fontFamily" label="字体">
+                  <el-select
+                    v-model="bannerFontObject.fontFamily"
+                    filterable
+                    placeholder="请选择"
+                    @change="refreshPreview"
+                  >
+                    <el-option
+                      v-for="item in bannerFontFamilyOptions"
+                      :key="item.label"
+                      :label="item.label"
+                      :value="item.fontFamily"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item prop="fontContent" label="文字内容">
+                  <el-input
+                    v-model="bannerFontObject.text"
+                    @change="refreshPreview"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="锦旗" name="flag">锦旗</el-tab-pane>
+      </el-tabs>
+      <iframe
+        id="iframe"
+        ref="iframe"
+        :src="iframeSrc"
+        style="width: 1200px; height: 600px"
+      ></iframe>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { TabsPaneContext } from "element-plus";
+import { getDesignFonts } from "@/api/design";
+import { getUserInfoApi } from "@/api/user";
+import { getToken } from "@/utils/js-cookie";
+
+const products = ref([
+  {
+    label: "条幅",
+    name: "banner",
+    templateId: 2,
+  },
+  {
+    label: "锦旗",
+    name: "flag",
+    templateId: 3,
+  },
+]);
+
+const bannerBgColorOptions = [
+  { label: "红底条幅", color: "rgba(255,0,0,1)" },
+  { label: "黄底条幅", color: "rgba(255,255,0,1)" },
+  { label: "蓝底条幅", color: "rgba(0,0,255,1)" },
+  { label: "绿底条幅", color: "rgba(0,255,0,1)" },
+];
+const bannerFontColorOptions = [
+  { label: "红色", color: "rgba(255,0,0,1)" },
+  { label: "黄色", color: "rgba(255,255,0,1)" },
+  { label: "白色", color: "rgba(255,255,255,1)" },
+];
+const bannerFontFamilyOptions = ref([]);
+
+const designModuleUrl = "http://192.168.1.44:9191/?runMode=0";
+const outerSessionId = getToken("Access-Token"); //这个地方需要传入的是当前会话的唯一标识
+const iframeSrc = ref("");
+const iframe = ref();
+
+const formData = ref({
+  backgroundWidth: 2000.0,
+  backgroundHeight: 400.0,
+  backgroundColor: "rgba(255,0,0,1)",
+  objects: "",
+});
+const bannerFontObject = ref({
+  id: "5p3ngaG9MM", //对应模板中的元素id
+  color: "rgba(255,255,0,1)",
+  text: "",
+  fontFamily: "",
+});
+
+let currentProduct = {};
+
+const activeName = ref("banner");
+
+onMounted(() => {
+  currentProduct = products.value[0];
+  iframeSrc.value =
+    designModuleUrl +
+    "&template=" +
+    currentProduct.templateId +
+    "&sessionId=" +
+    outerSessionId;
+
+  //后台获取上传的字体
+  const param = {
+    voidFlag: 0,
+  };
+  getDesignFonts(param).then((res) => {
+    if (res.httpCode == 200) {
+      res.data.forEach((x) => {
+        bannerFontFamilyOptions.value.push({
+          label: x.fontName,
+          fontFamily: x.fontFamily,
+        });
+      });
+    }
+  });
+});
+
+const handleChangeProduct = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab);
+  currentProduct = products.value.find((x) => x.name == tab.props.name);
+  iframeSrc.value = designModuleUrl + "?template=" + currentProduct.templateId;
+};
+
+const buildTemplateParams = () => {
+  formData.value.objects = JSON.stringify([bannerFontObject.value]);
+
+  return {
+    msgType: "loadTemplate",
+    data: formData.value,
+  };
+};
+
+const refreshPreview = () => {
+  const msg = buildTemplateParams();
+  iframe.value.contentWindow.postMessage(JSON.stringify(msg), "*");
+};
+
+const submitDesignOrder = () => {
+  const msg = {
+    msgType: "submitOrder",
+    data: outerSessionId,
+  };
+  iframe.value.contentWindow.postMessage(JSON.stringify(msg), "*");
+};
+
+const testIframe = () => {
+  iframe.value.contentWindow.postMessage("Hello from parent page!", "*");
+};
+</script>
+
+<style scoped lang="scss">
+#iframe {
+  pointer-events: none;
+}
+</style>

src/views/login/index.vue

@@ -3,84 +3,83 @@
     <!-- 顶部 -->
     <div class="absolute top-0 flex items-center justify-end px-5 h-20 w-full">
       <el-switch
-          v-model="isDark"
-          inline-prompt
-          :active-icon="IconEpMoon"
-          :inactive-icon="IconEpSunny"
-          active-color="var(--el-fill-color-dark)"
-          inactive-color="var(--el-color-primary)"
-          @change="handleThemeChange"
+        v-model="isDark"
+        inline-prompt
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
+        @change="handleThemeChange"
       />
     </div>
     <!-- 登录表单 -->
     <el-card
-        class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
+      class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
     >
       <div class="text-center relative">
-        <img :src="webInfo.wedLogo" height="50" alt="印界智程"
-             title="登录">
-        <span style="display: block;margin-bottom: 5px">{{erpName}}</span>
+        <img :src="webInfo.wedLogo" height="50" alt="印界智程" title="登录" />
+        <span style="display: block; margin-bottom: 5px">{{ erpName }}</span>
       </div>
       <el-form
-          ref="loginFormRef"
-          :model="loginData"
-          :rules="loginRules"
-          class="login-form"
+        ref="loginFormRef"
+        :model="loginData"
+        :rules="loginRules"
+        class="login-form"
       >
         <el-form-item prop="username">
           <div class="p-2">
-            <svg-icon icon-class="user"/>
+            <svg-icon icon-class="user" />
           </div>
           <el-input
-              ref="username"
-              v-model="loginData.username"
-              class="flex-1"
-              size="large"
-              :placeholder="$t('login.username')"
-              name="username"
+            ref="username"
+            v-model="loginData.username"
+            class="flex-1"
+            size="large"
+            :placeholder="$t('login.username')"
+            name="username"
           />
         </el-form-item>
 
         <div>
           <el-form-item prop="password">
             <span class="p-2">
-              <svg-icon icon-class="password"/>
+              <svg-icon icon-class="password" />
             </span>
             <el-input
-                v-model="loginData.password"
-                class="flex-1"
-                :placeholder="$t('login.password')"
-                :type="passwordVisible === false ? 'password' : 'input'"
-                size="large"
-                name="password"
-                @keyup="checkCapslock"
-                @keyup.enter="handleLogin"
+              v-model="loginData.password"
+              class="flex-1"
+              :placeholder="$t('login.password')"
+              :type="passwordVisible === false ? 'password' : 'input'"
+              size="large"
+              name="password"
+              @keyup="checkCapslock"
+              @keyup.enter="handleLogin"
             />
             <span class="mr-2" @click="passwordVisible = !passwordVisible">
               <svg-icon
-                  :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
-                  class="cursor-pointer"
+                :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+                class="cursor-pointer"
               />
             </span>
           </el-form-item>
         </div>
         <!-- 验证码 -->
         <el-button
-            size="large"
-            v-throttle
-            :loading="loading"
-            type="primary"
-            class="w-full"
-            @click.prevent="handleLogin"
-        >{{ $t("login.login") }}
+          size="large"
+          v-throttle
+          :loading="loading"
+          type="primary"
+          class="w-full"
+          @click.prevent="handleLogin"
+          >{{ $t("login.login") }}
         </el-button>
       </el-form>
     </el-card>
 
     <!-- ICP备案 -->
     <div
-        class="absolute bottom-1 text-[10px] text-center"
-        v-show="useAppStore().device == 'desktop'"
+      class="absolute bottom-1 text-[10px] text-center"
+      v-show="useAppStore().device == 'desktop'"
     >
       <p v-html="webInfo.wedFiling"></p>
     </div>
@@ -88,27 +87,26 @@
 </template>
 
 <script setup lang="ts">
-import {getERPSupplierInfoByCode} from "@/api/system";
-import {removeToken, setToken} from '@/utils/js-cookie'
-import {useI18n} from "vue-i18n";
+import { getERPSupplierInfoByCode } from "@/api/system";
+import { removeToken, setToken } from "@/utils/js-cookie";
+import { useI18n } from "vue-i18n";
 import router from "@/router";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconEpSunny from "~icons/ep/sunny";
 import IconEpMoon from "~icons/ep/moon";
-import {useSettingsStore} from "@/store/modules/settings";
-
+import { useSettingsStore } from "@/store/modules/settings";
 
 // 状态管理依赖
-import {useUserStore} from "@/store/modules/user";
-import {useAppStore} from "@/store/modules/app";
+import { useUserStore } from "@/store/modules/user";
+import { useAppStore } from "@/store/modules/app";
 
 // API依赖
-import {LocationQuery, LocationQueryValue, useRoute} from "vue-router";
+import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 
 const settingsStore = useSettingsStore();
-const webInfo = settingsStore.webSite.webInfo
+const webInfo = settingsStore.webSite.webInfo;
 
-let erpName = ref("")
+let erpName = ref("");
 /**
  * 明亮/暗黑主题切换
  */
@@ -126,7 +124,7 @@ const handleThemeChange = (isDark: any) => {
  */
 const appStore = useAppStore();
 const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
-const {width} = useWindowSize();
+const { width } = useWindowSize();
 watchEffect(() => {
   if (width.value < WIDTH) {
     appStore.toggleDevice("mobile");
@@ -143,10 +141,10 @@ const loginFormRef = ref(ElForm); // 登录表单ref
 const loginData = ref({
   username: "",
   password: "",
-  supplierId:""
+  supplierId: "",
 });
 
-const {t} = useI18n();
+const { t } = useI18n();
 const loginRules = computed(() => {
   const prefix = appStore.language === "en" ? "Please enter" : "请输入";
   return {
@@ -170,7 +168,7 @@ const loginRules = computed(() => {
         },
         message: `${prefix}${t("login.password")}`,
       },
-    ]
+    ],
   };
 });
 
@@ -178,7 +176,7 @@ const loginRules = computed(() => {
  * 检查输入大小写状态
  */
 function checkCapslock(e: any) {
-  const {key} = e;
+  const { key } = e;
   isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
 }
 
@@ -193,70 +191,72 @@ function handleLogin() {
     if (valid) {
       loading.value = true;
       userStore
-          .login(loginData.value)
-          .then(() => {
-            const query: LocationQuery = route.query;
+        .login(loginData.value)
+        .then(() => {
+          const query: LocationQuery = route.query;
 
-            const redirect = (query.redirect as LocationQueryValue) ?? "/";
+          // const redirect = (query.redirect as LocationQueryValue) ?? "/";
+          //默认转跳
+          const redirect = (query.redirect as LocationQueryValue) ?? "/design/designFront";
 
-            const otherQueryParams = Object.keys(query).reduce(
-                (acc: any, cur: string) => {
-                  if (cur !== "redirect") {
-                    acc[cur] = query[cur];
-                  }
-                  return acc;
-                },
-                {}
-            );
+          const otherQueryParams = Object.keys(query).reduce(
+            (acc: any, cur: string) => {
+              if (cur !== "redirect") {
+                acc[cur] = query[cur];
+              }
+              return acc;
+            },
+            {}
+          );
 
-            router.push({path: redirect, query: otherQueryParams});
-          })
-          .catch(() => {
-          })
-          .finally(() => {
-            loading.value = false;
-          });
+          router.push({ path: redirect, query: otherQueryParams });
+        })
+        .catch(() => {})
+        .finally(() => {
+          loading.value = false;
+        });
     }
   });
 }
-function getERPCode(){
+
+function getERPCode() {
   const params = {
-    "code": ''
-  }
+    code: "",
+  };
   getERPSupplierInfoByCode(params).then((response) => {
     if (response.httpCode == 200) {
-      const { data } = response
+      const { data } = response;
       // console.log(data);
-      erpName.value = data.itemName
-      loginData.value.supplierId = data.id
-      if(data.saasFlag==1){
-        setToken("dataBaseAlias", data.dataBaseAlias)
-        setToken("shardingKey", data.shardingKey)
-        setToken("supplierId", data.id)
-      }else {
-        removeToken("dataBaseAlias");//清除dataBaseAlias
-        removeToken("shardingKey");//清除shardingKey
-        setToken("supplierId", data.id)
+      erpName.value = data.itemName;
+      loginData.value.supplierId = data.id;
+      if (data.saasFlag == 1) {
+        setToken("dataBaseAlias", data.dataBaseAlias);
+        setToken("shardingKey", data.shardingKey);
+        setToken("supplierId", data.id);
+      } else {
+        removeToken("dataBaseAlias"); //清除dataBaseAlias
+        removeToken("shardingKey"); //清除shardingKey
+        setToken("supplierId", data.id);
       }
-
     }
-  })
+  });
 }
+
 onMounted(() => {
   //进入登录页面清除cookie
-  removeToken("Access-Token")//清除token
-  removeToken("dataBaseAlias")//清除dataBaseAlias
-  removeToken("shardingKey")//清除shardingKey
-  removeToken("supplierId")//清除supplierId
+  removeToken("Access-Token"); //清除token
+  removeToken("dataBaseAlias"); //清除dataBaseAlias
+  removeToken("shardingKey"); //清除shardingKey
+  removeToken("supplierId"); //清除supplierId
   // 主题初始化
   const theme = useSettingsStore().theme;
-  useSettingsStore().changeSetting({key: "theme", value: theme});
+  useSettingsStore().changeSetting({ key: "theme", value: theme });
   if (theme == "dark") {
     document.documentElement.classList.add("dark");
   } else {
     document.documentElement.classList.remove("dark");
   }
-  getERPCode()
+  getERPCode();
 });
 </script>