sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-file-upload/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="sohelp-file-upload">
+    <vxe-upload
+      ref="vxeUploadRef"
+      v-model="fileList"
+      :autoHiddenButton="!multiple"
+      show-download-button
+      :dragSort="true"
+      :urlMode="true"
+      :showProgress="true"
+      :showButtonText="false"
+      :pasteToUpload="true"
+      :singleMode="!multiple"
+      :multiple="multiple"
+      :readonly="readonly"
+      :limitSize="limitSize"
+      :progressText="'{percent}%'"
+      :moreConfig="moreConfig"
+      :upload-method="uploadMethod"
+      :before-remove-method="beforeRemoveMethod"
+      :before-download-method="beforeDownloadMethod"
+      :previewMethod="previewMethod"
+    >
+    </vxe-upload>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch } from 'vue';
+  import { ElMessage, ElMessageBox } from 'element-plus';
+  import { SohelpHttp } from '../core-export';
+  import { VxeUI } from 'vxe-pc-ui';
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+
+  const modelValue = defineModel('modelValue');
+  const data = defineModel('data');
+
+  const imagePath = `${SohelpHttp.getBaseUrl()}/engine/web/file/download?id=`;
+  const props = defineProps({
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    limitSize: {
+      type: Number,
+      default: 1 //10Mb
+    },
+    moreConfig: {
+      type: Object,
+      default: () => {
+        return {
+          maxCount: 1,
+          layout: 'horizontal'
+        };
+      }
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const vxeUploadRef = ref(null);
+  const fileList = ref([]);
+  const originList = ref([]);
+
+  const previewMethod = async ({ option }) => {
+    const { name } = option;
+    const image = originList.value.find((item) => item.name === name);
+    if (image && ['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(image.type)) {
+      VxeUI.previewImage({
+        urlList: [image.url]
+      });
+    }
+  };
+
+  /**
+   * 下载
+   * @param param0
+   */
+  const beforeDownloadMethod = async ({ option }) => {
+    try {
+      const blob = await fetch(option.url).then((response) => response.blob());
+      await VxeUI.saveFile({
+        filename: option.name,
+        content: blob
+      });
+      VxeUI.modal.message({
+        content: '下载成功',
+        status: 'success'
+      });
+    } catch (e) {
+      VxeUI.modal.message({
+        content: '下载失败',
+        status: 'error'
+      });
+    }
+    return false;
+  };
+
+  /**
+   *
+   * @param param0 删除
+   */
+  const beforeRemoveMethod = async ({ option }) => {
+    const flag = await ElMessageBox.confirm('确定要删除文件吗?', '系统提示', {
+      type: 'warning',
+      draggable: false
+    })
+      .then(async () => {
+        const urlObj = new URL(option.url);
+        const id = urlObj.searchParams.get('id');
+
+        if (id) {
+          const res = await SohelpHttp.post('/engine/web/file/delete', {
+            id: id
+          });
+
+          if (res.meta.success) {
+            originList.value = originList.value.filter((item) => item.id !== id);
+            setTimeout(() => {
+              updateModelValue();
+            }, 1);
+            ElMessage.success(res.meta.message);
+            return true;
+          } else {
+            ElMessage.error(res.meta.message);
+            return false;
+          }
+        }
+        return false;
+      })
+      .catch(() => {
+        return false;
+      });
+
+    return flag;
+  };
+
+  /**
+   * 上传
+   */
+  const uploadMethod = async ({ file }) => {
+    const formData = new FormData();
+    formData.append('files', file);
+
+    const res = await SohelpHttp.post('/engine/web/file/upload', formData);
+    if (res.meta.success) {
+      originList.value.push({
+        name: file.name,
+        id: res.data[0]
+      });
+
+      updateModelValue();
+      EleMessage.success('上传成功!');
+      return {
+        url: imagePath + res.data[0]
+      };
+    } else {
+      ElMessage.error(res.meta.message);
+    }
+  };
+
+  /**
+   * 更新modelValue
+   */
+  const updateModelValue = () => {
+    const arr = props.multiple ? originList.value : [originList.value[0]];
+    if (props.multiple) {
+      modelValue.value = arr?.map((item) => item.id) || '';
+    } else {
+      modelValue.value = arr?.length > 0 ? arr[0].id : '';
+    }
+
+    data.value =
+      arr?.map((item) => {
+        return {
+          id: item.id,
+          filename: item.name
+        };
+      }) || [];
+  };
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val && val != '0' && val !== 0) {
+        const arr = Array.isArray(val) ? val : [val];
+        const v = Array.isArray(data.value) ? data.value : [data.value];
+        originList.value = arr.map((item) => {
+          const filename = v?.find((row) => row?.id === item)?.filename || item.id;
+          return {
+            id: item,
+            name: filename,
+            url: imagePath + item
+          };
+        });
+        fileList.value = originList.value;
+      } else {
+        originList.value = [];
+        data.value = [];
+        fileList.value = [];
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<script>
+  export default {
+    name: 'SohelpFileUpload'
+  };
+</script>
+<style scoped lang="scss"></style>

package/sohelp-filter-scheme/components/condition.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="sohelp-filter-condition">
+    <el-form-item :label="label">
+      <sohelp-select v-model="value.comparison" :datasource="comparisonOptions" class="sohelp-select-row"></sohelp-select>
+    </el-form-item>
+    <sohelp-input v-model="value.value"></sohelp-input>
+  </div>
+</template>
+
+<script setup>
+  import { reactive, watch } from 'vue';
+  const props = defineProps({
+    modelValue: Object,
+    label: String
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+  const value = reactive(props.modelValue);
+
+  const comparisonOptions = [
+    {
+      label: '包含',
+      value: 'LIKE'
+    },
+    {
+      label: '不包含',
+      value: 'NOT_LIKE'
+    },
+
+    {
+      label: '等于',
+      value: 'EQ'
+    },
+    {
+      label: '不等于',
+      value: 'NE'
+    },
+    {
+      label: '大于',
+      value: 'GT'
+    },
+    {
+      label: '小于',
+      value: 'LT'
+    },
+    {
+      label: '大于等于',
+      value: 'GTE'
+    },
+    {
+      label: '小于等于',
+      value: 'LTE'
+    },
+    {
+      label: '左包含',
+      value: 'LEFT_LIKE'
+    },
+    {
+      label: '右包含',
+      value: 'RIGHT_LIKE'
+    },
+    {
+      label: '为空',
+      value: 'EMPTY'
+    },
+    {
+      label: '不为空',
+      value: 'NOT_EMPTY'
+    }
+  ];
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      Object.assign(value, val);
+    },
+    {
+      deep: true
+    }
+  );
+</script>
+<script>
+  export default {
+    name: 'SohelpFilterCondition'
+  };
+</script>
+<style lang="scss" scoped>
+  .sohelp-filter-condition {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+
+    .el-form-item{
+      margin-bottom: 10px;
+    }
+    .sohelp-select-row{
+      width: 100%;
+      background: #f5f5f5!important;
+      border-radius: 6px;
+    }
+  }
+</style>

package/sohelp-filter-scheme/components/filter.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="sohelp-filter">
+    <filter-condition
+      v-for="(item, index) in filterList"
+      :key="item.name"
+      v-model="filterList[index]"
+      :label="propertiesMap[item.name]?.label || ''"
+    ></filter-condition>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch } from 'vue';
+  import FilterCondition from './condition.vue';
+  const props = defineProps({
+    modelValue: Array,
+    propertiesMap: Object
+  });
+
+  const filterList = ref([]);
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      filterList.value = val;
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>
+<script>
+  export default {
+    name: 'SohelpFilterSchemeFilter'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-filter {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+</style>

package/sohelp-filter-scheme/components/keywords.vue

@@ -0,0 +1,15 @@
+<template>
+  <sohelp-input v-bind="$attrs" style="min-width: 300px"></sohelp-input>
+</template>
+
+<script setup>
+
+
+</script>
+<script>
+  export default {
+    name: 'SohelpFilterSchemeKeywords'
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/sohelp-filter-scheme/components/scheme.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-radio-group v-model="radioValue">
+    <el-radio
+      border
+      v-for="scheme in schemeList"
+      :key="scheme"
+      :label="scheme"
+      @click.prevent="handleRadioClick(scheme)"
+    ></el-radio>
+  </el-radio-group>
+</template>
+
+<script setup>
+  import { computed, ref, watch } from 'vue';
+  const props = defineProps({
+    filterConfig: Object,
+    modelValue: String
+  });
+  const emit = defineEmits(['update:modelValue']);
+  const radioValue = ref('');
+
+  // 方案列表
+  const schemeList = computed(() => {
+    if (props.filterConfig.scheme?.length) {
+      return props.filterConfig.scheme.map((item) => item.label);
+    }
+    return [];
+  });
+
+  watch(() => props.modelValue, (val) => {
+    radioValue.value = val;
+  },{
+    immediate: true
+  })
+
+  /**
+   * radio 取消点击
+   */
+  const handleRadioClick = (val) => {
+    radioValue.value = radioValue.value === val ? '' : val;
+    emit('update:modelValue', radioValue.value);
+  };
+</script>
+<script>
+  export default {
+    name: 'SohelpFilterSchemeScheme'
+  };
+</script>
+<style lang="scss" scoped></style>

package/sohelp-filter-scheme/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <ele-card :headerStyle="{ padding: '0' }" :bodyStyle="{ padding: '15px 0' }" class="sohelp-filter-scheme-card">
+
+    <template #header>
+      <ele-tabs :items="tabs" v-model="active"> </ele-tabs>
+    </template>
+    <div class="filter-box">
+      <div class="filter-content">
+        <keywords-card
+          :placeholder="getKeywordsPlaceholder"
+          v-model="filterForm.keywords"
+          v-if="active === 'keywords'"
+        ></keywords-card>
+        <filter-card :propertiesMap="propertiesMap" v-model="filterForm.filter" v-if="active === 'filter'"></filter-card>
+        <scheme-card :propertiesMap="propertiesMap" :filterConfig="filterConfig" v-model="filterForm.scheme" v-if="active === 'scheme'"></scheme-card>
+      </div>
+      <div class="filter-opt">
+        <el-button type="primary" size="small" @click="onFilter">筛选</el-button>
+        <el-button size="small" @click="onReset">重置</el-button>
+      </div>
+    </div>
+  </ele-card>
+</template>
+
+<script setup>
+  import { reactive, ref, computed } from 'vue';
+  import KeywordsCard from './components/keywords.vue';
+  import FilterCard from './components/filter.vue';
+  import SchemeCard from './components/scheme.vue';
+
+  const props = defineProps({
+    filterConfig: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    },
+    refid: String,
+    modelValue: {
+      type: Object,
+      default: () => ({
+        keywords: '',
+        filter: {},
+        scheme: ''
+      }),
+      required: true
+    },
+    propertiesMap: Object
+  });
+
+  const emit = defineEmits(['filter', 'reset', 'update:modelValue']);
+  const filterForm = ref({ ...props.modelValue });
+
+  const tabs = reactive([
+    {
+      name: 'keywords',
+      label: '快捷筛选'
+    },
+    {
+      name: 'filter',
+      label: '高级筛选'
+    },
+    {
+      name: 'scheme',
+      label: '场景筛选'
+    }
+  ]);
+  const active = ref('keywords');
+  const filterConfig = reactive(props.filterConfig);
+
+  /**
+   * 获取关键字查询placeholder
+   */
+  const getKeywordsPlaceholder = computed(() => {
+    const labels = props.filterConfig?.keywords?.map((name) => props.propertiesMap[name]?.label)?.filter(Boolean) || [];
+    return labels.length ? `请输入${labels.join('、')}` : '请输入';
+  });
+
+  const onFilter = () => {
+    emit('update:modelValue', { ...filterForm.value });
+    emit('filter');
+  };
+
+  const onReset = () => {
+    filterForm.value = { ...props.modelValue };
+    emit('update:modelValue', { ...props.modelValue });
+    emit('filter');
+  };
+</script>
+<script>
+  export default {
+    name: 'SohelpFilterScheme'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-filter-scheme-card {
+    .filter-box {
+      display: flex;
+      gap: 20px;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      .filter-content {
+      }
+      .filter-opt {
+        margin-bottom: 3px;
+        flex: 1;
+        width: 60px;
+      }
+    }
+
+  }
+</style>