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.esm.js
CHANGED
|
@@ -2018,7 +2018,7 @@ var __vue_render__$2 = function __vue_render__() {
|
|
|
2018
2018
|
}
|
|
2019
2019
|
});
|
|
2020
2020
|
})], 2) : item.type === "date" ? _c("el-date-picker", {
|
|
2021
|
-
style:
|
|
2021
|
+
style: _vm.inputStyle,
|
|
2022
2022
|
attrs: {
|
|
2023
2023
|
type: item.range ? "daterange" : "date",
|
|
2024
2024
|
placeholder: item.placeholder,
|
|
@@ -2091,21 +2091,21 @@ __vue_render__$2._withStripped = true;
|
|
|
2091
2091
|
/* style */
|
|
2092
2092
|
var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
|
|
2093
2093
|
if (!inject) return;
|
|
2094
|
-
inject("data-v-
|
|
2095
|
-
source: ".container-main[data-v-
|
|
2094
|
+
inject("data-v-b77b7a9a_0", {
|
|
2095
|
+
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 */",
|
|
2096
2096
|
map: {
|
|
2097
2097
|
"version": 3,
|
|
2098
2098
|
"sources": ["/Users/tonwe/git/el-crud-page/src/queryForm.vue", "queryForm.vue"],
|
|
2099
2099
|
"names": [],
|
|
2100
2100
|
"mappings": "AAgUA;EACA,sBAAA;AC/TA;ADiUA;EACA,gBAAA;EACA,aAAA;AC9TA;AD+TA;EACA,oBAAA;AC7TA;ADgUA;EACA,mBAAA;AC9TA;;AAEA,wCAAwC",
|
|
2101
2101
|
"file": "queryForm.vue",
|
|
2102
|
-
"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 */"]
|
|
2102
|
+
"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 */"]
|
|
2103
2103
|
},
|
|
2104
2104
|
media: undefined
|
|
2105
2105
|
});
|
|
2106
2106
|
};
|
|
2107
2107
|
/* scoped */
|
|
2108
|
-
var __vue_scope_id__$2 = "data-v-
|
|
2108
|
+
var __vue_scope_id__$2 = "data-v-b77b7a9a";
|
|
2109
2109
|
/* module identifier */
|
|
2110
2110
|
var __vue_module_identifier__$2 = undefined;
|
|
2111
2111
|
/* functional template */
|