@idooel/components 0.0.2-beta.21 → 0.0.2-beta.23
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/@idooel/components.esm.js +18 -7
- package/dist/@idooel/components.umd.js +18 -7
- package/package.json +1 -1
- package/packages/composite-components/search-area/src/index.vue +3 -2
- package/packages/composite-components/select-entity-modal-table/src/index.vue +3 -3
- package/packages/models/tree-table-model/README.md +0 -0
- package/packages/utils/README.md +172 -0
|
@@ -12896,7 +12896,8 @@ var script$b = {
|
|
|
12896
12896
|
},
|
|
12897
12897
|
dataSource: {
|
|
12898
12898
|
type: Array,
|
|
12899
|
-
required: true
|
|
12899
|
+
required: true,
|
|
12900
|
+
default: () => []
|
|
12900
12901
|
}
|
|
12901
12902
|
},
|
|
12902
12903
|
data() {
|
|
@@ -13050,7 +13051,17 @@ var __vue_render__$b = function () {
|
|
|
13050
13051
|
var _c = _vm._self._c || _h;
|
|
13051
13052
|
return _c(
|
|
13052
13053
|
"div",
|
|
13053
|
-
{
|
|
13054
|
+
{
|
|
13055
|
+
directives: [
|
|
13056
|
+
{
|
|
13057
|
+
name: "show",
|
|
13058
|
+
rawName: "v-show",
|
|
13059
|
+
value: _vm.dataSource.length,
|
|
13060
|
+
expression: "dataSource.length",
|
|
13061
|
+
},
|
|
13062
|
+
],
|
|
13063
|
+
staticClass: "search-area__wrapper",
|
|
13064
|
+
},
|
|
13054
13065
|
[
|
|
13055
13066
|
_c(
|
|
13056
13067
|
"a-row",
|
|
@@ -13246,11 +13257,11 @@ __vue_render__$b._withStripped = true;
|
|
|
13246
13257
|
/* style */
|
|
13247
13258
|
const __vue_inject_styles__$b = function (inject) {
|
|
13248
13259
|
if (!inject) return
|
|
13249
|
-
inject("data-v-06dd8a38_0", { source: ".search-area__wrapper[data-v-06dd8a38] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-06dd8a38] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-06dd8a38] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-06dd8a38] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-06dd8a38] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-06dd8a38] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-06dd8a38] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["C:\\Users\\ZOU\\Code\\OnlineStudy\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAyMA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACxMA;AD0MA;EACA,YAAA;ACxMA;AD2MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzMA;AD0MA;EACA,oBAAA;ACxMA;AD0MA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACxMA;ADyMA;EACA,eAAA;ACvMA;ADyMA;EACA,eAAA;EACA,gBAAA;ACvMA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"(item.type == 'ele-input') || (item.type == 'Input')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-select') || (item.type == 'Select')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :init=\"item.init\" :mode=\"item.mode\" :code=\"item.code\" :params=\"item.params\" :url=\"item.url\" :multiple=\"item.multiple\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-date') || (item.type == 'DatePicker')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :placeholder=\"item.placeholder\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {\r\n const querys = this.extractValues()\r\n this.$emit('search', { ...querys, initSearch: true })\r\n },\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (type.isFunction(arg)) return arg.call(this)\r\n if (type.notStr(arg)) return arg\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n if (type.isFunction(props.defaultValue)) {\r\n const ret = props.defaultValue.call(this)\r\n this.$set(props, '_value', this.buildDefaultValue(ret))\r\n } else {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n cleanValues () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n },\r\n handleClickReset () {\r\n this.cleanValues()\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n },\r\n destroyed () {\r\n this.cleanValues()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13260
|
+
inject("data-v-603c5ec8_0", { source: ".search-area__wrapper[data-v-603c5ec8] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-603c5ec8] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-603c5ec8] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-603c5ec8] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-603c5ec8] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-603c5ec8] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-603c5ec8] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["C:\\Users\\ZOU\\Code\\OnlineStudy\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0MA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACzMA;AD2MA;EACA,YAAA;ACzMA;AD4MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AC1MA;AD2MA;EACA,oBAAA;ACzMA;AD2MA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACzMA;AD0MA;EACA,eAAA;ACxMA;AD0MA;EACA,eAAA;EACA,gBAAA;ACxMA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\" v-show=\"dataSource.length\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"(item.type == 'ele-input') || (item.type == 'Input')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-select') || (item.type == 'Select')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :init=\"item.init\" :mode=\"item.mode\" :code=\"item.code\" :params=\"item.params\" :url=\"item.url\" :multiple=\"item.multiple\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-date') || (item.type == 'DatePicker')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :placeholder=\"item.placeholder\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true,\r\n default: () => []\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {\r\n const querys = this.extractValues()\r\n this.$emit('search', { ...querys, initSearch: true })\r\n },\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (type.isFunction(arg)) return arg.call(this)\r\n if (type.notStr(arg)) return arg\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n if (type.isFunction(props.defaultValue)) {\r\n const ret = props.defaultValue.call(this)\r\n this.$set(props, '_value', this.buildDefaultValue(ret))\r\n } else {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n cleanValues () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n },\r\n handleClickReset () {\r\n this.cleanValues()\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n },\r\n destroyed () {\r\n this.cleanValues()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13250
13261
|
|
|
13251
13262
|
};
|
|
13252
13263
|
/* scoped */
|
|
13253
|
-
const __vue_scope_id__$b = "data-v-
|
|
13264
|
+
const __vue_scope_id__$b = "data-v-603c5ec8";
|
|
13254
13265
|
/* module identifier */
|
|
13255
13266
|
const __vue_module_identifier__$b = undefined;
|
|
13256
13267
|
/* functional template */
|
|
@@ -14786,7 +14797,7 @@ var script$4 = {
|
|
|
14786
14797
|
if (type.isStr(this.returnValues)) {
|
|
14787
14798
|
this.emitValue = '';
|
|
14788
14799
|
} else if (type.isObject(this.returnValues)) {
|
|
14789
|
-
this.emitValue =
|
|
14800
|
+
this.emitValue = null;
|
|
14790
14801
|
}
|
|
14791
14802
|
}
|
|
14792
14803
|
this.$emit('change', this.emitValue);
|
|
@@ -14801,8 +14812,8 @@ var script$4 = {
|
|
|
14801
14812
|
const currentTableSelectionRet = type.isArray(currentTableSelection) ? currentTableSelection : [currentTableSelection];
|
|
14802
14813
|
this.entityValue = currentTableSelectionRet.map(item => {
|
|
14803
14814
|
return {
|
|
14804
|
-
label: item[this.replaceFields.label],
|
|
14805
|
-
value: item[this.replaceFields.value]
|
|
14815
|
+
label: item[this.returnValues[this.replaceFields.label]],
|
|
14816
|
+
value: item[this.returnValues[this.replaceFields.value]]
|
|
14806
14817
|
};
|
|
14807
14818
|
});
|
|
14808
14819
|
this.emitEntityValue(currentTableSelection);
|
|
@@ -12901,7 +12901,8 @@
|
|
|
12901
12901
|
},
|
|
12902
12902
|
dataSource: {
|
|
12903
12903
|
type: Array,
|
|
12904
|
-
required: true
|
|
12904
|
+
required: true,
|
|
12905
|
+
default: () => []
|
|
12905
12906
|
}
|
|
12906
12907
|
},
|
|
12907
12908
|
data() {
|
|
@@ -13055,7 +13056,17 @@
|
|
|
13055
13056
|
var _c = _vm._self._c || _h;
|
|
13056
13057
|
return _c(
|
|
13057
13058
|
"div",
|
|
13058
|
-
{
|
|
13059
|
+
{
|
|
13060
|
+
directives: [
|
|
13061
|
+
{
|
|
13062
|
+
name: "show",
|
|
13063
|
+
rawName: "v-show",
|
|
13064
|
+
value: _vm.dataSource.length,
|
|
13065
|
+
expression: "dataSource.length",
|
|
13066
|
+
},
|
|
13067
|
+
],
|
|
13068
|
+
staticClass: "search-area__wrapper",
|
|
13069
|
+
},
|
|
13059
13070
|
[
|
|
13060
13071
|
_c(
|
|
13061
13072
|
"a-row",
|
|
@@ -13251,11 +13262,11 @@
|
|
|
13251
13262
|
/* style */
|
|
13252
13263
|
const __vue_inject_styles__$b = function (inject) {
|
|
13253
13264
|
if (!inject) return
|
|
13254
|
-
inject("data-v-06dd8a38_0", { source: ".search-area__wrapper[data-v-06dd8a38] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-06dd8a38] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-06dd8a38] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-06dd8a38] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-06dd8a38] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-06dd8a38] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-06dd8a38] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["C:\\Users\\ZOU\\Code\\OnlineStudy\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAyMA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACxMA;AD0MA;EACA,YAAA;ACxMA;AD2MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzMA;AD0MA;EACA,oBAAA;ACxMA;AD0MA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACxMA;ADyMA;EACA,eAAA;ACvMA;ADyMA;EACA,eAAA;EACA,gBAAA;ACvMA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"(item.type == 'ele-input') || (item.type == 'Input')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-select') || (item.type == 'Select')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :init=\"item.init\" :mode=\"item.mode\" :code=\"item.code\" :params=\"item.params\" :url=\"item.url\" :multiple=\"item.multiple\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-date') || (item.type == 'DatePicker')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :placeholder=\"item.placeholder\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {\r\n const querys = this.extractValues()\r\n this.$emit('search', { ...querys, initSearch: true })\r\n },\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (type.isFunction(arg)) return arg.call(this)\r\n if (type.notStr(arg)) return arg\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n if (type.isFunction(props.defaultValue)) {\r\n const ret = props.defaultValue.call(this)\r\n this.$set(props, '_value', this.buildDefaultValue(ret))\r\n } else {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n cleanValues () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n },\r\n handleClickReset () {\r\n this.cleanValues()\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n },\r\n destroyed () {\r\n this.cleanValues()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13265
|
+
inject("data-v-603c5ec8_0", { source: ".search-area__wrapper[data-v-603c5ec8] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-603c5ec8] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-603c5ec8] {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action[data-v-603c5ec8] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-603c5ec8] {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text[data-v-603c5ec8] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-603c5ec8] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["C:\\Users\\ZOU\\Code\\OnlineStudy\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0MA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACzMA;AD2MA;EACA,YAAA;ACzMA;AD4MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AC1MA;AD2MA;EACA,oBAAA;ACzMA;AD2MA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACzMA;AD0MA;EACA,eAAA;ACxMA;AD0MA;EACA,eAAA;EACA,gBAAA;ACxMA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"search-area__wrapper\" v-show=\"dataSource.length\">\r\n <a-row :gutter=\"gutter\">\r\n <template v-for=\"(item, idx) in innerDataSource\">\r\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\r\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\r\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\r\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\r\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\r\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\r\n <span class=\"expand-collapse__icon\">\r\n <a-icon v-if=\"isExpand\" type=\"up\" />\r\n <a-icon v-else type=\"down\" />\r\n </span>\r\n </div>\r\n </div>\r\n <div v-else class=\"search-area__item\">\r\n <template v-if=\"(item.type == 'ele-input') || (item.type == 'Input')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-input v-model=\"item._value\"></ele-input>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-select') || (item.type == 'Select')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-select v-model=\"item._value\" :init=\"item.init\" :mode=\"item.mode\" :code=\"item.code\" :params=\"item.params\" :url=\"item.url\" :multiple=\"item.multiple\" :data-source=\"item.optionList\"></ele-select>\r\n </template>\r\n <template v-else-if=\"(item.type == 'ele-date') || (item.type == 'DatePicker')\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date v-model=\"item._value\" :placeholder=\"item.placeholder\" :format=\"item.format\"></ele-date>\r\n </template>\r\n <template v-else-if=\"item.type == 'ele-date-range'\">\r\n <Label :label=\"item.label\"></Label>\r\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\r\n </template>\r\n </div>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Label from './label.vue'\r\nimport moment from 'moment'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-search-area',\r\n components: {\r\n Label\r\n },\r\n props: {\r\n gutter: {\r\n type: [Number, Array, Object],\r\n default: () => ([\r\n 16, 8\r\n ])\r\n },\r\n span: {\r\n type: Number,\r\n default: 8\r\n },\r\n dataSource: {\r\n type: Array,\r\n required: true,\r\n default: () => []\r\n }\r\n },\r\n data() {\r\n return {\r\n isExpand: false\r\n }\r\n },\r\n computed: {\r\n cuttingFormula () {\r\n return (24 / this.span - 1)\r\n },\r\n buildDataSource () {\r\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\r\n },\r\n innerDataSource () {\r\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\r\n }\r\n },\r\n created() {\r\n const querys = this.extractValues()\r\n this.$emit('search', { ...querys, initSearch: true })\r\n },\r\n methods: {\r\n controlDisplayByFormula (dataSource = []) {\r\n if (this.isExpand) {\r\n dataSource.forEach(item => {\r\n this.$set(item, '_show', true)\r\n })\r\n } else {\r\n dataSource.forEach((item, idx) => {\r\n if (idx < this.cuttingFormula) {\r\n this.$set(item, '_show', true)\r\n } else {\r\n this.$set(item, '_show', false)\r\n }\r\n })\r\n }\r\n return dataSource\r\n },\r\n buildDefaultValue (arg) {\r\n if (type.isFunction(arg)) return arg.call(this)\r\n if (type.notStr(arg)) return arg\r\n if (!arg || arg.charAt(0) !== '_') return arg\r\n return parse(arg, {\r\n _route: this.$route.query\r\n })\r\n },\r\n mapDefaultValueToValue () {\r\n this.dataSource.forEach(props => {\r\n this.$set(props, '_show', this.isExpand)\r\n if (props.defaultValue) {\r\n if (type.isFunction(props.defaultValue)) {\r\n const ret = props.defaultValue.call(this)\r\n this.$set(props, '_value', this.buildDefaultValue(ret))\r\n } else {\r\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\r\n }\r\n }\r\n })\r\n return this.dataSource\r\n },\r\n handleClickExpandCollapse () {\r\n this.isExpand = !this.isExpand\r\n },\r\n handleClickSearch () {\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n buildMapto (mapTo = [], dataSource) {\r\n const [ startField, endField ] = mapTo\r\n const [ startValue, endValue ] = dataSource || [null, null]\r\n return {\r\n [startField]: startValue,\r\n [endField]: endValue\r\n }\r\n },\r\n extractValues () {\r\n let ret = {}\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n switch (item.type) {\r\n case 'DatePicker':\r\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\r\n break\r\n case 'ele-date-range':\r\n if (item.mapTo) {\r\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\r\n } else {\r\n ret[item.name] = (item._value || []).join(',')\r\n }\r\n break\r\n default:\r\n ret[item.name] = item._value\r\n break\r\n }\r\n })\r\n return ret\r\n },\r\n cleanValues () {\r\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\r\n const { defaultValue } = item\r\n switch (item.type) {\r\n case 'Select':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n case 'DatePicker':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', undefined)\r\n break\r\n case 'ele-date-range':\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', [])\r\n break\r\n default:\r\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\r\n !defaultValue && this.$set(item, '_value', null)\r\n break\r\n }\r\n })\r\n },\r\n handleClickReset () {\r\n this.cleanValues()\r\n //TODO defaultValue\r\n const querys = this.extractValues()\r\n this.$emit('search', querys)\r\n },\r\n onChangeSelect (value, props) {\r\n this.$set(props, '_value', value)\r\n }\r\n },\r\n destroyed () {\r\n this.cleanValues()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.search-area__wrapper {\r\n padding-top: 16px;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n ::v-deep .ant-col {\r\n &:last-child {\r\n float: right;\r\n }\r\n }\r\n .search-area__item {\r\n height: 32px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &.search-area--action {\r\n justify-content: end;\r\n }\r\n .expand-collapse {\r\n margin-left: 8px;\r\n height: 32px;\r\n padding: 4px 16px;\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n .expand-collapse__text {\r\n font-size: 14px;\r\n }\r\n .expand-collapse__icon {\r\n font-size: 16px;\r\n margin-left: 8px;\r\n }\r\n }\r\n }\r\n}\r\n</style>",".search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper ::v-deep .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.search-area__wrapper .search-area__item.search-area--action {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse {\n margin-left: 8px;\n height: 32px;\n padding: 4px 16px;\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__text {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13255
13266
|
|
|
13256
13267
|
};
|
|
13257
13268
|
/* scoped */
|
|
13258
|
-
const __vue_scope_id__$b = "data-v-
|
|
13269
|
+
const __vue_scope_id__$b = "data-v-603c5ec8";
|
|
13259
13270
|
/* module identifier */
|
|
13260
13271
|
const __vue_module_identifier__$b = undefined;
|
|
13261
13272
|
/* functional template */
|
|
@@ -14791,7 +14802,7 @@
|
|
|
14791
14802
|
if (shared.type.isStr(this.returnValues)) {
|
|
14792
14803
|
this.emitValue = '';
|
|
14793
14804
|
} else if (shared.type.isObject(this.returnValues)) {
|
|
14794
|
-
this.emitValue =
|
|
14805
|
+
this.emitValue = null;
|
|
14795
14806
|
}
|
|
14796
14807
|
}
|
|
14797
14808
|
this.$emit('change', this.emitValue);
|
|
@@ -14806,8 +14817,8 @@
|
|
|
14806
14817
|
const currentTableSelectionRet = shared.type.isArray(currentTableSelection) ? currentTableSelection : [currentTableSelection];
|
|
14807
14818
|
this.entityValue = currentTableSelectionRet.map(item => {
|
|
14808
14819
|
return {
|
|
14809
|
-
label: item[this.replaceFields.label],
|
|
14810
|
-
value: item[this.replaceFields.value]
|
|
14820
|
+
label: item[this.returnValues[this.replaceFields.label]],
|
|
14821
|
+
value: item[this.returnValues[this.replaceFields.value]]
|
|
14811
14822
|
};
|
|
14812
14823
|
});
|
|
14813
14824
|
this.emitEntityValue(currentTableSelection);
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="search-area__wrapper">
|
|
2
|
+
<div class="search-area__wrapper" v-show="dataSource.length">
|
|
3
3
|
<a-row :gutter="gutter">
|
|
4
4
|
<template v-for="(item, idx) in innerDataSource">
|
|
5
5
|
<a-col v-if="item._show" :span="item.span || span" :key="idx">
|
|
@@ -61,7 +61,8 @@ export default {
|
|
|
61
61
|
},
|
|
62
62
|
dataSource: {
|
|
63
63
|
type: Array,
|
|
64
|
-
required: true
|
|
64
|
+
required: true,
|
|
65
|
+
default: () => []
|
|
65
66
|
}
|
|
66
67
|
},
|
|
67
68
|
data() {
|
|
@@ -143,7 +143,7 @@ export default {
|
|
|
143
143
|
if (type.isStr(this.returnValues)) {
|
|
144
144
|
this.emitValue = ''
|
|
145
145
|
} else if (type.isObject(this.returnValues)) {
|
|
146
|
-
this.emitValue =
|
|
146
|
+
this.emitValue = null
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
this.$emit('change', this.emitValue)
|
|
@@ -154,8 +154,8 @@ export default {
|
|
|
154
154
|
const currentTableSelectionRet = type.isArray(currentTableSelection) ? currentTableSelection : [currentTableSelection]
|
|
155
155
|
this.entityValue = currentTableSelectionRet.map(item => {
|
|
156
156
|
return {
|
|
157
|
-
label: item[this.replaceFields.label],
|
|
158
|
-
value: item[this.replaceFields.value]
|
|
157
|
+
label: item[this.returnValues[this.replaceFields.label]],
|
|
158
|
+
value: item[this.returnValues[this.replaceFields.value]]
|
|
159
159
|
}
|
|
160
160
|
})
|
|
161
161
|
this.emitEntityValue(currentTableSelection)
|
|
File without changes
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
# Utils 工具库目录结构
|
|
2
|
+
|
|
3
|
+
## 📁 目录结构
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
utils/
|
|
7
|
+
├── README.md # 本说明文档
|
|
8
|
+
├── index.js # 工具库主入口，导出所有工具和常量
|
|
9
|
+
└── runtime-context/ # Runtime Context 数据池模块
|
|
10
|
+
├── index.js # 统一导出入口
|
|
11
|
+
├── globalDataPool.js # 全局数据池核心架构
|
|
12
|
+
├── dataPoolAPI.js # 统一的数据池 API 接口
|
|
13
|
+
└── modelSchema.js # 模型字段定义和类型验证
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## 🚀 使用方式
|
|
17
|
+
|
|
18
|
+
### 1. 传统工具（常量和函数）
|
|
19
|
+
|
|
20
|
+
```javascript
|
|
21
|
+
import {
|
|
22
|
+
NAMESPACE,
|
|
23
|
+
CONTEXT,
|
|
24
|
+
BUILT_IN_EVENT_NAMES,
|
|
25
|
+
parseFieldMap
|
|
26
|
+
} from '@/utils'
|
|
27
|
+
|
|
28
|
+
// 使用常量和工具函数
|
|
29
|
+
const context = CONTEXT
|
|
30
|
+
const fieldMap = parseFieldMap(fieldMapConfig, dataSource)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 2. Runtime Context 数据池
|
|
34
|
+
|
|
35
|
+
```javascript
|
|
36
|
+
// 直接导入（推荐）
|
|
37
|
+
import { createTreeTableModel, createDataPoolAPI } from '@/utils/runtime-context'
|
|
38
|
+
|
|
39
|
+
// 使用示例
|
|
40
|
+
const model = createTreeTableModel('my-table')
|
|
41
|
+
const api = createDataPoolAPI()
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 3. TreeTable 模型（推荐用法）
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import { createTreeTableModel } from '@/utils/runtime-context'
|
|
48
|
+
|
|
49
|
+
// 创建 TreeTable 模型实例
|
|
50
|
+
const model = createTreeTableModel('tree-table-instance')
|
|
51
|
+
|
|
52
|
+
// 使用模型方法
|
|
53
|
+
model.setCurrentRowData({ id: 1, name: '测试数据' })
|
|
54
|
+
const currentRow = model.getCurrentRowData()
|
|
55
|
+
|
|
56
|
+
// 订阅数据变化
|
|
57
|
+
model.subscribe('currentRowData', (event) => {
|
|
58
|
+
console.log('数据变化:', event.value)
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
// 设置共享数据（用于 modal table）
|
|
62
|
+
model.setSharedData({ parentData: '父级数据' })
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 4. 模型字段定义
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
import { TREE_TABLE_FIELDS, getSupportedFields, getFieldDefinition } from '@/utils/runtime-context'
|
|
69
|
+
|
|
70
|
+
// 查看支持的字段
|
|
71
|
+
console.log('支持的字段:', getSupportedFields()) // ['currentRowData']
|
|
72
|
+
|
|
73
|
+
// 查看字段定义
|
|
74
|
+
console.log('currentRowData 字段定义:', getFieldDefinition('currentRowData'))
|
|
75
|
+
// 输出: { type: 'object', default: {}, description: '当前表格选中的行数据' }
|
|
76
|
+
|
|
77
|
+
// 字段会在模型创建时自动初始化为默认值
|
|
78
|
+
const model = createTreeTableModel('my-table')
|
|
79
|
+
console.log(model.getCurrentRowData()) // {} (默认值)
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## 📋 模块说明
|
|
83
|
+
|
|
84
|
+
### Runtime Context 模块
|
|
85
|
+
|
|
86
|
+
新一代的数据池管理系统，基于 `@idooel/runtime-context` 构建：
|
|
87
|
+
|
|
88
|
+
- **globalDataPool.js**: 核心架构，挂载到 `window.__idooel_data_pool__`
|
|
89
|
+
- **dataPoolAPI.js**: 统一的 API 接口，提供简洁易用的方法
|
|
90
|
+
- **modelSchema.js**: 模型字段定义和类型验证
|
|
91
|
+
|
|
92
|
+
### 传统工具
|
|
93
|
+
|
|
94
|
+
保持向后兼容的工具和常量：
|
|
95
|
+
|
|
96
|
+
- **index.js**: 常量定义和工具函数
|
|
97
|
+
|
|
98
|
+
## 🔄 迁移指南
|
|
99
|
+
|
|
100
|
+
### 从旧版数据池迁移
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
// 旧版 TreeTableDataPoolManager（已弃用）
|
|
104
|
+
import { createPoolManager, generateInstanceId } from '@/utils/treeTableDataPoolManager'
|
|
105
|
+
|
|
106
|
+
// 新版 runtime-context（推荐）
|
|
107
|
+
import { createTreeTableModel } from '@/utils/runtime-context'
|
|
108
|
+
const model = createTreeTableModel('instance-id')
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### TreeTable 组件迁移
|
|
112
|
+
|
|
113
|
+
✅ **已完成迁移** - 组件已从 TreeTableDataPoolManager 迁移到新的 runtime-context 架构：
|
|
114
|
+
|
|
115
|
+
```javascript
|
|
116
|
+
// 新版用法（已实现）
|
|
117
|
+
import { createTreeTableModel } from '@/utils/runtime-context'
|
|
118
|
+
|
|
119
|
+
export default {
|
|
120
|
+
async created() {
|
|
121
|
+
// 确保全局数据池已初始化
|
|
122
|
+
if (!window.__idooel_data_pool__) {
|
|
123
|
+
console.error('Global data pool not initialized')
|
|
124
|
+
return
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// 创建 TreeTable 模型实例
|
|
128
|
+
this.model = createTreeTableModel('treeTableModel')
|
|
129
|
+
|
|
130
|
+
// 使用模型方法
|
|
131
|
+
this.model.setCurrentRowData({ id: 1, name: '测试数据' })
|
|
132
|
+
const currentRow = this.model.getCurrentRowData()
|
|
133
|
+
|
|
134
|
+
// 订阅数据变化
|
|
135
|
+
this.unsubscribe = this.model.subscribe('currentRowData', (event) => {
|
|
136
|
+
this.currentRowData = event.value
|
|
137
|
+
this.$forceUpdate()
|
|
138
|
+
})
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
beforeDestroy() {
|
|
142
|
+
// 清理订阅
|
|
143
|
+
if (this.unsubscribe) this.unsubscribe()
|
|
144
|
+
if (this.model) this.model.cleanup()
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## 🛠️ 开发建议
|
|
150
|
+
|
|
151
|
+
1. **新项目**: 直接使用 `runtime-context` 模块
|
|
152
|
+
2. **已迁移项目**: 使用新的 `createTreeTableModel` API
|
|
153
|
+
3. **初始化检查**: 组件中检查 `window.__idooel_data_pool__` 确保数据池已初始化
|
|
154
|
+
4. **错误处理**: 使用 try-catch 包裹模型创建，添加安全检查
|
|
155
|
+
5. **共享数据**: 使用简单的 `setSharedData()` 和 `getSharedData()` 方法
|
|
156
|
+
6. **调试**: 使用 `window.__idooel_data_pool__.manager.debug()` 查看状态
|
|
157
|
+
7. **批量操作**: 使用 `setBatchModelData` 提高效率
|
|
158
|
+
8. **数据管理**: 使用 `export/import` 方法进行数据备份和恢复
|
|
159
|
+
9. **内存管理**: 在组件销毁时正确清理订阅和模型数据
|
|
160
|
+
|
|
161
|
+
## ⚠️ 注意事项
|
|
162
|
+
|
|
163
|
+
- **初始化顺序**: 确保 `runtime-context` 模块在使用前已导入
|
|
164
|
+
- **错误处理**: 组件应处理模型创建失败的情况
|
|
165
|
+
- **清理工作**: 组件销毁时必须清理订阅和模型，避免内存泄漏
|
|
166
|
+
- **向后兼容**: 旧的 `TreeTableDataPoolManager` 已弃用，请使用新的 API
|
|
167
|
+
|
|
168
|
+
## 📚 相关文档
|
|
169
|
+
|
|
170
|
+
- [API 接口文档](./runtime-context/dataPoolAPI.js)
|
|
171
|
+
- [全局数据池架构](./runtime-context/globalDataPool.js)
|
|
172
|
+
- [模型字段定义](./runtime-context/modelSchema.js)
|