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

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

@@ -0,0 +1,602 @@
+<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="数据来源">
+        <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="字段规则">
+          <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" label="脚本编码">
+          <el-input
+            v-model="formConfig.dynamicFieldScriptCode"
+            size="mini"
+            placeholder="scriptCode 或 formCode/scriptCode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="额外参数">
+          <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" 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>