cloud-web-corejs 1.1.0-dev.19 → 1.1.0-dev.21

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

@@ -1,602 +1,687 @@
-<template>
-  <div class="form-dynamic-field-setting">
-    <el-form-item label="启用动态字段">
-      <el-switch v-model="formConfig.dynamicFieldEnabled"></el-switch>
-      <div class="tip-text">
-        根据表单数据/后台脚本动态控制整个表单内任意字段、容器的显隐等状态
-      </div>
-    </el-form-item>
-
-    <template v-if="formConfig.dynamicFieldEnabled">
-      <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>
-        </el-radio-group>
-      </el-form-item>
-
-      <template v-if="formConfig.dynamicFieldSourceType === 'local'">
-        <el-form-item label="字段规则" class="el-form-item-second">
-          <el-button
-            type="primary"
-            plain
-            size="mini"
-            icon="el-icon-setting"
-            @click="openRuleDialog"
-          >
-            配置规则（{{ (formConfig.dynamicFieldRules || []).length }}）
-          </el-button>
-        </el-form-item>
-      </template>
-
-      <template v-if="formConfig.dynamicFieldSourceType === 'script'">
-        <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="额外参数" class="el-form-item-second">
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="editDynamicFieldScriptParam"
-          >
-            <span>{{ formConfig.dynamicFieldScriptParam }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-          <div class="tip-text">
-            格式： return { stage:
-            formModel.status }
-          </div>
-        </el-form-item>
-        <el-form-item class="form-item-label-top el-form-item-second" label="触发字段">
-          <el-select
-            v-model="formConfig.dynamicFieldTriggerFields"
-            multiple
-            filterable
-            size="mini"
-            style="width: 100%"
-            placeholder="字段值变化时重新请求后台"
-          >
-            <el-option
-              v-for="(n, idx) in treeOptions"
-              :key="n.value + '#' + idx"
-              :value="n.value"
-              :label="optPlainLabel(n)"
-              :disabled="n.isContainer"
-            >
-              <span
-                :style="{ paddingLeft: n.depth * 14 + 'px' }"
-                :class="{ 'opt-container': n.isContainer }"
-              >
-                <span v-if="n.isContainer" class="opt-tag"
-                  >[{{ containerTypeLabel(n.type) }}]</span
-                >{{ n.baseLabel }}
-              </span>
-            </el-option>
-          </el-select>
-          <div class="tip-text">为空时仅在初始化时请求一次后台脚本</div>
-        </el-form-item>
-        <div class="tip-text">
-          后台返回 fieldStates 的 key
-          可为字段名，也可为「命名容器」名以控制其显隐（容器仅 visible 生效）
-        </div>
-      </template>
-    </template>
-
-    <el-dialog
-      title="表单动态字段规则"
-      :visible.sync="ruleDialogVisible"
-      :append-to-body="true"
-      width="760px"
-      custom-class="dynamic-field-rule-dialog"
-    >
-      <div class="rule-list">
-        <div
-          v-for="(rule, rIdx) in editingRules"
-          :key="rule.id"
-          class="rule-card"
-        >
-          <div class="rule-card-header">
-            <span class="rule-title">规则 {{ rIdx + 1 }}</span>
-            <el-button
-              type="text"
-              icon="el-icon-delete"
-              class="danger-text"
-              @click="removeRule(rIdx)"
-            >
-              删除规则
-            </el-button>
-          </div>
-
-          <div class="rule-section">
-            <div class="rule-section-title">
-              <span>当满足</span>
-              <el-radio-group v-model="rule.logic" size="mini">
-                <el-radio-button label="and">全部条件</el-radio-button>
-                <el-radio-button label="or">任一条件</el-radio-button>
-              </el-radio-group>
-            </div>
-            <div
-              v-for="(cond, cIdx) in rule.conditions"
-              :key="cIdx"
-              class="rule-row"
-            >
-              <el-select
-                v-model="cond.field"
-                filterable
-                size="mini"
-                placeholder="字段"
-                class="cell-field"
-              >
-                <el-option
-                  v-for="(n, idx) in treeOptions"
-                  :key="n.value + '#' + idx"
-                  :value="n.value"
-                  :label="optPlainLabel(n)"
-                  :disabled="n.isContainer"
-                >
-                  <span
-                    :style="{ paddingLeft: n.depth * 14 + 'px' }"
-                    :class="{ 'opt-container': n.isContainer }"
-                  >
-                    <span v-if="n.isContainer" class="opt-tag"
-                      >[{{ containerTypeLabel(n.type) }}]</span
-                    >{{ n.baseLabel }}
-                  </span>
-                </el-option>
-              </el-select>
-              <el-select
-                v-model="cond.operator"
-                size="mini"
-                placeholder="操作符"
-                class="cell-op"
-              >
-                <el-option
-                  v-for="op in operatorOptions"
-                  :key="op.value"
-                  :label="op.label"
-                  :value="op.value"
-                ></el-option>
-              </el-select>
-              <el-input
-                v-model="cond.value"
-                size="mini"
-                placeholder="值"
-                class="cell-value"
-                :disabled="op_noValue(cond.operator)"
-              ></el-input>
-              <el-button
-                type="text"
-                icon="el-icon-remove-outline"
-                class="danger-text"
-                @click="removeCondition(rule, cIdx)"
-              ></el-button>
-            </div>
-            <el-button
-              type="text"
-              icon="el-icon-plus"
-              @click="addCondition(rule)"
-              >添加条件</el-button
-            >
-          </div>
-
-          <div class="rule-section">
-            <div class="rule-section-title"><span>则设置字段/容器</span></div>
-            <div
-              v-for="(t, tIdx) in rule.targets"
-              :key="tIdx"
-              class="rule-row target-row"
-            >
-              <el-select
-                v-model="t.field"
-                filterable
-                size="mini"
-                placeholder="目标字段/容器"
-                class="cell-field"
-              >
-                <el-option
-                  v-for="(n, idx) in treeOptions"
-                  :key="n.value + '#' + idx"
-                  :value="n.value"
-                  :label="optPlainLabel(n)"
-                  :disabled="n.isContainer && !n.hasName"
-                >
-                  <span
-                    :style="{ paddingLeft: n.depth * 14 + 'px' }"
-                    :class="{ 'opt-container': n.isContainer }"
-                  >
-                    <span v-if="n.isContainer" class="opt-tag"
-                      >[{{ containerTypeLabel(n.type) }}]</span
-                    >{{ n.baseLabel }}
-                  </span>
-                </el-option>
-              </el-select>
-              <span class="target-attr">
-                <span class="attr-label">显示</span>
-                <el-select
-                  v-model="t.visible"
-                  size="mini"
-                  class="cell-tri"
-                  clearable
-                  placeholder="不变"
-                >
-                  <el-option label="显示" :value="true"></el-option>
-                  <el-option label="隐藏" :value="false"></el-option>
-                </el-select>
-              </span>
-              <span class="target-attr">
-                <span class="attr-label">必填</span>
-                <el-select
-                  v-model="t.required"
-                  size="mini"
-                  class="cell-tri"
-                  clearable
-                  placeholder="不变"
-                >
-                  <el-option label="必填" :value="true"></el-option>
-                  <el-option label="非必填" :value="false"></el-option>
-                </el-select>
-              </span>
-              <span class="target-attr">
-                <span class="attr-label">只读</span>
-                <el-select
-                  v-model="t.readonly"
-                  size="mini"
-                  class="cell-tri"
-                  clearable
-                  placeholder="不变"
-                >
-                  <el-option label="只读" :value="true"></el-option>
-                  <el-option label="可编辑" :value="false"></el-option>
-                </el-select>
-              </span>
-              <span class="target-attr">
-                <span class="attr-label">禁用</span>
-                <el-select
-                  v-model="t.disabled"
-                  size="mini"
-                  class="cell-tri"
-                  clearable
-                  placeholder="不变"
-                >
-                  <el-option label="禁用" :value="true"></el-option>
-                  <el-option label="启用" :value="false"></el-option>
-                </el-select>
-              </span>
-              <el-button
-                type="text"
-                icon="el-icon-remove-outline"
-                class="danger-text"
-                @click="removeTarget(rule, tIdx)"
-              ></el-button>
-            </div>
-            <el-button type="text" icon="el-icon-plus" @click="addTarget(rule)"
-              >添加目标字段</el-button
-            >
-            <div class="tip-text">
-              目标为容器时仅「显示」生效，必填/只读/禁用将被忽略
-            </div>
-          </div>
-        </div>
-
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="addRule"
-          style="width: 100%"
-        >
-          添加规则
-        </el-button>
-      </div>
-
-      <div slot="footer">
-        <el-button size="mini" @click="ruleDialogVisible = false"
-          >取消</el-button
-        >
-        <el-button size="mini" type="primary" @click="saveRules"
-          >确定</el-button
-        >
-      </div>
-    </el-dialog>
-
-    <el-dialog
-      title="额外参数"
-      :visible.sync="scriptParamDialogVisible"
-      v-if="scriptParamDialogVisible"
-      :show-close="true"
-      custom-class="dialog-style list-dialog"
-      v-dialog-drag
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-    >
-      <div class="cont">
-        <code-editor
-          :mode="'javascript'"
-          :readonly="false"
-          v-model="editingScriptParam"
-          ref="scriptParamEditor"
-        ></code-editor>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button
-          @click="scriptParamDialogVisible = false"
-          class="button-sty"
-          icon="el-icon-close"
-        >
-          {{ i18nt("designer.hint.cancel") }}
-        </el-button>
-        <el-button
-          type="primary"
-          @click="saveDynamicFieldScriptParam"
-          class="button-sty"
-          icon="el-icon-check"
-        >
-          {{ i18nt("designer.hint.confirm") }}
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../components/xform/utils/i18n";
-import { buildWidgetTreeOptions } from "../../../../components/xform/form-render/container-item/dynamicFieldEngine";
-
-const NO_VALUE_OPERATORS = ["empty", "notEmpty"];
-
-export default {
-  name: "form-dynamicField-setting",
-  mixins: [i18n],
-  props: {
-    designer: Object,
-    formConfig: Object,
-  },
-  data() {
-    return {
-      ruleDialogVisible: false,
-      scriptParamDialogVisible: false,
-      editingScriptParam: "",
-      editingRules: [],
-      operatorOptions: [
-        { label: "等于", value: "eq" },
-        { label: "不等于", value: "ne" },
-        { label: "大于", value: "gt" },
-        { label: "小于", value: "lt" },
-        { label: "大于等于", value: "ge" },
-        { label: "小于等于", value: "le" },
-        { label: "属于(逗号分隔)", value: "in" },
-        { label: "不属于(逗号分隔)", value: "nin" },
-        { label: "包含", value: "includes" },
-        { label: "为空", value: "empty" },
-        { label: "不为空", value: "notEmpty" },
-      ],
-    };
-  },
-  computed: {
-    // 带层级的字段/容器候选(整个表单)
-    treeOptions() {
-      return buildWidgetTreeOptions(
-        (this.designer && this.designer.widgetList) || []
-      );
-    },
-  },
-  methods: {
-    op_noValue(operator) {
-      return NO_VALUE_OPERATORS.indexOf(operator) > -1;
-    },
-    // 选中态/过滤用的纯文本标签
-    optPlainLabel(n) {
-      if (n.isContainer) {
-        return "[" + this.containerTypeLabel(n.type) + "] " + n.baseLabel;
-      }
-      return n.baseLabel;
-    },
-    containerTypeLabel(type) {
-      const map = {
-        grid: "栅格",
-        table: "表格布局",
-        "h5-table": "H5表格",
-        tab: "标签页",
-        "tab-pane": "标签项",
-        card: "卡片",
-        "vf-box": "区块",
-        panel: "面板",
-        detail: "单据详情",
-        "detail-plain": "单据详情(简洁)",
-        "detail-pane": "详情面板",
-        "detail-h5": "H5详情",
-        "h5-card": "H5卡片",
-        "h5-card-pane": "H5卡片面板",
-        "sub-form": "子表单",
-        "grid-sub-form": "网格子表单",
-      };
-      return map[type] || type;
-    },
-    genId() {
-      return "fdr_" + Date.now() + "_" + Math.floor(Math.random() * 10000);
-    },
-    editDynamicFieldScriptParam() {
-      this.editingScriptParam = this.formConfig.dynamicFieldScriptParam || "";
-      this.scriptParamDialogVisible = true;
-    },
-    saveDynamicFieldScriptParam() {
-      const codeHints = this.$refs.scriptParamEditor.getEditorAnnotations();
-      let syntaxErrorFlag = false;
-      if (codeHints && codeHints.length > 0) {
-        codeHints.forEach((chItem) => {
-          if (chItem.type === "error") {
-            syntaxErrorFlag = true;
-          }
-        });
-        if (syntaxErrorFlag) {
-          this.$message.error(
-            this.i18nt("designer.setting.syntaxCheckWarning")
-          );
-          return;
-        }
-      }
-      this.formConfig.dynamicFieldScriptParam = this.editingScriptParam;
-      this.scriptParamDialogVisible = false;
-    },
-    openRuleDialog() {
-      this.editingRules = JSON.parse(
-        JSON.stringify(this.formConfig.dynamicFieldRules || [])
-      );
-      this.editingRules.forEach((rule) => {
-        if (!rule.id) rule.id = this.genId();
-        if (!rule.logic) rule.logic = "and";
-        if (!rule.conditions) rule.conditions = [];
-        if (!rule.targets) rule.targets = [];
-      });
-      this.ruleDialogVisible = true;
-    },
-    addRule() {
-      this.editingRules.push({
-        id: this.genId(),
-        logic: "and",
-        conditions: [{ field: "", operator: "eq", value: "" }],
-        targets: [
-          {
-            field: "",
-            visible: undefined,
-            required: undefined,
-            readonly: undefined,
-            disabled: undefined,
-          },
-        ],
-      });
-    },
-    removeRule(idx) {
-      this.editingRules.splice(idx, 1);
-    },
-    addCondition(rule) {
-      rule.conditions.push({ field: "", operator: "eq", value: "" });
-    },
-    removeCondition(rule, idx) {
-      rule.conditions.splice(idx, 1);
-    },
-    addTarget(rule) {
-      rule.targets.push({
-        field: "",
-        visible: undefined,
-        required: undefined,
-        readonly: undefined,
-        disabled: undefined,
-      });
-    },
-    removeTarget(rule, idx) {
-      rule.targets.splice(idx, 1);
-    },
-    saveRules() {
-      this.formConfig.dynamicFieldRules = JSON.parse(
-        JSON.stringify(this.editingRules)
-      );
-      this.ruleDialogVisible = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.tip-text {
-  font-size: 12px;
-  color: #909399;
-  line-height: 1.4;
-  margin-top: 2px;
-}
-
-.rule-list {
-  max-height: 56vh;
-  overflow-y: auto;
-}
-
-.rule-card {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  background: #fafafa;
-}
-
-.rule-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 6px;
-
-  .rule-title {
-    font-weight: bold;
-    font-size: 13px;
-  }
-}
-
-.rule-section {
-  margin-top: 6px;
-}
-
-.rule-section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #606266;
-  margin-bottom: 6px;
-}
-
-.rule-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-  flex-wrap: wrap;
-}
-
-.cell-field {
-  width: 180px;
-}
-
-.cell-op {
-  width: 120px;
-}
-
-.cell-value {
-  width: 130px;
-}
-
-.cell-tri {
-  width: 92px;
-}
-
-.target-attr {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-
-  .attr-label {
-    font-size: 12px;
-    color: #909399;
-  }
-}
-
-.danger-text {
-  color: #f56c6c;
-}
-
-.opt-container {
-  color: #409eff;
-}
-
-.opt-tag {
-  color: #909399;
-  font-size: 12px;
-  margin-right: 4px;
-}
-</style>
+<template>
+  <div class="form-dynamic-field-setting">
+    <el-form-item label="启用动态字段">
+      <el-switch v-model="formConfig.dynamicFieldEnabled"></el-switch>
+      <el-tooltip content="根据表单数据动态控制字段、容器的显隐、必填、只读和禁用状态。" placement="left" popper-class="xform-setting-help">
+        <i class="el-icon-info setting-help-icon" tabindex="0" aria-label="动态字段说明"></i>
+      </el-tooltip>
+    </el-form-item>
+
+    <template v-if="formConfig.dynamicFieldEnabled">
+      <div v-if="fieldControlTreeState.error" class="tip-text tree-options-error">{{ fieldControlTreeState.error }}</div>
+      <el-form-item label="执行方式">
+        <el-select :value="formConfig.dynamicFieldRunMode || 'auto'" size="mini"
+          @input="$set(formConfig, 'dynamicFieldRunMode', $event)">
+          <el-option label="按场景默认" value="auto" />
+          <el-option label="仅初始化" value="initialOnly" />
+          <el-option label="持续生效" value="continuous" />
+        </el-select>
+        <el-tooltip content="默认：有流程仅初始化，无流程持续联动。仅初始化保留首次结果；持续模式每轮均由流程规则收尾。" placement="left" popper-class="xform-setting-help">
+          <i class="el-icon-info setting-help-icon" tabindex="0" aria-label="执行方式说明"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="字段规则" class="el-form-item-second">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          icon="el-icon-setting"
+          @click="openRuleDialog"
+        >
+          配置规则（{{ (formConfig.dynamicFieldRules || []).length }}）
+        </el-button>
+      </el-form-item>
+    </template>
+
+    <el-dialog
+      title="表单动态字段规则"
+      :visible.sync="ruleDialogVisible"
+      :append-to-body="true"
+      width="880px"
+      top="6vh"
+      custom-class="dynamic-field-rule-dialog"
+    >
+      <div class="rule-dialog-summary">配置触发条件与字段状态，规则按排列顺序执行。</div>
+      <div class="rule-list">
+        <div v-if="!editingRules.length" class="rule-empty">暂无规则，点击下方「添加规则」开始配置</div>
+        <div
+          v-for="(rule, rIdx) in editingRules"
+          :key="rule.id"
+          class="rule-card"
+        >
+          <div class="rule-card-header">
+            <span class="rule-title">规则 {{ rIdx + 1 }}</span>
+            <el-button
+              type="text"
+              icon="el-icon-delete"
+              class="danger-text"
+              @click="removeRule(rIdx)"
+            >
+              删除规则
+            </el-button>
+          </div>
+
+          <div class="rule-section">
+            <div class="rule-section-title">
+              <span>当满足</span>
+              <el-radio-group v-model="rule.logic" size="mini">
+                <el-radio-button label="and">全部条件</el-radio-button>
+                <el-radio-button label="or">任一条件</el-radio-button>
+              </el-radio-group>
+            </div>
+            <div
+              v-for="(cond, cIdx) in rule.conditions"
+              :key="cIdx"
+              class="rule-row condition-row"
+            >
+              <el-select
+                v-model="cond.field"
+                filterable
+                size="mini"
+                placeholder="选择条件字段"
+                class="cell-field"
+              >
+                <el-option
+                  v-for="(n, idx) in treeOptions"
+                  :key="n.value + '#' + idx"
+                  :value="n.value"
+                  :label="optPlainLabel(n)"
+                  :disabled="n.isContainer"
+                >
+                  <span
+                    :style="{ paddingLeft: n.depth * 14 + 'px' }"
+                    :class="{ 'opt-container': n.isContainer }"
+                  >
+                    <span v-if="n.isContainer" class="opt-tag"
+                      >[{{ containerTypeLabel(n.type) }}]</span
+                    >{{ n.baseLabel }}
+                  </span>
+                </el-option>
+              </el-select>
+              <el-select
+                v-model="cond.operator"
+                size="mini"
+                placeholder="操作符"
+                class="cell-op"
+              >
+                <el-option
+                  v-for="op in operatorOptions"
+                  :key="op.value"
+                  :label="op.label"
+                  :value="op.value"
+                ></el-option>
+              </el-select>
+              <el-input
+                v-model="cond.value"
+                size="mini"
+                placeholder="输入比较值"
+                class="cell-value"
+                :disabled="op_noValue(cond.operator)"
+              ></el-input>
+              <el-button
+                type="text"
+                icon="el-icon-remove-outline"
+                class="danger-text row-remove"
+                aria-label="删除条件"
+                @click="removeCondition(rule, cIdx)"
+              ></el-button>
+            </div>
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              @click="addCondition(rule)"
+              >添加条件</el-button
+            >
+          </div>
+
+          <div class="rule-section">
+            <div class="rule-section-title"><span>则设置字段/容器</span></div>
+            <div
+              v-for="(t, tIdx) in rule.targets"
+              :key="tIdx"
+              class="rule-row target-row"
+            >
+              <el-select
+                v-model="t.field"
+                filterable
+                size="mini"
+                placeholder="目标字段/容器"
+                class="cell-field"
+              >
+                <el-option
+                  v-for="(n, idx) in treeOptions"
+                  :key="n.value + '#' + idx"
+                  :value="n.value"
+                  :label="optPlainLabel(n)"
+                  :disabled="n.isContainer && !n.hasName"
+                >
+                  <span
+                    :style="{ paddingLeft: n.depth * 14 + 'px' }"
+                    :class="{ 'opt-container': n.isContainer }"
+                  >
+                    <span v-if="n.isContainer" class="opt-tag"
+                      >[{{ containerTypeLabel(n.type) }}]</span
+                    >{{ n.baseLabel }}
+                  </span>
+                </el-option>
+              </el-select>
+              <span class="target-attr">
+                <span class="attr-label">显示</span>
+                <el-select
+                  v-model="t.visible"
+                  size="mini"
+                  class="cell-tri"
+                  clearable
+                  placeholder="不变"
+                >
+                  <el-option label="显示" :value="true"></el-option>
+                  <el-option label="隐藏" :value="false"></el-option>
+                </el-select>
+              </span>
+              <span class="target-attr">
+                <span class="attr-label">必填</span>
+                <el-select
+                  v-model="t.required"
+                  size="mini"
+                  class="cell-tri"
+                  clearable
+                  placeholder="不变"
+                >
+                  <el-option label="必填" :value="true"></el-option>
+                  <el-option label="非必填" :value="false"></el-option>
+                </el-select>
+              </span>
+              <span class="target-attr">
+                <span class="attr-label">只读</span>
+                <el-select
+                  v-model="t.readonly"
+                  size="mini"
+                  class="cell-tri"
+                  clearable
+                  placeholder="不变"
+                >
+                  <el-option label="只读" :value="true"></el-option>
+                  <el-option label="可编辑" :value="false"></el-option>
+                </el-select>
+              </span>
+              <span class="target-attr">
+                <span class="attr-label">禁用</span>
+                <el-select
+                  v-model="t.disabled"
+                  size="mini"
+                  class="cell-tri"
+                  clearable
+                  placeholder="不变"
+                >
+                  <el-option label="禁用" :value="true"></el-option>
+                  <el-option label="启用" :value="false"></el-option>
+                </el-select>
+              </span>
+              <el-button
+                type="text"
+                icon="el-icon-remove-outline"
+                class="danger-text row-remove"
+                aria-label="删除目标字段"
+                @click="removeTarget(rule, tIdx)"
+              ></el-button>
+            </div>
+            <el-button type="text" icon="el-icon-plus" @click="addTarget(rule)"
+              >添加目标字段</el-button
+            >
+            <div class="tip-text">
+              目标为容器时仅「显示」生效，必填/只读/禁用将被忽略
+            </div>
+          </div>
+        </div>
+
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="addRule"
+          style="width: 100%"
+        >
+          添加规则
+        </el-button>
+      </div>
+
+      <div slot="footer" class="rule-dialog-footer">
+        <span class="rule-count">共 {{ editingRules.length }} 条规则</span>
+        <el-button size="mini" @click="ruleDialogVisible = false"
+          >取消</el-button
+        >
+        <el-button size="mini" type="primary" @click="saveRules"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="额外参数"
+      :visible.sync="scriptParamDialogVisible"
+      v-if="scriptParamDialogVisible"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+    >
+      <div class="cont">
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="editingScriptParam"
+          ref="scriptParamEditor"
+        ></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="scriptParamDialogVisible = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="saveDynamicFieldScriptParam"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { fieldControlTreeOptions, commitLocalFieldRules } from "@base/components/xform/form-render/fieldControlEngine";
+import i18n from "../../../../components/xform/utils/i18n";
+
+const NO_VALUE_OPERATORS = ["empty", "notEmpty"];
+
+export default {
+  name: "form-dynamicField-setting",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    formConfig: Object,
+  },
+  data() {
+    return {
+      ruleDialogVisible: false,
+      scriptParamDialogVisible: false,
+      editingScriptParam: "",
+      editingRules: [],
+      operatorOptions: [
+        { label: "等于", value: "eq" },
+        { label: "不等于", value: "ne" },
+        { label: "大于", value: "gt" },
+        { label: "小于", value: "lt" },
+        { label: "大于等于", value: "ge" },
+        { label: "小于等于", value: "le" },
+        { label: "属于(逗号分隔)", value: "in" },
+        { label: "不属于(逗号分隔)", value: "nin" },
+        { label: "包含", value: "includes" },
+        { label: "为空", value: "empty" },
+        { label: "不为空", value: "notEmpty" },
+      ],
+    };
+  },
+  computed: {
+    fieldControlTreeState() {
+      const list = (this.designer && this.designer.widgetList) || [];
+      try {
+        return { options: fieldControlTreeOptions(list), error: "" };
+      } catch (error) {
+        return { options: [], error: error.message || "动态规则目标无效" };
+      }
+    },
+    // 带层级的字段/容器候选(整个表单)
+    treeOptions() {
+      return this.fieldControlTreeState.options;
+    },
+  },
+  methods: {
+    op_noValue(operator) {
+      return NO_VALUE_OPERATORS.indexOf(operator) > -1;
+    },
+    // 选中态/过滤用的纯文本标签
+    optPlainLabel(n) {
+      if (n.isContainer) {
+        return "[" + this.containerTypeLabel(n.type) + "] " + n.baseLabel;
+      }
+      return n.baseLabel;
+    },
+    containerTypeLabel(type) {
+      const map = {
+        grid: "栅格",
+        table: "表格布局",
+        "h5-table": "H5表格",
+        tab: "标签页",
+        "tab-pane": "标签项",
+        card: "卡片",
+        "vf-box": "区块",
+        panel: "面板",
+        detail: "单据详情",
+        "detail-plain": "单据详情(简洁)",
+        "detail-pane": "详情面板",
+        "detail-h5": "H5详情",
+        "h5-card": "H5卡片",
+        "h5-card-pane": "H5卡片面板",
+        "sub-form": "子表单",
+        "grid-sub-form": "网格子表单",
+      };
+      return map[type] || type;
+    },
+    genId() {
+      return "fdr_" + Date.now() + "_" + Math.floor(Math.random() * 10000);
+    },
+    editDynamicFieldScriptParam() {
+      this.editingScriptParam = this.formConfig.dynamicFieldScriptParam || "";
+      this.scriptParamDialogVisible = true;
+    },
+    saveDynamicFieldScriptParam() {
+      const codeHints = this.$refs.scriptParamEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (codeHints && codeHints.length > 0) {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
+            syntaxErrorFlag = true;
+          }
+        });
+        if (syntaxErrorFlag) {
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
+          return;
+        }
+      }
+      this.formConfig.dynamicFieldScriptParam = this.editingScriptParam;
+      this.scriptParamDialogVisible = false;
+    },
+    openRuleDialog() {
+      this.editingRules = JSON.parse(
+        JSON.stringify(this.formConfig.dynamicFieldRules || [])
+      );
+      this.editingRules.forEach((rule) => {
+        if (!rule.id) rule.id = this.genId();
+        if (!rule.logic) rule.logic = "and";
+        if (!rule.conditions) rule.conditions = [];
+        if (!rule.targets) rule.targets = [];
+      });
+      this.ruleDialogVisible = true;
+    },
+    addRule() {
+      this.editingRules.push({
+        id: this.genId(),
+        logic: "and",
+        conditions: [{ field: "", operator: "eq", value: "" }],
+        targets: [
+          {
+            field: "",
+            visible: undefined,
+            required: undefined,
+            readonly: undefined,
+            disabled: undefined,
+          },
+        ],
+      });
+    },
+    removeRule(idx) {
+      this.editingRules.splice(idx, 1);
+    },
+    addCondition(rule) {
+      rule.conditions.push({ field: "", operator: "eq", value: "" });
+    },
+    removeCondition(rule, idx) {
+      rule.conditions.splice(idx, 1);
+    },
+    addTarget(rule) {
+      rule.targets.push({
+        field: "",
+        visible: undefined,
+        required: undefined,
+        readonly: undefined,
+        disabled: undefined,
+      });
+    },
+    removeTarget(rule, idx) {
+      rule.targets.splice(idx, 1);
+    },
+    saveRules() {
+      try {
+        this.formConfig.dynamicFieldRules = commitLocalFieldRules(
+          this.editingRules, this.designer?.widgetList || []);
+        this.ruleDialogVisible = false;
+      } catch (error) { this.$message.error(error.message); }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tip-text {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+.tree-options-error {
+  color: #f56c6c;
+}
+
+.rule-list {
+  max-height: 56vh;
+  overflow-y: auto;
+}
+
+.rule-card {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  background: #fafafa;
+}
+
+.rule-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+
+  .rule-title {
+    font-weight: bold;
+    font-size: 13px;
+  }
+}
+
+.rule-section {
+  margin-top: 6px;
+}
+
+.rule-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 6px;
+}
+
+.rule-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+
+.cell-field {
+  width: 180px;
+}
+
+.cell-op {
+  width: 120px;
+}
+
+.cell-value {
+  width: 130px;
+}
+
+.cell-tri {
+  width: 92px;
+}
+
+.target-attr {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  .attr-label {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.danger-text {
+  color: #f56c6c;
+}
+
+.opt-container {
+  color: #409eff;
+}
+
+.opt-tag {
+  color: #909399;
+  font-size: 12px;
+  margin-right: 4px;
+}
+</style>
+
+<!-- 弹框挂载到 body，以独立类名隔离样式，并覆盖设置面板的控件宽度。 -->
+<style lang="scss">
+.el-dialog.dynamic-field-rule-dialog {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 32px);
+  max-height: 88vh;
+  margin-bottom: 0;
+  border-radius: 8px;
+
+  > .el-dialog__header {
+    flex: none;
+    padding: 20px 24px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  > .el-dialog__body {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 16px 24px;
+    overflow: hidden;
+  }
+
+  > .el-dialog__footer {
+    flex: none;
+    padding: 14px 24px;
+    border-top: 1px solid #ebeef5;
+  }
+
+  .rule-dialog-summary {
+    flex: none;
+    margin-bottom: 14px;
+    color: #909399;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .rule-list {
+    min-height: 0;
+    max-height: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+  }
+
+  .rule-empty {
+    padding: 40px 12px;
+    text-align: center;
+    color: #909399;
+  }
+
+  .rule-card {
+    padding: 0 16px 16px;
+    margin-bottom: 16px;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px;
+    background: #fff;
+  }
+
+  .rule-card-header {
+    min-height: 44px;
+    margin: 0 -16px 14px;
+    padding: 0 16px;
+    background: #f5f7fa;
+    border-bottom: 1px solid #ebeef5;
+    border-radius: 6px 6px 0 0;
+  }
+
+  .rule-title { font-size: 14px; color: #303133; }
+  .rule-section + .rule-section { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e4e7ed; }
+  .rule-section-title { margin-bottom: 12px; gap: 12px; }
+
+  .rule-row {
+    display: grid;
+    gap: 10px;
+    margin-bottom: 10px;
+    min-width: 0;
+  }
+
+  .condition-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 28px; }
+  .target-row {
+    grid-template-columns: repeat(4, minmax(0, 1fr)) 28px;
+    padding: 12px;
+    background: #fafbfd;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+  }
+
+  .target-row > .cell-field { grid-column: 1 / 5; }
+  .target-row > .row-remove { grid-column: 5; grid-row: 1; }
+  .target-attr { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
+  .target-attr .attr-label { color: #606266; font-size: 12px; line-height: 18px; }
+
+  .rule-row .el-select,
+  .rule-row .el-input,
+  .rule-row .cell-field,
+  .rule-row .cell-op,
+  .rule-row .cell-value,
+  .rule-row .cell-tri { width: 100% !important; min-width: 0; margin: 0; }
+
+  .row-remove { width: 28px; margin: 0; padding: 8px 0; }
+  .rule-dialog-footer { display: flex; align-items: center; gap: 10px; }
+  .rule-dialog-footer .el-button { margin: 0; }
+  .rule-count { margin-right: auto; font-size: 13px; color: #909399; }
+
+  @media (max-width: 600px) {
+    > .el-dialog__body { padding: 12px; }
+    .condition-row { grid-template-columns: minmax(0, 1fr) 28px; }
+    .condition-row > .cell-field { grid-column: 1; }
+    .condition-row > .row-remove { grid-column: 2; grid-row: 1; }
+    .condition-row > .cell-op, .condition-row > .cell-value { grid-column: 1; }
+    .target-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 28px; }
+    .target-row > .cell-field { grid-column: 1 / 3; }
+    .target-row > .row-remove { grid-column: 3; }
+    .target-attr:nth-of-type(odd) { grid-column: 1; }
+    .target-attr:nth-of-type(even) { grid-column: 2; }
+  }
+}
+</style>