cloud-web-corejs 1.0.54-dev.677 → 1.0.54-dev.679

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

@@ -0,0 +1,158 @@
+<template>
+  <form-item-wrapper
+    :designer="designer"
+    :field="field"
+    :rules="rules"
+    :design-state="designState"
+    :parent-widget="parentWidget"
+    :parent-list="parentList"
+    :index-of-parent-list="indexOfParentList"
+    :sub-form-row-index="subFormRowIndex"
+    :sub-form-col-index="subFormColIndex"
+    :sub-form-row-id="subFormRowId"
+  >
+    <baseArea
+      v-show="!isReadMode"
+      class="full-width-input"
+      :style="widgetStyle"
+      v-model="fieldModel"
+      :label-value.sync="areaLabel"
+      :max-level="maxLevel"
+      :locale="field.options.locale"
+      :disabled="field.options.disabled"
+      :readonly="field.options.readonly"
+      :clearable="field.options.clearable"
+      :placeholder="getI18nLabel(field.options.placeholder || '请选择地区')"
+      :size="field.options.size || 'small'"
+      @change="handleAreaChange"
+    />
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field">{{ readModeText }}</span>
+    </template>
+  </form-item-wrapper>
+</template>
+
+<script>
+import FormItemWrapper from "./form-item-wrapper";
+import emitter from "../../../../../components/xform/utils/emitter";
+import i18n from "../../../../../components/xform/utils/i18n";
+import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import baseArea from "@base/components/baseArea/index.vue";
+
+export default {
+  name: "area-select-widget",
+  componentName: "FieldWidget",
+  mixins: [emitter, fieldMixin, i18n],
+  components: {
+    FormItemWrapper,
+    baseArea,
+  },
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+    subFormRowIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      type: String,
+      default: "",
+    },
+  },
+  inject: ["refList", "globalOptionData", "globalModel"],
+  data() {
+    return {
+      oldFieldValue: null,
+      fieldModel: null,
+      areaLabel: null,
+      rules: [],
+    };
+  },
+  computed: {
+    currentData() {
+      let tableParam = this.tableParam;
+      return tableParam && tableParam.row ? tableParam.row : this.formModel;
+    },
+    areaNameField() {
+      return this.field.options.areaName || null;
+    },
+    maxLevel() {
+      const areaDataType = this.field.options.areaDataType * 1 || 3;
+      if (areaDataType === 1) return 2;
+      if (areaDataType === 2) return 3;
+      return 4;
+    },
+    readModeText() {
+      return this.areaLabel || this.currentAreaNameValue || "--";
+    },
+    widgetStyle() {
+      const widgetWidth = this.field.options.widgetWidth;
+      if (widgetWidth != null && widgetWidth !== "") {
+        return { width: widgetWidth };
+      }
+      return { width: "100%" };
+    },
+    currentAreaNameValue() {
+      if (!this.areaNameField) {
+        return null;
+      }
+      return this.currentData[this.areaNameField] ?? null;
+    },
+  },
+  watch: {
+    currentAreaNameValue: {
+      immediate: true,
+      handler(val) {
+        this.areaLabel = val;
+      },
+    },
+  },
+  created() {
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    syncAreaName(label) {
+      if (this.areaNameField) {
+        this.$set(this.currentData, this.areaNameField, label);
+      }
+    },
+    handleAreaChange(row) {
+      const label = row ? row.fullName || row.name || null : null;
+      this.areaLabel = label;
+      this.syncAreaName(label);
+      this.handleChangeEvent(this.fieldModel);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.full-width-input {
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box;
+}
+</style>

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

@@ -128,10 +128,14 @@
         >{{ i18nt("designer.setting.editAction") }}
       </el-button>
     </el-form-item>
-    <div class="dynamic-column-hint">
-      动态列来源<strong>二选一</strong>：前端列脚本（同步算列）或接口动态列（后端拉取）。同时配置时<strong>列脚本优先</strong>。
-    </div>
-    <div class="dynamic-column-block">
+    <el-form-item label="动态列来源">
+      <el-radio-group v-model="optionModel.dynamicColumnSourceType">
+        <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.dynamicColumnSourceType === 'script'" class="dynamic-column-block">
       <div class="form-section-label">前端列脚本</div>
       <div class="form-section-desc">不调接口，脚本直接 return 列配置</div>
       <div class="data-table-editor-subsection">
@@ -149,83 +153,78 @@
         </el-form-item>
       </div>
     </div>
-    <div class="dynamic-column-block">
+    <div v-if="optionModel.dynamicColumnSourceType === 'api'" class="dynamic-column-block">
       <div class="form-section-label">接口动态列</div>
       <div class="form-section-desc">打开表单时请求后端脚本，返回列配置</div>
       <div class="data-table-editor-subsection">
-        <el-form-item label="启用">
-          <el-switch
-            v-model="optionModel.dynamicColumnScriptEnabled"
-          ></el-switch>
+        <el-form-item label="脚本编码">
+          <el-input
+            v-model="optionModel.dynamicColumnScriptCode"
+            clearable
+            placeholder="如 getDynamicColumns"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="请求参数">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnScriptParam', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnScriptParam }}</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" style="line-height: 1.4; max-width: 320px">
+                将接口返回的
+                <code>res</code> 转为列数组；不配置则按平台默认结构解析。
+              </div>
+              <i class="el-icon-info"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
+          >
+            <span>{{ optionModel.onDynamicColumnsConvert }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div v-if="optionModel.dynamicColumnSourceType !== '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" style="line-height: 1.4; max-width: 320px">
+                表格初始化加载动态列前执行。<br />
+                <code>return false</code> 时不加载；不配置则默认加载。
+              </div>
+              <i class="el-icon-info"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnLoadScript', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnLoadScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
         </el-form-item>
-        <template v-if="optionModel.dynamicColumnScriptEnabled">
-          <el-form-item label="脚本编码">
-            <el-input
-              v-model="optionModel.dynamicColumnScriptCode"
-              clearable
-              placeholder="如 getDynamicColumns"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="请求参数">
-            <a
-              href="javascript:void(0);"
-              class="a-link link-oneLind"
-              @click="
-                editEventHandler('dynamicColumnScriptParam', tableConfigParams)
-              "
-            >
-              <span>{{ optionModel.dynamicColumnScriptParam }}</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" style="line-height: 1.4; max-width: 320px">
-                  将接口返回的
-                  <code>res</code> 转为列数组；不配置则按平台默认结构解析。
-                </div>
-                <i class="el-icon-info"></i>
-              </el-tooltip>
-            </span>
-            <a
-              href="javascript:void(0);"
-              class="a-link link-oneLind"
-              @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
-            >
-              <span>{{ optionModel.onDynamicColumnsConvert }}</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" style="line-height: 1.4; max-width: 320px">
-                  启用后打开表单时<strong>默认</strong>自动请求动态列。<br />
-                  同步：仅写 <code>return false</code> /
-                  <code>return null</code> 跳过。<br />
-                  异步：先写异步逻辑，末尾
-                  <code>return false</code>；条件满足时调用
-                  <code>done()</code>（无参）。
-                </div>
-                <i class="el-icon-info"></i>
-              </el-tooltip>
-            </span>
-            <a
-              href="javascript:void(0);"
-              class="a-link link-oneLind"
-              @click="editEventHandler('dynamicColumnAutoLoadScript', ['done'])"
-            >
-              <span>{{ optionModel.dynamicColumnAutoLoadScript }}</span>
-              <i class="el-icon-edit"></i>
-            </a>
-          </el-form-item>
-        </template>
       </div>
     </div>
-    <el-form-item label="动态列模式">
+    <el-form-item v-if="optionModel.dynamicColumnSourceType !== 'none'" label="动态列模式">
       <span slot="label">
         动态列模式
         <el-tooltip effect="light" placement="top">

package/src/components/xform/form-designer/setting-panel/property-editor/field-area-select/areaDataType-editor.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.areaDataType')">
+    <el-select v-model="optionModel.areaDataType" style="width: 100%">
+      <el-option :label="i18nt('designer.setting.areaDataType1')" :value="1" />
+      <el-option :label="i18nt('designer.setting.areaDataType2')" :value="2" />
+      <el-option :label="i18nt('designer.setting.areaDataType3')" :value="3" />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "@base/components/xform/utils/i18n";
+import propertyMixin from "@base/components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+
+export default {
+  name: "areaDataType-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/property-editor/field-area-select/areaName-editor.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.areaName')">
+    <el-input v-model="optionModel.areaName" :placeholder="i18nt('designer.setting.areaNameHint')" />
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "@base/components/xform/utils/i18n";
+import propertyMixin from "@base/components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+
+export default {
+  name: "areaName-editor",
+  mixins: [i18n, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -82,6 +82,8 @@ const COMMON_PROPERTIES = {
   echarBarOption: "echart-bar-editor", //柱状图
   echarCategoryOption: "echart-category-editor", //折线图
   vabSearchName: "vabSearchName-editor",
+  areaName: "areaName-editor",
+  areaDataType: "areaDataType-editor",
   copyButton: "copyButton-editor",
   tempStorageFlag: "tempStorage-editor",
   formatType: "formatType-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -235,12 +235,12 @@ export const containers = [
       onSearchTable: "",
       onResetTable: "",
       dynamicColumnsScript: null,
+      dynamicColumnSourceType: "none",
       dynamicColumnMode: "append",
-      dynamicColumnScriptEnabled: false,
       dynamicColumnScriptCode: null,
       dynamicColumnScriptParam: null,
       onDynamicColumnsConvert: null,
-      dynamicColumnAutoLoadScript: null,
+      dynamicColumnLoadScript: null,
       accessType: "1",
       accessUrl: null,
       accessReturnType: "1",
@@ -1393,6 +1393,58 @@ export const basicFields = [
       showRules: [],
     },
   },
+  {
+    type: "area-select",
+    icon: "select-field",
+    commonFlag: !0,
+    formItemFlag: !0,
+    columnFlag: true,
+    tableField: null,
+    options: {
+      name: "",
+      keyNameEnabled: !1,
+      keyName: "",
+      label: "",
+      labelColor: "",
+      submitFlag: true,
+      formField: "",
+      labelAlign: "",
+      defaultValue: null,
+      placeholder: "",
+      columnWidth: "200px",
+      widgetWidth: null,
+      size: "",
+      labelWidth: null,
+      labelHidden: !1,
+      readonly: !1,
+      disabled: !1,
+      hidden: !1,
+      clearable: !0,
+      required: !1,
+      requiredHint: "",
+      validation: "",
+      validationHint: "",
+      customClass: "",
+      labelIconClass: null,
+      labelIconPosition: "rear",
+      labelTooltip: null,
+      areaName: "",
+      areaDataType: 3,
+      locale: null,
+      onCreated: "",
+      onMounted: "",
+      onChange: "",
+      onFocus: "",
+      onBlur: "",
+      onValidate: "",
+      accessType: "1",
+      ...defaultWfConfig,
+      showRuleFlag: 1,
+      showRuleEnabled: 1,
+      showRules: [],
+      ...defaultTextFlagConfig,
+    },
+  },
   {
     type: "time",
     icon: "time-field",