1.1

标签

src/api/design/index.ts

@@ -98,3 +98,100 @@ export function queryDesignOrders(data) {
     params: data,
   });
 }
+
+//获取设计标签组
+export function queryDesignTagType(data) {
+  return request({
+    url: "/design/queryDesignTagType",
+    method: "post",
+    params: data,
+  });
+}
+export function selectDesignTagType(data) {
+  return request({
+    url: "/design/selectDesignTagType",
+    method: "post",
+    params: data,
+  });
+}
+
+//获取设计标签组
+export function getDesignTagType(data) {
+  return request({
+    url: "/design/getDesignTagType",
+    method: "post",
+    params: data,
+  });
+}
+
+//新增设计标签组
+export function newDesignTagType(data) {
+  return request({
+    url: "/design/newDesignTagType",
+    method: "post",
+    data: data,
+  });
+}
+
+//修改设计标签组
+export function updateDesignTagType(data) {
+  return request({
+    url: "/design/updateDesignTagType",
+    method: "post",
+    data: data,
+  });
+}
+
+//删除设计标签组
+export function deleteDesignTagType(data) {
+  return request({
+    url: "/design/deleteDesignTagType",
+    method: "post",
+    params: data,
+  });
+}
+
+//获取设计标签
+export function queryDesignTags(data) {
+  return request({
+    url: "/design/queryDesignTags",
+    method: "post",
+    params: data,
+  });
+}
+
+//新增设计标签
+export function newDesignTag(data) {
+  return request({
+    url: "/design/newDesignTag",
+    method: "post",
+    data: data,
+  });
+}
+
+//删除设计标签
+export function deleteDesignTag(data) {
+  return request({
+    url: "/design/deleteDesignTag",
+    method: "post",
+    params: data,
+  });
+}
+
+//获取模板已有的标签
+export function getTemplateTags(data) {
+  return request({
+    url: "/design/getTemplateTags",
+    method: "post",
+    params: data,
+  });
+}
+
+//修改模板标签
+export function modifyTemplateTags(data, idTemplate) {
+  return request({
+    url: "/design/modifyTemplateTags?idTemplate=" + idTemplate,
+    method: "post",
+    data: data,
+  });
+}

src/views/design/designTag/component/chooseTags.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="app-container">
+    <el-row style="margin-bottom: 10px">
+      <span>已选择标签: </span>
+      <el-tag
+        type="primary"
+        closable
+        v-for="tag in currentTags"
+        @close="handleDeleteTag(tag)"
+        >{{ tag.tagName }}
+      </el-tag>
+    </el-row>
+    <el-row>
+      <div class="filter-container">
+        <el-select
+          v-model="queryForm.idType"
+          placeholder="请选择分组"
+          style="width: 150px"
+          @change="handleSearch"
+        >
+          <el-option
+            v-for="item in tagTypes"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+        <el-input
+          @keyup.enter="handleSearch"
+          class="w200px mr5px"
+          v-model="queryForm.keyWord"
+          placeholder="关键字搜索"
+        />
+        <el-button type="primary" @click="handleSearch">
+          <i-ep-search />
+          搜索
+        </el-button>
+
+        <el-button
+          v-if="props.idTemplate > 0"
+          type="primary"
+          @click="saveTemplateTags"
+        >
+          保存标签
+        </el-button>
+        <el-button
+          v-if="props.idTemplate === 0"
+          type="primary"
+          @click="selectTags"
+        >
+          确认选择
+        </el-button>
+      </div>
+      <div class="table-con">
+        <el-table
+          :max-height="tableHeight"
+          v-loading="loading"
+          :data="tableData"
+          highlight-current-row
+          border
+        >
+          <el-table-column label="操作" width="150">
+            <template #default="{ row }">
+              <el-button link @click="handleSelect(row)" type="warning"
+                >选择
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column type="index" label="#" width="50">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tagName" width="250" label="标签" />
+
+          <el-table-column prop="createTime" label="创建时间" width="155">
+            <template #default="{ row }">
+              <span v-if="row.createTime">
+                {{ $filters.getTime(row.createTime) }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-if="total > 0"
+          v-model:total="total"
+          v-model:page="queryPage.pageIndex"
+          v-model:limit="queryPage.pageSize"
+          @pagination="getTableData"
+        />
+      </div>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { useTable } from "@/hooks/useTable";
+import {
+  getTemplateTags,
+  modifyTemplateTags,
+  queryDesignTags,
+  selectDesignTagType,
+} from "@/api/design";
+
+const tagTypes = ref([{ id: 0, name: "未分组" }]);
+const currentTags = ref([]);
+
+const props = defineProps<{
+  idTemplate?: number;
+}>();
+
+const emit = defineEmits(["onSaved", "onSelected"]);
+
+function getAllTagTypes() {
+  selectDesignTagType({}).then((response) => {
+    if (response.httpCode == 200) {
+      tagTypes.value = tagTypes.value.concat(response.data);
+    }
+  });
+}
+
+function getCurrentTemplateTags() {
+  const param = {
+    idTemplate: props.idTemplate,
+  };
+
+  getTemplateTags(param).then((response) => {
+    if (response.httpCode == 200) {
+      response.data.forEach((x) => {
+        currentTags.value.push({
+          tagName: x.tagName,
+          tagTypeName: x.tagTypeName,
+          idType: 0,
+        });
+      });
+    }
+  });
+}
+
+function handleSelect(tag) {
+  if (currentTags.value.findIndex((x) => x.tagName === tag.tagName) >= 0) {
+    ElMessage.warning("已添加过该标签");
+    return;
+  }
+
+  currentTags.value.push({
+    tagName: tag.tagName,
+    tagTypeName: "",
+    idType: tag.idType,
+  });
+}
+
+function handleDeleteTag(tag) {
+  currentTags.value.splice(
+    currentTags.value.findIndex((x) => x.tagName === tag.tagName),
+    1
+  );
+}
+
+function saveTemplateTags() {
+  modifyTemplateTags(JSON.stringify(currentTags.value), props.idTemplate).then(
+    (response) => {
+      if (response.httpCode == 200) {
+        ElMessage.success("保存模板标签成功");
+        emit("onSaved");
+      }
+    }
+  );
+}
+
+function selectTags() {
+  emit("onSelected", currentTags.value);
+}
+
+onMounted(() => {
+  getAllTagTypes();
+  if (props.idTemplate > 0) getCurrentTemplateTags();
+  else currentTags.value = [];
+  // handleSearch();
+});
+
+const queryForm = reactive({
+  keyWord: "",
+  idType: 0,
+});
+const {
+  tableData,
+  queryPage,
+  total,
+  loading,
+  getTableData,
+  tableHeight,
+  handleSearch, //搜索
+  refreshTableInfo, //刷新
+} = useTable(queryDesignTags, queryForm);
+</script>

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

@@ -0,0 +1,115 @@
+<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="tagName" label="标签名称">
+              <el-input v-model.trim="formData.tagName" />
+            </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 {
+  addDesignFont,
+  getDesignTagType,
+  newDesignTag,
+  newDesignTagType,
+  updateDesignTagType,
+} from "@/api/design";
+
+let dialogVisible = ref(false);
+let dialogTitle = ref("");
+const idType = ref(0);
+const formRef = ref<FormInstance>();
+const emit = defineEmits(["dialogChange"]);
+const formData = reactive({
+  tagName: "",
+  idType: 0,
+  id: 0,
+});
+const rules = reactive({
+  tagName: [{ required: true, message: "请输入名称", trigger: "blur" }],
+});
+
+function handleSubmit() {
+  formRef.value.validate((valid: any) => {
+    if (valid) {
+      //增加
+      formData.idType = idType;
+      const postData = JSON.stringify(formData);
+      newDesignTag(postData).then((response) => {
+        dialogVisible.value = false;
+        if (response.httpCode == 200) {
+          emit("dialogChange");
+          ElMessage.success("操作成功");
+        }
+      });
+    }
+  });
+}
+
+function getItemData(item) {
+  const data = {
+    id: item,
+  };
+  getDesignTagType(data).then((response) => {
+    if (response.httpCode == 200) {
+      const data = response.data;
+      Object.assign(formData, { ...data });
+    }
+  });
+}
+
+/**  重置表单 */
+function resetForm() {
+  formRef.value.resetFields();
+  formData.id = undefined;
+}
+
+/**关闭弹窗 */
+function closeDialog() {
+  dialogVisible.value = false;
+  formRef.value.resetFields();
+  formData.id = undefined;
+}
+
+defineExpose({
+  dialogVisible,
+  dialogTitle,
+  idType,
+  getItemData,
+  resetForm,
+});
+</script>

src/views/design/designTag/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        @keyup.enter="handleSearch"
+        class="w200px mr5px"
+        v-model="queryForm.keyWord"
+        placeholder="关键字搜索"
+      />
+      <el-button type="primary" @click="handleSearch">
+        <i-ep-search />
+        搜索
+      </el-button>
+      <el-button @click="openDialog()" color="#11a983">
+        <i-ep-plus />
+        增加标签
+      </el-button>
+      <el-button type="primary" @click="refreshTableInfo">
+        <i-ep-refresh />
+      </el-button>
+    </div>
+    <div class="table-con">
+      <el-table
+        :max-height="tableHeight"
+        v-loading="loading"
+        :data="tableData"
+        highlight-current-row
+        border
+      >
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button link @click="handleDelete(row.id)" type="warning"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column type="index" label="#" width="50">
+          <template #default="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="tagName" width="250" label="标签" />
+
+        <el-table-column prop="createTime" label="创建时间" width="155">
+          <template #default="{ row }">
+            <span v-if="row.createTime">
+              {{ $filters.getTime(row.createTime) }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryPage.pageIndex"
+        v-model:limit="queryPage.pageSize"
+        @pagination="getTableData"
+      />
+    </div>
+    <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import ChildDialog from "./compt/childDialog.vue";
+import { useTable } from "@/hooks/useTable";
+import {
+  deleteDesignTag,
+  deleteDesignTagType,
+  queryDesignTags,
+  queryDesignTagType,
+} from "@/api/design";
+import { useRoute } from "vue-router";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+
+let disableLock = ref("");
+const childDialog = ref<any>();
+const currentRoute = useRoute();
+let tabTitle = "";
+let tempRoute = null;
+const tagsViewStore = useTagsViewStore();
+
+// 设置标签名称
+function setTagsViewTitle() {
+  const title = tabTitle;
+
+  const route = Object.assign({}, tempRoute, { title: `${title}` });
+  tagsViewStore.updateVisitedView(route);
+}
+
+//增加编辑
+function openDialog(item?: any) {
+  childDialog.value.dialogVisible = true;
+  if (item) {
+    childDialog.value.dialogTitle = "编辑";
+    // nextTick(() => {
+    //   childDialog.value.getItemData(item);
+    // });
+  } else {
+    nextTick(() => {
+      childDialog.value.idType = queryForm.idType;
+      childDialog.value.dialogTitle = "增加";
+      childDialog.value.resetForm();
+    });
+  }
+}
+
+//禁用删除
+function handleDelete(id) {
+  ElMessageBox.confirm("确认删除当前标签?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    const postData = {
+      idDesignTag: id,
+    };
+    deleteDesignTag(postData).then((response) => {
+      if (response.httpCode == 200) {
+        ElMessage.success("操作成功");
+        getTableData();
+      }
+    });
+  });
+}
+
+//修改成功后传递事件
+function dialogChange() {
+  getTableData();
+}
+
+onMounted(() => {
+  const { query } = currentRoute;
+  if (query.idType) queryForm.idType = query.idType;
+  if (query.typeName) tabTitle = "标签编辑-" + query.typeName;
+
+  tempRoute = Object.assign({}, currentRoute);
+  if (tabTitle != "") setTagsViewTitle();
+});
+
+const queryForm = reactive({
+  keyWord: "",
+  idType: 0,
+});
+const {
+  tableData,
+  queryPage,
+  total,
+  loading,
+  getTableData,
+  tableHeight,
+  handleSearch, //搜索
+  refreshTableInfo, //刷新
+} = useTable(queryDesignTags, queryForm);
+</script>

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

@@ -0,0 +1,123 @@
+<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="name" label="标签组名称">
+              <el-input v-model.trim="formData.name" />
+            </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 {
+  addDesignFont,
+  getDesignTagType,
+  newDesignTagType,
+  updateDesignTagType,
+} from "@/api/design";
+
+let dialogVisible = ref(false);
+let dialogTitle = ref("");
+const formRef = ref<FormInstance>();
+const emit = defineEmits(["dialogChange"]);
+const formData = reactive({
+  name: "",
+  id: 0,
+});
+const rules = reactive({
+  name: [{ 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);
+        updateDesignTagType(postData).then((response) => {
+          dialogVisible.value = false;
+          if (response.httpCode == 200) {
+            emit("dialogChange");
+            ElMessage.success("操作成功");
+          }
+        });
+      } else {
+        //增加
+        const postData = JSON.stringify(formData);
+        newDesignTagType(postData).then((response) => {
+          dialogVisible.value = false;
+          if (response.httpCode == 200) {
+            emit("dialogChange");
+            ElMessage.success("操作成功");
+          }
+        });
+      }
+    }
+  });
+}
+
+function getItemData(item) {
+  const data = {
+    id: item,
+  };
+  getDesignTagType(data).then((response) => {
+    if (response.httpCode == 200) {
+      const data = response.data;
+      Object.assign(formData, { ...data });
+    }
+  });
+}
+
+/**  重置表单 */
+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/designTagType/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        @keyup.enter="handleSearch"
+        class="w200px mr5px"
+        v-model="queryForm.keyWord"
+        placeholder="关键字搜索"
+      />
+      <el-button type="primary" @click="handleSearch">
+        <i-ep-search />
+        搜索
+      </el-button>
+      <el-button @click="openDialog()" color="#11a983">
+        <i-ep-plus />
+        增加标签组
+      </el-button>
+      <el-button @click="toEditTag({ id: 0, name: '未分组' })" color="#11a983">
+        <i-ep-plus />
+        编辑未分组标签
+      </el-button>
+      <el-button type="primary" @click="refreshTableInfo">
+        <i-ep-refresh />
+      </el-button>
+    </div>
+    <div class="table-con">
+      <el-table
+        :max-height="tableHeight"
+        v-loading="loading"
+        :data="tableData"
+        highlight-current-row
+        border
+      >
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button link @click="openDialog(row.id)" type="primary">
+              <i-ep-edit />
+              编辑
+            </el-button>
+            <el-button link @click="handleDelete(row.id)" type="warning"
+              >删除
+            </el-button>
+            <el-button link @click="toEditTag(row)" type="success"
+              >编辑标签
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column type="index" label="#" width="50">
+          <template #default="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" width="250" label="标签组" />
+
+        <el-table-column prop="createTime" label="创建时间" width="155">
+          <template #default="{ row }">
+            <span v-if="row.createTime">
+              {{ $filters.getTime(row.createTime) }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryPage.pageIndex"
+        v-model:limit="queryPage.pageSize"
+        @pagination="getTableData"
+      />
+    </div>
+    <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import ChildDialog from "./compt/childDialog.vue";
+import { useTable } from "@/hooks/useTable";
+import {
+  deleteDesignTagType,
+  queryDesignTagType,
+  voidDesignFont,
+} from "@/api/design";
+import router from "@/router";
+
+let disableLock = ref("");
+const childDialog = ref<any>();
+
+function checkDisable() {}
+
+//增加编辑
+function openDialog(item?: any) {
+  childDialog.value.dialogVisible = true;
+  if (item) {
+    childDialog.value.dialogTitle = "编辑";
+    nextTick(() => {
+      childDialog.value.getItemData(item);
+    });
+  } else {
+    nextTick(() => {
+      childDialog.value.dialogTitle = "增加";
+      childDialog.value.resetForm();
+    });
+  }
+}
+
+//编辑标签
+function toEditTag(row) {
+  router.push({
+    path: "/baseInfo/designTag/" + row.id,
+    query: { idType: row.id, typeName: row.name },
+  });
+}
+
+//禁用删除
+function handleDelete(id) {
+  ElMessageBox.confirm(
+    "确认删除当前标签组?该组下的标签将被重置为未分类",
+    "警告",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  ).then(() => {
+    const postData = {
+      idDesignType: id,
+    };
+    deleteDesignTagType(postData).then((response) => {
+      if (response.httpCode == 200) {
+        ElMessage.success("操作成功");
+        getTableData();
+      }
+    });
+  });
+}
+
+//修改成功后传递事件
+function dialogChange() {
+  getTableData();
+}
+
+const queryForm = reactive({
+  keyWord: "",
+  voidFlag: 0,
+});
+watch(
+  () => disableLock.value,
+  (disableLock) => {
+    console.log(disableLock);
+    if (disableLock) {
+      queryForm.voidFlag = 1;
+      getTableData();
+    } else {
+      queryForm.voidFlag = 0;
+      getTableData();
+    }
+  }
+);
+const {
+  tableData,
+  queryPage,
+  total,
+  loading,
+  getTableData,
+  tableHeight,
+  handleSearch, //搜索
+  refreshTableInfo, //刷新
+} = useTable(queryDesignTagType, queryForm);
+</script>

src/views/design/designTemplate/index.vue

@@ -5,8 +5,21 @@
         @keyup.enter="handleSearch"
         class="w200px mr5px"
         v-model="queryForm.keyWord"
+        clearable
         placeholder="关键字搜索"
       />
+      <el-input
+        @keyup.enter="handleSearch"
+        class="w150px mr5px"
+        v-model="queryForm.productIdentity"
+        clearable
+        placeholder="产品ID"
+      />
+      <el-tag v-for="tag in queryForm.tags">{{ tag }}</el-tag>
+      <el-button plain type="warning" @click="handleSelectTags">按标签查询</el-button>
+      <el-button plain type="info" @click="queryForm.tags = []"
+        >清除标签
+      </el-button>
       <el-button type="primary" @click="handleSearch">
         <i-ep-search />
         搜索
@@ -45,6 +58,10 @@
               <i-ep-edit />
               缩略图
             </el-button>
+            <el-button link @click="handleSetTags(row.id)" type="success">
+              <i-ep-edit />
+              设置标签
+            </el-button>
             <el-button
               v-if="row.voidFlag == 0"
               link
@@ -67,6 +84,12 @@
           </template>
         </el-table-column>
         <el-table-column prop="templateName" label="模板名称" />
+        <el-table-column prop="productIdentity" label="产品ID" />
+        <el-table-column prop="tagList" width="250" label="模板标签">
+          <template #default="{ row }">
+            <el-tag v-for="tag in row.tagList"> {{ tag.tagName }}</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column prop="viewThumbPath" width="320" label="缩略图">
           <template #default="{ row }">
             <el-image
@@ -101,6 +124,13 @@
       />
     </div>
     <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
+    <el-dialog v-model="tagChooseVisible" title="选择标签" width="1000">
+      <choose-tags
+        :id-template="currentTemplateId"
+        @on-saved="handleSavedTag"
+        @on-selected="handleSelectedTag"
+      />
+    </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -111,9 +141,12 @@ import {
   voidDesignTemplate,
 } from "@/api/design";
 import ChildDialog from "./compt/childDialog.vue";
+import ChooseTags from "@/views/design/designTag/component/chooseTags.vue";
 
 const childDialog = ref<any>();
 const disableLock = ref("");
+const tagChooseVisible = ref(false);
+let currentTemplateId = 0;
 
 function generateUUID() {
   return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
@@ -134,6 +167,31 @@ function openDialog(item?: any) {
   }
 }
 
+//点击设置模板标签
+function handleSetTags(idTemplate) {
+  currentTemplateId = idTemplate;
+  tagChooseVisible.value = true;
+}
+
+function handleSelectTags() {
+  currentTemplateId = 0;
+  tagChooseVisible.value = true;
+}
+
+function handleSavedTag() {
+  handleSearch();
+  tagChooseVisible.value = false;
+}
+
+function handleSelectedTag(tags) {
+  queryForm.tags = [];
+  tags.forEach((x) => {
+    queryForm.tags.push(x.tagName);
+  });
+
+  tagChooseVisible.value = false;
+}
+
 function openDesignModule(item?: any) {
   //todo 转跳外部模板编辑地址
 
@@ -197,6 +255,8 @@ function dialogChange() {
 
 const queryForm = reactive({
   keyWord: "",
+  productIdentity: "",
+  tags: [],
   voidFlag: 0,
 });
 watch(

src/views/designFront/index-back.vue

@@ -0,0 +1,237 @@
+<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: 700px"
+      ></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([]);
+// todo 换ip
+// const designModuleUrl = "http://47.104.169.21:9191/?runMode=0";
+const designModuleUrl = import.meta.env.VITE_DESIGN_MODULE_URL + "?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 +
+    "&sessionId=" +
+    outerSessionId;
+};
+
+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/designFront/index.vue

@@ -1,120 +1,43 @@
 <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: 700px"
-      ></iframe>
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <span>测试模板  </span>
+          <el-select
+            v-model="currentTemplateId"
+            @change="handleChangeTemplate"
+            placeholder="请选择"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in templateList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="submitDesignOrder">
+            <i-ep-upload-filled />
+            提交测试单
+          </el-button>
+        </el-col>
+      </el-row>
     </div>
+
+    <iframe
+      id="iframe"
+      ref="iframe"
+      :src="iframeSrc"
+      style="width: 1200px; height: 700px"
+    ></iframe>
   </div>
 </template>
 <script setup lang="ts">
 import { TabsPaneContext } from "element-plus";
-import { getDesignFonts } from "@/api/design";
+import { getDesignFonts, queryDesignTemplates } from "@/api/design";
 import { getUserInfoApi } from "@/api/user";
 import { getToken } from "@/utils/js-cookie";
 
@@ -131,6 +54,9 @@ const products = ref([
   },
 ]);
 
+const templateList = ref([]);
+const currentTemplateId = ref(0);
+
 const bannerBgColorOptions = [
   { label: "红底条幅", color: "rgba(255,0,0,1)" },
   { label: "黄底条幅", color: "rgba(255,255,0,1)" },
@@ -168,18 +94,41 @@ let currentProduct = {};
 const activeName = ref("banner");
 
 onMounted(() => {
-  currentProduct = products.value[0];
-  iframeSrc.value =
-    designModuleUrl +
-    "&template=" +
-    currentProduct.templateId +
-    "&sessionId=" +
-    outerSessionId;
-
-  //后台获取上传的字体
+  //获取已经添加的模板
   const param = {
     voidFlag: 0,
   };
+  const queryPage = {
+    pageIndex: 1,
+    pageSize: 9999, //偷个懒算了
+  };
+  const queryData = {
+    params: JSON.stringify(param),
+    page: JSON.stringify(queryPage),
+  };
+
+  queryDesignTemplates(queryData).then((res) => {
+    if (res.httpCode == 200) {
+      res.data.forEach((x) => {
+        templateList.value.push({
+          label: x.templateName,
+          value: x.id,
+        });
+      });
+
+      if (res.data.length > 0) currentTemplateId.value = res.data[0].id;
+      if (currentTemplateId.value > 0)
+        iframeSrc.value =
+          designModuleUrl +
+          "&template=" +
+          currentTemplateId.value +
+          "&sessionId=" +
+          outerSessionId;
+    }
+  });
+
+  //后台获取上传的字体
+
   getDesignFonts(param).then((res) => {
     if (res.httpCode == 200) {
       res.data.forEach((x) => {
@@ -192,13 +141,11 @@ onMounted(() => {
   });
 });
 
-const handleChangeProduct = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab);
-  currentProduct = products.value.find((x) => x.name == tab.props.name);
+const handleChangeTemplate = (templateId) => {
   iframeSrc.value =
     designModuleUrl +
     "&template=" +
-    currentProduct.templateId +
+    templateId +
     "&sessionId=" +
     outerSessionId;
 };