dySdDesignerVue_Admin/src/views/designFront/index.vue

<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>