@smallwei/avue 3.8.1 → 3.8.3

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

@@ -0,0 +1,348 @@
+<template>
+  <component
+    :is="crud.tableColumnName"
+    v-if="getColumnProp(column, 'hide')"
+    :key="column.prop"
+    :prop="column.prop"
+    :grid-row="column.gridRow"
+    :label="column.label"
+    :class-name="column.className"
+    :label-class-name="column.labelClassName"
+    :column-key="column.prop"
+    :filter-placement="column.filterPlacement"
+    :filtered-value="column.filteredValue"
+    :filtered-multiple="column.filterMultiple"
+    :filters="getColumnProp(column, 'filters')"
+    :filter-method="
+      column.filters
+        ? (value, row) =>
+            getColumnProp(columnOption, 'filterMethod', { value, row, column })
+        : undefined
+    "
+    :filter-multiple="validData(column.filterMultiple, true)"
+    :show-overflow-tooltip="column.showOverflowTooltip || column.overHidden"
+    :tooltip-formatter="column.tooltipFormatter"
+    :min-width="column.minWidth"
+    :sortable="getColumnProp(column, 'sortable')"
+    :sort-method="column.sortMethod"
+    :sort-orders="column.sortOrders"
+    :sort-by="column.sortBy"
+    :resizable="column.resizable"
+    :render-header="column.renderHeader"
+    :align="column.align || crud.tableOption.align"
+    :header-align="column.headerAlign || crud.tableOption.headerAlign"
+    :width="getColumnProp(column, 'width')"
+    :fixed="getColumnProp(column, 'fixed')"
+  >
+    <template #header="{ $index }">
+      <slot
+        :name="crud.getSlotName(column, 'H')"
+        v-if="crud.getSlotName(column, 'H', crud.$slots)"
+        v-bind="{ column, $index }"
+      ></slot>
+      <span v-else>{{ column.label }}</span>
+    </template>
+    <template #="{ row, column: tableColumn, $index }">
+      <el-form-item
+        :prop="crud.isTree ? '' : `list.${$index}.${column.prop}`"
+        :label="validLabel(column, row, ' ')"
+        v-if="row.$cellEdit && column.cell"
+        :label-width="validLabel(column, row, '-1px')"
+        :rules="column.rules"
+      >
+        <el-tooltip
+          :content="(crud.listError[`list.${$index}.${column.prop}`] || {}).msg"
+          :disabled="
+            !(crud.listError[`list.${$index}.${column.prop}`] || {}).valid
+          "
+          placement="top"
+        >
+          <div>
+            <slot
+              v-bind="{
+                row: row,
+                tableColumn: tableColumn,
+                column: column,
+                dic: crud.DIC[column.prop],
+                size: crud.size,
+                index: $index,
+                disabled: crud.btnDisabledList[$index],
+                label: handleDetail(row, column),
+                $cell: row.$cellEdit,
+              }"
+              :name="crud.getSlotName(column, 'F')"
+              v-if="crud.getSlotName(column, 'F', crud.$slots)"
+            ></slot>
+            <form-temp
+              v-else
+              :column="column"
+              :size="crud.size"
+              :index="$index"
+              :row="row"
+              :prop="`list.${$index}.${column.prop}`"
+              :clearValidate="crud.clearValidate"
+              :render="column.renderForm"
+              :table-data="{
+                index: $index,
+                row: row,
+                label: handleDetail(row, column),
+              }"
+              :dic="
+                (crud.cascaderDIC[$index] || {})[column.prop] ||
+                crud.DIC[column.prop]
+              "
+              :props="column.props || crud.tableOption.props"
+              :readonly="column.readonly"
+              :disabled="
+                crud.disabled ||
+                crud.tableOption.disabled ||
+                column.disabled ||
+                crud.btnDisabledList[$index]
+              "
+              :clearable="validData(column.clearable, false)"
+              v-bind="$uploadFun(column, crud)"
+              v-model="row[column.prop]"
+              :column-slot="crud.mainSlot"
+              @change="columnChange(row, column, $index)"
+            >
+              <template v-for="item in crud.mainSlot" #[item]="scope">
+                <slot v-bind="scope" :name="item"></slot>
+              </template>
+            </form-temp>
+          </div>
+        </el-tooltip>
+      </el-form-item>
+      <custom
+        v-else-if="column.render"
+        :column="column"
+        :row="row"
+        :index="$index"
+        :render="column.render"
+        :event="column.event"
+        :params="column.params"
+      ></custom>
+      <slot
+        :row="row"
+        :tableColumn="tableColumn"
+        :column="column"
+        :index="$index"
+        :dic="crud.DIC[column.prop]"
+        :size="crud.size"
+        :label="handleDetail(row, column)"
+        :name="column.prop"
+        v-else-if="crud.$slots[column.prop]"
+      ></slot>
+      <template v-else>
+        <span
+          v-if="['img', 'upload'].includes(column.type)"
+          class="avue-crud__img"
+        >
+          <template
+            v-for="(item, index) in getImgList(row, column)"
+            :key="index"
+          >
+            <component
+              :src="item"
+              v-if="isMediaType(item, column.fileType)"
+              :is="isMediaType(item, column.fileType)"
+              @click.stop="openImg(row, column, index)"
+            ></component>
+            <el-icon v-else @click.stop="openImg(row, column, index)">
+              <el-icon-document></el-icon-document>
+            </el-icon>
+          </template>
+        </span>
+        <el-link
+          v-else-if="'url' === column.type"
+          v-for="(item, index) in corArray(row, column)"
+          type="primary"
+          :key="index"
+          :href="item"
+          :target="column.target || '_blank'"
+          >{{ item }}</el-link
+        >
+        <avue-rate
+          disabled
+          v-else-if="'rate' === column.type"
+          v-model="row[column.prop]"
+        ></avue-rate>
+        <i
+          v-else-if="'color' === column.type"
+          class="avue-crud__color"
+          :style="{ backgroundColor: row[column.prop] }"
+        ></i>
+        <icon-temp
+          v-else-if="'icon' === column.type"
+          :text="row[column.prop]"
+        ></icon-temp>
+        <span v-else-if="column.html" v-html="handleDetail(row, column)"></span>
+        <span
+          v-else
+          :class="{ 'avue-crud__ellipsis': column.ellipsis }"
+          :title="column.ellipsis ? handleDetail(row, column) : ''"
+          v-text="handleDetail(row, column)"
+        ></span>
+      </template>
+    </template>
+  </component>
+</template>
+
+<script>
+let count = {};
+import { detail } from "../../../../core/detail.js";
+import { DIC_PROPS, DIC_SHOW_SPLIT, DIC_SPLIT } from "../../../../global/variable.js";
+import { sendDic } from "../../../../core/dic.js";
+import { isMediaType, blankVal } from "../../../../utils/util.js";
+import custom from "../../../core/components/form/custom.js";
+import formTemp from "../../../core/components/form/index.vue";
+import iconTemp from "../../../core/components/icon/index.vue";
+import tableItemCard from "../grid/item.vue";
+export default {
+  name: "column-slot",
+  inject: ["dynamic", "crud"],
+  components: {
+    custom,
+    tableItemCard,
+    formTemp,
+    iconTemp,
+  },
+  props: {
+    column: Object,
+    columnOption: Array,
+  },
+  created() {
+    const list = ["getColumnProp"];
+    list.forEach((ele) => {
+      if (this.dynamic) this[ele] = this.dynamic[ele];
+    });
+  },
+  methods: {
+    isMediaType(item, fileType) {
+      return isMediaType(item, fileType);
+    },
+    validLabel(column, row, val) {
+      if (column.rules && row.$cellEdit) {
+        return val;
+      }
+    },
+    columnChange(row, column, index) {
+      let key = `${index}-${column.prop}`;
+      if (!count[key]) {
+        this.handleChange(column, row);
+        if (typeof column.change === "function" && column.cell == true) {
+          column.change({ row, column, index, value: row[column.prop] });
+        }
+      }
+      count[key] = true;
+      this.$nextTick(() => (count[key] = false));
+    },
+    handleChange(column, row) {
+      if (!column.cascader) return;
+      this.$nextTick(() => {
+        const columnOption = [...this.crud.propOption];
+        //本节点;
+        const cascader = column.cascader;
+        const str = cascader.join(",");
+        cascader.forEach((item) => {
+          const columnNextProp = item;
+          const value = row[column.prop];
+          const rowIndex = row.$index;
+          // 下一个节点
+          const columnNext = this.findObject(this.columnOption, columnNextProp);
+          if (this.validatenull(columnNext)) return;
+          // 如果本节点没有字典则创建节点数组
+          if (this.validatenull(this.crud.cascaderDIC[rowIndex])) {
+            this.crud.cascaderDIC[rowIndex] = {};
+          }
+          if (this.crud.cascaderIndexList.includes(rowIndex)) {
+            //清空子类字典
+            cascader.forEach((ele) => {
+              this.crud.cascaderDIC[rowIndex][ele] = [];
+              cascader.forEach((ele) => {
+                row[ele] = blankVal(row[ele]);
+              });
+            });
+          }
+          //最后一级
+          if (
+            this.validatenull(cascader) ||
+            this.validatenull(value) ||
+            this.validatenull(columnNext)
+          ) {
+            return;
+          }
+          sendDic(
+            {
+              column: columnNext,
+              value: value,
+              form: row,
+            },
+            this
+          ).then((res) => {
+            const dic = res || [];
+            //首次加载的放入队列记录
+            if (!this.crud.cascaderIndexList.includes(rowIndex)) {
+              this.crud.cascaderIndexList.push(rowIndex);
+            }
+            if (!this.crud.cascaderDicList[rowIndex]) {
+              this.crud.cascaderDicList[rowIndex] = {};
+            }
+            if (!this.crud.cascaderDicList[rowIndex][columnNextProp]) {
+              this.crud.cascaderDicList[rowIndex][columnNextProp] = dic;
+            }
+            // 修改字典
+            this.crud.cascaderDIC[rowIndex][columnNextProp] = dic;
+
+            if (
+              !this.validatenull(dic[columnNext.cascaderIndex]) &&
+              !this.validatenull(dic) &&
+              !this.validatenull(columnNext.cascaderIndex)
+            ) {
+              row[columnNextProp] =
+                dic[columnNext.cascaderIndex][
+                  (columnNext.props || {}).value || DIC_PROPS.value
+                ];
+            }
+          });
+        });
+      });
+    },
+    handleDetail(row, column) {
+      let result;
+      let DIC = column.parentProp
+        ? (this.crud.cascaderDIC[row.$index] || {})[column.prop]
+        : this.crud.DIC[column.prop];
+      result = detail(row, column, this.crud.tableOption, DIC);
+      if (!this.validatenull(DIC) && this.crud.tableOption.filterDic != true) {
+        row["$" + column.prop] = result;
+      }
+      return result;
+    },
+    corArray(row, column) {
+      let list = this.handleDetail(row, column);
+      if (!Array.isArray(list)) {
+        list = this.validatenull(list) ? [] : list.split(DIC_SHOW_SPLIT);
+      }
+      return this.deepClone(list);
+    },
+    openImg(row, column, index) {
+      let list = this.getImgList(row, column);
+      list = list.map((ele) => {
+        return { thumbUrl: ele, url: ele, type: column.fileType };
+      });
+      this.$ImagePreview(list, index);
+    },
+    getImgList(row, column) {
+      let url = column.propsHttp?.home || "";
+      let value = column.props?.value || DIC_PROPS.value;
+      let list = this.corArray(row, column);
+      list.forEach((ele, index) => {
+        list[index] = url + (ele[value] ? ele[value] : ele);
+      });
+      return list;
+    },
+  },
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,119 @@
+<template>
+  <slot name="header"></slot>
+  <!-- 动态列 -->
+  <template v-for="column in list" :key="column.prop">
+    <column-dynamic
+      v-if="column.children && column.children.length > 0"
+      :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"
+    >
+      <template v-for="item in crud.mainSlot" #[item]="scope">
+        <slot v-bind="scope" :name="item"></slot>
+      </template>
+    </column-slot>
+  </template>
+  <slot name="footer"></slot>
+</template>
+
+<script>
+import create from "../../../../core/create.js";
+import columnDynamic from "./column-dynamic.vue";
+import columnSlot from "./column-slot.vue";
+import { arraySort } from "../../../../utils/util.js";
+import { DIC_PROPS } from "../../../../global/variable.js";
+export default create({
+  name: "crud",
+  data() {
+    return {};
+  },
+  components: {
+    columnSlot,
+    columnDynamic,
+  },
+  inject: ["crud"],
+  provide() {
+    return {
+      crud: this.crud,
+      dynamic: this,
+    };
+  },
+  props: {
+    columnOption: Array,
+  },
+  computed: {
+    list() {
+      let result = [...this.columnOption];
+      result = arraySort(
+        result,
+        "index",
+        (a, b) =>
+          this.crud.objectOption[a.prop]?.index -
+          this.crud.objectOption[b.prop]?.index
+      );
+      return result;
+    },
+  },
+  methods: {
+    //表格筛选逻辑
+    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;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <span v-if="['img','upload'].includes(column.type)">
+    <div class="avue-crud__img">
+      <img v-for="(item,index) in getImgList(row,column)"
+           :src="item"
+           :key="index"
+           @click="openImg(getImgList(row,column),index)" />
+    </div>
+  </span>
+  <span v-else-if="['url'].includes(column.type)">
+    <el-link v-for="(item,index) in corArray(row[column.prop],column.separator)"
+             type="primary"
+             :key="index"
+             :href="item"
+             :target="column.target || '_blank'">{{item}}</el-link>
+  </span>
+  <span v-else-if="['rate'].includes(column.type)">
+    <avue-rate disabled
+               v-model="row[column.prop]" />
+  </span>
+  <span v-else
+        v-html="handleDetail(row,column)"></span>
+</template>
+
+<script>
+import { detail } from "../../../../core/detail.js";
+import { DIC_PROPS, DIC_SPLIT } from '../../../../global/variable.js'
+export default {
+  props: {
+    column: Object,
+    row: Object
+  },
+  inject: ['crud'],
+  methods: {
+    openImg (list, index) {
+      list = list.map(ele => {
+        return { thumbUrl: ele, url: ele }
+      })
+      this.$ImagePreview(list, index);
+    },
+    corArray (list, separator = DIC_SPLIT) {
+      if (this.validatenull(list)) {
+        return []
+      } else if (!Array.isArray(list)) {
+        return list.split(separator);
+      }
+      return list
+    },
+    getImgList (row, column) {
+      let url = (column.propsHttp || {}).home || ''
+      let value = (column.props || {}).value || DIC_PROPS.value;
+      if (this.validatenull(row[column.prop])) return []
+      if (column.listType == 'picture-img') return [url + row[column.prop]]
+      let list = this.corArray(this.deepClone(row[column.prop]), column.separator);
+      list.forEach((ele, index) => {
+        if (typeof ele === 'object') {
+          list[index] = url + ele[value];
+        } else {
+          list[index] = url + ele;
+        }
+      })
+      return list;
+    },
+    handleDetail (row, column) {
+      let result = row[column.prop];
+      let DIC = column.parentProp ? (this.crud.cascaderDIC[row.$index] || {})[column.prop] : this.crud.DIC[column.prop]
+      result = detail(row, column, this.crud.tableOption, DIC);
+      if (!this.validatenull(DIC)) {
+        row["$" + column.prop] = result;
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style>
+</style>

package/lib/packages/element-plus/crud/config.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// crud 配置文件
+exports.default = {
+    menuWidth: 220,
+    menuFixed: 'right',
+    menuXsWidth: 100,
+    menuAlign: 'center',
+    menuHeaderAlign: 'center',
+    headerAlign: 'left',
+    // 图标
+    cancelBtnIcon: 'el-icon-circle-close',
+    viewBtnIcon: 'el-icon-view',
+    editBtnIcon: 'el-icon-edit',
+    copyBtnIcon: 'el-icon-copy-document',
+    addBtnIcon: 'el-icon-plus',
+    printBtnIcon: 'el-icon-printer',
+    mockBtnIcon: 'el-icon-edit',
+    excelBtnIcon: 'el-icon-download',
+    delBtnIcon: 'el-icon-delete',
+    searchBtnIcon: 'el-icon-search',
+    emptyBtnIcon: 'el-icon-delete',
+    saveBtnIcon: 'el-icon-circle-plus',
+    updateBtnIcon: 'el-icon-circle-check',
+    columnBtnIcon: 'el-icon-operation',
+    filterBtnIcon: 'el-icon-tickets',
+    gridBtnIcon: 'el-icon-grid',
+    refreshBtnIcon: 'el-icon-refresh',
+    // 显隐
+    viewBtn: false,
+    editBtn: true,
+    copyBtn: false,
+    cancelBtn: true,
+    addBtn: true,
+    addRowBtn: false,
+    printBtn: false,
+    mockBtn: false,
+    excelBtn: false,
+    delBtn: true,
+    cellBtn: false,
+    dateBtn: false,
+    updateBtn: true,
+    saveBtn: true,
+    refreshBtn: true,
+    columnBtn: true,
+    filterBtn: false,
+    gridBtn: true,
+    queryBtn: true,
+    menuBtn: false,
+    searchBtn: true,
+    clearBtn: true,
+    selectClearBtn: true,
+    searchShow: true,
+    tip: true,
+    dialogWidth: '60%',
+    dialogDrag: false,
+    formFullscreen: false,
+    pageBackground: true,
+    page: true,
+    menu: true,
+    indexLabel: '#',
+    indexWidth: 50,
+    indexFixed: 'left',
+    selectionWidth: 50,
+    selectionFixed: 'left',
+    expandWidth: 60,
+    expandFixed: 'left',
+    filterMultiple: true,
+    calcHeight: 300,
+    width: '100%',
+    searchLabelWidth: 80,
+    searchSpan: 6,
+    dropRowClass: '.el-table__body-wrapper table tbody',
+    dropColClass: '.el-table__header-wrapper tr',
+    ghostClass: 'avue-crud__ghost',
+};

package/lib/packages/element-plus/crud/config.ts

@@ -0,0 +1,74 @@
+// crud 配置文件
+export default {
+  menuWidth: 220,
+  menuFixed: 'right',
+  menuXsWidth: 100,
+  menuAlign: 'center',
+  menuHeaderAlign: 'center',
+  headerAlign: 'left',
+  // 图标
+  cancelBtnIcon: 'el-icon-circle-close',
+  viewBtnIcon: 'el-icon-view',
+  editBtnIcon: 'el-icon-edit',
+  copyBtnIcon: 'el-icon-copy-document',
+  addBtnIcon: 'el-icon-plus',
+  printBtnIcon: 'el-icon-printer',
+  mockBtnIcon: 'el-icon-edit',
+  excelBtnIcon: 'el-icon-download',
+  delBtnIcon: 'el-icon-delete',
+  searchBtnIcon: 'el-icon-search',
+  emptyBtnIcon: 'el-icon-delete',
+  saveBtnIcon: 'el-icon-circle-plus',
+  updateBtnIcon: 'el-icon-circle-check',
+  columnBtnIcon: 'el-icon-operation',
+  filterBtnIcon: 'el-icon-tickets',
+  gridBtnIcon: 'el-icon-grid',
+  refreshBtnIcon: 'el-icon-refresh',
+  // 显隐
+  viewBtn: false,
+  editBtn: true,
+  copyBtn: false,
+  cancelBtn: true,
+  addBtn: true,
+  addRowBtn: false,
+  printBtn: false,
+  mockBtn: false,
+  excelBtn: false,
+  delBtn: true,
+  cellBtn: false,
+  dateBtn: false,
+  updateBtn: true,
+  saveBtn: true,
+  refreshBtn: true,
+  columnBtn: true,
+  filterBtn: false,
+  gridBtn: true,
+  queryBtn: true,
+  menuBtn: false,
+  searchBtn: true,
+  clearBtn: true,
+  selectClearBtn: true,
+  searchShow: true,
+  tip: true,
+  dialogWidth: '60%',
+  dialogDrag: false,
+  formFullscreen: false,
+  pageBackground: true,
+  page: true,
+  menu: true,
+  indexLabel: '#',
+  indexWidth: 50,
+  indexFixed: 'left',
+  selectionWidth: 50,
+  selectionFixed: 'left',
+  expandWidth: 60,
+  expandFixed: 'left',
+  filterMultiple: true,
+  calcHeight: 300,
+  width: '100%',
+  searchLabelWidth: 80,
+  searchSpan: 6,
+  dropRowClass: '.el-table__body-wrapper table tbody',
+  dropColClass: '.el-table__header-wrapper tr',
+  ghostClass: 'avue-crud__ghost',
+};