sohelp-eleplus 1.1.13

package/sohelp-grid-select/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="sohelp-grid-select" :class="{ 'hide-placeholder': originValue.length }">
+    <el-select
+      v-model="selectedLabel"
+      :placeholder="originValue.length > 0 ? '' : '请选择列表数据'"
+      :teleported="true"
+      popper-class="grid-select-popper"
+      ref="selectRef"
+      @visible-change="handleVisibleChange"
+    >
+      <template #prefix>
+        <el-tag type="info" v-for="tag in originValue" :key="tag" closable @close="tagClose(tag)">{{
+          getTag(tag)
+        }}</el-tag>
+      </template>
+
+      <el-option style="height: auto; padding: 0; height: 262px; overflow: hidden; align-items: flex-start">
+        <sohelp-vxe-grid
+          :refid="refid"
+          ref="tableRef"
+          class="vxe-grid-main"
+          @click.stop="() => {}"
+          :multiple="multiple"
+          v-model:value="selectedValue"
+          v-model:data="selectedData"
+          :url="url"
+        >
+        </sohelp-vxe-grid>
+      </el-option>
+
+      <template #footer>
+        <div class="footer">
+          <el-button size="small" @click="close">取消</el-button>
+          <el-button size="small" type="primary" @click="confirm">确定</el-button>
+        </div>
+      </template>
+    </el-select>
+  </div>
+</template>
+<script setup>
+  import { nextTick, ref, watch } from 'vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: [String, Array],
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    refid: {
+      type: String,
+      required: true
+    },
+    labelField: {
+      type: String,
+      default: 'label',
+      required: true
+    },
+    valueField: {
+      type: String,
+      default: 'id',
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    url: String
+  });
+
+  const emit = defineEmits(['update:value', 'update:data']);
+
+  const selectRef = ref(null);
+  const tableRef = ref(null);
+  const selectedValue = ref([]);
+  const selectedData = ref([]);
+  const selectedLabel = ref('');
+  /** value转换为数组，用于渲然tag */
+  const originValue = ref([]);
+
+  /**
+   * 格式化数据
+   * @param row
+   */
+  const mappingField = (row) => {
+    return {
+      [props.labelField]: row[props.labelField] || '',
+      [props.valueField]: row[props.valueField] || ''
+    };
+  };
+
+  /**
+   *
+   * @param id 获取标签
+   */
+  const getTag = (id) => {
+    if (selectedData.value?.length > 0) {
+      return selectedData.value.find((item) => item[props.valueField] === id)?.[props.labelField] || id;
+    }
+  };
+
+  /**
+   * vxe-grid显示时回显数据
+   */
+  const handleVisibleChange = (visible) => {
+    if (visible) {
+      tableRef.value?.initValue();
+    }
+  };
+
+  /**
+   * 删除标签
+   * @param id
+   */
+  const tagClose = (id) => {
+    close();
+    clear();
+    selectedValue.value = selectedValue.value.filter((item) => item != id);
+    originValue.value = [...selectedValue.value];
+    updateValue();
+  };
+
+  /**
+   * 清空
+   */
+  const clear = () => {
+    selectedValue.value = [];
+    tableRef.value?.clearRadioRow();
+    emit('update:value', []);
+    close();
+  };
+
+  /**
+   * 关闭下拉表格
+   */
+  const close = () => {
+    selectRef.value?.blur();
+  };
+
+  /**
+   * 确定
+   */
+  const confirm = () => {
+    updateValue();
+    close();
+  };
+
+  /**
+   * 更新数据
+   * @param val
+   */
+  const updateValue = () => {
+    emit(
+      'update:data',
+      selectedData.value
+        .map((item) => {
+          return mappingField(item);
+        })
+        .filter((item) => item[props.valueField])
+    );
+    emit('update:modelValue', props.multiple ? [...selectedValue.value] : selectedValue.value[0] || '');
+  };
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (val && val != 0) {
+        let arr = Array.isArray(val) ? val : val ? [val] : [];
+        originValue.value = [...arr];
+        selectedValue.value = [...arr];
+      }
+    }
+  );
+
+  watch(
+    () => props.data,
+    (val) => {
+      if (val) {
+        if (!Array.isArray(val)) {
+          selectedData.value = [val];
+        } else {
+          selectedData.value = [...val];
+        }
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>
+<script>
+  export default {
+    name: 'SohelpGrkdSelect'
+  };
+</script>
+<style lang="scss" scoped>
+  .sohelp-grid-select {
+    width: 100%;
+    min-width: 160px;
+    box-sizing: border-box;
+
+    :deep(.el-select) {
+      .el-select__prefix {
+        flex: 1 1 0;
+        max-width: calc(100% - 15px);
+        flex-wrap: wrap;
+        max-height: 90px;
+        overflow-y: auto;
+
+        .el-tag {
+          max-width: 100%;
+          height: auto;
+          padding: 0 10px 0 6px;
+          //换行
+          white-space: normal;
+        }
+      }
+      .el-select__selection {
+        flex: 1 1 100%;
+      }
+    }
+  }
+
+  .sohelp-table-select.hide-placeholder {
+    :deep(.el-select) {
+      .el-select__prefix {
+        flex: 1 1 100%;
+      }
+      .el-select__selection {
+        flex: 1 1 0;
+      }
+    }
+  }
+
+  .footer {
+    text-align: right;
+  }
+</style>

package/sohelp-grid-view/filter/config/grid-filter-condition.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div style="display: flex; align-items: center">
+      <el-select
+        v-model="obj.type"
+        :style="{ backgroundColor: obj.type === 'and' ? '#38c10b' : '#c59d0a' }"
+        class="mySelectStyle"
+      >
+        <el-option label="满足所有条件" value="and" />
+        <el-option label="满足任一条件" value="or" />
+      </el-select>
+      <el-icon
+        @click="addSubCondition(0)"
+        style="margin-left: 10px; cursor: pointer"
+        size="24"
+      >
+        <Fold />
+      </el-icon>
+      <el-dropdown trigger="click">
+        <el-icon style="margin-left: 10px; cursor: pointer" size="24">
+          <CirclePlus />
+        </el-icon>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              @click="addCondition(item)"
+              v-for="item in fields"
+              >{{ item.label }}</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <div
+      v-if="obj.children && obj.children.length"
+      v-for="(item, index) in obj.children"
+      :style="{
+        borderLeft:
+          obj.type === 'and' ? '4px solid #38c10b' : '4px solid #c59d0a'
+      }"
+    >
+      <div
+        v-if="!item.type"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px;
+        "
+      >
+        <div style="display: flex; align-items: center; width: 240px">
+          <div style="font-size: 16px; margin-right: 10px">{{
+            item.label
+          }}</div>
+          <select
+            v-model="item.comparison"
+            style="border: none; width: auto; background-color: #dedede"
+          >
+            <option v-for="op in options" :value="op.value">{{
+              op.label
+            }}</option>
+          </select>
+        </div>
+        <div style="display: flex; align-items: center">
+          <el-input v-model="item.value" placeholder="请输入" />
+          <el-icon
+            @click="removeCondition(index)"
+            style="margin-left: 8px"
+            size="20"
+          >
+            <Delete />
+          </el-icon>
+        </div>
+      </div>
+      <div v-else style="padding: 10px 0 0 10px">
+        <GridFilterCondition :value="item" :fields="fields" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { Fold, CirclePlus, Delete } from '@element-plus/icons-vue';
+  export default {
+    name: 'GridFilterCondition',
+    components: {
+      GridFilterCondition: import('./grid-filter-condition.vue'),
+      Delete,
+      Fold,
+      CirclePlus
+    },
+    props: {
+      fields: {
+        type: Array,
+        required: true
+      },
+      modelValue: {
+        type: Object,
+        required: true
+      },
+      value: {
+        type: Object,
+        required: true
+      }
+    },
+    data() {
+      return {
+        mainConditionType: 'and', // 主条件类型
+        conditions: [],
+        options: [
+          {
+            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'
+          }
+        ],
+        obj: this.value
+      };
+    },
+    watch: {
+      conditions: {
+        handler(newConditions) {
+          this.$emit('update:modelValue', {
+            [this.mainConditionType]: newConditions
+          });
+        },
+        deep: true
+      }
+    },
+    methods: {
+      addCondition(row) {
+        let data = [];
+        let datato = [];
+        if (this.obj.children.length) {
+          this.obj.children.forEach((e) => {
+            if (!e.type) {
+              data.push(e);
+            } else {
+              datato.push(e);
+            }
+          });
+        }
+
+
+        data.push(row);
+        this.obj.children = data.concat(datato);
+      },
+      removeCondition(index) {
+        this.obj.children.splice(index, 1);
+      },
+      addSubCondition() {
+        // 确保 children 数组存在
+        // if (!this.conditions[index].children) {
+        //   this.$set(this.conditions[index], 'children', []);
+        // }
+        this.obj.children.push({
+          type: 'and',
+          children: []
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  /* 添加样式 */
+  .mySelectStyle {
+    border-radius: 5px;
+    border: none !important;
+    width: 130px;
+  }
+
+  :deep(.el-select__placeholder) {
+    color: #ffffff !important;
+    /* 自定义占位符颜色 */
+  }
+</style>

package/sohelp-grid-view/filter/config/grid-filter-config.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-form>
+    <el-form-item label="高级搜索默认显示方式">
+      <el-select v-model="form.filter.config.filterPosition" style="width:200px;">
+        <el-option label="不显示" value="NONE"></el-option>
+        <el-option label="顶部显示" value="TOP"></el-option>
+        <el-option label="右边显示" value="RIGHT"></el-option>
+        <el-option label="弹窗显示" value="MODAL"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="显示查询范围条件">
+      <sohelp-switch v-model="form.isPower" ></sohelp-switch>
+    </el-form-item>
+    <el-form-item label="显示查询条件超过行数将隐藏">
+      <sohelp-input v-model="form.filter.config.maxRows" style="width:200px;"></sohelp-input>
+    </el-form-item>
+    <el-form-item label="默认一页显示多少行">
+      <sohelp-number-input v-model="form.limit" :min="10"></sohelp-number-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const form = defineModel("modelValue",{type:Object,default:()=>({})});
+</script>
+
+<style lang="scss" scoped></style>