sohelp-eleplus 1.1.1-8.beta.1

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

@@ -0,0 +1,378 @@
+<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.name }}</td>
+                <td>{{ propertiesOriginData[element.name] }}</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>
+              <th style="width: 110px">属性描述</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.name }}</td>
+                <td>
+                  <el-input
+                    v-model="element.value"
+                    style="max-width: 300px"
+                    placeholder="请输入条件值"
+                    class="input-with-select"
+                  >
+                    <template #prepend>
+                      <el-select v-model="element.comparison" placeholder="请选择条件" style="width: 96px">
+                        <el-option
+                          v-for="item in CondictionOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </template>
+                  </el-input>
+                </td>
+                <td>{{ propertiesOriginData[element.name] }}</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, toRaw } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
+  import { DragOutlined } from '../../../sohelp-icon-select/icons';
+
+  const CondictionOptions = [
+    {
+      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'
+    }
+  ];
+
+  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) {
+        let p = val.map((item) => {
+          return {
+            name: item.name,
+            comparison: CondictionOptions[0].value,
+            value: ''
+          };
+        });
+
+        propertiesData.value = Object.values(
+          [...p, ...toRaw(props.modelValue)].reduce((acc, item) => {
+            acc[item.name] = item;
+            return acc;
+          }, {})
+        );
+
+        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: hidden;
+
+    display: flex;
+    gap: 10px;
+
+    .list-item {
+      height: 100%;
+      // width: 47%;
+      overflow: hidden;
+      max-width: 400px;
+      .list-card {
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    .list-item:nth-child(1) {
+      width: 35%;
+    }
+
+    .list-item:nth-child(2) {
+      width: 6%;
+      min-width: 60px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .list-item:nth-child(3) {
+      max-width: 700px;
+      flex: 1;
+    }
+  }
+
+  .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-keywords.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 class="demo-table" ref="unAllocatedRef">
+          <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"
+                  ></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 '../../../sohelp-icon-select/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>