@ebiz/designer-components 0.0.18-tj.1

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

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

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

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

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

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <t-input-number
+      v-model="value"
+      :decimalPlaces="item.decimalPlaces"
+      :theme="item.theme || 'normal'"
+      :placeholder="item.placeholder"
+      @change="onInputEvent"
+      :min="item.min"
+      :align="item.align"
+      :allowInputOverLimit="item.allowInputOverLimit"
+      :autoWidth="item.autoWidth || true"
+      :disabled="item.disabled"
+      :format="item.format"
+      :inputProps="item.inputProps"
+      :label="item.subLabel"
+      :largeNumber="item.largeNumber"
+      :max="item.max"
+      :readonly="item.readonly"
+      :size="item.size"
+      :status="item.status"
+      :step="item.step"
+      :suffix="item.suffix"
+      :tips="item.tips"
+    >
+      <template #label>
+        <div v-if="$props.label">
+          <slot name="label"></slot>
+        </div>
+      </template>
+
+      <template #suffix>
+        <div v-if="$props.suffix">
+          <slot name="suffix"></slot>
+        </div>
+      </template>
+    </t-input-number>
+  </div>
+</template>
+<script setup>
+
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = (val) => {
+  emit('input', val)
+}
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <t-radio-group
+      v-model="value"
+      :disabled="item.disabled"
+      :size="item.size"
+      :allow-uncheck="item.allowUncheck || false"
+      :variant="item.variant || 'outline'"
+      @change="onInputEvent"
+    >
+      <t-radio-button v-for="(o,index ) in item.options" :key="index" :disabled="o.disabled" :value="o.value" :readonly="item.readonly">
+        {{o.label }}
+      </t-radio-button>
+    </t-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+const value =defineModel<any>()
+defineProps(['item'])
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = (val: any) =>  {
+  emit('input',val)
+}
+</script>

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

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <t-select
+      v-model="value"
+      :multiple="item.multiple"
+      :disabled="item.disabled"
+      :remote="item.remote"
+      :placeholder="item.placeholder"
+      :filterable="item.filterable"
+      :multiple-limit="item.multipleLimit"
+      :clearable="item.clearable || true"
+      :autoWidth="item.autoWidth"
+      :autofocus="item.autofocus"
+      :borderless="item.borderless"
+      :collapsedItems="item.collapsedItems"
+      :creatable="item.creatable"
+      :empty="item.empty"
+      :filter="item.filter"
+      :keys="item.keys"
+      :label="item.subLabel || ''"
+      :loading="item.loading"
+      :loadingText="item.loadingText"
+      :max="item.max"
+      :minCollapsedNum="item.minCollapsedNum"
+      :panelBottomContent="item.panelBottomContent"
+      :panelTopContent="item.panelTopContent"
+      :popupProps="item.popupProps"
+      :prefixIcon="item.prefixIcon"
+      :readonly="item.readonly"
+      :reserveKeyword="item.reserveKeyword"
+      :scroll="item.scroll"
+      :selectInputProps="item.selectInputProps"
+      :showArrow="item.showArrow"
+      :size="item.size"
+      :status="item.status"
+      :suffix="item.suffix"
+      :suffixIcon="item.suffixIcon"
+      :tagInputProps="item.tagInputProps"
+      :tagProps="item.tagProps"
+      :tips="item.tips"
+      :valueDisplay="item.valueDisplay"
+      :valueType="item.valueType"
+      @search="remoteMethod"
+    >
+      <t-option
+        v-for="o in (item.remote ? options : item.options)"
+        :key="o.value"
+        :label="o.label"
+        :value="o.value"
+        :checkAll="o.checkAll"
+        :content="o.content"
+        clearable
+        :disabled="o.disabled"
+      >
+        <div v-if="$slots.default">
+          <slot></slot>
+        </div>
+      </t-option>
+    </t-select>
+  </div>
+</template>
+<script setup lang="ts">
+import {request} from "@/utils/request"
+import {onMounted, ref} from "vue";
+
+const value = defineModel<any>()
+const props = defineProps(['item'])
+
+const emit = defineEmits(['input'])
+const options = ref([])
+
+const onInputEvent = (val: any) => {
+  emit('input', val)
+}
+
+const remoteMethod = (query: string) => {
+  if (props.item.onSearch) {
+    props.item.onSearch(query).then((data: Array<any>) => {
+      options.value = data
+    })
+  } else if (props.item.remoteUrl == 'user') {
+    request.get({
+      url: '/user/search',
+      params: {
+        keyword: query,
+        value: value.value,
+      }
+    }).then(res => {
+      let userList = [];
+      for (let user of res.userDTOList.records) {
+        userList.push({
+          value: user.id,
+          label: user.nickname,
+        })
+      }
+      options.value = userList;
+    })
+  } else {
+    request.get({
+      url: props.item.remoteUrl,
+      params: {
+        keyword: query
+      }
+    }).then(res => {
+      if (props.item.render) {
+        options.value = props.item.render(res)
+      } else {
+        options.value = res
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  if (props.item.remoteUrl !== null && props.item.remoteUrl !== undefined && props.item.remoteUrl !== '') {
+    remoteMethod(props.item.value);
+  }
+})
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <t-switch
+      v-model="value"
+      :disabled="item.disabled"
+      :label="item.subLabel"
+      :loading="item.loading"
+      :size="item.size"
+      @change="onInputEvent">
+      <template v-slot:label="currentValue">{{ currentValue.value ? item.activeText : item.inactiveText }}</template>
+    </t-switch>
+  </div>
+</template>
+<script setup lang="ts">
+const value = defineModel<any>()
+defineProps(['item'])
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = (val: any) =>  {
+  emit('input',val)
+}
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div style="display: flex">
+    <div style="flex: 1;">
+      <form-text v-model="value.default" :item="item"></form-text>
+    </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-text v-model="value[language.key]" :item="item"></form-text>
+            </div>
+          </t-form-item>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import FormText from "./text.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 onEvent = (event, val) => {
+  emit(event, val)
+}
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <t-input
+      v-model="value"
+      :type="item.subtype"
+      :placeholder="item.placeholder"
+      :disabled="item.disabled"
+      :readonly="item.readonly"
+      :maxlength="item.maxlength"
+      :show-password="item.showPassword"
+      :label="item.subLabel"
+      :suffix="item.suffix"
+      :align="item.align"
+      :allow-input-over-max="item.allowInputOverMax"
+      :auto-width="item.autoWidth"
+      :autocomplete="item.autocomplete"
+      :autofocus="item.autofocus"
+      :borderless="item.borderless"
+      :clearable="item.clearable"
+      :format="item.format"
+      :input-class="item.inputClass"
+      :maxcharacter="item.maxcharacter"
+      :prefix-icon="item.prefixIcon"
+      :show-clear-icon-on-empty="item.showClearIconOnEmpty"
+      :showLimitNumber="item.showLimitNumber"
+      :size="item.size"
+      :spellCheck="item.spellCheck"
+      :status="item.status"
+      :suffixIcon="item.suffixIcon"
+      :tips="item.tips"
+      style="width: 100%"
+      @blur="(e) => { onEvent('blur', e); }"
+      @change="(e) => { onEvent('change', e); }"
+      @clear="(e) => { onEvent('clear', e); }"
+      @click="(e) => { onEvent('click', e); }"
+    />
+  </div>
+</template>
+
+<script setup>
+
+const value = defineModel()
+defineProps(['item'])
+
+const emit = defineEmits(['input', 'blue', 'change', 'clear', 'click'])
+
+const onEvent = (event, val) => {
+  emit(event, val)
+}
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div style="display: flex;">
+    <div style="flex: 1;">
+      <form-textarea 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-textarea v-model="value[language.key]" v-bind:item="item" @input="handleChange" />
+            </div>
+          </t-form-item>
+        </div>
+      </div>
+    </t-dialog>
+
+  </div>
+</template>
+<script setup lang="ts">
+import FormTextarea from "./textarea.vue";
+import { ref } from "vue";
+const value = defineModel<any>()
+defineProps(['item'])
+
+const emit = defineEmits(['input'])
+const multiSettingVisible = ref(false);
+// import {getLanguageList} from "../../../../api/language"
+const languages = []
+
+// 显示多语言设置
+const showMultiLanguageSetting = () => {
+  multiSettingVisible.value = true
+}
+
+const handleChange = (value: any, option: any) => {
+  emit('input', { value });
+}
+const onInputEvent = (val: any) => {
+  emit('input', val)
+}
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <t-textarea
+      v-model="value"
+      :placeholder="item.placeholder"
+      :disabled="item.disable"
+      :readonly="item.readonly"
+      :autosize="item.autosize || false"
+      :maxlength="item.maxlength"
+      :allowInputOverMax="item.allowInputOverMax"
+      :autofocus="item.autofocus"
+      :maxcharacter="item.maxcharacter"
+      :status="item.status"
+      :tips="item.tips"
+      @change="onInputEvent"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import EBizTips from './tips.vue';
+const value = defineModel<any>()
+defineProps(['item'])
+
+const emit = defineEmits(['input'])
+
+const onInputEvent = (val: any) =>  {
+      emit('input',val)
+}
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div style="display: flex">
+    <div style="flex: 1;">
+      <form-video 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-video 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 FormVideo from "./video.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>