@ebiz/designer-components 0.1.2 → 0.1.4

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

@@ -1,149 +1,149 @@
-<template>
-  <div>
-    <t-upload ref="uploadThumbRef" v-model="filesValue" :theme="item.theme || 'file'" :multiple="item.multiple || true"
-      class="upload-demo" :request-method="requestMethod" :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="valueChange"></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>()
-const props = defineProps(['item'])
-let filesValue = reactive([])
-
-if (value.value == "" || value.value == null) {
-  value.value = [];
-  filesValue = []
-} else if (value.value.length > 0) {
-  let files = [];
-  for (let file of value.value) {
-    if (typeof file === 'string') {
-      files.push({
-        name: file,
-        url: file,
-      })
-    } else {
-      files.push(file)
-    }
-  }
-  filesValue = files
-}
-console.log("filesValue", filesValue)
-watch(value, (newVal, oldValue) => {
-  if (value.value == "") {
-    filesValue = []
-  } else {
-    let files = [];
-    for (let file of value.value) {
-      if (typeof file === 'string') {
-        files.push({
-          name: file,
-          url: file,
-        })
-      } else {
-        files.push(file)
-      }
-    }
-    filesValue = files
-  }
-})
-const valueChange = (files: Array<any>) => {
-  if (files.length == 0) {
-    value.value = ""
-  } else {
-    let urls = [];
-    for (let file of files) {
-      urls.push({
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        url: file.url
-      })
-    }
-    value.value = urls
-  }
-}
-
-const uploadRef = ref(null)
-
-const emit = defineEmits(['input'])
-
-const onInputEvent = () => {
-  emit('input', value.value)
-}
-
-const requestMethod = (files: any) => {
-  let file = null;
-  if (props.item.multiple === false) {
-    file = files;
-  } else {
-    file = files[0];
-  }
-  console.log(file)
-  return new Promise<RequestMethodResponse>((resolve, reject) => {
-    // upload({
-    //   path: props.item.path || 'upload',
-    //   file: file,
-    //   onPercent: (res: any) => {
-    //     console.log("percent ", res)
-    //   },
-    //   onSuccess: (res: any) => {
-    //     file.url = res.url;
-    //     resolve({
-    //       status: "success",
-    //       response: {
-    //         name: file.name,
-    //         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="uploadThumbRef" v-model="filesValue" :theme="item.theme || 'file'" :multiple="item.multiple || true"
+      class="upload-demo" :request-method="requestMethod" :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="valueChange"></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>()
+const props = defineProps(['item'])
+let filesValue = reactive([])
+
+if (value.value == "" || value.value == null) {
+  value.value = [];
+  filesValue = []
+} else if (value.value.length > 0) {
+  let files = [];
+  for (let file of value.value) {
+    if (typeof file === 'string') {
+      files.push({
+        name: file,
+        url: file,
+      })
+    } else {
+      files.push(file)
+    }
+  }
+  filesValue = files
+}
+console.log("filesValue", filesValue)
+watch(value, (newVal, oldValue) => {
+  if (value.value == "") {
+    filesValue = []
+  } else {
+    let files = [];
+    for (let file of value.value) {
+      if (typeof file === 'string') {
+        files.push({
+          name: file,
+          url: file,
+        })
+      } else {
+        files.push(file)
+      }
+    }
+    filesValue = files
+  }
+})
+const valueChange = (files: Array<any>) => {
+  if (files.length == 0) {
+    value.value = ""
+  } else {
+    let urls = [];
+    for (let file of files) {
+      urls.push({
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        url: file.url
+      })
+    }
+    value.value = urls
+  }
+}
+
+const uploadRef = ref(null)
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = () => {
+  emit('input', value.value)
+}
+
+const requestMethod = (files: any) => {
+  let file = null;
+  if (props.item.multiple === false) {
+    file = files;
+  } else {
+    file = files[0];
+  }
+  console.log(file)
+  return new Promise<RequestMethodResponse>((resolve, reject) => {
+    // upload({
+    //   path: props.item.path || 'upload',
+    //   file: file,
+    //   onPercent: (res: any) => {
+    //     console.log("percent ", res)
+    //   },
+    //   onSuccess: (res: any) => {
+    //     file.url = res.url;
+    //     resolve({
+    //       status: "success",
+    //       response: {
+    //         name: file.name,
+    //         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/images-multi-language.vue

@@ -1,52 +1,52 @@
-<template>
-  <div style="display: flex">
-    <div style="flex: 1;">
-      <form-images v-model="value.default" v-bind:item="item" @input="handleChange" />
-    </div>
-    <div v-if="item.multiLanguage">
-      <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-images 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 FormImages from "./images.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-images v-model="value.default" v-bind:item="item" @input="handleChange" />
+    </div>
+    <div v-if="item.multiLanguage">
+      <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-images 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 FormImages from "./images.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/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>