cloud-web-corejs 1.0.54-dev.800 → 1.0.54-dev.802

package/src/components/xform/form-designer/form-widget/field-widget/mixins/relativeDateUtil.js

@@ -0,0 +1,321 @@
+/**
+ * 日期/时间组件「相对默认值」的统一求值器（date、date-range、time、time-range 共用）。
+ *
+ * 描述符 { offset, unit, align }：先按 offset 平移 unit，再按 align 对齐到该单位的起/止。
+ *   {offset: 0,  unit: 'day'}                  → 今天
+ *   {offset: 7,  unit: 'day'}                  → 7天后
+ *   {offset: -1, unit: 'month', align: 'start'} → 上月1号
+ *   {offset: -1, unit: 'month', align: 'end'}   → 上月最后一天
+ *
+ * 老配置 defaultValueType='now'（date/time 的「当前时间」勾选）在此读时归一为 {offset:0}，
+ * 不改存量表单 JSON，也不做数据迁移。
+ */
+import moment from "moment";
+
+export const DEFAULT_VALUE_TYPE_NOW = "now";
+export const DEFAULT_VALUE_TYPE_RELATIVE = "relative";
+
+/* 日期类单位：date/date-range 可用 */
+export const DATE_UNITS = ["day", "week", "month", "quarter", "year"];
+/* 时间类单位：time/time-range 可用，date 组件在 datetime 类型下也可用 */
+export const TIME_UNITS = ["hour", "minute", "second"];
+export const ALIGN_TYPES = ["none", "start", "end"];
+
+export const KIND_DATE = "date";
+export const KIND_TIME = "time";
+
+const RANGE_WIDGET_TYPES = ["date-range", "time-range"];
+const TIME_WIDGET_TYPES = ["time", "time-range"];
+
+/* el-time-picker 的 value-format 在组件里写死为 HH:mm:ss */
+const TIME_VALUE_FORMAT = "HH:mm:ss";
+
+const UNIT_LABELS = {
+  day: "天",
+  week: "周",
+  month: "月",
+  quarter: "季",
+  year: "年",
+  hour: "小时",
+  minute: "分钟",
+  second: "秒",
+};
+
+/** @returns {String} 组件类型对应的求值口径：time/time-range 为时间类，其余按日期类 */
+export function getRelativeKind(widgetType) {
+  return TIME_WIDGET_TYPES.includes(widgetType) ? KIND_TIME : KIND_DATE;
+}
+
+/** @returns {Boolean} 是否范围组件（值为长度 2 的数组） */
+export function isRangeWidgetType(widgetType) {
+  return RANGE_WIDGET_TYPES.includes(widgetType);
+}
+
+/** @returns {Array} 该口径下可选的单位；日期类额外放开时分秒（datetime 类型要用） */
+export function getAvailableUnits(kind) {
+  return kind === KIND_TIME ? [...TIME_UNITS] : [...DATE_UNITS, ...TIME_UNITS];
+}
+
+export function getUnitLabel(unit) {
+  return UNIT_LABELS[unit] || unit;
+}
+
+/** @returns {Boolean} 该单位是否为时间类（时/分/秒） */
+export function isTimeUnit(unit) {
+  return TIME_UNITS.includes(unit);
+}
+
+/**
+ * 描述符补全：offset 取整、unit/align 落到白名单内。
+ * @param {Object} descriptor 原始描述符，可为 null
+ * @param {String} kind KIND_DATE / KIND_TIME
+ * @returns {Object} { offset, unit, align }
+ */
+export function normalizeRelativeDescriptor(descriptor, kind = KIND_DATE) {
+  const source
+    = descriptor && typeof descriptor === "object" ? descriptor : {};
+  const units = getAvailableUnits(kind);
+  const offset = Number(source.offset);
+  const unit = units.includes(source.unit)
+    ? source.unit
+    : kind === KIND_TIME
+    ? "hour"
+    : "day";
+  const align = ALIGN_TYPES.includes(source.align) ? source.align : "none";
+  return {
+    offset: Number.isFinite(offset) ? Math.trunc(offset) : 0,
+    unit,
+    align,
+  };
+}
+
+/** 范围描述符补全，两端各自独立 */
+export function normalizeRelativeRangeDescriptor(descriptor, kind = KIND_DATE) {
+  const source
+    = descriptor && typeof descriptor === "object" ? descriptor : {};
+  return {
+    start: normalizeRelativeDescriptor(source.start, kind),
+    end: normalizeRelativeDescriptor(source.end, kind),
+  };
+}
+
+/* 周的起止按 ISO 周算（周一为一周之始）：moment 未加载中文语言包，
+   startOf('week') 会按 en 口径落到周日，与国内习惯不符 */
+function getAlignUnit(unit) {
+  return unit === "week" ? "isoWeek" : unit;
+}
+
+/**
+ * element 的 format/value-format 转 moment 格式。
+ * 只有 y（年）和 d（日）两族记号不同，M/H/m/s/A 两边一致。
+ */
+export function toMomentFormat(elFormat) {
+  const tokenMap = { yyyy: "YYYY", yy: "YY", dd: "DD", d: "D" };
+  return String(elFormat).replace(
+    /yyyy|yy|dd|d/g,
+    (token) => tokenMap[token]
+  );
+}
+
+/** @returns {Boolean} 该组件的值是否带时分秒 */
+export function hasTimePart(type, valueFormat) {
+  if (String(type || "").indexOf("datetime") > -1) {
+    return true;
+  }
+  return /[Hhms]/.test(String(valueFormat || ""));
+}
+
+/** "HH:mm:ss" → 把时分秒盖到 moment 实例上；解析不出来就原样返回 */
+function applyTimeOfDay(momentValue, timeText) {
+  const matched = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/.exec(
+    String(timeText || "").trim()
+  );
+  if (!matched) {
+    return momentValue;
+  }
+  return momentValue.set({
+    hour: Number(matched[1]),
+    minute: Number(matched[2]),
+    second: Number(matched[3] || 0),
+    millisecond: 0,
+  });
+}
+
+/**
+ * 求出描述符对应的时刻。
+ * @param {Object} descriptor 描述符
+ * @param {Object} config { kind, baseDate }
+ */
+export function resolveRelativeMoment(descriptor, config = {}) {
+  const kind = config.kind || KIND_DATE;
+  const { offset, unit, align } = normalizeRelativeDescriptor(
+    descriptor,
+    kind
+  );
+  const momentValue = config.baseDate ? moment(config.baseDate) : moment();
+  if (offset) {
+    momentValue.add(offset, unit);
+  }
+  if (align === "start") {
+    momentValue.startOf(getAlignUnit(unit));
+  } else if (align === "end") {
+    momentValue.endOf(getAlignUnit(unit));
+  }
+  return momentValue;
+}
+
+/**
+ * 按组件的取值格式输出。
+ * time 类固定 HH:mm:ss；date 类 valueFormat 为空时 picker 的值是 Date 对象。
+ */
+export function formatRelativeMoment(momentValue, config = {}) {
+  if ((config.kind || KIND_DATE) === KIND_TIME) {
+    return momentValue.format(TIME_VALUE_FORMAT);
+  }
+  const valueFormat = config.valueFormat;
+  if (!valueFormat) {
+    return momentValue.toDate();
+  }
+  if (valueFormat === "timestamp") {
+    return momentValue.valueOf();
+  }
+  return momentValue.format(toMomentFormat(valueFormat));
+}
+
+/*
+ * 时分秒口径：单位是日期类（天及以上）时，端点时刻取 defaultTime（起 00:00:00 / 止 23:59:59），
+ * 保证「当前到+7天」是整天区间，between 查询不会漏掉首尾当天的数据；
+ * 单位是时间类（时/分/秒）时用户要的就是时刻精度，不套 defaultTime。
+ */
+function shouldApplyDefaultTime(descriptor, config) {
+  if (!config.defaultTime) {
+    return false;
+  }
+  if (!hasTimePart(config.type, config.valueFormat)) {
+    return false;
+  }
+  return !isTimeUnit(normalizeRelativeDescriptor(descriptor, config.kind).unit);
+}
+
+/**
+ * 单值组件的相对默认值。
+ * @param {Object} descriptor 描述符
+ * @param {Object} config { kind, type, valueFormat, defaultTime, baseDate }
+ */
+export function resolveRelativeValue(descriptor, config = {}) {
+  const momentValue = resolveRelativeMoment(descriptor, config);
+  if (shouldApplyDefaultTime(descriptor, config)) {
+    applyTimeOfDay(momentValue, config.defaultTime);
+  }
+  const value = formatRelativeMoment(momentValue, config);
+  /* date 组件的 dates（多选日期）类型，值是数组 */
+  return config.type === "dates" ? [value] : value;
+}
+
+/**
+ * 范围组件的相对默认值，返回长度 2 的数组。
+ * config.defaultTime 为 ["00:00:00", "23:59:59"] 这样的两端时刻。
+ */
+export function resolveRelativeRangeValue(descriptor, config = {}) {
+  const { start, end } = normalizeRelativeRangeDescriptor(
+    descriptor,
+    config.kind
+  );
+  const defaultTime = Array.isArray(config.defaultTime)
+    ? config.defaultTime
+    : [];
+  return [
+    resolveRelativeValue(start, { ...config, defaultTime: defaultTime[0] }),
+    resolveRelativeValue(end, { ...config, defaultTime: defaultTime[1] }),
+  ];
+}
+
+/** 描述符 → 一句话规则，如「7天后」「1月前·月初」 */
+export function describeRelativeDescriptor(descriptor, kind = KIND_DATE) {
+  const { offset, unit, align } = normalizeRelativeDescriptor(descriptor, kind);
+  const unitLabel = getUnitLabel(unit);
+  let text = "当前";
+  if (offset > 0) {
+    text = `${offset}${unitLabel}后`;
+  } else if (offset < 0) {
+    text = `${-offset}${unitLabel}前`;
+  }
+  if (align === "start") {
+    text += `·${unitLabel}初`;
+  } else if (align === "end") {
+    text += `·${unitLabel}末`;
+  }
+  return text;
+}
+
+/** 设计器预览用：把求值结果转成可读文本 */
+export function toPreviewText(value) {
+  if (value === null || value === undefined || value === "") {
+    return "";
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => toPreviewText(item)).join(" ~ ");
+  }
+  if (value instanceof Date) {
+    return moment(value).format("YYYY-MM-DD HH:mm:ss");
+  }
+  if (typeof value === "number") {
+    return moment(value).format("YYYY-MM-DD HH:mm:ss");
+  }
+  return String(value);
+}
+
+/** @returns {Boolean} options 上是否配了相对默认值（含老的 now 勾选） */
+export function isRelativeDefaultType(defaultValueType) {
+  return (
+    defaultValueType === DEFAULT_VALUE_TYPE_RELATIVE
+    || defaultValueType === DEFAULT_VALUE_TYPE_NOW
+  );
+}
+
+/**
+ * 从 options 读出描述符：'now' 归一为 offset 0，'relative' 取 defaultValueRelative。
+ * 未配相对默认值返回 null，调用方走原有静态默认值逻辑。
+ * @param {Object} options 组件 options
+ * @param {String} widgetType 组件类型
+ */
+export function getRelativeDescriptor(options, widgetType) {
+  const source = options || {};
+  if (!isRelativeDefaultType(source.defaultValueType)) {
+    return null;
+  }
+  const kind = getRelativeKind(widgetType);
+  const isRange = isRangeWidgetType(widgetType);
+  if (source.defaultValueType === DEFAULT_VALUE_TYPE_NOW) {
+    /* 老的「当前时间」勾选：两端都取此刻 */
+    const now = normalizeRelativeDescriptor(null, kind);
+    return isRange ? { start: now, end: { ...now } } : now;
+  }
+  return isRange
+    ? normalizeRelativeRangeDescriptor(source.defaultValueRelative, kind)
+    : normalizeRelativeDescriptor(source.defaultValueRelative, kind);
+}
+
+/**
+ * 组件 options → 相对默认值。未配相对默认值返回 undefined。
+ * @param {Object} options 组件 options
+ * @param {String} widgetType 组件类型
+ * @param {Date} baseDate 基准时刻，仅测试用；不传取当前时刻
+ */
+export function resolveDefaultValueFromOptions(options, widgetType, baseDate) {
+  const descriptor = getRelativeDescriptor(options, widgetType);
+  if (!descriptor) {
+    return undefined;
+  }
+  const source = options || {};
+  const config = {
+    kind: getRelativeKind(widgetType),
+    type: source.type,
+    valueFormat: source.valueFormat,
+    defaultTime: source.defaultTime,
+    baseDate,
+  };
+  return isRangeWidgetType(widgetType)
+    ? resolveRelativeRangeValue(descriptor, config)
+    : resolveRelativeValue(descriptor, config);
+}

package/src/components/xform/form-designer/form-widget/field-widget/mixins/time-limit-mixin.js

@@ -1,4 +1,5 @@
-/* 时间组件的最小时间、默认值支持配置为「当前时间」，此处统一解析 */
+/* 时间组件的最小时间支持配置为「当前时间」，此处统一解析。
+   默认值（含「当前时间」与相对偏移）已收敛到 relative-default-mixin，不在此处理。 */
 export const TIME_VALUE_TYPE_NOW = "now";
 
 const MAX_TIME_VALUE = "23:59:59";
@@ -72,21 +73,5 @@ export default {
     getTimeLimitViolationMessage() {
       return `时间不能小于${this.getTimeLimitMinValue()}`;
     },
-    /* 默认值配置为「当前时间」时，临时替换 defaultValue 后再走通用的取值逻辑 */
-    initTimeFieldModel() {
-      const options = this.getTimeLimitOptions();
-      if (!this.isNowTimeValueType(options.defaultValueType)) {
-        this.initFieldModel();
-        return;
-      }
-
-      const rawDefaultValue = options.defaultValue;
-      options.defaultValue = this.getNowTimeValue();
-      try {
-        this.initFieldModel();
-      } finally {
-        options.defaultValue = rawDefaultValue;
-      }
-    },
   },
 };

package/src/components/xform/form-designer/form-widget/field-widget/time-range-widget.vue

@@ -21,11 +21,12 @@
   import i18n from "../../../../../components/xform/utils/i18n";
   import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
   import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
+  import relativeDefaultMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/relative-default-mixin";
 
   export default {
     name: "time-range-widget",
     componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-    mixins: [emitter, fieldMixin, i18n, utcTransformMixin],
+    mixins: [emitter, fieldMixin, i18n, utcTransformMixin, relativeDefaultMixin],
     props: {
       field: Object,
       parentWidget: Object,
@@ -73,7 +74,7 @@
     created() {
       /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
          需要在父组件created中初始化！！ */
-      this.initFieldModel()
+      this.initRelativeFieldModel()
       this.registerToRefList()
       this.initEventHandler()
       this.buildFieldRules()

package/src/components/xform/form-designer/form-widget/field-widget/time-widget.vue

@@ -22,11 +22,12 @@
   import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
   import timeLimitMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/time-limit-mixin";
   import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
+  import relativeDefaultMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/relative-default-mixin";
 
   export default {
     name: "time-widget",
     componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-    mixins: [emitter, fieldMixin, i18n, timeLimitMixin, utcTransformMixin],
+    mixins: [emitter, fieldMixin, i18n, timeLimitMixin, utcTransformMixin, relativeDefaultMixin],
     props: {
       field: Object,
       parentWidget: Object,
@@ -83,7 +84,7 @@
     created() {
       /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
          需要在父组件created中初始化！！ */
-      this.initTimeFieldModel()
+      this.initRelativeFieldModel()
       this.registerToRefList()
       this.initEventHandler()
       this.buildFieldRules()
@@ -119,16 +120,6 @@
       setNow() {
         this.setValue(this.getNowTimeValue())
       },
-      refreshDefaultValue() {
-        if (this.designState !== true) {
-          return
-        }
-        if (this.isNowTimeValueType(this.field.options.defaultValueType)) {
-          this.fieldModel = this.getNowTimeValue()
-        } else if (this.field.options.defaultValue !== undefined) {
-          this.fieldModel = this.field.options.defaultValue
-        }
-      },
     }
   }
 </script>

package/src/components/xform/form-designer/setting-panel/form-dynamicField-setting.vue

@@ -8,7 +8,7 @@
     </el-form-item>
 
     <template v-if="formConfig.dynamicFieldEnabled">
-      <el-form-item label="数据来源">
+      <el-form-item label="数据来源" class="form-item-label-top">
         <el-radio-group v-model="formConfig.dynamicFieldSourceType" size="mini">
           <el-radio-button label="local">本地规则</el-radio-button>
           <el-radio-button label="script">后台脚本</el-radio-button>
@@ -16,7 +16,7 @@
       </el-form-item>
 
       <template v-if="formConfig.dynamicFieldSourceType === 'local'">
-        <el-form-item label="字段规则">
+        <el-form-item label="字段规则" class="el-form-item-second">
           <el-button
             type="primary"
             plain
@@ -30,14 +30,14 @@
       </template>
 
       <template v-if="formConfig.dynamicFieldSourceType === 'script'">
-        <el-form-item class="form-item-label-top" label="脚本编码">
+        <el-form-item class="form-item-label-top el-form-item-second" label="脚本编码">
           <el-input
             v-model="formConfig.dynamicFieldScriptCode"
             size="mini"
             placeholder="scriptCode 或 formCode/scriptCode"
           ></el-input>
         </el-form-item>
-        <el-form-item label="额外参数">
+        <el-form-item label="额外参数" class="el-form-item-second">
           <a
             href="javascript:void(0);"
             class="a-link link-oneLind"
@@ -51,7 +51,7 @@
             formModel.status }
           </div>
         </el-form-item>
-        <el-form-item class="form-item-label-top" label="触发字段">
+        <el-form-item class="form-item-label-top el-form-item-second" label="触发字段">
           <el-select
             v-model="formConfig.dynamicFieldTriggerFields"
             multiple

package/src/components/xform/form-designer/setting-panel/form-setting.vue

@@ -228,7 +228,7 @@
           </div>
 
           <div class="wf-group-title">提交入口（按钮）</div>
-          <el-form-item v-if="formConfig.wfEnabled">
+          <el-form-item v-if="formConfig.wfEnabled" class="form-item-label-red">
             <span slot="label">
               {{ i18nt("新增页启用「保存并提交流程」按钮") }}
               <el-tooltip effect="light" placement="top">
@@ -359,7 +359,7 @@
         </el-collapse-item>
         <el-collapse-item name="4" title="列表标签页信息（仅列表表单生效）">
           <el-form-item label-width="0">
-            <span style="color: #999; font-size: 12px; line-height: 1.6">
+            <span style="color:rgba(0,0,0,0.45); font-size: 12px; line-height: 1.6;display:block;">
               本组配置只从「查询列表页」所用的表单读取，在详情/编辑表单里设置不会生效
             </span>
           </el-form-item>
@@ -374,14 +374,15 @@
           </el-form-item>
           <el-form-item
             v-if="formConfig.multiTabEnabled"
-            :label="i18nt('新增打开页签')"
+            :label="i18nt('新增打开页签')"
+            class="el-form-item-second"
           >
             <el-switch v-model="formConfig.addTabEnabled"></el-switch>
             <span style="margin-left: 8px; color: #999; font-size: 12px">
               开启后新增打开独立可关闭页签，需配置「标签名称字段」
             </span>
           </el-form-item>
-          <el-form-item :label="i18nt('流程启动后行为')">
+          <el-form-item :label="i18nt('流程启动后行为')" class="form-item-label-top">
             <el-radio-group v-model="formConfig.submitBehavior">
               <el-radio label="closeToList">关闭页签并回列表刷新</el-radio>
               <el-radio label="refreshCurrent">刷新当前页签</el-radio>
@@ -405,8 +406,7 @@
           <el-form-item :label="i18nt('隐藏常规标签')">
             <el-switch v-model="formConfig.hideNormalTab"></el-switch>
           </el-form-item>
-          <el-form-item :label="i18nt('其他标签页配置')"> </el-form-item>
-          <el-form-item class="form-item-label-top" label-width="0">
+          <el-form-item :label="i18nt('其他标签页配置')" class="form-item-label-top" label-width="0">
             <div>
               <draggable
                 tag="ul"
@@ -480,7 +480,8 @@
         <el-collapse-item
           v-if="showEventCollapse()"
           name="7"
-          :title="i18nt('designer.setting.eventSetting')"
+          :title="i18nt('designer.setting.eventSetting')"
+          class="form-item-label-red"
         >
           <!--          <el-form-item label="onBeforeCreated" label-width="150px">
                       <a href="javascript:void(0);" class="a-link link-oneLind"
@@ -1713,15 +1714,23 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
 
 <style lang="scss" scoped>
 .setting-form {
-  ::v-deep .el-form-item__label {
-    font-size: 13px;
-    //text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  ::v-deep .el-form-item--mini.el-form-item {
-    margin-bottom: 6px;
+  ::v-deep .el-form-item{
+    .el-form-item__label {
+      font-size: 13px;
+      //text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    &.el-form-item--mini.el-form-item {
+      margin-bottom: 6px;
+    }
+    &.el-form-item-second{
+      .el-form-item__label{
+        padding-left:4px;
+        &:before{content:"";width:5px;height:2px;background:#FF4D4F;display:inline-block;margin-right:4px;}
+        span{flex:1}
+      }
+    }
   }
 
   .radio-group-custom {
@@ -1747,17 +1756,30 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
 }
 
 /* 折叠组内部的二级分组标题，用于把长配置组切成几段（如「流程信息」） */
-.wf-group-title {
-  margin: 14px 0 8px;
-  padding-left: 8px;
-  border-left: 3px solid #409eff;
-  color: #606266;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.3;
-
+::v-deep .wf-group-title {
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  //border-left: 3px solid #0073E5;
+  color: rgba(0,0,0,.65);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  background: rgba(0,0,0,0.04);
+  padding: 4px 0 4px 8px;
   &:first-child {
-    margin-top: 2px;
+    margin-top: 0;
+  }
+  ~ .el-form-item{
+    .el-form-item__label{
+      padding-left:4px;
+      &:before{content:"";width:5px;height:2px;background:#0073e5;display:inline-block;margin-right:4px;}
+      span{flex:1}
+    }
+    &.form-item-label-red{
+      .el-form-item__label:before{
+        background:#FF4D4F
+      }
+    }
   }
 }
 

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/data-table-editor.vue

@@ -165,7 +165,7 @@
         </el-tooltip>
       </div>
       <div class="data-table-editor-subsection">
-        <el-form-item label="列脚本">
+        <el-form-item label="列脚本" class="el-form-item-second">
           <a
             href="javascript:void(0);"
             class="a-link link-oneLind"
@@ -194,14 +194,14 @@
         </el-tooltip>
       </div>
       <div class="data-table-editor-subsection">
-        <el-form-item label="脚本编码"  class="form-item-label-top">
+        <el-form-item label="脚本编码"  class="form-item-label-top el-form-item-second">
           <el-input
             v-model="optionModel.dynamicColumnScriptCode"
             clearable
             placeholder="scriptCode 或 formCode/scriptCode"
           ></el-input>
         </el-form-item>
-        <el-form-item>
+        <el-form-item class="el-form-item-second">
           <span slot="label">
             额外参数
             <el-tooltip effect="light" placement="top">
@@ -222,7 +222,7 @@
             <i class="el-icon-edit"></i>
           </a>
         </el-form-item>
-        <el-form-item>
+        <el-form-item class="el-form-item-second">
           <span slot="label">
             转换脚本
             <el-tooltip effect="light" placement="top">
@@ -249,7 +249,7 @@
       class="dynamic-column-block"
     >
       <div class="data-table-editor-subsection">
-        <el-form-item>
+        <el-form-item class="el-form-item-second">
           <span slot="label">
             加载条件
             <el-tooltip effect="light" placement="top">
@@ -273,7 +273,7 @@
         </el-form-item>
       </div>
     </div>
-    <el-form-item class="form-item-label-top" v-if="optionModel.dynamicColumnSourceType !== 'none'">
+    <el-form-item class="form-item-label-top el-form-item-second" v-if="optionModel.dynamicColumnSourceType !== 'none'">
       <span slot="label">
         动态列模式
         <el-tooltip effect="light" placement="top">
@@ -311,7 +311,7 @@
     <el-form-item :label="i18nt('启用WBS码')">
       <el-switch v-model="optionModel.wbsEnabled"></el-switch>
     </el-form-item>
-    <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable" class="form-item-label-top">
+    <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable" class="form-item-label-top el-form-item-second">
       <el-input v-model="optionModel.sortScriptCode"></el-input>
     </el-form-item>
     <el-form-item label-width="0">
@@ -1107,18 +1107,15 @@ export default {
 </style>
 
 <style scoped>
-.data-table-editor-subsection {
-  margin: 0 0 4px 8px;
-  padding-left: 12px;
-  border-left: 2px solid #ebeef5;
-}
-
-.form-section-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #303133;
-  line-height: 22px;
-  margin-bottom: 8px;
+.form-section-label {
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 4px 0 4px 8px;
 }
 
 .label-tip-icon {