cloud-web-corejs 1.0.276 → 1.0.277

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

@@ -1,344 +1,342 @@
-<template>
-  <div class="table-dynamic-field-editor">
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider-margin-top">
-        动态字段
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            字段「显隐/必填/只读/禁用/取值」等动态规则请到「表单设置 -
-            动态字段规则」统一配置
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </el-divider>
-    </el-form-item>
-    <el-form-item label="动态字段来源">
-      <el-radio-group v-model="optionModel.dynamicSchemaSourceType">
-        <el-radio label="none">无</el-radio>
-        <el-radio label="script">前端字段脚本</el-radio>
-        <el-radio label="api">接口动态字段</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <div
-      v-if="optionModel.dynamicSchemaSourceType === 'script'"
-      class="dynamic-column-block"
-    >
-      <div class="form-section-label">
-        前端字段脚本
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            不调接口，脚本直接 return 字段定义数组或 { fields: [...] }
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </div>
-      <div class="data-table-editor-subsection">
-        <el-form-item label="字段脚本">
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="editEventHandler('dynamicSchemaScript', defaultEventParams)"
-          >
-            <span>{{ optionModel.dynamicSchemaScript }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <div
-      v-if="optionModel.dynamicSchemaSourceType === 'api'"
-      class="dynamic-column-block"
-    >
-      <div class="form-section-label">
-        接口动态字段
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            打开表单时请求后台脚本，返回字段定义（格式与数据表格动态列一致，详见
-            docs/后台字段（动态生成）JSON 说明.md）
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </div>
-      <div class="data-table-editor-subsection">
-        <el-form-item label="脚本编码">
-          <el-input
-            v-model="optionModel.dynamicSchemaScriptCode"
-            clearable
-            placeholder="scriptCode 或 formCode/scriptCode"
-          ></el-input>
-        </el-form-item>
-        <el-form-item>
-          <span slot="label">
-            额外参数
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                格式： return { bizType: this.formModel.type }
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="
-              editEventHandler('dynamicSchemaScriptParam', tableConfigParams)
-            "
-          >
-            <span>{{ optionModel.dynamicSchemaScriptParam }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-        <el-form-item>
-          <span slot="label">
-            转换脚本
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                可选。入参 res，返回标准定义数组；不填时默认取
-                res.objx（数组）或 res.objx.fields / res.objx.columns
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="editDynamicSchemaConvert"
-          >
-            <span>{{ dynamicSchemaConvertDisplay }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <div
-      v-if="optionModel.dynamicSchemaSourceType !== 'none'"
-      class="dynamic-column-block"
-    >
-      <div class="data-table-editor-subsection">
-        <el-form-item>
-          <span slot="label">
-            加载条件
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                表单初始化加载动态字段前执行。<br />
-                <code>return false</code> 时不加载；不配置则默认加载。
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="
-              editEventHandler('dynamicSchemaLoadScript', tableConfigParams)
-            "
-          >
-            <span>{{ optionModel.dynamicSchemaLoadScript }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <el-form-item v-if="optionModel.dynamicSchemaSourceType !== 'none'">
-      <span slot="label">
-        生成模式
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            对<strong>生效的动态字段</strong>与静态字段的合并方式：<br />
-            追加 — 静态字段 + 动态字段；替换 — 仅动态字段；锚点插入 —
-            插到占位行位置。
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </span>
-      <el-select v-model="optionModel.dynamicSchemaMode" style="width: 100%">
-        <el-option label="追加到静态字段" value="append"></el-option>
-        <el-option label="替换静态字段" value="replace"></el-option>
-        <el-option label="锚点插入" value="anchor"></el-option>
-      </el-select>
-    </el-form-item>
-    <template v-if="optionModel.dynamicSchemaSourceType !== 'none'">
-      <template v-if="optionModel.dynamicSchemaMode === 'anchor'">
-        <el-form-item>
-          <span slot="label">
-            占位锚点行
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                建议预留一个空行作为占位锚点
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <el-select
-            v-model="optionModel.dynamicSchemaAnchorRowId"
-            style="width: 100%"
-            placeholder="选择设计期的占位行"
-          >
-            <el-option
-              v-for="r in rowOptions"
-              :key="r.value"
-              :label="r.label"
-              :value="r.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="插入位置">
-          <el-select
-            v-model="optionModel.dynamicSchemaAnchorPosition"
-            style="width: 100%"
-          >
-            <el-option label="替换占位行" value="replace"></el-option>
-            <el-option label="之前" value="before"></el-option>
-            <el-option label="之后" value="after"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <span slot="label">
-            继承行布局
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                开启后生成行沿用占位行的单元格数量/宽度/跨列，否则按「每行列数」平铺
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <el-switch
-            v-model="optionModel.dynamicSchemaInheritLayout"
-          ></el-switch>
-        </el-form-item>
-      </template>
-      <el-form-item
-        v-if="
-          optionModel.dynamicSchemaMode !== 'anchor' ||
-          !optionModel.dynamicSchemaInheritLayout
-        "
+<template>
+  <div class="table-dynamic-field-editor">
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">
+        动态字段
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            字段「显隐/必填/只读/禁用/取值」等动态规则请到「表单设置 -
+            动态字段规则」统一配置
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </el-divider>
+    </el-form-item>
+    <el-form-item label="动态字段来源">
+      <el-radio-group v-model="optionModel.dynamicSchemaSourceType">
+        <el-radio label="none">无</el-radio>
+        <el-radio label="script">前端字段脚本</el-radio>
+        <el-radio label="api">接口动态字段</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType === 'script'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        前端字段脚本
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            不调接口，脚本直接 return 字段定义数组或 { fields: [...] }
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="字段脚本" class="el-form-item-second">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editEventHandler('dynamicSchemaScript', defaultEventParams)"
+          >
+            <span>{{ optionModel.dynamicSchemaScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType === 'api'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        接口动态字段
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            打开表单时请求后台脚本，返回字段定义（格式与数据表格动态列一致，详见
+            docs/后台字段（动态生成）JSON 说明.md）
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item class="form-item-label-top el-form-item-second" label="脚本编码" >
+          <el-input
+            v-model="optionModel.dynamicSchemaScriptCode"
+            clearable
+            placeholder="scriptCode 或 formCode/scriptCode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item  class="el-form-item-second">
+          <span slot="label">
+            额外参数
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                格式： return { bizType: this.formModel.type }
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicSchemaScriptParam', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicSchemaScriptParam }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item  class="el-form-item-second">
+          <span slot="label">
+            转换脚本
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                可选。入参 res，返回标准定义数组；不填时默认取
+                res.objx（数组）或 res.objx.fields / res.objx.columns
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editDynamicSchemaConvert"
+          >
+            <span>{{ dynamicSchemaConvertDisplay }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicSchemaSourceType !== 'none'"
+      class="dynamic-column-block"
+    >
+      <div class="data-table-editor-subsection">
+        <el-form-item  class="el-form-item-second">
+          <span slot="label">
+            加载条件
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                表单初始化加载动态字段前执行。<br />
+                <code>return false</code> 时不加载；不配置则默认加载。
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicSchemaLoadScript', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicSchemaLoadScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <el-form-item class="form-item-label-top  el-form-item-second" v-if="optionModel.dynamicSchemaSourceType !== 'none'">
+      <span slot="label">
+        生成模式
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            对<strong>生效的动态字段</strong>与静态字段的合并方式：<br />
+            追加 — 静态字段 + 动态字段；替换 — 仅动态字段；锚点插入 —
+            插到占位行位置。
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </span>
+      <el-select v-model="optionModel.dynamicSchemaMode" style="width: 100%">
+        <el-option label="追加到静态字段" value="append"></el-option>
+        <el-option label="替换静态字段" value="replace"></el-option>
+        <el-option label="锚点插入" value="anchor"></el-option>
+      </el-select>
+    </el-form-item>
+    <template v-if="optionModel.dynamicSchemaSourceType !== 'none'">
+      <template v-if="optionModel.dynamicSchemaMode === 'anchor'">
+        <el-form-item class="form-item-label-top">
+          <span slot="label">
+            占位锚点行
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                建议预留一个空行作为占位锚点
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <el-select
+            v-model="optionModel.dynamicSchemaAnchorRowId"
+            style="width: 100%"
+            placeholder="选择设计期的占位行"
+          >
+            <el-option
+              v-for="r in rowOptions"
+              :key="r.value"
+              :label="r.label"
+              :value="r.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item-label-top" label="插入位置">
+          <el-select
+            v-model="optionModel.dynamicSchemaAnchorPosition"
+            style="width: 100%"
+          >
+            <el-option label="替换占位行" value="replace"></el-option>
+            <el-option label="之前" value="before"></el-option>
+            <el-option label="之后" value="after"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label">
+            继承行布局
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                开启后生成行沿用占位行的单元格数量/宽度/跨列，否则按「每行列数」平铺
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <el-switch
+            v-model="optionModel.dynamicSchemaInheritLayout"
+          ></el-switch>
+        </el-form-item>
+      </template>
+      <el-form-item
+        v-if="
+          optionModel.dynamicSchemaMode !== 'anchor' ||
+          !optionModel.dynamicSchemaInheritLayout
+        "
         label="每行列数"
-      >
-        <el-input-number
-          v-model="optionModel.dynamicSchemaColumns"
-          :min="1"
-          :max="12"
-          controls-position="right"
-          style="width: 100%"
-        ></el-input-number>
-      </el-form-item>
-    </template>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../../components/xform/utils/i18n";
-import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
-
-export default {
-  name: "table-dynamicField-editor",
-  mixins: [i18n, eventMixin],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  data() {
-    return {
-      tableConfigParams: ["dataId", "formCode"],
-      defaultEventParams: ["dataId", "formCode"],
-    };
-  },
-  created() {
-    if (this.optionModel.dynamicSchemaSourceType === undefined) {
-      const legacyEnabled = this.optionModel.dynamicSchemaEnabled;
-      this.$set(
-        this.optionModel,
-        "dynamicSchemaSourceType",
-        legacyEnabled ? "api" : "none"
-      );
-    }
-    if (this.optionModel.dynamicSchemaScript === undefined) {
-      this.$set(this.optionModel, "dynamicSchemaScript", null);
-    }
-    if (this.optionModel.dynamicSchemaLoadScript === undefined) {
-      this.$set(this.optionModel, "dynamicSchemaLoadScript", null);
-    }
-  },
-  computed: {
-    dynamicSchemaConvertDisplay() {
-      return this.optionModel.dynamicSchemaConvert || "";
-    },
-    rowOptions() {
-      const rows = (this.selectedWidget && this.selectedWidget.rows) || [];
-      return rows.map((row, idx) => {
-        const fields = [];
-        (row.cols || []).forEach((cell) => {
-          this.collectFields(cell.widgetList || [], fields);
-        });
-        const names = fields
-          .map((w) => w.options.label || w.options.name)
-          .filter((n) => !!n);
-        const preview = names.length ? names.join("、") : "空行";
-        return { label: "第" + (idx + 1) + "行：" + preview, value: row.id };
-      });
-    },
-  },
-  methods: {
-    editDynamicSchemaConvert() {
-      this.editEventHandler("dynamicSchemaConvert", ["res"]);
-    },
-    collectFields(list, out) {
-      (list || []).forEach((w) => {
-        if (!w) return;
-        if (w.category === "container") {
-          if (Array.isArray(w.rows)) {
-            w.rows.forEach((row) =>
-              this.collectFields((row && row.cols) || [], out)
-            );
-          }
-          ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach(
-            (k) => {
-              if (Array.isArray(w[k])) this.collectFields(w[k], out);
-            }
-          );
-        } else if (w.formItemFlag) {
-          out.push(w);
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.data-table-editor-subsection {
-  margin: 0 0 4px 8px;
-  padding-left: 12px;
-  border-left: 2px solid #ebeef5;
-}
-
-.form-section-label {
+        class="el-form-item-second"
+      >
+        <el-input-number
+          v-model="optionModel.dynamicSchemaColumns"
+          :min="1"
+          :max="12"
+          controls-position="right"
+          style="width: 100%"
+        ></el-input-number>
+      </el-form-item>
+    </template>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+
+export default {
+  name: "table-dynamicField-editor",
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      tableConfigParams: ["dataId", "formCode"],
+      defaultEventParams: ["dataId", "formCode"],
+    };
+  },
+  created() {
+    if (this.optionModel.dynamicSchemaSourceType === undefined) {
+      const legacyEnabled = this.optionModel.dynamicSchemaEnabled;
+      this.$set(
+        this.optionModel,
+        "dynamicSchemaSourceType",
+        legacyEnabled ? "api" : "none"
+      );
+    }
+    if (this.optionModel.dynamicSchemaScript === undefined) {
+      this.$set(this.optionModel, "dynamicSchemaScript", null);
+    }
+    if (this.optionModel.dynamicSchemaLoadScript === undefined) {
+      this.$set(this.optionModel, "dynamicSchemaLoadScript", null);
+    }
+  },
+  computed: {
+    dynamicSchemaConvertDisplay() {
+      return this.optionModel.dynamicSchemaConvert || "";
+    },
+    rowOptions() {
+      const rows = (this.selectedWidget && this.selectedWidget.rows) || [];
+      return rows.map((row, idx) => {
+        const fields = [];
+        (row.cols || []).forEach((cell) => {
+          this.collectFields(cell.widgetList || [], fields);
+        });
+        const names = fields
+          .map((w) => w.options.label || w.options.name)
+          .filter((n) => !!n);
+        const preview = names.length ? names.join("、") : "空行";
+        return { label: "第" + (idx + 1) + "行：" + preview, value: row.id };
+      });
+    },
+  },
+  methods: {
+    editDynamicSchemaConvert() {
+      this.editEventHandler("dynamicSchemaConvert", ["res"]);
+    },
+    collectFields(list, out) {
+      (list || []).forEach((w) => {
+        if (!w) return;
+        if (w.category === "container") {
+          if (Array.isArray(w.rows)) {
+            w.rows.forEach((row) =>
+              this.collectFields((row && row.cols) || [], out)
+            );
+          }
+          ["cols", "tabs", "widgetList", "panes", "buttonWidgetList"].forEach(
+            (k) => {
+              if (Array.isArray(w[k])) this.collectFields(w[k], out);
+            }
+          );
+        } else if (w.formItemFlag) {
+          out.push(w);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-section-label {
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  color: rgba(0, 0, 0, 0.65);
   font-size: 13px;
-  font-weight: 500;
-  color: #303133;
-  line-height: 22px;
-  margin-bottom: 8px;
-}
-
-.label-tip-icon {
-  margin-left: 4px;
-  color: #909399;
-  cursor: pointer;
-  font-size: 14px;
-  vertical-align: middle;
-}
-
-.field-tip-content {
-  line-height: 1.4;
-  max-width: 320px;
-}
-
-.dynamic-column-block {
-  margin-bottom: 12px;
-}
-
-.dynamic-column-block .data-table-editor-subsection {
-  margin-top: 0;
-}
-</style>
+  font-weight: 600;
+  line-height: 1.3;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 4px 0 4px 8px;
+}
+
+.label-tip-icon {
+  margin-left: 4px;
+  color: #909399;
+  cursor: pointer;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.field-tip-content {
+  line-height: 1.4;
+  max-width: 320px;
+}
+
+.dynamic-column-block {
+  margin-bottom: 12px;
+}
+
+.dynamic-column-block .data-table-editor-subsection {
+  margin-top: 0;
+}
+</style>