sohelp-eleplus 1.1.13

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

@@ -0,0 +1,310 @@
+<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 class="demo-table" ref="allocatedRef">
+          <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"
+                  ></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.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/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <ele-modal
+    form
+    width="1200px"
+    :minWidth="600"
+    height="70vh"
+    :minHeight="300"
+    v-model="configVisible"
+    title="筛选配置"
+    class="grid-config"
+    @close="close"
+    :bodyStyle="{ height: '70vh', overflowY: 'auto' }"
+    v-loading="loading"
+  >
+    <ele-card class="grid-filter-card" :bodyStyle="{ height: '100%', padding: '10px 0 0' }" v-if="filterConfig">
+      <ele-tabs v-model="gridActiveTab" :items="gridTabs" tabPosition="left" class="f-tabs" :key="tabsKey">
+        <template #list>
+          <grid-filter-list v-model="filterConfig.list" :properties="propertiesArray"></grid-filter-list>
+        </template>
+
+        <template #field>
+          <grid-filter-field v-model="filterConfig.filter.field" :properties="propertiesArray"></grid-filter-field>
+        </template>
+
+        <template #sort>
+          <grid-filter-sort v-model="filterConfig.filter.sort" :properties="propertiesArray"></grid-filter-sort>
+        </template>
+        <template #keywords>
+          <grid-filter-keywords
+            v-model="filterConfig.filter.keywords"
+            :properties="propertiesArray"
+          ></grid-filter-keywords>
+        </template>
+        <template #scheme>
+          <grid-filter-scheme
+            v-model="filterConfig.filter.scheme"
+            :properties="propertiesArray"
+          ></grid-filter-scheme>
+        </template>
+        <template #config>
+          <grid-filter-config v-model="filterConfig"></grid-filter-config>
+        </template>
+      </ele-tabs>
+    </ele-card>
+
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" @click="save">确认</el-button>
+    </template>
+  </ele-modal>
+</template>
+<script setup>
+import { defineProps, onMounted, ref, watch } from "vue";
+
+  import GridFilterField from './grid-filter-field.vue';
+  import GridFilterSort from './grid-filter-sort.vue';
+  import GridFilterKeywords from './grid-filter-keywords.vue';
+  import GridFilterScheme from './grid-filter-scheme.vue';
+  import GridFilterList from './grid-filter-list.vue';
+  import GridFilterConfig from './grid-filter-config.vue';
+
+  import { moduleCache } from '@/components/sohelp-eleplus/cache/ModuleCache.js';
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+  const props = defineProps({
+    modelValue: Boolean,
+    config: Object
+  });
+
+  const emit = defineEmits(['done', 'update:modelValue']);
+
+  const loading = ref(false);
+  const configVisible = ref(props.modelValue);
+  const filterConfig = ref();
+  const originFilterConfigValue = ref(null);
+  const tabsKey = ref(0);
+  const propertiesArray = ref([]);
+
+
+  const gridActiveTab = ref('list');
+  const gridTabs = [
+    {
+      name: 'list',
+      label: '列表显示'
+    },
+    {
+      name: 'field',
+      label: '高级筛选'
+    },
+    {
+      name: 'sort',
+      label: '字段排序'
+    },
+    {
+      name: 'keywords',
+      label: '关键字搜索'
+    },
+    {
+      name: 'scheme',
+      label: '筛选场景'
+    },{
+      name: 'config',
+      label: '基本配置'
+    }
+  ];
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      configVisible.value = val;
+      gridActiveTab.value = 'list';
+      tabsKey.value++;
+    },
+    {
+      immediate: true
+    }
+  );
+
+  onMounted(()=>{
+    originFilterConfigValue.value = JSON.parse(JSON.stringify(props.config));
+    propertiesArray.value = props.config?.properties
+      ?.map(({ name, label, hidden }) => {
+        if (!hidden && !name.startsWith('_') && !name.endsWith('flw_id')) {
+          return {
+            name: name,
+            label: label
+          };
+        }
+      })
+      .filter(Boolean);
+    filterConfig.value = JSON.parse(JSON.stringify(props.config));
+  });
+
+  // watch(
+  //   () => props.config,
+  //   (val) => {
+  //     originFilterConfigValue.value = JSON.parse(JSON.stringify(val));
+  //     propertiesArray.value = val?.properties
+  //       ?.map(({ name, label, hidden }) => {
+  //         if (!hidden) {
+  //           return {
+  //             name: name,
+  //             label: label
+  //           };
+  //         }
+  //       })
+  //       .filter(Boolean);
+  //     filterConfig.value = JSON.parse(JSON.stringify(val));
+  //   },
+  //   {
+  //     deep: true
+  //   }
+  // );
+
+  const close = () => {
+    filterConfig.value = { ...originFilterConfigValue.value };
+    emit('update:modelValue', false);
+  };
+
+  const save = async () => {
+    loading.value = true;
+    const res = await moduleCache.saveFilterFields(filterConfig.value).catch((e) => {
+      EleMessage.error(e?.message || 'error');
+    });
+    loading.value = false;
+    if (res.meta.success) {
+      emit('update:modelValue', false);
+      moduleCache.clear();
+      emit('done',filterConfig.value);
+      EleMessage.success(res?.meta.message || '操作成功');
+    } else {
+      EleMessage.error(res?.meta.message || '操作成功');
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .f-tabs {
+    height: 100%;
+
+    :deep(.el-tabs__content) {
+      border-left: 1px solid #ccc;
+      padding: 0 20px 0 20px !important;
+      height: calc(100% - 2px) !important;
+
+      & .el-tab-pane {
+        height: calc(100% - 2px);
+        overflow-x: auto;
+      }
+    }
+
+    :deep(.el-tabs__item) {
+      margin-left: 10px !important;
+    }
+
+    :deep(.ele-tab-title) {
+      padding-right: 20px !important;
+    }
+  }
+
+  .grid-filter-card {
+    height: 100%;
+    min-height: 300px;
+    width: 100%;
+    overflow: hidden;
+  }
+</style>