cloud-web-corejs 1.0.54-dev.7 → 1.0.54-dev.700

package/src/components/xform/form-designer/setting-panel/property-editor/field-date/date-dateLimit-editor.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-form-item label="关联开始字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitStartField"
+        filterable
+        clearable
+        placeholder="不能小于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitStartField"
+        placeholder="请输入开始字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="关联结束字段">
+      <el-select
+        v-if="dateFieldOptions.length"
+        v-model="optionModel.limitEndField"
+        filterable
+        clearable
+        placeholder="不能大于该字段值"
+      >
+        <el-option
+          v-for="item in dateFieldOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-input
+        v-else
+        v-model="optionModel.limitEndField"
+        placeholder="请输入结束字段属性名"
+        clearable
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="最小日期">
+      <el-date-picker
+        v-model="optionModel.minDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+    <el-form-item label="最大日期">
+      <el-date-picker
+        v-model="optionModel.maxDate"
+        :type="pickerType"
+        :format="optionModel.format"
+        :value-format="optionModel.valueFormat"
+        style="width: 100%"
+        clearable
+        placeholder="留空则不限制"
+      ></el-date-picker>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+import { loopHandleWidget } from "../../../../../../components/xform/utils/util";
+
+export default {
+  name: "date-dateLimit-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    tableColumns: Array,
+  },
+  computed: {
+    pickerType() {
+      return this.optionModel.type || "date";
+    },
+    currentFieldKey() {
+      return this.getFieldKeyByOptions(this.optionModel);
+    },
+    dateFieldOptions() {
+      let options = [];
+      if (this.tableColumns && this.tableColumns.length) {
+        this.collectDateFieldsFromColumns(this.tableColumns, options);
+      } else if (this.designer && this.designer.widgetList) {
+        loopHandleWidget(this.designer.widgetList, (widget) => {
+          if (widget.type !== "date" || widget.id === this.selectedWidget.id) {
+            return;
+          }
+          let fieldKey = this.getFieldKeyByOptions(widget.options);
+          if (fieldKey && fieldKey !== this.currentFieldKey) {
+            options.push({
+              value: fieldKey,
+              label: widget.options.label || fieldKey,
+            });
+          }
+        });
+      }
+      return options;
+    },
+  },
+  methods: {
+    getFieldKeyByOptions(options) {
+      if (!options) {
+        return "";
+      }
+      return (options.keyNameEnabled && options.keyName) || options.name || "";
+    },
+    collectDateFieldsFromColumns(columns, options) {
+      columns.forEach((col) => {
+        if (col.children && col.children.length) {
+          this.collectDateFieldsFromColumns(col.children, options);
+          return;
+        }
+        if (!this.isDateColumn(col)) {
+          return;
+        }
+        let fieldKey = col.prop;
+        if (col.columnOption) {
+          fieldKey = this.getFieldKeyByOptions(col.columnOption) || fieldKey;
+        }
+        if (col.editColumnOption) {
+          fieldKey =
+            this.getFieldKeyByOptions(col.editColumnOption) || fieldKey;
+        }
+        if (fieldKey && fieldKey !== this.currentFieldKey) {
+          options.push({
+            value: fieldKey,
+            label: col.label || fieldKey,
+          });
+        }
+      });
+    },
+    isDateColumn(col) {
+      return (
+        col.formatS === "date" ||
+        col.formatS === "editDate" ||
+        col.editFormatS === "editDate" ||
+        col.widget?.type === "date" ||
+        col.editWidget?.type === "date"
+      );
+    },
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultTime-editor.vue

@@ -0,0 +1,27 @@
+<template>
+
+  <el-form-item :label="i18nt('默认时间')">
+    <el-time-picker v-model="optionModel.defaultTime" is-range @change="emitDefaultValueChange"
+                    format="HH:mm:ss" value-format="HH:mm:ss" style="width: 100%">
+    </el-time-picker>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../utils/i18n"
+import propertyMixin from "../propertyMixin"
+
+export default {
+  name: "date-range-defaultTime-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-dropdown-menu/dropdown-item-editor.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+
+  </div>
+</template>
+<script>
+import i18n from "@base/components/xform/utils/i18n";
+
+export default {
+  name: "dropdown-menu-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+}
+</script>
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-dropdown-menu/dropdown-menu-editor.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
+    <el-form-item label-width="0" class="panes-setting">
+      <draggable tag="ul" :list="selectedWidget.widgetList"
+                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
+        <li v-for="(tpItem, tpIdx) in selectedWidget.widgetList" :key="tpIdx" class="col-item">
+          <el-input type="text" v-model="tpItem.options.label" style="width:calc(100% - 65px) !important;"></el-input>
+          <i class="el-icon-s-operation drag-option"></i>
+          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
+                     icon="el-icon-minus" class="col-delete-button"></el-button>
+        </li>
+        <div>
+          <el-button type="text" @click="addTabPane(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">{{i18nt('designer.setting.addTabPane')}}</el-button>
+        </div>
+      </draggable>
+    </el-form-item>
+  </div>
+</template>
+<script>
+import i18n from "@base/components/xform/utils/i18n";
+import Draggable from 'vuedraggable'
+import {deepClone} from "../../../../../../components/xform/utils/util";
+
+export default {
+  name: "dropdown-menu-editor",
+  components: {Draggable},
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  methods: {
+    onTabPaneActiveChange(evt, tpItem) {
+      //TODO: !!!
+    },
+
+    addTabPane(curTabs) {
+      this.designer.addDropdownItem(curTabs)
+      this.designer.emitHistoryChange()
+    },
+
+    deleteTabPane(curTabs, tpIdx) {
+      if (curTabs.widgetList.length === 1) {
+        this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
+        return
+      }
+
+      this.designer.deleteDropdownItem(curTabs, tpIdx)
+      this.designer.emitHistoryChange()
+    },
+
+  }
+}
+</script>
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-echart/echart-bar-editor.vue

@@ -1,42 +1,69 @@
 <template>
   <div>
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarBarOption.backgroundColor"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('竖展示')"><el-switch v-model="alignX"></el-switch></el-form-item>
-<!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
-    <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
-      <el-input
-        class="search-input"
-        max="200"
-        v-model="optionModel.accessName"
-        @clear="
-		  optionModel.accessCode = '';
-          $forceUpdate();
-        "
-        v-el-readonly
-        clearable
-      >
-        <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
-      </el-input>
-    </el-form-item>-->
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">柱体设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('最大宽度')"><el-slider v-model="barMaxWidth"></el-slider></el-form-item>
-    <el-form-item :label="i18nt('圆角')"><el-slider v-model="barBorderRadius"></el-slider></el-form-item>
-    <el-form-item :label="i18nt('最小高度')"><el-slider v-model="barMinHeight"></el-slider></el-form-item>
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.backgroundColor"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('竖展示')">
+      <el-switch v-model="alignX"></el-switch>
+    </el-form-item>
+    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item>
+        <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
+          <el-input
+            class="search-input"
+            max="200"
+            v-model="optionModel.accessName"
+            @clear="
+          optionModel.accessCode = '';
+              $forceUpdate();
+            "
+            v-el-readonly
+            clearable
+          >
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog = true"></i>
+          </el-input>
+        </el-form-item>-->
+    <el-form-item label="自定义图表配置" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('echartConfig', ['dataId', 'formCode'])">
+        <span>{{ optionModel.echartConfig }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">柱体设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('最大宽度')">
+      <el-slider v-model="barMaxWidth"></el-slider>
+    </el-form-item>
+    <el-form-item :label="i18nt('圆角')">
+      <el-slider v-model="barBorderRadius"></el-slider>
+    </el-form-item>
+    <el-form-item :label="i18nt('最小高度')">
+      <el-slider v-model="barMinHeight"></el-slider>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">标题设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示标题')"><el-switch v-model="optionModel.echarBarOption.title.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('标题')"><el-input v-model="optionModel.echarBarOption.title.text"></el-input></el-form-item>
-   <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.textStyle.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('字体粗细')">
-      <el-select v-model="optionModel.echarBarOption.title.textStyle.fontWeight">
-        <el-option label="正常" value="normal"></el-option>
-        <el-option label="粗体" value="bold"></el-option>
-        <el-option label="特粗体" value="bolder"></el-option>
-        <el-option label="细体" value="lighter"></el-option>
-      </el-select>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">标题设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示标题')">
+      <el-switch v-model="optionModel.echarBarOption.title.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('标题')">
+      <el-input v-model="optionModel.echarBarOption.title.text"></el-input>
+    </el-form-item>
+    <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.textStyle.color"></el-color-picker></el-form-item>
+     <el-form-item :label="i18nt('字体粗细')">
+       <el-select v-model="optionModel.echarBarOption.title.textStyle.fontWeight">
+         <el-option label="正常" value="normal"></el-option>
+         <el-option label="粗体" value="bold"></el-option>
+         <el-option label="特粗体" value="bolder"></el-option>
+         <el-option label="细体" value="lighter"></el-option>
+       </el-select>
+     </el-form-item>
+     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.title.textStyle.fontSize"></base-input-number></el-form-item> -->
+    <el-form-item :label="i18nt('背景颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.title.backgroundColor"></el-color-picker>
     </el-form-item>
-    <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.title.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('背景颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.backgroundColor"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体位置')">
       <el-select v-model="optionModel.echarBarOption.title.left">
         <el-option label="居中" value="center"></el-option>
@@ -44,7 +71,9 @@
         <el-option label="右对齐" value="right"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item :label="i18nt('副标题')"><el-input v-model="optionModel.echarBarOption.title.subtext"></el-input></el-form-item>
+    <el-form-item :label="i18nt('副标题')">
+      <el-input v-model="optionModel.echarBarOption.title.subtext"></el-input>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体颜色')"><el-color-picker v-model="optionModel.echarBarOption.title.subtextStyle.color"></el-color-picker></el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarBarOption.title.subtextStyle.fontWeight">
@@ -56,40 +85,96 @@
     </el-form-item>
     <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.title.subtextStyle.fontSize"></base-input-number></el-form-item> -->
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">X轴设置</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示')"><el-switch v-model="optionModel.echarBarOption.xAxis.show"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('坐标名')"><el-input v-model="optionModel.echarBarOption.xAxis.name"></el-input></el-form-item>
-    <el-form-item :label="i18nt('坐标名颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.nameTextStyle.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('坐标字号')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.xAxis.nameTextStyle.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('数值颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.axisLabel.color"></el-color-picker></el-form-item>
-    <el-form-item :label="i18nt('数值字号')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.xAxis.axisLabel.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('数值角度')"><el-slider v-model="optionModel.echarBarOption.xAxis.axisLabel.rotate"></el-slider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">X轴设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示')">
+      <el-switch v-model="optionModel.echarBarOption.xAxis.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名')">
+      <el-input v-model="optionModel.echarBarOption.xAxis.name"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.xAxis.nameTextStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarBarOption.xAxis.nameTextStyle.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.xAxis.axisLabel.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值字号')">
+      <base-input-number :scale="0" v-model="optionModel.echarBarOption.xAxis.axisLabel.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值角度')">
+      <el-slider v-model="optionModel.echarBarOption.xAxis.axisLabel.rotate"></el-slider>
+    </el-form-item>
 
-    <el-form-item :label="i18nt('轴反转')"><el-switch v-model="optionModel.echarBarOption.xAxis.inverse"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('轴反转')">
+      <el-switch v-model="optionModel.echarBarOption.xAxis.inverse"></el-switch>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('轴颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.axisLine.lineStyle.color"></el-color-picker></el-form-item> -->
-    <el-form-item :label="i18nt('分割线显示')"><el-switch v-model="optionModel.echarBarOption.xAxis.splitLine.show"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('分割线显示')">
+      <el-switch v-model="optionModel.echarBarOption.xAxis.splitLine.show"></el-switch>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('分割线颜色')"><el-color-picker v-model="optionModel.echarBarOption.xAxis.splitLine.lineStyle.color"></el-color-picker></el-form-item> -->
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">Y轴设置</el-divider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">Y轴设置</el-divider>
+    </el-form-item>
 
-    <el-form-item :label="i18nt('显示')"><el-switch v-model="optionModel.echarBarOption.yAxis.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('坐标名')"><el-input v-model="optionModel.echarBarOption.yAxis.name"></el-input></el-form-item>
-        <el-form-item :label="i18nt('坐标名颜色')"><el-color-picker v-model="optionModel.echarBarOption.yAxis.nameTextStyle.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('坐标字号')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.yAxis.nameTextStyle.fontSize"></base-input-number></el-form-item>
-        <el-form-item :label="i18nt('数值颜色')"><el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLabel.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('数值字号')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.yAxis.axisLabel.fontSize"></base-input-number></el-form-item>
-        <el-form-item :label="i18nt('数值角度')"><el-slider v-model="optionModel.echarBarOption.yAxis.axisLabel.rotate"></el-slider></el-form-item>
+    <el-form-item :label="i18nt('显示')">
+      <el-switch v-model="optionModel.echarBarOption.yAxis.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名')">
+      <el-input v-model="optionModel.echarBarOption.yAxis.name"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标名颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.yAxis.nameTextStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('坐标字号')">
+      <base-input-number :scale="0"
+                         v-model="optionModel.echarBarOption.yAxis.nameTextStyle.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLabel.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值字号')">
+      <base-input-number :scale="0" v-model="optionModel.echarBarOption.yAxis.axisLabel.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('数值角度')">
+      <el-slider v-model="optionModel.echarBarOption.yAxis.axisLabel.rotate"></el-slider>
+    </el-form-item>
 
-        <el-form-item :label="i18nt('轴显示')"><el-switch v-model="optionModel.echarBarOption.yAxis.axisLine.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('轴反转')"><el-switch v-model="optionModel.echarBarOption.yAxis.inverse"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('轴颜色')"><el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLine.lineStyle.color"></el-color-picker></el-form-item>
-        <el-form-item :label="i18nt('分割线显示')"><el-switch v-model="optionModel.echarBarOption.yAxis.splitLine.show"></el-switch></el-form-item>
-        <el-form-item :label="i18nt('分割线颜色')"><el-color-picker v-model="optionModel.echarBarOption.yAxis.splitLine.lineStyle.color"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('轴显示')">
+      <el-switch v-model="optionModel.echarBarOption.yAxis.axisLine.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('轴反转')">
+      <el-switch v-model="optionModel.echarBarOption.yAxis.inverse"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('轴颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.yAxis.axisLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线显示')">
+      <el-switch v-model="optionModel.echarBarOption.yAxis.splitLine.show"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('分割线颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.yAxis.splitLine.lineStyle.color"></el-color-picker>
+    </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">数值设定</el-divider></el-form-item>
-    <el-form-item :label="i18nt('显示数值')"><el-switch v-model="showSeriesLabel"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.series[0].label.fontSize"></base-input-number></el-form-item>
-    <el-form-item :label="i18nt('颜色')"><el-color-picker v-model="optionModel.echarBarOption.series[0].label.color"></el-color-picker></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">数值设定</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('显示数值')">
+      <el-switch v-model="showSeriesLabel"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('字体大小')">
+      <base-input-number :scale="0" v-model="optionModel.echarBarOption.series[0].label.fontSize"></base-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.series[0].label.color"></el-color-picker>
+    </el-form-item>
     <el-form-item :label="i18nt('字体粗细')">
       <el-select v-model="optionModel.echarBarOption.series[0].label.fontWeight">
         <el-option label="正常" value="normal"></el-option>
@@ -99,14 +184,36 @@
       </el-select>
     </el-form-item>
 
-    <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">提示语设置</el-divider></el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">提示语设置</el-divider>
+    </el-form-item>
     <!-- <el-form-item :label="i18nt('字体大小')"><base-input-number :scale="0" v-model="optionModel.echarBarOption.tooltip.textStyle.fontSize"></base-input-number></el-form-item> -->
-    <el-form-item :label="i18nt('网格线颜色')"><el-color-picker v-model="optionModel.echarBarOption.tooltip.borderColor"></el-color-picker></el-form-item>
+    <el-form-item :label="i18nt('网格线颜色')">
+      <el-color-picker v-model="optionModel.echarBarOption.tooltip.borderColor"></el-color-picker>
+    </el-form-item>
 
     <!-- <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">坐标轴边距设置</el-divider></el-form-item>
 
     <el-form-item label-width="0"><el-divider class="custom-divider-margin-top">渐变色</el-divider></el-form-item>-->
 
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">自定义配色</el-divider>
+    </el-form-item>
+    <draggable tag="ul" class="draggable-box" :list="optionModel.echarBarOption.colors"
+               v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
+      <li v-for="(colorItem, index) in optionModel.echarBarOption.colors" :key="index">
+        <i class="el-icon-s-operation"></i>
+        <el-color-picker v-model="optionModel.echarBarOption.colors[index]"></el-color-picker>
+        <!-- {{colorItem}} -->
+        <el-button circle plain size="mini" type="danger" @click="deleteColor(index)" icon="el-icon-minus"
+                   class="col-delete-button"></el-button>
+      </li>
+    </draggable>
+    <el-button type="text" @click="addColor" icon="el-icon-circle-plus-outline" class="add-option">{{
+        i18nt('新增配色')
+      }}
+    </el-button>
+
     <requestaccessDialog
       v-if="showRequestaccessDialog"
       :visiable.sync="showRequestaccessDialog"
@@ -119,13 +226,15 @@
 
 <script>
 import i18n from '../../../../../../components/xform/utils/i18n';
-import { deepClone } from '../../../../../../components/xform/utils/util';
+import {deepClone} from '../../../../../../components/xform/utils/util';
 import Draggable from 'vuedraggable';
 import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue';
+import eventMixin
+  from "@base/components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
 
 export default {
   name: 'echart-bar-editor',
-  mixins: [i18n],
+  mixins: [eventMixin, i18n],
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -137,7 +246,7 @@ export default {
     requestaccessDialog
   },
   computed: {
-    reportTemplate: function() {
+    reportTemplate: function () {
       return this.getReportTemplate();
     },
     nameSet: {
@@ -243,8 +352,15 @@ export default {
       if (rows.length) {
         let row = rows[0];
         this.optionModel.accessName = row.accessName;
-		this.optionModel.accessCode = row.accessCode;
+        this.optionModel.accessCode = row.accessCode;
       }
+    },
+    addColor() {
+      if(!this.optionModel.echarBarOption.colors)this.$set(this.optionModel.echarBarOption,'colors',[]);
+      this.optionModel.echarBarOption.colors.push('');
+    },
+    deleteColor(index) {
+      this.optionModel.echarBarOption.colors.splice(index, 1);
     }
   }
 };