1.1

标签

src/configs/background.ts

@@ -1,6 +1,6 @@
 export const TransparentFill = 'rgba(0,0,0,0)'
 export const MinSize = 100
-export const MaxSize = 3000
+export const MaxSize = 30000
 export const Padding = 50000
 
 export const DesignUnitMode = [

src/store/modules/template.ts

@@ -24,6 +24,7 @@ interface UpdateElementData {
 export interface TemplatesState {
     templateId: string
     templateName: string
+    productIdentity: []
     templates: Template[]
     templateIndex: number
     templateCanvas: Map<string, StaticCanvas>
@@ -34,6 +35,7 @@ export const useTemplatesStore = defineStore('Templates', {
         // theme: theme, // 主题样式
         templateId: '',
         templateName: '空白模板',
+        productIdentity: [],
         templates: Templates, // 页面页面数据
         templateIndex: 0, // 当前页面索引
         templateCanvas: new Map()
@@ -234,6 +236,10 @@ export const useTemplatesStore = defineStore('Templates', {
             this.templateName = templateName
         },
 
+        setProductIdentity(productIdentity: []) {
+            this.productIdentity = productIdentity;
+        },
+
         setTemplateIndex(index: number) {
             this.templateIndex = index
         },

src/views/Editor/CanvasCenter/index.vue

@@ -73,6 +73,7 @@ const getTemplateDetail = async (pk: number) => {
   if (res.httpCode == 200) {
     try {
       templatesStore.setTemplateName(res.data.templateName)
+      templatesStore.setProductIdentity(res.data.productIdentity ? res.data.productIdentity.split(",") : [])
       const data = res.data.jsonContent
       await templatesStore.changeTemplate(JSON.parse(data))
     } catch (e) {
@@ -111,6 +112,7 @@ const getPreviewTemplateDetail = async (pk: number, templateParams: any, outerSe
   if (res.httpCode == 200) {
     try {
       templatesStore.setTemplateName(res.data.templateName)
+      templatesStore.setProductIdentity(res.data.productIdentity ? res.data.productIdentity.split(",") : [])
       const data = res.data.jsonContent
       await templatesStore.changeTemplate(JSON.parse(data))
     } catch (e) {

src/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue

@@ -194,7 +194,7 @@
       </el-card>
 
       <!--      图片-->
-      <el-card v-if="textPermDisplay"
+      <el-card v-if="imgPermDisplay"
                :body-style="{background: '#f8f8f8'}"
                style="max-width: 100%; border-radius: 8px;">
 

src/views/Editor/CanvasRight/index.vue

@@ -48,7 +48,34 @@
         <el-row>
           <el-col :span="24">
             <el-form-item prop="templateName" label="模板名称">
-              <el-input v-model="formData.templateName"/>
+              <el-input v-model.trim="formData.templateName"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item prop="productIdentities" label="产品ID">
+              <el-tag
+                  v-for="tag in productIdentities"
+                  :key="tag"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleDeleteProductId(tag)"
+              >
+                {{ tag }}
+              </el-tag>
+              <el-input
+                  v-if="productInputVisible"
+                  ref="productInputRef"
+                  v-model.trim="productInputValue"
+                  style="width: 80px !important;"
+                  size="small"
+                  @keyup.enter="handleProductInputConfirm"
+                  @blur="handleProductInputConfirm"
+              />
+              <el-button v-else size="small" @click="showProductInput">
+                + 产品ID
+              </el-button>
             </el-form-item>
           </el-col>
         </el-row>
@@ -94,15 +121,41 @@ const exportFileDialog = ref(false)
 
 const showSaveDlg = ref(false)
 const formRef = ref<FormInstance>();
+
+const productIdentities = ref([])
+const productInputVisible = ref(false)
+const productInputRef = ref()
+const productInputValue = ref("")
+
 const rules = reactive({
   templateName: [{required: true, message: "请输入名称", trigger: "blur"}],
 });
 const formData = reactive({
   templateName: '',
+  productIdentity: '',
   jsonContent: '',
   id: 0,
 });
 
+const showProductInput = () => {
+  productInputVisible.value = true
+  nextTick(() => {
+    productInputRef.value!.input!.focus()
+  })
+}
+
+const handleDeleteProductId = (tag) => {
+  productIdentities.value.splice(productIdentities.value.indexOf(tag), 1)
+}
+
+const handleProductInputConfirm = () => {
+  if (productInputValue.value) {
+    productIdentities.value.push(productInputValue.value)
+  }
+  productInputVisible.value = false
+  productInputValue.value = ''
+}
+
 const exportFileHide = () => {
   exportFileDialog.value = false
 }
@@ -141,6 +194,7 @@ const onSaveTemplate = () => {
 
 
   formData.templateName = templatesStore.templateName
+  productIdentities.value = templatesStore.productIdentity
   showSaveDlg.value = true
 }
 
@@ -148,6 +202,7 @@ const handleSubmit = () => {
   formRef.value.validate((valid: any) => {
     if (valid) {
       formData.id = templatesStore.templateId
+      formData.productIdentity = productIdentities.value ? productIdentities.value.join(",") : ""
       formData.jsonContent = getJSONData()
 
       updateDesignTemplate(JSON.stringify(formData)).then((res) => {