From 3ec8a4f6a1359d66280f860099f0d8236dc9dd08 Mon Sep 17 00:00:00 2001 From: qianlishi Date: Tue, 10 Jan 2023 13:54:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0select?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/AnjiPlus/anji-select.vue | 46 ++--- .../bigscreenDesigner/designer/index.vue | 4 + .../configure/barCharts/widget-barchart.js | 26 +-- .../tools/configure/form/widget-select.js | 160 ++++++++++++++++++ .../bigscreenDesigner/designer/tools/main.js | 6 +- .../designer/widget/form/widgetSelect.vue | 87 ++++++++++ .../designer/widget/temp.vue | 18 +- .../designer/widget/widget.vue | 53 ++++-- 8 files changed, 337 insertions(+), 63 deletions(-) create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue diff --git a/report-ui/src/components/AnjiPlus/anji-select.vue b/report-ui/src/components/AnjiPlus/anji-select.vue index 86d44cd5..2afb38a5 100644 --- a/report-ui/src/components/AnjiPlus/anji-select.vue +++ b/report-ui/src/components/AnjiPlus/anji-select.vue @@ -68,62 +68,62 @@ export default { url: null, allowCreate: { type: Boolean, - default: false + default: false, }, method: { type: String, - default: "get" + default: "get", }, queryParam: { type: Object, default: () => { return {}; - } + }, }, value: null, placeholder: null, label: { type: String, - default: "text" + default: "text", }, option: { type: String, - default: "id" + default: "id", }, multiple: null, localOptions: null, disabled: null, clearable: { type: Boolean, - default: true + default: true, }, collapseTags: { type: Boolean, - default: false + default: false, }, mergeLabel: { type: Boolean, - default: true + default: true, }, // 禁用的下拉选项 disabledOptions: { type: String, default: () => { return ""; - } + }, }, // 使用远程搜索 remoteFilter: { type: Boolean, - default: false - } + default: false, + }, }, data() { return { options: null, selectValue: null, // 如果是分页的， - totalPage: 0 + totalPage: 0, }; }, computed: { @@ -146,7 +146,7 @@ export default { return `/meta/gaeaDict/select/${this.dictCode}`; } return null; - } + }, }, watch: { dictCode(val) { @@ -181,13 +181,13 @@ export default { } } }, - immediate: true + immediate: true, }, url() { setTimeout(() => { this.queryData(); }, 500); - } + }, }, created() { if (this.multiple != null) { @@ -225,7 +225,7 @@ export default { this.$emit("input", value); // 根据当前值，找出对应的选项 - let optionItem = this.options.find(item => item[this.option] == value); + let optionItem = this.options.find((item) => item[this.option] == value); this.$emit("change", value, optionItem); }, // 根据用户配置的label，生成对应的标签 @@ -257,7 +257,7 @@ export default { options.push({ id: dictItem.id.toString(), text: dictItem.text, - extend: dictItem.extend + extend: dictItem.extend, }); } return options; @@ -291,8 +291,8 @@ export default { request({ url: this.requestUrl, headers: { noPrompt: true }, - params: param - }).then(response => { + params: param, + }).then((response) => { this.setOptions(response.data); }); }, @@ -305,8 +305,8 @@ export default { url: this.requestUrl, method: "post", headers: { noPrompt: true }, - data: param - }).then(response => { + data: param, + }).then((response) => { this.setOptions(response.data); }); }, @@ -343,8 +343,8 @@ export default { this.queryDataByGet(keyword); } }, 200); - } - } + }, + }, }; \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue index b9507f6b..eb6733ce 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -6,7 +6,7 @@ !--> @@ -41,6 +41,7 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetRadar from "./radar/widgetRadar"; import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; +import widgetSelect from "./form/widgetSelect"; export default { name: "WidgetTemp", @@ -74,26 +75,25 @@ export default { widgetWordCloud, widgetHeatmap, widgetRadar, - widgetBarLineStackChart + widgetBarLineStackChart, + widgetSelect, }, model: { prop: "value", - event: "input" + event: "input", }, props: { type: String, value: { type: [Object], - default: () => { - } - } + default: () => {}, + }, }, data() { return {}; }, - mounted() { - }, - methods: {} + mounted() {}, + methods: {}, }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index 621830d4..8d3ec7a9 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -52,6 +52,7 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetRadar from "./radar/widgetRadar"; import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; +import widgetSelect from "./form/widgetSelect"; export default { name: "Widget", @@ -85,11 +86,12 @@ export default { widgetWordCloud, widgetHeatmap, widgetRadar, - widgetBarLineStackChart + widgetBarLineStackChart, + widgetSelect, }, model: { prop: "value", - event: "input" + event: "input", }, props: { /* @@ -101,9 +103,9 @@ export default { bigscreen: Object, value: { type: [Object], - default: () => {} + default: () => {}, }, - step: Number + step: Number, }, data() { return { @@ -111,9 +113,9 @@ export default { setup: {}, data: {}, position: {}, -/* leftMargin: null, + /* leftMargin: null, topMargin: null*/ - } + }, }; }, computed: { @@ -124,14 +126,14 @@ export default { return this.value.position.height; }, widgetsLeft() { - return this.value.position.left// >= this.leftMargin ? this.leftMargin : this.value.position.left; + return this.value.position.left; // >= this.leftMargin ? this.leftMargin : this.value.position.left; }, widgetsTop() { - return this.value.position.top// >= this.topMargin ? this.topMargin : this.value.position.top; + return this.value.position.top; // >= this.topMargin ? this.topMargin : this.value.position.top; }, widgetsZIndex() { return this.value.position.zIndex || 1; - } + }, }, mounted() {}, methods: { @@ -146,23 +148,42 @@ export default { // 计算workbench的X轴边界值 // 组件距离左侧宽度 + 组件宽度 > 大屏总宽度时，右侧边界值 = (大屏宽度 - 组件宽度)；左侧边界值 = 0 const { bigscreenWidth, bigscreenHeight } = this.bigscreen; - const xBoundaryValue = (left + width) > bigscreenWidth ? bigscreenWidth - width : left < 0 ? 0 : left; + const xBoundaryValue = + left + width > bigscreenWidth + ? bigscreenWidth - width + : left < 0 + ? 0 + : left; // 初始化X轴边界值 this.leftMargin = left; // 计算Y轴边界值 - const yBoundaryValue = (top + height) > bigscreenHeight ? bigscreenHeight - height : top < 0 ? 0 : top; + const yBoundaryValue = + top + height > bigscreenHeight + ? bigscreenHeight - height + : top < 0 + ? 0 + : top; // 初始化Y轴边界值 this.topMargin = top; // 若位置超出边界值则重新设置位置 - if (this.leftMargin != xBoundaryValue || this.topMargin != yBoundaryValue) { + if ( + this.leftMargin != xBoundaryValue || + this.topMargin != yBoundaryValue + ) { this.$nextTick(() => { this.leftMargin = xBoundaryValue; this.topMargin = yBoundaryValue; - this.$emit("onActivated", { index, left: xBoundaryValue, top: yBoundaryValue, width, height }); - }) + this.$emit("onActivated", { + index, + left: xBoundaryValue, + top: yBoundaryValue, + width, + height, + }); + }); } - } - } + }, + }, };