el-crud-page 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +5 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +5 -5
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/queryForm.vue +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -2022,7 +2022,7 @@
|
|
|
2022
2022
|
}
|
|
2023
2023
|
});
|
|
2024
2024
|
})], 2) : item.type === "date" ? _c("el-date-picker", {
|
|
2025
|
-
style:
|
|
2025
|
+
style: _vm.inputStyle,
|
|
2026
2026
|
attrs: {
|
|
2027
2027
|
type: item.range ? "daterange" : "date",
|
|
2028
2028
|
placeholder: item.placeholder,
|
|
@@ -2095,21 +2095,21 @@
|
|
|
2095
2095
|
/* style */
|
|
2096
2096
|
var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
|
|
2097
2097
|
if (!inject) return;
|
|
2098
|
-
inject("data-v-
|
|
2099
|
-
source: ".container-main[data-v-
|
|
2098
|
+
inject("data-v-b77b7a9a_0", {
|
|
2099
|
+
source: ".container-main[data-v-b77b7a9a] {\n background-color: #fff;\n}\n.el-crud-query[data-v-b77b7a9a] {\n overflow: hidden;\n padding: 10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] {\n margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form[data-v-b77b7a9a] .el-form-item--small.el-form-item {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */",
|
|
2100
2100
|
map: {
|
|
2101
2101
|
"version": 3,
|
|
2102
2102
|
"sources": ["/Users/tonwe/git/el-crud-page/src/queryForm.vue", "queryForm.vue"],
|
|
2103
2103
|
"names": [],
|
|
2104
2104
|
"mappings": "AAgUA;EACA,sBAAA;AC/TA;ADiUA;EACA,gBAAA;EACA,aAAA;AC9TA;AD+TA;EACA,oBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;;AAEA,wCAAwC",
|
|
2105
2105
|
"file": "queryForm.vue",
|
|
2106
|
-
"sourcesContent": ["<template>\n <!-- \n \n queryItems: [\n // input string\n {\n label: \"项目名称\",\n prop: \"name\",\n type: \"input\",\n placeholder: \"请输入项目名称\",\n },\n // select\n {\n label: \"申办单位\",\n prop: \"sponsorId\",\n type: \"select\",\n placeholder: \"请选择申办单位\",\n options: [],\n },\n // date日期\n {\n label: \"创建日期\",\n prop: [\"createDateStart\", \"createDateEnd\"],\n type: \"date\",\n range: true,\n placeholder: \"请选择创建日期\",\n },\n // datetime 时间\n {\n label: \"更新时间\",\n prop: \"updateTime\",\n type: \"datetime\",\n placeholder: \"请选择更新时间\",\n },\n ],\n \n -->\n <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n :prop=\"item.prop\" :key=\"item.prop\">\n <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n :placeholder=\"item.placeholder\" clearable filterable\n @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n :style=\"inputStyle\">\n \n <template v-if=\"typeof item.options === 'function'\">\n <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n </template>\n <template v-else>\n <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n </template>\n\n </el-select>\n\n <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n </el-form-item>\n <el-form-item label=\" \" ref=\"queryFormBtn\">\n <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n <span>更多</span>\n <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n </el-button>\n </el-form-item>\n </el-form>\n </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n props: {\n\n // queryParams: {\n // type: Object,\n // required: true\n // },\n queryItems: {\n type: Array,\n required: true\n },\n size: {\n type: String,\n default: 'mini'\n },\n labelWidth: {\n type: Number,\n default: 80\n },\n inputWidth: {\n type: Number,\n default: 200\n },\n lineClamp: {\n type: Number,\n default: 1\n },\n inline: {\n type: Boolean,\n default: true\n }\n\n },\n watch: {\n queryItems: {\n handler(val) {\n this.reset()\n },\n deep: true,\n immediate: true\n }\n },\n created() {\n \n },\n data() {\n return {\n queryParams: {},\n queryFormItems: [],\n formMaxHeight: 0,\n expand: false,\n needExpand: false,\n // 用于展示窗口大小变化绑定\n $_sidebarElm: null,\n $_resizeHandler: null\n }\n },\n computed: {\n labelWidthStr() {\n if (typeof this.labelWidth === 'number') {\n return this.labelWidth + 'px';\n }\n return this.labelWidth + 'px';\n },\n inputStyle() {\n return {\n width: this.inputWidth + 'px'\n };\n },\n dateRangeStyle() {\n return {\n width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n };\n }\n },\n mounted() {\n this.$nextTick(() => {\n this.formMaxHeight = this.measureHeight() * this.lineClamp; \n // this.handleNeedExpand()\n this.redraw();\n this.bindResize();\n setTimeout(() => {\n this.$_resizeHandler && this.$_resizeHandler();\n }, 100);\n \n });\n\n },\n activated() {\n if (!this.$_resizeHandler) {\n this.bindResize();\n }\n },\n beforeDestroy() {\n this.unbindResize();\n },\n deactivated() {\n this.unbindResize();\n },\n methods: {\n $_sidebarResizeHandler(e) {\n if (e.propertyName === 'width') {\n this.$_resizeHandler()\n }\n },\n // 展示窗口大小变化绑定\n bindResize() {\n this.$_resizeHandler = debounce(() => {\n this.drawTime = 0;\n this.queryFormItems.forEach(item => {\n item.hidden = false;\n });\n this.$nextTick(() => {\n this.handleNeedExpand()\n this.redraw();\n })\n\n }, 100)\n\n window.addEventListener('resize', this.$_resizeHandler);\n this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n },\n // unbindResize \n unbindResize() {\n window.removeEventListener('resize', this.$_resizeHandler)\n this.$_resizeHandler = null\n this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n },\n handelExpand() {\n this.drawTime = 0;\n this.expand = !this.expand;\n this.$_resizeHandler();\n\n },\n handleNeedExpand() {\n const $queryForm = this.$refs?.queryForm?.$el;\n let scrollHeight = $queryForm.scrollHeight;\n if ( this.formMaxHeight < scrollHeight) {\n this.needExpand = true;\n } else {\n this.needExpand = false;\n }\n\n },\n // \n redraw() {\n if (typeof this.drawTime == 'undefined') {\n this.drawTime = 0;\n }\n if (this.drawTime > 60) {\n return;\n }\n // 确保DOM完全渲染后再执行某些操作\n const $queryForm = this.$refs?.queryForm?.$el;\n if ($queryForm) {\n $queryForm.style.overflow = \"hidden\";\n }\n this.$nextTick(() => {\n let scrollHeight = $queryForm.scrollHeight;\n let clientHeight = $queryForm.clientHeight;\n if (scrollHeight > clientHeight) {\n this.drawTime++;\n let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n if (lastItem) {\n this.$set(lastItem, 'hidden', true);\n this.redraw();\n }\n\n }\n // 判断是否有滚动条\n\n });\n\n\n },\n\n //测量单行高度 + margin-top + margin-bottom\n measureHeight() {\n let queryFormBtn = this.$refs.queryFormBtn;\n if(queryFormBtn){\n let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n }\n \n },\n\n reset() {\n this.queryItems.forEach(item => {\n this.$set(this.queryParams, item.prop, null);\n });\n this.queryFormItems = this.queryItems.map(item => {\n let placeholder = item.placeholder;\n if( !placeholder){\n\n switch (item.type) {\n case 'input':\n placeholder = '请输入' + item.label;\n break;\n default:\n placeholder = '请选择' + item.label;\n }\n\n }\n\n\n return {\n ...item,\n placeholder,\n hidden: false\n }\n }); \n },\n resetQuery() {\n\n this.$refs.queryForm?.resetFields();\n this.handleQuery();\n },\n handleQuery() {\n this.$emit('queryTable', this.queryParams);\n }\n\n }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n background-color: #fff;\n}\n.el-crud-query{\n overflow: hidden;\n padding: 10px;\n .el-crud-query-form {\n margin-bottom: -10px;\n\n &::v-deep {\n .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n margin-bottom: 10px;\n }\n }\n }\n}\n\n\n</style>\n", ".container-main {\n background-color: #fff;\n}\n\n.el-crud-query {\n overflow: hidden;\n padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
|
|
2106
|
+
"sourcesContent": ["<template>\n <!-- \n \n queryItems: [\n // input string\n {\n label: \"项目名称\",\n prop: \"name\",\n type: \"input\",\n placeholder: \"请输入项目名称\",\n },\n // select\n {\n label: \"申办单位\",\n prop: \"sponsorId\",\n type: \"select\",\n placeholder: \"请选择申办单位\",\n options: [],\n },\n // date日期\n {\n label: \"创建日期\",\n prop: [\"createDateStart\", \"createDateEnd\"],\n type: \"date\",\n range: true,\n placeholder: \"请选择创建日期\",\n },\n // datetime 时间\n {\n label: \"更新时间\",\n prop: \"updateTime\",\n type: \"datetime\",\n placeholder: \"请选择更新时间\",\n },\n ],\n \n -->\n <div class=\"container-main el-crud-query\" v-if=\"queryItems.length\">\n <el-form :model=\"queryParams\" :size=\"size\" :style=\"{ maxHeight: expand ? '' : (formMaxHeight + 'px') }\"\n ref=\"queryForm\" :inline=\"inline\" :label-width=\"labelWidthStr\" class=\"el-crud-query-form\" @submit.native.prevent>\n <el-form-item v-for=\"item in queryFormItems\" v-show=\"expand || !item.hidden\" :label=\"item.label\"\n :prop=\"item.prop\" :key=\"item.prop\">\n <el-input v-if=\"item.type === 'input'\" v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\"\n clearable @keyup.enter.native=\"handleQuery\" :style=\"inputStyle\"></el-input>\n <el-select v-else-if=\"item.type === 'select'\" v-model=\"queryParams[item.prop]\"\n :placeholder=\"item.placeholder\" clearable filterable\n @visible-change=\"($event) => item.visibleChange && item.visibleChange($event, queryParams)\"\n :style=\"inputStyle\">\n \n <template v-if=\"typeof item.options === 'function'\">\n <el-option v-for=\"option in item.options()\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n </template>\n <template v-else>\n <el-option v-for=\"option in item.options\" :key=\"option.value\" :label=\"option.label\" :value=\"option.value\"></el-option>\n </template>\n\n </el-select>\n\n <el-date-picker v-else-if=\"item.type === 'date'\" :type=\"item.range ? 'daterange' : 'date'\"\n v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n :start-placeholder=\"item['startPlaceholder'] || '开始日期'\"\n :end-placeholder=\"item['endPlaceholder'] || '结束日期'\" :range-separator=\"item['rangeSeparator']\"\n :value-format=\"item['valueFormat'] || 'yyyy-MM-dd'\"\n :style=\"inputStyle\"></el-date-picker>\n <el-date-picker v-else-if=\"item.type === 'datetime'\" :type=\"item.range ? 'datetimerange' : 'datetime'\"\n v-model=\"queryParams[item.prop]\" :placeholder=\"item.placeholder\" clearable\n :start-placeholder=\"item['startPlaceholder'] || '开始时间'\"\n :end-placeholder=\"item['endPlaceholder'] || '结束时间'\" :range-separator=\"item['rangeSeparator']\"\n :value-format=\"item['valueFormat'] || 'yyyy-MM-dd HH:mm:ss'\"\n :style=\"item.range ? dateRangeStyle : inputStyle\"></el-date-picker>\n </el-form-item>\n <el-form-item label=\" \" ref=\"queryFormBtn\">\n <el-button type=\"primary\" icon=\"el-icon-search\" @click=\"handleQuery\">搜索</el-button>\n <el-button icon=\"el-icon-refresh\" @click=\"resetQuery\">重置</el-button>\n <el-button type=\"text\" @click=\"handelExpand\" v-if=\"needExpand\">\n <span>更多</span>\n <i :class=\"expand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'\"></i>\n </el-button>\n </el-form-item>\n </el-form>\n </div>\n\n</template>\n\n<script>\n\nimport { debounce } from './utils'\nexport default {\n props: {\n\n // queryParams: {\n // type: Object,\n // required: true\n // },\n queryItems: {\n type: Array,\n required: true\n },\n size: {\n type: String,\n default: 'mini'\n },\n labelWidth: {\n type: Number,\n default: 80\n },\n inputWidth: {\n type: Number,\n default: 200\n },\n lineClamp: {\n type: Number,\n default: 1\n },\n inline: {\n type: Boolean,\n default: true\n }\n\n },\n watch: {\n queryItems: {\n handler(val) {\n this.reset()\n },\n deep: true,\n immediate: true\n }\n },\n created() {\n \n },\n data() {\n return {\n queryParams: {},\n queryFormItems: [],\n formMaxHeight: 0,\n expand: false,\n needExpand: false,\n // 用于展示窗口大小变化绑定\n $_sidebarElm: null,\n $_resizeHandler: null\n }\n },\n computed: {\n labelWidthStr() {\n if (typeof this.labelWidth === 'number') {\n return this.labelWidth + 'px';\n }\n return this.labelWidth + 'px';\n },\n inputStyle() {\n return {\n width: this.inputWidth + 'px'\n };\n },\n dateRangeStyle() {\n return {\n width: (this.inputWidth * 2 + this.labelWidth + 10) + 'px'\n };\n }\n },\n mounted() {\n this.$nextTick(() => {\n this.formMaxHeight = this.measureHeight() * this.lineClamp; \n // this.handleNeedExpand()\n this.redraw();\n this.bindResize();\n setTimeout(() => {\n this.$_resizeHandler && this.$_resizeHandler();\n }, 100);\n \n });\n\n },\n activated() {\n if (!this.$_resizeHandler) {\n this.bindResize();\n }\n },\n beforeDestroy() {\n this.unbindResize();\n },\n deactivated() {\n this.unbindResize();\n },\n methods: {\n $_sidebarResizeHandler(e) {\n if (e.propertyName === 'width') {\n this.$_resizeHandler()\n }\n },\n // 展示窗口大小变化绑定\n bindResize() {\n this.$_resizeHandler = debounce(() => {\n this.drawTime = 0;\n this.queryFormItems.forEach(item => {\n item.hidden = false;\n });\n this.$nextTick(() => {\n this.handleNeedExpand()\n this.redraw();\n })\n\n }, 100)\n\n window.addEventListener('resize', this.$_resizeHandler);\n this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]\n this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)\n\n\n },\n // unbindResize \n unbindResize() {\n window.removeEventListener('resize', this.$_resizeHandler)\n this.$_resizeHandler = null\n this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)\n },\n handelExpand() {\n this.drawTime = 0;\n this.expand = !this.expand;\n this.$_resizeHandler();\n\n },\n handleNeedExpand() {\n const $queryForm = this.$refs?.queryForm?.$el;\n let scrollHeight = $queryForm.scrollHeight;\n if ( this.formMaxHeight < scrollHeight) {\n this.needExpand = true;\n } else {\n this.needExpand = false;\n }\n\n },\n // \n redraw() {\n if (typeof this.drawTime == 'undefined') {\n this.drawTime = 0;\n }\n if (this.drawTime > 60) {\n return;\n }\n // 确保DOM完全渲染后再执行某些操作\n const $queryForm = this.$refs?.queryForm?.$el;\n if ($queryForm) {\n $queryForm.style.overflow = \"hidden\";\n }\n this.$nextTick(() => {\n let scrollHeight = $queryForm.scrollHeight;\n let clientHeight = $queryForm.clientHeight;\n if (scrollHeight > clientHeight) {\n this.drawTime++;\n let noHiddenItems = this.queryFormItems.filter(item => !item.hidden);\n let lastItem = noHiddenItems.find((item, index) => (noHiddenItems.length - 1 == index))\n if (lastItem) {\n this.$set(lastItem, 'hidden', true);\n this.redraw();\n }\n\n }\n // 判断是否有滚动条\n\n });\n\n\n },\n\n //测量单行高度 + margin-top + margin-bottom\n measureHeight() {\n let queryFormBtn = this.$refs.queryFormBtn;\n if(queryFormBtn){\n let queryFormBtnHeight = queryFormBtn.$el.clientHeight || 29;\n let queryFormItemsMarginTop = parseInt(window.getComputedStyle(queryFormBtn.$el).marginTop);\n let queryFormItemsMarginBottom = parseInt(window.getComputedStyle(queryFormBtn.$el).marginBottom);\n return queryFormBtnHeight + queryFormItemsMarginTop + queryFormItemsMarginBottom\n }\n \n },\n\n reset() {\n this.queryItems.forEach(item => {\n this.$set(this.queryParams, item.prop, null);\n });\n this.queryFormItems = this.queryItems.map(item => {\n let placeholder = item.placeholder;\n if( !placeholder){\n\n switch (item.type) {\n case 'input':\n placeholder = '请输入' + item.label;\n break;\n default:\n placeholder = '请选择' + item.label;\n }\n\n }\n\n\n return {\n ...item,\n placeholder,\n hidden: false\n }\n }); \n },\n resetQuery() {\n\n this.$refs.queryForm?.resetFields();\n this.handleQuery();\n },\n handleQuery() {\n this.$emit('queryTable', this.queryParams);\n }\n\n }\n}\n\n</script>\n\n<style scoped lang=\"scss\">\n.container-main{\n background-color: #fff;\n}\n.el-crud-query{\n overflow: hidden;\n padding: 10px;\n .el-crud-query-form {\n margin-bottom: -10px;\n\n &::v-deep {\n .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{\n margin-bottom: 10px;\n }\n }\n }\n}\n\n\n</style>\n", ".container-main {\n background-color: #fff;\n}\n\n.el-crud-query {\n overflow: hidden;\n padding: 10px;\n}\n.el-crud-query .el-crud-query-form {\n margin-bottom: -10px;\n}\n.el-crud-query .el-crud-query-form::v-deep .el-form-item--mini.el-form-item, .el-crud-query .el-crud-query-form::v-deep .el-form-item--small.el-form-item {\n margin-bottom: 10px;\n}\n\n/*# sourceMappingURL=queryForm.vue.map */"]
|
|
2107
2107
|
},
|
|
2108
2108
|
media: undefined
|
|
2109
2109
|
});
|
|
2110
2110
|
};
|
|
2111
2111
|
/* scoped */
|
|
2112
|
-
var __vue_scope_id__$2 = "data-v-
|
|
2112
|
+
var __vue_scope_id__$2 = "data-v-b77b7a9a";
|
|
2113
2113
|
/* module identifier */
|
|
2114
2114
|
var __vue_module_identifier__$2 = undefined;
|
|
2115
2115
|
/* functional template */
|