@smallwei/avue 3.8.2 → 3.8.3

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

@@ -0,0 +1,175 @@
+<template>
+  <div :class="b('header')">
+    <div :class="b('left')"
+         v-if="validData(crud.tableOption.menuLeft,true)">
+      <el-button type="primary"
+                 :class="b('addBtn')"
+                 @click="crud.rowAdd"
+                 :icon="crud.getBtnIcon('addBtn')"
+                 :size="crud.size"
+                 v-permission="crud.getPermission('addBtn')"
+                 v-if="validData(crud.tableOption.addBtn,config.addBtn)">
+        <template v-if="!crud.isIconMenu">
+          {{crud.menuIcon('addBtn')}}
+        </template>
+      </el-button>
+      <el-button type="primary"
+                 :class="b('addBtn')"
+                 @click="crud.rowCellAdd"
+                 :icon="crud.getBtnIcon('addBtn')"
+                 v-permission="crud.getPermission('addRowBtn')"
+                 :size="crud.size"
+                 v-if="validData(crud.tableOption.addRowBtn,config.addRowBtn)">
+        <template v-if="!crud.isIconMenu">
+          {{crud.menuIcon('addBtn')}}
+        </template>
+      </el-button>
+      <slot name="menu-left"
+            :size="crud.size"></slot>
+    </div>
+    <div :class="b('right')"
+         v-if="validData(crud.tableOption.menuRight,true)">
+      <avue-date type="datetimerange"
+                 @change="dateChange"
+                 value-format="YYYY-MM-DD HH:mm:ss"
+                 format="YYYY-MM-DD HH:mm:ss"
+                 :shortcuts="shortcuts"
+                 style="display:inline-block;margin-right:20px;"
+                 v-if="validData(crud.tableOption.dateBtn,config.dateBtn)"
+                 :size="crud.size"></avue-date>
+      <slot name="menu-right"
+            :size="crud.size"></slot>
+      <el-button :icon="crud.getBtnIcon('excelBtn')"
+                 :class="b('excelBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="rowExcel"
+                 v-permission="crud.getPermission('excelBtn')"
+                 v-if="validData(crud.tableOption.excelBtn,config.excelBtn)">
+      </el-button>
+      <el-button :icon="crud.getBtnIcon('printBtn')"
+                 :class="b('printBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="rowPrint"
+                 v-permission="crud.getPermission('printBtn')"
+                 v-if="validData(crud.tableOption.printBtn,config.printBtn)">
+      </el-button>
+      <el-button :icon="crud.getBtnIcon('refreshBtn')"
+                 :class="b('refreshBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="crud.refreshChange"
+                 v-permission="crud.getPermission('refreshBtn')"
+                 v-if="validData(crud.tableOption.refreshBtn,config.refreshBtn)"></el-button>
+      <el-button :icon="crud.getBtnIcon('columnBtn')"
+                 :class="b('columnBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="crud.$refs.dialogColumn.handleShow()"
+                 v-permission="crud.getPermission('columnBtn')"
+                 v-if="validData(crud.tableOption.columnBtn,config.columnBtn)"></el-button>
+      <el-button :icon="crud.getBtnIcon('searchBtn')"
+                 :class="b('searchBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="crud.$refs.headerSearch.handleSearchShow()"
+                 v-if="(crud.$refs.headerSearch || {}).searchFlag&&validData(crud.tableOption.searchShowBtn,true)"></el-button>
+      <el-button :icon="crud.getBtnIcon('filterBtn')"
+                 :class="b('filterBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="crud.$refs.dialogFilter.handleShow()"
+                 v-permission="crud.getPermission('filterBtn')"
+                 v-if="validData(crud.tableOption.filterBtn,config.filterBtn)"></el-button>
+
+      <el-button :icon="crud.getBtnIcon('gridBtn')"
+                 :class="b('gridBtn')"
+                 circle
+                 :size="crud.size"
+                 @click="crud.handleGridShow()"
+                 v-permission="crud.getPermission('gridBtn')"
+                 v-if="validData(crud.tableOption.gridBtn,config.gridBtn)"></el-button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../../core/create.js";
+import locale from "../../../../core/locale.js";
+import packages from "../../../../core/packages.js";
+import permission from '../../../core/directive/permission.js';
+import { validData, getAsVal } from "../../../../utils/util.js";
+import config from "../config.js";
+export default create({
+  name: "crud",
+  mixins: [locale],
+  directives: {
+    permission
+  },
+  inject: ["crud"],
+  data () {
+    return {
+      dateCreate: false,
+      shortcuts: [
+        {
+          text: this.t('date.t'),
+          value: new Date(),
+        },
+        {
+          text: this.t('date.y'),
+          value: () => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date;
+          },
+        },
+        {
+          text: this.t('date.n'),
+          value: () => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date;
+          },
+        },
+      ],
+      config: config
+    };
+  },
+  created () {
+    this.initFun();
+
+  },
+  computed: {
+    data () {
+      if (this.crud.tableOption.selection) {
+        return this.crud.tableSelect;
+      } else {
+        return this.crud.list;
+      }
+    }
+  },
+  methods: {
+    //日期组件回调
+    dateChange (val) {
+      if (this.dateCreate) {
+        this.crud.$emit("date-change", val);
+      } else {
+        this.dateCreate = true;
+      }
+
+    },
+    initFun () {
+      this.crud.rowExcel = this.rowExcel;
+      this.crud.rowPrint = this.rowPrint;
+    },
+    rowExcel () {
+      this.crud.$refs.dialogExcel.handleShow()
+    },
+    rowPrint () {
+      this.$Print(this.crud.$refs.table)
+    }
+  }
+});
+</script>

package/lib/packages/element-plus/crud/menu/header-search.vue

@@ -0,0 +1,228 @@
+<template>
+  <el-card :shadow="crud.isCard"
+           :class="b()"
+           v-if="searchFlag"
+           v-show="searchShow && searchFlag">
+    <slot name="search"
+          :row="searchForm"
+          :search="searchForm"
+          :size="crud.size"></slot>
+    <avue-form :option="option"
+               ref="form"
+               @submit="searchChange"
+               @reset-change="resetChange"
+               v-model="searchForm">
+      <template #menu-form="scope">
+        <slot name="search-menu"
+              v-bind="Object.assign(scope,{
+                  search:searchForm,
+                  row:searchForm
+                })"></slot>
+        <template v-if="isSearchIcon">
+          <el-button text
+                     v-if="show===false"
+                     @click="handleSearchIconShow"
+                     icon="el-icon-arrow-down">{{t('crud.open')}}</el-button>
+          <el-button text
+                     v-if="show===true"
+                     @click="handleSearchIconShow"
+                     icon="el-icon-arrow-up">{{t('crud.shrink')}}</el-button>
+        </template>
+
+      </template>
+      <template v-for="item in crud.searchSlot"
+                #[getSlotName(item)]="scope">
+        <slot v-bind="scope"
+              :name="item"></slot>
+      </template>
+    </avue-form>
+  </el-card>
+</template>
+
+<script>
+import create from "../../../../core/create.js";
+import locale from "../../../../core/locale.js";
+import { validData } from "../../../../utils/util.js";
+import { validatenull } from "../../../../utils/validate.js";
+import slot from '../../../../core/slot.js'
+import { getSearchType, getType } from "../../../../core/dataformat.js";
+import { filterParams } from '../../../../utils/util.js'
+import config from "../config.js";
+export default create({
+  name: "crud__search",
+  inject: ["crud"],
+  mixins: [locale, slot],
+  data () {
+    return {
+      show: false,
+      searchShow: true
+    };
+  },
+  watch: {
+    "crud.propOption": {
+      handler () {
+        this.searchShow = validData(this.crud.tableOption.searchShow, config.searchShow);
+      },
+      immediate: true
+    },
+    show () {
+      this.crud.getTableHeight()
+    },
+    searchShow () {
+      this.crud.getTableHeight()
+    }
+  },
+  created () {
+    this.initFun();
+  },
+  computed: {
+    searchForm: {
+      get () {
+        return this.crud.search
+      },
+      set (val) {
+        this.crud.$emit('update:search', val)
+      }
+    },
+    isGroup () {
+      return !this.validatenull(this.crud.tableOption.group);
+    },
+    isSearchIcon () {
+      return this.validData(this.crud.tableOption.searchIcon, this.$AVUE.searchIcon) === true && this.columnLen > this.searchIndex
+    },
+    searchIndex () {
+      return this.crud.tableOption.searchIndex || 2
+    },
+    columnLen () {
+      let count = 0;
+      this.crud.propOption.forEach(ele => {
+        if (ele.search) count++
+      })
+      return count
+    },
+    option () {
+      const option = this.crud.tableOption;
+      const detailColumn = (list = []) => {
+        list = this.deepClone(list);
+        let column = [];
+        let count = 0;
+        list = list.sort((a, b) => (b.searchOrder || 0) - (a.searchOrder || 0))
+        list.forEach(ele => {
+          if (ele.search) {
+            let isCount = count < this.searchIndex
+            let obj = {}
+            Object.keys(ele).forEach(item => {
+              let key = 'search'
+              if (item == 'searchProp') return
+              if (item.includes(key)) {
+                let result = item.replace(key, '')
+                if (result.length == 0) return
+                result = result.replace(result, result.toLowerCase())
+                obj[result] = ele[item];
+              }
+            })
+            ele = Object.assign(ele, obj, {
+              type: getSearchType(ele),
+              detail: false,
+              dicFlag: ele.cascader ? true : this.validData(ele.dicFlag, false),
+              span: ele.searchSpan || option.searchSpan || config.searchSpan,
+              control: ele.searchControl,
+              labelWidth: ele.searchLabelWidth || option.searchLabelWidth || config.searchLabelWidth,
+              labelPosition: ele.searchLabelPosition || option.searchLabelPosition,
+              size: ele.searchSize || option.searchSize,
+              value: ele.searchValue,
+              rules: ele.searchRules,
+              render: ele.renderSearch,
+              row: ele.searchRow,
+              bind: ele.searchBin,
+              disabled: ele.searchDisabled,
+              readonly: ele.searchReadonly,
+              display: this.isSearchIcon ? (this.show ? true : isCount) : true,
+            })
+            column.push(ele);
+            count = count + 1;
+          }
+        })
+        return column;
+      }
+      const detailOption = (list) => {
+        let result = this.deepClone(list);
+        let obj = {}
+        Object.keys(result).forEach(item => {
+          let key = 'search'
+          if (item.includes(key)) {
+            let str = item.replace(key, '')
+            if (str.length == 0) return
+            str = str.replace(str[0], str[0].toLowerCase())
+            obj[str] = result[item];
+          }
+        })
+        result.column = detailColumn(this.crud.propOption)
+        result = Object.assign(result, obj, {
+          rowKey: option.searchRowKey || 'null',
+          tabs: false,
+          group: false,
+          printBtn: false,
+          mockBtn: false,
+          submitText: option.searchBtnText || this.t('crud.searchBtn'),
+          submitBtn: this.validData(option.searchBtn, config.searchSubBtn),
+          submitIcon: this.crud.getBtnIcon('searchBtn'),
+          emptyText: option.emptyBtnText || this.t('crud.emptyBtn'),
+          emptyBtn: this.validData(option.emptyBtn, config.emptyBtn),
+          emptyIcon: this.crud.getBtnIcon('emptyBtn'),
+          menuSpan: (() => {
+            if (this.show || !this.isSearchIcon) {
+              return option.searchMenuSpan || option.searchSpan
+            } else {
+              return option.searchMenuSpan || 6
+            }
+          })(),
+          menuPosition: option.searchMenuPosition || 'center',
+          dicFlag: false,
+          dicData: this.crud.DIC
+        })
+        return result;
+      }
+      let result = detailOption(option)
+      return result;
+    },
+    searchFlag () {
+      return !!this.crud.$slots.search || this.columnLen !== 0
+    }
+  },
+  methods: {
+    initFun () {
+      ['searchReset', 'searchChange'].forEach(ele => this.crud[ele] = this[ele])
+    },
+    getSlotName (item) {
+      return item.replace('-search', '')
+    },
+    // 搜索回调
+    searchChange (form, done) {
+      form = filterParams(form);
+      this.crud.propOption.forEach(ele => {
+        if (ele.searchProp) {
+          form[ele.searchProp] = form[ele.prop]
+          delete form[ele.prop]
+        }
+      })
+      this.crud.$emit("search-change", form, done);
+    },
+    // 搜索清空
+    resetChange () {
+      this.crud.$emit("search-reset", this.searchForm);
+    },
+    // 搜索清空
+    searchReset () {
+      this.$refs.form.resetForm();
+    },
+    handleSearchIconShow () {
+      this.show = !this.show;
+      this.crud.$emit('search-icon-change', this.show)
+    },
+    handleSearchShow () {
+      this.searchShow = !this.searchShow;
+    }
+  }
+});
+</script>

package/lib/packages/element-plus/crud/menu/table-page.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-card :shadow="crud.isCard"
+           :class="b('pagination')"
+           v-if="pageFlag && validData(crud.tableOption.page,true)">
+    <slot name="page"></slot>
+    <el-pagination :size="crud.size"
+                   :disabled="defaultPage.disabled"
+                   :hide-on-single-page="defaultPage.single"
+                   :pager-count="defaultPage.pagerCount"
+                   :page-sizes="defaultPage.pageSizes"
+                   :background="defaultPage.background"
+                   v-model:page-size="defaultPage.pageSize"
+                   v-model:current-page="defaultPage.currentPage"
+                   @size-change="sizeChange"
+                   @prev-click="prevClick"
+                   @next-click="nextClick"
+                   @current-change="currentChange"
+                   :layout="defaultPage.layout"
+                   :total="defaultPage.total"></el-pagination>
+  </el-card>
+</template>
+
+<script>
+import config from "../config.js";
+import create from "../../../../core/create.js";
+export default create({
+  name: "crud",
+  inject: ["crud"],
+  props: {
+    page: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      config: config,
+      defaultPage: {
+        single: false,//简单分页
+        total: 0, // 总页数
+        pagerCount: 7,//超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true // 背景颜色
+      }
+    };
+  },
+  created () {
+    if (this.crud.isMobile) {
+      this.defaultPage.layout = 'total, sizes, prev, pager, next'
+    }
+    this.pageInit();
+    this.crud.$emit("on-load", this.defaultPage);
+  },
+  watch: {
+    'crud.page': {
+      handler () {
+        this.pageInit();
+      },
+      deep: true,
+    },
+    pageFlag () {
+      this.crud.getTableHeight();
+    },
+  },
+  computed: {
+    pageFlag () {
+      return this.defaultPage.total != 0
+    }
+  },
+  methods: {
+    pageInit () {
+      this.defaultPage = Object.assign(this.defaultPage, this.crud.page)
+      this.updateValue();
+    },
+    updateValue () {
+      this.crud.$emit('update:page', this.defaultPage)
+    },
+    //下一页事件
+    nextClick (val) {
+      this.crud.$emit("next-click", val)
+    },
+    //上一页事件
+    prevClick (val) {
+      this.crud.$emit("prev-click", val)
+    },
+    // 页大小回调
+    sizeChange (val) {
+      this.defaultPage.currentPage = 1;
+      this.defaultPage.pageSize = val;
+      this.updateValue();
+      this.crud.$emit("on-load", this.defaultPage);
+      this.crud.$emit("size-change", val);
+    },
+    // 页码回调
+    currentChange (val) {
+      this.defaultPage.currentPage = val;
+      this.updateValue();
+      this.crud.$emit("on-load", this.defaultPage);
+      this.crud.$emit("current-change", val);
+    }
+  }
+});
+</script>

package/lib/packages/element-plus/date/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="b()">
+    <el-date-picker
+      :type="type"
+      v-model="text"
+      :popper-class="popperClass"
+      :size="size"
+      :cell-class-name="cellClassName"
+      :editable="editable"
+      :unlink-panels="unlinkPanels"
+      :default-value="defaultValue"
+      :default-time="defaultTime"
+      :range-separator="rangeSeparator"
+      :start-placeholder="startPlaceholder || t('date.start')"
+      :end-placeholder="endPlaceholder || t('date.end')"
+      :format="format"
+      :clearable="clearableVal"
+      :shortcuts="shortcuts"
+      :disabled-date="disabledDate"
+      :disabled-hours="disabledHours"
+      :disabled-minutes="disabledMinutes"
+      :disabled-seconds="disabledSeconds"
+      :value-format="valueFormat"
+      :placeholder="placeholder"
+      :prefix-icon="prefixIcon"
+      :show-now="showNow"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @click="handleClick"
+      :readonly="readonly"
+      :disabled="disabled"
+    >
+      <template #="cell">
+        <div class="el-date-table-cell">
+          <slot :item="cell" v-if="$slots.default"> </slot>
+          <span class="el-date-table-cell__text" v-else>{{
+            cell.renderText || cell.text
+          }}</span>
+        </div>
+      </template>
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+import locale from "../../../core/locale.js";
+import props from "../../core/common/props.js";
+import event from "../../core/common/event.js";
+export default create({
+  name: "date",
+  mixins: [props(), event(), locale],
+  props: {
+    cellClassName: String,
+    prefixIcon: String,
+    disabledDate: Function,
+    disabledHours: Function,
+    disabledMinutes: Function,
+    disabledSeconds: Function,
+    showNow: Boolean,
+    shortcuts: [Array, Function],
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    unlinkPanels: Boolean,
+    value: {},
+    startPlaceholder: String,
+    endPlaceholder: String,
+    rangeSeparator: String,
+    defaultValue: [String, Array],
+    defaultTime: [String, Array],
+    type: {
+      type: String,
+      default: "date",
+    },
+    valueFormat: String,
+    format: String,
+  },
+});
+</script>