@smallwei/avue 3.8.2 → 3.8.3

package/lib/packages/element-plus/count-up/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <span>{{end}}</span>
+</template>
+
+<script>
+import CountUp from "countup.js";
+import create from "../../../core/create.js";
+export default create({
+  name: "count-up",
+  props: {
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    start: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    end: {
+      required: true
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    options: {
+      type: Object,
+      required: false,
+      default () {
+        return {};
+      }
+    },
+    callback: {
+      type: Function,
+      required: false,
+      default: () => { }
+    }
+  },
+  data () {
+    return {
+      c: null
+    };
+  },
+  watch: {
+    decimals () {
+      if (this.c && this.c.update) {
+        this.c.update(this.end);
+      }
+    },
+    end (value) {
+      if (this.c && this.c.update) {
+        this.c.update(value);
+      }
+    }
+  },
+  mounted () {
+    if (this.animation) {
+      this.init();
+    }
+
+  },
+  methods: {
+    init () {
+      if (!this.c) {
+        this.c = new CountUp(
+          this.$el,
+          this.start,
+          this.end,
+          this.decimals,
+          this.duration,
+          this.options
+        );
+        this.c.start();
+      }
+    },
+    pauseResume () {
+      if (this.c && this.c.pauseResume) {
+        this.c.pauseResume();
+      }
+    },
+    reset () {
+      if (this.c && this.c.reset) {
+        this.c.reset();
+      }
+    },
+    update (newEndVal) {
+      if (this.c && this.c.update) {
+        this.c.update(newEndVal);
+      }
+    },
+    destroy () {
+      this.c = null;
+    }
+  },
+  beforeUnmount () {
+    this.destroy();
+  },
+
+});
+</script>

package/lib/packages/element-plus/crud/column/column-default.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- 折叠面板  -->
+  <component :is="crud.tableColumnName"
+             v-if="crud.tableOption.expand"
+             type="expand"
+             :class-name="crud.tableOption.expandClassName"
+             :label-class-name="crud.tableOption.expandLabelClassName"
+             :width="crud.tableOption.expandWidth || config.expandWidth"
+             :fixed="validData(crud.tableOption.expandFixed,config.expandFixed)"
+             align="center">
+    <template #="{row}">
+      <slot :row="row"
+            :index="row.$index"
+            name="expand"></slot>
+    </template>
+  </component>
+
+  <!-- 选择框 -->
+  <component :is="crud.tableColumnName"
+             v-if="crud.tableOption.selection"
+             :fixed="validData(crud.tableOption.selectionFixed,config.selectionFixed)"
+             type="selection"
+             :class-name="crud.tableOption.selectionClassName"
+             :label-class-name="crud.tableOption.selectionLabelClassName"
+             :selectable="crud.tableOption.selectable"
+             :reserve-selection="validData(crud.tableOption.reserveSelection)"
+             :width="crud.tableOption.selectionWidth || config.selectionWidth"
+             align="center"></component>
+  <!-- 序号 -->
+  <component :is="crud.tableColumnName"
+             v-if="validData(crud.tableOption.index)"
+             :fixed="validData(crud.tableOption.indexFixed,config.indexFixed)"
+             :label="crud.tableOption.indexLabel || config.indexLabel"
+             type="index"
+             :class-name="crud.tableOption.indexClassName"
+             :label-class-name="crud.tableOption.indexLabelClassName"
+             :width="crud.tableOption.indexWidth || config.indexWidth"
+             :index="indexMethod"
+             align="center">
+    <template #="{$index}">
+      {{ indexMethod($index)}}
+    </template>
+  </component>
+</template>
+
+<script>
+
+import create from "../../../../core/create.js";
+import locale from "../../../../core/locale.js";
+import config from "../config.js";
+import tableItemCard from '../grid/item.vue'
+export default create({
+  name: "crud",
+  data () {
+    return {
+      config: config,
+      rowSortable: null,
+      columnSortable: null,
+    }
+  },
+  components: {
+    tableItemCard
+  },
+  mixins: [locale],
+  inject: ["crud"],
+  watch: {
+    'crud.isSortable' (val) {
+      this.rowDrop(val)
+      this.columnDrop(val)
+    },
+    'crud.isRowSort' (val) {
+      this.rowDrop(val)
+    },
+    'crud.isColumnSort' (val) {
+      this.columnDrop(val)
+    }
+  },
+  mounted () {
+    this.rowDrop()
+    this.columnDrop()
+  },
+  methods: {
+    indexMethod (index) {
+      return (
+        index +
+        1 +
+        ((this.crud.page.currentPage || 1) - 1) *
+        (this.crud.page.pageSize || 10)
+      );
+    },
+    rowDrop (flag) {
+      this.$nextTick(() => {
+        if (flag == false) {
+          this.rowSortable && this.rowSortable.destroy();
+          return
+        }
+        if (!this.crud.$refs.table.$el) return
+        const el = this.crud.$refs.table.$el.querySelectorAll(this.config.dropRowClass)[0]
+        this.rowSortable = this.crud.tableDrop('row', el, evt => {
+          const oldIndex = evt.oldIndex;
+          const newIndex = evt.newIndex;
+          this.crud.$emit('sortable-change', oldIndex, newIndex)
+        })
+      })
+    },
+    columnDrop (flag) {
+      this.$nextTick(() => {
+        if (flag == false) {
+          this.columnSortable && this.columnSortable.destroy();
+          return
+        }
+        if (!this.crud.$refs.table.$el) return
+        const el = this.crud.$refs.table.$el.querySelector(this.config.dropColClass);
+        let noIndexCount = 0;
+        ['selection', 'index', 'expand'].forEach(ele => {
+          if (this.crud.tableOption[ele]) { noIndexCount += 1 }
+        })
+        this.columnSortable = this.crud.tableDrop('column', el, evt => {
+          const newIndex = evt.newIndex - noIndexCount
+          const oldIndex = evt.oldIndex - noIndexCount
+          this.crud.headerSort(oldIndex, newIndex)
+          this.crud.$emit('column-sortable-change', oldIndex, newIndex)
+        })
+      })
+    },
+  }
+})
+</script>

package/lib/packages/element-plus/crud/column/column-dynamic.vue

@@ -0,0 +1,86 @@
+<template>
+  <component
+    :is="crud.tableColumnName"
+    v-if="getColumnProp(columnOption, 'hide')"
+    :prop="columnOption.prop"
+    :label="columnOption.label"
+    :class-name="columnOption.className"
+    :label-class-name="columnOption.labelClassName"
+    filter-placement="bottom-end"
+    :filters="getColumnProp(columnOption, 'filters')"
+    :filter-method="
+      columnOption.filters
+        ? (value, row) =>
+            getColumnProp(columnOption, 'filterMethod', {
+              value,
+              row,
+              column: columnOption,
+            })
+        : undefined
+    "
+    :filter-multiple="validData(columnOption.filterMultiple, true)"
+    :show-overflow-tooltip="
+      columnOption.showOverflowTooltip || columnOption.overHidden
+    "
+    :tooltip-formatter="columnOption.tooltipFormatter"
+    :min-width="columnOption.minWidth"
+    :sortable="getColumnProp(columnOption, 'sortable')"
+    :render-header="columnOption.renderHeader"
+    :align="columnOption.align || crud.tableOption.align"
+    :header-align="columnOption.headerAlign || crud.tableOption.headerAlign"
+    :width="getColumnProp(columnOption, 'width')"
+    :fixed="getColumnProp(columnOption, 'fixed')"
+  >
+    <template #header="{ $index }">
+      <slot
+        :name="crud.getSlotName(columnOption, 'H')"
+        v-if="crud.getSlotName(columnOption, 'H', crud.$slots)"
+        v-bind="{ column: columnOption, $index }"
+      ></slot>
+      <span v-else>{{ columnOption.label }}</span>
+    </template>
+    <template v-for="column in columnOption.children">
+      <column-dynamic
+        v-if="column.children && column.children.length > 0"
+        :key="column.label"
+        :columnOption="column"
+      >
+        <template v-for="item in crud.mainSlot" #[item]="scope">
+          <slot v-bind="scope" :name="item"></slot>
+        </template>
+      </column-dynamic>
+      <column-slot
+        v-else
+        :key="column.prop"
+        :column="column"
+        :column-option="columnOption.children"
+      >
+        <template v-for="item in crud.mainSlot" #[item]="scope">
+          <slot v-bind="scope" :name="item"></slot>
+        </template>
+      </column-slot>
+    </template>
+  </component>
+</template>
+
+<script>
+import columnSlot from "./column-slot.vue";
+import tableItemCard from "../grid/item.vue";
+export default {
+  name: "column-dynamic",
+  components: {
+    columnSlot,
+    tableItemCard,
+  },
+  inject: ["dynamic", "crud"],
+  props: {
+    columnOption: Object,
+  },
+  created() {
+    const list = ["getColumnProp"];
+    list.forEach((ele) => {
+      if (this.dynamic) this[ele] = this.dynamic[ele];
+    });
+  },
+};
+</script>

package/lib/packages/element-plus/crud/column/column-menu.vue

@@ -0,0 +1,267 @@
+<template>
+  <!-- 操作栏 -->
+  <component
+    :is="crud.tableColumnName"
+    prop="menu"
+    :class-name="crud.tableOption.menuClassName"
+    :label-class-name="crud.tableOption.menuLabelClassName"
+    :fixed="validData(crud.tableOption.menuFixed, config.menuFixed)"
+    v-if="
+      validData(crud.tableOption.menu, config.menu) &&
+      crud.getPermission('menu')
+    "
+    :label="crud.tableOption.menuTitle || t('crud.menu')"
+    :align="crud.tableOption.menuAlign || config.menuAlign"
+    :header-align="crud.tableOption.menuHeaderAlign || config.menuHeaderAlign"
+    :width="
+      crud.isMobile
+        ? crud.tableOption.menuXsWidth || config.menuXsWidth
+        : crud.tableOption.menuWidth || config.menuWidth
+    "
+  >
+    <template #header="scope">
+      <slot
+        name="menu-header"
+        v-bind="scope"
+        :size="crud.size"
+        v-if="crud.getSlotName({ prop: 'menu' }, 'H', crud.$slots)"
+      ></slot>
+      <span v-else>{{ crud.tableOption.menuTitle || t("crud.menu") }}</span>
+    </template>
+    <template #="{ row, column, $index }">
+      <div :class="b('menu')">
+        <slot
+          name="menu-before"
+          v-bind="menuParams({ row, column, $index })"
+        ></slot>
+        <el-dropdown v-if="isMenu" :size="crud.size">
+          <el-button text type="primary" :size="crud.size">
+            {{ crud.tableOption.menuBtnTitle || t("crud.menuBtn") }}
+            <el-icon class="el-icon--right&quot;">
+              <el-icon-arrow-down />
+            </el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <slot
+                name="menu-btn-before"
+                v-bind="menuParams({ row, column, $index })"
+              ></slot>
+              <el-dropdown-item
+                :icon="crud.getBtnIcon('viewBtn')"
+                :class="b('viewBtn')"
+                v-if="validData(crud.tableOption.viewBtn, config.viewBtn) && crud.getPermission('viewBtn', row, $index)"
+                @click="crud.rowView(row, $index)"
+                >{{ crud.menuIcon("viewBtn") }}</el-dropdown-item
+              >
+              <el-dropdown-item
+                :icon="crud.getBtnIcon('copyBtn')"
+                :class="b('copyBtn')"
+                v-if="validData(crud.tableOption.copyBtn, config.copyBtn) && crud.getPermission('copyBtn', row, $index)"
+                @click="crud.rowCopy(row)"
+                >{{ crud.menuIcon("copyBtn") }}</el-dropdown-item
+              >
+              <el-dropdown-item
+                :icon="crud.getBtnIcon('editBtn')"
+                :class="b('editBtn')"
+                v-if="validData(crud.tableOption.editBtn, config.editBtn) && crud.getPermission('editBtn', row, $index)"
+                @click="crud.rowEdit(row, $index)"
+                >{{ crud.menuIcon("editBtn") }}</el-dropdown-item
+              >
+              <el-dropdown-item
+                :icon="crud.getBtnIcon('delBtn')"
+                :class="b('delBtn')"
+                v-if="validData(crud.tableOption.delBtn, config.delBtn) && crud.getPermission('delBtn', row, $index)"
+                @click="crud.rowDel(row, $index)"
+                >{{ crud.menuIcon("delBtn") }}</el-dropdown-item
+              >
+              <slot
+                name="menu-btn"
+                v-bind="menuParams({ row, column, $index })"
+              ></slot>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <template v-else-if="['button', 'text', 'icon'].includes(menuType)">
+          <template v-if="validData(crud.tableOption.cellBtn, config.cellBtn)">
+            <el-button
+              :type="menuText('primary')"
+              :class="b('editBtn')"
+              :text="isTextMenu"
+              :icon="crud.getBtnIcon('editBtn')"
+              :size="crud.size"
+              :disabled="crud.btnDisabledList[$index]"
+              @click.stop="crud.rowCell(row, $index)"
+              v-if="
+                validData(crud.tableOption.editBtn, config.editBtn) &&
+                !row.$cellEdit
+              "
+              v-permission="crud.getPermission('editBtn', row, $index)"
+            >
+              <template v-if="!isIconMenu">
+                {{ crud.menuIcon("editBtn") }}
+              </template>
+            </el-button>
+            <el-button
+              :type="menuText('primary')"
+              :class="b('saveBtn')"
+              :text="isTextMenu"
+              :icon="crud.getBtnIcon('saveBtn')"
+              :size="crud.size"
+              :disabled="crud.btnDisabledList[$index]"
+              @click.stop="crud.rowCell(row, $index)"
+              v-else-if="
+                validData(crud.tableOption.saveBtn, config.saveBtn) &&
+                row.$cellEdit
+              "
+              v-permission="crud.getPermission('saveBtn', row, $index)"
+            >
+              <template v-if="!isIconMenu">
+                {{ crud.menuIcon("saveBtn") }}
+              </template>
+            </el-button>
+            <el-button
+              :type="menuText('primary')"
+              :class="b('cancelBtn')"
+              :text="isTextMenu"
+              :icon="crud.getBtnIcon('cancelBtn')"
+              :size="crud.size"
+              :disabled="crud.btnDisabledList[$index]"
+              v-permission="crud.getPermission('cancelBtn', row, $index)"
+              @click.stop="crud.rowCancel(row, $index)"
+              v-if="
+                row.$cellEdit &&
+                validData(crud.tableOption.cancelBtn, config.cancelBtn)
+              "
+            >
+              <template v-if="!isIconMenu">
+                {{ crud.menuIcon("cancelBtn") }}
+              </template>
+            </el-button>
+          </template>
+          <el-button
+            :type="menuText('primary')"
+            :class="b('viewBtn')"
+            :text="isTextMenu"
+            :icon="crud.getBtnIcon('viewBtn')"
+            :size="crud.size"
+            :disabled="crud.btnDisabled"
+            @click.stop="crud.rowView(row, $index)"
+            v-permission="crud.getPermission('viewBtn', row, $index)"
+            v-if="validData(crud.tableOption.viewBtn, config.viewBtn)"
+          >
+            <template v-if="!isIconMenu">
+              {{ crud.menuIcon("viewBtn") }}
+            </template>
+          </el-button>
+          <el-button
+            :type="menuText('primary')"
+            :class="b('copyBtn')"
+            :text="isTextMenu"
+            :icon="crud.getBtnIcon('copyBtn')"
+            :size="crud.size"
+            :disabled="crud.btnDisabled"
+            @click.stop="crud.rowCopy(row)"
+            v-permission="crud.getPermission('copyBtn', row, $index)"
+            v-if="validData(crud.tableOption.copyBtn, config.copyBtn)"
+          >
+            <template v-if="!isIconMenu">
+              {{ crud.menuIcon("copyBtn") }}
+            </template>
+          </el-button>
+          <el-button
+            :type="menuText('primary')"
+            :class="b('editBtn')"
+            :text="isTextMenu"
+            :icon="crud.getBtnIcon('editBtn')"
+            :size="crud.size"
+            :disabled="crud.btnDisabled"
+            @click.stop="crud.rowEdit(row, $index)"
+            v-permission="crud.getPermission('editBtn', row, $index)"
+            v-if="
+              validData(crud.tableOption.editBtn, config.editBtn) &&
+              !crud.tableOption.cellBtn
+            "
+          >
+            <template v-if="!isIconMenu">
+              {{ crud.menuIcon("editBtn") }}
+            </template>
+          </el-button>
+          <el-button
+            :type="menuText('primary')"
+            :class="b('delBtn')"
+            :text="isTextMenu"
+            :icon="crud.getBtnIcon('delBtn')"
+            :size="crud.size"
+            :disabled="crud.btnDisabled"
+            @click.stop="crud.rowDel(row, $index)"
+            v-permission="crud.getPermission('delBtn', row, $index)"
+            v-if="
+              validData(crud.tableOption.delBtn, config.delBtn) &&
+              !row.$cellEdit
+            "
+          >
+            <template v-if="!isIconMenu">
+              {{ crud.menuIcon("delBtn") }}
+            </template>
+          </el-button>
+        </template>
+        <slot name="menu" v-bind="menuParams({ row, column, $index })"></slot>
+      </div>
+    </template>
+  </component>
+</template>
+
+<script>
+import create from "../../../../core/create.js";
+import locale from "../../../../core/locale.js";
+import permission from "../../../core/directive/permission.js";
+import config from "../config.js";
+import tableItemCard from "../grid/item.vue";
+export default create({
+  name: "crud",
+  data() {
+    return {
+      config: config,
+    };
+  },
+  components: {
+    tableItemCard,
+  },
+  mixins: [locale],
+  inject: ["crud"],
+  directives: {
+    permission,
+  },
+  computed: {
+    menuType() {
+      return this.crud.tableOption.menuType || this.$AVUE.menuType;
+    },
+    isIconMenu() {
+      return this.menuType === "icon";
+    },
+    isTextMenu() {
+      return this.menuType === "text";
+    },
+    isMenu() {
+      return this.menuType === "menu";
+    },
+  },
+  methods: {
+    menuText(value) {
+      return value;
+    },
+    menuParams({ row, column, $index }) {
+      let parent = this.crud;
+      return {
+        row,
+        column,
+        type: this.menuText("primary"),
+        disabled: parent.btnDisabled,
+        size: parent.size,
+        index: $index,
+      };
+    },
+  },
+});
+</script>