@idooel/components 0.0.1-beta.99 → 0.0.2
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/README.md +98 -98
- package/dist/@idooel/components.esm.js +256 -159
- package/dist/@idooel/components.umd.js +256 -159
- package/jsconfig.json +7 -7
- package/package.json +50 -50
- package/packages/alert/index.js +4 -4
- package/packages/alert/src/index.vue +45 -45
- package/packages/batch-export/index.js +4 -4
- package/packages/batch-export/src/index.vue +104 -104
- package/packages/business-components/modal-fsm/index.js +4 -4
- package/packages/business-components/modal-fsm/src/index.vue +163 -163
- package/packages/business-components/modal-import/index.js +4 -4
- package/packages/business-components/modal-import/src/index.vue +139 -139
- package/packages/business-components/modal-timeline/index.js +4 -4
- package/packages/business-components/modal-timeline/src/index.vue +77 -77
- package/packages/business-components/tabs-sub-center/index.js +4 -4
- package/packages/business-components/tabs-sub-center/src/index.vue +116 -116
- package/packages/button/index.js +4 -4
- package/packages/button/src/index.vue +65 -65
- package/packages/checkbox/index.js +4 -4
- package/packages/checkbox/src/index.vue +52 -52
- package/packages/composite-components/button-group/index.js +4 -4
- package/packages/composite-components/button-group/src/index.vue +151 -151
- package/packages/composite-components/form-attachment/src/index.vue +14 -14
- package/packages/composite-components/form-img-crop/index.js +4 -4
- package/packages/composite-components/form-img-crop/src/index.vue +120 -111
- package/packages/composite-components/modal-confirm/index.js +4 -4
- package/packages/composite-components/modal-confirm/src/index.vue +103 -103
- package/packages/composite-components/modal-form/index.js +4 -4
- package/packages/composite-components/modal-form/src/index.vue +230 -223
- package/packages/composite-components/modal-img-crop/index.js +4 -4
- package/packages/composite-components/modal-img-crop/src/index.vue +298 -289
- package/packages/composite-components/modal-table/index.js +4 -4
- package/packages/composite-components/modal-table/src/index.vue +155 -155
- package/packages/composite-components/modal-tree/index.js +4 -4
- package/packages/composite-components/modal-tree/src/index.vue +75 -75
- package/packages/composite-components/search-area/index.js +4 -4
- package/packages/composite-components/search-area/src/index.vue +237 -237
- package/packages/composite-components/search-area/src/label.vue +35 -35
- package/packages/composite-components/select-entity-modal-table/index.js +4 -4
- package/packages/composite-components/select-entity-modal-table/src/index.vue +171 -168
- package/packages/date/index.js +4 -4
- package/packages/date/src/index.vue +112 -112
- package/packages/date-range/index.js +4 -4
- package/packages/date-range/src/index.vue +47 -47
- package/packages/form/index.js +4 -4
- package/packages/form/src/index.vue +318 -302
- package/packages/icon/index.js +4 -4
- package/packages/icon/src/index.vue +31 -31
- package/packages/index.js +153 -153
- package/packages/input/index.js +4 -4
- package/packages/input/src/index.vue +35 -35
- package/packages/input-number/index.js +4 -4
- package/packages/input-number/src/index.vue +23 -23
- package/packages/loading/index.js +4 -4
- package/packages/loading/src/index.vue +36 -36
- package/packages/modal/index.js +4 -4
- package/packages/modal/src/index.vue +184 -184
- package/packages/models/form-group-model/index.js +4 -4
- package/packages/models/form-group-model/src/index.vue +273 -273
- package/packages/models/form-model/index.js +4 -4
- package/packages/models/form-model/src/index.vue +232 -221
- package/packages/models/step-model/index.js +4 -4
- package/packages/models/step-model/src/index.vue +224 -224
- package/packages/models/tree-table-model/index.js +4 -4
- package/packages/models/tree-table-model/src/index.vue +689 -681
- package/packages/radio/index.js +4 -4
- package/packages/radio/src/index.vue +56 -56
- package/packages/select/index.js +4 -4
- package/packages/select/src/index.vue +105 -105
- package/packages/select-entity/index.js +4 -4
- package/packages/select-entity/src/index.vue +119 -119
- package/packages/table/index.js +4 -4
- package/packages/table/src/action.vue +172 -172
- package/packages/table/src/index.vue +289 -335
- package/packages/tabs/index.js +4 -4
- package/packages/tabs/src/index.vue +55 -55
- package/packages/text/index.js +4 -4
- package/packages/text/src/index.vue +47 -47
- package/packages/text-editor/index.js +4 -4
- package/packages/text-editor/src/index.vue +72 -72
- package/packages/textarea/index.js +4 -4
- package/packages/textarea/src/index.vue +57 -57
- package/packages/theme/form.scss +21 -21
- package/packages/theme/index.scss +42 -42
- package/packages/theme/overrid.scss +7 -7
- package/packages/theme/styleClass.scss +2 -2
- package/packages/theme/variables.scss +55 -55
- package/packages/timeline/index.js +4 -4
- package/packages/timeline/src/index.vue +257 -257
- package/packages/tpl/index.js +4 -4
- package/packages/tpl/src/index.vue +55 -55
- package/packages/tree/index.js +4 -4
- package/packages/tree/src/TreeNode.vue +29 -29
- package/packages/tree/src/index.vue +101 -101
- package/packages/tree-select/index.js +4 -4
- package/packages/tree-select/src/index.vue +142 -142
- package/packages/upload/index.js +4 -4
- package/packages/upload/src/index.vue +444 -444
- package/packages/utils/index.js +62 -62
- package/scripts/rollup.config.js +42 -42
- package/scripts/rollup.esm.config.js +11 -11
- package/scripts/rollup.umd.config.js +14 -14
- package/dist/@idooel/components.esm.js.map +0 -1
- package/dist/@idooel/components.umd.js.map +0 -1
|
@@ -864,11 +864,11 @@ __vue_render__$G._withStripped = true;
|
|
|
864
864
|
/* style */
|
|
865
865
|
const __vue_inject_styles__$G = function (inject) {
|
|
866
866
|
if (!inject) return
|
|
867
|
-
inject("data-v-
|
|
867
|
+
inject("data-v-7716ba90_0", { source: ".ele-date__wrapper[data-v-7716ba90] {\n width: 100%;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/date/src/index.vue","index.vue"],"names":[],"mappings":"AA6GA;EACA,WAAA;AC5GA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele-date__wrapper\">\n <a-date-picker \n style=\"width: 100%;\" \n :mode=\"modeValue\"\n v-if=\"modeValue == 'year'\"\n :open=\"open\"\n :disabled=\"disabled\"\n :value=\"value\"\n :placeholder=\"placeholder\"\n :show-time=\"showTime\"\n :show-today=\"showToday\"\n :valueFormat=\"innerValueFormat\"\n @panelChange=\"onPanelChange\"\n @openChange=\"openChange\"\n @change=\"onChange\"\n :format=\"format\">\n </a-date-picker>\n <a-date-picker \n v-else\n style=\"width: 100%;\"\n :placeholder=\"placeholder\"\n :open=\"open\"\n :disabled=\"disabled\"\n :value=\"value\"\n :show-time=\"showTime\"\n :show-today=\"showToday\"\n :valueFormat=\"innerValueFormat\"\n @panelChange=\"onPanelChange\"\n @openChange=\"openChange\"\n @change=\"onChange\"\n :format=\"format\">\n </a-date-picker>\n </div>\n</template>\n\n<script>\nimport moment from 'moment'\nexport default {\n name: 'ele-date',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: [String, Object]\n },\n disabled: {\n type: Boolean,\n default: false\n },\n format: {\n type: String,\n default: 'YYYY/MM/DD'\n },\n mode: {\n type: String\n },\n valueFormat: {\n type: String\n },\n showTime: {\n type: [Boolean, Object],\n default: true\n },\n showToday: {\n type: Boolean,\n default: true\n },\n placeholder: {\n type: String,\n default: '请选择日期'\n }\n },\n data () {\n return {\n open: false\n }\n },\n computed: {\n innerValueFormat () {\n if (this.valueFormat) return this.valueFormat\n return this.format\n },\n modeValue () {\n if (this.mode) return this.mode\n if (this.format === 'YYYY') return 'year'\n return 'date'\n }\n },\n methods: {\n onChange (_, dataString) {\n this.$emit('input', dataString)\n this.$emit('change', dataString)\n },\n onPanelChange (value, mode) {\n if (this.modeValue !== 'year') return\n this.$emit('input', moment(value).format(this.format))\n this.$emit('change', moment(value).format(this.format))\n this.open = false\n },\n openChange (open) {\n this.open = open\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.ele-date__wrapper {\n width: 100%;\n}\n</style>",".ele-date__wrapper {\n width: 100%;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
868
868
|
|
|
869
869
|
};
|
|
870
870
|
/* scoped */
|
|
871
|
-
const __vue_scope_id__$G = "data-v-
|
|
871
|
+
const __vue_scope_id__$G = "data-v-7716ba90";
|
|
872
872
|
/* module identifier */
|
|
873
873
|
const __vue_module_identifier__$G = undefined;
|
|
874
874
|
/* functional template */
|
|
@@ -949,11 +949,11 @@ __vue_render__$F._withStripped = true;
|
|
|
949
949
|
/* style */
|
|
950
950
|
const __vue_inject_styles__$F = function (inject) {
|
|
951
951
|
if (!inject) return
|
|
952
|
-
inject("data-v-
|
|
952
|
+
inject("data-v-c04139c8_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"index.vue"}, media: undefined });
|
|
953
953
|
|
|
954
954
|
};
|
|
955
955
|
/* scoped */
|
|
956
|
-
const __vue_scope_id__$F = "data-v-
|
|
956
|
+
const __vue_scope_id__$F = "data-v-c04139c8";
|
|
957
957
|
/* module identifier */
|
|
958
958
|
const __vue_module_identifier__$F = undefined;
|
|
959
959
|
/* functional template */
|
|
@@ -1108,11 +1108,11 @@ __vue_render__$E._withStripped = true;
|
|
|
1108
1108
|
/* style */
|
|
1109
1109
|
const __vue_inject_styles__$E = function (inject) {
|
|
1110
1110
|
if (!inject) return
|
|
1111
|
-
inject("data-v-
|
|
1111
|
+
inject("data-v-dd210296_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
1112
1112
|
|
|
1113
1113
|
};
|
|
1114
1114
|
/* scoped */
|
|
1115
|
-
const __vue_scope_id__$E = "data-v-
|
|
1115
|
+
const __vue_scope_id__$E = "data-v-dd210296";
|
|
1116
1116
|
/* module identifier */
|
|
1117
1117
|
const __vue_module_identifier__$E = undefined;
|
|
1118
1118
|
/* functional template */
|
|
@@ -1706,11 +1706,11 @@ __vue_render__$D._withStripped = true;
|
|
|
1706
1706
|
/* style */
|
|
1707
1707
|
const __vue_inject_styles__$D = function (inject) {
|
|
1708
1708
|
if (!inject) return
|
|
1709
|
-
inject("data-v-
|
|
1709
|
+
inject("data-v-76737e8f_0", { source: ".g-table__action[data-v-76737e8f] {\n display: flex;\n flex-direction: row;\n}\n.g-table__action .table-action__item[data-v-76737e8f] {\n font-size: 14px;\n color: #409EFF;\n margin-left: 16px;\n cursor: pointer;\n}\n.g-table__action .table-action__item[data-v-76737e8f]:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=action.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/action.vue","action.vue"],"names":[],"mappings":"AA+JA;EACA,aAAA;EACA,mBAAA;AC9JA;AD+JA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,eAAA;AC7JA;AD8JA;EACA,cAAA;AC5JA;;AAEA,qCAAqC","file":"action.vue","sourcesContent":["<template>\n <div class=\"g-table__action\">\n <div class=\"table-action__item\" v-for=\"(item, idx) in execOperationExpression(dataSource)\" :key=\"idx\">\n <template v-if=\"item.type == 'text'\">\n <span @click=\"handleClickText(item)\">{{ item.label }}</span>\n </template>\n <template v-else-if=\"item.type == 'confirm'\">\n <div>\n <a-popconfirm :title=\"item.message\" @confirm=\"handleClickConfirm(item)\">\n {{ item.label }}\n </a-popconfirm>\n </div>\n </template>\n <template v-else-if=\"item.type == 'dropdown'\">\n <a-dropdown>\n <a-menu slot=\"overlay\" @click=\"handleDropdownClick\">\n <a-menu-item :key=\"`${item.key || ''}${menuKeyDelimiter}${opt.value || ''}`\" v-for=\"opt in execOperationExpression(item.optionList)\">\n <template v-if=\"opt.type == 'confirm'\">\n <a-popconfirm :title=\"opt.message\" @confirm=\"handleClickConfirm(opt)\">\n {{ opt.label }}\n </a-popconfirm>\n </template>\n <template v-else-if=\"opt.type == 'modal-confirm'\">\n <div style=\"width: 100%\" @click=\"handleClickModalConfirm(opt)\">{{ opt.label }}</div>\n <ele-modal-confirm v-bind=\"opt.modalConfirm\" v-on=\"$listeners\" v-model=\"showModalConfirm\"></ele-modal-confirm>\n </template>\n <template v-else>\n {{ opt.label }}\n </template>\n </a-menu-item>\n </a-menu>\n <span>{{ item.label }}</span>\n </a-dropdown>\n </template>\n </div>\n </div>\n</template>\n\n<script>\nimport { v5 as uuidv5 } from 'uuid'\nimport { type, route } from '@idooel/shared'\nimport { parse } from '@idooel/expression'\nimport { CONTEXT } from '../../utils'\nconst MENU_KEY_NAMESPACE = 'f7b3b8b0-1b7b-11ec-9621-0242ac130002'\nexport default {\n props: {\n record: {\n type: Object\n },\n dataSource: {\n type: Array,\n default: () => []\n }\n },\n inject: {\n requestTreeData: {\n default: void 0\n },\n requestTableData: {\n default: void 0\n }\n },\n data() {\n return {\n showModalConfirm: false\n }\n },\n provide () {\n return {\n [CONTEXT]: () => {\n return {\n _route: this.$route.query,\n _routeMeta: this.$route.meta,\n exposed: this.builtInMethods,\n ...this.record\n }\n }\n }\n },\n computed: {\n menuKeyDelimiter () {\n return uuidv5('_', MENU_KEY_NAMESPACE)\n },\n builtInMethods () {\n return { \n requestTreeData: this.requestTreeData, \n requestTableData: this.requestTableData,\n closeModalConfirm: this.closeModalConfirm,\n showModalConfirm: this.handleClickModalConfirm,\n currentRowData: this.record\n }\n }\n },\n methods: {\n closeModalConfirm () {\n this.showModalConfirm = false\n },\n handleClickModalConfirm () {\n this.showModalConfirm = true\n },\n execOperationExpression (dataSource = []) {\n const ret = dataSource.map(item => {\n const { show } = item\n if (type.isUndefined(show)) {\n return item\n } else if (type.isBool(show)) {\n if (show) return item\n } else if (type.isStr(show)) {\n const parseRet = parse(show, { \n ...this.record, \n _route: route.searchToQueryParams(window.location.search) \n })\n if (parseRet) return item\n }\n }).filter(item => item)\n return ret\n },\n handleClickConfirm (props) {\n //TODO generate event by special rule\n const { eventName, value, key } = props\n this.$emit(eventName || key, { \n key: value || key, \n record: this.record,\n builtInMethods: this.builtInMethods,\n exposed: this.builtInMethods\n })\n },\n handleDropdownClick (props) {\n const { key } = props\n const [parent, child] = key.split(this.menuKeyDelimiter)\n if (!parent || !child) {\n throw new Error('key is required')\n }\n const currentDropdown = this.dataSource.find(item => item.key === parent)\n const currentClickTarget = currentDropdown.optionList.find(item => item.value === child)\n const { eventName, type, key: currentKey } = currentClickTarget\n //TODO generate event by special rule\n if (type === 'confirm' || type === 'modal-confirm') return\n this.$emit(eventName || currentKey, { \n key: child, \n record: this.record, \n builtInMethods: this.builtInMethods,\n exposed: this.builtInMethods\n })\n },\n handleClickText (props) {\n const { eventName, key } = props\n this.$emit(eventName || key, { \n key, \n record: this.record, \n builtInMethods: this.builtInMethods,\n exposed: this.builtInMethods\n })\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__action {\n display: flex;\n flex-direction: row;\n .table-action__item {\n font-size: 14px;\n color: #409EFF;\n margin-left: 16px;\n cursor: pointer;\n &:first-child {\n margin-left: 0;\n }\n }\n}\n</style>",".g-table__action {\n display: flex;\n flex-direction: row;\n}\n.g-table__action .table-action__item {\n font-size: 14px;\n color: #409EFF;\n margin-left: 16px;\n cursor: pointer;\n}\n.g-table__action .table-action__item:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=action.vue.map */"]}, media: undefined });
|
|
1710
1710
|
|
|
1711
1711
|
};
|
|
1712
1712
|
/* scoped */
|
|
1713
|
-
const __vue_scope_id__$D = "data-v-
|
|
1713
|
+
const __vue_scope_id__$D = "data-v-76737e8f";
|
|
1714
1714
|
/* module identifier */
|
|
1715
1715
|
const __vue_module_identifier__$D = undefined;
|
|
1716
1716
|
/* functional template */
|
|
@@ -1802,42 +1802,36 @@ var script$C = {
|
|
|
1802
1802
|
innerPageSize: 10,
|
|
1803
1803
|
innerCurrentPage: 1,
|
|
1804
1804
|
tableContentHeight: 0,
|
|
1805
|
-
obs: []
|
|
1806
|
-
tableTbodyHeight: 0
|
|
1805
|
+
obs: []
|
|
1807
1806
|
};
|
|
1808
1807
|
},
|
|
1809
1808
|
computed: {
|
|
1809
|
+
wrapperStyle() {
|
|
1810
|
+
// 外层容器样式:确保分页始终可见,表格充满剩余空间
|
|
1811
|
+
if (!this.height) return {};
|
|
1812
|
+
return {
|
|
1813
|
+
height: `${this.height}px`
|
|
1814
|
+
};
|
|
1815
|
+
},
|
|
1816
|
+
needScrollY() {
|
|
1817
|
+
// 判断是否需要 y 轴滚动:基于数据行数与可用高度预估
|
|
1818
|
+
if (!this.height) return false;
|
|
1819
|
+
const availableHeight = this.getScrollHeightByHeight;
|
|
1820
|
+
if (availableHeight <= 0) return false;
|
|
1821
|
+
|
|
1822
|
+
// 预估每行高度(包含边框),antd 默认约 54px
|
|
1823
|
+
const estimatedRowHeight = 54;
|
|
1824
|
+
const estimatedTableHeight = this.dataSource.length * estimatedRowHeight;
|
|
1825
|
+
return estimatedTableHeight > availableHeight;
|
|
1826
|
+
},
|
|
1810
1827
|
innerColumns() {
|
|
1811
1828
|
return this.columns.filter(col => !Object.keys(col).includes('multiple'));
|
|
1812
1829
|
},
|
|
1813
1830
|
isNoData() {
|
|
1814
1831
|
return !this.dataSource.length;
|
|
1815
1832
|
},
|
|
1816
|
-
noDataAntTableHeight() {
|
|
1817
|
-
//TODO
|
|
1818
|
-
if (this.dataSource.length) {
|
|
1819
|
-
// return 'auto'
|
|
1820
|
-
return `${this.height - this.paginationHeight - 16}px`;
|
|
1821
|
-
}
|
|
1822
|
-
return `${this.height - this.paginationHeight - 16}px`;
|
|
1823
|
-
},
|
|
1824
1833
|
getScrollHeightByHeight() {
|
|
1825
|
-
|
|
1826
|
-
if (this.tableTbodyHeight == 0) {
|
|
1827
|
-
//暂无数据
|
|
1828
|
-
document.querySelector('.ant-table-body') && (document.querySelector('.ant-table-body').style.height = 'auto');
|
|
1829
|
-
} else if (this.tableTbodyHeight !== 0 && height > this.tableTbodyHeight) {
|
|
1830
|
-
document.querySelector('.ant-table-content') && (document.querySelector('.ant-table-content').style.height = 'inherit');
|
|
1831
|
-
document.querySelector('.ant-table-scroll') && (document.querySelector('.ant-table-scroll').style.height = 'inherit');
|
|
1832
|
-
document.querySelector('.ant-table-body') && (document.querySelector('.ant-table-body').style.height = 'inherit');
|
|
1833
|
-
if (this.tableTbodyHeight > height) {
|
|
1834
|
-
document.querySelector('.ant-table-content').style.height = 'auto';
|
|
1835
|
-
document.querySelector('.ant-table-scroll').style.height = 'auto';
|
|
1836
|
-
document.querySelector('.ant-table-body').style.height = 'auto';
|
|
1837
|
-
}
|
|
1838
|
-
return 0;
|
|
1839
|
-
// 0的时候没有y滚动条
|
|
1840
|
-
}
|
|
1834
|
+
// 始终返回可用的剩余高度,让表格内容不足时也能占满容器
|
|
1841
1835
|
return this.height - this.tableHeaderHeight - this.paginationHeight;
|
|
1842
1836
|
},
|
|
1843
1837
|
isFlexColumn() {
|
|
@@ -1847,15 +1841,28 @@ var script$C = {
|
|
|
1847
1841
|
if (this.scroll) {
|
|
1848
1842
|
return this.scroll;
|
|
1849
1843
|
} else {
|
|
1844
|
+
const baseX = this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x;
|
|
1850
1845
|
if (this.height) {
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1846
|
+
// 计算表体可用高度
|
|
1847
|
+
const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100; // 预估值,给表头和分页留空间
|
|
1848
|
+
|
|
1849
|
+
if (availableHeight > 50) {
|
|
1850
|
+
// 确保有足够的最小高度
|
|
1851
|
+
console.log('Table scroll config:', {
|
|
1852
|
+
x: baseX,
|
|
1853
|
+
y: availableHeight,
|
|
1854
|
+
height: this.height,
|
|
1855
|
+
headerHeight: this.tableHeaderHeight,
|
|
1856
|
+
paginationHeight: this.paginationHeight
|
|
1857
|
+
});
|
|
1858
|
+
return {
|
|
1859
|
+
x: baseX,
|
|
1860
|
+
y: availableHeight
|
|
1861
|
+
};
|
|
1862
|
+
}
|
|
1855
1863
|
}
|
|
1856
1864
|
return {
|
|
1857
|
-
x:
|
|
1858
|
-
y: this.y
|
|
1865
|
+
x: baseX
|
|
1859
1866
|
};
|
|
1860
1867
|
}
|
|
1861
1868
|
}
|
|
@@ -1893,21 +1900,10 @@ var script$C = {
|
|
|
1893
1900
|
});
|
|
1894
1901
|
},
|
|
1895
1902
|
setTableTbodyHeight() {
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
for (const _ of entries) {
|
|
1900
|
-
requestAnimationFrame(() => {
|
|
1901
|
-
const {
|
|
1902
|
-
height
|
|
1903
|
-
} = el.getBoundingClientRect();
|
|
1904
|
-
this.tableTbodyHeight = height;
|
|
1905
|
-
this.setTableHeaderHeight();
|
|
1906
|
-
});
|
|
1907
|
-
}
|
|
1903
|
+
// 简化:仅需要获取表头高度,不再依赖表体高度的动态监听
|
|
1904
|
+
this.$nextTick(() => {
|
|
1905
|
+
this.setTableHeaderHeight();
|
|
1908
1906
|
});
|
|
1909
|
-
ob.observe(el);
|
|
1910
|
-
this.obs.push(ob);
|
|
1911
1907
|
},
|
|
1912
1908
|
setRowClassName(record, idx) {
|
|
1913
1909
|
return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
|
|
@@ -1919,10 +1915,14 @@ var script$C = {
|
|
|
1919
1915
|
}
|
|
1920
1916
|
},
|
|
1921
1917
|
mounted() {
|
|
1922
|
-
this
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1918
|
+
this.$nextTick(() => {
|
|
1919
|
+
this.setPaginationHeight();
|
|
1920
|
+
setTimeout(() => {
|
|
1921
|
+
this.setTableTbodyHeight();
|
|
1922
|
+
// 再测一次分页高度,确保初次渲染完成后数值准确
|
|
1923
|
+
this.setPaginationHeight();
|
|
1924
|
+
}, 200);
|
|
1925
|
+
});
|
|
1926
1926
|
},
|
|
1927
1927
|
destroyed() {
|
|
1928
1928
|
this.obs.forEach(ob => ob.disconnect());
|
|
@@ -1939,11 +1939,14 @@ var __vue_render__$C = function () {
|
|
|
1939
1939
|
var _c = _vm._self._c || _h;
|
|
1940
1940
|
return _c(
|
|
1941
1941
|
"div",
|
|
1942
|
-
{
|
|
1942
|
+
{
|
|
1943
|
+
staticClass: "g-table__wrapper",
|
|
1944
|
+
class: { "g-table--no-scroll-y": !_vm.needScrollY },
|
|
1945
|
+
style: _vm.wrapperStyle,
|
|
1946
|
+
},
|
|
1943
1947
|
[
|
|
1944
1948
|
_c("a-table", {
|
|
1945
1949
|
class: [_vm.isNoData && "g-table__no-data"],
|
|
1946
|
-
style: { height: _vm.noDataAntTableHeight },
|
|
1947
1950
|
attrs: {
|
|
1948
1951
|
bordered: _vm.bordered,
|
|
1949
1952
|
pagination: false,
|
|
@@ -2006,11 +2009,11 @@ __vue_render__$C._withStripped = true;
|
|
|
2006
2009
|
/* style */
|
|
2007
2010
|
const __vue_inject_styles__$C = function (inject) {
|
|
2008
2011
|
if (!inject) return
|
|
2009
|
-
inject("data-v-499ea711_0", { source: ".g-table__wrapper[data-v-499ea711] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-499ea711] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-499ea711] .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper[data-v-499ea711] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-499ea711] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-header tr th {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\n /* border-bottom-style: solid; */\n /* border-bottom-color: var(--idooel-border-color); */\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\n /* border-bottom-color: var(--idooel-border-color); */\n /* border-bottom-style: solid; */\n}\n.g-table__wrapper[data-v-499ea711] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-499ea711] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-499ea711] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-499ea711] {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AA2NA;EA8FA,aAAA;EACA,kBAAA;ACvTA;ADyNA;EACA,eAAA;ACvNA;ADyNA;EACA,gBAAA;ACvNA;AD0NA;EACA,eAAA;ACxNA;ADyNA;EACA,eAAA;ACvNA;ADqOA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACnOA;ADsOA;EACA,iDAAA;ACpOA;ADuOA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACrOA;AD2OA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACzOA;ADkPA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;AChPA;ADiPA;EACA,iEAAA;EACA,gCAAA;EACA,qDAAA;AC/OA;ADiPA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;AC/OA;ADiPA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;AC/OA;ADmPA;EACA,iEAAA;EACA,qDAAA;EACA,gCAAA;ACjPA;ADsPA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACpPA;AD0PA;EACA,wCAAA;ACxPA;AD0PA;EACA,uCAAA;ACxPA;AD0PA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,YAAA;ACxPA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :bordered=\"bordered\"\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: Number,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n },\r\n bordered: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: [],\r\n tableTbodyHeight: 0\r\n }\r\n },\r\n computed: {\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n const height = this.height - this.tableHeaderHeight - this.paginationHeight\r\n if (this.tableTbodyHeight == 0) {\r\n //暂无数据\r\n document.querySelector('.ant-table-body') && (document.querySelector('.ant-table-body').style.height = 'auto')\r\n } else if (this.tableTbodyHeight !== 0 && height > this.tableTbodyHeight) {\r\n document.querySelector('.ant-table-content') && (document.querySelector('.ant-table-content').style.height = 'inherit')\r\n document.querySelector('.ant-table-scroll') && (document.querySelector('.ant-table-scroll').style.height = 'inherit')\r\n document.querySelector('.ant-table-body') && (document.querySelector('.ant-table-body').style.height = 'inherit')\r\n if (this.tableTbodyHeight > height) {\r\n document.querySelector('.ant-table-content').style.height = 'auto'\r\n document.querySelector('.ant-table-scroll').style.height = 'auto'\r\n document.querySelector('.ant-table-body').style.height = 'auto'\r\n }\r\n return 0\r\n // 0的时候没有y滚动条\r\n }\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.y }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const el = document.querySelector('.ant-table-header')\r\n if (!el) return\r\n const { height } = el.getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableTbodyHeight () {\r\n const el = document.querySelector('table .ant-table-tbody')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableTbodyHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.setPaginationHeight()\r\n setTimeout(() => {\r\n this.setTableTbodyHeight()\r\n }, 100)\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-table-fixed-header {\r\n .ant-table-body-inner {\r\n overflow: hidden;\r\n }\r\n }\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n .ant-table-content {\r\n // height: inherit;\r\n // .ant-table-scroll {\r\n // height: inherit;\r\n // .ant-table-body {\r\n // height: inherit;\r\n // }\r\n // }\r\n }\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n tr {\r\n th {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n // border-top-width: calc(var(--idooel-border-width) * 1px);\r\n // border-top-style: solid;\r\n // border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\r\n /* border-bottom-style: solid; */\r\n /* border-bottom-color: var(--idooel-border-color); */\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\r\n /* border-bottom-color: var(--idooel-border-color); */\r\n /* border-bottom-style: solid; */\r\n }\r\n // border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n // border-bottom-style: solid;\r\n // border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n position: relative;\r\n z-index: 999;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-table-fixed-header .ant-table-body-inner {\n overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header tr th {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\n /* border-bottom-style: solid; */\n /* border-bottom-color: var(--idooel-border-color); */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n /* border-bottom-width: calc(var(--idooel-border-width) * 1px); */\n /* border-bottom-color: var(--idooel-border-color); */\n /* border-bottom-style: solid; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n position: relative;\n z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
2012
|
+
inject("data-v-42696953_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-42696953] {\n /* 外层采用列布局,确保分页始终可见,表格充满剩余空间 */\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* 表格区域占满剩余空间,启用纵向滚动 */\n /* 确保表体能够正常纵向滚动 */\n /* 分页区域固定在底部,不被挤出视口 */\n}\n.g-table__wrapper[data-v-42696953] .ant-table-wrapper {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-42696953] .ant-spin-nested-loading {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-42696953] .ant-spin-container {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-42696953] .ant-table {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-42696953] .ant-table-content {\n flex: 1 1 auto;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-42696953] .ant-table-scroll {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper[data-v-42696953] .ant-table-header {\n flex: 0 0 auto;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-42696953] .ant-table-body {\n flex: 1 1 auto;\n overflow: auto !important;\n /* 确保滚动条稳定,避免列宽抖动 */\n scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination[data-v-42696953] {\n flex: 0 0 auto;\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n background: #fff;\n z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/table/src/index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACwNhB;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EAEA,sBAAA;EA6BA,iBAAA;EAyBA,qBAAA;AD3QA;ACsNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADpNA;ACuNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADrNA;ACwNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADtNA;ACyNA;EACA,cAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ADvNA;AC2NA;EACA,cAAA;EACA,aAAA;EACA,gBAAA;ADzNA;AC4NA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AD1NA;AC6NA;EACA,cAAA;EACA,gBAAA;AD3NA;AC8NA;EACA,cAAA;EACA,yBAAA;EACA,mBAAA;EACA,wBAAA;AD5NA;ACgOA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,YAAA;AD9NA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n /* 外层采用列布局,确保分页始终可见,表格充满剩余空间 */\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* 表格区域占满剩余空间,启用纵向滚动 */\n /* 确保表体能够正常纵向滚动 */\n /* 分页区域固定在底部,不被挤出视口 */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-spin-container {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-content {\n flex: 1 1 auto;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-scroll {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n.g-table__wrapper ::v-deep .ant-table-header {\n flex: 0 0 auto;\n overflow: hidden;\n}\n.g-table__wrapper ::v-deep .ant-table-body {\n flex: 1 1 auto;\n overflow: auto !important;\n /* 确保滚动条稳定,避免列宽抖动 */\n scrollbar-gutter: stable;\n}\n.g-table__wrapper .g-table__pagination {\n flex: 0 0 auto;\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n background: #fff;\n z-index: 999;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\n <div class=\"g-table__wrapper\" :style=\"wrapperStyle\" :class=\"{ 'g-table--no-scroll-y': !needScrollY }\">\n <a-table\n :bordered=\"bordered\"\n :class=\"[isNoData && 'g-table__no-data']\"\n :pagination=\"false\"\n :loading=\"loading\"\n :columns=\"innerColumns\"\n :row-selection=\"rowSelection\"\n :row-class-name=\"setRowClassName\"\n :data-source=\"dataSource\"\n :scroll=\"getScroll\">\n <template slot=\"action\" slot-scope=\"record\">\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\n </template>\n </a-table>\n <div class=\"g-table__pagination\">\n <a-pagination\n :show-total=\"all => `共 ${all} 条数据`\"\n show-size-changer \n show-quick-jumper\n :pageSize=\"innerPageSize\"\n :current=\"innerCurrentPage\"\n :pageSizeOptions=\"pageSizeOptions\"\n @change=\"onChangePagination\"\n @showSizeChange=\"onShowSizeChange\"\n :total=\"total\">\n </a-pagination>\n </div>\n </div>\n</template>\n\n<script>\nimport Actions from './action.vue'\nexport default {\n name: 'ele-table',\n components: {\n Actions\n },\n props: {\n // ant table wrapper\n height: {\n type: Number\n },\n width: {\n type: Number\n },\n x: {\n type: Number,\n default: 1200\n },\n y: {\n type: Number,\n default: 200\n },\n scroll: {\n type: Object\n },\n rowSelection: {\n type: Object\n },\n actions: {\n type: Array,\n default: () => []\n },\n total: {\n type: Number,\n default: 0\n },\n loading: {\n type: Boolean,\n default: false\n },\n columns: {\n type: Array,\n default: () => []\n },\n dataSource: {\n type: Array,\n default: () => []\n },\n pageSize: {\n type: Number,\n default: 10\n },\n pageSizeOptions: {\n type: Array,\n default: () => ['10', '20', '30', '40']\n },\n bordered: {\n type: Boolean,\n default: true\n }\n },\n data() {\n return {\n tableHeaderHeight: 0,\n paginationHeight: 0,\n innerPageSize: 10,\n innerCurrentPage: 1,\n tableContentHeight: 0,\n obs: []\n }\n },\n computed: {\n wrapperStyle () {\n // 外层容器样式:确保分页始终可见,表格充满剩余空间\n if (!this.height) return {}\n return { height: `${this.height}px` }\n },\n needScrollY () {\n // 判断是否需要 y 轴滚动:基于数据行数与可用高度预估\n if (!this.height) return false\n \n const availableHeight = this.getScrollHeightByHeight\n if (availableHeight <= 0) return false\n \n // 预估每行高度(包含边框),antd 默认约 54px\n const estimatedRowHeight = 54\n const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\n \n return estimatedTableHeight > availableHeight\n },\n innerColumns () {\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\n },\n isNoData () {\n return !this.dataSource.length\n },\n getScrollHeightByHeight () {\n // 始终返回可用的剩余高度,让表格内容不足时也能占满容器\n return this.height - this.tableHeaderHeight - this.paginationHeight\n },\n isFlexColumn () {\n return this.columns.every(col => !col.width)\n },\n getScroll () {\n if (this.scroll) {\n return this.scroll\n } else {\n const baseX = this.isFlexColumn ? 0 : (this.width > this.x ? 0 : this.x)\n if (this.height) {\n // 计算表体可用高度\n const availableHeight = this.tableHeaderHeight && this.paginationHeight \n ? this.getScrollHeightByHeight \n : this.height - 100 // 预估值,给表头和分页留空间\n \n if (availableHeight > 50) { // 确保有足够的最小高度\n console.log('Table scroll config:', { x: baseX, y: availableHeight, height: this.height, headerHeight: this.tableHeaderHeight, paginationHeight: this.paginationHeight })\n return { x: baseX, y: availableHeight }\n }\n }\n return { x: baseX }\n }\n }\n },\n watch: {\n pageSize: {\n handler (pageSize) {\n this.innerPageSize = pageSize\n },\n immediate: true\n }\n },\n methods: {\n onShowSizeChange (current, pageSize) {\n this.innerCurrentPage = current\n this.innerPageSize = pageSize\n this.$emit('change-page', current, pageSize)\n },\n setPaginationHeight () {\n this.$nextTick(() => {\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\n this.paginationHeight = height\n })\n },\n setTableHeaderHeight () {\n this.$nextTick(() => {\n const el = document.querySelector('.ant-table-header')\n if (!el) return\n const { height } = el.getBoundingClientRect()\n this.tableHeaderHeight = height\n })\n },\n setTableTbodyHeight () {\n // 简化:仅需要获取表头高度,不再依赖表体高度的动态监听\n this.$nextTick(() => {\n this.setTableHeaderHeight()\n })\n },\n setRowClassName (record, idx) {\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\n },\n onChangePagination (page, pageSize) {\n this.innerCurrentPage = page\n this.innerPageSize = pageSize\n this.$emit('change-page', page, pageSize)\n }\n },\n mounted() {\n this.$nextTick(() => {\n this.setPaginationHeight()\n setTimeout(() => {\n this.setTableTbodyHeight()\n // 再测一次分页高度,确保初次渲染完成后数值准确\n this.setPaginationHeight()\n }, 200)\n })\n },\n destroyed () {\n this.obs.forEach(ob => ob.disconnect())\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-table__wrapper {\n /* 外层采用列布局,确保分页始终可见,表格充满剩余空间 */\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n /* 表格区域占满剩余空间,启用纵向滚动 */\n ::v-deep .ant-table-wrapper {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n ::v-deep .ant-spin-nested-loading {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n ::v-deep .ant-spin-container {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n ::v-deep .ant-table {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* 确保表体能够正常纵向滚动 */\n ::v-deep .ant-table-content {\n flex: 1 1 auto;\n min-height: 0;\n overflow: hidden;\n }\n\n ::v-deep .ant-table-scroll {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n ::v-deep .ant-table-header {\n flex: 0 0 auto;\n overflow: hidden;\n }\n\n ::v-deep .ant-table-body {\n flex: 1 1 auto;\n overflow: auto !important;\n /* 确保滚动条稳定,避免列宽抖动 */\n scrollbar-gutter: stable;\n }\n\n /* 分页区域固定在底部,不被挤出视口 */\n .g-table__pagination {\n flex: 0 0 auto;\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n background: #fff;\n z-index: 999;\n }\n}\n</style>"]}, media: undefined });
|
|
2010
2013
|
|
|
2011
2014
|
};
|
|
2012
2015
|
/* scoped */
|
|
2013
|
-
const __vue_scope_id__$C = "data-v-
|
|
2016
|
+
const __vue_scope_id__$C = "data-v-42696953";
|
|
2014
2017
|
/* module identifier */
|
|
2015
2018
|
const __vue_module_identifier__$C = undefined;
|
|
2016
2019
|
/* functional template */
|
|
@@ -2210,11 +2213,11 @@ __vue_render__$B._withStripped = true;
|
|
|
2210
2213
|
/* style */
|
|
2211
2214
|
const __vue_inject_styles__$B = function (inject) {
|
|
2212
2215
|
if (!inject) return
|
|
2213
|
-
inject("data-v-
|
|
2216
|
+
inject("data-v-34ea3fcc_0", { source: ".g-tree__wrapper[data-v-34ea3fcc] {\n overflow: hidden;\n}\n.g-tree__wrapper[data-v-34ea3fcc] .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper[data-v-34ea3fcc] .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/tree/src/index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,gBAAA;ACvFA;ADyFA;EACA,uBAAA;EACA,gBAAA;EACA,mBAAA;ACvFA;ADyFA;EACA,WAAA;ACvFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"g-tree__wrapper\">\n <a-tree\n v-if=\"innerTreeData.length\"\n :tree-data=\"innerTreeData\"\n :checkable=\"checkable\"\n @select=\"selectTreeNode\"\n @check=\"checkTreeNode\"\n :replaceFields=\"replaceFields\"\n :default-expanded-keys=\"defaultExpandedKeys\"\n :default-selected-keys=\"defaultSelectedKeys\"\n :show-line=\"showLine\"\n blockNode \n :show-icon=\"showIcon\">\n <a-icon v-if=\"switcherIcon\" slot=\"switcherIcon\" :type=\"switcherIcon\" />\n <template #title=\"props\">\n <span :title=\"props[replaceFields.title]\" class=\"tree-node__title\">\n {{ props[replaceFields.title] }}\n </span>\n </template>\n <template slot=\"custom\" slot-scope=\"{ scopedSlots }\">\n <a-icon :type=\"scopedSlots.iconName\"></a-icon>\n </template>\n </a-tree>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-tree',\n props: {\n treeData: {\n type: Array,\n default: () => []\n },\n showLine: {\n type: Boolean,\n default: false\n },\n switcherIcon: {\n type: String\n },\n checkable: {\n type: Boolean,\n default: false\n },\n replaceFields: {\n type: Object,\n default: () => ({\n title: 'title',\n key: 'id',\n children: 'children'\n })\n },\n defaultExpandedKeys: {\n type: Array\n },\n defaultSelectedKeys: {\n type: Array\n },\n showIcon: {\n type: Boolean,\n default: true\n }\n },\n data () {\n return {}\n },\n computed: {\n innerTreeData () {\n return this.treeData\n }\n },\n methods: {\n checkTreeNode (checkedKeys, e) {\n const { checkedNodes } = e\n const nodeDatas = checkedNodes.map(item => item.data.props.dataRef)\n this.$emit('check', checkedKeys, nodeDatas)\n },\n refreshTreeStatus (props = {}) {},\n selectTreeNode (selectedKeys, e) {\n this.$emit('select', selectedKeys, e)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-tree__wrapper {\n overflow: hidden;\n ::v-deep .ant-tree {\n .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n .ant-tree-node-selected {\n color: #fff;\n }\n }\n}\n</style>",".g-tree__wrapper {\n overflow: hidden;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-content-wrapper {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.g-tree__wrapper ::v-deep .ant-tree .ant-tree-node-selected {\n color: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
2214
2217
|
|
|
2215
2218
|
};
|
|
2216
2219
|
/* scoped */
|
|
2217
|
-
const __vue_scope_id__$B = "data-v-
|
|
2220
|
+
const __vue_scope_id__$B = "data-v-34ea3fcc";
|
|
2218
2221
|
/* module identifier */
|
|
2219
2222
|
const __vue_module_identifier__$B = undefined;
|
|
2220
2223
|
/* functional template */
|
|
@@ -2395,6 +2398,7 @@ var script$A = {
|
|
|
2395
2398
|
currentTableSelection: this.currentTableSelection,
|
|
2396
2399
|
currentTreeNode: this.currentTreeNodeData,
|
|
2397
2400
|
requestTableData: this.requestTableData,
|
|
2401
|
+
refreshTreeData: this.refreshTreeData,
|
|
2398
2402
|
querys: this.tableQuerys,
|
|
2399
2403
|
currentRowData: this.currentRowData,
|
|
2400
2404
|
getCurrentRowData: this.getCurrentRowData,
|
|
@@ -2668,6 +2672,13 @@ var script$A = {
|
|
|
2668
2672
|
}
|
|
2669
2673
|
},
|
|
2670
2674
|
methods: {
|
|
2675
|
+
async refreshTreeData() {
|
|
2676
|
+
this.treeData = await this.requestTreeData();
|
|
2677
|
+
const [defaultTreeNode = {}] = this.treeData;
|
|
2678
|
+
this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
2679
|
+
this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]];
|
|
2680
|
+
this.currentTreeNodeData = defaultTreeNode;
|
|
2681
|
+
},
|
|
2671
2682
|
dispatchTrigger({
|
|
2672
2683
|
mode,
|
|
2673
2684
|
record = {},
|
|
@@ -2719,7 +2730,7 @@ var script$A = {
|
|
|
2719
2730
|
},
|
|
2720
2731
|
setCurrentTableSelection(props = {}) {
|
|
2721
2732
|
if (this.currentTableMode === 'radio') {
|
|
2722
|
-
this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {});
|
|
2733
|
+
this.$set(this, 'currentTableSelection', type.isArray(props) && props.length > 0 ? props[0] : type.isObject(props) ? props : {});
|
|
2723
2734
|
} else {
|
|
2724
2735
|
this.$set(this, 'currentTableSelection', type.isArray(props) ? props : []);
|
|
2725
2736
|
}
|
|
@@ -3136,11 +3147,11 @@ __vue_render__$A._withStripped = true;
|
|
|
3136
3147
|
/* style */
|
|
3137
3148
|
const __vue_inject_styles__$A = function (inject) {
|
|
3138
3149
|
if (!inject) return
|
|
3139
|
-
inject("data-v-2766e4c9_0", { source: ".ele.model__tree-table[data-v-2766e4c9] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-2766e4c9] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-2766e4c9] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-2766e4c9] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-2766e4c9] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-2766e4c9] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-2766e4c9] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-2766e4c9] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4mBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC3mBA;AD6mBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC3mBA;AD8mBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC5mBA;AD8mBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC5mBA;AD8mBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC5mBA;AD+mBA;EACA,gBAAA;AC7mBA;AD8mBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC5mBA;AD+mBA;EACA,eAAA;EACA,kCAAA;AC7mBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net, util } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nexport default {\r\n name: 'ele-tree-table-model',\r\n props: {\r\n title: {\r\n type: [Object, String]\r\n },\r\n overHeight: {\r\n type: Number,\r\n default: 0\r\n },\r\n treeMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n searchMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n buttonGroupMeta: {\r\n typeof: Object,\r\n default: () => ({})\r\n },\r\n tableMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n createMeta: {\r\n type: Object\r\n },\r\n editMeta: {\r\n type: Object\r\n }\r\n },\r\n provide () {\r\n return {\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n [CONTEXT]: () => {\r\n return {\r\n exposed: this.exposed\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n tableHeight: 0,\r\n tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n currentRowData: {},\r\n treeWrapperHeight: 0,\r\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n showFsmModal: false,\r\n fsmMeta: {},\r\n fsmContextProp: {},\r\n modalTableValue: false,\r\n modalTableMeta: {}\r\n }\r\n },\r\n computed: {\r\n setBorder () {\r\n return this.tableMeta.bordered === false ? false : true\r\n },\r\n rowSelection () {\r\n if (!this.currentTableMode) return void 0\r\n return {\r\n columnTitle: this.currentSelectionColumn.columnTitle,\r\n fixed: true,\r\n type: this.currentTableMode,\r\n onChange: this.onChangeTableSelection\r\n }\r\n },\r\n currentSelectionColumn () {\r\n const { multiple } = this.tableMeta\r\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n if (target) {\r\n return target\r\n } else if (isGlobalExistMultiple) {\r\n return { multiple }\r\n }\r\n return void 0\r\n },\r\n x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n showModalForm: this.showModalForm,\r\n closeModalForm: this.closeModalForm,\r\n showModalTable: this.showModalTable,\r\n closeModalTable: this.closeModalTable,\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys,\r\n currentRowData: this.currentRowData,\r\n getCurrentRowData: this.getCurrentRowData,\r\n setCurrentRowData: this.setCurrentRowData,\r\n setCurrentTableSelection: this.setCurrentTableSelection,\r\n getCurrentTableSelection: this.getCurrentTableSelection,\r\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n route: this.$route,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n if (this.showTree) {\r\n this.treeData = await this.requestTreeData()\r\n const [defaultTreeNode = {}] = this.treeData\r\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n this.currentTreeNodeData = defaultTreeNode\r\n }\r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\r\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(initQuerys)\r\n }\r\n },\r\n methods: {\r\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n switch (mode) {\r\n case BUILT_IN_TRIGGER.FSM:\r\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n url: 'api-fsm/workbench/fsm/auditFlow',\r\n requestType: 'GET',\r\n fieldMap: {\r\n modelCode: 'modelCode',\r\n businessId: 'businessId'\r\n }\r\n } : modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n this.modalFormMeta = modeMeta\r\n this.showModalForm(modeMeta)\r\n break\r\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n this.modalTableMeta = modeMeta\r\n this.showModalTable(modeMeta)\r\n break\r\n default:\r\n break\r\n }\r\n },\r\n handleCloseFsmModal () {\r\n this.showFsmModal = false\r\n },\r\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n this.fsmMeta = meta\r\n this.fsmContextProp = record\r\n this.showFsmModal = true\r\n },\r\n onChangeTableSelection (_, selectedRows = []) {\r\n if (this.currentTableMode === 'radio') {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n } else {\r\n this.setCurrentTableSelection(selectedRows)\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n }\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n if (this.currentTableMode === 'radio') {\r\n this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {})\r\n } else {\r\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n }\r\n },\r\n getCurrentTableSelection () {\r\n return this.currentTableSelection\r\n },\r\n setCurrentRowData (props = {}) {\r\n this.currentRowData = props\r\n },\r\n getCurrentRowData () {\r\n return this.currentRowData\r\n },\r\n cleanCurrentModelEffect () {\r\n this.setCurrentTableSelection()\r\n this.setCurrentRowData({})\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n this.cleanCurrentModelEffect()\r\n this.requestTableData()\r\n },\r\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n const { record = {} } = props\r\n this.currentRowData = record\r\n this.setCurrentRowData(record)\r\n this.modalFormMeta = this.editMeta\r\n this.modalFormValue = true\r\n },\r\n [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n this.modalFormMeta = this.createMeta\r\n this.modalFormValue = true\r\n },\r\n showModalForm (modeMeta = {}) {\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalFormMeta = targetMeta\r\n } else {\r\n this.modalFormMeta = modeMeta\r\n }\r\n this.modalFormValue = true\r\n },\r\n showModalTable (modeMeta = {}) {\r\n console.log('showModalTable', modeMeta)\r\n if (type.isStr(modeMeta)) {\r\n const targetMeta = this.findMetaByKey(modeMeta)\r\n this.modalTableMeta = targetMeta\r\n } else {\r\n this.modalTableMeta = modeMeta\r\n }\r\n this.modalTableValue = true\r\n },\r\n closeModalForm () {\r\n this.modalFormValue = false\r\n },\r\n closeModalTable () {\r\n console.log('closeModalTable')\r\n this.modalTableValue = false\r\n },\r\n findMetaByKey (key) {\r\n return this.$attrs[key] || {}\r\n },\r\n handleClickButtonGroup (props) {\r\n const { eventName, target } = props\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n },\r\n watchViewPort () {\r\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\r\n const { top } = modelTableWrapper.getBoundingClientRect()\r\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\r\n },\r\n async onSearch (props) {\r\n const { overrideInit = false } = this.tableMeta\r\n this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData()\r\n }\r\n },\r\n async selectTreeNode (selectedKeys, e) {\r\n const { fieldMap } = this.tableMeta\r\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n const { overrideInit = false } = this.tableMeta\r\n if (overrideInit) {\r\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n } else {\r\n this.tableData = await this.requestTableData(execFieldMapRet)\r\n }\r\n },\r\n async requestTreeData () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n { ...params, ...fieldMapRet }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data\r\n })\r\n return ret\r\n },\r\n async onChangePage (page, pageSize) {\r\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n },\r\n async requestTableData (props = {}) {\r\n const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n const { pageSize = 10 } = page\r\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n this.loading = true\r\n const ret = await net[requestType.toLowerCase()](\r\n url,\r\n this.tableQuerys\r\n ).then(resp => {\r\n const { data = [], count } = resp || {}\r\n this.total = count\r\n this.loading = false\r\n return (data || []).map(item => {\r\n delete item.children\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n this.cleanCurrentModelEffect()\r\n this.tableData = ret\r\n return ret\r\n },\r\n refreshTreeStatus (props = {}) {},\r\n refreshTableStatus (props = {}) {},\r\n calculateTableHeight () {\r\n const currentViewportHeight = window.innerHeight\r\n const tableRef = this.$refs[this.tableRef]\r\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\r\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n },\r\n calculateTreeHeight () {\r\n if (!this.showTree) return\r\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n const { height } = modelTableContainerRef.getBoundingClientRect()\r\n this.treeWrapperHeight = height\r\n }\r\n },\r\n mounted () {\r\n this.calculateTableHeight()\r\n this.$nextTick(() => {\r\n this.calculateTreeHeight()\r\n })\r\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n })\r\n }\r\n })\r\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n },\r\n destroyed () {\r\n this.resizeObserverModelTableWrapper.disconnect()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.model__tree-table {\r\n background: transparent; \r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n .model__tree-table--container {\r\n .model__tree--wrapper {\r\n width: 240px;\r\n background: #fff;\r\n flex-shrink: 0;\r\n padding: 16px;\r\n box-sizing: border-box;\r\n margin-right: 16px;\r\n overflow-y: auto;\r\n }\r\n }\r\n .model__table--container {\r\n width: 100%;\r\n min-width: 0;\r\n background: #fff;\r\n .model__table--title {\r\n .model__table-title--bar {\r\n width: 100%;\r\n height: 8px;\r\n background: var(--idooel-primary-color);\r\n border-top-left-radius: 4px;\r\n border-top-right-radius: 4px;\r\n }\r\n .model__table-title--text {\r\n text-align: left;\r\n padding: 16px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n background: #fff;\r\n border-bottom: 1px solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .model__table--wrapper {\r\n background: #fff;\r\n .button-row__area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-top: 16px;\r\n padding-bottom: 8px;\r\n padding-right: 16px;\r\n }\r\n .g-table__wrapper {\r\n .fsm {\r\n cursor: pointer;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3150
|
+
inject("data-v-34cddd52_0", { source: ".ele.model__tree-table[data-v-34cddd52] {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-34cddd52] {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-34cddd52] {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-34cddd52] {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-34cddd52] {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-34cddd52] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-34cddd52] {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-34cddd52] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAonBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnnBA;ADqnBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACnnBA;ADsnBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACpnBA;ADsnBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACpnBA;ADsnBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACpnBA;ADunBA;EACA,gBAAA;ACrnBA;ADsnBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACpnBA;ADunBA;EACA,eAAA;EACA,kCAAA;ACrnBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <section class=\"ele model__tree-table\">\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\n <div class=\"model__tree--title\"></div>\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n <ele-tree\n :tree-data=\"treeData\"\n :defaultExpandedKeys=\"defaultExpandedKeys\"\n :defaultSelectedKeys=\"defaultSelectedKeys\"\n @select=\"selectTreeNode\"\n :replace-fields=\"mapFields\">\n </ele-tree>\n </section>\n </section>\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n <div class=\"model__table--title\" v-if=\"title\">\n <template v-if=\"titleMode\">\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n </template>\n <template v-else>\n <div class=\"model__table-title--text\">{{ title }}</div>\n </template>\n </div>\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n <div class=\"button-row__area\">\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n <slot name=\"tags\"></slot>\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\n </div>\n <ele-table\n v-on=\"overrideTableEvent\"\n :ref=\"tableRef\"\n :row-selection=\"rowSelection\"\n :loading=\"loading\" \n :columns=\"columns\"\n :total=\"total\"\n :x=\"x\"\n :y=\"y\"\n :bordered=\"setBorder\"\n :height=\"tableHeight\"\n :width=\"tableWidth\"\n :actions=\"actions\"\n :pageSize=\"pageSize\"\n :pageSizeOptions=\"pageSizeOptions\"\n :data-source=\"tableData\"\n @change-page=\"onChangePage\"\n ></ele-table>\n </section>\n </section>\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n <ele-modal-table\n :meta=\"modalTableMeta\"\n v-model=\"modalTableValue\"\n v-on=\"overrideModalTableEvent\"\n ></ele-modal-table>\n </section>\n</template>\n\n<script>\nimport { type, net, util } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-tree-table-model',\n props: {\n title: {\n type: [Object, String]\n },\n overHeight: {\n type: Number,\n default: 0\n },\n treeMeta: {\n type: Object,\n default: () => ({})\n },\n searchMeta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n typeof: Object,\n default: () => ({})\n },\n tableMeta: {\n type: Object,\n default: () => ({})\n },\n createMeta: {\n type: Object\n },\n editMeta: {\n type: Object\n }\n },\n provide () {\n return {\n requestTreeData: this.requestTreeData,\n requestTableData: this.requestTableData,\n [CONTEXT]: () => {\n return {\n exposed: this.exposed\n }\n }\n }\n },\n data () {\n return {\n tableHeight: 0,\n tableWidth: 0,\n modalFormMeta: {},\n modalFormValue: false,\n treeData: [],\n tableData: [],\n defaultExpandedKeys: [],\n defaultSelectedKeys: [],\n replaceFields: {\n title: 'title',\n children: 'children',\n key: 'id'\n },\n loading: false,\n total: 0,\n tableQuerys: {},\n resizeObserverModelTableWrapper: null,\n modelTableWrapperHeight: 0,\n currentTreeNodeData: {},\n currentRowData: {},\n treeWrapperHeight: 0,\n currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n showFsmModal: false,\n fsmMeta: {},\n fsmContextProp: {},\n modalTableValue: false,\n modalTableMeta: {}\n }\n },\n computed: {\n setBorder () {\n return this.tableMeta.bordered === false ? false : true\n },\n rowSelection () {\n if (!this.currentTableMode) return void 0\n return {\n columnTitle: this.currentSelectionColumn.columnTitle,\n fixed: true,\n type: this.currentTableMode,\n onChange: this.onChangeTableSelection\n }\n },\n currentSelectionColumn () {\n const { multiple } = this.tableMeta\n const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n if (target) {\n return target\n } else if (isGlobalExistMultiple) {\n return { multiple }\n }\n return void 0\n },\n x () {\n const { x } = this.tableMeta\n return x\n },\n y () {\n const { y } = this.tableMeta\n return y\n },\n currentTableMode () {\n if (!this.currentSelectionColumn) return void 0\n const { multiple } = this.currentSelectionColumn\n if (type.isBool(multiple)) {\n if (multiple) {\n return 'checkbox'\n } else {\n return 'radio'\n }\n } else {\n return void 0\n }\n },\n modelTableContainerRef () {\n return uuidv4()\n },\n titleMode () {\n if (type.isObject(this.title)) {\n const { mode = '' } = this.title\n return mode\n }\n return void 0\n },\n tableRef () {\n return uuidv4()\n },\n exposed () {\n return {\n showModalForm: this.showModalForm,\n closeModalForm: this.closeModalForm,\n showModalTable: this.showModalTable,\n closeModalTable: this.closeModalTable,\n currentTableSelection: this.currentTableSelection,\n currentTreeNode: this.currentTreeNodeData,\n requestTableData: this.requestTableData,\n refreshTreeData: this.refreshTreeData,\n querys: this.tableQuerys,\n currentRowData: this.currentRowData,\n getCurrentRowData: this.getCurrentRowData,\n setCurrentRowData: this.setCurrentRowData,\n setCurrentTableSelection: this.setCurrentTableSelection,\n getCurrentTableSelection: this.getCurrentTableSelection,\n cleanCurrentModelEffect: this.cleanCurrentModelEffect,\n route: this.$route,\n _route: this.$route.query,\n _routeMeta: this.$route.meta\n }\n },\n overrideTableEvent () {\n const events = this.actions.reduce((ret, action) => {\n ret[action.eventName || action.key] = (e) => {\n this.setCurrentRowData(e.exposed.currentRowData)\n const { target } = action\n const targetMeta = this.findMetaByKey(target)\n const { mode } = targetMeta\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n }\n },\n overrideModalFormEvent () {\n const { footerMeta } = this.modalFormMeta\n const { elements = [] } = footerMeta || {}\n const eles = type.isFunction(elements) ? elements.call(this) : elements\n const events = eles.reduce((ret, ele) => {\n ret[ele.eventName] = (e = {}) => {\n if (ele.eventName === 'cancel') {\n this.closeModalForm()\n } else {\n const { exposed = {} } = e\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n }\n }\n return ret\n }, {})\n return {\n ...events\n }\n },\n overrideModalTableEvent () {\n const { footerMeta } = this.modalTableMeta\n const { elements = [] } = footerMeta || {}\n const eles = type.isFunction(elements) ? elements.call(this) : elements\n const events = eles.reduce((ret, ele) => {\n ret[ele.eventName] = (e = {}) => {\n if (ele.eventName === 'cancel') {\n this.closeModalTable()\n } else {\n const { exposed = {} } = e\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n }\n }\n return ret\n }, {})\n return {\n ...events,\n exposed: this.exposed\n }\n },\n overrideButtonGroupEvent () {\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\n exposed: this.exposed\n }\n },\n showTree () {\n return !!Object.keys(this.treeMeta).length\n },\n buttonGroup () {\n return uuidv4()\n },\n searchArea () {\n return uuidv4()\n },\n modelTreeWrapper () {\n return uuidv4()\n },\n modelTableWrapper () {\n return uuidv4()\n },\n actions () {\n const { operations } = this.tableMeta\n if (operations) {\n return operations.elements\n } else {\n return []\n }\n },\n pageSize () {\n const { page = {} } = this.tableMeta\n return page.pageSize || 10\n },\n pageSizeOptions () {\n const { page = {} } = this.tableMeta\n return page.pageSizeOptions || ['10', '20', '30', '40']\n },\n columns () {\n const { columns, operations } = this.tableMeta\n if (type.get(columns) === 'array') {\n const columnsOptions = columns.map(item => {\n const { mode = 'text' } = item\n if (item.render) {\n return {\n ...item,\n customRender: (text, record, index) => {\n const { $createElement } = this\n return item.render.call(this, \n { h: $createElement, ctx: this },\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n record, index)\n }\n }\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n const { [`${mode}Meta`]: modeMeta } = item\n return {\n ...item,\n customRender: (text, record, index) => {\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n }\n }\n }\n return {\n ...item\n }\n })\n if (operations) {\n return [\n ...columnsOptions,\n {\n title: '操作',\n width: operations.width,\n key: 'action',\n fixed: 'right',\n scopedSlots: { customRender: 'action' }\n }\n ]\n }\n return columnsOptions\n } else {\n console.error('Error: columns is invalid, please check it')\n return []\n }\n },\n getButtonGroupElements () {\n const { elements } = this.buttonGroupMeta\n if (type.get(elements) === 'function') {\n return elements.call(this)\n } else if (type.get(elements) === 'array') {\n return elements\n } else {\n return []\n }\n },\n mapFields () {\n const { replaceFields = {} } = this.treeMeta\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\n return mapFields\n }\n },\n async created () {\n if (this.showTree) {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n }\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(initQuerys)\n }\n },\n methods: {\n async refreshTreeData () {\n this.treeData = await this.requestTreeData()\n const [defaultTreeNode = {}] = this.treeData\n this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n this.currentTreeNodeData = defaultTreeNode\n },\n dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n switch (mode) {\n case BUILT_IN_TRIGGER.FSM:\n this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \n url: 'api-fsm/workbench/fsm/auditFlow',\n requestType: 'GET',\n fieldMap: {\n modelCode: 'modelCode',\n businessId: 'businessId'\n }\n } : modeMeta)\n break\n case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\n this.modalFormMeta = modeMeta\n this.showModalForm(modeMeta)\n break\n case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\n this.modalTableMeta = modeMeta\n this.showModalTable(modeMeta)\n break\n default:\n break\n }\n },\n handleCloseFsmModal () {\n this.showFsmModal = false\n },\n [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n this.fsmMeta = meta\n this.fsmContextProp = record\n this.showFsmModal = true\n },\n onChangeTableSelection (_, selectedRows = []) {\n if (this.currentTableMode === 'radio') {\n this.setCurrentTableSelection(selectedRows)\n this.$emit('on-change-table-selection', this.currentTableSelection)\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\n } else {\n this.setCurrentTableSelection(selectedRows)\n this.$emit('on-change-table-selection', this.currentTableSelection)\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\n }\n },\n setCurrentTableSelection (props = {}) {\n if (this.currentTableMode === 'radio') {\n this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\n } else {\n this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\n }\n },\n getCurrentTableSelection () {\n return this.currentTableSelection\n },\n setCurrentRowData (props = {}) {\n this.currentRowData = props\n },\n getCurrentRowData () {\n return this.currentRowData\n },\n cleanCurrentModelEffect () {\n this.setCurrentTableSelection()\n this.setCurrentRowData({})\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n this.cleanCurrentModelEffect()\n this.requestTableData()\n },\n [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n const { record = {} } = props\n this.currentRowData = record\n this.setCurrentRowData(record)\n this.modalFormMeta = this.editMeta\n this.modalFormValue = true\n },\n [BUILT_IN_EVENT_NAMES.CREATE] () {\n this.modalFormMeta = this.createMeta\n this.modalFormValue = true\n },\n showModalForm (modeMeta = {}) {\n if (type.isStr(modeMeta)) {\n const targetMeta = this.findMetaByKey(modeMeta)\n this.modalFormMeta = targetMeta\n } else {\n this.modalFormMeta = modeMeta\n }\n this.modalFormValue = true\n },\n showModalTable (modeMeta = {}) {\n console.log('showModalTable', modeMeta)\n if (type.isStr(modeMeta)) {\n const targetMeta = this.findMetaByKey(modeMeta)\n this.modalTableMeta = targetMeta\n } else {\n this.modalTableMeta = modeMeta\n }\n this.modalTableValue = true\n },\n closeModalForm () {\n this.modalFormValue = false\n },\n closeModalTable () {\n console.log('closeModalTable')\n this.modalTableValue = false\n },\n findMetaByKey (key) {\n return this.$attrs[key] || {}\n },\n handleClickButtonGroup (props) {\n const { eventName, target } = props\n const targetMeta = this.findMetaByKey(target)\n const { mode } = targetMeta\n mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\n this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\n },\n watchViewPort () {\n const modelTableWrapper = this.$refs[this.modelTableWrapper]\n const { top } = modelTableWrapper.getBoundingClientRect()\n this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n },\n async onSearch (props) {\n const { overrideInit = false } = this.tableMeta\n this.tableQuerys = Object.assign(this.tableQuerys, props)\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData()\n }\n },\n async selectTreeNode (selectedKeys, e) {\n const { fieldMap } = this.tableMeta\n this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\n //@deprecated '_' namespace is deprecated, please use 'exposed' instead\n const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\n const { overrideInit = false } = this.tableMeta\n if (overrideInit) {\n this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n } else {\n this.tableData = await this.requestTableData(execFieldMapRet)\n }\n },\n async requestTreeData () {\n const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n const ret = await net[requestType.toLowerCase()](\n url,\n { ...params, ...fieldMapRet }\n ).then(resp => {\n const { data } = resp || {}\n return data\n })\n return ret\n },\n async onChangePage (page, pageSize) {\n this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n },\n async requestTableData (props = {}) {\n const { url, requestType = 'GET', page = {} } = this.tableMeta\n const { pageSize = 10 } = page\n this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n this.loading = true\n const ret = await net[requestType.toLowerCase()](\n url,\n this.tableQuerys\n ).then(resp => {\n const { data = [], count } = resp || {}\n this.total = count\n this.loading = false\n return (data || []).map(item => {\n delete item.children\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n this.cleanCurrentModelEffect()\n this.tableData = ret\n return ret\n },\n refreshTreeStatus (props = {}) {},\n refreshTableStatus (props = {}) {},\n calculateTableHeight () {\n const currentViewportHeight = window.innerHeight\n const tableRef = this.$refs[this.tableRef]\n const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n this.tableWidth = width\n this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n },\n calculateTreeHeight () {\n if (!this.showTree) return\n const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n const { height } = modelTableContainerRef.getBoundingClientRect()\n this.treeWrapperHeight = height\n }\n },\n mounted () {\n this.calculateTableHeight()\n this.$nextTick(() => {\n this.calculateTreeHeight()\n })\n this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n for (const _ of entries) {\n requestAnimationFrame(() => {\n this.calculateTableHeight()\n })\n }\n })\n this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n },\n destroyed () {\n this.resizeObserverModelTableWrapper.disconnect()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.model__tree-table {\n background: transparent; \n display: flex;\n flex-direction: row;\n width: 100%;\n .model__tree-table--container {\n .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n }\n }\n .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n .model__table--title {\n .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n }\n }\n .model__table--wrapper {\n background: #fff;\n .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n }\n .g-table__wrapper {\n .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n }\n }\n }\n }\n }\n}\n</style>\n",".ele.model__tree-table {\n background: transparent;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n width: 240px;\n background: #fff;\n flex-shrink: 0;\n padding: 16px;\n box-sizing: border-box;\n margin-right: 16px;\n overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n width: 100%;\n min-width: 0;\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n width: 100%;\n height: 8px;\n background: var(--idooel-primary-color);\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n text-align: left;\n padding: 16px;\n font-size: 16px;\n font-weight: bold;\n background: #fff;\n border-bottom: 1px solid;\n border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-top: 16px;\n padding-bottom: 8px;\n padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3140
3151
|
|
|
3141
3152
|
};
|
|
3142
3153
|
/* scoped */
|
|
3143
|
-
const __vue_scope_id__$A = "data-v-
|
|
3154
|
+
const __vue_scope_id__$A = "data-v-34cddd52";
|
|
3144
3155
|
/* module identifier */
|
|
3145
3156
|
const __vue_module_identifier__$A = undefined;
|
|
3146
3157
|
/* functional template */
|
|
@@ -3556,11 +3567,11 @@ __vue_render__$z._withStripped = true;
|
|
|
3556
3567
|
/* style */
|
|
3557
3568
|
const __vue_inject_styles__$z = function (inject) {
|
|
3558
3569
|
if (!inject) return
|
|
3559
|
-
inject("data-v-b64cef74_0", { source: ".ele.form-group-model__wrapper[data-v-b64cef74] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-b64cef74] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-b64cef74] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-b64cef74] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele form-group-model__wrapper\">\r\n <template v-for=\"(group, idx) in innerGroupMeta\">\r\n <div \r\n class=\"form-group-model__from\"\r\n v-if=\"!group.isGenTpl\"\r\n :key=\"group.key || idx\">\r\n <div class=\"form-group-model__form--title\">\r\n <div>{{ group.title }}</div>\r\n <div class=\"form-group-model__form--buttons\">\r\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n </div>\r\n </div>\r\n <div class=\"form-group-model__form--content\">\r\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n </div>\r\n </div>\r\n </template>\r\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-form-group-model',\r\n props: {\r\n mode: {\r\n type: String\r\n },\r\n fieldName: {\r\n type: String,\r\n default: 'formGroup'\r\n },\r\n groupMeta: {\r\n type: Function,\r\n default: () => []\r\n },\r\n footerMeta: {\r\n type: Object,\r\n default: () => {}\r\n },\r\n preRequest: {\r\n type: Object,\r\n default: () => {}\r\n },\r\n infoRequest: {\r\n type: Object,\r\n default: () => {}\r\n },\r\n submitRequest: {\r\n type: Object,\r\n default: () => {}\r\n }\r\n },\r\n data () {\r\n return {\r\n increaseCount: 1,\r\n innerGroupMeta: []\r\n }\r\n },\r\n watch: {\r\n readOnlyGroupMeta: {\r\n handler (meta) {\r\n this.innerGroupMeta = meta\r\n },\r\n immediate: true\r\n }\r\n },\r\n computed: {\r\n routeMetaMode () {\r\n return this.$route.meta.mode\r\n },\r\n readOnlyGroupMeta () {\r\n return this.groupMeta.call(this)\r\n },\r\n showFooterMeta () {\r\n return !type.isEmpty(this.footerMeta)\r\n },\r\n formRefBase () {\r\n return uuidv4()\r\n },\r\n footerElements () {\r\n const { elements } = this.footerMeta\r\n return elements.call(this)\r\n },\r\n assignAttrForEvents () {\r\n const events = this.footerElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n }\r\n },\r\n getFormRefs () {\r\n return this.innerGroupMeta.map((group, idx) => {\r\n if (!group.isGenTpl) {\r\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n }\r\n return void 0\r\n }).filter(item => !!item).flat()\r\n },\r\n formModels () {\r\n if (this.mode === 'increase') {\r\n //TODO increase mode to return formModels\r\n return this.getFormRefs.map(form => {\r\n return form.getFieldsValue()\r\n })\r\n } else {\r\n return this.getFormRefs.map(form => {\r\n const { $vnode: { data: { ref } } } = form\r\n return {\r\n key: ref,\r\n value: form.getFieldsValue()\r\n }\r\n }).reduce((ret, props) => {\r\n ret[props.key] = props.value\r\n return ret\r\n }, {})\r\n }\r\n }\r\n },\r\n methods: {\r\n execFieldMap (fieldMap = {}, dataSource = {}) {\r\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n return ret\r\n },\r\n onChangeFormStatus (props, key) {\r\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n },\r\n async infoRequestTrigger () {\r\n if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n if (!url) return\r\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n const { data = {} } = resp\r\n if (this.mode === 'increase') {\r\n this.renderIncreaseForm(data)\r\n }\r\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n })\r\n },\r\n async preRequestTrigger () {\r\n if (!this.preRequest) return\r\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n if (!url) return\r\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n const { data = {} } = resp\r\n if (this.mode === 'increase') {\r\n this.renderIncreaseForm(data)\r\n }\r\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n })\r\n },\r\n renderIncreaseForm (data = {}) {\r\n const formGroupValuesLength = data[this.fieldName].length\r\n const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n const genNum = formGroupValuesLength - notGenTplPoolLength\r\n new Array(genNum).fill().forEach(() => {\r\n const form = this.genForm(genTplTarget)\r\n this.innerGroupMeta.push(form)\r\n })\r\n const formGroupValues = data[this.fieldName]\r\n this.$nextTick(() => {\r\n this.setFieldsValue(formGroupValues)\r\n })\r\n },\r\n async submitRequestTrigger (props = {}) {\r\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n if (!url) return\r\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n return resp.data\r\n })\r\n return ret\r\n },\r\n setFieldsValue (data = []) {\r\n this.getFormRefs.forEach((form, idx) => {\r\n form.setFieldsValue(data[idx])\r\n form.evalDisabledExpression(data[idx])\r\n })\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n const status = this.getFormRefs.map(form => {\r\n const status = form.validateFields()\r\n return status\r\n }).every(item => item)\r\n if (status) {\r\n return this.submitRequestTrigger(props)\r\n } else {\r\n return false\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n },\r\n genForm (base) {\r\n const { elements, title, buttonGroupMeta } = base\r\n return {\r\n elements: JSON.parse(JSON.stringify(elements)),\r\n buttonGroupMeta,\r\n title: `${title}${this.increaseCount++}`,\r\n _gen: true\r\n }\r\n },\r\n handleClickDelete (props = {}, attr = {}, idx) {\r\n this.innerGroupMeta.splice(idx, 1)\r\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n },\r\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n const form = this.genForm(genTplTarget)\r\n this.innerGroupMeta.push(form)\r\n }\r\n },\r\n async mounted() {\r\n await this.preRequestTrigger()\r\n await this.infoRequestTrigger()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n &.form-group-model__wrapper {\r\n background: unset;\r\n padding-bottom: 80px;\r\n .form-group-model__from {\r\n background: #fff;\r\n margin-top: 16px;\r\n &:first-child {\r\n margin-top: unset;\r\n }\r\n .form-group-model__form--title {\r\n width: 100%;\r\n height: 56px;\r\n padding: 0 16px;\r\n border-bottom: 1px solid;\r\n border-color: var(--idooel-form-title-border-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n .form-group-model__form--content {\r\n padding: 16px;\r\n }\r\n }\r\n .form-group-model__form--footer {\r\n width: 100%;\r\n height: 64px;\r\n background: #fff;\r\n position: fixed;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: end;\r\n }\r\n }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3570
|
+
inject("data-v-770e5c93_0", { source: ".ele.form-group-model__wrapper[data-v-770e5c93] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-770e5c93] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-770e5c93]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-770e5c93] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-770e5c93] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-770e5c93] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/form-group-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele form-group-model__wrapper\">\n <template v-for=\"(group, idx) in innerGroupMeta\">\n <div \n class=\"form-group-model__from\"\n v-if=\"!group.isGenTpl\"\n :key=\"group.key || idx\">\n <div class=\"form-group-model__form--title\">\n <div>{{ group.title }}</div>\n <div class=\"form-group-model__form--buttons\">\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\n </div>\n </div>\n <div class=\"form-group-model__form--content\">\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\n </div>\n </div>\n </template>\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { type, net } from '@idooel/shared'\nexport default {\n name: 'ele-form-group-model',\n props: {\n mode: {\n type: String\n },\n fieldName: {\n type: String,\n default: 'formGroup'\n },\n groupMeta: {\n type: Function,\n default: () => []\n },\n footerMeta: {\n type: Object,\n default: () => {}\n },\n preRequest: {\n type: Object,\n default: () => {}\n },\n infoRequest: {\n type: Object,\n default: () => {}\n },\n submitRequest: {\n type: Object,\n default: () => {}\n }\n },\n data () {\n return {\n increaseCount: 1,\n innerGroupMeta: []\n }\n },\n watch: {\n readOnlyGroupMeta: {\n handler (meta) {\n this.innerGroupMeta = meta\n },\n immediate: true\n }\n },\n computed: {\n routeMetaMode () {\n return this.$route.meta.mode\n },\n readOnlyGroupMeta () {\n return this.groupMeta.call(this)\n },\n showFooterMeta () {\n return !type.isEmpty(this.footerMeta)\n },\n formRefBase () {\n return uuidv4()\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\n }\n },\n getFormRefs () {\n return this.innerGroupMeta.map((group, idx) => {\n if (!group.isGenTpl) {\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\n }\n return void 0\n }).filter(item => !!item).flat()\n },\n formModels () {\n if (this.mode === 'increase') {\n //TODO increase mode to return formModels\n return this.getFormRefs.map(form => {\n return form.getFieldsValue()\n })\n } else {\n return this.getFormRefs.map(form => {\n const { $vnode: { data: { ref } } } = form\n return {\n key: ref,\n value: form.getFieldsValue()\n }\n }).reduce((ret, props) => {\n ret[props.key] = props.value\n return ret\n }, {})\n }\n }\n },\n methods: {\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\n return ret\n },\n onChangeFormStatus (props, key) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\n },\n async infoRequestTrigger () {\n if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\n })\n },\n async preRequestTrigger () {\n if (!this.preRequest) return\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\n })\n },\n renderIncreaseForm (data = {}) {\n const formGroupValuesLength = data[this.fieldName].length\n const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\n const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\n const genNum = formGroupValuesLength - notGenTplPoolLength\n new Array(genNum).fill().forEach(() => {\n const form = this.genForm(genTplTarget)\n this.innerGroupMeta.push(form)\n })\n const formGroupValues = data[this.fieldName]\n this.$nextTick(() => {\n this.setFieldsValue(formGroupValues)\n })\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n if (!url) return\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n setFieldsValue (data = []) {\n this.getFormRefs.forEach((form, idx) => {\n form.setFieldsValue(data[idx])\n form.evalDisabledExpression(data[idx])\n })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n const status = this.getFormRefs.map(form => {\n const status = form.validateFields()\n return status\n }).every(item => item)\n if (status) {\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n },\n genForm (base) {\n const { elements, title, buttonGroupMeta } = base\n return {\n elements: JSON.parse(JSON.stringify(elements)),\n buttonGroupMeta,\n title: `${title}${this.increaseCount++}`,\n _gen: true\n }\n },\n handleClickDelete (props = {}, attr = {}, idx) {\n this.innerGroupMeta.splice(idx, 1)\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\n },\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\n const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\n const form = this.genForm(genTplTarget)\n this.innerGroupMeta.push(form)\n }\n },\n async mounted() {\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n &:first-child {\n margin-top: unset;\n }\n .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .form-group-model__form--content {\n padding: 16px;\n }\n }\n .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n }\n}\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3560
3571
|
|
|
3561
3572
|
};
|
|
3562
3573
|
/* scoped */
|
|
3563
|
-
const __vue_scope_id__$z = "data-v-
|
|
3574
|
+
const __vue_scope_id__$z = "data-v-770e5c93";
|
|
3564
3575
|
/* module identifier */
|
|
3565
3576
|
const __vue_module_identifier__$z = undefined;
|
|
3566
3577
|
/* functional template */
|
|
@@ -3695,6 +3706,19 @@ var script$y = {
|
|
|
3695
3706
|
}
|
|
3696
3707
|
},
|
|
3697
3708
|
methods: {
|
|
3709
|
+
collectDefaultValues() {
|
|
3710
|
+
const ret = this.elements.reduce((ret, props) => {
|
|
3711
|
+
const {
|
|
3712
|
+
name,
|
|
3713
|
+
defaultValue
|
|
3714
|
+
} = props;
|
|
3715
|
+
if (defaultValue) {
|
|
3716
|
+
ret[name] = defaultValue;
|
|
3717
|
+
}
|
|
3718
|
+
return ret;
|
|
3719
|
+
}, {});
|
|
3720
|
+
return ret;
|
|
3721
|
+
},
|
|
3698
3722
|
onChangeFormStatus(props) {
|
|
3699
3723
|
this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, {
|
|
3700
3724
|
...props
|
|
@@ -3827,6 +3851,7 @@ var script$y = {
|
|
|
3827
3851
|
}
|
|
3828
3852
|
},
|
|
3829
3853
|
async mounted() {
|
|
3854
|
+
this.setFieldsValue(this.collectDefaultValues());
|
|
3830
3855
|
await this.preRequestTrigger();
|
|
3831
3856
|
await this.infoRequestTrigger();
|
|
3832
3857
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, {
|
|
@@ -3903,11 +3928,11 @@ __vue_render__$y._withStripped = true;
|
|
|
3903
3928
|
/* style */
|
|
3904
3929
|
const __vue_inject_styles__$y = function (inject) {
|
|
3905
3930
|
if (!inject) return
|
|
3906
|
-
inject("data-v-
|
|
3931
|
+
inject("data-v-f6310b92_0", { source: ".form__model--wrapper[data-v-f6310b92] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-f6310b92] {\n height: 56px;\n padding: 0 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-f6310b92] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-f6310b92] {\n /* width: 100%; */\n height: 64px;\n position: fixed;\n bottom: 0;\n display: flex;\n float: right;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/form-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4MA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC3MA;AD4MA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC1MA;AD4MA;EACA,aAAA;AC1MA;AD4MA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"form__model--wrapper\">\n <div class=\"form-model__title\" v-if=\"title\">\n {{ title }}\n </div>\n <div class=\"form-model__content\">\n <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\n <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\n </div>\n <div class=\"form-model__footer\" v-if=\"footerMeta\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { net, type } from '@idooel/shared'\nimport { parse } from '@idooel/expression'\nexport default {\n name: 'ele-form-model',\n props: {\n disabled: {\n type: [Boolean, String],\n default: '_routeMeta.disabled'\n },\n title: {\n type: String\n },\n formMeta: {\n type: Object\n },\n footerMeta: {\n type: Object\n }\n },\n data() {\n return {}\n },\n provide () {\n return {\n [CONTEXT]: () => {\n return {\n exposed: this.exposed\n }\n }\n }\n },\n computed: {\n globalDisabled () {\n return this.executeExpression(this.disabled)\n },\n formRef () {\n return uuidv4()\n },\n exposed () {\n return {\n setFieldsValue: this.setFieldsValue,\n validateFields: this.validateFields,\n getFieldsValue: this.getFieldsValue,\n route: this.$route,\n [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\n }\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\n }\n },\n elements () {\n const { elements } = this.formMeta\n return elements\n },\n preRequest () {\n const { preRequest = {} } = this.formMeta\n return preRequest\n },\n infoRequest () {\n const { infoRequest = {} } = this.formMeta\n return infoRequest\n },\n alertMeta () {\n const { alert = {} } = this.formMeta\n return type.isEmpty(alert) ? null : alert\n },\n submitRequest () {\n const { submitRequest = {} } = this.formMeta\n return submitRequest\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n expressionData () {\n return {\n _route: this.$route.query,\n _routeMeta: this.$route.meta\n }\n },\n routeMetaMode () {\n return this.$route.meta.mode\n }\n },\n methods: {\n collectDefaultValues () {\n const ret = this.elements.reduce((ret, props) => {\n const { name, defaultValue } = props\n if (defaultValue) {\n ret[name] = defaultValue\n }\n return ret\n }, {})\n return ret\n },\n onChangeFormStatus (props) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\n },\n formModels (fieldNames) {\n return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\n },\n executeExpression (expression, dataSource = {}) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return false\n return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\n },\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\n return ret\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n const currentUrl = this.executeExpressionForUrl(url)\n if (!currentUrl) return\n const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n async infoRequestTrigger () {\n if (PAGE_STATUS.CREATE == this.routeMetaMode) return\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n const currentUrl = this.executeExpressionForUrl(url)\n if (!currentUrl) return\n net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n this.setFieldsValue(data)\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\n })\n },\n async preRequestTrigger () {\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n const currentUrl = this.executeExpressionForUrl(url)\n if (!currentUrl) return\n const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\n this.setFieldsValue(data)\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\n },\n executeExpressionForUrl (url) {\n return type.isApi(url) ? url : this.executeExpression(url)\n },\n setFieldsValue (props) {\n this.$refs[this.formRef].setFieldsValue(props)\n },\n getFieldsValue (fieldNames) {\n return this.$refs[this.formRef].getFieldsValue(fieldNames)\n },\n validateFields () {\n return this.$refs[this.formRef].validateFields()\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n if (this.globalDisabled) return\n const status = this.$refs[this.formRef].validateFields()\n if (status) {\n //TODO fieldMap\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n }\n },\n async mounted() {\n this.setFieldsValue(this.collectDefaultValues())\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.form__model--wrapper {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n .form-model__title {\n height: 56px;\n padding: 0 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid var(--idooel-form-title-border-color);\n }\n .form-model__content {\n padding: 16px;\n }\n .form-model__footer {\n /* width: 100%; */\n height: 64px;\n position: fixed;\n bottom: 0;\n display: flex;\n float: right;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n}\n</style>",".form__model--wrapper {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title {\n height: 56px;\n padding: 0 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n /* width: 100%; */\n height: 64px;\n position: fixed;\n bottom: 0;\n display: flex;\n float: right;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3907
3932
|
|
|
3908
3933
|
};
|
|
3909
3934
|
/* scoped */
|
|
3910
|
-
const __vue_scope_id__$y = "data-v-
|
|
3935
|
+
const __vue_scope_id__$y = "data-v-f6310b92";
|
|
3911
3936
|
/* module identifier */
|
|
3912
3937
|
const __vue_module_identifier__$y = undefined;
|
|
3913
3938
|
/* functional template */
|
|
@@ -4198,11 +4223,11 @@ __vue_render__$x._withStripped = true;
|
|
|
4198
4223
|
/* style */
|
|
4199
4224
|
const __vue_inject_styles__$x = function (inject) {
|
|
4200
4225
|
if (!inject) return
|
|
4201
|
-
inject("data-v-
|
|
4226
|
+
inject("data-v-1919f228_0", { source: ".ele-step-model__wrapper[data-v-1919f228] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-1919f228] {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item[data-v-1919f228] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-1919f228] {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper[data-v-1919f228] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/step-model/src/index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACvLA;ADwLA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;ACtLA;ADwLA;EACA,gBAAA;ACtLA;AD0LA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele-step-model__wrapper\">\n <div class=\"ele-step-model__step--wrapper\">\n <a-steps class=\"ele-steps\" :current=\"current\" size=\"small\">\n <a-step v-for=\"step in elements\" :title=\"step.title\" :key=\"step.key\" />\n </a-steps>\n </div>\n <div class=\"ele-step-model__content--wrapper\">\n <template v-for=\"name in scopedSlotsNames\">\n <div :key=\"name\" v-if=\"currentSlotName == name\" :class=\"['ele-step-model__slot', `ele-step-model__slot--${name}`]\">\n <slot :name=\"name\"></slot>\n </div>\n </template>\n </div>\n <div class=\"ele-step-model__footer--wrapper\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-step-model',\n props: {\n stepMeta: {\n type: Object,\n default: () => ({})\n },\n footerMeta: {\n type: Object,\n default: () => ({})\n }\n },\n data() {\n return {\n current: 0,\n currentSlotComponentRef: null,\n innerFooterElements: []\n }\n },\n provide() {\n return {\n [CONTEXT]: () => {\n return {\n ...this.expressionData\n }\n }\n }\n },\n computed: {\n routeMetaDisabled () {\n return this.executeExpression(this.$route.meta.disabled)\n },\n expressionData () {\n return {\n current: this.current,\n _route: this.$route.query,\n _routeMeta: this.$route.meta\n }\n },\n currentSlotName () {\n return this.scopedSlotsNames[this.current]\n },\n footerElements () {\n return this.innerFooterElements\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.evalShowExpressionForFooterElements()\n this.$emit(ele.eventName || 'click', { ...e, exposed: this.exposedMethods })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.NEXT]: this[BUILT_IN_EVENT_NAMES.NEXT],\n [BUILT_IN_EVENT_NAMES.PREVIOUS]: this[BUILT_IN_EVENT_NAMES.PREVIOUS],\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n }\n },\n activeIndex () {\n const { activeIndex } = this.stepMeta\n return activeIndex\n },\n elements () {\n const { elements } = this.stepMeta\n return elements\n },\n scopedSlotsNames () {\n const slotNames = this.elements.map(item => item.key)\n return slotNames\n },\n exposedMethods () {\n return {\n slotRef: this.currentSlotComponentRef,\n setCurrentStep: this.setCurrentStep,\n next: this.nextStep,\n prev: this.prevStep,\n current: this.current\n }\n }\n },\n watch: {\n activeIndex: {\n handler (idx) {\n this.current = idx\n },\n immediate: true\n },\n current: {\n handler () {\n this.$nextTick(() => {\n this.currentSlotComponentRef = this.getCurrentSlotComponentRef()\n })\n },\n immediate: true\n }\n },\n created () {\n const { elements } = this.footerMeta\n this.innerFooterElements = elements.call(this)\n this.evalShowExpressionForFooterElements()\n },\n methods: {\n executeExpression (expression) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return false\n return parse(expression, { ...this.expressionData })\n },\n evalShowExpressionForFooterElements () {\n this.innerFooterElements = this.innerFooterElements.map(element => {\n const { show = true, key, eventName } = element\n if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {\n // built in submit button should according to the route meta disabled\n this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)\n return element\n }\n show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))\n return element\n })\n },\n getCurrentSlotComponentRef () {\n const includeMetaCmp = this.$children.find(child => child.meta)\n if (!includeMetaCmp) return null\n const { $children: components } = includeMetaCmp\n const target = components.find(cmp => cmp.$options._componentTag === 'ele-tpl')\n return target.getModel ? target.getModel() : null\n },\n setCurrentStep (index) {\n this.current = index\n this.evalShowExpressionForFooterElements()\n },\n nextStep () {\n if (this.current >= this.elements.length - 1) return\n this.current ++\n this.evalShowExpressionForFooterElements()\n },\n prevStep () {\n if (this.current <= 0) return\n this.current --\n this.evalShowExpressionForFooterElements()\n },\n [BUILT_IN_EVENT_NAMES.NEXT] (props) {\n this.$emit(BUILT_IN_EVENT_NAMES.NEXT, { ...props, exposed: { ...this.exposedMethods } })\n },\n [BUILT_IN_EVENT_NAMES.PREVIOUS] (props) {\n this.$emit(BUILT_IN_EVENT_NAMES.PREVIOUS, { ...props, exposed: { ...this.exposedMethods } })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {\n const currentComponent = this.getCurrentSlotComponentRef() || {}\n const hasSubmitMethod = currentComponent.hasOwnProperty(BUILT_IN_EVENT_NAMES.SUBMIT)\n hasSubmitMethod && currentComponent[BUILT_IN_EVENT_NAMES.SUBMIT]()\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, exposed: { ...this.exposedMethods } })\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele-step-model__wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n .ele-step-model__step--wrapper {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n .ele-steps {\n .ant-steps-item {\n text-align: left;\n }\n }\n }\n .ele-step-model__content--wrapper {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n }\n .ele-step-model__footer--wrapper {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n}\n</style>import meta from '@/views/tree-table-page/meta'import meta from '@/views/tree-table-page/meta'\n\n",".ele-step-model__wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4202
4227
|
|
|
4203
4228
|
};
|
|
4204
4229
|
/* scoped */
|
|
4205
|
-
const __vue_scope_id__$x = "data-v-
|
|
4230
|
+
const __vue_scope_id__$x = "data-v-1919f228";
|
|
4206
4231
|
/* module identifier */
|
|
4207
4232
|
const __vue_module_identifier__$x = undefined;
|
|
4208
4233
|
/* functional template */
|
|
@@ -4307,7 +4332,7 @@ __vue_render__$w._withStripped = true;
|
|
|
4307
4332
|
/* style */
|
|
4308
4333
|
const __vue_inject_styles__$w = function (inject) {
|
|
4309
4334
|
if (!inject) return
|
|
4310
|
-
inject("data-v-
|
|
4335
|
+
inject("data-v-cb05e1de_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4311
4336
|
|
|
4312
4337
|
};
|
|
4313
4338
|
/* scoped */
|
|
@@ -4341,6 +4366,10 @@ __vue_component__$w.install = Vue => Vue.component(__vue_component__$w.name, __v
|
|
|
4341
4366
|
var script$v = {
|
|
4342
4367
|
name: 'ele-form',
|
|
4343
4368
|
props: {
|
|
4369
|
+
value: {
|
|
4370
|
+
type: Object,
|
|
4371
|
+
default: () => ({})
|
|
4372
|
+
},
|
|
4344
4373
|
disabled: {
|
|
4345
4374
|
type: [Boolean, String],
|
|
4346
4375
|
default: '_routeMeta.disabled'
|
|
@@ -4355,7 +4384,9 @@ var script$v = {
|
|
|
4355
4384
|
}
|
|
4356
4385
|
},
|
|
4357
4386
|
data() {
|
|
4358
|
-
return {
|
|
4387
|
+
return {
|
|
4388
|
+
formModel: {}
|
|
4389
|
+
};
|
|
4359
4390
|
},
|
|
4360
4391
|
inject: {
|
|
4361
4392
|
[CONTEXT]: {
|
|
@@ -4370,9 +4401,10 @@ var script$v = {
|
|
|
4370
4401
|
return this.executeExpression(this.disabled);
|
|
4371
4402
|
},
|
|
4372
4403
|
form() {
|
|
4373
|
-
|
|
4404
|
+
const ref = this.$form.createForm(this, {
|
|
4374
4405
|
name: this.formName
|
|
4375
4406
|
});
|
|
4407
|
+
return ref;
|
|
4376
4408
|
},
|
|
4377
4409
|
exposedMethods() {
|
|
4378
4410
|
return {
|
|
@@ -4381,7 +4413,14 @@ var script$v = {
|
|
|
4381
4413
|
};
|
|
4382
4414
|
}
|
|
4383
4415
|
},
|
|
4416
|
+
created() {
|
|
4417
|
+
this.setDefaultValues();
|
|
4418
|
+
},
|
|
4384
4419
|
methods: {
|
|
4420
|
+
setFormModel(props = {}) {
|
|
4421
|
+
this.formModel = props;
|
|
4422
|
+
this.dispatchExpression();
|
|
4423
|
+
},
|
|
4385
4424
|
rebuildRules(rules = []) {
|
|
4386
4425
|
//TODO
|
|
4387
4426
|
rules.map(rule => {
|
|
@@ -4423,6 +4462,7 @@ var script$v = {
|
|
|
4423
4462
|
if (type.isEmpty(expression)) return false;
|
|
4424
4463
|
return parse$1(expression, {
|
|
4425
4464
|
...this.getFieldsValue(),
|
|
4465
|
+
...this.formModel,
|
|
4426
4466
|
_route: this.$route.query,
|
|
4427
4467
|
_routeMeta: this.$route.meta
|
|
4428
4468
|
});
|
|
@@ -4431,6 +4471,7 @@ var script$v = {
|
|
|
4431
4471
|
const {
|
|
4432
4472
|
name
|
|
4433
4473
|
} = props;
|
|
4474
|
+
this.$set(this.formModel, name, value);
|
|
4434
4475
|
this.dispatchExpression();
|
|
4435
4476
|
this.setFieldsValue({
|
|
4436
4477
|
[name]: value
|
|
@@ -4456,8 +4497,10 @@ var script$v = {
|
|
|
4456
4497
|
}, {});
|
|
4457
4498
|
return ret;
|
|
4458
4499
|
},
|
|
4500
|
+
//TODO deprecated in the future, need to be implemented in the outer component
|
|
4459
4501
|
setDefaultValues() {
|
|
4460
4502
|
const defaultValues = this.collectDefaultValues();
|
|
4503
|
+
this.setFormModel(defaultValues);
|
|
4461
4504
|
this.setFieldsValue(defaultValues);
|
|
4462
4505
|
},
|
|
4463
4506
|
validateFields() {
|
|
@@ -4477,10 +4520,10 @@ var script$v = {
|
|
|
4477
4520
|
}
|
|
4478
4521
|
},
|
|
4479
4522
|
mounted() {
|
|
4480
|
-
this.$
|
|
4481
|
-
this.
|
|
4482
|
-
this.setDefaultValues();
|
|
4523
|
+
this.$emit('x:mounted', {
|
|
4524
|
+
setFormModel: this.setFormModel
|
|
4483
4525
|
});
|
|
4526
|
+
this.dispatchExpression();
|
|
4484
4527
|
}
|
|
4485
4528
|
};
|
|
4486
4529
|
|
|
@@ -4936,6 +4979,7 @@ var __vue_render__$v = function () {
|
|
|
4936
4979
|
width: ele.width,
|
|
4937
4980
|
height: ele.height,
|
|
4938
4981
|
"modal-title": ele.modalTitle,
|
|
4982
|
+
"cropper-config": ele.cropperConfig,
|
|
4939
4983
|
"oper-text": ele.operText,
|
|
4940
4984
|
disabled: _vm.executeExpression(
|
|
4941
4985
|
ele._disabled
|
|
@@ -5068,11 +5112,11 @@ __vue_render__$v._withStripped = true;
|
|
|
5068
5112
|
/* style */
|
|
5069
5113
|
const __vue_inject_styles__$v = function (inject) {
|
|
5070
5114
|
if (!inject) return
|
|
5071
|
-
inject("data-v-5966ff20_0", { source: ".ele__form--wrapper[data-v-5966ff20] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAySA;EACA,gBAAA;ACxSA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele__form--wrapper\">\r\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n <a-row :gutter=\"24\">\r\n <template v-for=\"ele in elements\">\r\n <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Textarea'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n style=\"width:100%;\">\r\n </ele-textarea>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :multiple=\"ele.multiple\"\r\n :mode=\"ele.mode\"\r\n :code=\"ele.code\"\r\n :init=\"ele.init\"\r\n :url=\"ele.url\"\r\n :params=\"ele.params\" \r\n @change=\"onChange($event, ele)\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-upload'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n :ext=\"ele.ext\"\r\n :multiple=\"ele.multiple\"\r\n :accept=\"ele.accept\"\r\n :extensions=\"ele.extensions\"\r\n :size=\"ele.size\"\r\n :icon=\"ele.icon\"\r\n :url=\"ele.url\"\r\n :message=\"ele.message\" \r\n style=\"width:100%;\">\r\n </ele-upload>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-date-range \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-date\r\n :format=\"ele.format\"\r\n :mode=\"ele.mode\"\r\n :show-time=\"ele.showTime\"\r\n :show-today=\"ele.showToday\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n v-bind=\"ele.props\" \r\n style=\"width:100%;\">\r\n </ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-radio>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-form-img-crop\r\n @change=\"onChange($event, ele)\"\r\n :width=\"ele.width\"\r\n :height=\"ele.height\"\r\n :modal-title=\"ele.modalTitle\"\r\n :oper-text=\"ele.operText\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-form-img-crop>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-tree-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n <a-form-item :label=\"`${ele.label}:`\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity-modal-table>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n name: 'ele-form',\r\n props: {\r\n disabled: {\r\n type: [Boolean, String],\r\n default: '_routeMeta.disabled'\r\n },\r\n formName: {\r\n type: [Number, String],\r\n default: 'coordinated'\r\n },\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n contextData () {\r\n return this[CONTEXT].call(this)\r\n },\r\n globalDisabled () {\r\n return this.executeExpression(this.disabled)\r\n },\r\n form () {\r\n return this.$form.createForm(this, { name: this.formName })\r\n },\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue,\r\n getFieldsValue: this.getFieldsValue\r\n }\r\n }\r\n },\r\n methods: {\r\n rebuildRules (rules = []) {\r\n //TODO\r\n rules.map(rule => {\r\n const { validator } = rule\r\n if (validator) {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n }\r\n })\r\n return rules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n },\r\n evalDisabledExpression () {\r\n this.elements.forEach(ele => {\r\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n const { disabled } = ele\r\n const ret = this.executeExpression(disabled)\r\n this.$set(ele, '_disabled', ret)\r\n })\r\n },\r\n evalShowExpression () {\r\n this.elements.forEach(ele => {\r\n const { show = true } = ele\r\n const ret = this.executeExpression(show)\r\n this.$set(ele, '_show', ret)\r\n })\r\n },\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n },\r\n onChange (value, props) {\r\n const { name } = props\r\n this.dispatchExpression()\r\n this.setFieldsValue({ [name]: value })\r\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n },\r\n collectDefaultValues () {\r\n const ret = this.elements.reduce((ret, props) => {\r\n const { name, defaultValue } = props\r\n if (defaultValue) {\r\n ret[name] = defaultValue\r\n }\r\n return ret\r\n }, {})\r\n return ret\r\n },\r\n setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\r\n this.setFieldsValue(defaultValues)\r\n },\r\n validateFields () {\r\n let ret = false\r\n this.form.validateFields((error, values) => {\r\n ret = !error\r\n })\r\n return ret\r\n },\r\n setFieldsValue (props = {}) {\r\n this.$nextTick(() => {\r\n this.form.setFieldsValue(props)\r\n })\r\n },\r\n getFieldsValue (fieldNames) {\r\n return this.form.getFieldsValue(fieldNames)\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.dispatchExpression()\r\n this.setDefaultValues()\r\n })\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n background: #fff;\r\n .ant-form-item {\r\n }\r\n}\r\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5115
|
+
inject("data-v-190866fc_0", { source: ".ele__form--wrapper[data-v-190866fc] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AAyTA;EACA,gBAAA;ACxTA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele__form--wrapper\">\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n <a-row :gutter=\"24\">\n <template v-for=\"ele in elements\">\n <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\n <template v-if=\"ele.type == 'Input'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-input \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :max-length=\"ele.maxLength\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-input>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Textarea'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-textarea \n @change=\"onChange($event, ele)\"\n :max-length=\"ele.maxLength\"\n :autosize=\"ele.autosize\"\n :disabled=\"executeExpression(ele._disabled)\"\n :allow-clear=\"ele.allowClear\"\n :placeholder=\"ele.placeholder\"\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\n style=\"width:100%;\">\n </ele-textarea>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Select'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-select \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\"\n :multiple=\"ele.multiple\"\n :mode=\"ele.mode\"\n :code=\"ele.code\"\n :init=\"ele.init\"\n :url=\"ele.url\"\n :params=\"ele.params\" \n @change=\"onChange($event, ele)\"\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-select>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-upload'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n :ext=\"ele.ext\"\n :multiple=\"ele.multiple\"\n :accept=\"ele.accept\"\n :extensions=\"ele.extensions\"\n :size=\"ele.size\"\n :icon=\"ele.icon\"\n :url=\"ele.url\"\n :message=\"ele.message\" \n style=\"width:100%;\">\n </ele-upload>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-date-range'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-date-range \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-date-range>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-date'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-date\n :format=\"ele.format\"\n :mode=\"ele.mode\"\n :show-time=\"ele.showTime\"\n :show-today=\"ele.showToday\"\n :value-format=\"ele.valueFormat\"\n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-date>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'SelectEntity'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-select-entity \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-select-entity>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-input-number \n @change=\"onChange($event, ele)\" \n :precision=\"ele.precision\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n v-bind=\"ele.props\" \n style=\"width:100%;\">\n </ele-input-number>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Checkbox'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-checkbox \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-checkbox>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Radio'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-radio \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :data-source=\"ele.optionList\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-radio>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-form-img-crop\n @change=\"onChange($event, ele)\"\n :width=\"ele.width\"\n :height=\"ele.height\"\n :modal-title=\"ele.modalTitle\"\n :cropper-config=\"ele.cropperConfig\"\n :oper-text=\"ele.operText\"\n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-form-img-crop>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-tree-select'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-tree-select\n @change=\"onChange($event, ele)\"\n :disabled=\"executeExpression(ele._disabled)\"\n v-bind=\"ele.meta\"\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-tree-select>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\n <a-form-item :label=\"`${ele.label}:`\">\n <ele-select-entity-modal-table\n @change=\"onChange($event, ele)\"\n :disabled=\"executeExpression(ele._disabled)\"\n v-bind=\"ele.meta\"\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n style=\"width:100%;\">\n </ele-select-entity-modal-table>\n </a-form-item>\n </template>\n </a-col>\n </template>\n </a-row>\n </a-form>\n </div>\n</template>\n\n<script>\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nimport { CONTEXT } from '../../utils'\nexport default {\n name: 'ele-form',\n props: {\n value: {\n type: Object,\n default: () => ({})\n },\n disabled: {\n type: [Boolean, String],\n default: '_routeMeta.disabled'\n },\n formName: {\n type: [Number, String],\n default: 'coordinated'\n },\n elements: {\n type: Array,\n default: () => []\n }\n },\n data () {\n return {\n formModel: {}\n }\n },\n inject: {\n [CONTEXT]: {\n default: () => (() => ({}))\n }\n },\n computed: {\n contextData () {\n return this[CONTEXT].call(this)\n },\n globalDisabled () {\n return this.executeExpression(this.disabled)\n },\n form () {\n const ref = this.$form.createForm(this, { name: this.formName })\n return ref\n },\n exposedMethods () {\n return {\n setFieldsValue: this.setFieldsValue,\n getFieldsValue: this.getFieldsValue\n }\n }\n },\n created () {\n this.setDefaultValues()\n },\n methods: {\n setFormModel (props = {}) {\n this.formModel = props\n this.dispatchExpression()\n },\n rebuildRules (rules = []) {\n //TODO\n rules.map(rule => {\n const { validator } = rule\n if (validator) {\n validator.formModel = this.getFieldsValue()\n validator.exposed = this.exposedMethods\n }\n })\n return rules\n },\n dispatchExpression () {\n this.evalDisabledExpression()\n this.evalShowExpression()\n },\n evalDisabledExpression () {\n this.elements.forEach(ele => {\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\n const { disabled } = ele\n const ret = this.executeExpression(disabled)\n this.$set(ele, '_disabled', ret)\n })\n },\n evalShowExpression () {\n this.elements.forEach(ele => {\n const { show = true } = ele\n const ret = this.executeExpression(show)\n this.$set(ele, '_show', ret)\n })\n },\n executeExpression (expression) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return false\n return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\n },\n onChange (value, props) {\n const { name } = props\n this.$set(this.formModel, name, value)\n this.dispatchExpression()\n this.setFieldsValue({ [name]: value })\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n },\n collectDefaultValues () {\n const ret = this.elements.reduce((ret, props) => {\n const { name, defaultValue } = props\n if (defaultValue) {\n ret[name] = defaultValue\n }\n return ret\n }, {})\n return ret\n },\n //TODO deprecated in the future, need to be implemented in the outer component\n setDefaultValues () {\n const defaultValues = this.collectDefaultValues()\n this.setFormModel(defaultValues)\n this.setFieldsValue(defaultValues)\n },\n validateFields () {\n let ret = false\n this.form.validateFields((error, values) => {\n ret = !error\n })\n return ret\n },\n setFieldsValue (props = {}) {\n this.$nextTick(() => {\n this.form.setFieldsValue(props)\n })\n },\n getFieldsValue (fieldNames) {\n return this.form.getFieldsValue(fieldNames)\n }\n },\n mounted() {\n this.$emit('x:mounted', { setFormModel: this.setFormModel })\n this.dispatchExpression()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n background: #fff;\n .ant-form-item {\n }\n}\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5072
5116
|
|
|
5073
5117
|
};
|
|
5074
5118
|
/* scoped */
|
|
5075
|
-
const __vue_scope_id__$v = "data-v-
|
|
5119
|
+
const __vue_scope_id__$v = "data-v-190866fc";
|
|
5076
5120
|
/* module identifier */
|
|
5077
5121
|
const __vue_module_identifier__$v = undefined;
|
|
5078
5122
|
/* functional template */
|
|
@@ -5164,11 +5208,11 @@ __vue_render__$u._withStripped = true;
|
|
|
5164
5208
|
/* style */
|
|
5165
5209
|
const __vue_inject_styles__$u = function (inject) {
|
|
5166
5210
|
if (!inject) return
|
|
5167
|
-
inject("data-v-
|
|
5211
|
+
inject("data-v-ee7d6de4_0", { source: ".ele-alert[data-v-ee7d6de4] {\n text-align: left !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/alert/src/index.vue","index.vue"],"names":[],"mappings":"AA0CA;EACA,2BAAA;ACzCA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <a-alert\n class=\"ele-alert\"\n :message=\"message\" \n :description=\"description\" \n :type=\"type\"\n :closable=\"closable\"\n :closeText=\"closeText\"\n :show-icon=\"showIcon\" />\n</template>\n\n<script>\nexport default {\n name: 'ele-alert',\n props: {\n type: {\n type: String,\n default: 'success'\n },\n showIcon: {\n type: Boolean,\n default: true\n },\n message: {\n type: String,\n default: 'Success Tips'\n },\n description: {\n type: String\n },\n closable: {\n type: Boolean,\n default: true\n },\n closeText: {\n type: String\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele-alert {\n text-align: left !important;\n}\n</style>",".ele-alert {\n text-align: left !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5168
5212
|
|
|
5169
5213
|
};
|
|
5170
5214
|
/* scoped */
|
|
5171
|
-
const __vue_scope_id__$u = "data-v-
|
|
5215
|
+
const __vue_scope_id__$u = "data-v-ee7d6de4";
|
|
5172
5216
|
/* module identifier */
|
|
5173
5217
|
const __vue_module_identifier__$u = undefined;
|
|
5174
5218
|
/* functional template */
|
|
@@ -5457,7 +5501,7 @@ var script$t = {
|
|
|
5457
5501
|
async saveToServerAsyncPage(payloads = {}) {
|
|
5458
5502
|
net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, {
|
|
5459
5503
|
headers: {
|
|
5460
|
-
'Content-Type': '
|
|
5504
|
+
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
|
|
5461
5505
|
}
|
|
5462
5506
|
}).then(resp => {
|
|
5463
5507
|
const {
|
|
@@ -5510,7 +5554,7 @@ var script$t = {
|
|
|
5510
5554
|
}
|
|
5511
5555
|
} = response;
|
|
5512
5556
|
const payloads = {
|
|
5513
|
-
filePath: file.match(/\/cw(.*)/)[0],
|
|
5557
|
+
filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
|
|
5514
5558
|
asyncID: v4(),
|
|
5515
5559
|
isDeleteOrigin: false,
|
|
5516
5560
|
toImage: type === 'pdf' ? true : false,
|
|
@@ -5707,11 +5751,11 @@ __vue_render__$t._withStripped = true;
|
|
|
5707
5751
|
/* style */
|
|
5708
5752
|
const __vue_inject_styles__$t = function (inject) {
|
|
5709
5753
|
if (!inject) return
|
|
5710
|
-
inject("data-v-abce2c3c_0", { source: "[data-v-abce2c3c] .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n[data-v-abce2c3c] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-abce2c3c] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-abce2c3c] {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-abce2c3c] {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-abce2c3c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-abce2c3c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-abce2c3c] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-abce2c3c] {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-abce2c3c] {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-abce2c3c] {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-abce2c3c] {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-abce2c3c] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-abce2c3c] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-abce2c3c] {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-upload__wrapper\">\r\n <FileUpload\r\n class=\"ele-upload__inner\"\r\n v-show=\"isShowUploadContainer\"\r\n v-model=\"files\"\r\n :ref=\"uploadRef\"\r\n :drop=\"drop\"\r\n :chunk-enabled=\"chunkEnabled\"\r\n :chunk=\"chunkConfig\"\r\n :accept=\"accept\"\r\n :extensions=\"extensions\"\r\n :size=\"fileSizeLimit\"\r\n :post-action=\"postAction\"\r\n :multiple=\"multiple\"\r\n :headers=\"headers\"\r\n :maximum=\"getMaximum\"\r\n @input-file=\"onWatchInputFiles\"\r\n @input=\"onWatchFiles\"\r\n style=\"width: 100%;\">\r\n <section class=\"ele-upload__area\">\r\n <div class=\"ele-upload__area--icon\">\r\n <template v-if=\"iconIsZhWrod\">\r\n {{ icon }}\r\n </template>\r\n <template v-else>\r\n <ele-icon :type=\"icon\"></ele-icon>\r\n </template>\r\n </div>\r\n <div class=\"ele-upload__area--text\">\r\n <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n </div>\r\n </section>\r\n </FileUpload>\r\n <section class=\"ele-files__wrapper\">\r\n <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n <div class=\"ele-file__suffix--icon\">\r\n <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n </div>\r\n <div class=\"ele-file__name\">\r\n <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n </div>\r\n </div>\r\n <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n <ele-icon type=\"delete\"></ele-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-upload',\r\n components: {\r\n FileUpload\r\n },\r\n model: {\r\n prop: 'value',\r\n event: 'change'\r\n },\r\n props: {\r\n url: {\r\n type: String,\r\n //TODO\r\n default: `zuul/api-file/workbench/file`\r\n },\r\n icon: {\r\n type: String,\r\n default: '上传'\r\n },\r\n size: {\r\n type: Number,\r\n default: 100\r\n },\r\n message: {\r\n type: String,\r\n default: '单击或拖动文件到该区域以上传'\r\n },\r\n ext: {\r\n type: String\r\n },\r\n extensions: {\r\n type: String\r\n },\r\n accept: {\r\n type: String\r\n },\r\n maximum: {\r\n type: Number,\r\n default: 10\r\n },\r\n multiple: {\r\n type: Boolean,\r\n default: false\r\n },\r\n drop: {\r\n type: Boolean,\r\n default: true\r\n },\r\n value: {\r\n type: [String, Array]\r\n },\r\n querys: {\r\n type: Object,\r\n default: () => ({\r\n _csrf: localStorage.getItem('token'),\r\n _t: new Date().valueOf()\r\n })\r\n },\r\n headers: {\r\n type: Object,\r\n default: () => ({\r\n 'X-XSRF-TOKEN': localStorage.getItem('token')\r\n })\r\n },\r\n byteConversion: {\r\n type: Number,\r\n default: 1024 * 1024\r\n },\r\n chunkEnabled: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n files: [],\r\n buildedFiles: [],\r\n saveToServerAsyncPageTimer: null\r\n }\r\n },\r\n watch: {\r\n value: {\r\n async handler (value) {\r\n if (type.isArray(value)) {\r\n // multiple\r\n } else if (type.isEmpty(value)) {\r\n this.files = []\r\n this.buildedFiles = []\r\n } else {\r\n // single\r\n this.fetchFileWithFileId()\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n computed: {\r\n prefixPath () {\r\n return window.prefixPath\r\n },\r\n iconIsZhWrod () {\r\n return type.isZhWord(this.icon)\r\n },\r\n getPayloads () {\r\n return {\r\n override: false\r\n }\r\n },\r\n chunkConfig () {\r\n return {\r\n action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n headers: {\r\n ...this.headers\r\n },\r\n minSize: 3 * this.byteConversion,\r\n maxActive: 3,\r\n maxRetries: 5,\r\n startBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n uploadBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n finishBody: {\r\n override: true,\r\n path: '/cw'\r\n }\r\n }\r\n },\r\n isFileUploadSuccessed () {\r\n return this.files.every(file => file.success)\r\n },\r\n isShowUploadContainer () {\r\n if (this.multiple) {\r\n if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n } else {\r\n const [file = {}] = this.buildedFiles\r\n if (this.buildedFiles.length < 1) {\r\n return true\r\n }\r\n if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n }\r\n },\r\n getMaximum () {\r\n return this.multiple ? this.maximum : 1\r\n },\r\n fileSizeLimit () {\r\n return this.size * this.byteConversion\r\n },\r\n postAction () {\r\n const ret = route.toQueryString(this.querys)\r\n return `${this.prefixPath}${this.url}?${ret}`\r\n },\r\n uploadRef () {\r\n return uuidv4()\r\n },\r\n fileSuffixIcon () {\r\n return {\r\n 'doc': { name: 'icon-doc' },\r\n 'html': { name: 'icon-html' },\r\n 'mp4': { name: 'icon-mp' },\r\n 'pdf': { name: 'icon-pdf' },\r\n 'ppt': { name: 'icon-ppt' },\r\n 'psd': { name: 'icon-psd' },\r\n 'rtf': { name: 'icon-rtf' },\r\n 'txt': { name: 'icon-txt' },\r\n 'vis': { name: 'icon-vis' },\r\n 'xls': { name: 'icon-xls' },\r\n 'xml': { name: 'icon-xml' },\r\n 'zip': { name: 'icon-zip' },\r\n 'jpg': { name: 'icon-img' },\r\n 'mp3': { name: 'icon-mp1' },\r\n }\r\n },\r\n fileIds () {\r\n const fileIds = this.buildedFiles.map(file => {\r\n return file.fileID\r\n })\r\n return this.multiple ? fileIds : fileIds[0]\r\n },\r\n fileResponseData () {\r\n return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n }\r\n },\r\n methods: {\r\n async fetchFileWithFileId () {\r\n if (!this.value) return\r\n await net.get(\r\n `/api-file/file/${this.value}`\r\n ).then(resp => {\r\n const { data } = resp\r\n this.buildedFiles = [data]\r\n this.files = [data]\r\n })\r\n },\r\n handleClickDownload (file) {\r\n const { fileID: fileId } = file\r\n window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\r\n },\r\n handleClickDelete (file) {\r\n this.$refs[this.uploadRef].remove(file)\r\n const { fileID } = file\r\n this.files = this.files.filter(file => file.fileID !== fileID)\r\n this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n this.$emit('change', this.fileIds)\r\n },\r\n onWatchFiles (files) {\r\n this.files = files\r\n this.buildedFiles = this.files.map(file => {\r\n return {\r\n ...file.response.data,\r\n ...file\r\n }\r\n })\r\n if (this.isFileUploadSuccessed) {\r\n this.$emit('change', this.fileIds)\r\n this.$emit('on-success', this.fileResponseData)\r\n }\r\n },\r\n async saveToServerAsyncPage (payloads = {}) {\r\n net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }).then(resp =>{\r\n const { data } = resp\r\n if (data !== 'saveToServerAsyncPage') {\r\n clearInterval(this.saveToServerAsyncPageTimer)\r\n }\r\n })\r\n // const ret = await net.post({\r\n // url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n // method: 'POST',\r\n // data: { ...payloads }\r\n // }).then(resp => {\r\n // const { data: { data, code, message } } = resp\r\n // if (code !== '2000') {\r\n // this.$Message.error(message)\r\n // return\r\n // }\r\n // if (data !== 'saveToServerAsyncPage') {\r\n // clearInterval(timer)\r\n // const { fileID, size } = data\r\n // this.$emit('on-success', { ...data, fileId: fileID })\r\n // this.$Message.success('同步成功')\r\n // return { fileId: fileID, size }\r\n // }\r\n // })\r\n // return ret\r\n },\r\n onWatchInputFiles (newFile, oldFile) {\r\n if (newFile && !oldFile) {\r\n // add file\r\n console.log('add', newFile)\r\n }\r\n if (newFile && oldFile) {\r\n // update file\r\n console.log('update', newFile)\r\n const { success, active, chunk, response } = newFile\r\n if (chunk && success && !active) {\r\n console.log('chunk end')\r\n const { data: { file, type } } = response\r\n const payloads = {\r\n filePath: file.match(/\\/cw(.*)/)[0],\r\n asyncID: uuidv4(),\r\n isDeleteOrigin: false,\r\n toImage: type === 'pdf' ? true : false,\r\n unzip: type === 'zip' ? true : false,\r\n _csrf: localStorage.getItem('token')\r\n }\r\n this.saveToServerAsyncPageTimer = setInterval(() => {\r\n this.saveToServerAsyncPage(payloads)\r\n }, 2000)\r\n }\r\n }\r\n if (!newFile && oldFile) {\r\n // delete file\r\n console.log('delete')\r\n }\r\n if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n if (!this.$refs[this.uploadRef].active) {\r\n this.$refs[this.uploadRef].active = true\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n opacity: 1 !important;\r\n cursor: pointer;\r\n border: 1px dashed var(--idooel-form-title-border-color);\r\n background: var(--idooel-form-upload-bg-color) !important;\r\n &:hover {\r\n border-color: var(--idooel-form-upload-border-hover-color);\r\n }\r\n border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n width: 100%;\r\n .ele-upload__area {\r\n padding: 16px;\r\n width: 100%;\r\n height: 80px;\r\n display: flex;\r\n flex-direction: row;\r\n .ele-upload__area--icon {\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n font-size: 16x;\r\n .anticon-cloud-upload {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n .anticon {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n .ele-upload__area--text {\r\n margin-left: 16px;\r\n .ele-upload__message {\r\n font-size: 16px;\r\n color: var(--idoole-black-088);\r\n text-align: left;\r\n }\r\n .ele-upload__ext {\r\n text-align: left;\r\n font-size: 14px;\r\n color: var(--idoole-black-06);\r\n }\r\n }\r\n }\r\n .ele-files__wrapper {\r\n .ele-file__item {\r\n width: 100%;\r\n margin-top: 8px;\r\n padding: 8px 12px;\r\n border-radius: var(--idooel-form-border-radius);\r\n background: var(--idooel-form-upload-bg-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n .ele-file__suffix--icon {}\r\n .ele-file__name {\r\n flex: 1;\r\n text-align: left;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n font-size: 14px;\r\n margin-left: 8px;\r\n cursor: pointer;\r\n .ele-file__inner {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n .ele-file__delete {\r\n margin-left: 8px;\r\n .ele-file__delete--icon {\r\n margin-left: 8px;\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>","::v-deep .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5754
|
+
inject("data-v-11828382_0", { source: "[data-v-11828382] .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n[data-v-11828382] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-11828382] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-11828382] {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-11828382] {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-11828382] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-11828382] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-11828382] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-11828382] {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-11828382] {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-11828382] {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-11828382] {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-11828382] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-11828382] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-11828382] {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele-upload__wrapper\">\n <FileUpload\n class=\"ele-upload__inner\"\n v-show=\"isShowUploadContainer\"\n v-model=\"files\"\n :ref=\"uploadRef\"\n :drop=\"drop\"\n :chunk-enabled=\"chunkEnabled\"\n :chunk=\"chunkConfig\"\n :accept=\"accept\"\n :extensions=\"extensions\"\n :size=\"fileSizeLimit\"\n :post-action=\"postAction\"\n :multiple=\"multiple\"\n :headers=\"headers\"\n :maximum=\"getMaximum\"\n @input-file=\"onWatchInputFiles\"\n @input=\"onWatchFiles\"\n style=\"width: 100%;\">\n <section class=\"ele-upload__area\">\n <div class=\"ele-upload__area--icon\">\n <template v-if=\"iconIsZhWrod\">\n {{ icon }}\n </template>\n <template v-else>\n <ele-icon :type=\"icon\"></ele-icon>\n </template>\n </div>\n <div class=\"ele-upload__area--text\">\n <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n </div>\n </section>\n </FileUpload>\n <section class=\"ele-files__wrapper\">\n <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n <div class=\"ele-file__suffix--icon\">\n <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n </div>\n <div class=\"ele-file__name\">\n <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n </div>\n </div>\n <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n <ele-icon type=\"delete\"></ele-icon>\n </span>\n </div>\n </div>\n </section>\n </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n name: 'ele-upload',\n components: {\n FileUpload\n },\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n url: {\n type: String,\n //TODO\n default: `zuul/api-file/workbench/file`\n },\n icon: {\n type: String,\n default: '上传'\n },\n size: {\n type: Number,\n default: 100\n },\n message: {\n type: String,\n default: '单击或拖动文件到该区域以上传'\n },\n ext: {\n type: String\n },\n extensions: {\n type: String\n },\n accept: {\n type: String\n },\n maximum: {\n type: Number,\n default: 10\n },\n multiple: {\n type: Boolean,\n default: false\n },\n drop: {\n type: Boolean,\n default: true\n },\n value: {\n type: [String, Array]\n },\n querys: {\n type: Object,\n default: () => ({\n _csrf: localStorage.getItem('token'),\n _t: new Date().valueOf()\n })\n },\n headers: {\n type: Object,\n default: () => ({\n 'X-XSRF-TOKEN': localStorage.getItem('token')\n })\n },\n byteConversion: {\n type: Number,\n default: 1024 * 1024\n },\n chunkEnabled: {\n type: Boolean,\n default: true\n }\n },\n data() {\n return {\n files: [],\n buildedFiles: [],\n saveToServerAsyncPageTimer: null\n }\n },\n watch: {\n value: {\n async handler (value) {\n if (type.isArray(value)) {\n // multiple\n } else if (type.isEmpty(value)) {\n this.files = []\n this.buildedFiles = []\n } else {\n // single\n this.fetchFileWithFileId()\n }\n },\n immediate: true\n }\n },\n computed: {\n prefixPath () {\n return window.prefixPath\n },\n iconIsZhWrod () {\n return type.isZhWord(this.icon)\n },\n getPayloads () {\n return {\n override: false\n }\n },\n chunkConfig () {\n return {\n action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n headers: {\n ...this.headers\n },\n minSize: 3 * this.byteConversion,\n maxActive: 3,\n maxRetries: 5,\n startBody: {\n override: true,\n path: '/cw'\n },\n uploadBody: {\n override: true,\n path: '/cw'\n },\n finishBody: {\n override: true,\n path: '/cw'\n }\n }\n },\n isFileUploadSuccessed () {\n return this.files.every(file => file.success)\n },\n isShowUploadContainer () {\n if (this.multiple) {\n if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n return false\n } else {\n return true\n }\n } else {\n const [file = {}] = this.buildedFiles\n if (this.buildedFiles.length < 1) {\n return true\n }\n if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n return false\n } else {\n return true\n }\n }\n },\n getMaximum () {\n return this.multiple ? this.maximum : 1\n },\n fileSizeLimit () {\n return this.size * this.byteConversion\n },\n postAction () {\n const ret = route.toQueryString(this.querys)\n return `${this.prefixPath}${this.url}?${ret}`\n },\n uploadRef () {\n return uuidv4()\n },\n fileSuffixIcon () {\n return {\n 'doc': { name: 'icon-doc' },\n 'html': { name: 'icon-html' },\n 'mp4': { name: 'icon-mp' },\n 'pdf': { name: 'icon-pdf' },\n 'ppt': { name: 'icon-ppt' },\n 'psd': { name: 'icon-psd' },\n 'rtf': { name: 'icon-rtf' },\n 'txt': { name: 'icon-txt' },\n 'vis': { name: 'icon-vis' },\n 'xls': { name: 'icon-xls' },\n 'xml': { name: 'icon-xml' },\n 'zip': { name: 'icon-zip' },\n 'jpg': { name: 'icon-img' },\n 'mp3': { name: 'icon-mp1' },\n }\n },\n fileIds () {\n const fileIds = this.buildedFiles.map(file => {\n return file.fileID\n })\n return this.multiple ? fileIds : fileIds[0]\n },\n fileResponseData () {\n return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n }\n },\n methods: {\n async fetchFileWithFileId () {\n if (!this.value) return\n await net.get(\n `/api-file/file/${this.value}`\n ).then(resp => {\n const { data } = resp\n this.buildedFiles = [data]\n this.files = [data]\n })\n },\n handleClickDownload (file) {\n const { fileID: fileId } = file\n window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n },\n handleClickDelete (file) {\n this.$refs[this.uploadRef].remove(file)\n const { fileID } = file\n this.files = this.files.filter(file => file.fileID !== fileID)\n this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n this.$emit('change', this.fileIds)\n },\n onWatchFiles (files) {\n this.files = files\n this.buildedFiles = this.files.map(file => {\n return {\n ...file.response.data,\n ...file\n }\n })\n if (this.isFileUploadSuccessed) {\n this.$emit('change', this.fileIds)\n this.$emit('on-success', this.fileResponseData)\n }\n },\n async saveToServerAsyncPage (payloads = {}) {\n net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'\n }\n }).then(resp =>{\n const { data } = resp\n if (data !== 'saveToServerAsyncPage') {\n clearInterval(this.saveToServerAsyncPageTimer)\n }\n })\n // const ret = await net.post({\n // url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n // method: 'POST',\n // data: { ...payloads }\n // }).then(resp => {\n // const { data: { data, code, message } } = resp\n // if (code !== '2000') {\n // this.$Message.error(message)\n // return\n // }\n // if (data !== 'saveToServerAsyncPage') {\n // clearInterval(timer)\n // const { fileID, size } = data\n // this.$emit('on-success', { ...data, fileId: fileID })\n // this.$Message.success('同步成功')\n // return { fileId: fileID, size }\n // }\n // })\n // return ret\n },\n onWatchInputFiles (newFile, oldFile) {\n if (newFile && !oldFile) {\n // add file\n console.log('add', newFile)\n }\n if (newFile && oldFile) {\n // update file\n console.log('update', newFile)\n const { success, active, chunk, response } = newFile\n if (chunk && success && !active) {\n console.log('chunk end')\n const { data: { file, type } } = response\n const payloads = {\n filePath: file.match(/\\/cw(.*)/) ? file.match(/\\/cw(.*)/)[0] : void 0,\n asyncID: uuidv4(),\n isDeleteOrigin: false,\n toImage: type === 'pdf' ? true : false,\n unzip: type === 'zip' ? true : false,\n _csrf: localStorage.getItem('token')\n }\n this.saveToServerAsyncPageTimer = setInterval(() => {\n this.saveToServerAsyncPage(payloads)\n }, 2000)\n }\n }\n if (!newFile && oldFile) {\n // delete file\n console.log('delete')\n }\n if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n if (!this.$refs[this.uploadRef].active) {\n this.$refs[this.uploadRef].active = true\n }\n }\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n &:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n }\n border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n width: 100%;\n .ele-upload__area {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n .ele-upload__area--icon {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n .anticon-cloud-upload {\n font-size: 48px;\n color: var(--idooel-primary-color);\n }\n .anticon {\n font-size: 48px;\n color: var(--idooel-primary-color);\n }\n }\n .ele-upload__area--text {\n margin-left: 16px;\n .ele-upload__message {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n }\n .ele-upload__ext {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n }\n }\n }\n .ele-files__wrapper {\n .ele-file__item {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n .ele-file__suffix--icon {}\n .ele-file__name {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n .ele-file__inner {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n .ele-file__delete {\n margin-left: 8px;\n .ele-file__delete--icon {\n margin-left: 8px;\n cursor: pointer;\n }\n }\n }\n }\n}\n</style>","::v-deep .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5711
5755
|
|
|
5712
5756
|
};
|
|
5713
5757
|
/* scoped */
|
|
5714
|
-
const __vue_scope_id__$t = "data-v-
|
|
5758
|
+
const __vue_scope_id__$t = "data-v-11828382";
|
|
5715
5759
|
/* module identifier */
|
|
5716
5760
|
const __vue_module_identifier__$t = undefined;
|
|
5717
5761
|
/* functional template */
|
|
@@ -5862,11 +5906,11 @@ __vue_render__$s._withStripped = true;
|
|
|
5862
5906
|
/* style */
|
|
5863
5907
|
const __vue_inject_styles__$s = function (inject) {
|
|
5864
5908
|
if (!inject) return
|
|
5865
|
-
inject("data-v-
|
|
5909
|
+
inject("data-v-293801c3_0", { source: ".g-select-entity__wrapper[data-v-293801c3] {\n font-size: 14px;\n line-height: 30px;\n position: relative;\n width: 100%;\n display: flex;\n color: var(--idoole-black-07);\n border-radius: 4px;\n border: 1px solid var(--idooel-form-title-border-color);\n}\n.g-select-entity__wrapper[data-v-293801c3]:hover {\n border-color: var(--idooel-primary-color);\n}\n.g-select-entity__wrapper .select-entity__input[data-v-293801c3] {\n padding: 0 11px;\n background-color: #fff;\n border-radius: 4px;\n flex-grow: 1;\n min-height: 30px;\n text-align: left;\n}\n.g-select-entity__wrapper .select-entity__addon[data-v-293801c3] {\n padding: 0 11px;\n color: var(--idoole-black-07);\n background-color: var(--idoole-black-02);\n border-left: 1px solid var(--idooel-form-title-border-color);\n cursor: pointer;\n min-height: 30px;\n white-space: nowrap;\n}\n.has-error .g-select-entity__wrapper[data-v-293801c3] {\n border-color: var(--idooel-form-border-err-color);\n}\n.g-select-entity__disabled .select-entity__input[data-v-293801c3] {\n background-color: var(--idoole-black-02);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/select-entity/src/index.vue","index.vue"],"names":[],"mappings":"AAmFA;EACA,eAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;EACA,6BAAA;EACA,kBAAA;EACA,uDAAA;AClFA;ADmFA;EACA,yCAAA;ACjFA;ADmFA;EACA,eAAA;EACA,sBAAA;EACA,kBAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;ACjFA;ADmFA;EACA,eAAA;EACA,6BAAA;EACA,wCAAA;EACA,4DAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;ACjFA;ADoFA;EACA,iDAAA;ACjFA;ADmFA;EACA,wCAAA;AChFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"g-select-entity__wrapper\" :class=\"disabled ? 'g-select-entity__disabled' : ''\">\n <span class=\"select-entity__input\">\n <a-tag\n v-for=\"(item, inx) in getValueList\"\n :key=\"item.value\"\n :closable=\"!disabled && !getIsMaxCount\"\n @close=\"onClose(...arguments, inx, item)\"\n >\n {{ item.label }}\n </a-tag>\n <a-tag v-if=\"getIsMaxCount\">......</a-tag>\n </span>\n <span class=\"select-entity__addon\" @click=\"onChange\">{{ addonAfter }}</span>\n <slot></slot>\n </div>\n</template>\n\n<script>\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-select-entity',\n props: {\n value: {\n type: [Array, Object]\n },\n multiple: {\n type: Boolean,\n default: true\n },\n maxCount: {\n type: Number,\n default: 7\n },\n disabled: {\n type: Boolean,\n default: false\n },\n addonAfter: {\n type: String,\n default: '选择'\n }\n },\n computed: {\n getValueList () {\n if (this.value) {\n if (this.multiple) {\n return this.getIsMaxCount ? this.value.slice(0, this.maxCount) : this.value\n }\n return type.isArray(this.value) ? this.value : [this.value]\n }\n return []\n },\n getIsMaxCount () {\n if (this.value && this.multiple) {\n return this.value.length >= this.maxCount\n }\n return false\n }\n },\n methods: {\n onChange () {\n if (this.disabled) return\n this.$emit('change', this.value)\n this.$emit('evoke')\n },\n onClose (e, inx, props) {\n e = window.event || e\n e.preventDefault()\n if (!this.multiple) {\n this.$emit('close', props)\n this.$emit('change', null)\n return\n }\n this.value.splice(inx, 1)\n this.$emit('close', props)\n this.$emit('change', this.value)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-select-entity__wrapper {\n font-size: 14px;\n line-height: 30px;\n position: relative;\n width: 100%;\n display: flex;\n color: var(--idoole-black-07);\n border-radius: 4px;\n border: 1px solid var(--idooel-form-title-border-color);\n &:hover {\n border-color: var(--idooel-primary-color);\n }\n .select-entity__input {\n padding: 0 11px;\n background-color: #fff;\n border-radius: 4px;\n flex-grow: 1;\n min-height: 30px;\n text-align: left;\n }\n .select-entity__addon {\n padding: 0 11px;\n color: var(--idoole-black-07);\n background-color: var(--idoole-black-02);\n border-left: 1px solid var(--idooel-form-title-border-color);\n cursor: pointer;\n min-height: 30px;\n white-space: nowrap;\n }\n}\n.has-error .g-select-entity__wrapper {\n border-color: var(--idooel-form-border-err-color);\n}\n.g-select-entity__disabled .select-entity__input {\n background-color: var(--idoole-black-02);\n}\n</style>",".g-select-entity__wrapper {\n font-size: 14px;\n line-height: 30px;\n position: relative;\n width: 100%;\n display: flex;\n color: var(--idoole-black-07);\n border-radius: 4px;\n border: 1px solid var(--idooel-form-title-border-color);\n}\n.g-select-entity__wrapper:hover {\n border-color: var(--idooel-primary-color);\n}\n.g-select-entity__wrapper .select-entity__input {\n padding: 0 11px;\n background-color: #fff;\n border-radius: 4px;\n flex-grow: 1;\n min-height: 30px;\n text-align: left;\n}\n.g-select-entity__wrapper .select-entity__addon {\n padding: 0 11px;\n color: var(--idoole-black-07);\n background-color: var(--idoole-black-02);\n border-left: 1px solid var(--idooel-form-title-border-color);\n cursor: pointer;\n min-height: 30px;\n white-space: nowrap;\n}\n\n.has-error .g-select-entity__wrapper {\n border-color: var(--idooel-form-border-err-color);\n}\n\n.g-select-entity__disabled .select-entity__input {\n background-color: var(--idoole-black-02);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5866
5910
|
|
|
5867
5911
|
};
|
|
5868
5912
|
/* scoped */
|
|
5869
|
-
const __vue_scope_id__$s = "data-v-
|
|
5913
|
+
const __vue_scope_id__$s = "data-v-293801c3";
|
|
5870
5914
|
/* module identifier */
|
|
5871
5915
|
const __vue_module_identifier__$s = undefined;
|
|
5872
5916
|
/* functional template */
|
|
@@ -6283,11 +6327,11 @@ __vue_render__$p._withStripped = true;
|
|
|
6283
6327
|
/* style */
|
|
6284
6328
|
const __vue_inject_styles__$p = function (inject) {
|
|
6285
6329
|
if (!inject) return
|
|
6286
|
-
inject("data-v-
|
|
6330
|
+
inject("data-v-e7c1987c_0", { source: ".ele-modal__footer[data-v-e7c1987c] {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n.ele-modal__footer .footer-btn__wrapper[data-v-e7c1987c] {\n flex: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/modal/src/index.vue","index.vue"],"names":[],"mappings":"AA+KA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;AC9KA;AD+KA;EACA,OAAA;AC7KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <a-modal\n :title=\"title\"\n :cancelText=\"cancelText\"\n :okText=\"okText\"\n :closable=\"closable\"\n v-model:visible=\"showModal\"\n :width=\"width\"\n :keyboard=\"false\"\n :maskClosable=\"maskClosable\"\n :dialogStyle=\"{ top: `${upDownDistance[size]}px` }\"\n :bodyStyle=\"{ maxHeight: maxheight, overflowY: 'auto' }\"\n :footer=\"showFooter ? undefined : null\"\n @cancel=\"handleCancel\"\n @ok=\"handleOk\"\n >\n <slot v-if=\"showModal\"></slot>\n <template slot=\"footer\" v-if=\"!showDefaultFooter\">\n <div class=\"ele-modal__footer\">\n <slot name=\"footer-text\"></slot>\n <div class=\"footer-btn__wrapper\">\n <ele-button\n v-for=\"btn in buttonGroupMeta.elements\"\n :type=\"btn.type\"\n v-on=\"assignAttrEvents\"\n :event-name=\"btn.eventName\"\n :key=\"btn.key\">\n {{ btn.label }}\n </ele-button>\n </div>\n </div>\n </template>\n </a-modal>\n</template>\n<script>\nimport { CONTEXT } from '../../utils'\nexport default {\n name: 'ele-modal',\n props: {\n value: {\n type: Boolean,\n default: false\n },\n title: {\n type: String,\n default: '标题'\n },\n cancelText: {\n type: String,\n default: '关闭'\n },\n okText: {\n type: String,\n default: '确定'\n },\n size: {\n type: String,\n default: 'middle'\n },\n map: {\n type: Object,\n default () {\n return {}\n }\n },\n closable: {\n type: Boolean,\n default: true\n },\n maskClosable: {\n type: Boolean,\n default: false\n },\n showFooter: {\n type: Boolean,\n default: true\n },\n footer: {\n type: Function,\n default: null\n },\n onlyClose: {\n type: Boolean,\n default: false\n },\n buttonGroupMeta: {\n type: Object,\n default: () => ({})\n },\n // 是否展示组件默认底部按钮\n showDefaultFooter: {\n type: Boolean,\n default: false\n }\n },\n watch: {\n value: {\n handler (value) {\n this.$nextTick(() => {\n this.showModal = value\n })\n },\n immediate: true\n }\n },\n inject: {\n [CONTEXT]: {\n default: () => (() => ({}))\n }\n },\n computed: {\n assignAttrEvents () {\n const events = this.buttons.reduce((ret, btn) => {\n ret[btn.eventName] = (e) => {\n this.$emit(btn.eventName || 'click', { ...e, ...this[CONTEXT]() })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events\n }\n },\n buttons () {\n const { elements = [] } = this.buttonGroupMeta\n return elements\n },\n width () {\n return this.map[this.size]\n },\n maxheight () {\n return `calc(100vh - ${this.upDownDistance[this.size] * 2 + (this.title ? 55 : 0) + (this.showFooter ? 53 : 0) }px`\n }\n },\n data () {\n return {\n showModal: false\n }\n },\n created () {\n let defaultMap = {\n small: 480,\n middle: 768,\n big: 1200\n }\n this.upDownDistance = {\n small: 80,\n middle: 80,\n big: 40\n }\n this.map = Object.assign(this.map, defaultMap)\n },\n methods: {\n openModal () {\n this.showModal = true\n this.removeHidden()\n },\n handleCancel () {\n this.showModal = false\n this.$emit('input', this.showModal)\n this.$emit('change', this.showModal)\n this.removeHidden()\n this.$emit('cancel')\n },\n handleOk () {\n this.$emit('ok')\n },\n removeHidden () {\n let ishidden = document.body.style.overflow === 'hidden'\n ishidden && (document.body.style.overflow = 'initial')\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.ele-modal__footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n .footer-btn__wrapper {\n flex: 1;\n }\n}\n</style>",".ele-modal__footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n.ele-modal__footer .footer-btn__wrapper {\n flex: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6287
6331
|
|
|
6288
6332
|
};
|
|
6289
6333
|
/* scoped */
|
|
6290
|
-
const __vue_scope_id__$p = "data-v-
|
|
6334
|
+
const __vue_scope_id__$p = "data-v-e7c1987c";
|
|
6291
6335
|
/* module identifier */
|
|
6292
6336
|
const __vue_module_identifier__$p = undefined;
|
|
6293
6337
|
/* functional template */
|
|
@@ -6373,11 +6417,11 @@ __vue_render__$o._withStripped = true;
|
|
|
6373
6417
|
/* style */
|
|
6374
6418
|
const __vue_inject_styles__$o = function (inject) {
|
|
6375
6419
|
if (!inject) return
|
|
6376
|
-
inject("data-v-
|
|
6420
|
+
inject("data-v-e6c4aea4_0", { source: ".ant-checkbox-group[data-v-e6c4aea4] {\n text-align: left;\n line-height: 32px;\n}\n.has-error .ant-checkbox-group[data-v-e6c4aea4] .ant-checkbox-wrapper {\n color: var(--idooel-form-border-err-color);\n}\n.has-error .ant-checkbox-group[data-v-e6c4aea4] .ant-checkbox-inner {\n border-color: var(--idooel-form-border-err-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/checkbox/src/index.vue","index.vue"],"names":[],"mappings":"AAsCA;EACA,gBAAA;EACA,iBAAA;ACrCA;ADyCA;EACA,0CAAA;ACtCA;ADwCA;EACA,iDAAA;ACtCA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <a-checkbox-group\n :value=\"value\"\n :options=\"dataSource\" \n :disabled=\"disabled\" \n @change=\"onChange\">\n </a-checkbox-group>\n</template>\n\n<script>\nexport default {\n name: 'ele-checkbox',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: Array\n },\n dataSource: {\n type: Array,\n default: () => []\n },\n disabled: {\n type: Boolean,\n default: false\n }\n },\n methods: {\n onChange (value) {\n this.$emit('change', value)\n this.$emit('input', value)\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.ant-checkbox-group {\n text-align: left;\n line-height: 32px;\n}\n.has-error {\n .ant-checkbox-group {\n ::v-deep .ant-checkbox-wrapper {\n color: var(--idooel-form-border-err-color);\n }\n ::v-deep .ant-checkbox-inner {\n border-color: var(--idooel-form-border-err-color);\n }\n }\n}\n</style>",".ant-checkbox-group {\n text-align: left;\n line-height: 32px;\n}\n\n.has-error .ant-checkbox-group ::v-deep .ant-checkbox-wrapper {\n color: var(--idooel-form-border-err-color);\n}\n.has-error .ant-checkbox-group ::v-deep .ant-checkbox-inner {\n border-color: var(--idooel-form-border-err-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6377
6421
|
|
|
6378
6422
|
};
|
|
6379
6423
|
/* scoped */
|
|
6380
|
-
const __vue_scope_id__$o = "data-v-
|
|
6424
|
+
const __vue_scope_id__$o = "data-v-e6c4aea4";
|
|
6381
6425
|
/* module identifier */
|
|
6382
6426
|
const __vue_module_identifier__$o = undefined;
|
|
6383
6427
|
/* functional template */
|
|
@@ -6472,11 +6516,11 @@ __vue_render__$n._withStripped = true;
|
|
|
6472
6516
|
/* style */
|
|
6473
6517
|
const __vue_inject_styles__$n = function (inject) {
|
|
6474
6518
|
if (!inject) return
|
|
6475
|
-
inject("data-v-
|
|
6519
|
+
inject("data-v-00d35412_0", { source: ".ant-radio-group[data-v-00d35412] {\n text-align: left;\n line-height: 32px;\n}\n.has-error .ant-radio-group[data-v-00d35412] .ant-radio-wrapper {\n color: var(--idooel-form-border-err-color);\n}\n.has-error .ant-radio-group[data-v-00d35412] .ant-radio-inner {\n border-color: var(--idooel-form-border-err-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/radio/src/index.vue","index.vue"],"names":[],"mappings":"AA0CA;EACA,gBAAA;EACA,iBAAA;ACzCA;AD6CA;EACA,0CAAA;AC1CA;AD4CA;EACA,iDAAA;AC1CA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <a-radio-group :value=\"value\" @change=\"onChange\" :disabled=\"disabled\">\n <a-radio v-for=\"item in dataSource\" :key=\"item.value\" :value=\"item.value\">\n {{ item.label }}\n </a-radio>\n </a-radio-group>\n</template>\n\n<script>\nexport default {\n name: 'ele-radio',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: [String, Array, Number]\n },\n dataSource: {\n type: Array,\n default: () => []\n },\n disabled: {\n type: Boolean,\n default: false\n }\n },\n watch: {\n value (val) {\n console.log('valvalval', val)\n }\n },\n methods: {\n onChange (e) {\n this.$emit('change', e.target.value)\n this.$emit('input', e.target.value)\n }\n }\n}\n</script>\n<style lang=\"scss\" scoped>\n.ant-radio-group {\n text-align: left;\n line-height: 32px;\n}\n.has-error {\n .ant-radio-group {\n ::v-deep .ant-radio-wrapper {\n color: var(--idooel-form-border-err-color);\n }\n ::v-deep .ant-radio-inner {\n border-color: var(--idooel-form-border-err-color);\n }\n }\n}\n</style>",".ant-radio-group {\n text-align: left;\n line-height: 32px;\n}\n\n.has-error .ant-radio-group ::v-deep .ant-radio-wrapper {\n color: var(--idooel-form-border-err-color);\n}\n.has-error .ant-radio-group ::v-deep .ant-radio-inner {\n border-color: var(--idooel-form-border-err-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6476
6520
|
|
|
6477
6521
|
};
|
|
6478
6522
|
/* scoped */
|
|
6479
|
-
const __vue_scope_id__$n = "data-v-
|
|
6523
|
+
const __vue_scope_id__$n = "data-v-00d35412";
|
|
6480
6524
|
/* module identifier */
|
|
6481
6525
|
const __vue_module_identifier__$n = undefined;
|
|
6482
6526
|
/* functional template */
|
|
@@ -6636,12 +6680,12 @@ __vue_render__$m._withStripped = true;
|
|
|
6636
6680
|
/* style */
|
|
6637
6681
|
const __vue_inject_styles__$m = function (inject) {
|
|
6638
6682
|
if (!inject) return
|
|
6639
|
-
inject("data-v-
|
|
6640
|
-
,inject("data-v-
|
|
6683
|
+
inject("data-v-06685ad4_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
6684
|
+
,inject("data-v-06685ad4_1", { source: ".ele-batch-export__content[data-v-06685ad4] {\n height: 106px;\n}\n.ele-batch-export__content .ele-batch-export__container[data-v-06685ad4] {\n border-width: 1px;\n border-style: dashed;\n height: 80px;\n border-color: var(--idooel-link-06);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 16px;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__icon[data-v-06685ad4] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle[data-v-06685ad4] {\n margin-left: 16px;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle .ele-batch-export__btn[data-v-06685ad4] {\n color: var(--idooel-link-06);\n font-size: 16px;\n cursor: pointer;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle .ele-batch-export__btn--hint[data-v-06685ad4] {\n color: var(--idooel-link-03);\n font-size: 14px;\n}\n.ele-batch-export__content .ele-batch-export__message[data-v-06685ad4] {\n color: var(--idooel-link-06);\n font-size: 14px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/batch-export/src/index.vue","index.vue"],"names":[],"mappings":"AAuEA;EACA,aAAA;ACtEA;ADuEA;EACA,iBAAA;EACA,oBAAA;EACA,YAAA;EACA,mCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,eAAA;ACrEA;ADsEA;EACA,eAAA;EACA,4BAAA;ACpEA;ADsEA;EACA,iBAAA;ACpEA;ADqEA;EACA,4BAAA;EACA,eAAA;EACA,eAAA;ACnEA;ADqEA;EACA,4BAAA;EACA,eAAA;ACnEA;ADuEA;EACA,4BAAA;EACA,eAAA;ACrEA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal \n v-model=\"innerValue\" \n v-on=\"$listeners\"\n :buttonGroupMeta=\"buttonGroupMeta\" \n title=\"批量导出\">\n <div class=\"ele-batch-export__content\">\n <div class=\"ele-batch-export__container\">\n <ele-icon class=\"ele-batch-export__icon\" type=\"download\"></ele-icon>\n <div class=\"ele-batch-export__handle\">\n <div class=\"ele-batch-export__btn\" @click=\"handleClick\">导出任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>\n <div class=\"ele-batch-export__btn--hint\">批处理任务的准备工作会在后台运行</div>\n </div>\n </div>\n <div class=\"ele-batch-export__message\">\n 您可以请点击上方按钮查看任务进度或关闭弹框\n </div>\n </div>\n </ele-modal>\n</template>\n\n<script>\nexport default {\n name: 'ele-batch-export',\n props: {\n value: {\n type: Boolean,\n default: false\n },\n buttonGroupMeta: {\n type: Object,\n default: () => {\n return {\n elements: [\n {\n label: '关闭',\n key: 'close',\n type: 'primary',\n eventName: 'handleClose'\n }\n ]\n }\n }\n }\n },\n data() {\n return {\n innerValue: false\n }\n },\n watch: {\n value: {\n handler (value) {\n this.$nextTick(() => {\n this.innerValue = value\n })\n },\n immediate: true\n }\n },\n methods: {\n handleClick () {\n this.$emit('on-batch-export')\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../theme/index';\n</style>\n<style lang=\"scss\" scoped>\n.ele-batch-export__content {\n height: 106px;\n .ele-batch-export__container {\n border-width: 1px;\n border-style: dashed;\n height: 80px;\n border-color: var(--idooel-link-06);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 16px;\n .ele-batch-export__icon {\n font-size: 48px;\n color: var(--idooel-link-06);\n }\n .ele-batch-export__handle {\n margin-left: 16px;\n .ele-batch-export__btn {\n color: var(--idooel-link-06);\n font-size: 16px;\n cursor: pointer;\n }\n .ele-batch-export__btn--hint {\n color: var(--idooel-link-03);\n font-size: 14px;\n }\n }\n }\n .ele-batch-export__message {\n color: var(--idooel-link-06);\n font-size: 14px;\n }\n}\n</style>",".ele-batch-export__content {\n height: 106px;\n}\n.ele-batch-export__content .ele-batch-export__container {\n border-width: 1px;\n border-style: dashed;\n height: 80px;\n border-color: var(--idooel-link-06);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 16px;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__icon {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle {\n margin-left: 16px;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle .ele-batch-export__btn {\n color: var(--idooel-link-06);\n font-size: 16px;\n cursor: pointer;\n}\n.ele-batch-export__content .ele-batch-export__container .ele-batch-export__handle .ele-batch-export__btn--hint {\n color: var(--idooel-link-03);\n font-size: 14px;\n}\n.ele-batch-export__content .ele-batch-export__message {\n color: var(--idooel-link-06);\n font-size: 14px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6641
6685
|
|
|
6642
6686
|
};
|
|
6643
6687
|
/* scoped */
|
|
6644
|
-
const __vue_scope_id__$m = "data-v-
|
|
6688
|
+
const __vue_scope_id__$m = "data-v-06685ad4";
|
|
6645
6689
|
/* module identifier */
|
|
6646
6690
|
const __vue_module_identifier__$m = undefined;
|
|
6647
6691
|
/* functional template */
|
|
@@ -6734,11 +6778,11 @@ __vue_render__$l._withStripped = true;
|
|
|
6734
6778
|
/* style */
|
|
6735
6779
|
const __vue_inject_styles__$l = function (inject) {
|
|
6736
6780
|
if (!inject) return
|
|
6737
|
-
inject("data-v-
|
|
6781
|
+
inject("data-v-eee16c3c_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
6738
6782
|
|
|
6739
6783
|
};
|
|
6740
6784
|
/* scoped */
|
|
6741
|
-
const __vue_scope_id__$l = "data-v-
|
|
6785
|
+
const __vue_scope_id__$l = "data-v-eee16c3c";
|
|
6742
6786
|
/* module identifier */
|
|
6743
6787
|
const __vue_module_identifier__$l = undefined;
|
|
6744
6788
|
/* functional template */
|
|
@@ -6955,12 +6999,12 @@ __vue_render__$k._withStripped = true;
|
|
|
6955
6999
|
/* style */
|
|
6956
7000
|
const __vue_inject_styles__$k = function (inject) {
|
|
6957
7001
|
if (!inject) return
|
|
6958
|
-
inject("data-v-
|
|
6959
|
-
,inject("data-v-aa25fba6_1", { source: ".ele-timeline__wrapper[data-v-aa25fba6] {\n width: 100%;\n height: 100%;\n}\n.ele-timeline__wrapper .ele-timeline__item[data-v-aa25fba6] {\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item:last-child .ele-timeline__middle .ele-timeline__traline[data-v-aa25fba6] {\n display: none;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left[data-v-aa25fba6] {\n flex: 1;\n padding-right: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n text-align: right;\n display: flex;\n flex-direction: row;\n justify-content: end;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left .titleline-left__date[data-v-aa25fba6] {\n width: 100px;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle[data-v-aa25fba6] {\n width: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(0, 20px);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__circle[data-v-aa25fba6] {\n width: 100%;\n height: 10px;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n border-color: var(--idooel-primary-color);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__traline[data-v-aa25fba6] {\n width: 1px;\n height: calc(100% - 10px);\n border-width: 1px;\n border-style: solid;\n border-color: var(--idoole-black-016);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right[data-v-aa25fba6] {\n text-align: left;\n flex: 2;\n padding-left: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title[data-v-aa25fba6] {\n line-height: 22px;\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title[data-v-aa25fba6] {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info[data-v-aa25fba6] {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info[data-v-aa25fba6]::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.success[data-v-aa25fba6]::before {\n background: var(--idoole-success-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.warning[data-v-aa25fba6]::before {\n background: var(--idoole-warning-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.error[data-v-aa25fba6]::before {\n background: var(--idoole-error-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper[data-v-aa25fba6] {\n line-height: 22px;\n margin-top: 8px;\n margin-left: 12px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper .oper-name[data-v-aa25fba6] {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle[data-v-aa25fba6] {\n margin-left: 12px;\n display: flex;\n flex-direction: row;\n line-height: 22px;\n margin-top: 4px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__field[data-v-aa25fba6] {\n flex-shrink: 0;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__content[data-v-aa25fba6] {\n font-size: 14px;\n color: var(--idoole-black-088);\n font-weight: bold;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\timeline\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiIA;EACA,WAAA;EACA,YAAA;AChIA;ADiIA;EACA,aAAA;EACA,mBAAA;AC/HA;ADkIA;EACA,aAAA;AChIA;ADoIA;EACA,OAAA;EACA,mBAAA;EACA,iBAAA;EACA,oBAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;AClIA;ADmIA;EACA,YAAA;EACA,eAAA;EACA,8BAAA;ACjIA;ADoIA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,6BAAA;AClIA;ADmIA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yCAAA;ACjIA;ADmIA;EACA,UAAA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;ACjIA;ADoIA;EACA,gBAAA;EACA,OAAA;EACA,kBAAA;EACA,iBAAA;EACA,oBAAA;AClIA;ADmIA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;ACjIA;ADkIA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;AChIA;ADkIA;EACA,eAAA;EACA,8BAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AChIA;ADiIA;EACA,WAAA;EACA,qBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AC/HA;ADkIA;EACA,oCAAA;AChIA;ADoIA;EACA,oCAAA;AClIA;ADsIA;EACA,kCAAA;ACpIA;ADyIA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;ACvIA;ADwIA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;ACtIA;ADyIA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;ACvIA;ADwIA;EACA,cAAA;EACA,eAAA;EACA,8BAAA;ACtIA;ADwIA;EACA,eAAA;EACA,8BAAA;EACA,iBAAA;EACA,gBAAA;ACtIA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-timeline__wrapper\">\r\n <div class=\"ele-timeline__item\" v-for=\"item in innerDataSource\" :key=\"item.key\">\r\n <div class=\"ele-timeline__left\">\r\n <div class=\"titleline-left__date\">{{ item.date }}</div>\r\n </div>\r\n <div class=\"ele-timeline__middle\">\r\n <div class=\"ele-timeline__circle\"></div>\r\n <div class=\"ele-timeline__traline\"></div>\r\n </div>\r\n <div class=\"ele-timeline__right\">\r\n <slot v-if=\"$scopedSlots.right\" name=\"right\" :data=\"item\"></slot>\r\n <template v-else>\r\n <div class=\"timeline-right__title\">\r\n <span class=\"title\">{{ item.title }}</span>\r\n <span :class=\"['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']\">{{ item.stateName }}</span>\r\n </div>\r\n <div class=\"timeline-right__oper\">\r\n 由\r\n <span class=\"oper-name\">{{ item.userName }}</span>\r\n 操作\r\n </div>\r\n <div class=\"timeline-right__subtitle\" v-for=\"label in item.labelList\" :key=\"label.value\">\r\n <div class=\"right-subtitle__field\">{{ label.label }}:</div>\r\n <div class=\"right-subtitle__content\">{{ label.value }}</div>\r\n </div>\r\n </template>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { net, type } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { CONTEXT, parseFieldMap } from '../../utils'\r\nexport default {\r\n name: 'ele-timeline',\r\n props: {\r\n url: {\r\n type: String\r\n },\r\n params: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n requestType: {\r\n type: String,\r\n default: 'GET'\r\n },\r\n fieldMap: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n params: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => ([\r\n // {\r\n // date: '2023/05/09 03:34:56',\r\n // title: 123,\r\n // state: 1,\r\n // stateName: '成功',\r\n // userName: 'Name',\r\n // labelList: [\r\n // {\r\n // label: 'label',\r\n // value: 'value'\r\n // }\r\n // ],\r\n // action: '结班',\r\n // opinion: '意见'\r\n // }\r\n ])\r\n }\r\n },\r\n data () {\r\n return {\r\n innerDataSource: []\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n expressionData () {\r\n return {\r\n _route: this.$route.query,\r\n ...this[CONTEXT]()\r\n }\r\n }\r\n },\r\n async created() {\r\n if (this.url) {\r\n this.innerDataSource = await this.requestData()\r\n } else if (!type.isEmpty(this.dataSource)) {\r\n this.innerDataSource = this.dataSource\r\n } else {\r\n console.warn('ele-timeline: 请传入数据源')\r\n }\r\n },\r\n methods: {\r\n async requestData () {\r\n const ret = await net[this.requestType.toLowerCase()](\r\n this.url,\r\n { ...this.params, ...parseFieldMap(this.fieldMap, this.expressionData) }\r\n ).then(resp => {\r\n const { data } = resp || {}\r\n return data.map(item => {\r\n return {\r\n key: uuidv4(),\r\n ...item\r\n }\r\n })\r\n })\r\n return ret\r\n }\r\n }\r\n}\r\n</script>\r\n<style lang=\"scss\">\r\n@import '../../theme/index';\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.ele-timeline__wrapper {\r\n width: 100%;\r\n height: 100%;\r\n .ele-timeline__item {\r\n display: flex;\r\n flex-direction: row;\r\n &:last-child {\r\n .ele-timeline__middle {\r\n .ele-timeline__traline {\r\n display: none;\r\n }\r\n }\r\n }\r\n .ele-timeline__left {\r\n flex: 1;\r\n padding-right: 12px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n text-align: right;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n .titleline-left__date {\r\n width: 100px;\r\n font-size: 14px;\r\n color: var(--idoole-black-064);\r\n }\r\n }\r\n .ele-timeline__middle {\r\n width: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n transform: translate(0, 20px);\r\n .ele-timeline__circle {\r\n width: 100%;\r\n height: 10px;\r\n border-radius: 50%;\r\n border-width: 2px;\r\n border-style: solid;\r\n border-color: var(--idooel-primary-color);\r\n }\r\n .ele-timeline__traline {\r\n width: 1px;\r\n height: calc(100% - 10px);\r\n border-width: 1px;\r\n border-style: solid;\r\n border-color: var(--idoole-black-016);\r\n }\r\n }\r\n .ele-timeline__right {\r\n text-align: left;\r\n flex: 2;\r\n padding-left: 12px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n .timeline-right__title {\r\n line-height: 22px;\r\n display: flex;\r\n flex-direction: row;\r\n .title {\r\n color: var(--idoole-black-088);\r\n font-size: 14px;\r\n font-weight: bold;\r\n }\r\n .title-info {\r\n font-size: 14px;\r\n color: var(--idoole-black-064);\r\n margin-left: 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n &::before {\r\n content: '';\r\n display: inline-block;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n margin-right: 8px;\r\n }\r\n &.success {\r\n &::before {\r\n background: var(--idoole-success-06);\r\n }\r\n }\r\n &.warning {\r\n &::before {\r\n background: var(--idoole-warning-06);\r\n }\r\n }\r\n &.error {\r\n &::before {\r\n background: var(--idoole-error-06);\r\n }\r\n }\r\n }\r\n }\r\n .timeline-right__oper {\r\n line-height: 22px;\r\n margin-top: 8px;\r\n margin-left: 12px;\r\n .oper-name {\r\n color: var(--idoole-black-088);\r\n font-size: 14px;\r\n font-weight: bold;\r\n }\r\n }\r\n .timeline-right__subtitle {\r\n margin-left: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n line-height: 22px;\r\n margin-top: 4px;\r\n .right-subtitle__field {\r\n flex-shrink: 0;\r\n font-size: 14px;\r\n color: var(--idoole-black-064);\r\n }\r\n .right-subtitle__content {\r\n font-size: 14px;\r\n color: var(--idoole-black-088);\r\n font-weight: bold;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>",".ele-timeline__wrapper {\n width: 100%;\n height: 100%;\n}\n.ele-timeline__wrapper .ele-timeline__item {\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item:last-child .ele-timeline__middle .ele-timeline__traline {\n display: none;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left {\n flex: 1;\n padding-right: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n text-align: right;\n display: flex;\n flex-direction: row;\n justify-content: end;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left .titleline-left__date {\n width: 100px;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle {\n width: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(0, 20px);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__circle {\n width: 100%;\n height: 10px;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n border-color: var(--idooel-primary-color);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__traline {\n width: 1px;\n height: calc(100% - 10px);\n border-width: 1px;\n border-style: solid;\n border-color: var(--idoole-black-016);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right {\n text-align: left;\n flex: 2;\n padding-left: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title {\n line-height: 22px;\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.success::before {\n background: var(--idoole-success-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.warning::before {\n background: var(--idoole-warning-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.error::before {\n background: var(--idoole-error-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper {\n line-height: 22px;\n margin-top: 8px;\n margin-left: 12px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper .oper-name {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle {\n margin-left: 12px;\n display: flex;\n flex-direction: row;\n line-height: 22px;\n margin-top: 4px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__field {\n flex-shrink: 0;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__content {\n font-size: 14px;\n color: var(--idoole-black-088);\n font-weight: bold;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
7002
|
+
inject("data-v-bfb18322_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
7003
|
+
,inject("data-v-bfb18322_1", { source: ".ele-timeline__wrapper[data-v-bfb18322] {\n width: 100%;\n height: 100%;\n}\n.ele-timeline__wrapper .ele-timeline__item[data-v-bfb18322] {\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item:last-child .ele-timeline__middle .ele-timeline__traline[data-v-bfb18322] {\n display: none;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left[data-v-bfb18322] {\n flex: 1;\n padding-right: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n text-align: right;\n display: flex;\n flex-direction: row;\n justify-content: end;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left .titleline-left__date[data-v-bfb18322] {\n width: 100px;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle[data-v-bfb18322] {\n width: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(0, 20px);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__circle[data-v-bfb18322] {\n width: 100%;\n height: 10px;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n border-color: var(--idooel-primary-color);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__traline[data-v-bfb18322] {\n width: 1px;\n height: calc(100% - 10px);\n border-width: 1px;\n border-style: solid;\n border-color: var(--idoole-black-016);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right[data-v-bfb18322] {\n text-align: left;\n flex: 2;\n padding-left: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title[data-v-bfb18322] {\n line-height: 22px;\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title[data-v-bfb18322] {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info[data-v-bfb18322] {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info[data-v-bfb18322]::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.success[data-v-bfb18322]::before {\n background: var(--idoole-success-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.warning[data-v-bfb18322]::before {\n background: var(--idoole-warning-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.error[data-v-bfb18322]::before {\n background: var(--idoole-error-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper[data-v-bfb18322] {\n line-height: 22px;\n margin-top: 8px;\n margin-left: 12px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper .oper-name[data-v-bfb18322] {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle[data-v-bfb18322] {\n margin-left: 12px;\n display: flex;\n flex-direction: row;\n line-height: 22px;\n margin-top: 4px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__field[data-v-bfb18322] {\n flex-shrink: 0;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__content[data-v-bfb18322] {\n font-size: 14px;\n color: var(--idoole-black-088);\n font-weight: bold;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/timeline/src/index.vue","index.vue"],"names":[],"mappings":"AAiIA;EACA,WAAA;EACA,YAAA;AChIA;ADiIA;EACA,aAAA;EACA,mBAAA;AC/HA;ADkIA;EACA,aAAA;AChIA;ADoIA;EACA,OAAA;EACA,mBAAA;EACA,iBAAA;EACA,oBAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;AClIA;ADmIA;EACA,YAAA;EACA,eAAA;EACA,8BAAA;ACjIA;ADoIA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,6BAAA;AClIA;ADmIA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yCAAA;ACjIA;ADmIA;EACA,UAAA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;ACjIA;ADoIA;EACA,gBAAA;EACA,OAAA;EACA,kBAAA;EACA,iBAAA;EACA,oBAAA;AClIA;ADmIA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;ACjIA;ADkIA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;AChIA;ADkIA;EACA,eAAA;EACA,8BAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AChIA;ADiIA;EACA,WAAA;EACA,qBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AC/HA;ADkIA;EACA,oCAAA;AChIA;ADoIA;EACA,oCAAA;AClIA;ADsIA;EACA,kCAAA;ACpIA;ADyIA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;ACvIA;ADwIA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;ACtIA;ADyIA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;ACvIA;ADwIA;EACA,cAAA;EACA,eAAA;EACA,8BAAA;ACtIA;ADwIA;EACA,eAAA;EACA,8BAAA;EACA,iBAAA;EACA,gBAAA;ACtIA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele-timeline__wrapper\">\n <div class=\"ele-timeline__item\" v-for=\"item in innerDataSource\" :key=\"item.key\">\n <div class=\"ele-timeline__left\">\n <div class=\"titleline-left__date\">{{ item.date }}</div>\n </div>\n <div class=\"ele-timeline__middle\">\n <div class=\"ele-timeline__circle\"></div>\n <div class=\"ele-timeline__traline\"></div>\n </div>\n <div class=\"ele-timeline__right\">\n <slot v-if=\"$scopedSlots.right\" name=\"right\" :data=\"item\"></slot>\n <template v-else>\n <div class=\"timeline-right__title\">\n <span class=\"title\">{{ item.title }}</span>\n <span :class=\"['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']\">{{ item.stateName }}</span>\n </div>\n <div class=\"timeline-right__oper\">\n 由\n <span class=\"oper-name\">{{ item.userName }}</span>\n 操作\n </div>\n <div class=\"timeline-right__subtitle\" v-for=\"label in item.labelList\" :key=\"label.value\">\n <div class=\"right-subtitle__field\">{{ label.label }}:</div>\n <div class=\"right-subtitle__content\">{{ label.value }}</div>\n </div>\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { net, type } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { CONTEXT, parseFieldMap } from '../../utils'\nexport default {\n name: 'ele-timeline',\n props: {\n url: {\n type: String\n },\n params: {\n type: Object,\n default: () => ({})\n },\n requestType: {\n type: String,\n default: 'GET'\n },\n fieldMap: {\n type: Object,\n default: () => ({})\n },\n params: {\n type: Object,\n default: () => ({})\n },\n dataSource: {\n type: Array,\n default: () => ([\n // {\n // date: '2023/05/09 03:34:56',\n // title: 123,\n // state: 1,\n // stateName: '成功',\n // userName: 'Name',\n // labelList: [\n // {\n // label: 'label',\n // value: 'value'\n // }\n // ],\n // action: '结班',\n // opinion: '意见'\n // }\n ])\n }\n },\n data () {\n return {\n innerDataSource: []\n }\n },\n inject: {\n [CONTEXT]: {\n default: () => (() => ({}))\n }\n },\n computed: {\n expressionData () {\n return {\n _route: this.$route.query,\n ...this[CONTEXT]()\n }\n }\n },\n async created() {\n if (this.url) {\n this.innerDataSource = await this.requestData()\n } else if (!type.isEmpty(this.dataSource)) {\n this.innerDataSource = this.dataSource\n } else {\n console.warn('ele-timeline: 请传入数据源')\n }\n },\n methods: {\n async requestData () {\n const ret = await net[this.requestType.toLowerCase()](\n this.url,\n { ...this.params, ...parseFieldMap(this.fieldMap, this.expressionData) }\n ).then(resp => {\n const { data } = resp || {}\n return data.map(item => {\n return {\n key: uuidv4(),\n ...item\n }\n })\n })\n return ret\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../theme/index';\n</style>\n<style lang=\"scss\" scoped>\n.ele-timeline__wrapper {\n width: 100%;\n height: 100%;\n .ele-timeline__item {\n display: flex;\n flex-direction: row;\n &:last-child {\n .ele-timeline__middle {\n .ele-timeline__traline {\n display: none;\n }\n }\n }\n .ele-timeline__left {\n flex: 1;\n padding-right: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n text-align: right;\n display: flex;\n flex-direction: row;\n justify-content: end;\n .titleline-left__date {\n width: 100px;\n font-size: 14px;\n color: var(--idoole-black-064);\n }\n }\n .ele-timeline__middle {\n width: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(0, 20px);\n .ele-timeline__circle {\n width: 100%;\n height: 10px;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n border-color: var(--idooel-primary-color);\n }\n .ele-timeline__traline {\n width: 1px;\n height: calc(100% - 10px);\n border-width: 1px;\n border-style: solid;\n border-color: var(--idoole-black-016);\n }\n }\n .ele-timeline__right {\n text-align: left;\n flex: 2;\n padding-left: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n .timeline-right__title {\n line-height: 22px;\n display: flex;\n flex-direction: row;\n .title {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n }\n .title-info {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n &::before {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n }\n &.success {\n &::before {\n background: var(--idoole-success-06);\n }\n }\n &.warning {\n &::before {\n background: var(--idoole-warning-06);\n }\n }\n &.error {\n &::before {\n background: var(--idoole-error-06);\n }\n }\n }\n }\n .timeline-right__oper {\n line-height: 22px;\n margin-top: 8px;\n margin-left: 12px;\n .oper-name {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n }\n }\n .timeline-right__subtitle {\n margin-left: 12px;\n display: flex;\n flex-direction: row;\n line-height: 22px;\n margin-top: 4px;\n .right-subtitle__field {\n flex-shrink: 0;\n font-size: 14px;\n color: var(--idoole-black-064);\n }\n .right-subtitle__content {\n font-size: 14px;\n color: var(--idoole-black-088);\n font-weight: bold;\n margin-left: 4px;\n }\n }\n }\n }\n}\n</style>",".ele-timeline__wrapper {\n width: 100%;\n height: 100%;\n}\n.ele-timeline__wrapper .ele-timeline__item {\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item:last-child .ele-timeline__middle .ele-timeline__traline {\n display: none;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left {\n flex: 1;\n padding-right: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n text-align: right;\n display: flex;\n flex-direction: row;\n justify-content: end;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__left .titleline-left__date {\n width: 100px;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle {\n width: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(0, 20px);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__circle {\n width: 100%;\n height: 10px;\n border-radius: 50%;\n border-width: 2px;\n border-style: solid;\n border-color: var(--idooel-primary-color);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__middle .ele-timeline__traline {\n width: 1px;\n height: calc(100% - 10px);\n border-width: 1px;\n border-style: solid;\n border-color: var(--idoole-black-016);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right {\n text-align: left;\n flex: 2;\n padding-left: 12px;\n padding-top: 16px;\n padding-bottom: 16px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title {\n line-height: 22px;\n display: flex;\n flex-direction: row;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.success::before {\n background: var(--idoole-success-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.warning::before {\n background: var(--idoole-warning-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__title .title-info.error::before {\n background: var(--idoole-error-06);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper {\n line-height: 22px;\n margin-top: 8px;\n margin-left: 12px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__oper .oper-name {\n color: var(--idoole-black-088);\n font-size: 14px;\n font-weight: bold;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle {\n margin-left: 12px;\n display: flex;\n flex-direction: row;\n line-height: 22px;\n margin-top: 4px;\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__field {\n flex-shrink: 0;\n font-size: 14px;\n color: var(--idoole-black-064);\n}\n.ele-timeline__wrapper .ele-timeline__item .ele-timeline__right .timeline-right__subtitle .right-subtitle__content {\n font-size: 14px;\n color: var(--idoole-black-088);\n font-weight: bold;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
6960
7004
|
|
|
6961
7005
|
};
|
|
6962
7006
|
/* scoped */
|
|
6963
|
-
const __vue_scope_id__$k = "data-v-
|
|
7007
|
+
const __vue_scope_id__$k = "data-v-bfb18322";
|
|
6964
7008
|
/* module identifier */
|
|
6965
7009
|
const __vue_module_identifier__$k = undefined;
|
|
6966
7010
|
/* functional template */
|
|
@@ -7038,11 +7082,11 @@ __vue_render__$j._withStripped = true;
|
|
|
7038
7082
|
/* style */
|
|
7039
7083
|
const __vue_inject_styles__$j = function (inject) {
|
|
7040
7084
|
if (!inject) return
|
|
7041
|
-
inject("data-v-
|
|
7085
|
+
inject("data-v-636e07f7_0", { source: ".ele-text__wrapper[data-v-636e07f7] {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-text__wrapper.default .anticon[data-v-636e07f7], .ele-text__wrapper.default .message[data-v-636e07f7] {\n color: var(--idoole-black-064);\n}\n.ele-text__wrapper .anticon[data-v-636e07f7] {\n font-size: 16px;\n}\n.ele-text__wrapper .message[data-v-636e07f7] {\n font-size: 14px;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/text/src/index.vue","index.vue"],"names":[],"mappings":"AA8BA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AC7BA;AD+BA;EACA,8BAAA;AC7BA;ADgCA;EACA,eAAA;AC9BA;ADgCA;EACA,eAAA;EACA,gBAAA;AC9BA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div :class=\"['ele-text__wrapper', type]\">\n <ele-icon theme=\"filled\" :type=\"icon\"></ele-icon>\n <span class=\"message\">{{ message }}</span>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-text',\n props: {\n type: {\n String,\n // default success error warning info\n default: 'default'\n },\n message: {\n type: String\n }\n },\n computed: {\n icon() {\n return 'info-circle'\n }\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n//\n.ele-text__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n &.default {\n .anticon, .message {\n color: var(--idoole-black-064);\n }\n }\n .anticon {\n font-size: 16px;\n }\n .message {\n font-size: 14px;\n margin-left: 4px;\n }\n}\n</style>",".ele-text__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-text__wrapper.default .anticon, .ele-text__wrapper.default .message {\n color: var(--idoole-black-064);\n}\n.ele-text__wrapper .anticon {\n font-size: 16px;\n}\n.ele-text__wrapper .message {\n font-size: 14px;\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
7042
7086
|
|
|
7043
7087
|
};
|
|
7044
7088
|
/* scoped */
|
|
7045
|
-
const __vue_scope_id__$j = "data-v-
|
|
7089
|
+
const __vue_scope_id__$j = "data-v-636e07f7";
|
|
7046
7090
|
/* module identifier */
|
|
7047
7091
|
const __vue_module_identifier__$j = undefined;
|
|
7048
7092
|
/* functional template */
|
|
@@ -7179,11 +7223,11 @@ __vue_render__$i._withStripped = true;
|
|
|
7179
7223
|
/* style */
|
|
7180
7224
|
const __vue_inject_styles__$i = function (inject) {
|
|
7181
7225
|
if (!inject) return
|
|
7182
|
-
inject("data-v-
|
|
7226
|
+
inject("data-v-508efd50_0", { source: "[data-v-508efd50] .ant-tabs-nav-scroll {\n float: left !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/tabs/src/index.vue","index.vue"],"names":[],"mappings":"AAoDA;EACA,sBAAA;ACnDA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div>\n <a-tabs :default-active-key=\"activeKey\" :tabBarGutter=\"tabBarGutter\" :tabBarStyle=\"tabBarStyle\" @change=\"changeHandle\">\n <a-tab-pane v-for=\"(item, index) in tabsList\" :key=\"index\" :tab=\"item.tabName\" :disabled=\"item.disabled\">\n <template #tab>\n <component v-if=\"item.renderHeader\" :is=\"item.renderHeader\" ></component>\n <span v-else>{{ item.tabName }}</span>\n </template>\n <component :is=\"item.content\"></component>\n </a-tab-pane>\n </a-tabs>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-tabs',\n components: {},\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n activeKey: {\n type: Number,\n default: 0\n },\n tabsList: {\n type: Array,\n default () {\n return []\n }\n },\n tabBarStyle: {\n type: Object,\n default () {\n return {}\n }\n },\n tabBarGutter: {\n type: Number\n }\n },\n methods: {\n changeHandle (key) {\n this.$emit('changeActiveKey', key)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-tabs-nav-scroll {\n float: left !important;\n}\n</style>","::v-deep .ant-tabs-nav-scroll {\n float: left !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
7183
7227
|
|
|
7184
7228
|
};
|
|
7185
7229
|
/* scoped */
|
|
7186
|
-
const __vue_scope_id__$i = "data-v-
|
|
7230
|
+
const __vue_scope_id__$i = "data-v-508efd50";
|
|
7187
7231
|
/* module identifier */
|
|
7188
7232
|
const __vue_module_identifier__$i = undefined;
|
|
7189
7233
|
/* functional template */
|
|
@@ -11014,10 +11058,17 @@ var script$h = {
|
|
|
11014
11058
|
handleClickDeleteFile() {
|
|
11015
11059
|
this.fileId = null;
|
|
11016
11060
|
this.fileName = null;
|
|
11061
|
+
this.cropper && this.cropper.destroy();
|
|
11062
|
+
},
|
|
11063
|
+
blobToFile(blob, fileName = 'file.png') {
|
|
11064
|
+
return new File([blob], fileName, {
|
|
11065
|
+
type: blob.type,
|
|
11066
|
+
lastModified: Date.now()
|
|
11067
|
+
});
|
|
11017
11068
|
},
|
|
11018
11069
|
handleOk() {
|
|
11019
|
-
this.cropper.getCroppedCanvas().toBlob(async blob => {
|
|
11020
|
-
await this.uploadFile(blob);
|
|
11070
|
+
this.cropper && this.cropper.getCroppedCanvas().toBlob(async blob => {
|
|
11071
|
+
await this.uploadFile(this.blobToFile(blob, this.fileName));
|
|
11021
11072
|
this.$emit('input', false);
|
|
11022
11073
|
this.$emit('change', this.fileId);
|
|
11023
11074
|
});
|
|
@@ -11027,11 +11078,17 @@ var script$h = {
|
|
|
11027
11078
|
formData.append('serviceCode', 'cover-image');
|
|
11028
11079
|
formData.append('_t', Math.random());
|
|
11029
11080
|
formData.append('file', file);
|
|
11030
|
-
await net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(
|
|
11081
|
+
await net.post('zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'), formData).then(resp => {
|
|
11082
|
+
const {
|
|
11083
|
+
data: {
|
|
11084
|
+
fileID
|
|
11085
|
+
}
|
|
11086
|
+
} = resp;
|
|
11087
|
+
this.fileId = fileID;
|
|
11088
|
+
});
|
|
11031
11089
|
},
|
|
11032
11090
|
initCropper() {
|
|
11033
11091
|
let previewReady = false;
|
|
11034
|
-
console.log('this.$refs[this.leftImage', this.$refs[this.leftImage]);
|
|
11035
11092
|
this.cropper = new Cropper(this.$refs[this.leftImage], {
|
|
11036
11093
|
aspectRatio: this.cropperConfig.aspectRatio,
|
|
11037
11094
|
ready: () => {
|
|
@@ -11191,11 +11248,11 @@ __vue_render__$h._withStripped = true;
|
|
|
11191
11248
|
/* style */
|
|
11192
11249
|
const __vue_inject_styles__$h = function (inject) {
|
|
11193
11250
|
if (!inject) return
|
|
11194
|
-
inject("data-v-8d65d4ec_0", { source: "[data-v-8d65d4ec] .ant-modal-body {\n padding: 16px;\n}\n[data-v-8d65d4ec] .ant-modal-header {\n padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-8d65d4ec] {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-8d65d4ec] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-8d65d4ec] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-8d65d4ec] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-8d65d4ec] .ele-upload__inner {\n height: 100%;\n border: unset;\n background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-8d65d4ec] .ele-upload__inner .ele-upload__area {\n display: flex;\n flex-direction: column;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-8d65d4ec] .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n margin-top: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-8d65d4ec] {\n color: var(--idoole-black-088);\n font-size: 16px;\n line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-8d65d4ec] {\n color: var(--idoole-black-06);\n font-size: 14px;\n line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-8d65d4ec] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-8d65d4ec] {\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-8d65d4ec] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-8d65d4ec] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-8d65d4ec] {\n width: 480px;\n height: 300px;\n border-radius: 2px;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-8d65d4ec] {\n float: left;\n width: 80%;\n}\n.ele-imgCrop__error[data-v-8d65d4ec] {\n color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-8d65d4ec] {\n color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-8d65d4ec] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\modal-img-crop\\src\\index.vue","index.vue"],"names":[],"mappings":"AA2LA;EACA,aAAA;AC1LA;AD4LA;EACA,aAAA;ACzLA;AD2LA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACxLA;AD0LA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACxLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADyLA;EACA,WAAA;EACA,YAAA;ACvLA;ADwLA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;ACtLA;ADuLA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;ACrLA;ADsLA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACpLA;ADyLA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;ACvLA;ADyLA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;ACvLA;AD0LA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACxLA;AD2LA;EACA,kBAAA;ACzLA;AD0LA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;ACxLA;AD2LA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;ACzLA;AD4LA;EACA,WAAA;EACA,UAAA;ACzLA;AD2LA;EACA,qDAAA;ACxLA;AD0LA;EACA,kDAAA;ACvLA;ADyLA;EACA,eAAA;EACA,4BAAA;ACtLA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div>\r\n <ele-modal\r\n :ref=\"getEleModal\"\r\n :title=\"title\"\r\n :cancelText=\"cancelText\"\r\n :maskClosable=\"maskClosable\"\r\n v-on=\"$listeners\"\r\n :size=\"size\"\r\n :value=\"value\"\r\n @ok=\"handleOk\"\r\n @cancel=\"handleCancel\"\r\n :showDefaultFooter=\"true\"\r\n >\r\n <div class=\"ele-imgCrop__wrapper\">\r\n <div class=\"ele-imgCrop__left ele-imgCrop__item\">\r\n <div class=\"ele-imgCrop__noImg\">\r\n <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\r\n <template v-else>\r\n <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\r\n </template>\r\n </div>\r\n <div class=\"margin-t-8\">\r\n <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\r\n <template v-else>\r\n <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\r\n <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\r\n </template>\r\n </div>\r\n </div>\r\n <div class=\"ele-imgCrop__right ele-imgCrop__item\">\r\n <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\r\n <template v-else>\r\n <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\r\n </template>\r\n </div>\r\n </div>\r\n </ele-modal>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport Cropper from 'cropperjs'\r\nimport { util, net } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-modal-img-crop',\r\n model: {\r\n event: 'input',\r\n prop: 'value'\r\n },\r\n props: {\r\n title: {\r\n type: String,\r\n default: '图像裁剪'\r\n },\r\n uploadFileConfig: {\r\n type: Object,\r\n default: () => {\r\n return {\r\n size: 10,\r\n accept: '*',\r\n byteConversion: 1024 * 1024\r\n }\r\n }\r\n },\r\n imageId: {\r\n type: String\r\n },\r\n maskClosable: {\r\n type: Boolean,\r\n default () {\r\n return false\r\n }\r\n },\r\n size: {\r\n type: String,\r\n default () {\r\n return 'big'\r\n }\r\n },\r\n value: {\r\n type: Boolean,\r\n default () {\r\n return false\r\n }\r\n },\r\n cropperConfig: {\r\n type: Object,\r\n default: () => {\r\n return {\r\n aspectRatio: 16 / 9\r\n }\r\n }\r\n }\r\n },\r\n data () {\r\n return {\r\n haveImg: false,\r\n imgtips: null,\r\n isFail: false,\r\n cancelText: '取消',\r\n fileName: null,\r\n fileId: null,\r\n previewBase: null,\r\n cropper: null\r\n }\r\n },\r\n computed: {\r\n leftImage () {\r\n return uuidv4()\r\n },\r\n imageUrl () {\r\n return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\r\n },\r\n getEleModal () {\r\n return uuidv4()\r\n }\r\n },\r\n watch: {\r\n value: {\r\n handler (value) {\r\n this.fileId = this.imageId\r\n if (value && this.fileId) {\r\n setTimeout(() => {\r\n this.initCropper()\r\n })\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n handleCancel () {\r\n this.$emit('input', false)\r\n this.$emit('change', this.fileId)\r\n },\r\n handleClickDeleteFile () {\r\n this.fileId = null\r\n this.fileName = null\r\n },\r\n handleOk () {\r\n this.cropper.getCroppedCanvas().toBlob(async (blob) => {\r\n await this.uploadFile(blob)\r\n this.$emit('input', false)\r\n this.$emit('change', this.fileId)\r\n })\r\n },\r\n async uploadFile (file) {\r\n const formData = new FormData()\r\n formData.append('serviceCode', 'cover-image')\r\n formData.append('_t', Math.random())\r\n formData.append('file', file)\r\n await net.post(\r\n 'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\r\n formData\r\n ).then(() => {})\r\n },\r\n initCropper () {\r\n let previewReady = false\r\n console.log('this.$refs[this.leftImage', this.$refs[this.leftImage])\r\n this.cropper = new Cropper(this.$refs[this.leftImage], {\r\n aspectRatio: this.cropperConfig.aspectRatio,\r\n ready: () => {\r\n previewReady = true\r\n },\r\n crop: util.debounce(() => {\r\n if (!previewReady) {\r\n return\r\n }\r\n this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\r\n }, 200)\r\n })\r\n },\r\n onUploadFileSuccess (props) {\r\n const { response: { data: { fileID } }, name } = props\r\n this.fileId = fileID\r\n this.fileName = name\r\n this.$nextTick(() => {\r\n this.initCropper()\r\n })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ant-modal-body {\r\n padding: 16px;\r\n}\r\n::v-deep .ant-modal-header {\r\n padding: 16px;\r\n}\r\n.ele-imgCrop__wrapper {\r\n display: flex;\r\n gap: 16px;\r\n justify-content: center;\r\n margin-bottom: 30px;\r\n .ele-imgCrop__left {\r\n .ele-imgCrop__noImg {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n .img-crop-left__image {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .ele-img-crop__upload {\r\n width: 100%;\r\n height: 100%;\r\n ::v-deep .ele-upload__inner {\r\n height: 100%;\r\n border: unset;\r\n background: transparent !important;\r\n .ele-upload__area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n .ele-upload__area--text {\r\n margin-top: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n }\r\n }\r\n }\r\n .ele-imgCrop__font1 {\r\n color: var(--idoole-black-088);\r\n font-size: 16px;\r\n line-height: 24px !important;\r\n }\r\n .ele-imgCrop__font2 {\r\n color: var(--idoole-black-06);\r\n font-size: 14px;\r\n line-height: 22px; \r\n }\r\n }\r\n .ele-imgCrop__update {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n cursor: pointer;\r\n }\r\n }\r\n .ele-imgCrop__right {\r\n position: relative;\r\n span {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n .img-crop-right__image {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n .ele-imgCrop__item {\r\n width: 480px;\r\n height: 300px;\r\n border-radius: 2px;\r\n border: 1px dashed var(--idooel-form-title-border-color);\r\n background: var(--idooel-form-upload-bg-color);\r\n }\r\n}\r\n.ele-imgCrop__tips {\r\n float: left;\r\n width: 80%;\r\n}\r\n.ele-imgCrop__error {\r\n color: var(--idooel-form-border-err-color) !important;\r\n}\r\n.ele-imgCrop__error2 {\r\n color: var(--idooel-img-crop-err-color) !important;\r\n}\r\n.ele-imgCrop__icon {\r\n font-size: 48px;\r\n color: var(--idooel-link-06);\r\n}\r\n</style>","::v-deep .ant-modal-body {\n padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n height: 100%;\n border: unset;\n background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n display: flex;\n flex-direction: column;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n margin-top: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n color: var(--idoole-black-088);\n font-size: 16px;\n line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n color: var(--idoole-black-06);\n font-size: 14px;\n line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n width: 480px;\n height: 300px;\n border-radius: 2px;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n float: left;\n width: 80%;\n}\n\n.ele-imgCrop__error {\n color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11251
|
+
inject("data-v-54a0392d_0", { source: "[data-v-54a0392d] .ant-modal-body {\n padding: 16px;\n}\n[data-v-54a0392d] .ant-modal-header {\n padding: 16px;\n}\n.ele-imgCrop__wrapper[data-v-54a0392d] {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg[data-v-54a0392d] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image[data-v-54a0392d] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] .ele-upload__inner {\n height: 100%;\n border: unset;\n background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] .ele-upload__inner .ele-upload__area {\n display: flex;\n flex-direction: column;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload[data-v-54a0392d] .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n margin-top: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1[data-v-54a0392d] {\n color: var(--idoole-black-088);\n font-size: 16px;\n line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2[data-v-54a0392d] {\n color: var(--idoole-black-06);\n font-size: 14px;\n line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update[data-v-54a0392d] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right[data-v-54a0392d] {\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span[data-v-54a0392d] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image[data-v-54a0392d] {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item[data-v-54a0392d] {\n width: 480px;\n height: 300px;\n border-radius: 2px;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color);\n}\n.ele-imgCrop__tips[data-v-54a0392d] {\n float: left;\n width: 80%;\n}\n.ele-imgCrop__error[data-v-54a0392d] {\n color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2[data-v-54a0392d] {\n color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon[data-v-54a0392d] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAoMA;EACA,aAAA;ACnMA;ADqMA;EACA,aAAA;AClMA;ADoMA;EACA,aAAA;EACA,SAAA;EACA,uBAAA;EACA,mBAAA;ACjMA;ADmMA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACjMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADkMA;EACA,WAAA;EACA,YAAA;AChMA;ADiMA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;AC/LA;ADgMA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,mBAAA;EACA,uBAAA;AC9LA;AD+LA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AC7LA;ADkMA;EACA,8BAAA;EACA,eAAA;EACA,4BAAA;AChMA;ADkMA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AChMA;ADmMA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACjMA;ADoMA;EACA,kBAAA;AClMA;ADmMA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACjMA;ADmMA;EACA,WAAA;EACA,YAAA;ACjMA;ADoMA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,wDAAA;EACA,8CAAA;AClMA;ADqMA;EACA,WAAA;EACA,UAAA;AClMA;ADoMA;EACA,qDAAA;ACjMA;ADmMA;EACA,kDAAA;AChMA;ADkMA;EACA,eAAA;EACA,4BAAA;AC/LA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div>\n <ele-modal\n :ref=\"getEleModal\"\n :title=\"title\"\n :cancelText=\"cancelText\"\n :maskClosable=\"maskClosable\"\n v-on=\"$listeners\"\n :size=\"size\"\n :value=\"value\"\n @ok=\"handleOk\"\n @cancel=\"handleCancel\"\n :showDefaultFooter=\"true\"\n >\n <div class=\"ele-imgCrop__wrapper\">\n <div class=\"ele-imgCrop__left ele-imgCrop__item\">\n <div class=\"ele-imgCrop__noImg\">\n <ele-upload v-if=\"!fileId\" v-bind=\"uploadFileConfig\" class=\"ele-img-crop__upload\" @on-success=\"onUploadFileSuccess\" icon=\"inbox\" url=\"api/zuul/api-file/workbench/file\"></ele-upload>\n <template v-else>\n <img :ref=\"leftImage\" class=\"img-crop-left__image\" :src=\"imageUrl\" alt=\"\">\n </template>\n </div>\n <div class=\"margin-t-8\">\n <span v-if=\"imgtips\" class=\"ele-imgCrop__font1 ele-imgCrop__tips\" :class=\"isFail? 'ele-imgCrop__error' : ''\">{{ imgtips }}</span>\n <template v-else>\n <span class=\"ele-imgCrop__font1\">{{ fileName }}</span>\n <a-icon v-if=\"fileName\" @click=\"handleClickDeleteFile\" type=\"close\" style=\"cursor: pointer;float: right; line-height: 24px;\"/>\n </template>\n </div>\n </div>\n <div class=\"ele-imgCrop__right ele-imgCrop__item\">\n <span v-if=\"!fileId\" class=\"ele-imgCrop__font2\">左侧上传图片后可预览</span>\n <template v-else>\n <img class=\"img-crop-right__image\" :src=\"previewBase\" alt=\"\">\n </template>\n </div>\n </div>\n </ele-modal>\n </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nimport Cropper from 'cropperjs'\nimport { util, net } from '@idooel/shared'\nexport default {\n name: 'ele-modal-img-crop',\n model: {\n event: 'input',\n prop: 'value'\n },\n props: {\n title: {\n type: String,\n default: '图像裁剪'\n },\n uploadFileConfig: {\n type: Object,\n default: () => {\n return {\n size: 10,\n accept: '*',\n byteConversion: 1024 * 1024\n }\n }\n },\n imageId: {\n type: String\n },\n maskClosable: {\n type: Boolean,\n default () {\n return false\n }\n },\n size: {\n type: String,\n default () {\n return 'big'\n }\n },\n value: {\n type: Boolean,\n default () {\n return false\n }\n },\n cropperConfig: {\n type: Object,\n default: () => {\n return {\n aspectRatio: 16 / 9\n }\n }\n }\n },\n data () {\n return {\n haveImg: false,\n imgtips: null,\n isFail: false,\n cancelText: '取消',\n fileName: null,\n fileId: null,\n previewBase: null,\n cropper: null\n }\n },\n computed: {\n leftImage () {\n return uuidv4()\n },\n imageUrl () {\n return `/api-file/workbench/file/stream/${this.fileId}?origin=true`\n },\n getEleModal () {\n return uuidv4()\n }\n },\n watch: {\n value: {\n handler (value) {\n this.fileId = this.imageId\n if (value && this.fileId) {\n setTimeout(() => {\n this.initCropper()\n })\n }\n },\n immediate: true\n }\n },\n methods: {\n handleCancel () {\n this.$emit('input', false)\n this.$emit('change', this.fileId)\n },\n handleClickDeleteFile () {\n this.fileId = null\n this.fileName = null\n this.cropper && this.cropper.destroy()\n },\n blobToFile(blob, fileName = 'file.png') {\n return new File([blob], fileName, {\n type: blob.type,\n lastModified: Date.now()\n })\n },\n handleOk () {\n this.cropper && this.cropper.getCroppedCanvas().toBlob(async (blob) => {\n await this.uploadFile(this.blobToFile(blob, this.fileName))\n this.$emit('input', false)\n this.$emit('change', this.fileId)\n })\n },\n async uploadFile (file) {\n const formData = new FormData()\n formData.append('serviceCode', 'cover-image')\n formData.append('_t', Math.random())\n formData.append('file', file)\n await net.post(\n 'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),\n formData\n ).then((resp) => {\n const { data: { fileID } } = resp\n this.fileId = fileID\n })\n },\n initCropper () {\n let previewReady = false\n this.cropper = new Cropper(this.$refs[this.leftImage], {\n aspectRatio: this.cropperConfig.aspectRatio,\n ready: () => {\n previewReady = true\n },\n crop: util.debounce(() => {\n if (!previewReady) {\n return\n }\n this.previewBase = this.cropper.getCroppedCanvas().toDataURL()\n }, 200)\n })\n },\n onUploadFileSuccess (props) {\n const { response: { data: { fileID } }, name } = props\n this.fileId = fileID\n this.fileName = name\n this.$nextTick(() => {\n this.initCropper()\n })\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ant-modal-body {\n padding: 16px;\n}\n::v-deep .ant-modal-header {\n padding: 16px;\n}\n.ele-imgCrop__wrapper {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin-bottom: 30px;\n .ele-imgCrop__left {\n .ele-imgCrop__noImg {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n .img-crop-left__image {\n width: 100%;\n height: 100%;\n }\n .ele-img-crop__upload {\n width: 100%;\n height: 100%;\n ::v-deep .ele-upload__inner {\n height: 100%;\n border: unset;\n background: transparent !important;\n .ele-upload__area {\n display: flex;\n flex-direction: column;\n height: 100%;\n align-items: center;\n justify-content: center;\n .ele-upload__area--text {\n margin-top: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n }\n }\n }\n .ele-imgCrop__font1 {\n color: var(--idoole-black-088);\n font-size: 16px;\n line-height: 24px !important;\n }\n .ele-imgCrop__font2 {\n color: var(--idoole-black-06);\n font-size: 14px;\n line-height: 22px; \n }\n }\n .ele-imgCrop__update {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n }\n }\n .ele-imgCrop__right {\n position: relative;\n span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n .img-crop-right__image {\n width: 100%;\n height: 100%;\n }\n }\n .ele-imgCrop__item {\n width: 480px;\n height: 300px;\n border-radius: 2px;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color);\n }\n}\n.ele-imgCrop__tips {\n float: left;\n width: 80%;\n}\n.ele-imgCrop__error {\n color: var(--idooel-form-border-err-color) !important;\n}\n.ele-imgCrop__error2 {\n color: var(--idooel-img-crop-err-color) !important;\n}\n.ele-imgCrop__icon {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n</style>","::v-deep .ant-modal-body {\n padding: 16px;\n}\n\n::v-deep .ant-modal-header {\n padding: 16px;\n}\n\n.ele-imgCrop__wrapper {\n display: flex;\n gap: 16px;\n justify-content: center;\n margin-bottom: 30px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .img-crop-left__image {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner {\n height: 100%;\n border: unset;\n background: transparent !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area {\n display: flex;\n flex-direction: column;\n height: 100%;\n align-items: center;\n justify-content: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-img-crop__upload ::v-deep .ele-upload__inner .ele-upload__area .ele-upload__area--text {\n margin-top: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font1 {\n color: var(--idoole-black-088);\n font-size: 16px;\n line-height: 24px !important;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__noImg .ele-imgCrop__font2 {\n color: var(--idoole-black-06);\n font-size: 14px;\n line-height: 22px;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__left .ele-imgCrop__update {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right {\n position: relative;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.ele-imgCrop__wrapper .ele-imgCrop__right .img-crop-right__image {\n width: 100%;\n height: 100%;\n}\n.ele-imgCrop__wrapper .ele-imgCrop__item {\n width: 480px;\n height: 300px;\n border-radius: 2px;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color);\n}\n\n.ele-imgCrop__tips {\n float: left;\n width: 80%;\n}\n\n.ele-imgCrop__error {\n color: var(--idooel-form-border-err-color) !important;\n}\n\n.ele-imgCrop__error2 {\n color: var(--idooel-img-crop-err-color) !important;\n}\n\n.ele-imgCrop__icon {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11195
11252
|
|
|
11196
11253
|
};
|
|
11197
11254
|
/* scoped */
|
|
11198
|
-
const __vue_scope_id__$h = "data-v-
|
|
11255
|
+
const __vue_scope_id__$h = "data-v-54a0392d";
|
|
11199
11256
|
/* module identifier */
|
|
11200
11257
|
const __vue_module_identifier__$h = undefined;
|
|
11201
11258
|
/* functional template */
|
|
@@ -11300,11 +11357,11 @@ __vue_render__$g._withStripped = true;
|
|
|
11300
11357
|
/* style */
|
|
11301
11358
|
const __vue_inject_styles__$g = function (inject) {
|
|
11302
11359
|
if (!inject) return
|
|
11303
|
-
inject("data-v-
|
|
11360
|
+
inject("data-v-baee03c0_0", { source: ".ele-editor__bottom[data-v-baee03c0] {\n height: 40px;\n padding: 8px 20px 8px 8px;\n border: 1px solid var(--idooel-form-title-border-color);\n border-top: 0px;\n}\n.ele-editor__bottom span[data-v-baee03c0] {\n color: var(--idoole-black-088);\n text-align: right;\n font-size: 12px;\n line-height: 20px;\n width: 100%;\n display: inline-block;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/text-editor/src/index.vue","index.vue"],"names":[],"mappings":"AA0DA;EACA,YAAA;EACA,yBAAA;EACA,uDAAA;EACA,eAAA;ACzDA;AD0DA;EACA,8BAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;EACA,qBAAA;ACxDA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele-editor__wrapper\" :style=\"{width: editorWidth, height: editorHeight}\">\n <Vueditor :ref=\"getVueditor\" :style=\"{width: editorWidth, height: editorHeight}\"></Vueditor>\n <div class=\"ele-editor__bottom\">\n <span>{{ innerContent.length }}字</span>\n </div>\n </div>\n</template>\n\n<script>\nimport { v4 as uuidv4 } from 'uuid'\nexport default {\n name: 'ele-text-editor',\n props: {\n editorWidth: {\n type: String\n },\n editorHeight: {\n type: String\n },\n maxLength: {\n type: Number,\n default () {\n return 10\n }\n }\n },\n data() {\n return {\n editorConfig: {},\n textEditorRef: null\n }\n },\n computed: {\n innerContent () {\n let content = this.textEditorRef ? this.textEditorRef.getContent() : ''\n if (this.textEditorRef && content.length > this.maxLength) {\n content = content.substring(0, this.maxLength)\n this.$nextTick(() => {\n this.textEditorRef.setContent(content)\n })\n }\n this.$emit('input', content)\n return content\n },\n getVueditor () {\n return uuidv4()\n }\n },\n watch: {},\n methods: {},\n mounted () {\n this.textEditorRef = this.$refs[this.getVueditor]\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele-editor__bottom {\n height: 40px;\n padding: 8px 20px 8px 8px;\n border: 1px solid var(--idooel-form-title-border-color);\n border-top: 0px;\n span {\n color: var(--idoole-black-088);\n text-align: right;\n font-size: 12px;\n line-height: 20px;\n width: 100%;\n display: inline-block;\n }\n}\n</style>",".ele-editor__bottom {\n height: 40px;\n padding: 8px 20px 8px 8px;\n border: 1px solid var(--idooel-form-title-border-color);\n border-top: 0px;\n}\n.ele-editor__bottom span {\n color: var(--idoole-black-088);\n text-align: right;\n font-size: 12px;\n line-height: 20px;\n width: 100%;\n display: inline-block;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11304
11361
|
|
|
11305
11362
|
};
|
|
11306
11363
|
/* scoped */
|
|
11307
|
-
const __vue_scope_id__$g = "data-v-
|
|
11364
|
+
const __vue_scope_id__$g = "data-v-baee03c0";
|
|
11308
11365
|
/* module identifier */
|
|
11309
11366
|
const __vue_module_identifier__$g = undefined;
|
|
11310
11367
|
/* functional template */
|
|
@@ -11410,11 +11467,11 @@ __vue_render__$f._withStripped = true;
|
|
|
11410
11467
|
/* style */
|
|
11411
11468
|
const __vue_inject_styles__$f = function (inject) {
|
|
11412
11469
|
if (!inject) return
|
|
11413
|
-
inject("data-v-
|
|
11470
|
+
inject("data-v-27d78bca_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: {"version":3,"sources":[],"names":[],"mappings":"","file":"index.vue"}, media: undefined });
|
|
11414
11471
|
|
|
11415
11472
|
};
|
|
11416
11473
|
/* scoped */
|
|
11417
|
-
const __vue_scope_id__$f = "data-v-
|
|
11474
|
+
const __vue_scope_id__$f = "data-v-27d78bca";
|
|
11418
11475
|
/* module identifier */
|
|
11419
11476
|
const __vue_module_identifier__$f = undefined;
|
|
11420
11477
|
/* functional template */
|
|
@@ -11473,11 +11530,11 @@ __vue_render__$e._withStripped = true;
|
|
|
11473
11530
|
/* style */
|
|
11474
11531
|
const __vue_inject_styles__$e = function (inject) {
|
|
11475
11532
|
if (!inject) return
|
|
11476
|
-
inject("data-v-
|
|
11533
|
+
inject("data-v-190ede62_0", { source: ".g-loading[data-v-190ede62] {\n width: 16px;\n height: 16px;\n border: 1px solid #409EFF;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 100%;\n animation: rotate-data-v-190ede62 infinite 0.75s linear;\n}\n@keyframes rotate-data-v-190ede62 {\n0% {\n transform: rotate(0);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/loading/src/index.vue","index.vue"],"names":[],"mappings":"AAmBA;EACA,WAAA;EACA,YAAA;EACA,yBAAA;EACA,6BAAA;EACA,8BAAA;EACA,mBAAA;EACA,uDAAA;AClBA;ADoBA;AACA;IACA,oBAAA;ACjBE;ADmBF;IACA,yBAAA;ACjBE;AACF;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div v-if=\"loading\" class=\"g-loading\">\n\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-loading',\n props: {\n loading: {\n type: Boolean,\n default: true\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-loading {\n width: 16px;\n height: 16px;\n border: 1px solid #409EFF;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 100%;\n animation: rotate infinite 0.75s linear;\n}\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>",".g-loading {\n width: 16px;\n height: 16px;\n border: 1px solid #409EFF;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 100%;\n animation: rotate infinite 0.75s linear;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
11477
11534
|
|
|
11478
11535
|
};
|
|
11479
11536
|
/* scoped */
|
|
11480
|
-
const __vue_scope_id__$e = "data-v-
|
|
11537
|
+
const __vue_scope_id__$e = "data-v-190ede62";
|
|
11481
11538
|
/* module identifier */
|
|
11482
11539
|
const __vue_module_identifier__$e = undefined;
|
|
11483
11540
|
/* functional template */
|
|
@@ -11672,11 +11729,11 @@ __vue_render__$d._withStripped = true;
|
|
|
11672
11729
|
/* style */
|
|
11673
11730
|
const __vue_inject_styles__$d = function (inject) {
|
|
11674
11731
|
if (!inject) return
|
|
11675
|
-
inject("data-v-
|
|
11732
|
+
inject("data-v-2d349399_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
11676
11733
|
|
|
11677
11734
|
};
|
|
11678
11735
|
/* scoped */
|
|
11679
|
-
const __vue_scope_id__$d = "data-v-
|
|
11736
|
+
const __vue_scope_id__$d = "data-v-2d349399";
|
|
11680
11737
|
/* module identifier */
|
|
11681
11738
|
const __vue_module_identifier__$d = undefined;
|
|
11682
11739
|
/* functional template */
|
|
@@ -11738,11 +11795,11 @@ __vue_render__$c._withStripped = true;
|
|
|
11738
11795
|
/* style */
|
|
11739
11796
|
const __vue_inject_styles__$c = function (inject) {
|
|
11740
11797
|
if (!inject) return
|
|
11741
|
-
inject("data-v-
|
|
11798
|
+
inject("data-v-07e596bf_0", { source: ".g-search__label[data-v-07e596bf] {\n /* width: 69px; */\n flex-basis: 69px;\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.g-search__label .label__title[data-v-07e596bf], .g-search__label .label__suffix[data-v-07e596bf] {\n font-size: 14px;\n color: rgba(0, 0, 0, 0.88);\n white-space: nowrap;\n}\n.g-search__label .label__suffix[data-v-07e596bf] {\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=label.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/search-area/src/label.vue","label.vue"],"names":[],"mappings":"AAkBA;EACA,iBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACjBA;ADkBA;EACA,eAAA;EACA,0BAAA;EACA,mBAAA;AChBA;ADkBA;EACA,gBAAA;AChBA;;AAEA,oCAAoC","file":"label.vue","sourcesContent":["<template>\n <div class=\"g-search__label\">\n <span class=\"label__title\">{{ label }}</span>\n <span class=\"label__suffix\">:</span>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n label: {\n type: String\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-search__label {\n /* width: 69px; */\n flex-basis: 69px;\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n .label__title, .label__suffix {\n font-size: 14px;\n color: rgba(0, 0, 0, 0.88);\n white-space: nowrap;\n }\n .label__suffix {\n margin-left: 4px;\n }\n}\n</style>",".g-search__label {\n /* width: 69px; */\n flex-basis: 69px;\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.g-search__label .label__title, .g-search__label .label__suffix {\n font-size: 14px;\n color: rgba(0, 0, 0, 0.88);\n white-space: nowrap;\n}\n.g-search__label .label__suffix {\n margin-left: 4px;\n}\n\n/*# sourceMappingURL=label.vue.map */"]}, media: undefined });
|
|
11742
11799
|
|
|
11743
11800
|
};
|
|
11744
11801
|
/* scoped */
|
|
11745
|
-
const __vue_scope_id__$c = "data-v-
|
|
11802
|
+
const __vue_scope_id__$c = "data-v-07e596bf";
|
|
11746
11803
|
/* module identifier */
|
|
11747
11804
|
const __vue_module_identifier__$c = undefined;
|
|
11748
11805
|
/* functional template */
|
|
@@ -12124,11 +12181,11 @@ __vue_render__$b._withStripped = true;
|
|
|
12124
12181
|
/* style */
|
|
12125
12182
|
const __vue_inject_styles__$b = function (inject) {
|
|
12126
12183
|
if (!inject) return
|
|
12127
|
-
inject("data-v-605345b7_0", { source: ".search-area__wrapper[data-v-605345b7] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-605345b7] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-605345b7] {\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-605345b7] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-605345b7] {\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-605345b7] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-605345b7] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\composite-components\\search-area\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwMA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvMA;ADyMA;EACA,YAAA;ACvMA;AD0MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxMA;ADyMA;EACA,oBAAA;ACvMA;ADyMA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvMA;ADwMA;EACA,eAAA;ACtMA;ADwMA;EACA,eAAA;EACA,gBAAA;ACtMA;;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\" :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)\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.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 });
|
|
12184
|
+
inject("data-v-c447c0e0_0", { source: ".search-area__wrapper[data-v-c447c0e0] {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.search-area__wrapper[data-v-c447c0e0] .ant-col:last-child {\n float: right;\n}\n.search-area__wrapper .search-area__item[data-v-c447c0e0] {\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-c447c0e0] {\n justify-content: end;\n}\n.search-area__wrapper .search-area__item .expand-collapse[data-v-c447c0e0] {\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-c447c0e0] {\n font-size: 14px;\n}\n.search-area__wrapper .search-area__item .expand-collapse .expand-collapse__icon[data-v-c447c0e0] {\n font-size: 16px;\n margin-left: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/search-area/src/index.vue","index.vue"],"names":[],"mappings":"AAwMA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;ACvMA;ADyMA;EACA,YAAA;ACvMA;AD0MA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxMA;ADyMA;EACA,oBAAA;ACvMA;ADyMA;EACA,gBAAA;EACA,YAAA;EACA,iBAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACvMA;ADwMA;EACA,eAAA;ACtMA;ADwMA;EACA,eAAA;EACA,gBAAA;ACtMA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"search-area__wrapper\">\n <a-row :gutter=\"gutter\">\n <template v-for=\"(item, idx) in innerDataSource\">\n <a-col v-if=\"item._show\" :span=\"item.span || span\" :key=\"idx\">\n <div v-if=\"item.type == '_action'\" class=\"search-area__item search-area--action\">\n <ele-button icon=\"search\" type=\"primary\" @click=\"handleClickSearch\">查询</ele-button>\n <ele-button style=\"margin-left:8px;\" icon=\"reload\" @click=\"handleClickReset\">重置</ele-button>\n <div v-if=\"innerDataSource.length > cuttingFormula + 1\" class=\"expand-collapse\" @click=\"handleClickExpandCollapse\">\n <span class=\"expand-collapse__text\">{{ isExpand ? '收起' : '展开' }}</span>\n <span class=\"expand-collapse__icon\">\n <a-icon v-if=\"isExpand\" type=\"up\" />\n <a-icon v-else type=\"down\" />\n </span>\n </div>\n </div>\n <div v-else class=\"search-area__item\">\n <template v-if=\"(item.type == 'ele-input') || (item.type == 'Input')\">\n <Label :label=\"item.label\"></Label>\n <ele-input v-model=\"item._value\"></ele-input>\n </template>\n <template v-else-if=\"(item.type == 'ele-select') || (item.type == 'Select')\">\n <Label :label=\"item.label\"></Label>\n <ele-select v-model=\"item._value\" :multiple=\"item.multiple\" :data-source=\"item.optionList\"></ele-select>\n </template>\n <template v-else-if=\"(item.type == 'ele-date') || (item.type == 'DatePicker')\">\n <Label :label=\"item.label\"></Label>\n <ele-date v-model=\"item._value\" :placeholder=\"item.placeholder\" :format=\"item.format\"></ele-date>\n </template>\n <template v-else-if=\"item.type == 'ele-date-range'\">\n <Label :label=\"item.label\"></Label>\n <ele-date-range v-model=\"item._value\" :format=\"item.format\" :show-time=\"item.showTime\"></ele-date-range>\n </template>\n </div>\n </a-col>\n </template>\n </a-row>\n </div>\n</template>\n\n<script>\nimport Label from './label.vue'\nimport moment from 'moment'\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-search-area',\n components: {\n Label\n },\n props: {\n gutter: {\n type: [Number, Array, Object],\n default: () => ([\n 16, 8\n ])\n },\n span: {\n type: Number,\n default: 8\n },\n dataSource: {\n type: Array,\n required: true\n }\n },\n data() {\n return {\n isExpand: false\n }\n },\n computed: {\n cuttingFormula () {\n return (24 / this.span - 1)\n },\n buildDataSource () {\n return this.controlDisplayByFormula(this.mapDefaultValueToValue())\n },\n innerDataSource () {\n return [ ...this.buildDataSource, { type: '_action', _show: true }]\n }\n },\n created() {\n const querys = this.extractValues()\n this.$emit('search', querys)\n },\n methods: {\n controlDisplayByFormula (dataSource = []) {\n if (this.isExpand) {\n dataSource.forEach(item => {\n this.$set(item, '_show', true)\n })\n } else {\n dataSource.forEach((item, idx) => {\n if (idx < this.cuttingFormula) {\n this.$set(item, '_show', true)\n } else {\n this.$set(item, '_show', false)\n }\n })\n }\n return dataSource\n },\n buildDefaultValue (arg) {\n if (type.notStr(arg)) return arg\n if (!arg || arg.charAt(0) !== '_') return arg\n return parse(arg, {\n _route: this.$route.query\n })\n },\n mapDefaultValueToValue () {\n this.dataSource.forEach(props => {\n this.$set(props, '_show', this.isExpand)\n if (props.defaultValue) {\n if (type.isFunction(props.defaultValue)) {\n const ret = props.defaultValue.call(this)\n this.$set(props, '_value', this.buildDefaultValue(ret))\n } else {\n this.$set(props, '_value', this.buildDefaultValue(props.defaultValue))\n }\n }\n })\n return this.dataSource\n },\n handleClickExpandCollapse () {\n this.isExpand = !this.isExpand\n },\n handleClickSearch () {\n const querys = this.extractValues()\n this.$emit('search', querys)\n },\n buildMapto (mapTo = [], dataSource) {\n const [ startField, endField ] = mapTo\n const [ startValue, endValue ] = dataSource || [null, null]\n return {\n [startField]: startValue,\n [endField]: endValue\n }\n },\n extractValues () {\n let ret = {}\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\n switch (item.type) {\n case 'DatePicker':\n ret[item.name] = typeof item._value == 'undefined' ? undefined : moment(item._value).format(item.format)\n break\n case 'ele-date-range':\n if (item.mapTo) {\n Object.assign(ret, this.buildMapto(item.mapTo, item._value))\n } else {\n ret[item.name] = (item._value || []).join(',')\n }\n break\n default:\n ret[item.name] = item._value\n break\n }\n })\n return ret\n },\n cleanValues () {\n this.innerDataSource.filter(item => item.type !== '_action').forEach(item => {\n const { defaultValue } = item\n switch (item.type) {\n case 'Select':\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\n !defaultValue && this.$set(item, '_value', null)\n break\n case 'DatePicker':\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\n !defaultValue && this.$set(item, '_value', undefined)\n break\n case 'ele-date-range':\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\n !defaultValue && this.$set(item, '_value', [])\n break\n default:\n defaultValue && this.$set(item, '_value', this.buildDefaultValue(defaultValue))\n !defaultValue && this.$set(item, '_value', null)\n break\n }\n })\n },\n handleClickReset () {\n this.cleanValues()\n //TODO defaultValue\n const querys = this.extractValues()\n this.$emit('search', querys)\n },\n onChangeSelect (value, props) {\n this.$set(props, '_value', value)\n }\n },\n destroyed () {\n this.cleanValues()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.search-area__wrapper {\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n ::v-deep .ant-col {\n &:last-child {\n float: right;\n }\n }\n .search-area__item {\n height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n &.search-area--action {\n justify-content: end;\n }\n .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 .expand-collapse__text {\n font-size: 14px;\n }\n .expand-collapse__icon {\n font-size: 16px;\n margin-left: 8px;\n }\n }\n }\n}\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 });
|
|
12128
12185
|
|
|
12129
12186
|
};
|
|
12130
12187
|
/* scoped */
|
|
12131
|
-
const __vue_scope_id__$b = "data-v-
|
|
12188
|
+
const __vue_scope_id__$b = "data-v-c447c0e0";
|
|
12132
12189
|
/* module identifier */
|
|
12133
12190
|
const __vue_module_identifier__$b = undefined;
|
|
12134
12191
|
/* functional template */
|
|
@@ -12371,11 +12428,11 @@ __vue_render__$a._withStripped = true;
|
|
|
12371
12428
|
/* style */
|
|
12372
12429
|
const __vue_inject_styles__$a = function (inject) {
|
|
12373
12430
|
if (!inject) return
|
|
12374
|
-
inject("data-v-
|
|
12431
|
+
inject("data-v-1f716980_0", { source: ".button-group__wrapper[data-v-1f716980] {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn[data-v-1f716980] {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn[data-v-1f716980]:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/button-group/src/index.vue","index.vue"],"names":[],"mappings":"AA4IA;EACA,aAAA;EACA,kBAAA;EACA,mBAAA;AC3IA;AD4IA;EACA,gBAAA;AC1IA;AD2IA;EACA,cAAA;ACzIA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"button-group__wrapper\">\n <template v-for=\"(item, idx) in innerDatasource\" >\n <ele-button\n v-if=\"isBool(item._show) ? item._show : true\"\n :type=\"item.type\"\n :icon=\"item.icon\"\n :mode=\"item.mode\"\n :data-source=\"item.optionList\"\n :event-name=\"item.eventName\"\n :record=\"item\"\n v-on=\"overrideButtonEvent\"\n :key=\"idx\">\n {{ item.label }}\n </ele-button>\n </template>\n <ele-modal-confirm v-model=\"modalConfirmValue\" :contextProp=\"currentContext\" v-on=\"overrideModalConfirmEvent\" v-bind=\"modalConfirmMeta\"></ele-modal-confirm>\n </div>\n</template>\n\n<script>\nimport { type, util } from '@idooel/shared'\nimport { parse } from '@idooel/expression'\nimport { CONTEXT, AREA_NAMES } from '../../../utils'\nexport default {\n name: 'ele-button-group',\n props: {\n dataSource: {\n type: Array,\n default: () => []\n }\n },\n data() {\n return {\n innerDatasource: [],\n modalConfirmValue: false,\n modalConfirmMeta: {}\n }\n },\n inject: {\n [CONTEXT]: {\n default: () => (() => ({}))\n }\n },\n computed: {\n callContext () {\n return this[CONTEXT].call(this)\n },\n currentExposed () {\n const exposed = Object.assign({}, this.callContext.exposed || {}, { [AREA_NAMES.BUTTON_GROUP]: { setModalConfirm: this.setModalConfirm } })\n return exposed\n },\n contextData () {\n return {\n ...this.currentContext,\n exposed: this.currentExposed\n }\n },\n overrideButtonEvent () {\n const events = this.dataSource.reduce((ret, item) => {\n const { mode, optionList = [] } = item\n if (mode == 'dropdown') {\n optionList.forEach(props => {\n ret[props.eventName || 'click'] = (e) => {\n const { modalConfirm } = props\n modalConfirm && (this.modalConfirmMeta = modalConfirm)\n if (this.preventModalConfirm(modalConfirm)) {\n this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })\n return\n }\n modalConfirm && (this.modalConfirmValue = true)\n this.$emit(props.eventName || 'click', { ...e, ...props, record: props, ...this.contextData })\n }\n })\n }\n ret[item.eventName || 'click'] = (e) => {\n const { modalConfirm } = item\n modalConfirm && (this.modalConfirmMeta = modalConfirm)\n if (this.preventModalConfirm(modalConfirm)) {\n this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })\n return\n }\n modalConfirm && (this.modalConfirmValue = true)\n this.$emit(item.eventName || 'click', { ...e, record: item, ...this.contextData })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n ...this.contextData\n }\n },\n overrideModalConfirmEvent () {\n return {\n ...this.$listeners\n }\n },\n currentContext () {\n return {\n _route: this.$route.query,\n _routeMeta: this.$route.meta,\n ...this.callContext\n }\n }\n },\n watch: {\n dataSource: {\n handler (dataSource) {\n this.innerDatasource = dataSource.map(item => {\n return {\n ...item,\n _show: this.executeExpression(item.show)\n }\n })\n },\n immediate: true\n }\n },\n methods: {\n setModalConfirm (arg = false) {\n this.modalConfirmValue = arg\n },\n preventModalConfirm (modalConfirm = {}) {\n const { show } = modalConfirm\n return !this.executeExpression(show)\n },\n executeExpression (expression) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return true\n return parse(expression, { ...this.currentContext, ...this.contextData })\n },\n isBool (arg) {\n return type.isBool(arg)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-group__wrapper {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n .ant-btn {\n margin-left: 8px;\n &:first-child {\n margin-left: 0;\n }\n }\n}\n</style>",".button-group__wrapper {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
12375
12432
|
|
|
12376
12433
|
};
|
|
12377
12434
|
/* scoped */
|
|
12378
|
-
const __vue_scope_id__$a = "data-v-
|
|
12435
|
+
const __vue_scope_id__$a = "data-v-1f716980";
|
|
12379
12436
|
/* module identifier */
|
|
12380
12437
|
const __vue_module_identifier__$a = undefined;
|
|
12381
12438
|
/* functional template */
|
|
@@ -12426,7 +12483,8 @@ var script$9 = {
|
|
|
12426
12483
|
},
|
|
12427
12484
|
data() {
|
|
12428
12485
|
return {
|
|
12429
|
-
innerValue: false
|
|
12486
|
+
innerValue: false,
|
|
12487
|
+
formModel: {}
|
|
12430
12488
|
};
|
|
12431
12489
|
},
|
|
12432
12490
|
inject: {
|
|
@@ -12556,15 +12614,22 @@ var script$9 = {
|
|
|
12556
12614
|
value: {
|
|
12557
12615
|
async handler(value) {
|
|
12558
12616
|
this.innerValue = value;
|
|
12559
|
-
if (value) {
|
|
12560
|
-
await this.preRequestTrigger();
|
|
12561
|
-
await this.infoRequestTrigger();
|
|
12562
|
-
}
|
|
12563
12617
|
},
|
|
12564
12618
|
immediate: true
|
|
12565
12619
|
}
|
|
12566
12620
|
},
|
|
12567
12621
|
methods: {
|
|
12622
|
+
async formMounted(ref) {
|
|
12623
|
+
const {
|
|
12624
|
+
setFormModel
|
|
12625
|
+
} = ref;
|
|
12626
|
+
await this.preRequestTrigger({
|
|
12627
|
+
setFormModel
|
|
12628
|
+
});
|
|
12629
|
+
await this.infoRequestTrigger({
|
|
12630
|
+
setFormModel
|
|
12631
|
+
});
|
|
12632
|
+
},
|
|
12568
12633
|
[BUILT_IN_METHODS_NAMES.CLOSE_MODAL]() {
|
|
12569
12634
|
this.innerValue = false;
|
|
12570
12635
|
this.$emit('change', this.innerValue);
|
|
@@ -12579,6 +12644,7 @@ var script$9 = {
|
|
|
12579
12644
|
} = contxtData;
|
|
12580
12645
|
const ret = parseFieldMap(fieldMap, {
|
|
12581
12646
|
_route: this.$route.query,
|
|
12647
|
+
exposed: exposed,
|
|
12582
12648
|
...exposed,
|
|
12583
12649
|
...dataSource
|
|
12584
12650
|
});
|
|
@@ -12631,8 +12697,11 @@ var script$9 = {
|
|
|
12631
12697
|
});
|
|
12632
12698
|
return ret;
|
|
12633
12699
|
},
|
|
12634
|
-
async infoRequestTrigger(
|
|
12700
|
+
async infoRequestTrigger({
|
|
12701
|
+
setFormModel
|
|
12702
|
+
}) {
|
|
12635
12703
|
if (PAGE_STATUS.CREATE == this.routeMetaMode) return;
|
|
12704
|
+
if (!this.infoRequest) return;
|
|
12636
12705
|
const {
|
|
12637
12706
|
url,
|
|
12638
12707
|
requestType,
|
|
@@ -12651,12 +12720,15 @@ var script$9 = {
|
|
|
12651
12720
|
data = {}
|
|
12652
12721
|
} = resp;
|
|
12653
12722
|
this.setFieldsValue(data);
|
|
12723
|
+
setFormModel(data);
|
|
12654
12724
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, {
|
|
12655
12725
|
...data
|
|
12656
12726
|
});
|
|
12657
12727
|
});
|
|
12658
12728
|
},
|
|
12659
|
-
async preRequestTrigger(
|
|
12729
|
+
async preRequestTrigger({
|
|
12730
|
+
setFormModel
|
|
12731
|
+
}) {
|
|
12660
12732
|
const {
|
|
12661
12733
|
url,
|
|
12662
12734
|
requestType = 'GET',
|
|
@@ -12674,12 +12746,15 @@ var script$9 = {
|
|
|
12674
12746
|
...headers
|
|
12675
12747
|
});
|
|
12676
12748
|
this.setFieldsValue(data);
|
|
12749
|
+
setFormModel(data);
|
|
12677
12750
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, {
|
|
12678
12751
|
...data
|
|
12679
12752
|
});
|
|
12680
12753
|
},
|
|
12681
12754
|
setFieldsValue(props) {
|
|
12682
|
-
this.$
|
|
12755
|
+
this.$nextTick(() => {
|
|
12756
|
+
this.$refs[this.formRef].setFieldsValue(props);
|
|
12757
|
+
});
|
|
12683
12758
|
},
|
|
12684
12759
|
validateFields() {
|
|
12685
12760
|
return this.$refs[this.formRef].validateFields();
|
|
@@ -12725,7 +12800,13 @@ var __vue_render__$9 = function () {
|
|
|
12725
12800
|
},
|
|
12726
12801
|
_vm.assignAttrForEvents
|
|
12727
12802
|
),
|
|
12728
|
-
[
|
|
12803
|
+
[
|
|
12804
|
+
_c("ele-form", {
|
|
12805
|
+
ref: _vm.formRef,
|
|
12806
|
+
attrs: { elements: _vm.elements },
|
|
12807
|
+
on: { "x:mounted": _vm.formMounted },
|
|
12808
|
+
}),
|
|
12809
|
+
],
|
|
12729
12810
|
1
|
|
12730
12811
|
)
|
|
12731
12812
|
};
|
|
@@ -12862,11 +12943,11 @@ __vue_render__$8._withStripped = true;
|
|
|
12862
12943
|
/* style */
|
|
12863
12944
|
const __vue_inject_styles__$8 = function (inject) {
|
|
12864
12945
|
if (!inject) return
|
|
12865
|
-
inject("data-v-
|
|
12946
|
+
inject("data-v-205df81d_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
12866
12947
|
|
|
12867
12948
|
};
|
|
12868
12949
|
/* scoped */
|
|
12869
|
-
const __vue_scope_id__$8 = "data-v-
|
|
12950
|
+
const __vue_scope_id__$8 = "data-v-205df81d";
|
|
12870
12951
|
/* module identifier */
|
|
12871
12952
|
const __vue_module_identifier__$8 = undefined;
|
|
12872
12953
|
/* functional template */
|
|
@@ -13026,12 +13107,12 @@ __vue_render__$7._withStripped = true;
|
|
|
13026
13107
|
/* style */
|
|
13027
13108
|
const __vue_inject_styles__$7 = function (inject) {
|
|
13028
13109
|
if (!inject) return
|
|
13029
|
-
inject("data-v-
|
|
13030
|
-
,inject("data-v-
|
|
13110
|
+
inject("data-v-3cb4e50a_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
13111
|
+
,inject("data-v-3cb4e50a_1", { source: ".ele-modal-confirm__content[data-v-3cb4e50a] {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/modal-confirm/src/index.vue","index.vue"],"names":[],"mappings":"AAiGA;EACA,eAAA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;AChGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal :title=\"title\" :value=\"value\" :size=\"size\" @cancel=\"onCancel\" v-on=\"overrideEvents\" :buttonGroupMeta=\"buttonGroupMeta\">\n <ele-alert v-if=\"alert\" v-bind=\"alert\"></ele-alert>\n <div v-if=\"contentText\" class=\"ele-modal-confirm__content\">\n {{ contentText }}\n </div>\n </ele-modal>\n</template>\n\n<script>\nimport { CONTEXT } from '../../../utils'\nexport default {\n name: 'ele-modal-confirm',\n model: {\n event: 'change',\n prop: 'value'\n },\n props: {\n title: {\n type: String\n },\n size: {\n type: String,\n default: 'small'\n },\n alert: {\n type: [Object, Boolean],\n default: () => ({\n type: 'warning',\n message: '确定要删除吗?',\n description: '删除后将无法恢复',\n closable: false\n })\n },\n contentText: {\n type: String\n },\n value: {\n type: Boolean,\n default: false\n },\n buttonGroupMeta: {\n type: Object\n },\n //!deprecated\n contextProp: {\n type: Object,\n default: () => ({})\n }\n },\n inject: {\n [CONTEXT]: {\n default: () => (() => ({}))\n }\n },\n data () {\n return {}\n },\n computed: {\n currentContext () {\n const { exposed: exposedData = {} } = this[CONTEXT]()\n const exposed = Object.assign({}, exposedData, { closeModalConfirm: this.closeModalConfirm })\n return {\n _route: this.$route.query,\n _routeMeta: this.$route.meta,\n ...this[CONTEXT](),\n exposed\n }\n },\n overrideEvents () {\n if (!this.buttonGroupMeta) return {}\n const { elements = [] } = this.buttonGroupMeta\n const events = elements.reduce((ret, ele) =>{\n ret[ele.eventName || 'click'] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e, ...this.currentContext })\n }\n return ret\n }, {})\n return {\n ...events\n }\n }\n },\n methods: {\n closeModalConfirm () {\n this.$emit('change', false)\n },\n onCancel () {\n this.$emit('change', false)\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../../theme/index';\n</style>\n<style lang=\"scss\" scoped>\n.ele-modal-confirm__content {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n</style>",".ele-modal-confirm__content {\n margin-top: 8px;\n color: var(--idoole-black-088);\n font-size: 14px;\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13031
13112
|
|
|
13032
13113
|
};
|
|
13033
13114
|
/* scoped */
|
|
13034
|
-
const __vue_scope_id__$7 = "data-v-
|
|
13115
|
+
const __vue_scope_id__$7 = "data-v-3cb4e50a";
|
|
13035
13116
|
/* module identifier */
|
|
13036
13117
|
const __vue_module_identifier__$7 = undefined;
|
|
13037
13118
|
/* functional template */
|
|
@@ -13274,11 +13355,11 @@ __vue_render__$6._withStripped = true;
|
|
|
13274
13355
|
/* style */
|
|
13275
13356
|
const __vue_inject_styles__$6 = function (inject) {
|
|
13276
13357
|
if (!inject) return
|
|
13277
|
-
inject("data-v-
|
|
13358
|
+
inject("data-v-491db85f_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
13278
13359
|
|
|
13279
13360
|
};
|
|
13280
13361
|
/* scoped */
|
|
13281
|
-
const __vue_scope_id__$6 = "data-v-
|
|
13362
|
+
const __vue_scope_id__$6 = "data-v-491db85f";
|
|
13282
13363
|
/* module identifier */
|
|
13283
13364
|
const __vue_module_identifier__$6 = undefined;
|
|
13284
13365
|
/* functional template */
|
|
@@ -13326,6 +13407,7 @@ __vue_component__$6.install = Vue => Vue.component(__vue_component__$6.name, __v
|
|
|
13326
13407
|
//
|
|
13327
13408
|
//
|
|
13328
13409
|
//
|
|
13410
|
+
//
|
|
13329
13411
|
|
|
13330
13412
|
var script$5 = {
|
|
13331
13413
|
name: 'ele-form-img-crop',
|
|
@@ -13351,6 +13433,14 @@ var script$5 = {
|
|
|
13351
13433
|
height: {
|
|
13352
13434
|
type: [Number, String],
|
|
13353
13435
|
default: 200
|
|
13436
|
+
},
|
|
13437
|
+
cropperConfig: {
|
|
13438
|
+
type: Object,
|
|
13439
|
+
default: () => {
|
|
13440
|
+
return {
|
|
13441
|
+
aspectRatio: 16 / 9
|
|
13442
|
+
};
|
|
13443
|
+
}
|
|
13354
13444
|
}
|
|
13355
13445
|
},
|
|
13356
13446
|
data() {
|
|
@@ -13428,7 +13518,11 @@ var __vue_render__$5 = function () {
|
|
|
13428
13518
|
),
|
|
13429
13519
|
_vm._v(" "),
|
|
13430
13520
|
_c("ele-modal-img-crop", {
|
|
13431
|
-
attrs: {
|
|
13521
|
+
attrs: {
|
|
13522
|
+
cropperConfig: _vm.cropperConfig,
|
|
13523
|
+
imageId: _vm.value,
|
|
13524
|
+
title: _vm.modalTitle,
|
|
13525
|
+
},
|
|
13432
13526
|
on: { change: _vm.onChangeModalCropImg },
|
|
13433
13527
|
model: {
|
|
13434
13528
|
value: _vm.showModalImgCropValue,
|
|
@@ -13448,11 +13542,11 @@ __vue_render__$5._withStripped = true;
|
|
|
13448
13542
|
/* style */
|
|
13449
13543
|
const __vue_inject_styles__$5 = function (inject) {
|
|
13450
13544
|
if (!inject) return
|
|
13451
|
-
inject("data-v-
|
|
13545
|
+
inject("data-v-5a602a76_0", { source: ".ele__img--form .form__img--wrapper[data-v-5a602a76] {\n cursor: pointer;\n border-radius: 4px;\n background: #000;\n opacity: 0.3;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew[data-v-5a602a76] {\n position: absolute;\n color: red;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper[data-v-5a602a76] {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper[data-v-5a602a76] {\n font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper[data-v-5a602a76] {\n font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/form-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACvFA;ADwFA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACtFA;ADwFA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;ACtFA;ADuFA;EACA,eAAA;ACrFA;ADuFA;EACA,eAAA;ACrFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele__img--form\">\n <div class=\"form__img--wrapper\" \n @click=\"handleClick\" \n :style=\"style\">\n <div class=\"form__img--preivew\" v-if=\"value\">\n <img style=\"width:100%;height:100%\" :src=\"imageUrl\" alt=\"\" srcset=\"\">\n </div>\n <div class=\"form__icon--wrapper\">\n <ele-icon class=\"icon--oper\" type=\"icon-camera\"></ele-icon>\n <span class=\"icon__text--oper\">{{ operText }}</span>\n </div>\n </div>\n <ele-modal-img-crop \n v-model=\"showModalImgCropValue\"\n @change=\"onChangeModalCropImg\"\n :cropperConfig=\"cropperConfig\"\n :imageId=\"value\"\n :title=\"modalTitle\">\n </ele-modal-img-crop>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-form-img-crop',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: [String, Number]\n },\n modalTitle: {\n type: String\n },\n operText: {\n type: String,\n default: '更改头像'\n },\n width: {\n type: [Number, String],\n default: 200\n },\n height: {\n type: [Number, String],\n default: 200\n },\n cropperConfig: {\n type: Object,\n default: () => {\n return {\n aspectRatio: 16 / 9\n }\n }\n }\n },\n data() {\n return {\n showModalImgCropValue: false\n }\n },\n computed: {\n style () {\n return {\n width: this.width + 'px',\n height: this.height + 'px'\n }\n },\n imageUrl () {\n return `/api-file/workbench/file/stream/${this.value}?origin=true`\n }\n },\n methods: {\n handleClick () {\n this.showModalImgCropValue = true\n },\n onChangeModalCropImg (fileId) {\n console.log('fileId', fileId)\n this.$emit('change', fileId)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__img--form {\n .form__img--wrapper {\n cursor: pointer;\n border-radius: 4px;\n background: #000;\n opacity: 0.3;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n position: relative;\n .form__img--preivew {\n position: absolute;\n color: red;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n }\n .form__icon--wrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: #fff;\n .icon--oper {\n font-size: 40px;\n }\n .icon__text--oper {\n font-size: 16px;\n }\n }\n }\n}\n</style>",".ele__img--form .form__img--wrapper {\n cursor: pointer;\n border-radius: 4px;\n background: #000;\n opacity: 0.3;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew {\n position: absolute;\n color: red;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper {\n font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper {\n font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13452
13546
|
|
|
13453
13547
|
};
|
|
13454
13548
|
/* scoped */
|
|
13455
|
-
const __vue_scope_id__$5 = "data-v-
|
|
13549
|
+
const __vue_scope_id__$5 = "data-v-5a602a76";
|
|
13456
13550
|
/* module identifier */
|
|
13457
13551
|
const __vue_module_identifier__$5 = undefined;
|
|
13458
13552
|
/* functional template */
|
|
@@ -13522,11 +13616,12 @@ var script$4 = {
|
|
|
13522
13616
|
watch: {
|
|
13523
13617
|
value: {
|
|
13524
13618
|
handler(innerValue) {
|
|
13619
|
+
const _innerValue = type.isArray(innerValue) ? innerValue : [innerValue];
|
|
13525
13620
|
const {
|
|
13526
13621
|
label,
|
|
13527
13622
|
value
|
|
13528
13623
|
} = this.replaceFields;
|
|
13529
|
-
this.entityValue =
|
|
13624
|
+
this.entityValue = _innerValue.map(item => {
|
|
13530
13625
|
return {
|
|
13531
13626
|
label: item[label],
|
|
13532
13627
|
value: item[value]
|
|
@@ -13580,13 +13675,15 @@ var script$4 = {
|
|
|
13580
13675
|
return this.multiple ? ret : ret[0];
|
|
13581
13676
|
},
|
|
13582
13677
|
emitEntityValue(dataSource = []) {
|
|
13678
|
+
this.emitValue = this.value;
|
|
13583
13679
|
if (this.multiple) {
|
|
13584
13680
|
if (type.isStr(this.returnValues)) {
|
|
13585
|
-
|
|
13681
|
+
const ret = dataSource.map(props => {
|
|
13586
13682
|
return props[this.returnValues];
|
|
13587
13683
|
});
|
|
13684
|
+
this.emitValue.push(...ret);
|
|
13588
13685
|
} else if (type.isObject(this.returnValues)) {
|
|
13589
|
-
this.emitValue
|
|
13686
|
+
this.emitValue.push(...this.buildEntityValueForEmitObjectReturnValues(dataSource));
|
|
13590
13687
|
}
|
|
13591
13688
|
} else {
|
|
13592
13689
|
if (type.isStr(this.returnValues)) {
|
|
@@ -13882,12 +13979,12 @@ __vue_render__$3._withStripped = true;
|
|
|
13882
13979
|
/* style */
|
|
13883
13980
|
const __vue_inject_styles__$3 = function (inject) {
|
|
13884
13981
|
if (!inject) return
|
|
13885
|
-
inject("data-v-
|
|
13886
|
-
,inject("data-v-
|
|
13982
|
+
inject("data-v-202eba99_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
13983
|
+
,inject("data-v-202eba99_1", { source: ".import-download__link[data-v-202eba99] {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint .import-hint__content[data-v-202eba99] {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload[data-v-202eba99] {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right[data-v-202eba99] {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title[data-v-202eba99] {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title[data-v-202eba99] {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text[data-v-202eba99] {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/business-components/modal-import/src/index.vue","index.vue"],"names":[],"mappings":"AAkGA;EACA,4BAAA;EACA,eAAA;EACA,eAAA;EACA,iBAAA;ACjGA;ADoGA;EACA,aAAA;EACA,kBAAA;EACA,YAAA;EACA,wCAAA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACjGA;ADmGA;EACA,eAAA;EACA,4BAAA;ACjGA;ADoGA;EACA,iBAAA;AClGA;ADmGA;EACA,eAAA;EACA,4BAAA;EACA,eAAA;ACjGA;ADmGA;EACA,eAAA;EACA,4BAAA;ACjGA;ADqGA;EACA,eAAA;EACA,4BAAA;EACA,iBAAA;ACnGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal :value=\"innerValue\" :buttonGroupMeta=\"buttonGroupMeta\" @cancel=\"onCancel\" @handleClose=\"handleClose\" title=\"导入\">\n <div class=\"ele-modal-import__upload\" v-if=\"isFileEmpty\">\n <div class=\"import-download__link\" @click=\"handleClickDownloadTpl\">点击此链接下载导入模板</div>\n <ele-upload v-model=\"file\" @on-success=\"uploadFileSuccess\"></ele-upload>\n </div>\n <div v-else class=\"ele-modal-import__hint\">\n <div class=\"import-hint__content\">\n <div class=\"import-hint__left\">\n <ele-icon></ele-icon>\n </div>\n <div class=\"import-hint__right\">\n <div class=\"hint-right__title\" @click=\"handleClickJump\">文件上传成功,任务处理中..... 请点击此按钮跳转到“批处理管理”菜单查看任务进度</div>\n <div class=\"hint-right__sub-title\">批处理任务的准备工作会在后台运行</div>\n </div>\n </div>\n <div class=\"import-footer__hint--text\">\n 您可以请点击上方按钮查看任务进度或关闭弹框\n </div>\n </div>\n </ele-modal>\n</template>\n\n<script>\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-modal-import',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n innerValue: false,\n file: [],\n buttonGroupMeta: {\n elements: [\n {\n label: '关闭',\n key: 'close',\n type: 'default',\n eventName: 'handleClose'\n }\n ]\n }\n }\n },\n computed: {\n isFileEmpty () {\n return type.isEmpty(this.file)\n }\n },\n watch: {\n value: {\n handler (value) {\n this.innerValue = value\n },\n immediate: true\n }\n },\n methods: {\n emitEvent (props = {}) {\n this.$emit('on-actions', { ...props })\n },\n onCancel () {\n this.innerValue = false\n this.$emit('change', false)\n },\n handleClickJump () {\n this.emitEvent({ action: 'jump' })\n },\n uploadFileSuccess (props) {\n this.emitEvent({ action: 'uploaded', file: props })\n },\n handleClickDownloadTpl () {\n this.emitEvent({ action: 'download' })\n },\n cleanFile () {\n this.file = []\n },\n handleClose () {\n this.cleanFile()\n this.innerValue = false\n this.$emit('change', false)\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../../theme/index';\n</style>\n<style lang=\"scss\" scoped>\n.import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n.ele-modal-import__hint {\n .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n .import-hint__left {\n .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n }\n }\n .import-hint__right {\n margin-left: 16px;\n .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n }\n .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n }\n }\n }\n .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n }\n}\n</style>",".import-download__link {\n color: var(--idooel-link-06);\n font-size: 14px;\n cursor: pointer;\n line-height: 22px;\n}\n\n.ele-modal-import__hint .import-hint__content {\n padding: 16px;\n border-radius: 2px;\n height: 82px;\n border: 1px dashed var(--idooel-link-06);\n background: var(--idoole-black-02);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__left .anticon-upload {\n font-size: 48px;\n color: var(--idooel-link-06);\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right {\n margin-left: 16px;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__title {\n font-size: 16px;\n color: var(--idooel-link-06);\n cursor: pointer;\n}\n.ele-modal-import__hint .import-hint__content .import-hint__right .hint-right__sub-title {\n font-size: 14px;\n color: var(--idooel-link-03);\n}\n.ele-modal-import__hint .import-footer__hint--text {\n font-size: 14px;\n color: var(--idooel-link-06);\n line-height: 22px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
13887
13984
|
|
|
13888
13985
|
};
|
|
13889
13986
|
/* scoped */
|
|
13890
|
-
const __vue_scope_id__$3 = "data-v-
|
|
13987
|
+
const __vue_scope_id__$3 = "data-v-202eba99";
|
|
13891
13988
|
/* module identifier */
|
|
13892
13989
|
const __vue_module_identifier__$3 = undefined;
|
|
13893
13990
|
/* functional template */
|
|
@@ -14028,11 +14125,11 @@ __vue_render__$2._withStripped = true;
|
|
|
14028
14125
|
/* style */
|
|
14029
14126
|
const __vue_inject_styles__$2 = function (inject) {
|
|
14030
14127
|
if (!inject) return
|
|
14031
|
-
inject("data-v-
|
|
14128
|
+
inject("data-v-68883d4c_0", { source: "\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":";;AAEA,oCAAoC","file":"index.vue"}, media: undefined });
|
|
14032
14129
|
|
|
14033
14130
|
};
|
|
14034
14131
|
/* scoped */
|
|
14035
|
-
const __vue_scope_id__$2 = "data-v-
|
|
14132
|
+
const __vue_scope_id__$2 = "data-v-68883d4c";
|
|
14036
14133
|
/* module identifier */
|
|
14037
14134
|
const __vue_module_identifier__$2 = undefined;
|
|
14038
14135
|
/* functional template */
|
|
@@ -14241,12 +14338,12 @@ __vue_render__$1._withStripped = true;
|
|
|
14241
14338
|
/* style */
|
|
14242
14339
|
const __vue_inject_styles__$1 = function (inject) {
|
|
14243
14340
|
if (!inject) return
|
|
14244
|
-
inject("data-v-
|
|
14245
|
-
,inject("data-v-
|
|
14341
|
+
inject("data-v-47597df6_0", { source: ".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n.margin-t-8 {\n margin-top: 8px;\n}\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue"],"names":[],"mappings":"AAAA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AACA;EACE,cAAc;AAChB;AAEA;EACE,eAAe;AACjB;AAEA;EACE,+BAA+B;EAC/B,sCAAsC;EACtC,sCAAsC;EACtC,sCAAsC;EACtC,uCAAuC;EACvC,uCAAuC;EACvC,uCAAuC;EACvC,mDAAmD;EACnD,4BAA4B;EAC5B,4BAA4B;EAC5B,0BAA0B;EAC1B,wBAAwB;EACxB,8BAA8B;EAC9B,+BAA+B;EAC/B,qCAAqC;EACrC,gCAAgC;EAChC,4BAA4B;EAC5B,qDAAqD;EACrD,kDAAkD;EAClD,gDAAgD;EAChD,gCAAgC;EAChC,uCAAuC;EACvC,yBAAyB;EACzB,yBAAyB;EACzB,oCAAoC;AACtC;AAEA;EACE,4DAA4D;AAC9D;AAEA;EACE,4DAA4D;AAC9D;;AAEA,oCAAoC","file":"index.vue","sourcesContent":[".has-error .ele-upload__wrapper .ele-upload__inner {\n border-color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__message {\n color: #F5222D;\n}\n.has-error .ele-upload__wrapper .ele-upload__inner .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n color: #FFA39E;\n}\n\n.margin-t-8 {\n margin-top: 8px;\n}\n\n:root {\n --idooel-primary-color: #1890FF;\n --idoole-black-02: rgba(0, 0, 0, 0.04);\n --idoole-black-06: rgba(0, 0, 0, 0.44);\n --idoole-black-07: rgba(0, 0, 0, 0.64);\n --idoole-black-064: rgba(0, 0, 0, 0.64);\n --idoole-black-088: rgba(0, 0, 0, 0.88);\n --idoole-black-016: rgba(0, 0, 0, 0.16);\n --idooel-disabled-border-color: rgba(0, 0, 0, 0.16);\n --idoole-success-06: #52C41A;\n --idoole-warning-06: #FAAD14;\n --idoole-error-06: #F5222D;\n --idooel-border-width: 2;\n --idooel-border-color: #53a8ff;\n --idooel-column-border-width: 1;\n --idooel-column-border-color: #d9ecff;\n --idooel-row-even-color: #F0FAFF;\n --idooel-row-odd-color: #FFF;\n --idooel-form-title-border-color: rgba(0, 0, 0, 0.16);\n --idooel-form-upload-bg-color: rgba(0, 0, 0, 0.02);\n --idooel-form-upload-border-hover-color: #40A9FF;\n --idooel-form-border-radius: 2px;\n --idooel-form-border-err-color: #F5222D;\n --idooel-link-06: #1890FF;\n --idooel-link-03: #91D5FF;\n --idooel-img-crop-err-color: #FFA39E;\n}\n\n.ant-input-disabled {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n.ant-select-disabled .ant-select-selection {\n border-color: var(--idooel-disabled-border-color) !important;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined })
|
|
14342
|
+
,inject("data-v-47597df6_1", { source: ".ele-modal-fsm__display[data-v-47597df6] {\n display: flex;\n flex-direction: row;\n font-size: 14px;\n line-height: 22px;\n}\n.ele-modal-fsm__display .fms-display__name[data-v-47597df6], .ele-modal-fsm__display .fms-display__action[data-v-47597df6] {\n font-weight: bold;\n color: var(--idoole-black-088);\n}\n.ele-modal-fsm__display .fms-display__name[data-v-47597df6]::before, .ele-modal-fsm__display .fms-display__action[data-v-47597df6]::before {\n content: \"\";\n margin-left: 4px;\n}\n.ele-modal-fsm__display .fms-display__name[data-v-47597df6]::after, .ele-modal-fsm__display .fms-display__action[data-v-47597df6]::after {\n content: \"\";\n margin-right: 4px;\n}\n.ele-modal-fsm__display .title-info[data-v-47597df6] {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-fsm__display .title-info[data-v-47597df6]::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-modal-fsm__display .title-info.success[data-v-47597df6]::before {\n background: var(--idoole-success-06);\n}\n.ele-modal-fsm__display .title-info.warning[data-v-47597df6]::before {\n background: var(--idoole-warning-06);\n}\n.ele-modal-fsm__display .title-info.error[data-v-47597df6]::before {\n background: var(--idoole-error-06);\n}\n.ele-modal-fsm__opinion-wrapper[data-v-47597df6] {\n margin-top: 4px;\n line-height: 22px;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n}\n.ele-modal-fsm__opinion-wrapper .fsm-opinion__label[data-v-47597df6] {\n width: 42px;\n flex-shrink: 0;\n color: var(--idoole-black-064);\n}\n.ele-modal-fsm__opinion-wrapper .fsm-opinion__value[data-v-47597df6] {\n color: var(--idoole-black-088);\n font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/business-components/modal-fsm/src/index.vue","index.vue"],"names":[],"mappings":"AAkGA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,iBAAA;ACjGA;ADkGA;EACA,iBAAA;EACA,8BAAA;AChGA;ADiGA;EACA,WAAA;EACA,gBAAA;AC/FA;ADiGA;EACA,WAAA;EACA,iBAAA;AC/FA;ADkGA;EACA,eAAA;EACA,8BAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;AChGA;ADiGA;EACA,WAAA;EACA,qBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;AC/FA;ADkGA;EACA,oCAAA;AChGA;ADoGA;EACA,oCAAA;AClGA;ADsGA;EACA,kCAAA;ACpGA;ADyGA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;ACtGA;ADuGA;EACA,WAAA;EACA,cAAA;EACA,8BAAA;ACrGA;ADuGA;EACA,8BAAA;EACA,iBAAA;ACrGA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <ele-modal v-on=\"$listeners\" :value=\"value\" :title=\"meta.title || title\" @cancel=\"handleCancel\" :buttonGroupMeta=\"buttonGroupMeta\">\n <slot name=\"alert\"></slot>\n <ele-timeline v-bind=\"meta\">\n <template #right=\"{ data: item }\">\n <div class=\"ele-modal-fsm__display\">\n <span>由</span>\n <span class=\"fms-display__name\">{{ item.userName || '管理员' }}</span>\n <span>执行了</span>\n <span class=\"fms-display__action\">{{ item.action || '结班' }}</span>\n <span>操作</span>\n <span :class=\"['title-info', item.state == 1 && 'success', item.state == 2 && 'warning', item.state == 3 && 'error']\">{{ item.stateName }}</span>\n </div>\n <div class=\"ele-modal-fsm__opinion-wrapper\">\n <div class=\"fsm-opinion__label\">意见:</div>\n <div class=\"fsm-opinion__value\">{{ item.opinion }}</div>\n </div>\n </template>\n </ele-timeline>\n <template v-if=\"showTextSlot\" #footer-text>\n <ele-text v-bind=\"textAttrs\"></ele-text>\n </template>\n </ele-modal>\n</template>\n\n<script>\nimport { CONTEXT } from '../../../utils'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-modal-fsm',\n model: {\n prop: 'value',\n event: 'change'\n },\n props: {\n value: {\n type: Boolean,\n default: false\n },\n title: {\n type: String,\n default: '状态变更记录'\n },\n meta: {\n type: Object,\n default: () => ({})\n },\n buttonGroupMeta: {\n type: Object,\n default: () => {\n return {\n elements: [\n {\n label: '关闭',\n key: 'cancel',\n type: 'default',\n eventName: 'cancel'\n }\n ]\n }\n }\n },\n contextProp: {\n type: Object,\n default: () => ({})\n }\n },\n provide() {\n return {\n [CONTEXT]: () => {\n return {\n _route: this.$route.query,\n _routeMeta: this.$route.meta,\n ...this.contextProp\n }\n }\n }\n },\n computed: {\n showTextSlot () {\n return !type.isEmpty(this.textAttrs)\n },\n textAttrs() {\n const { text = {} } = this.buttonGroupMeta\n return text\n }\n },\n methods: {\n handleCancel () {\n this.$emit('change', false)\n }\n }\n}\n</script>\n<style lang=\"scss\">\n@import '../../../theme/index';\n</style>\n<style lang=\"scss\" scoped>\n.ele-modal-fsm__display {\n display: flex;\n flex-direction: row;\n font-size: 14px;\n line-height: 22px;\n .fms-display__name, .fms-display__action {\n font-weight: bold;\n color: var(--idoole-black-088);\n &::before {\n content: '';\n margin-left: 4px;\n }\n &::after {\n content: '';\n margin-right: 4px;\n }\n }\n .title-info {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n &::before {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n }\n &.success {\n &::before {\n background: var(--idoole-success-06);\n }\n }\n &.warning {\n &::before {\n background: var(--idoole-warning-06);\n }\n }\n &.error {\n &::before {\n background: var(--idoole-error-06);\n }\n }\n }\n}\n.ele-modal-fsm__opinion-wrapper {\n margin-top: 4px;\n line-height: 22px;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n .fsm-opinion__label {\n width: 42px;\n flex-shrink: 0;\n color: var(--idoole-black-064);\n }\n .fsm-opinion__value {\n color: var(--idoole-black-088);\n font-weight: bold;\n }\n}\n</style>",".ele-modal-fsm__display {\n display: flex;\n flex-direction: row;\n font-size: 14px;\n line-height: 22px;\n}\n.ele-modal-fsm__display .fms-display__name, .ele-modal-fsm__display .fms-display__action {\n font-weight: bold;\n color: var(--idoole-black-088);\n}\n.ele-modal-fsm__display .fms-display__name::before, .ele-modal-fsm__display .fms-display__action::before {\n content: \"\";\n margin-left: 4px;\n}\n.ele-modal-fsm__display .fms-display__name::after, .ele-modal-fsm__display .fms-display__action::after {\n content: \"\";\n margin-right: 4px;\n}\n.ele-modal-fsm__display .title-info {\n font-size: 14px;\n color: var(--idoole-black-064);\n margin-left: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-modal-fsm__display .title-info::before {\n content: \"\";\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-right: 8px;\n}\n.ele-modal-fsm__display .title-info.success::before {\n background: var(--idoole-success-06);\n}\n.ele-modal-fsm__display .title-info.warning::before {\n background: var(--idoole-warning-06);\n}\n.ele-modal-fsm__display .title-info.error::before {\n background: var(--idoole-error-06);\n}\n\n.ele-modal-fsm__opinion-wrapper {\n margin-top: 4px;\n line-height: 22px;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n}\n.ele-modal-fsm__opinion-wrapper .fsm-opinion__label {\n width: 42px;\n flex-shrink: 0;\n color: var(--idoole-black-064);\n}\n.ele-modal-fsm__opinion-wrapper .fsm-opinion__value {\n color: var(--idoole-black-088);\n font-weight: bold;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
14246
14343
|
|
|
14247
14344
|
};
|
|
14248
14345
|
/* scoped */
|
|
14249
|
-
const __vue_scope_id__$1 = "data-v-
|
|
14346
|
+
const __vue_scope_id__$1 = "data-v-47597df6";
|
|
14250
14347
|
/* module identifier */
|
|
14251
14348
|
const __vue_module_identifier__$1 = undefined;
|
|
14252
14349
|
/* functional template */
|
|
@@ -14404,11 +14501,11 @@ __vue_render__._withStripped = true;
|
|
|
14404
14501
|
/* style */
|
|
14405
14502
|
const __vue_inject_styles__ = function (inject) {
|
|
14406
14503
|
if (!inject) return
|
|
14407
|
-
inject("data-v-
|
|
14504
|
+
inject("data-v-08438d0d_0", { source: ".g-form__tabs[data-v-08438d0d] {\n width: 100%;\n background: #fff;\n display: flex;\n flex-direction: row;\n height: 32px;\n}\n.g-form__tabs .g-form__wrapper[data-v-08438d0d] {\n display: flex;\n flex-direction: row;\n}\n.g-form__tabs .g-form__wrapper.disabled .g-form__item[data-v-08438d0d] {\n cursor: not-allowed;\n border-color: rgba(0, 0, 0, 0.16);\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.24);\n}\n.g-form__tabs .g-form__wrapper .g-form__item[data-v-08438d0d] {\n padding: 0px 16px;\n cursor: pointer;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0.16);\n color: rgba(0, 0, 0, 0.64);\n border-right: unset;\n}\n.g-form__tabs .g-form__wrapper .g-form__item .suffix[data-v-08438d0d] {\n display: flex;\n}\n.g-form__tabs .g-form__wrapper .g-form__item[data-v-08438d0d]:last-child {\n border-right: 1px solid rgba(0, 0, 0, 0.16);\n}\n.g-form__tabs .g-form__wrapper .g-form__item.actived[data-v-08438d0d] {\n border-color: #409eff;\n color: #409eff;\n font-size: 14px;\n}\n.g-form__tabs .g-form__wrapper .g-form__item.actived + .g-form__item[data-v-08438d0d] {\n border-left: 1px solid #409eff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/business-components/tabs-sub-center/src/index.vue","index.vue"],"names":[],"mappings":"AAwEA;EACA,WAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;ACvEA;ADwEA;EACA,aAAA;EACA,mBAAA;ACtEA;ADwEA;EACA,mBAAA;EACA,iCAAA;EACA,+BAAA;EACA,0BAAA;ACtEA;ADyEA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,qCAAA;EACA,0BAAA;EACA,mBAAA;ACvEA;ADwEA;EACA,aAAA;ACtEA;ADwEA;EACA,2CAAA;ACtEA;ADwEA;EACA,qBAAA;EACA,cAAA;EACA,eAAA;ACtEA;ADuEA;EACA,8BAAA;ACrEA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"g-form__tabs\">\n <div :class=\"['g-form__wrapper', disabled && 'disabled']\">\n <div :class=\"['g-form__item', !disabled && (innerActiveKey == props.key) && 'actived']\" @click=\"handleTabClick(props)\" v-for=\"props in dataSource\" :key=\"props.key\">\n <div>{{ props.title }}</div>\n <div v-if=\"isSuffix\" class=\"suffix\">\n <template v-if=\"props.loading\">\n <ele-loading style=\"margin-left:4px;\" :loading=\"props.loading\"></ele-loading>\n </template>\n <div v-else>({{ props.suffix }}人)</div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'ele-tabs-sub-center',\n props: {\n activeKey: {\n type: [String, Number]\n },\n isSuffix: {\n type: Boolean,\n default: false\n },\n disabled: {\n type: Boolean,\n default: false\n },\n dataSource: {\n type: Array\n }\n },\n data () {\n return {\n innerActiveKey: 1\n }\n },\n watch: {\n activeKey: {\n handler (key) {\n this.innerActiveKey = key\n },\n immediate: true\n }\n },\n methods: {\n setLoadingByKey (key, status = true) {\n const target = this.dataSource.find(item => item.key == key)\n this.$set(target, 'loading', status)\n },\n setTitleByKey (key, title) {\n const target = this.dataSource.find(item => item.key == key)\n this.$set(target, 'title', title)\n },\n setSuffixByKey (key, suffix) {\n const target = this.dataSource.find(item => item.key == key)\n this.$set(target, 'suffix', suffix)\n },\n handleTabClick (props) {\n if (this.disabled) return\n const { key } = props\n this.innerActiveKey = key\n this.$emit('on-click', props)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.g-form__tabs {\n width: 100%;\n background: #fff;\n display: flex;\n flex-direction: row;\n height: 32px;\n .g-form__wrapper {\n display: flex;\n flex-direction: row;\n &.disabled {\n .g-form__item {\n cursor: not-allowed;\n border-color: rgba(0, 0, 0, 0.16);\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.24);\n }\n }\n .g-form__item {\n padding: 0px 16px;\n cursor: pointer;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0.16);\n color: rgba(0, 0, 0, 0.64);\n border-right: unset;\n & .suffix {\n display: flex;\n }\n &:last-child {\n border-right: 1px solid rgba(0, 0, 0, 0.16);\n }\n &.actived {\n border-color:#409eff;\n color: #409eff;\n font-size: 14px;\n &+.g-form__item {\n border-left: 1px solid #409eff;\n }\n }\n }\n }\n}\n</style>",".g-form__tabs {\n width: 100%;\n background: #fff;\n display: flex;\n flex-direction: row;\n height: 32px;\n}\n.g-form__tabs .g-form__wrapper {\n display: flex;\n flex-direction: row;\n}\n.g-form__tabs .g-form__wrapper.disabled .g-form__item {\n cursor: not-allowed;\n border-color: rgba(0, 0, 0, 0.16);\n background: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.24);\n}\n.g-form__tabs .g-form__wrapper .g-form__item {\n padding: 0px 16px;\n cursor: pointer;\n font-size: 14px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0.16);\n color: rgba(0, 0, 0, 0.64);\n border-right: unset;\n}\n.g-form__tabs .g-form__wrapper .g-form__item .suffix {\n display: flex;\n}\n.g-form__tabs .g-form__wrapper .g-form__item:last-child {\n border-right: 1px solid rgba(0, 0, 0, 0.16);\n}\n.g-form__tabs .g-form__wrapper .g-form__item.actived {\n border-color: #409eff;\n color: #409eff;\n font-size: 14px;\n}\n.g-form__tabs .g-form__wrapper .g-form__item.actived + .g-form__item {\n border-left: 1px solid #409eff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
14408
14505
|
|
|
14409
14506
|
};
|
|
14410
14507
|
/* scoped */
|
|
14411
|
-
const __vue_scope_id__ = "data-v-
|
|
14508
|
+
const __vue_scope_id__ = "data-v-08438d0d";
|
|
14412
14509
|
/* module identifier */
|
|
14413
14510
|
const __vue_module_identifier__ = undefined;
|
|
14414
14511
|
/* functional template */
|