@ctzy-web-client/plugin-component-vue 1.0.0

package/src/data-form/form-components/bwa-rich-text.vue

@@ -0,0 +1,395 @@
+<template>
+  <div :class="ns.b()" ref="quillEditorContainer">
+    <div :class="ns.e('editor')" ref="quillEditorRef" @click="quillEditorRefClick"></div>
+
+    <BwaAdvanceSelect
+      :showSelection="false"
+      :virtual-triggering="true"
+      :virtual-ref="virtualRef"
+      :loading="loading"
+      @search="loadUserList"
+      @update:modelValue="handleChange"
+      @visibleChange="handleVisibleChange"
+    >
+      <BwaAdvanceOption
+        v-for="item of userList"
+        :key="item.value"
+        :value="item.value"
+        :label="item.label"
+      />
+    </BwaAdvanceSelect>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  unref,
+  watch,
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  onMounted,
+  markRaw,
+} from 'vue';
+import { useNamespace, useService } from 'web-base-client-vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+// import './Blots/AtBlot';
+import { ElMessage } from 'element-plus';
+
+let editor = null;
+
+const userService = useService('UserService');
+
+const loading = ref(false);
+const userList = ref([
+  { value: '1', label: '用户1' },
+  { value: '2', label: '用户2' },
+  { value: '3', label: '用户3' },
+]);
+
+const handleChange = ([userId]) => {
+  if (!editor || !userId) {
+    return;
+  }
+
+  const userInfo = unref(userList).find((item) => item.value === userId);
+
+  if (!userInfo) {
+    return;
+  }
+
+  editor.focus();
+
+  //获取当前光标位置
+  let length = editor.getSelection()
+    ? editor.getSelection().index || 0
+    : editor.getLength();
+
+  // 设置@
+  editor.insertEmbed(
+    length,
+    'at',
+    { id: userInfo.value, desc: userInfo.label },
+    'user'
+  );
+
+  editor.insertText(length + 1, ' ');
+
+  //设置光标
+  editor.setSelection(length + 2);
+};
+
+const loadUserList = async (search = '') => {
+  try {
+    if (unref(loading)) {
+      return;
+    }
+
+    loading.value = true;
+    if (!unref(userService)) {
+      ElMessage.error('无法获取用户');
+      return;
+    }
+
+    const userListResult = await unref(userService).getUserList({
+      name: search,
+    });
+
+    if (userListResult.code != 0) {
+      ElMessage.error(userListResult.msg);
+      return;
+    }
+
+    userList.value = userListResult.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleVisibleChange = (visible) => {
+  if (!visible) {
+    return;
+  }
+
+  loadUserList();
+};
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showAt: {
+    type: Boolean,
+    default: false,
+  },
+  userIds: {
+    typee: Array,
+    default: () => [],
+  },
+});
+
+const virtualRef = ref(null);
+
+const emit = defineEmits(['update:modelValue', 'update:userIds']);
+
+defineOptions({
+  name: 'BwaRichText',
+});
+
+const ns = useNamespace('rich-text');
+
+const fileService = useService('FileService');
+
+const quillEditorContainer = ref(null);
+const quillEditorRef = ref(null);
+
+const currentScope = getCurrentScope();
+
+const editorInstance = ref(null);
+
+const toolbarOptions = [
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  [{ font: [] }],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ align: [] }],
+  ['blockquote', 'code-block'],
+  [{ header: 1 }, { header: 2 }],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ color: [] }, { background: [] }],
+  ['clean'].concat(props.showAt ? ['at'] : []),
+];
+
+const value = computed({
+  get: () => props.modelValue || '',
+  set: (v) => {
+      // 解决当只有一张图片的时候  回显html报文异常
+      let str = ''
+      if (!v && editor && editor.root.innerHTML && editor.root.innerHTML.indexOf('<img') != -1) {
+          str = editor.root.innerHTML
+      }
+    emit('update:modelValue', v || str);
+  },
+});
+
+const userIds = computed({
+  get: () => props.userIds,
+  set: (v) => {
+    emit('update:userIds', v);
+  },
+});
+
+const updateImage = async (file) => {
+  if (!unref(fileService)) {
+    return;
+  }
+
+  const uploadFileResult = await unref(fileService).uploadFile(file);
+
+  if (uploadFileResult.code != 0) {
+    return uploadFileResult;
+  }
+
+  const fileID = uploadFileResult.data.id;
+
+  const filePathResult = await unref(fileService).getFilePath(fileID);
+
+  if (filePathResult.code != 0) {
+    return filePathResult;
+  }
+
+  return {
+    ...filePathResult,
+    data: { id: fileID, path: filePathResult.data },
+  };
+};
+const quillEditorRefClick = () => {
+    if (!editor) {
+        return;
+    }
+    editor.focus();
+}
+onMounted(() => {
+  editor = new Quill(unref(quillEditorRef), {
+    theme: 'snow',
+    placeholder: props.placeholder,
+    modules: {
+      toolbar: {
+        container: toolbarOptions,
+        handlers: {
+          at: function (value) {},
+        },
+      },
+    },
+  });
+
+  virtualRef.value = quillEditorContainer.value.querySelector('button.ql-at');
+
+  editorInstance.value = markRaw(editor);
+
+  const el = document.createElement('div');
+
+  const getUserIds = (html) => {
+    el.innerHTML = html;
+
+    const items = Array.from(el.querySelectorAll('span.ptp-at-item'));
+
+    userIds.value = [
+      ...new Set(items.map((item) => item.getAttribute('d-id'))),
+    ];
+  };
+
+  getUserIds(unref(value));
+
+  const handleTextChange = (delta, oldDelta, source) => {
+    const _value = editor.getText() === '\n' ? '' : editor.root.innerHTML;
+
+    value.value = _value;
+
+    getUserIds(_value);
+    // if (source === 'user') {
+    //     var range = editor.getLength();
+    //     console.log(range)
+    //     // if (range != null) {
+    //     //     setTimeout(() => {
+    //     //         editor.setSelection(range.index, range.length);  // 重新设置选区
+    //     //     }, 300)
+    //     // }
+    // }
+  };
+
+  const handlePaste = (evt) => {
+    if (
+      evt.clipboardData &&
+      evt.clipboardData.files &&
+      evt.clipboardData.files.length
+    ) {
+      evt.preventDefault();
+      [].forEach.call(evt.clipboardData.files, async (file) => {
+          console.log(file)
+        if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+          const filePathResult = await updateImage(file);
+
+          if (filePathResult.code != 0) {
+            return;
+          }
+
+          const fileData = filePathResult.data;
+          //   const fileData =  { id: 1, path: 'https://img1.baidu.com/it/u=2335299816,3552592887&fm=253&fmt=auto&app=138&f=JPEG?w=126&h=189' }
+          var range = editor.getSelection();
+          if (range && fileData) {
+            //  在当前光标位置插入图片
+            editor.insertEmbed(range.index, 'image', fileData.path);
+            editor.formatText(range.index, 1, {
+              alt: fileData.id,
+            });
+            //  将光标移动到图片后面
+              setTimeout(() => {
+                  editor.setSelection(range.index + 1);
+                  // console.log(editor.getSelection(), editor.getLength())
+                  // editor.setSelection(editor.getSelection().index, editor.getSelection().length);
+              }, 300)
+          }
+        }
+      });
+    }
+  };
+
+  currentScope.run(() => {
+    watch(
+      computed(() => props.disabled),
+      (disabled) => {
+        editor.enable(!disabled);
+      },
+      { immediate: true }
+    );
+    const getFilePaths = async (alt) => {
+      const filePathResult = await unref(fileService).getFilePath(alt);
+      return filePathResult
+    }
+      let artArr2 = [] // 防止重复加载图片
+    watch(
+      value,
+        async () => {
+            if ((unref(value).indexOf('data:image/png') != -1 || unref(value).indexOf('base64') != -1)) {
+                editor.root.innerHTML = unref(value);
+                return
+            }
+          // console.log(unref(value))
+            if (!unref(value)) {
+                artArr2 = []
+            }
+          let afterHtml = ''
+            let artArr = []
+            let artArrOption = []
+          if (unref(value).indexOf('<img') != -1) {
+              unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                  if (!artArr2.includes(alt)) {
+                      artArr.push(alt)
+                  }
+              })
+              for (const alt of artArr) {
+                  artArrOption.push({
+                      alt,
+                      src: await getFilePaths(alt)
+                      // src: 'https://img1.baidu.com/it/u=2335299816,3552592887&fm=253&fmt=auto&app=138&f=JPEG?w=126&h=189'
+                  })
+              }
+              // console.log(artArrOption)
+              afterHtml = unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                  if (artArr.includes(alt)) {
+                      return `<img src="${artArrOption.find(a => a.alt === alt)?.src.data}" alt="${alt}">`
+                  } else {
+                      return img
+                  }
+
+              })
+          }
+          console.log('afterHtml =>', afterHtml)
+            artArr2 = [...artArr2, ...artArr]
+            artArr = []
+            artArrOption = []
+        if (editor.root.innerHTML === (afterHtml || unref(value))) {
+          return;
+        }
+          const range = editor.getSelection()
+        editor.root.innerHTML = afterHtml || unref(value);
+            setTimeout(() => {
+                if (range) {
+                    editor.setSelection(range.index + 1);
+                    editor.focus()
+                }
+            }, 100)
+      },
+      { immediate: true }
+    );
+
+    editor.on('text-change', handleTextChange);
+
+    editor.root.addEventListener('paste', handlePaste);
+
+    onScopeDispose(() => {
+      editor.off('text-change', handleTextChange);
+
+      editor.root.removeEventListener('paste', handlePaste);
+    });
+  });
+});
+
+defineExpose({
+  getEditorInstance() {
+    return unref(editorInstance);
+  },
+});
+</script>

package/src/data-form/form-components/bwa-select.vue

@@ -0,0 +1,67 @@
+<template>
+  <ElSelect v-bind="attrs" v-model="modelValue" clearable :multiple="multiple" :teleported="false">
+    <slot>
+      <ElOption
+        v-for="item of options"
+        :key="item.value"
+        :value="item.value"
+        :label="item.label"
+      />
+    </slot>
+  </ElSelect>
+</template>
+
+<script setup>
+import { ElOption, ElSelect } from 'element-plus';
+import { computed, useAttrs } from 'vue';
+
+defineOptions({
+  name: 'BwaSelect',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: null,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  labelProp: {
+    type: String,
+    default: 'label',
+  },
+  valueProp: {
+    type: String,
+    default: 'value',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const options = computed(() =>
+  (props.options || []).map((item) => ({
+    ...item,
+    value: item.value + '',
+  }))
+);
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:modelValue']);
+
+const modelValue = computed({
+  get: () => {
+    if (props.multiple) {
+      return Array.isArray(props.modelValue)
+        ? props.modelValue.map((item) => item + '')
+        : [];
+    } else {
+      return props.modelValue == null ? '' : props.modelValue + '';
+    }
+  },
+  set: (v) => emit('update:modelValue', v),
+});
+</script>

package/src/data-form/form-components/bwa-textarea.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-input type="textarea" v-bind="attrs" v-model="modelValue" />
+</template>
+
+<script setup>
+import { useAttrs, computed } from 'vue';
+import { ElInput } from 'element-plus';
+
+defineOptions({
+  name: 'BwaTextarea',
+});
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+});
+
+const attrs = useAttrs();
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:model-value', v),
+});
+</script>

package/src/data-form/form-components/bwa-upload.vue

@@ -0,0 +1,145 @@
+<template>
+  <ElUpload
+    v-bind="attrs"
+    :file-list="fileList"
+    :http-request="handleHttpRequest"
+    :class="ns.b()"
+    :on-success="handleSuccess"
+    :on-error="handleError"
+  >
+    <template #trigger>
+      <ElButton>
+        <ElIcon><Plus /></ElIcon>
+        上传文件
+      </ElButton>
+    </template>
+
+    <template #file="{ file }">
+      <div :class="ns.b('item')">
+        <div :class="ns.be('item', 'info')">
+          <ElTooltip :content="file.name">
+            <div :class="ns.be('item', 'file-name')">
+              {{ file.name }}
+            </div>
+          </ElTooltip>
+        </div>
+
+        <div :class="ns.be('item', 'tools')">
+          <ElIcon
+            :class="ns.be('item', 'tools-item')"
+            @click="handleDownload(file)"
+          >
+            <Download></Download>
+          </ElIcon>
+
+          <ElIcon
+            :class="ns.be('item', 'tools-item')"
+            @click="handleDelete(file)"
+          >
+            <Delete></Delete>
+          </ElIcon>
+        </div>
+      </div>
+    </template>
+  </ElUpload>
+</template>
+
+<script setup>
+import { Delete, Download } from '@element-plus/icons';
+import { ElButton, ElIcon, ElMessage, ElUpload } from 'element-plus';
+import { computed, ref, unref, useAttrs, watch } from 'vue';
+import { useNamespace, useService } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaUpload',
+});
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+watch(
+  computed(() => props.modelValue),
+  (modelValue) => {
+    if (!Array.isArray(modelValue)) {
+      emit('update:modelValue', []);
+    }
+  },
+  { immediate: true }
+);
+
+const fileList = computed(() =>
+  (Array.isArray(props.modelValue) ? props.modelValue : []).map((fileInfo) => {
+    return {
+      name: fileInfo.fileName,
+      response: fileInfo,
+    };
+  })
+);
+
+const attrs = useAttrs();
+
+const ns = useNamespace('upload');
+const fileService = useService('FileService');
+
+const handleHttpRequest = ({ file, onProgress, onSuccess, onError }) => {
+  if (!unref(fileService)) {
+    ElMessage.error('无法上传文件。');
+    return;
+  }
+
+  unref(fileService)
+    .uploadFile(file, {
+      onUploadProgress: (event) => {
+        onProgress({ ...event, percent: event.progress });
+      },
+    })
+    .then((res) => {
+      if (res.code != 0) {
+        onError(res.msg);
+        return;
+      }
+      onSuccess(res.data);
+    }, onError);
+};
+
+const handleSuccess = (fileInfo) => {
+  const value = Array.isArray(props.modelValue) ? props.modelValue : [];
+  emit('update:modelValue', value.concat(fileInfo));
+};
+
+const handleError = (error) => {
+  console.error(error);
+  ElMessage.error('文件上传失败。');
+};
+
+const handleDelete = (file) => {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((fileInfo) => fileInfo !== file.response)
+  );
+};
+
+const handleDownload = async (file) => {
+  if (!unref(fileService)) {
+    ElMessage.error('无法下载文件。');
+    return;
+  }
+
+  try {
+    const downloadFileResult = await unref(fileService).downloadFile(
+      file.response
+    );
+
+    if (downloadFileResult.code != 0) {
+      ElMessage.error(downloadFileResult.msg);
+      return;
+    }
+  } catch (e) {
+    console.error(e);
+    ElMessage.error('下载文件失败。');
+  }
+};
+</script>

package/src/data-form/form-components/bwa-user-multi-select.vue

@@ -0,0 +1,25 @@
+<template>
+  <BwaUserSelect v-model="modelValue" v-bind="attrs" multiple />
+</template>
+
+<script setup>
+import { computed, unref, useAttrs } from 'vue';
+import BwaUserSelect from './bwa-user-select.vue';
+
+defineOptions({
+  name: 'BwaUserMultiSelect',
+});
+
+const props = defineProps({
+  modelValue: null,
+});
+
+const emit = defineEmits(['update:model-value']);
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:model-value', v),
+});
+
+const attrs = useAttrs();
+</script>