@ebiz/designer-components 0.0.18

package/src/components/ebiz-form/components/date-range-panel.vue

@@ -0,0 +1,52 @@
+<!--
+  - @author eBIZ Team <dev@jungo.com.cn>
+  - @copyright  Copyright (c) , ShenZhen JunGO Technology Co., Ltd. All rights reserved.
+  - @license  Commercial authorization, unauthorized use and modification are prohibited
+  - @url www.jungo.com.cn
+  -->
+
+<template>
+  <div>
+    <t-date-range-picker-panel
+      v-model="value"
+      :allowInput="item.allowInput"
+      :clearable="item.clearable || true"
+      :borderless="item.borderless"
+      :disableDate="item.disableDate"
+      :disabled="item.disabled"
+      :enableTimePicker="item.enableTimePicker"
+      :firstDayOfWeek="item.firstDayOfWeek"
+      :format="item.format"
+      :inputProps="item.inputProps"
+      :label="item.subLabel"
+      :mode="item.mode"
+      :needConfirm="item.needConfirm"
+      :placeholder="item.placeholder"
+      :popupProps="item.popupProps"
+      :prefixIcon="item.prefixIcon"
+      :presets="item.presets"
+      :presetsPlacement="item.presetsPlacement"
+      :selectInputProps="item.selectInputProps"
+      :size="item.size"
+      :status="item.status"
+      :suffixIcon="item.suffixIcon"
+      :timePickerProps="item.timePickerProps"
+      :tips="item.tips"
+      :valueDisplay="item.valueDisplay"
+      :valueType="item.valueType"
+      :cancelRangeSelectLimit="item.cancelRangeSelectLimit"
+      :rangeInputProps="item.rangeInputProps"
+      :separator="item.separator"
+      @change="onChange" />
+  </div>
+</template>
+<script setup>
+const value =defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['change'])
+
+const onChange = (val) =>  {
+  emit('change',val)
+}
+</script>

package/src/components/ebiz-form/components/date-range.vue

@@ -0,0 +1,56 @@
+<!--
+  - @author eBIZ Team <dev@jungo.com.cn>
+  - @copyright  Copyright (c) , ShenZhen JunGO Technology Co., Ltd. All rights reserved.
+  - @license  Commercial authorization, unauthorized use and modification are prohibited
+  - @url www.jungo.com.cn
+  -->
+
+<template>
+  <div>
+    <t-date-range-picker
+      v-model="value"
+      :allowInput="item.allowInput"
+      :clearable="item.clearable || true"
+      :borderless="item.borderless"
+      :disableDate="item.disableDate"
+      :disabled="item.disabled"
+      :enableTimePicker="item.enableTimePicker"
+      :firstDayOfWeek="item.firstDayOfWeek"
+      :format="item.format"
+      :inputProps="item.inputProps"
+      :label="item.subLabel"
+      :mode="item.mode"
+      :needConfirm="item.needConfirm"
+      :placeholder="item.placeholder"
+      :popupProps="item.popupProps"
+      :prefixIcon="item.prefixIcon"
+      :presets="item.presets"
+      :presetsPlacement="item.presetsPlacement"
+      :selectInputProps="item.selectInputProps"
+      :size="item.size"
+      :status="item.status"
+      :suffixIcon="item.suffixIcon"
+      :timePickerProps="item.timePickerProps"
+      :tips="item.tips"
+      :valueDisplay="item.valueDisplay"
+      :valueType="item.valueType"
+      :cancelRangeSelectLimit="item.cancelRangeSelectLimit"
+      :rangeInputProps="item.rangeInputProps"
+      :separator="item.separator"
+
+
+      @change="onChange" />
+  </div>
+</template>
+<script setup>
+import { DateRangePicker as TDateRangePicker } from 'tdesign-vue-next'
+
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['change'])
+
+const onChange = (val) =>  {
+  emit('change',val)
+}
+</script>

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

@@ -0,0 +1,52 @@
+<!--
+  - @author eBIZ Team <dev@jungo.com.cn>
+  - @copyright  Copyright (c) , ShenZhen JunGO Technology Co., Ltd. All rights reserved.
+  - @license  Commercial authorization, unauthorized use and modification are prohibited
+  - @url www.jungo.com.cn
+  -->
+
+<template>
+  <div>
+    <t-date-picker
+      v-model="value"
+      :allowInput="item.allowInput"
+      :clearable="item.clearable || true"
+      :borderless="item.borderless"
+      :disableDate="item.disableDate"
+      :disabled="item.disabled"
+      :enableTimePicker="item.enableTimePicker"
+      :firstDayOfWeek="item.firstDayOfWeek"
+      :format="item.format"
+      :inputProps="item.inputProps"
+      :label="item.subLabel"
+      :mode="item.mode"
+      :needConfirm="item.needConfirm"
+      :placeholder="item.placeholder"
+      :popupProps="item.popupProps"
+      :prefixIcon="item.prefixIcon"
+      :presets="item.presets"
+      :presetsPlacement="item.presetsPlacement"
+      :selectInputProps="item.selectInputProps"
+      :size="item.size"
+      :status="item.status"
+      :suffixIcon="item.suffixIcon"
+      :timePickerProps="item.timePickerProps"
+      :tips="item.tips"
+      :valueDisplay="item.valueDisplay"
+      :valueType="item.valueType"
+
+      @change="onChange" />
+  </div>
+</template>
+<script setup>
+import { defineProps, defineEmits, defineModel } from 'vue'
+import { DatePicker as TDatePicker } from 'tdesign-vue-next'
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['change'])
+
+const onChange = (val) =>  {
+  emit('change',val)
+}
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>
+      <!-- <t-tabs v-model="tab">
+        <t-tab-panel v-for="(language, index) in languages" :value="language.key" :label="language.name">
+          <div style="margin-top: 10px;">
+            <form-editor v-model="value[language.key]" data_source="article" v-bind:item="item" />
+          </div>
+        </t-tab-panel>
+      </t-tabs> -->
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import '@wangeditor/editor/dist/css/style.css' // 引入 css
+// import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+
+// import FormEditor from "./editor.vue";
+// // import {getLanguageList} from "../../../../api/language"
+
+// defineProps(['content', 'data_source', 'onChangeContent', 'value', 'item'])
+
+// const value = defineModel<any>()
+// const tab = ref('default')
+// const multiSettingVisible = ref(false);
+// const languages = []
+
+// // 显示多语言设置
+// const showMultiLanguageSetting = () => {
+//   multiSettingVisible.value = true
+//   tab.value = "default"
+// }
+
+// let emit = defineEmits(['input'])
+
+// const handleChange = () => {
+//   emit('input', { value });
+// }
+
+// onMounted(() => {
+// })
+
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div style="border: 1px solid #efefef">
+    <!--    <div ref="editorElemRef" style="text-align: left; z-index: 1"/>-->
+    <!-- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+    <Editor style="height: 500px; overflow-y: hidden;" v-model="value" :defaultConfig="editorConfig" :mode="mode"
+      @onCreated="handleCreated" /> -->
+  </div>
+</template>
+
+<script setup>
+// import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+
+// import { upload } from "../../../utils/upload"
+
+// defineProps(['content', 'data_source', 'onChangeContent', 'value', 'item'])
+
+// const handleCreated = (editor) => {
+//   editorRef.value = editor // 记录 editor 实例，重要！
+// }
+
+// const value = defineModel()
+
+// let editorRef = shallowRef()
+// const mode = ref('default')
+
+
+// const toolbarConfig = {}
+// const editorConfig = {
+//   placeholder: '请输入内容...',
+//   MENU_CONF: {
+//     uploadImage: {
+//       customUpload(file, insertFn) {  // TS 语法
+//         upload({
+//           path: 'editor',
+//           file: {
+//             name: file.name,
+//             raw: file
+//           },
+//           onSuccess: (res) => {
+//             insertFn(res.url, '', '');
+//           }
+//         })
+//       },
+//     },
+//     uploadVideo: {
+//       customUpload(file, insertFn) {  // TS 语法
+//         upload({
+//           path: 'video',
+//           file: {
+//             name: file.name,
+//             raw: file
+//           },
+//           onSuccess: (res) => {
+//             insertFn(res.url, '', '');
+//           }
+//         })
+//       },
+//     }
+//   }
+// }
+
+// // 组件销毁时，也及时销毁编辑器
+// onBeforeUnmount(() => {
+//   const editor = editorRef.value
+//   if (editor == null) return
+//   editor.destroy()
+// })
+
+// onMounted(() => {
+// })
+
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div style="display: flex">
+    <div style="flex: 1;">
+      <form-file 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-file 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"
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['input', 'blue', 'change', 'clear', 'click'])
+const multiSettingVisible = ref(false);
+
+// import {getLanguageList} from "../../../../api/language"
+import FormFile from "./file.vue";
+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/file.vue

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>