@smallwei/avue 3.8.1 → 3.8.3

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

@@ -0,0 +1,102 @@
+<template>
+  <el-drawer v-if="columnBox"
+             :append-to-body="$AVUE.appendToBody"
+             lock-scroll
+             :class="['avue-dialog',b('column')].join(' ')"
+             :title="t('crud.showTitle')"
+             :size="crud.isMobile?'100%':'40%'"
+             v-model="columnBox">
+    <el-table :data="data"
+              ref="table"
+              height="100%"
+              :size="crud.size"
+              border>
+      <el-table-column align="center"
+                       width="100"
+                       header-align="center"
+                       prop="label"
+                       key="label"
+                       :label="t('crud.column.name')">
+      </el-table-column>
+      <template v-for="(item,index) in defaultColumn"
+                :key="item.prop">
+        <el-table-column :label="item.label"
+                         v-if="item.hide!==true"
+                         :prop="item.prop"
+                         align="center"
+                         header-align="center">
+          <template #="{row}">
+            <el-checkbox @change="handleChange(item.prop)"
+                         v-model="crud.objectOption[row.prop][item.prop]"></el-checkbox>
+          </template>
+        </el-table-column>
+      </template>
+
+    </el-table>
+
+  </el-drawer>
+</template>
+<script>
+import create from "../../../../core/create.js";
+import locale from "../../../../core/locale.js";
+import packages from "../../../../core/packages.js";
+import config from "../config.js";
+export default create({
+  name: 'crud',
+  mixins: [locale],
+  inject: ["crud"],
+  data () {
+    return {
+      data: [],
+      columnBox: false
+    };
+  },
+  computed: {
+    defaultColumn () {
+      return [{
+        label: this.t('crud.column.hide'),
+        prop: 'hide'
+      }, {
+        label: this.t('crud.column.fixed'),
+        prop: 'fixed'
+      }, {
+        label: this.t('crud.column.filters'),
+        prop: 'filters'
+      }, {
+        label: this.t('crud.column.sortable'),
+        prop: 'sortable'
+      }, {
+        label: this.t('crud.column.width'),
+        prop: 'width',
+        hide: true
+      }]
+    }
+  },
+  methods: {
+    handleShow () {
+      this.data = []
+      this.crud.propOption.forEach(column => {
+        if (column.showColumn != false) this.data.push(column)
+      })
+      this.columnBox = true
+      this.$nextTick(() => this.rowDrop())
+    },
+    handleChange (prop) {
+      if (prop === 'hide') {
+        this.crud.gridShow ? this.crud.refreshTable() : this.crud.doLayout()
+      } else if (prop === 'filters') {
+        this.crud.refreshTable()
+      }
+    },
+    rowDrop () {
+      const el = this.$refs.table.$el.querySelectorAll(config.dropRowClass)[0]
+      this.crud.tableDrop('column', el, evt => {
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        this.crud.headerSort(oldIndex, newIndex)
+      })
+    },
+  }
+});
+</script>
+

package/lib/packages/element-plus/crud/dialog/dialog-excel.vue

@@ -0,0 +1,204 @@
+<template>
+  <div v-if="box"> 
+    <el-dialog :title="t('crud.excelBtn')"
+               lock-scroll
+               :append-to-body="$AVUE.appendToBody"
+               class="avue-dialog"
+               v-model="box"
+               :width="crud.isMobile?'100%':'30%'">
+      <avue-form ref="form"
+                 v-model="form"
+                 :option="option">
+      </avue-form>
+      <span class="avue-dialog__footer">
+        <el-button type="primary"
+                   :size="crud.size"
+                   @click="handleSubmit">{{t('crud.filter.submitBtn')}}</el-button>
+        <el-button @click="box = false"
+                   :size="crud.size">{{t('crud.filter.cancelBtn')}}</el-button>
+      </span>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import locale from "../../../../core/locale.js";
+import { detail } from "../../../../core/detail.js";
+import { uuid } from '../../../../utils/util.js'
+export default {
+  name: 'crud',
+  mixins: [locale],
+  inject: ['crud'],
+  data () {
+    return {
+      option: {},
+      columnOption: {},
+      box: false,
+      form: {
+        name: this.crud.tableOption.title
+      }
+    }
+  },
+  methods: {
+    handleShow () {
+      this.getColumnOption()
+      this.getOption()
+      this.box = true
+    },
+    handleSubmit () {
+      this.$Export.excel({
+        title: this.form.name,
+        columns: this.getColumn(),
+        data: this.handleSum()
+      });
+      this.box = false;
+    },
+    //计算统计
+    handleSum () {
+      const option = this.crud.tableOption;
+      const columnOption = this.crud.propOption;
+      let list = this.form.type ? this.crud.list : this.crud.tableSelect;
+      let data = []
+      if (this.form.params.includes('data')) {
+        list.forEach(ele => {
+          let row = this.deepClone(ele);
+          columnOption.forEach(column => {
+            let DIC = column.parentProp ? (this.crud.cascaderDIC[row.$index] || {})[column.prop] : this.crud.DIC[column.prop]
+            row[column.prop] = detail(row, column, option, DIC);
+          })
+          data.push(row);
+        })
+      }
+      if (this.form.params.includes('sum') && option.showSummary) {
+        data.push(this.crud.sumsList);
+      }
+      return data;
+    },
+    getOption () {
+      this.option = {
+        submitBtn: false,
+        emptyBtn: false,
+        column: [
+          {
+            label: this.t('crud.excel.name'),
+            prop: 'name',
+            span: 24,
+          }, {
+            label: this.t('crud.excel.type'),
+            prop: "type",
+            span: 24,
+            type: 'select',
+            dicData: [{
+              label: this.t('crud.excel.typeDic.true'),
+              value: true
+            }, {
+              label: this.t('crud.excel.typeDic.false'),
+              disabled: this.crud.tableOption.selection != true,
+              value: false
+            }]
+          }, {
+            label: this.t('crud.excel.prop'),
+            prop: "prop",
+            type: 'tree',
+            multiple: true,
+            checkStrictly: true,
+            span: 24,
+            props: {
+              value: 'prop'
+            },
+            dicData: this.columnOption
+          }, {
+            label: this.t('crud.excel.params'),
+            prop: 'params',
+            type: 'checkbox',
+            span: 24,
+            value: ['header', 'data'].concat((() => {
+              let result = []
+              if (this.crud.isHeader) result.push('headers')
+              if (this.crud.isShowSummary) result.push('sum')
+              return result
+            })()),
+            dicData: [{
+              label: this.t('crud.excel.paramsDic.header'),
+              disabled: true,
+              value: 'header'
+            }, {
+              label: this.t('crud.excel.paramsDic.data'),
+              value: 'data'
+            }].concat((() => {
+              let result = []
+              result.push({
+                label: this.t('crud.excel.paramsDic.headers'),
+                value: 'headers',
+                disabled: !this.crud.isHeader
+              })
+              result.push({
+                label: this.t('crud.excel.paramsDic.sum'),
+                value: 'sum',
+                disabled: !this.crud.isShowSummary
+              })
+              return result
+            })())
+          }
+        ]
+      }
+      this.form.type = this.crud.selectLen == 0
+    },
+    getColumnOption () {
+      let column = this.deepClone(this.crud.columnOption)
+      let prop = []
+      const findProp = (list = []) => {
+        let count = [];
+        list.forEach((ele, index) => {
+          let children = ele.children
+          if (children && !Array.isArray(children)) delete ele.children
+          else if (ele.showColumn === false) count.push(index)
+          else {
+            ele.prop = ele.prop || uuid()
+            prop.push(ele.prop)
+            if (ele.children) findProp(children)
+          }
+        })
+        for (let i = count.length - 1; i >= 0; i--) {
+          list.splice(count[i], 1)
+        }
+      }
+      findProp(column)
+      this.columnOption = column;
+      this.form.prop = prop
+    },
+    getColumn () {
+      let columns = this.deepClone(this.columnOption);
+      let props = this.$refs.form.getPropRef('prop').$refs.temp.getHalfList()
+      if (!this.form.params) return []
+      if (this.form.params.includes('headers')) {
+        const findProp = (list = []) => {
+          list.forEach((ele, index) => {
+            if (!props.includes(ele.prop)) {
+              list.splice(index, 1);
+            } else if (ele.children) {
+              findProp(ele.children)
+            }
+          })
+        }
+        findProp(columns);
+        return columns
+      } else {
+        let result = [];
+        const findProp = (list = []) => {
+          list.forEach((ele, index) => {
+            if (ele.children) {
+              findProp(ele.children)
+            } else if (props.includes(ele.prop)) {
+              result.push(ele)
+            }
+          })
+        }
+        findProp(columns);
+        return result
+      }
+    }
+  }
+}
+</script>

package/lib/packages/element-plus/crud/dialog/dialog-filter.vue

@@ -0,0 +1,159 @@
+<template>
+  <el-drawer v-if="box"
+             lock-scroll
+             :class="['avue-dialog',b('filter')].join(' ')"
+             :append-to-body="$AVUE.appendToBody"
+             :title="t('crud.filterTitle')"
+             :size="crud.isMobile?'100%':'60%'"
+             v-model="box">
+    <el-row :span="24">
+      <el-col :md="24"
+              :class="b('filter-menu')">
+        <el-button-group>
+          <el-button type="primary"
+                     :size="crud.size"
+                     @click="handleAdd">{{t('crud.filter.addBtn')}}</el-button>
+          <el-button type="primary"
+                     :size="crud.size"
+                     @click="handleClear">{{t('crud.filter.resetBtn')}}</el-button>
+          <el-button type="primary"
+                     :size="crud.size"
+                     @click="handleValueClear">{{t('crud.filter.clearBtn')}}</el-button>
+        </el-button-group>
+      </el-col>
+      <el-col :md="12"
+              :xs="24"
+              :sm="12"
+              v-for="(column,index) in list"
+              :key="index"
+              :class="b('filter-item')">
+        <avue-select v-model="column.text"
+                     :dic="columnOption"
+                     :clearable="false"
+                     @change="handleChange(index)"
+                     :size="crud.size"
+                     :class="b('filter-label')"></avue-select>
+        <avue-select :class="b('filter-symbol')"
+                     v-model="column.symbol"
+                     :dic="symbolDic"
+                     :clearable="false"
+                     :size="crud.size"></avue-select>
+        <avue-input :size="crud.size"
+                    :class="b('filter-value')"
+                    v-model="column.value">
+        </avue-input>
+        <el-button type="danger"
+                   :class="b('filter-icon')"
+                   :size="crud.size"
+                   @click="handleDelete(index)"
+                   circle
+                   icon="el-icon-minus"></el-button>
+      </el-col>
+    </el-row>
+    <span class="avue-dialog__footer">
+      <el-button type="primary"
+                 :size="crud.size"
+                 @click="handleSubmit">{{t('crud.filter.submitBtn')}}</el-button>
+      <el-button @click="box = false"
+                 :size="crud.size">{{t('crud.filter.cancelBtn')}}</el-button>
+    </span>
+  </el-drawer>
+</template>
+
+<script>
+import locale from "../../../../core/locale.js";
+import create from "../../../../core/create.js";
+export default create({
+  name: "crud",
+  mixins: [locale],
+  inject: ["crud"],
+  data () {
+    return {
+      box: false,
+      columnObj: {},
+      symbolDic: [
+        {
+          label: "=",
+          value: "="
+        },
+        {
+          label: "≠",
+          value: "≠"
+        },
+        {
+          label: "like",
+          value: "like"
+        },
+        {
+          label: ">",
+          value: ">"
+        },
+        {
+          label: "≥",
+          value: "≥"
+        },
+        {
+          label: "<",
+          value: "<"
+        },
+        {
+          label: "≤",
+          value: "≤"
+        },
+        {
+          label: "∈",
+          value: "∈"
+        }
+      ],
+      list: [],
+      columnOption: {}
+    }
+  },
+  methods: {
+    handleShow () {
+      this.getColumnOption()
+      this.box = true
+    },
+    getColumnOption () {
+      let result = []
+      let column = this.deepClone(this.crud.propOption)
+      column.forEach(ele => {
+        if (ele.showColumn !== false) result.push(Object.assign(ele, {
+          value: ele.prop
+        }))
+      });
+      this.columnOption = result
+      this.columnObj = this.columnOption[0];
+    },
+    handleDelete (index) {
+      this.list.splice(index, 1);
+    },
+    handleClear () {
+      this.list = [];
+    },
+    handleValueClear () {
+      this.list.forEach((ele, index) => ele.value = '');
+    },
+    handleSubmit () {
+      let result = [];
+      this.list.forEach(ele => {
+        result.push([ele.text, ele.symbol, ele.value]);
+      });
+      this.crud.$emit("filter", result);
+      this.box = false;
+    },
+    handleChange (index) {
+      this.list[index].value = ''
+    },
+    handleAdd () {
+      const prop = this.columnObj.prop;
+      this.list.push({
+        text: prop,
+        value: '',
+        symbol: this.symbolDic[0].value
+      });
+    }
+  }
+});
+</script>
+