sohelp-eleplus 1.1.26 → 1.1.28

package/sohelp-modal-select/index.vue

@@ -0,0 +1,705 @@
+<template>
+  <div class="sohelp-modal-select">
+    <!-- header -->
+    <div class="sohelp-modal-select-header" :class="{ 'is-disabled': disabled, 'is-readonly': readonly }">
+      <div class="tag-wrapper" :class="[
+        globalConfig.size ? 'el-input--' + globalConfig.size : '',
+        { 'is-disabled': disabled }
+      ]" v-if="!$slots.header" @click.stop="onOpenModal">
+        <div class="tag-input">
+          <span class="placeholder-text" v-if="!modelValue || modelValue?.length < 1">{{
+            placeholder
+          }}</span>
+
+          <template v-else>
+            <el-tag v-for="item in selectionsData" :key="item[props.valueField]" class="selection-tag"
+              :type="disabled || readonly ? 'info' : 'primary'" :closable="clearable && !disabled && !readonly"
+              @close.stop="removeTag(item)">
+              {{ item[labelField] }}
+            </el-tag></template>
+        </div>
+        <div class="append-icon">
+          <el-icon size="15" class="clear-icon" v-if="
+            clearable &&
+            !disabled &&
+            !readonly &&
+            modelValue &&
+            modelValue?.length > 0
+          " @click.stop="clearAll">
+            <CircleCloseFilled />
+          </el-icon>
+          <el-icon size="15">
+            <Search />
+          </el-icon>
+        </div>
+      </div>
+      <slot v-else name="header" :data="selections"></slot>
+    </div>
+    <!-- body -->
+    <SohelpModal v-bind="getModalProps" ref="sohelpModalRef" @confirm="onConfirm" class="sohelp-modal">
+      <div class="sohelp-modal-select-body">
+        <template v-if="$slots.default">
+          <slot name="default"></slot>
+        </template>
+        <div v-else class="sohelp-modal-select-container">
+          <div class="sohelp-vxe-grid-container">
+            <sohelp-vxe-grid v-bind="getGridProps" :multiple="multiple" ref="gridRef"
+              v-model:selections="selections"></sohelp-vxe-grid>
+          </div>
+
+          <div class="selection-container" v-if="multiple">
+            <ele-card :header="`已选择`" class="selection-card" bodyStyle="padding: 0" headerStyle="padding: 0 0 5px 0">
+              <template #header>
+                <div class="card-header">
+                  <ele-text>已选择 {{ selections.length }} 个</ele-text>
+                  <el-button @click="clearAllSelections" type="danger" plain size="small"
+                    v-if="selections.length > 0">清空</el-button>
+                </div>
+              </template>
+
+              <div class="selections-box">
+                <div class="selections-item" v-for="item in selections" :key="item[valueField]">
+                  <ele-ellipsis size="xs" :tooltip="true">{{
+                    getSelectionTemplate(item)
+                  }}</ele-ellipsis>
+                  <el-link type="danger" :underline="false" @click="removeSelection(item)">
+                    <el-icon :size="16">
+                      <Close />
+                    </el-icon>
+                  </el-link>
+                </div>
+              </div>
+            </ele-card>
+          </div>
+        </div>
+      </div>
+    </SohelpModal>
+  </div>
+</template>
+
+<script setup>
+import { Search, CircleCloseFilled } from '@element-plus/icons-vue';
+import { ref, nextTick, onMounted, computed } from 'vue';
+import { useGlobalConfig } from 'element-plus';
+
+import SohelpModal from '../sohelp-modal/index.vue';
+import SohelpVxeGrid from '../sohelp-vxe-grid/index.vue';
+
+const defaultModalProps = {
+  closeOnClickModal: true,
+  title: '选择',
+  width: '50%',
+  minWidth: 500,
+  minHeight: 500,
+
+  bodyStyle: {
+    paddingBottom: '10px'
+  }
+};
+
+const defaultGridProps = {
+  url: '/admin/system/user/page',
+  autoLoad: true,
+  gridOptions: {
+    columns: []
+  }
+};
+
+const props = defineProps({
+  modalProps: {
+    type: Object,
+    default: () => ({
+      title: '选择数据',
+      width: '100%'
+    })
+  },
+
+  gridProps: {
+    type: Object,
+    default: () => ({
+      datasource: function () { },
+      columns: []
+    })
+  },
+
+  modelValue: {
+    type: [String, Array],
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  labelField: {
+    type: String,
+    default: 'label'
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  valueField: {
+    type: String,
+    default: 'value'
+  },
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  title: {
+    type: String,
+    default: '选择'
+  },
+  beforeOpen: {
+    type: Function,
+    default: () => true
+  },
+  selectionTemplate: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const data = defineModel('data', {
+  type: [Array, Object],
+  default: () => []
+});
+
+const emits = defineEmits(['update:modelValue', 'page-change', 'confirm']);
+
+const selectionsData = ref([]);
+
+const sohelpModalRef = ref(null);
+const gridRef = ref(null);
+const selections = ref([]);
+const globalConfig = useGlobalConfig();
+
+onMounted(() => {
+  nextTick(() => {
+    initData();
+  });
+});
+
+const getModalProps = computed(() => {
+  return { ...defaultModalProps, ...props.modalProps };
+});
+
+const initColumns = (columns) => {
+  const addColumnByType = (column, columns) => {
+    const idx = columns?.findIndex((c) => c.type === column.type);
+    if (idx === -1) {
+      columns.unshift(column);
+    }
+  };
+
+  addColumnByType(
+    {
+      type: props.multiple ? 'checkbox' : 'radio',
+      title: '',
+      width: 40,
+      fixed: 'left',
+      align: 'center'
+    },
+    columns
+  );
+  addColumnByType(
+    {
+      type: 'seq',
+      title: '序号',
+      width: 50,
+      fixed: 'left',
+      align: 'center'
+    },
+    columns
+  );
+};
+
+const getGridProps = computed(() => {
+  const params = { ...defaultGridProps, ...props.gridProps };
+  const { columns } = params.gridOptions;
+  initColumns(columns);
+  return params;
+});
+
+const enrichDataWithColumns = (dataList) => {
+  const { valueField, labelField } = props;
+  const excludeColumns = ['seq', 'checkbox', 'radio', 'html', 'expand'];
+  const columns = props.gridProps.gridOptions.columns
+    .filter((item) => !excludeColumns.includes(item.type))
+    ?.map((f) => f.field);
+  if (columns?.length < 1) {
+    return dataList;
+  }
+
+
+  return dataList?.map((item) => {
+    //根据columns 数组 补充数据
+    let obj = {
+      [valueField]: item[valueField]
+    };
+    columns.forEach((field) => {
+      obj[field] = item[field] || '';
+
+    });
+    return obj;
+  });
+};
+
+const initData = (newData = props.data) => {
+  // 初始化数据
+  const dataArray = Array.isArray(newData) ? [...newData] : [newData];
+  const modelValues = props.modelValue
+    ? Array.isArray(props.modelValue)
+      ? props.modelValue
+      : [props.modelValue]
+    : [];
+
+  if (modelValues.length > 0) {
+    const { valueField, labelField } = props;
+
+    selectionsData.value = modelValues.map((item) => {
+      let idx = dataArray.findIndex((d) => d[valueField] === item);
+      if (idx != -1) {
+        return dataArray[idx];
+      }
+      return {
+        [valueField]: item,
+        [labelField]: item
+      };
+    });
+
+    selections.value = [...selectionsData.value];
+
+    return;
+  } else {
+    selections.value = [];
+    selectionsData.value = [];
+
+    const $grid = gridRef.value?.$grid;
+    $grid?.clearCheckboxRow();
+    $grid?.clearRadioRow();
+  }
+};
+
+const onOpenModal = async () => {
+  if (props.disabled || props.readonly) return;
+  if (props.beforeOpen && typeof props.beforeOpen === 'function') {
+    const result = await props.beforeOpen(props.modelValue, data.value);
+    if (!result) return;
+  }
+  sohelpModalRef.value?.show();
+
+  //回显
+  nextTick(() => {
+    initData(data.value);
+  });
+};
+
+const onConfirm = () => {
+  const selectedIds = selections.value?.map((item) => item[props.valueField]);
+  const enrichedData = enrichDataWithColumns([...selections.value]);
+  selectionsData.value = [...selections.value];
+
+  if (props.multiple) {
+    data.value = enrichedData;
+    emits('update:modelValue', selectedIds);
+    emits('confirm', selectedIds, data.value);
+  } else {
+    data.value = enrichedData[0];
+    emits('update:modelValue', selectedIds[0]);
+    emits('confirm', selectedIds[0], enrichedData[0]);
+  }
+};
+
+
+const removeSelection = (item) => {
+  const v = item[props.valueField];
+  selections.value = selections.value.filter(
+    (i) => i[props.valueField] !== v
+  );
+  const $grid = gridRef.value?.$grid;
+  $grid?.setCheckboxRowKey([v], false);
+  $grid?.clearRadioRow();
+};
+
+const removeTag = (row) => {
+  removeSelection(row);
+  data.value = [...selections.value];
+  selectionsData.value = [...selections.value];
+
+  emits(
+    'update:modelValue',
+    selections.value.map((item) => item[props.valueField])
+  );
+};
+
+const clearAllSelections = () => {
+  selections.value = [];
+  const $grid = gridRef.value?.$grid;
+  $grid?.clearCheckboxRow();
+  $grid?.clearRadioRow();
+};
+
+/**
+ * 清空所有选中（对外暴露）
+ */
+const clearAll = () => {
+  clearAllSelections();
+  data.value = [];
+  emits('update:modelValue', props.multiple ? [] : '');
+};
+
+const getSelectionTemplate = (item) => {
+  if (!props.selectionTemplate) return item[props.labelField];
+
+  // 支持 ${field} 格式
+  return props.selectionTemplate.replace(/\$\{([^}]+)\}/g, (_, key) => {
+    return item[key] ?? '';
+  });
+};
+</script>
+
+<script>
+export default {
+  name: 'SohelpModalSelect'
+};
+</script>
+<style lang="scss" scoped>
+.sohelp-modal-select {
+  width: 100%;
+
+  .sohelp-modal-select-header {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+    min-width: 160px;
+    min-height: 24px;
+    width: 100%;
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    box-sizing: border-box;
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s;
+
+    &:hover .tag-wrapper .append-icon .clear-icon {
+      opacity: 1;
+    }
+
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+
+    &:focus-within {
+      border-color: var(--el-color-primary);
+      box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+    }
+
+    .tag-wrapper {
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      box-sizing: border-box;
+      border-radius: 6px;
+
+
+      transition: var(--el-transition-border);
+      font-size: var(--el-font-size-base);
+      color: var(--el-text-color-regular);
+
+      &:hover {
+        border-color: var(--el-border-color-hover);
+      }
+
+      &:focus-within {
+        outline: none;
+        border-color: var(--el-color-primary);
+        box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+      }
+
+      &.is-disabled {
+        background-color: var(--el-disabled-bg-color);
+        border-color: var(--el-disabled-border-color);
+        color: var(--el-disabled-text-color);
+        cursor: not-allowed;
+
+        .tag-input {
+          color: var(--el-disabled-text-color);
+        }
+
+        .append-icon {
+          color: var(--el-disabled-text-color);
+          background-color: var(--el-disabled-bg-color);
+          border-color: var(--el-disabled-border-color);
+
+          &:hover,
+          &:active {
+            background-color: var(--el-disabled-bg-color);
+            color: var(--el-disabled-text-color);
+          }
+        }
+      }
+
+      &.el-input--small {
+        height: 100%;
+        font-size: var(--el-font-size-small);
+        box-sizing: border-box;
+
+        :deep(.el-tag) {
+          padding: 0 6px !important;
+        }
+      }
+
+      &.el-input--default {
+        min-height: 30px !important;
+
+        .tag-input {
+          line-height: calc(var(--el-component-size-small) - 2px);
+        }
+
+        .selection-tag {
+          height: calc(var(--el-component-size-small) - 1px) !important;
+          line-height: calc(var(--el-component-size-small) - 10px);
+        }
+      }
+
+      &.el-input--large {
+        min-height: 38px !important;
+        font-size: var(--el-font-size-base);
+
+        .tag-input {
+          line-height: calc(var(--el-component-size-large) - 2px);
+        }
+
+        .selection-tag {
+          height: calc(var(--el-component-size-large) - 10px) !important;
+          line-height: calc(var(--el-component-size-large) - 10px);
+        }
+      }
+
+      .tag-input {
+        box-sizing: border-box;
+        padding: 2px 6px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-wrap: wrap;
+        overflow: hidden;
+        min-height: 18px;
+
+        line-height: calc(var(--el-component-size) - 2px);
+        cursor: inherit;
+
+        .placeholder-text {
+          color: var(--el-text-color-placeholder);
+          line-height: 18px;
+        }
+
+        .selection-tag {
+          flex-shrink: 0;
+          margin: 0;
+          max-width: 120px;
+          height: calc(var(--el-component-size) - 15px);
+          line-height: calc(var(--el-component-size) - 10px);
+          border: 0;
+          margin-top: 1px;
+
+          :deep(.el-tag__content) {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          :deep(.el-tag__close) {
+            border-radius: 100%;
+
+            &:hover {
+              color: #fff;
+              background: var(--el-color-primary);
+            }
+          }
+        }
+
+        .more-tag {
+          flex-shrink: 0;
+          margin: 0;
+          background-color: var(--el-color-info-light-9);
+          color: var(--el-color-info);
+          border-color: var(--el-color-info-light-8);
+          height: calc(var(--el-component-size) - 8px);
+          line-height: calc(var(--el-component-size) - 10px);
+          border: 0;
+        }
+      }
+
+      .append-icon {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        color: var(--el-text-color-placeholder);
+        padding: 0 5px;
+        margin-top: 1px;
+        transition: var(--el-transition-border);
+        border-top-right-radius: var(--el-border-radius-base);
+        border-bottom-right-radius: var(--el-border-radius-base);
+        box-sizing: border-box;
+
+        .el-icon {
+          font-size: inherit;
+          transition: var(--el-transition-color);
+        }
+
+        .clear-icon {
+          margin-right: 2px;
+          width: 18px;
+          height: 18px;
+          border-radius: 100%;
+          text-align: center;
+          line-height: 16px;
+          cursor: pointer;
+          opacity: 0;
+          transition: opacity 0.2s;
+          color: #c0c4cc;
+
+          &:hover {
+            color: #909399;
+          }
+        }
+
+        &:hover {
+          color: var(--el-text-color-regular);
+        }
+      }
+
+      .prepend-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 25px;
+        flex-shrink: 0;
+        color: var(--el-text-color-placeholder);
+        padding: 0 0 0 8px;
+        border-right: 1px solid var(--el-border-color);
+        margin-right: 4px;
+        transition: var(--el-transition-border);
+
+        .el-icon {
+          font-size: inherit;
+          transition: var(--el-transition-color);
+        }
+
+        &:hover {
+          color: var(--el-text-color-regular);
+        }
+      }
+    }
+  }
+}
+
+.sohelp-modal-select-body {
+  width: 100%;
+  height: 60vh;
+
+  .sohelp-modal-select-container {
+    display: flex;
+    height: 100% !important;
+    gap: 16px;
+    justify-content: space-between;
+
+    .sohelp-vxe-grid-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .selection-container {
+      width: 220px;
+      height: 100%;
+      flex-shrink: 0;
+
+      .selection-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .el-button {
+          margin-left: 0;
+        }
+
+        :deep(.ele-card-body) {
+          flex: 1;
+          overflow: hidden;
+          padding: 16px;
+        }
+
+        .selections-box {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          margin-top: 10px;
+          height: calc(100% - 25px);
+          overflow: auto;
+
+          .selections-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            border: 1px solid #ccc;
+            padding: 2px 5px 2px 10px;
+            border-radius: 6px;
+            justify-content: space-between;
+          }
+        }
+
+        .selection-list {
+          height: 100%;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+
+          .selection-tag {
+            margin: 0;
+          }
+
+          :deep(.el-tag) {
+            display: flex;
+            justify-content: space-between;
+            background: #ccc;
+            padding-right: 40px;
+            box-sizing: border-box;
+          }
+
+          :deep(.el-empty) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>