@smallwei/avue 3.8.2 → 3.8.3

package/es/packages/element-plus/crud/dialog/dialog-form.vue

@@ -0,0 +1,352 @@
+<template>
+  <component
+    v-if="boxVisible"
+    :is="dialogType"
+    :draggable="validData(crud.tableOption.dialogDrag, config.dialogDrag)"
+    :class="[
+      'avue-dialog',
+      b('dialog'),
+      this.crud.tableOption.dialogCustomClass,
+    ]"
+    :append-to-body="validData(crud.tableOption.dialogAppendToBody, true)"
+    :top="dialogTop"
+    :title="dialogTitle"
+    :close-on-press-escape="crud.tableOption.dialogEscape"
+    :close-on-click-modal="validData(crud.tableOption.dialogClickModal, false)"
+    :modal="crud.tableOption.dialogModal"
+    :modal-penetrable="crud.tableOption.modalPenetrable"
+    :show-close="crud.tableOption.dialogCloseBtn"
+    :header-class="crud.tableOption.headerClass"
+    :body-class="crud.tableOption.bodyClass"
+    :footer-class="crud.tableOption.footerClass"
+    v-model="boxVisible"
+    v-bind="params"
+    :before-close="hide"
+  >
+    <template #header>
+      <div :class="b('dialog__header')">
+        <span class="el-dialog__title">{{ dialogTitle }}</span>
+        <div :class="b('dialog__menu')">
+          <el-icon class="el-dialog__close" @click="handleFullScreen">
+            <component
+              :is="fullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"
+            />
+          </el-icon>
+        </div>
+      </div>
+    </template>
+    <avue-form
+      v-model="crud.tableForm"
+      v-model:status="disabled"
+      ref="tableForm"
+      @change="handleChange"
+      @submit="handleSubmit"
+      @reset-change="hide"
+      @tab-click="handleTabClick"
+      @error="handleError"
+      v-bind="$uploadFun(null, crud)"
+      v-loading="loading"
+      :element-loading-text="crud.tableOption.loadingText"
+      :element-loading-spinner="crud.tableOption.loadingSpinner"
+      :element-loading-svg="crud.tableOption.loadingSvg"
+      :element-loading-background="crud.tableOption.loadingBackground"
+      :option="option"
+    >
+      <!-- 循环form表单卡槽 -->
+      <template v-for="item in crud.formSlot" #[getSlotName(item)]="scope">
+        <slot
+          :name="item"
+          v-bind="Object.assign(scope, { type: boxType })"
+        ></slot>
+      </template>
+    </avue-form>
+    <span
+      class="avue-dialog__footer"
+      :class="'avue-dialog__footer--' + dialogMenuPosition"
+    >
+      <slot name="menu-form-before" v-bind="menuParams()"></slot>
+      <el-button
+        type="primary"
+        @click="($refs.tableForm || {}).handleMock"
+        :loading="disabled || loading"
+        :size="crud.size"
+        :icon="option.mockIcon"
+        v-if="validData(option.mockBtn, false) && !isView"
+      >
+        {{ option.mockText }}
+      </el-button>
+      <el-button
+        v-if="validData(option.submitBtn, true) && !isView"
+        @click="submit"
+        :loading="disabled || loading"
+        :size="crud.size"
+        :icon="option.submitIcon"
+        type="primary"
+        >{{ option.submitText }}</el-button
+      >
+      <el-button
+        v-if="validData(option.emptyBtn, true) && !isView"
+        @click="reset"
+        :disabled="disabled || loading"
+        :size="crud.size"
+        :icon="option.emptyIcon"
+        >{{ option.emptyText }}</el-button
+      >
+      <slot name="menu-form" v-bind="menuParams()"></slot>
+    </span>
+  </component>
+</template>
+
+<script>
+import create from "../../../../core/create.mjs";
+import locale from "../../../../core/locale.mjs";
+import config from "../config.mjs";
+import { filterParams } from "../../../../utils/util.mjs";
+export default create({
+  name: "crud",
+  mixins: [locale],
+  emits: ["update:modelValue", "change"],
+  inject: ["crud"],
+  data() {
+    return {
+      loading: false,
+      disabled: false,
+      config: config,
+      boxType: "",
+      fullscreen: false,
+      boxVisible: false,
+    };
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isView() {
+      return this.boxType === "view";
+    },
+    isAdd() {
+      return this.boxType === "add";
+    },
+    isEdit() {
+      return this.boxType === "edit";
+    },
+    width() {
+      let dialogWidth = this.crud.tableOption.dialogWidth + "";
+      let defaultWidth = this.crud.isMobile ? "100%" : config.dialogWidth;
+      let result = this.validData(dialogWidth, defaultWidth);
+      return this.setPx(result);
+    },
+    dialogType() {
+      return this.isDrawer ? "elDrawer" : "elDialog";
+    },
+    dialogTop() {
+      return !this.isDrawer && !this.fullscreen
+        ? this.crud.tableOption.dialogTop
+        : "0";
+    },
+    isDrawer() {
+      return this.crud.tableOption.dialogType === "drawer";
+    },
+    params() {
+      let result = this.isDrawer
+        ? {
+            size: this.fullscreen ? "100%" : this.width,
+            direction: this.crud.tableOption.dialogDirection,
+          }
+        : {
+            width: this.width,
+            fullscreen: this.fullscreen,
+          };
+      return Object.assign(result, this.$uploadFun({}, this.crud));
+    },
+    option() {
+      let option = this.deepClone(this.crud.tableOption);
+      option.boxType = this.boxType;
+      option.column = this.deepClone(this.crud.propOption);
+      option.column.forEach((ele) => {
+        delete ele.render;
+        if (ele.renderForm) ele.render = ele.renderForm;
+      });
+      option.menuBtn = false;
+      if (this.isAdd) {
+        option.submitBtn = option.saveBtn;
+        option.submitText = this.crud.menuIcon("saveBtn");
+        option.submitIcon = this.crud.getBtnIcon("saveBtn");
+      } else if (this.isEdit) {
+        option.submitBtn = option.updateBtn;
+        option.submitText = this.crud.menuIcon("updateBtn");
+        option.submitIcon = this.crud.getBtnIcon("updateBtn");
+      } else if (this.isView) {
+        option.detail = true;
+      }
+      option.mockIcon = this.crud.getBtnIcon("mockBtn");
+      option.mockText = this.crud.menuIcon("mockBtn");
+
+      option.emptyBtn = option.cancelBtn;
+      option.emptyIcon = this.crud.getBtnIcon("cancelBtn");
+      option.emptyText = this.crud.menuIcon("cancelBtn");
+      //不分组的表单不加载字典
+      if (!this.crud.isGroup) {
+        option.dicFlag = false;
+        option.dicData = this.crud.DIC;
+      }
+      if (!this.validatenull(option.dicFlag)) {
+        option.column.forEach((ele) => {
+          ele.boxType = this.boxType;
+          ele.dicFlag = ele.dicFlag || option.dicFlag;
+        });
+      }
+      return option;
+    },
+    dialogTitle() {
+      const key = `${this.boxType}`;
+      if (!this.validatenull(this.boxType)) {
+        return (
+          this.crud.tableOption[key + "Title"] || this.t(`crud.${key}Title`)
+        );
+      }
+    },
+    dialogMenuPosition() {
+      return this.crud.tableOption.dialogMenuPosition || "right";
+    },
+  },
+  methods: {
+    menuParams() {
+      return {
+        disabled: this.disabled,
+        size: this.crud.size,
+        type: this.boxType,
+      };
+    },
+    submit() {
+      this.$refs.tableForm.submit();
+    },
+    reset() {
+      this.$refs.tableForm.resetForm(false);
+    },
+    getSlotName(item) {
+      return item.replace("-form", "");
+    },
+    handleChange() {
+      this.crud.setVal();
+    },
+    handleTabClick(tab, event) {
+      this.crud.$emit("tab-click", tab, event);
+    },
+    handleFullScreen() {
+      if (this.fullscreen) {
+        this.fullscreen = false;
+      } else {
+        this.fullscreen = true;
+      }
+    },
+    handleError(error) {
+      this.crud.$emit("error", error);
+    },
+    handleSubmit(form, hide) {
+      if (this.isAdd) {
+        this.rowSave(hide);
+      } else if (this.isEdit) {
+        this.rowUpdate(hide);
+      }
+    },
+    initFun() {
+      ["clearValidate", "validate", "resetForm", "validateField"].forEach(
+        (ele) => {
+          this.crud[ele] = this.$refs.tableForm[ele];
+        }
+      );
+    },
+    // 保存
+    rowSave(hide) {
+      this.crud.$emit(
+        "row-save",
+        filterParams(this.crud.tableForm, ["$"]),
+        this.closeDialog,
+        hide
+      );
+    },
+    // 更新
+    rowUpdate(hide) {
+      this.crud.$emit(
+        "row-update",
+        filterParams(this.crud.tableForm, ["$"]),
+        this.crud.tableIndex,
+        this.closeDialog,
+        hide
+      );
+    },
+    closeDialog(row, index) {
+      row = this.deepClone(row);
+      const callback = () => {
+        if (this.isEdit) {
+          let { parentList, index } = this.crud.findData(row[this.crud.rowKey]);
+          if (parentList) {
+            const oldRow = parentList.splice(index, 1)[0];
+            row[this.crud.childrenKey] = oldRow[this.crud.childrenKey];
+            parentList.splice(index, 0, row);
+          }
+        } else if (this.isAdd) {
+          let { item } = this.crud.findData(row[this.crud.rowParentKey]);
+          if (item) {
+            if (!item[this.crud.childrenKey]) {
+              item[this.crud.childrenKey] = [];
+            }
+            if (this.crud.tableOption.lazy) {
+              item[this.crud.hasChildrenKey] = true;
+            }
+            item[this.crud.childrenKey].push(row);
+          } else {
+            this.crud.list.push(row);
+          }
+        }
+      };
+      if (row) callback();
+      this.hide();
+    },
+    // 隐藏表单
+    hide(done) {
+      const callback = () => {
+        done && done();
+        this.crud.tableIndex = -1;
+        this.crud.tableForm = {};
+        this.crud.setVal();
+        this.boxVisible = false;
+      };
+      if (typeof this.crud.beforeClose === "function") {
+        this.crud.beforeClose(callback, this.boxType);
+      } else {
+        callback();
+      }
+    },
+    // 显示表单
+    show(type) {
+      this.boxType = type;
+      const callback = (fn) => {
+        this.fullscreen = this.crud.tableOption.dialogFullscreen;
+        this.boxVisible = true;
+        this.loading = false;
+        this.$nextTick(() => {
+          this.initFun();
+          fn && fn();
+        });
+      };
+      const loading = () => {
+        callback(() => {
+          this.loading = true;
+        });
+      };
+      if (typeof this.crud.beforeOpen === "function") {
+        this.crud.beforeOpen(callback, this.boxType, loading);
+      } else {
+        callback();
+      }
+    },
+  },
+});
+</script>

package/es/packages/element-plus/crud/grid/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div :class="b()" :style="styleName">
+    <div :class="b('hide')">
+      <slot></slot>
+    </div>
+    <el-checkbox-group
+      v-if="data.length !== 0"
+      v-model="checkList"
+      @change="checkListChange"
+    >
+      <el-row>
+        <el-col
+          v-for="(row, index) in data"
+          @click.stop="handleRowClick(row, index)"
+          @dblclick.stop="handleRowDblClick(row, index)"
+          :span="crud.tableOption.gridSpan || span"
+          :md="crud.tableOption.gridSpan || span"
+          :sm="crud.tableOption.gridSpan || span"
+          :xs="crud.tableOption.gridXsSpan || xsSpan"
+          :class="getRowClass(row, index)"
+          :key="index"
+        >
+          <div
+            :class="b('content')"
+            :style="[getGradientColor(row, index), getRowStyle(row, index)]"
+          >
+            <div
+              v-for="(item, columnIndex) in column"
+              :class="[
+                b('item'),
+                item.type || item.prop,
+                getClass(row, index, item),
+              ]"
+              :style="getCellStyle(row, index, item, columnIndex)"
+              @click.stop="handleCellClick(row, item)"
+              @dblclick.stop="handleCellDblClick(row, item)"
+              :key="columnIndex"
+            >
+              <span v-if="item.type == 'selection'">
+                <el-checkbox
+                  :value="index"
+                  :label="index"
+                  :disabled="isDisabled(row, index)"
+                  @click.stop
+                  >&nbsp;</el-checkbox
+                >
+              </span>
+              <template v-else>
+                <template
+                  v-for="(comp, compIndex) in item.header &&
+                  item.header({ row: row, $index: index, column: item })"
+                  :key="compIndex"
+                >
+                  <component
+                    :class="[b('label'), item.labelClassName]"
+                    :is="comp"
+                  ></component>
+                </template>
+                <template
+                  v-for="(comp, compIndex) in item.default &&
+                  item.default({ row: row, $index: index, column: item })"
+                  :key="compIndex"
+                >
+                  <component
+                    placement="top"
+                    :is="
+                      item.overHidden || item.showOverflowTooltip
+                        ? 'elTooltip'
+                        : 'div'
+                    "
+                    :class="[b('value'), item.className]"
+                    :content="row[item.prop]"
+                  >
+                    <component :is="comp"></component>
+                  </component>
+                </template>
+              </template>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-checkbox-group>
+    <template v-else>
+      <slot name="empty" v-if="$slots.empty"></slot>
+      <el-empty
+        v-else
+        :image-size="100"
+        :description="crud.tableOption.emptyText || t('crud.emptyText')"
+      ></el-empty>
+    </template>
+  </div>
+</template>
+
+<script>
+import create from "../../../../core/create.mjs";
+import locale from "../../../../core/locale.mjs";
+export default create({
+  name: "crud__grid",
+  inject: ["crud"],
+  mixins: [locale],
+  provide() {
+    return {
+      dynamic: this,
+    };
+  },
+  props: {
+    rowStyle: Function,
+    cellStyle: Function,
+    cellClassName: Function,
+    rowClassName: Function,
+    height: [String, Number],
+    data: Array,
+  },
+  data() {
+    return {
+      checkList: [],
+      span: 8,
+      xsSpan: 12,
+      id: "crud-grid",
+      column: [],
+    };
+  },
+  computed: {
+    styleName() {
+      return {
+        height: this.crud.tableHeight + "px",
+      };
+    },
+  },
+  methods: {
+    doLayout() {},
+    //表格筛选逻辑
+    handleFilterMethod(params) {
+      const { value, row, column } = params;
+      if (typeof column.filterMethod === "function") {
+        return column.filterMethod(value, row, column);
+      } else {
+        return row[column.prop] == value;
+      }
+    },
+    //表格筛选字典
+    handleFilters(column) {
+      if (Array.isArray(column.filters))
+        return column.filters.map((ele) => ({
+          text: ele.label,
+          value: ele.value,
+        }));
+      if (column.filters !== true) return undefined;
+      let DIC = this.crud.DIC[column.prop] || [];
+      let list = [];
+      if (!this.validatenull(DIC)) {
+        DIC.forEach((ele) => {
+          const props = column.props || this.crud.tableOption.props || {};
+          list.push({
+            text: ele[props.label || DIC_PROPS.label],
+            value: ele[props.value || DIC_PROPS.value],
+          });
+        });
+      } else {
+        this.crud.cellForm.list.forEach((ele) => {
+          if (!list.map((item) => item.text).includes(ele[column.prop])) {
+            list.push({
+              text: ele[column.prop],
+              value: ele[column.prop],
+            });
+          }
+        });
+      }
+      return list;
+    },
+    getColumnProp(column, type, params) {
+      let obj = column || {};
+      if (type === "filterMethod") return this.handleFilterMethod(params);
+      if (this.crud.isMobile && ["fixed"].includes(type)) return false;
+      let result = obj?.[type];
+      if (type == "width" && result == 0) {
+        return undefined;
+      }
+      if (type == "filters") return this.handleFilters(column);
+      if (type == "hide") return obj?.hide !== true;
+      else return result;
+    },
+    isDisabled(row, index) {
+      return typeof this.crud.tableOption.selectable === "function"
+        ? !this.crud.tableOption.selectable(row, index)
+        : false;
+    },
+    clearSelection() {
+      this.checkList = [];
+      this.checkListChange(this.checkList);
+    },
+    toggleAllSelection() {
+      if (this.checkList.length === this.crud.data.length) {
+        this.checkList = [];
+      } else {
+        this.checkList = this.crud.data.map((ele, index) => index);
+      }
+      this.checkListChange(this.checkList);
+    },
+    toggleRowSelection(data, selected) {
+      let index = this.crud.data.findIndex(
+        (ele) => JSON.stringify(ele) == JSON.stringify(data)
+      );
+      if (selected && index != -1) {
+        this.checkList.push(index);
+      } else {
+        let checkIndex = this.checkList.findIndex((ele) => ele == index);
+        this.checkList.splice(checkIndex, 1);
+      }
+      this.checkListChange(this.checkList);
+    },
+    checkListChange(val) {
+      let result = [];
+      const data = this.crud.data;
+      val.forEach((ele) => {
+        result.push(data[ele]);
+      });
+      this.$emit("selection-change", result);
+    },
+    handleRowDblClick(row, index) {
+      this.$emit("row-dblclick", row, index);
+    },
+    handleRowClick(row, index) {
+      this.$emit("row-click", row, index);
+    },
+    handleCellDblClick(row, column) {
+      this.$emit("cell-dblclick", row, column);
+    },
+    handleCellClick(row, column) {
+      this.$emit("cell-click", row, column);
+    },
+    getGradientColor(row, index) {
+      let styles = {};
+      if (typeof this.crud.tableOption.gridBackground == "function") {
+        styles.background = this.crud.tableOption.gridBackground(row, index);
+      } else if (this.crud.tableOption.gridBackgroundImage) {
+        styles.backgroundImage = `url(${this.crud.tableOption.gridBackgroundImage})`;
+      } else {
+        styles.background =
+          this.crud.tableOption.gridBackground ||
+          "linear-gradient(to bottom, rgba(88, 159, 248, 0.1), white)";
+      }
+      return styles;
+    },
+    getCellStyle(row, index, column, columnIndex) {
+      if (this.cellStyle)
+        return this.cellStyle({ row, rowIndex: index, column, columnIndex });
+    },
+    getRowStyle(row, index) {
+      if (this.rowStyle) return this.rowStyle({ row, rowIndex: index });
+    },
+    getRowClass(row, index) {
+      if (this.rowClassName) return this.rowClassName({ row, rowIndex: index });
+    },
+    getClass(row, index, column) {
+      let list = [];
+      let firstIndex = this.crud.columnOption.findIndex(
+        (item) => item.hide !== true
+      );
+      const columnOption = this.crud.columnOption || [];
+      if (this.cellClassName)
+        list.push(this.cellClassName({ row, rowIndex: index, column }));
+      if (column.prop == (columnOption[firstIndex || 0] || {}).prop)
+        list.push("title");
+      if (column.row) list.push("row");
+      if (column.showOverflowTooltip) list.push("overHidden");
+      return list;
+    },
+  },
+});
+</script>

package/es/packages/element-plus/crud/grid/item.vue

@@ -0,0 +1,39 @@
+<template></template>
+
+<script>
+export default {
+  props: {
+    className: String,
+    labeClassName: String,
+    showOverflowTooltip: Boolean,
+    gridRow: Boolean,
+    prop: String,
+    type: String,
+    label: String,
+  },
+  computed: {
+    parent() {
+      let parent = this.$parent;
+      while (parent.$parent && !parent.id) {
+        parent = parent.$parent;
+      }
+      return parent;
+    },
+  },
+  mounted() {
+    this.parent.column.push({
+      className: this.className,
+      labeClassName: this.labeClassName,
+      showOverflowTooltip: this.showOverflowTooltip,
+      row: this.gridRow,
+      label: this.label,
+      prop: this.prop,
+      type: this.type,
+      header: this.$slots.header,
+      default: this.$slots.default,
+    });
+  },
+};
+</script>
+
+<style></style>