@lx-frontend/wrap-element-ui 1.0.25 → 1.0.26

package/src/components/AddMembers/index.vue

@@ -1,149 +0,0 @@
-<template>
-  <div>
-    <PopoverForm
-      :title="title"
-      :with-submit-btn="false"
-      :width="360"
-      @on-change="handleCloseTechniciansSelectPopup"
-    >
-      <div
-        slot="form"
-        class="team-setting__technicians-popover"
-      >
-        <div class="team-setting__technicians-select">
-          <el-input
-            v-model="techniciansSearchQuery"
-            placeholder="请输入姓名"
-            @input="handleInputTechniciansSearch"
-          />
-        </div>
-        <div
-          v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
-          class="team-setting__empty-technicians-options"
-        >
-          {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
-        </div>
-        <ul
-          v-else
-          class="team-setting__technicians-options"
-        >
-          <li
-            class="team-setting__technicians-option"
-            v-for="item in technicianOptions"
-            :key="item[$attrs.showConfig.id]"
-          >
-            <div class="team-setting__technicians-option-left">
-              {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
-            </div>
-            <el-button
-              v-if="item.is_selected"
-              type="text"
-              disabled
-            >
-              已添加
-            </el-button>
-            <el-button
-              v-else
-              type="text"
-              @click="handleAddTechnician($attrs.keyId, item)"
-            >
-              添加
-            </el-button>
-          </li>
-        </ul>
-      </div>
-      <el-button
-        slot="reference"
-        type="text"
-        icon="el-icon-plus"
-      >
-        {{ title }}
-      </el-button>
-    </PopoverForm>
-  </div>
-</template>
-
-<script>
-import PopoverForm from '../PopoverForm'
-export default {
-  name: 'AddMembers',
-  components: {
-    PopoverForm
-  },
-  props: {
-    /** 成员数据 */
-    technicianOptions: Array,
-    /** 获取数据加载中 */
-    fetchTechniciansLoading: Boolean,
-    /** 弹窗标题 */
-    title: {
-      type: String,
-      default: '添加成员',
-    },
-  },
-  data() {
-    return {
-      techniciansSearchQuery: '',
-    }
-  },
-  watch: {
-  },
-  methods: {
-    handleCloseTechniciansSelectPopup(show) {
-      if (show) return;
-      this.techniciansSearchQuery = '';
-      this.$emit('update:technicianOptions', []);
-    },
-    handleInputTechniciansSearch(query) {
-      this.$emit('fetchTechniciansMethods', query);
-    },
-    handleAddTechnician(id, item) {
-      const query = { id, item };
-      this.$emit('handleAddTechnician', query);
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.team-setting {
-  &__technicians-popover {
-    padding: 20px;
-    height: 350px;
-    overflow-y: auto;
-  }
-  &__technicians-select {
-    width: 320px;
-  }
-  &__empty-technicians-options {
-    font-size: 12px;
-    color: #80838e;
-    text-align: center;
-    margin-top: 10px;
-  }
-  &__technicians-options {
-    display: flex;
-    flex-direction: column;
-  }
-  &__technicians-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 30px;
-    &-left {
-      width: 250px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: #80838e;
-    }
-    &-right {
-      color: #1890ff;
-      &--selected {
-        color: #80838e;
-      }
-    }
-  }
-}
-
-</style>

package/src/components/AuditSteps/index.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="audit-steps">
-    <ElSteps direction="vertical">
-      <ElStep class="audit-steps__step-item" v-for="(item, index) in value" :key="index">
-        <div slot="icon">{{index + 1}}</div>
-        <div :class="{'el-name-box': item.id}" slot="description">
-          <span :class="[ 'audit-steps__step-order', {first: index===0} ]">{{index + 1}}</span>
-          <ElSelect
-            :value="item.employees"
-            @input="val => handleEditCandidate(val, index)"
-            multiple
-            :multiple-limit="maxSelect"
-            placeholder="请选择">
-            <ElOption
-              v-for="v in candidates"
-              :key="v.id"
-              :label="v.name"
-              :value="v.id" />
-          </ElSelect>
-          <i class="el-name" v-if="item.id">{{item.miniName}}</i>
-          <i class="el-icon-delete" v-if="index" @click="handleDeleteStep(index)" ></i>
-        </div>
-      </ElStep>
-    </ElSteps>
-    <ElButton v-if="isAdd" type="text" class="audit-steps__add" icon="circle-plus" @click="handleAddStep">添加审核环节</ElButton>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AuditSteps',
-  props: {
-    candidates: {
-      type: Array
-    },
-    value: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    maxSelect: {
-      type: Number,
-      default: 3
-    },
-    stepNum: {
-      type: Number,
-      default: 2
-    }
-  },
-  computed: {
-    isAdd () {
-      return this.value.length < this.stepNum
-    }
-  },
-  methods: {
-    syncSteps (modification) {
-      const _steps = [ ...this.value ]
-      this.$emit('input', modification(_steps))
-    },
-    handleEditCandidate (val, index) {
-      this.syncSteps(_steps => {
-        _steps[index].employees = val
-        return _steps
-      })
-    },
-    handleDeleteStep (i) {
-      this.syncSteps(_steps => {
-        _steps.splice(i, 1)
-        return _steps
-      })
-    },
-    handleAddStep () {
-      this.syncSteps(_steps => {
-        return _steps.concat([{ employees: [] }])
-      })
-    },
-    // 判断是不是每一个步骤都选有审核人
-    isValidateSteps () {
-      return !this.value.some(_steps => _steps.employees.length <= 0)
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.audit-steps {
-  width: 612px;
-
-  .el-step__head {
-    display: none;
-  }
-
-  &__step-item {
-    min-height: 43px;
-    max-height: 43px;
-    margin-bottom: 35px;
-
-    .el-select {
-      width: 400px;
-    }
-
-    .el-icon-delete {
-      margin-left: 10px;
-      font-size: 16px;
-      cursor: pointer;
-    }
-  }
-
-  &__step-order {
-    cursor: default;
-    margin-right: 8px;
-    position: relative;
-    display: inline-block;
-    text-align: center;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 1px solid #aaa;
-    background: #aaa;
-    color: #fff;
-
-    &:not(.first):before{
-      position: absolute;
-      content: '';
-      display: block;
-      width: 1px;
-      height: 60px;
-      background: #aaa;
-      top: -60px;
-      left: 50%;
-    }
-  }
-
-  &__add {
-    margin-top: -10px;
-  }
-}
-</style>
-

package/src/components/DemoComponent/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="demo-component__input">
-    <ElInput title="DemoComponent" lable="DemoComponent" />
-  </div>
-</template>
-<script>
-  export default{
-    name: 'DemoComponent'
-  }
-</script>
-
-<style lang="less">
-@--test: 30px;
-
-.demo-component {
-  &__input {
-    width: @--test;
-    border-color: red;
-  }
-}
-</style>

package/src/components/EditableTable/README.md

@@ -1,147 +0,0 @@
-# EditableTable
-
-## 属性
-
-### EditableTable 属性
-
-| 属性名             | 类型    | 默认值 | 是否必须 | 说明             |
-| ------------------ | ------- | ------ | -------- | ---------------- |
-| columnConfig       | Array   | []     | 是       | 列配置数组       |
-| dataList           | Array   | []     | 是       | 当前页数据列表   |
-| total              | Number  | 0      | 是       | 总条数           |
-| loading            | Boolean | false  | 否       | 是否正在加载     |
-| hasIndexColumn     | Boolean | false  | 否       | 是否展示索引     |
-| hasExpandRow       | Boolean | false  | 否       | 是否展示展开行   |
-| hasSelectionColumn | Boolean | false  | 否       | 是否展示选择列   |
-| rowDragAble        | Boolean | false  | 否       | 是否支持拖拽     |
-| defaultOperations  | Array   | []     | 否       | 默认操作         |
-| colorList          | Array   | []     | 否       | 行背景色颜色列表 |
-| leftFixedCount     | Number  | 0      | 否       | 左侧固定列数量   |
-| dragSemiRange      | Number  | 15     | 否       | 性能优化配置     |
-
-#### columnConfig
-
-所有和列相关的操作都在这里配置。具体和功能相关的配置可参考后续功能相关的文档，这里只说明两个必选的参数：prop 和 label。
-
-prop: 该列在列表中的唯一标识，和 dataList 数组项中的属性相对应
-label: 该列的表头展示名称
-
-同时，columnConfig 列表项也能接收 el-table-column 组件所能传递的任何属性，如 width，min-width 等，这些属性会直接透传给对应的 el-table-column 组件。详见[el-table-column](https://element.eleme.io/#/en-US/component/table#table-column-attributes)
-
-#### dataList
-
-列表要显示的数据列表。其中每一项都必须包含 prop 属性，和 columnConfig 中的 prop 属性相对应。
-
-其次，dataList 数据项还包含几个特别的属性：
-
-- colorId: Number 类型，表示当前行的背景色 id，和 colorList 中的 id 对应
-- isPinned: Boolean 类型，表示当前行是否置顶
-
-#### defaultOperations
-
-如果这个配置不为空数组，则会在列表最右侧显示操作列。当前支持三种操作:删除(delete)、编辑(edit)、置顶(top)。默认值为空数组，表示不显示操作列。
-
-eg:
-
-1. defaultOperations: ['delete', 'edit', 'top'] // 显示删除、编辑、置顶
-2. defaultOperations: ['delete'] // 只显示删除操作
-
-#### colorList
-
-行背景色弹窗配置列表。ts 类型表示如下：
-
-```ts
-type IColorList = {
-  name: string; // 颜色名称
-  textColor: string; // 颜色弹窗中文本颜色，避免文字颜色与背景颜色相同时，无法看清文字
-  sampleColor: string; // 颜色弹窗中样例的颜色
-  bgColor: string; // 选中颜色后，行背景色
-  id: number; // 颜色id
-  default?: boolean; // 是否是默认色，默认色需要显示颜色图标
-}[];
-```
-
-这里之所以有 sampleColor 和 bgColor，是因为样例样色和实际设置的背景色不一样。通常背景色是通过样例色添加透明度后得到的，但是在设置行背景色时，如果背景透明，会导致其他显示问题，所以这里使用不透明的实际背景色。
-
-#### dragSemiRange
-
-性能优化配置，拖拽元素的拖拽范围。默认值为 15，表示拖拽范围为当前拖拽元素的上下 15 个元素。
-
-因为在拖拽过程中，需要对所有行进行遍历，设置属性，当列表过大时，性能较差，所以这里限制拖拽范围在当前拖拽元素的上下 15 个元素内，拖拽时只需要处理最多 30 个元素，性能会更好。
-
-## Usage
-
-### 自定义列
-
-如果某一列数据需要特殊展示，可以在 columnConfig 中配置 slotName，该值为该列的插槽名称。slotName 不为空，则使用用户提供的插槽内容来渲染对应的列。
-
-```ts
-columnConfig: [
-  {
-    prop: "name",
-    label: "姓名",
-    slotName: "name",
-  },
-  {
-    prop: "statusName",
-    label: "状态",
-    slotName: "statusName",
-  },
-];
-```
-
-```xml
-<EditableTable :columnConfig="columnConfig" :dataList="dataList">
-  <template v-slot:statusName="scope">
-    自定义内容，{{ scope.row }}为该行数据
-  </template>
-</EditableTable>
-```
-
-以上例子，`name`对应的列使用默认渲染，而 statusName 则使用自定义的插槽内容进行渲染。
-
-### 列排序
-
-列排序是指，根据某一列的排序规则，对当前列表页的行数据进行排序。
-
-开启列排序，只需要在 columnConfig 中设置 sortable 为 true，并且设置`sort-method`方法即可。
-
-`sort-method`的使用方法和`el-table`的`sort-method`完全一致。
-
-### 列筛选
-
-列筛选是指，根据某一列的筛选规则，对当前列表页的行数据进行筛选，保留符合条件的行数据。
-
-开启列筛选，需要在 columnConfig 中设置 filters 和 filter-method 方法，这两个属性均来自[el-table](https://element.eleme.io/#/en-US/component/table#table-column-attributes)。
-
-### 列搜索
-
-列搜索是指，根据用户的输入，对当前列表页的行数据进行搜索，保留符合条件的行数据。
-
-开启列搜索，需要在 columnConfig 中设置 searchable 为 true。
-
-如果不提供 searchMethod 方法，则会检查当前列对应的数据是否包含搜索关键字，如果包含，则保留。
-
-如果提供了 searchMethod 方法，在触发搜索时会将该行数据传入该方法，返回 true 则保留该行，否则过滤该行。
-
-### 列统计
-
-列统计是指，根据某一列的统计规则，对当前列数据进行统计，统计结果会在表格底部显示。
-
-开启列统计，需要在 columnConfig 中设置 summary 为 true，同时需要在 columnConfig 中设置 summaryMethod 方法，该方法接收一个由当前列数据组成的数组，返回一个字符串或数字类型的统计结果。
-
-```ts
-// price列统计所有价格的和
-columnConfig: [
-  {
-    prop: "price",
-    label: "价格",
-    summary: true,
-    summaryMethod: (data: number[]) => {
-      return data.reduce((a, b) => a + b, 0);
-    },
-  },
-];
-```
-
-### 单元格 hover 态展示

package/src/components/EditableTable/bizHooks/useCellHover.ts

@@ -1,72 +0,0 @@
-import debounce from 'lodash/debounce';
-import throttle from 'lodash/throttle';
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-export function useCellHover(tableDomRef) {
-
-  // 鼠标悬浮的行
-  const hoveringCellInfo = ref<{
-    rowIndex: number;
-    columnProperty: string;
-  }>({ rowIndex: -1, columnProperty: ''});
-
-  const isMouseWheeling = ref(false);
-
-  onMounted(() => {
-    tableDomRef.value.$el.addEventListener('mouseleave', resetHoveringCellInfo);
-    document.addEventListener('wheel', throttledHandleMouseWheel);
-  })
-
-  onBeforeUnmount(() => {
-    tableDomRef.value.$el.removeEventListener('mouseleave', resetHoveringCellInfo);
-    document.removeEventListener('wheel', throttledHandleMouseWheel);
-  })
-
-  const setCellClassName = ({ column, rowIndex }) => {
-    // hoving-cell-[name]-[rowIndex]
-    if (!column.property) return '';
-    return `hoving-cell-(${column.property})-(${rowIndex})`;
-  }
-
-  const resetHoveringCellInfo = () => {
-    hoveringCellInfo.value = {
-      rowIndex: -1,
-      columnProperty: ''
-    };
-  }
-
-  let timerHandler: any = null
-  // 性能考虑，在鼠标滚动时，停止处理cell的hover事件
-  const handleMouseWheel = () => {
-    isMouseWheeling.value = true;
-    clearTimeout(timerHandler);
-    // 停止滚动后，恢复hover事件
-    timerHandler = setTimeout(() => {
-      isMouseWheeling.value = false;
-    }, 100)
-  }
-  const throttledHandleMouseWheel = throttle(handleMouseWheel, 50);
-
-  const handleCellMouseEnter = (row, column, cell, event) => {
-    // 性能考虑，表格滚动时会不断触发该事件，导致滚动性能变差
-    if (isMouseWheeling.value) return
-
-    const className = [...event.target.classList].find(c => /hoving-cell-\(\w+\)-\(\d+\)/.test(c))
-    if (!className) return;
-    // 正则匹配括号中的内容
-    const matchArr = className.match(/hoving-cell-\((\w+)\)-\((\d+)\)/);
-
-    hoveringCellInfo.value = {
-      rowIndex: +matchArr?.[2],
-      columnProperty: matchArr?.[1]
-    }
-  }
-
-  const debouncedHoverHandler = debounce(handleCellMouseEnter, 10);
-
-  return {
-    hoveringCellInfo,
-    setCellClassName,
-    debouncedHoverHandler
-  }
-}