@ebiz/designer-components 0.0.18-beta.2 → 0.0.18-beta.3

package/src/components/ebiz-form/components/images.vue

@@ -1,129 +1,129 @@
-<template>
-  <div>
-    <t-upload ref="uploadRef" v-model="imagesValue" class="avatar-uploader" :multiple="true"
-      :request-method="requestMethod" :theme="item.theme || 'image'" :abridgeName="item.abridgeName"
-      :accept="item.accept" :allowUploadDuplicateFile="item.allowUploadDuplicateFile" :disabled="item.disabled"
-      :dragContent="item.dragContent" :draggable="item.draggable" :fileListDisplay="item.fileListDisplay"
-      :files="item.files" :format="item.format" :max="item.max" :mockProgressDuration="item.mockProgressDuration"
-      :placeholder="item.placeholder" :showImageFileName="item.showImageFileName" :showThumbnail="item.showThumbnail"
-      :showUploadProgress="item.showUploadProgress" :sizeLimit="item.sizeLimit" :status="item.status" :tips="item.tips"
-      :uploadPastedFiles="item.uploadPastedFiles" @change="imgChange">
-    </t-upload>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue"
-// import {upload} from "../../../../utils/upload"
-import { RequestMethodResponse } from "tdesign-vue-next";
-
-const value = defineModel<any>()
-let imagesValue = reactive([])
-
-if (value.value == "" || value.value == null) {
-  value.value = [];
-  imagesValue = []
-} else if (value.value.length > 0) {
-  let images = [];
-  for (let url of value.value) {
-    images.push({
-      url: url,
-    })
-  }
-  imagesValue = images
-}
-watch(value, (newVal, oldValue) => {
-  console.log(newVal)
-  if (value.value == "") {
-    imagesValue = []
-  } else {
-    let images = [];
-    for (let url of value.value) {
-      images.push({
-        url: url,
-      })
-    }
-    imagesValue = images
-  }
-})
-const imgChange = (files: Array<any>) => {
-  console.log(files)
-  if (files.length == 0) {
-    value.value = ""
-  } else {
-    let urls = [];
-    for (let file of files) {
-      urls.push(file.url)
-    }
-    value.value = urls
-  }
-}
-
-const props = defineProps(['item'])
-
-const uploadRef = ref(null)
-
-const emit = defineEmits(['input'])
-
-const onInputEvent = () => {
-  emit('input', value.value)
-}
-
-const requestMethod = (files: any) => {
-  let file = files[0];
-  return new Promise<RequestMethodResponse>((resolve, reject) => {
-    // upload({
-    //   path: props.item.path || 'upload',
-    //   file: file,
-    //   onPercent: (res: any) => {
-    //     console.log("percent ", res)
-    //   },
-    //   onSuccess: (res: any) => {
-    //     resolve({
-    //       status: "success",
-    //       response: {
-    //         url: res.url
-    //       }
-    //     });
-    //     onInputEvent()
-    //   },
-    //   onFail: () => {
-
-    //   }
-    // })
-  })
-}
-</script>
-
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  min-width: 50px;
-  min-height: 50px;
-  max-height: 178px;
-  line-height: 50px;
-  max-width: 80%;
-  text-align: center;
-}
-
-.avatar {
-  min-width: 50px;
-  min-height: 50px;
-  max-height: 178px;
-  max-width: 80%;
-  display: inline;
-}
-</style>
+<template>
+  <div>
+    <t-upload ref="uploadRef" v-model="imagesValue" class="avatar-uploader" :multiple="true"
+      :request-method="requestMethod" :theme="item.theme || 'image'" :abridgeName="item.abridgeName"
+      :accept="item.accept" :allowUploadDuplicateFile="item.allowUploadDuplicateFile" :disabled="item.disabled"
+      :dragContent="item.dragContent" :draggable="item.draggable" :fileListDisplay="item.fileListDisplay"
+      :files="item.files" :format="item.format" :max="item.max" :mockProgressDuration="item.mockProgressDuration"
+      :placeholder="item.placeholder" :showImageFileName="item.showImageFileName" :showThumbnail="item.showThumbnail"
+      :showUploadProgress="item.showUploadProgress" :sizeLimit="item.sizeLimit" :status="item.status" :tips="item.tips"
+      :uploadPastedFiles="item.uploadPastedFiles" @change="imgChange">
+    </t-upload>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue"
+// import {upload} from "../../../../utils/upload"
+import { RequestMethodResponse } from "tdesign-vue-next";
+
+const value = defineModel<any>()
+let imagesValue = reactive([])
+
+if (value.value == "" || value.value == null) {
+  value.value = [];
+  imagesValue = []
+} else if (value.value.length > 0) {
+  let images = [];
+  for (let url of value.value) {
+    images.push({
+      url: url,
+    })
+  }
+  imagesValue = images
+}
+watch(value, (newVal, oldValue) => {
+  console.log(newVal)
+  if (value.value == "") {
+    imagesValue = []
+  } else {
+    let images = [];
+    for (let url of value.value) {
+      images.push({
+        url: url,
+      })
+    }
+    imagesValue = images
+  }
+})
+const imgChange = (files: Array<any>) => {
+  console.log(files)
+  if (files.length == 0) {
+    value.value = ""
+  } else {
+    let urls = [];
+    for (let file of files) {
+      urls.push(file.url)
+    }
+    value.value = urls
+  }
+}
+
+const props = defineProps(['item'])
+
+const uploadRef = ref(null)
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = () => {
+  emit('input', value.value)
+}
+
+const requestMethod = (files: any) => {
+  let file = files[0];
+  return new Promise<RequestMethodResponse>((resolve, reject) => {
+    // upload({
+    //   path: props.item.path || 'upload',
+    //   file: file,
+    //   onPercent: (res: any) => {
+    //     console.log("percent ", res)
+    //   },
+    //   onSuccess: (res: any) => {
+    //     resolve({
+    //       status: "success",
+    //       response: {
+    //         url: res.url
+    //       }
+    //     });
+    //     onInputEvent()
+    //   },
+    //   onFail: () => {
+
+    //   }
+    // })
+  })
+}
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  min-width: 50px;
+  min-height: 50px;
+  max-height: 178px;
+  line-height: 50px;
+  max-width: 80%;
+  text-align: center;
+}
+
+.avatar {
+  min-width: 50px;
+  min-height: 50px;
+  max-height: 178px;
+  max-width: 80%;
+  display: inline;
+}
+</style>

package/src/components/ebiz-form/components/img-multi-language.vue

@@ -1,51 +1,51 @@
-<template>
-  <div style="display: flex">
-    <div style="flex: 1;">
-      <form-img v-model="value.default" v-bind:item="item" @input="handleChange" />
-    </div>
-    <div v-if="item.multiLanguage" style="margin-left: 0px;">
-      <t-button @click="showMultiLanguageSetting" size="small" theme="primary" variant="text">{{
-        $t("form.multiLanguageSetting") }}</t-button>
-    </div>
-
-    <t-dialog v-model:visible="multiSettingVisible" :header="item.label" width="800px" :confirm-btn="null"
-      cancel-btn="关闭">
-      <div>
-        <div v-for="(language, index) in languages" style="margin-bottom: 10px; width: 100%;">
-          <t-form-item :key="index" :label="language.name" label-width="150px">
-            <div style="width: 100%">
-              <form-img v-model="value[language.key]" v-bind:item="item" @input="handleChange" />
-            </div>
-          </t-form-item>
-        </div>
-      </div>
-    </t-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import FormImg from "./img.vue";
-const value = defineModel()
-defineProps(['item'])
-
-const emit = defineEmits(['input', 'blue', 'change', 'clear', 'click'])
-const multiSettingVisible = ref(false);
-
-// import {getLanguageList} from "../../../../api/language"
-const languages = []
-// 显示多语言设置
-const showMultiLanguageSetting = () => {
-  multiSettingVisible.value = true
-}
-
-const handleChange = (value, option) => {
-  emit('input', { value });
-}
-
-const onEvent = (event, val) => {
-  emit(event, val)
-}
-</script>
-
-<style lang="less" scoped></style>
+<template>
+  <div style="display: flex">
+    <div style="flex: 1;">
+      <form-img v-model="value.default" v-bind:item="item" @input="handleChange" />
+    </div>
+    <div v-if="item.multiLanguage" style="margin-left: 0px;">
+      <t-button @click="showMultiLanguageSetting" size="small" theme="primary" variant="text">{{
+        $t("form.multiLanguageSetting") }}</t-button>
+    </div>
+
+    <t-dialog v-model:visible="multiSettingVisible" :header="item.label" width="800px" :confirm-btn="null"
+      cancel-btn="关闭">
+      <div>
+        <div v-for="(language, index) in languages" style="margin-bottom: 10px; width: 100%;">
+          <t-form-item :key="index" :label="language.name" label-width="150px">
+            <div style="width: 100%">
+              <form-img v-model="value[language.key]" v-bind:item="item" @input="handleChange" />
+            </div>
+          </t-form-item>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import FormImg from "./img.vue";
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['input', 'blue', 'change', 'clear', 'click'])
+const multiSettingVisible = ref(false);
+
+// import {getLanguageList} from "../../../../api/language"
+const languages = []
+// 显示多语言设置
+const showMultiLanguageSetting = () => {
+  multiSettingVisible.value = true
+}
+
+const handleChange = (value, option) => {
+  emit('input', { value });
+}
+
+const onEvent = (event, val) => {
+  emit(event, val)
+}
+</script>
+
+<style lang="less" scoped></style>

package/src/components/ebiz-form/components/img.vue

@@ -1,129 +1,129 @@
-<template>
-  <div>
-    <t-upload
-      ref="uploadRef"
-      v-model="imgValue"
-      :request-method="requestMethod"
-      theme="image"
-      :abridgeName="item.abridgeName"
-      :accept="item.accept"
-      :allowUploadDuplicateFile="item.allowUploadDuplicateFile"
-      :disabled="item.disabled"
-      :dragContent="item.dragContent"
-      :draggable="item.draggable"
-      :fileListDisplay="item.fileListDisplay"
-      :files="item.files"
-      :format="item.format"
-      :max="item.max"
-      :mockProgressDuration="item.mockProgressDuration"
-      :placeholder="item.placeholder"
-      :showImageFileName="item.showImageFileName"
-      :showThumbnail="item.showThumbnail"
-      :showUploadProgress="item.showUploadProgress"
-      :sizeLimit="item.sizeLimit"
-      :status="item.status"
-      :tips="item.tips"
-      :uploadPastedFiles="item.uploadPastedFiles"
-      @change="imgChange"
-    >
-    </t-upload>
-  </div>
-</template>
-<script setup lang="ts">
-import {reactive, ref, watch} from "vue"
-// import {upload} from "../../../../utils/upload"
-import {RequestMethodResponse} from "tdesign-vue-next";
-const props = defineProps(['item'])
-
-const value = defineModel<any>()
-let imgValue = reactive([])
-if (value.value !== "") {
-  imgValue = [{
-    url: value.value
-  }]
-}
-watch(value, (newVal, oldValue) => {
-  if (value.value !== "") {
-    imgValue = [{
-      url: value.value
-    }]
-  } else {
-    imgValue = [];
-  }
-})
-const imgChange = (files: Array<any>) => {
-  if( files.length == 0 ){
-    value.value = ""
-  }else{
-    value.value = files[0].url
-  }
-}
-
-const uploadRef = ref(null)
-
-const emit = defineEmits(['input'])
-
-const onInputEvent = () => {
-  emit('input', value.value)
-}
-
-const requestMethod = (file: any) => {
-  return new Promise<RequestMethodResponse>((resolve, reject) => {
-    // TODO 上传图片实现
-    
-    // upload({
-    //   path: props.item.path || 'upload',
-    //   file: file,
-    //   onPercent: () => {
-    //   },
-    //   onSuccess: (res: any) => {
-    //     resolve({
-    //       status: "success",
-    //       response: {
-    //         url: res.url
-    //       }
-    //     });
-    //     onInputEvent()
-    //   },
-    //   onFail: () => {
-
-    //   }
-    // })
-  })
-}
-
-</script>
-
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  min-width: 50px;
-  min-height: 50px;
-  max-height: 178px;
-  line-height: 50px;
-  max-width: 80%;
-  text-align: center;
-}
-
-.avatar {
-  min-width: 50px;
-  min-height: 50px;
-  max-height: 178px;
-  max-width: 80%;
-  display: inline;
-}
-</style>
+<template>
+  <div>
+    <t-upload
+      ref="uploadRef"
+      v-model="imgValue"
+      :request-method="requestMethod"
+      theme="image"
+      :abridgeName="item.abridgeName"
+      :accept="item.accept"
+      :allowUploadDuplicateFile="item.allowUploadDuplicateFile"
+      :disabled="item.disabled"
+      :dragContent="item.dragContent"
+      :draggable="item.draggable"
+      :fileListDisplay="item.fileListDisplay"
+      :files="item.files"
+      :format="item.format"
+      :max="item.max"
+      :mockProgressDuration="item.mockProgressDuration"
+      :placeholder="item.placeholder"
+      :showImageFileName="item.showImageFileName"
+      :showThumbnail="item.showThumbnail"
+      :showUploadProgress="item.showUploadProgress"
+      :sizeLimit="item.sizeLimit"
+      :status="item.status"
+      :tips="item.tips"
+      :uploadPastedFiles="item.uploadPastedFiles"
+      @change="imgChange"
+    >
+    </t-upload>
+  </div>
+</template>
+<script setup lang="ts">
+import {reactive, ref, watch} from "vue"
+// import {upload} from "../../../../utils/upload"
+import {RequestMethodResponse} from "tdesign-vue-next";
+const props = defineProps(['item'])
+
+const value = defineModel<any>()
+let imgValue = reactive([])
+if (value.value !== "") {
+  imgValue = [{
+    url: value.value
+  }]
+}
+watch(value, (newVal, oldValue) => {
+  if (value.value !== "") {
+    imgValue = [{
+      url: value.value
+    }]
+  } else {
+    imgValue = [];
+  }
+})
+const imgChange = (files: Array<any>) => {
+  if( files.length == 0 ){
+    value.value = ""
+  }else{
+    value.value = files[0].url
+  }
+}
+
+const uploadRef = ref(null)
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = () => {
+  emit('input', value.value)
+}
+
+const requestMethod = (file: any) => {
+  return new Promise<RequestMethodResponse>((resolve, reject) => {
+    // TODO 上传图片实现
+    
+    // upload({
+    //   path: props.item.path || 'upload',
+    //   file: file,
+    //   onPercent: () => {
+    //   },
+    //   onSuccess: (res: any) => {
+    //     resolve({
+    //       status: "success",
+    //       response: {
+    //         url: res.url
+    //       }
+    //     });
+    //     onInputEvent()
+    //   },
+    //   onFail: () => {
+
+    //   }
+    // })
+  })
+}
+
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  min-width: 50px;
+  min-height: 50px;
+  max-height: 178px;
+  line-height: 50px;
+  max-width: 80%;
+  text-align: center;
+}
+
+.avatar {
+  min-width: 50px;
+  min-height: 50px;
+  max-height: 178px;
+  max-width: 80%;
+  display: inline;
+}
+</style>