sohelp-eleplus 1.1.13

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

@@ -0,0 +1,313 @@
+<template>
+  <div class="list-box">
+    <div class="list-item">
+      <ele-card
+        bordered
+        header="未分配"
+        :body-style="{
+          padding: '0',
+          overflowY: 'auto',
+          height: 'calc(100% - 50px)'
+        }"
+        :header-style="{
+          background: '#f7f7f7',
+          border: '1px solid #e8e8e8'
+        }"
+        class="list-card"
+      >
+        <!--  -->
+        <ele-table ref="unAllocatedRef" class="demo-table">
+          <thead style="position: sticky; top: 0; z-index: 9">
+            <tr>
+              <th style="width: 40px"
+                ><el-checkbox
+                  v-model="unAllocatedChecked"
+                  @change="unAllocatedChange"
+                ></el-checkbox
+              ></th>
+              <th style="width: 40px"></th>
+              <th>属性</th>
+              <th>属性描述</th>
+            </tr>
+          </thead>
+          <vue-draggable
+            tag="tbody"
+            item-key="id"
+            :animation="300"
+            :modelValue="unAllocatedDatasource"
+            :force-fallback="true"
+            group="demoDragTable"
+            handle=".drag-handle"
+            :set-data="() => void 0"
+          >
+            <template #item="{ element }">
+              <tr>
+                <td
+                  ><el-checkbox
+                    v-model="unAllocatedSelection"
+                    :label="element"
+                  >
+                  <template #default></template>
+                  </el-checkbox
+                ></td>
+                <td>
+                  <ele-text
+                    :icon="DragOutlined"
+                    type="placeholder"
+                    class="drag-handle"
+                    style="cursor: move"
+                  />
+                </td>
+                <td>{{ element }}</td>
+                <td>{{ propertiesOriginData[element] }}</td>
+              </tr>
+            </template>
+            <template #footer v-if="!unAllocatedDatasource.length">
+              <tr>
+                <td colspan="4" style="text-align: center; background: none">
+                  <ele-text type="placeholder">暂无数据</ele-text>
+                </td>
+              </tr>
+            </template>
+          </vue-draggable>
+        </ele-table>
+      </ele-card>
+    </div>
+    <div class="list-item">
+      <el-button
+        :icon="ArrowLeft"
+        type="primary"
+        @click="unAllocatedHandle"
+        :disabled="!allocatedSelection.length"
+      ></el-button>
+      <el-button
+        :icon="ArrowRight"
+        type="primary"
+        @click="allocatedHandle"
+        :disabled="!unAllocatedSelection.length"
+      ></el-button>
+    </div>
+    <div class="list-item"
+      ><ele-card
+        header="已分配"
+        bordered
+        :body-style="{
+          padding: '0',
+          overflowY: 'auto',
+          height: 'calc(100% - 50px)'
+        }"
+        :header-style="{
+          background: '#f7f7f7',
+          border: '1px solid #e8e8e8'
+        }"
+        class="list-card"
+      >
+        <ele-table ref="allocatedRef" class="demo-table">
+          <thead style="position: sticky; top: 0; z-index: 9">
+            <tr>
+              <th style="width: 40px">
+                <el-checkbox
+                  v-model="allocatedChecked"
+                  @change="allocatedChange"
+                ></el-checkbox>
+              </th>
+              <th style="width: 40px"></th>
+              <th>属性</th>
+              <th>属性描述</th>
+            </tr>
+          </thead>
+          <vue-draggable
+            tag="tbody"
+            item-key="id"
+            :animation="300"
+            :modelValue="modelValue"
+            :force-fallback="true"
+            group="demoDragTable"
+            handle=".drag-handle"
+            :set-data="() => void 0"
+            @update:modelValue="(value) => updateAllocated(value)"
+          >
+            <template #item="{ element }">
+              <tr>
+                <td
+                  ><el-checkbox
+                    v-model="allocatedSelection"
+                    :label="element"
+                  ><template #default></template></el-checkbox
+                ></td>
+                <td>
+                  <ele-text
+                    :icon="DragOutlined"
+                    type="placeholder"
+                    class="drag-handle"
+                    style="cursor: move"
+                  />
+                </td>
+                <td>{{ element }}</td>
+                <td>{{ propertiesOriginData[element] }}</td>
+              </tr>
+            </template>
+            <template #footer v-if="!modelValue.length">
+              <tr>
+                <td colspan="4" style="text-align: center; background: none">
+                  <ele-text type="placeholder">暂无数据</ele-text>
+                </td>
+              </tr>
+            </template>
+          </vue-draggable>
+        </ele-table>
+      </ele-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch, computed } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
+  import { DragOutlined } from '@/components/icons';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    properties: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  // 未分配
+  const unAllocatedChecked = ref(false);
+  const unAllocatedRef = ref(null);
+  const unAllocatedSelection = ref([]);
+
+  const propertiesData = ref([]);
+  const propertiesOriginData = ref({});
+
+  const unAllocatedDatasource = computed(() => {
+    return propertiesData.value.filter(
+      (item) => !props.modelValue.includes(item)
+    );
+  });
+
+  // 已分配
+  const allocatedChecked = ref(false);
+  const allocatedRef = ref(null);
+  const allocatedSelection = ref([]);
+
+  // 未分配全选
+  const unAllocatedChange = (val) => {
+    unAllocatedSelection.value = val ? unAllocatedDatasource.value : [];
+  };
+  // 已分配全选
+  const allocatedChange = (val) => {
+    allocatedSelection.value = val ? props.modelValue : [];
+  };
+
+  const updateAllocated = (value) => {
+    emit('update:modelValue', value);
+  };
+
+  const allocatedHandle = () => {
+    if (unAllocatedSelection.value.length > 0) {
+      emit('update:modelValue', [
+        ...props.modelValue,
+        ...unAllocatedSelection.value
+      ]);
+      unAllocatedSelection.value = [];
+    }
+    unAllocatedChecked.value = false;
+  };
+
+  const unAllocatedHandle = () => {
+    if (allocatedSelection.value.length > 0) {
+      emit(
+        'update:modelValue',
+        props.modelValue.filter(
+          (item) => !allocatedSelection.value.includes(item)
+        )
+      );
+      allocatedSelection.value = [];
+    }
+    allocatedChecked.value = false;
+  };
+
+  watch(
+    () => props.properties,
+    (val) => {
+      if (val?.length > 0) {
+        propertiesData.value = val.filter(item=>item.name!='_operation').map((item) => item.name);
+        propertiesOriginData.value = val.reduce((acc, item) => {
+          acc[item.name] = item.label;
+          return acc;
+        }, {});
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<style lang="scss" scoped>
+  .list-box {
+    width: 1000px;
+    height: calc(100% - 2px);
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    gap: 10px;
+
+    .list-item {
+      height: 100%;
+      width: 47%;
+      overflow: hidden;
+      max-width: 500px;
+      .list-card {
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    .list-item:nth-child(2) {
+      width: 6%;
+      min-width: 60px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .el-button {
+    margin: 10px 0!important;
+  }
+
+  .demo-table {
+    .drag-handle {
+      color: #333;
+    }
+
+    tr.sortable-chosen {
+      user-select: none;
+    }
+
+    tr.sortable-ghost {
+      opacity: 0;
+    }
+
+    tr.sortable-fallback {
+      opacity: 1 !important;
+      display: table !important;
+
+      td {
+        background: var(--el-color-primary-light-8);
+        border-radius: 0 !important;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,264 @@
+<template>
+  <div class="grid-filter-scheme-box">
+    <vxe-grid
+      ref="vxeGridRef"
+      v-bind="gridOptions"
+      @checkbox-all="selectChangeEvent"
+      @checkbox-change="selectChangeEvent"
+      @toolbar-button-click="toolClick"
+      @cell-click="handleCurrentChange"
+      @row-dragend="handleDragEnd"
+      style="width: 380px"
+    >
+      <template #label="{ row }">
+        <vxe-input v-model="row.label"></vxe-input>
+      </template>
+    </vxe-grid>
+
+    <div class="mt-10 condition-wrap" style="width: 500px" v-if="currentRow >= 0">
+      <ele-text>筛选标签</ele-text>
+      <el-input
+        ref="inputRef"
+        style="max-width: 500px"
+        class="mb-10"
+        v-model="gridOptions.data[currentRow].label"
+        placeholder="请输入标签名称"
+        clearable
+        @blur="handleBlur"
+      />
+      <ele-text>条件配置</ele-text>
+
+      <div class="condition-box">
+        <filter-condition
+          v-if="currentRow >= 0"
+          :key="currentRow"
+          :fields="properties"
+          v-model="gridOptions.data[currentRow].config"
+          :value="gridOptions.data[currentRow].config"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, nextTick, watch } from 'vue';
+  import FilterCondition from './grid-filter-condition.vue';
+
+  const props = defineProps({
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    properties: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const selectedRows = ref([]);
+
+  const vxeGridRef = ref();
+  const gridOptions = reactive({
+    border: true,
+    minHeight: '99%',
+    maxHeight: '100%',
+    checkboxConfig: {
+      checkField: 'checked'
+    },
+    toolbarConfig: {
+      buttons: [
+        { code: 'add', name: '插入', status: 'primary' },
+        { code: 'del', name: '删除', status: 'danger', disabled: true }
+      ]
+    },
+
+    rowConfig: {
+      isHover: true,
+      isCurrent: true,
+      isFollowSelected: true,
+      drag: true,
+      useKey: true //sortabled 排序用，必须
+    },
+
+    columnConfig: {
+      resizable: true
+    },
+    columns: [
+      { type: 'checkbox', width: 50, align: 'center' },
+      { type: 'seq', width: 50, fixed: 'left', align: 'center' },
+      {
+        field: 'label',
+        title: '标签',
+        dragSort: true,
+        minWidth: 260
+      }
+    ],
+    data: []
+  });
+
+  const inputRef = ref(null);
+  const currentRow = ref(-1);
+
+  const handleCurrentChange = ({ rowIndex }) => {
+    currentRow.value = rowIndex;
+  };
+
+  const selectChangeEvent = () => {
+    const $grid = vxeGridRef.value;
+    if ($grid) {
+      selectedRows.value = $grid.getCheckboxRecords();
+    }
+
+    const delTool = gridOptions.toolbarConfig.buttons.find((tool) => tool.code === 'del');
+
+    delTool.disabled = selectedRows.value.length ? false : true;
+  };
+
+  // 工具栏点击事件
+  const toolClick = ({ code }) => {
+    switch (code) {
+      case 'add':
+        insertData();
+        break;
+      case 'del':
+        removeEvent();
+        break;
+    }
+  };
+
+  // 插入
+  const insertData = () => {
+    vxeGridRef.value
+      .insertAt({
+        label: '',
+        config: {
+          children: [],
+          type: 'and'
+        }
+      })
+      .then(({ row }) => {
+        gridOptions.data.unshift(row);
+
+        nextTick(() => {
+          vxeGridRef.value.setCurrentRow(row);
+          currentRow.value = 0;
+          inputRef.value?.focus();
+        });
+      });
+  };
+
+  // 删除
+  const removeEvent = () => {
+    vxeGridRef.value.remove(selectedRows.value);
+    let rowKey = gridOptions.data[currentRow.value]._X_ROW_KEY;
+
+    selectedRows.value.forEach((item) => {
+      gridOptions.data.splice(gridOptions.data.indexOf(item), 1);
+    });
+
+    if (selectedRows.value.some((item) => item._X_ROW_KEY === rowKey)) {
+      currentRow.value = -1;
+    } else {
+      let index = gridOptions.data.findIndex((item) => item._X_ROW_KEY === rowKey);
+      currentRow.value = index;
+      vxeGridRef.value.setCurrentRow(gridOptions.data[index]);
+    }
+
+    selectedRows.value = [];
+  };
+
+  // reload
+  const reloadData = (data) => {
+    vxeGridRef.value?.reloadData(data);
+  };
+
+  // 获取数据
+  const getData = () => {
+    const { fullData } = getTableData();
+    return fullData || [];
+  };
+
+  // 获取表格数据
+  const getTableData = () => {
+    return vxeGridRef.value?.getTableData();
+  };
+
+  const handleBlur = (v) => {
+    let value = v.target.value;
+    if (value) {
+      let arr = gridOptions.data.filter((item) => item.label === value);
+      if (arr.length > 2) {
+        gridOptions.data[currentRow.value].label = '';
+      }
+    }
+  };
+
+  const handleFocus = () => {
+    if (currentRow.value === -1) {
+      inputRef.value.value = '';
+    }
+  };
+
+  const handleDragEnd = ({ $table, newRow }) => {
+    currentRow.value = gridOptions.data.indexOf(newRow);
+    const fullData = $table.getFullData();
+    gridOptions.data = fullData;
+    emit('update:modelValue', fullData);
+  };
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      selectedRows.value = [];
+      gridOptions.data = val;
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+<style>
+  .grid-filter-scheme-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 20px;
+
+    min-width: 900px;
+    height: 100%;
+  }
+
+  .drag-btn {
+    cursor: move;
+    font-size: 12px;
+  }
+  .vxe-body--row.sortable-ghost,
+  .vxe-body--row.sortable-chosen {
+    background-color: #dfecfb;
+  }
+
+  .condition-wrap {
+    height: 92%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .condition-header {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+
+  .condition-body {
+    flex: 1;
+  }
+
+  .condition-box {
+    flex: 1;
+    height: 100%;
+  }
+</style>