el-crud-page 1.0.0

package/src/queryForm.vue

@@ -0,0 +1,339 @@
+<template>
+    <!-- 
+     
+    queryItems: [
+                // input string
+                {
+                    label: "项目名称",
+                    prop: "name",
+                    type: "input",
+                    placeholder: "请输入项目名称",
+                },
+                // select
+                {
+                    label: "申办单位",
+                    prop: "sponsorId",
+                    type: "select",
+                    placeholder: "请选择申办单位",
+                    options: [],
+                },
+                // date日期
+                {
+                    label: "创建日期",
+                    prop: ["createDateStart", "createDateEnd"],
+                    type: "date",
+                    range: true,
+                    placeholder: "请选择创建日期",
+                },
+                // datetime 时间
+                {
+                    label: "更新时间",
+                    prop: "updateTime",
+                    type: "datetime",
+                    placeholder: "请选择更新时间",
+                },
+            ],
+    
+    -->
+    <div class="container-main el-crud-query" v-if="queryItems.length">
+        <el-form :model="queryParams" :size="size" :style="{ maxHeight: expand ? '' : (formMaxHeight + 'px') }"
+            ref="queryForm" :inline="inline" :label-width="labelWidthStr" class="el-crud-query-form" @submit.native.prevent>
+            <el-form-item v-for="item in queryFormItems" v-show="expand || !item.hidden" :label="item.label"
+                :prop="item.prop" :key="item.prop">
+                <el-input v-if="item.type === 'input'" v-model="queryParams[item.prop]" :placeholder="item.placeholder"
+                    clearable @keyup.enter.native="handleQuery" :style="inputStyle"></el-input>
+                <el-select v-else-if="item.type === 'select'" v-model="queryParams[item.prop]"
+                    :placeholder="item.placeholder" clearable filterable
+                    @visible-change="($event) => item.visibleChange && item.visibleChange($event, queryParams)"
+                    :style="inputStyle">
+                    
+                    <template v-if="typeof item.options === 'function'">
+                        <el-option v-for="option in item.options()" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                    </template>
+                    <template v-else>
+                        <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                    </template>
+
+                </el-select>
+
+                <el-date-picker v-else-if="item.type === 'date'" :type="item.range ? 'daterange' : 'date'"
+                    v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable
+                    :start-placeholder="item['startPlaceholder'] || '开始日期'"
+                    :end-placeholder="item['endPlaceholder'] || '结束日期'" :range-separator="item['rangeSeparator']"
+                    :value-format="item['valueFormat'] || 'yyyy-MM-dd'"
+                    :style="item.range ? dateRangeStyle : inputStyle"></el-date-picker>
+                <el-date-picker v-else-if="item.type === 'datetime'" :type="item.range ? 'datetimerange' : 'datetime'"
+                    v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable
+                    :start-placeholder="item['startPlaceholder'] || '开始时间'"
+                    :end-placeholder="item['endPlaceholder'] || '结束时间'" :range-separator="item['rangeSeparator']"
+                    :value-format="item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'"
+                    :style="item.range ? dateRangeStyle : inputStyle"></el-date-picker>
+            </el-form-item>
+            <el-form-item label=" " ref="queryFormBtn">
+                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+                <el-button type="text" @click="handelExpand" v-if="needExpand">
+                    <span>更多</span>
+                    <i :class="expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+                </el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+
+</template>
+
+<script>
+
+import { debounce } from './utils'
+export default {
+    props: {
+
+        // queryParams: {
+        //     type: Object,
+        //     required: true
+        // },
+        queryItems: {
+            type: Array,
+            required: true
+        },
+        size: {
+            type: String,
+            default: 'mini'
+        },
+        labelWidth: {
+            type: Number,
+            default: 80
+        },
+        inputWidth: {
+            type: Number,
+            default: 200
+        },
+        lineClamp: {
+            type: Number,
+            default: 1
+        },
+        inline: {
+            type: Boolean,
+            default: true
+        }
+
+    },
+    watch: {
+        queryItems: {
+            handler(val) {
+                this.reset()
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    created() {
+         
+    },
+    data() {
+        return {
+            queryParams: {},
+            queryFormItems: [],
+            formMaxHeight: 0,
+            expand: false,
+            needExpand: false,
+            // 用于展示窗口大小变化绑定
+            $_sidebarElm: null,
+            $_resizeHandler: null
+        }
+    },
+    computed: {
+        labelWidthStr() {
+            if (typeof this.labelWidth === 'number') {
+                return this.labelWidth + 'px';
+            }
+            return this.labelWidth + 'px';
+        },
+        inputStyle() {
+            return {
+                width: this.inputWidth + 'px'
+            };
+        },
+        dateRangeStyle() {
+            return {
+                width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'
+            };
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.formMaxHeight = this.measureHeight() * this.lineClamp; 
+            // this.handleNeedExpand()
+            this.redraw();
+            this.bindResize();
+            setTimeout(() => {
+                this.$_resizeHandler && this.$_resizeHandler();
+            }, 100);
+            
+        });
+
+    },
+    activated() {
+        if (!this.$_resizeHandler) {
+            this.bindResize();
+        }
+    },
+    beforeDestroy() {
+        this.unbindResize();
+    },
+    deactivated() {
+        this.unbindResize();
+    },
+    methods: {
+        $_sidebarResizeHandler(e) {
+            if (e.propertyName === 'width') {
+                this.$_resizeHandler()
+            }
+        },
+        // 展示窗口大小变化绑定
+        bindResize() {
+            this.$_resizeHandler = debounce(() => {
+                this.drawTime = 0;
+                this.queryFormItems.forEach(item => {
+                    item.hidden = false;
+                });
+                this.$nextTick(() => {
+                    this.handleNeedExpand()
+                    this.redraw();
+                })
+
+            }, 100)
+
+            window.addEventListener('resize', this.$_resizeHandler);
+            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+
+
+        },
+        // unbindResize 
+        unbindResize() {
+            window.removeEventListener('resize', this.$_resizeHandler)
+            this.$_resizeHandler = null
+            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+        },
+        handelExpand() {
+            this.drawTime = 0;
+            this.expand = !this.expand;
+            this.$_resizeHandler();
+
+        },
+        handleNeedExpand() {
+            const $queryForm = this.$refs?.queryForm?.$el;
+            let scrollHeight = $queryForm.scrollHeight;
+            if ( this.formMaxHeight < scrollHeight) {
+                this.needExpand = true;
+            } else {
+                this.needExpand = false;
+            }
+
+        },
+        // 
+        redraw() {
+            if (typeof this.drawTime == 'undefined') {
+                this.drawTime = 0;
+            }
+            if (this.drawTime > 60) {
+                return;
+            }
+            // 确保DOM完全渲染后再执行某些操作
+            const $queryForm = this.$refs?.queryForm?.$el;
+            if ($queryForm) {
+                $queryForm.style.overflow = "hidden";
+            }
+            this.$nextTick(() => {
+                let scrollHeight = $queryForm.scrollHeight;
+                let clientHeight = $queryForm.clientHeight;
+                if (scrollHeight > clientHeight) {
+                    this.drawTime++;
+                    let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);
+                    let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))
+                    if (lastItem) {
+                        this.$set(lastItem, 'hidden', true);
+                        this.redraw();
+                    }
+
+                }
+                // 判断是否有滚动条
+
+            });
+
+
+        },
+
+        //测量单行高度 + margin-top + margin-bottom
+        measureHeight() {
+            let queryFormBtn = this.$refs.queryFormBtn;
+            if(queryFormBtn){
+                let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;
+                let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);
+                let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);
+                return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom
+            }
+            
+        },
+
+        reset() {
+            this.queryItems.forEach(item => {
+                this.$set(this.queryParams, item.prop, null);
+            });
+            this.queryFormItems = this.queryItems.map(item => {
+                let placeholder = item.placeholder;
+                if( !placeholder){
+
+                    switch (item.type) {
+                        case 'input':
+                            placeholder = '请输入' + item.label;
+                            break;
+                        default:
+                            placeholder = '请选择' + item.label;
+                    }
+
+                }
+
+
+                return {
+                    ...item,
+                    placeholder,
+                    hidden: false
+                }
+            }); 
+        },
+        resetQuery() {
+
+            this.$refs.queryForm?.resetFields();
+            this.handleQuery();
+        },
+        handleQuery() {
+            this.$emit('queryTable', this.queryParams);
+        }
+
+    }
+}
+
+</script>
+
+<style scoped lang="scss">
+.container-main{
+    background-color: #fff;
+}
+.el-crud-query{
+    overflow: hidden;
+    padding: 10px;
+    .el-crud-query-form {
+        margin-bottom: -10px;
+
+        &::v-deep {
+            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
+                margin-bottom: 10px;
+            }
+        }
+    }
+}
+
+
+</style>

package/src/rightToolbar.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="top-right-btn" :style="style">
+      <div class="flex flex-row items-center">
+        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+          <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+          <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+          <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+          <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+            <el-button size="mini" circle icon="el-icon-menu" />
+            <el-dropdown-menu slot="dropdown">
+              <template >
+                <el-dropdown-item v-for="item in columns" :key="item.key" v-if="item.type!=`index` && item.type!=`selection` && (typeof item.visible) !== `undefined` ">
+                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item)" :label="item.label" />
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-tooltip>
+      </div>
+      <el-dialog :title="title" :visible.sync="open" append-to-body>
+        <el-transfer
+          :titles="['显示', '隐藏']"
+          v-model="value"
+          :data="columns"
+          @change="dataChange"
+        ></el-transfer>
+      </el-dialog>
+    </div>
+  </template>
+  <script>
+  export default {
+    name: "RightToolbar",
+    inject: ["crud"],
+    data() {
+      return {
+        // 显隐数据
+        value: [],
+        // 弹出层标题
+        title: "显示/隐藏",
+        // 是否显示弹出层
+        open: false,
+        // 本地列数据副本（用于拖拽）
+        localColumns: [],
+      };
+    },
+    props: {
+      /* 是否显示检索条件 */
+      showSearch: {
+        type: Boolean,
+        default: true,
+      },
+      /* 显隐列信息 */
+      columns: {
+        type: Array,
+      },
+      /* 是否显示检索图标 */
+      search: {
+        type: Boolean,
+        default: true,
+      },
+      /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+      showColumnsType: {
+        type: String,
+        default: "checkbox",
+      },
+      /* 右外边距 */
+      gutter: {
+        type: Number,
+        default: 10,
+      },
+    },
+    computed: {
+      style() {
+        const ret = {};
+        if (this.gutter) {
+          ret.marginRight = `${this.gutter / 2}px`;
+        }
+        return ret;
+      }
+    },
+    watch: {
+      columns: {
+        handler(newVal) {
+          // 当 columns prop 变化时，更新本地副本
+          this.localColumns = newVal ? [...newVal] : [];
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+    created() {
+      if (this.showColumnsType == 'transfer') {
+        // 显隐列初始默认隐藏列
+        for (let item in this.columns) {
+          if (this.columns[item].visible === false) {
+            this.value.push(parseInt(item));
+          }
+        }
+      }
+    },
+    methods: {
+      // 搜索
+      toggleSearch() {
+        this.$emit("update:showSearch", !this.showSearch);
+      },
+      // 刷新
+      refresh() {
+        this.$emit("queryTable");
+      },
+      // 右侧列表元素变化
+      dataChange(data) {
+        for (let item in this.columns) {
+          const key = this.columns[item].key;
+          this.columns[item].visible = !data.includes(key);
+        }
+      },
+      // 打开显隐列dialog
+      showColumn() {
+        this.open = true;
+      },
+      // 勾选
+      checkboxChange(event, item) {
+        item.visible = event;
+        // 通知父组件更新
+        this.$emit('update:columns', this.localColumns);
+      },
+      // 拖拽结束
+      onDragEnd(event) {
+        // 拖拽结束后，通知父组件列顺序已改变
+        this.$emit('update:columns', this.localColumns);
+        this.$emit('columns-order-changed', this.localColumns);
+      }
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  ::v-deep .el-transfer__button {
+    border-radius: 50%;
+    padding: 12px;
+    display: block;
+    margin-left: 0px;
+  }
+  ::v-deep .el-transfer__button:first-child {
+    margin-bottom: 10px;
+  }
+  
+  .drag-item {
+    padding: 8px;
+    cursor: move;
+    border-bottom: 1px solid #ebeef5;
+    display: flex;
+    align-items: center;
+    
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+  
+  .drag-handle {
+    color: #909399;
+    
+    &:hover {
+      color: #409eff;
+    }
+  }
+  
+  </style>
+  

package/src/style.scss

@@ -0,0 +1,115 @@
+.el-crud {
+    // Flex utilities
+    .flex { display: flex; }
+    .inline-flex { display: inline-flex; }
+    .hidden { display: none; }
+    .block { display: block; }
+    .inline-block { display: inline-block; }
+
+    // Flex direction
+    .flex-row { flex-direction: row; }
+    .flex-row-reverse { flex-direction: row-reverse; }
+    .flex-col { flex-direction: column; }
+    .flex-col-reverse { flex-direction: column-reverse; }
+
+    // Flex wrap
+    .flex-wrap { flex-wrap: wrap; }
+    .flex-nowrap { flex-wrap: nowrap; }
+    .flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+    // Justify content
+    .justify-start { justify-content: flex-start; }
+    .justify-end { justify-content: flex-end; }
+    .justify-center { justify-content: center; }
+    .justify-between { justify-content: space-between; }
+    .justify-around { justify-content: space-around; }
+    .justify-evenly { justify-content: space-evenly; }
+
+    // Align items
+    .items-start { align-items: flex-start; }
+    .items-end { align-items: flex-end; }
+    .items-center { align-items: center; }
+    .items-baseline { align-items: baseline; }
+    .items-stretch { align-items: stretch; }
+
+    // Align content
+    .content-start { align-content: flex-start; }
+    .content-end { align-content: flex-end; }
+    .content-center { align-content: center; }
+    .content-between { align-content: space-between; }
+    .content-around { align-content: space-around; }
+    .content-evenly { align-content: space-evenly; }
+
+    // Align self
+    .self-auto { align-self: auto; }
+    .self-start { align-self: flex-start; }
+    .self-end { align-self: flex-end; }
+    .self-center { align-self: center; }
+    .self-stretch { align-self: stretch; }
+
+    // Flex grow & shrink
+    .flex-1 { flex: 1 1 0%; }
+    .flex-auto { flex: 1 1 auto; }
+    .flex-initial { flex: 0 1 auto; }
+    .flex-none { flex: none; }
+    .grow { flex-grow: 1; }
+    .grow-0 { flex-grow: 0; }
+    .shrink { flex-shrink: 1; }
+    .shrink-0 { flex-shrink: 0; }
+
+
+    // Width
+    .w-full { width: 100%; }
+    .w-auto { width: auto; }
+
+    // Height
+    .h-full { height: 100%; }
+    .h-auto { height: auto; }
+    .h-screen { height: 100vh; }
+
+    // Margin
+    .m-0 { margin: 0; }
+    .m-auto { margin: auto; }
+    .mx-auto { margin-left: auto; margin-right: auto; }
+    .my-auto { margin-top: auto; margin-bottom: auto; }
+ 
+
+    // Text align
+    .text-left { text-align: left; }
+    .text-center { text-align: center; }
+    .text-right { text-align: right; }
+    .text-justify { text-align: justify; }
+
+    // Font weight
+    .font-normal { font-weight: 400; }
+    .font-medium { font-weight: 500; }
+    .font-semibold { font-weight: 600; }
+    .font-bold { font-weight: 700; }
+
+    // Overflow
+    .overflow-hidden { overflow: hidden; }
+    .overflow-auto { overflow: auto; }
+    .overflow-scroll { overflow: scroll; }
+    .overflow-x-auto { overflow-x: auto; }
+    .overflow-y-auto { overflow-y: auto; }
+
+    // Position
+    .relative { position: relative; }
+    .absolute { position: absolute; }
+    .fixed { position: fixed; }
+    .sticky { position: sticky; }
+
+    // Cursor
+    .cursor-pointer { cursor: pointer; }
+    .cursor-not-allowed { cursor: not-allowed; }
+
+
+    
+
+    &-toolbar{
+        margin-top: 10px;
+    }
+    .crud-table{
+        margin-top: 10px;
+    }
+}