feat:状态-图片

src/views/components/PenProps.vue

@@ -216,22 +216,54 @@
             "
           >
             <t-divider style="margin: -8px 0" />
-            <div class="form-item px-16" style="margin-top: -12px">
-              <label>状态</label>
-              <t-select
-                v-model="data.pen.showChild"
-                placeholder="状态"
-                @change="changeValue('showChild')"
-                style="width: 150px"
-              >
-                <t-option
-                  v-for="(a, index) in data.pen.children"
-                  :key="index"
-                  :value="index"
+            <div>
+              <div class="form-item px-16" style="margin-top: -12px">
+                <label>状态</label>
+                <t-select
+                  v-model="data.pen.showChild"
+                  placeholder="状态"
+                  @change="changeValue('showChild')"
+                  style="width: 150px"
                 >
-                  状态{{ index + 1 }}</t-option
+                  <t-option
+                    v-for="(a, index) in data.pen.children"
+                    :key="index"
+                    :value="index"
+                  >
+                    状态{{ index + 1 }}</t-option
+                  >
+                </t-select>
+              </div>
+              <div v-if="data.childPen.image" class="px-16 py-8">
+                <t-upload
+                  ref="childUploadRef"
+                  v-model="data.childImages"
+                  action="/api/image/upload"
+                  theme="image"
+                  accept="image/*"
+                  :headers="headers"
+                  :data="updataData"
+                  :before-upload="beforeUpload"
+                  draggable
+                  @success="fileChildSuccessed"
                 >
-              </t-select>
+                  <template #fileListDisplay>
+                    <div style="z-index: 20">
+                      <a class="mr-4" @click="childUpload"> 点击上传 </a>
+                      / 拖拽图片到此区域
+                    </div>
+                  </template>
+                </t-upload>
+              </div>
+              <div v-if="data.childPen.image" class="form-item px-16">
+                <label style="width: 30px; color: var(--color)">Url：</label>
+                <t-input
+                  class="w-full"
+                  placeholder="图片地址"
+                  v-model.number="data.childPen.image"
+                  @change="changeChildValue('image')"
+                />
+              </div>
             </div>
           </template>
           <t-collapse
@@ -1464,12 +1496,14 @@ const updataData = {
 };
 
 const uploadRef = ref();
+const childUploadRef = ref();
 
 const data = reactive<any>({
   tab: 1,
   pen: {},
   rect: {},
   key: s8(),
+  childPen: {},
 });
 
 const { selections } = useSelection();
@@ -1611,6 +1645,14 @@ function initPenData() {
   data.pen.shadow = !!data.pen.shadowColor;
 
   getRect();
+  if(data.pen.name === 'combine' && data.pen.showChild !== undefined){
+    data.childPen = meta2d.store.pens[data.pen.children[data.pen.showChild]];
+    data.childImages = [
+      {
+        url: data.childPen.image,
+      },
+    ];
+  }
 }
 
 const watcher = watch(() => selections.pen.id, initPenData);
@@ -1667,6 +1709,14 @@ const changeValue = (prop: string) => {
     }
     return;
   }
+  if(prop === 'showChild'){
+    data.childPen = meta2d.store.pens[data.pen.children[data.pen.showChild]];
+    data.childImages = [
+      {
+        url: data.childPen.image,
+      },
+    ];
+  }
   updatePen(data.pen, prop);
   selections.pen[prop] = getter(data.pen, prop);
   if (prop === 'iframe') {
@@ -1768,6 +1818,29 @@ const fileRemoved = () => {
   // data.background = [];
 };
 
+const fileChildSuccessed = async (content: any) => {
+  data.childPen.image = content.response.url || `/file${content.response.filename}`;
+  updatePen(data.childPen, 'image');
+  meta2d.canvas.canvasImage.init();
+  meta2d.canvas.canvasImageBottom.init();
+  meta2d.render();
+};
+
+const childUpload = () => {
+  childUploadRef.value.triggerUpload();
+};
+
+const changeChildValue = (prop: string) => {
+  updatePen(data.childPen, prop);
+  if(prop === 'image'){
+    data.childImages = [
+      {
+        url: data.childPen.image,
+      },
+    ];
+  }
+};
+
 const upload = () => {
   uploadRef.value.triggerUpload();
 };
@@ -1898,5 +1971,9 @@ onUnmounted(() => {
       font-weight: 700;
       color: var(--color-title);
   }
+
+  .t-upload__dragger-btns{
+    display: none !important;
+  }
 }
 </style>