cloud-web-corejs 1.1.0-dev.5 → 1.1.0-dev.7

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -111,7 +111,12 @@
                 <template
                   v-else-if="column.slots && column.slots.default == 'widget'"
                 >
+                  <!-- 临时只读：只出选中文本；关掉 H5_TEMP_READ_ONLY 后仍走下面的控件 -->
+                  <template v-if="getReadMode()">
+                    {{ getColumnDisplayText(column, row, rowIndex) }}
+                  </template>
                   <component
+                    v-else
                     :is="getColumnWidgetName(column.params.widget)"
                     :field="column.params.widget"
                     :form-model="globalModel.formModel"
@@ -230,12 +235,90 @@
                           }}
                         </template>
 
-                        <!-- 明细行只出纯文本：编辑控件(widget)与操作链接
-                             (editDelete/editButton)都不在行上渲染，点整行进详情，
-                             详情弹框里才是可编辑的控件。 -->
-                        <template v-else>
+                        <!-- 临时只读：行上只出选中文本。控件/操作链接不能删，
+                             关掉 H5_TEMP_READ_ONLY 后仍要能编辑。 -->
+                        <template v-else-if="getReadMode()">
                           {{ getColumnDisplayText(column, row, rowIndex) }}
                         </template>
+                        <template
+                          v-else-if="
+                            column.slots && column.slots.default == 'widget'
+                          "
+                        >
+                          <component
+                            :is="getColumnWidgetName(column.params.widget)"
+                            :field="column.params.widget"
+                            :form-model="globalModel.formModel"
+                            :designer="null"
+                            :key="rowIndex + '-' + columnIndex"
+                            :parent-widget="widget"
+                            :columnConfig="column.params.columnConfig"
+                            :subFormRowIndex="rowIndex"
+                            :formItemProp="
+                              getColumnProp(widget, {
+                                column: column,
+                                rowIndex: rowIndex,
+                                row: row,
+                                items: fieldModel,
+                              })
+                            "
+                            :tableParam="{
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            }"
+                          ></component>
+                        </template>
+                        <template
+                          v-else-if="column.params.formatS == 'editDelete'"
+                        >
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click="deleteRow(row, rowIndex)"
+                          >
+                            <el-tooltip
+                              :enterable="false"
+                              effect="dark"
+                              content="删除"
+                              placement="top"
+                              popper-class="tooltip-skin"
+                            >
+                              <i class="el-icon-delete" />
+                            </el-tooltip>
+                          </a>
+                        </template>
+                        <template
+                          v-else-if="column.params.formatS == 'editButton'"
+                        >
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click.stop="openEditDialog(row)"
+                          >
+                            <el-tooltip
+                              :enterable="false"
+                              effect="dark"
+                              content="查看"
+                              placement="top"
+                              popper-class="tooltip-skin"
+                            >
+                              <i class="el-icon-edit" />
+                            </el-tooltip>
+                          </a>
+                        </template>
+                        <template v-else>
+                          {{
+                            column.formatter({
+                              cellValue: row[column.field],
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            })
+                          }}
+                        </template>
                       </dd>
                     </div>
                   </dl>
@@ -377,7 +460,8 @@
       width="100%"
       top="0px"
       v-el-drag-dialog
-      v-el-dialog-center
+      v-el-dialog-center
+      :append-to-body	="true"
       :destroy-on-close="true"
     >
       <div class="cont" style="height: calc(100vh - 73px)">
@@ -699,6 +783,7 @@ export default {
     "globalModel",
     "getFormConfig",
     "getGlobalDsv",
+    "getReadMode",
   ],
   data: function () {
     let that = this;
@@ -1466,6 +1551,9 @@ export default {
       return newData;
     },
     addTableData(rows, field) {
+      if (this.getReadMode && this.getReadMode()) {
+        return;
+      }
       let formDataModel = this.formModel;
       let tableRows = this.fieldModel;
       let fullData = this.fieldModel;
@@ -1500,30 +1588,33 @@ export default {
     },
     getColumnWidgetConfig(row) {
       let formRef = this.getFormRef();
-      let formatS = row.formatS;
       let columnSelectedWidget = null;
       let columnEditFields = null;
-
       let type = this.columnFormatMap[row.formatS];
 
       if (type) {
-        columnSelectedWidget = this.$baseLodash.cloneDeep(
-          formRef.getFieldWidgetByType(type)
-        );
-        let tmpId = generateId();
-        let idVal = row.prop ? row.prop : type + tmpId;
-        columnSelectedWidget.id = idVal;
-        columnSelectedWidget.options.name = idVal;
-        if (row.columnOption && Object.keys(row.columnOption).length) {
-          row.columnOption.required = row.required || false;
-          columnSelectedWidget.options = row.columnOption;
+        // 格式化配置写在 row.widget（含 optionItems）；老数据才落在 columnOption。
+        // 不能每次从字段模板重建，否则下拉选项丢失，行上只能看到 value。
+        if (row.widget && row.widget.type) {
+          columnSelectedWidget = this.$baseLodash.cloneDeep(row.widget);
         } else {
-          columnSelectedWidget.options.required = row.required || false;
-          row.columnOption = columnSelectedWidget.options;
+          columnSelectedWidget = this.$baseLodash.cloneDeep(
+            formRef.getFieldWidgetByType(type)
+          );
+          let tmpId = generateId();
+          let idVal = row.prop ? row.prop : type + tmpId;
+          columnSelectedWidget.id = idVal;
+          if (row.columnOption && Object.keys(row.columnOption).length) {
+            columnSelectedWidget.options = row.columnOption;
+          }
+        }
+        if (!columnSelectedWidget.options) {
+          columnSelectedWidget.options = {};
         }
         columnSelectedWidget.options.name = row.prop;
         columnSelectedWidget.options.label = row.label;
         columnSelectedWidget.options.labelHidden = true;
+        columnSelectedWidget.options.required = row.required || false;
       }
       return { columnSelectedWidget, columnEditFields };
     },
@@ -1631,18 +1722,17 @@ export default {
     /**
      * 明细行的显示文本。
      *
-     * 行上不渲染编辑控件，所以有选项的列（下拉/状态/单选/多选）必须自己把
-     * value 换成 label —— 否则状态列会显示成 1 而不是「审核中」，
-     * 因为 formatterValue 只做日期与数字格式化，不查选项表。
+     * H5 只读：行上不渲染下拉框，只出选中项文本。
+     * 有选项的列必须自己把 value 换成 label，formatterValue 不做选项映射。
      */
     getColumnDisplayText(column, row, rowIndex) {
       let value = row[column.field];
       let columnWidget = column.params ? column.params.widget : null;
-      let widgetOptions = (columnWidget && columnWidget.options) || {};
-      let optionList = widgetOptions.optionItems || widgetOptions.statusParam;
-      if (optionList && optionList.length) {
-        let hit = optionList.filter((o) => String(o.value) === String(value))[0];
-        if (hit) return hit.label;
+      if (columnWidget) {
+        let mapped = this.getWidgetOptionLabel(columnWidget, value);
+        if (mapped != null && mapped !== "") {
+          return mapped;
+        }
       }
       return column.formatter({
         cellValue: value,
@@ -1652,6 +1742,43 @@ export default {
         items: this.fieldModel,
       });
     },
+    getOptionItemValueKey(widget) {
+      let options = (widget && widget.options) || {};
+      if (options.commonAttributeEnabled) {
+        return options.valueKey || "sn";
+      }
+      return options.valueKey || "value";
+    },
+    getOptionItemLabelKey(widget) {
+      let options = (widget && widget.options) || {};
+      if (options.commonAttributeEnabled) {
+        return options.labelKey || "value";
+      }
+      return options.labelKey || "label";
+    },
+    getWidgetOptionLabel(fieldWidget, fieldModel) {
+      if (fieldModel === null || fieldModel === undefined || fieldModel === "") {
+        return fieldModel;
+      }
+      let options = (fieldWidget && fieldWidget.options) || {};
+      let optionList = options.optionItems || options.statusParam;
+      if (!Array.isArray(optionList) || !optionList.length) {
+        return null;
+      }
+      let labelField = this.getOptionItemLabelKey(fieldWidget);
+      let valueField = this.getOptionItemValueKey(fieldWidget);
+      let values = Array.isArray(fieldModel) ? fieldModel : [fieldModel];
+      let labels = values.map((val) => {
+        let item = optionList.find(
+          (o) => o[valueField] === val || String(o[valueField]) === String(val)
+        );
+        if (!item) return null;
+        let label = item[labelField];
+        return this.$t1 ? this.$t1(label) : label;
+      });
+      let hit = labels.filter((x) => x != null && x !== "");
+      return hit.length ? hit.join(",") : null;
+    },
     /**
      * 行点击：
      * - 查询选择场景(isQueryTable)：点行是勾选，保持原行为；

package/src/components/xform/form-render/indexMixin.js

@@ -69,6 +69,9 @@ import {
   resolveTreeSubmitConfig,
 } from "../utils/treeTableUtil";
 
+/* 暂时：H5 运行时整表只读（设计器画布不受影响）。打开 H5 编辑时改 false 即可。 */
+const H5_TEMP_READ_ONLY = true;
+
 let modules = {};
 const baseRefUtil = {
   emitter,
@@ -184,7 +187,7 @@ modules = {
       },
       previewState: this.previewState,
       getReadMode: function () {
-        return e.readModeFlag;
+        return e.getReadMode();
       },
       getSubFormFieldFlag: function () {
         return !1;
@@ -350,6 +353,15 @@ modules = {
         : "";
     },
 
+    /** 暂时：H5 版式强制只读 */
+    isH5TempReadOnly() {
+      return (
+        H5_TEMP_READ_ONLY &&
+        !!this.formConfig &&
+        this.formConfig.layoutType === "H5"
+      );
+    },
+
     formModel() {
       return this.formDataModel;
     },
@@ -362,6 +374,7 @@ modules = {
     this.currentFormData = this.formData;
 
     this.initGlobalConfig(); //初始化全局配置
+    this.applyH5TempReadOnly();
     this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList);
 
     // this.handleOnCreated(),
@@ -2055,6 +2068,7 @@ modules = {
             this.$set(this.formJsonObj, "formConfig", i.formConfig),
             (this._provided.formConfig = i.formConfig),
             this.$set(this.formJsonObj, "widgetList", i.widgetList),
+            this.applyH5TempReadOnly(),
             this.insertCustomStyleAndScriptNode(),
             this.$nextTick(function () {
               t.initFormObject(!1), t.handleOnMounted();
@@ -3598,10 +3612,16 @@ modules = {
     setReadMode: function () {
       let e =
         !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
-      this.readModeFlag = e;
+      /* H5 暂时只读：不允许关掉 */
+      this.readModeFlag = this.isH5TempReadOnly ? true : e;
     },
     getReadMode: function () {
-      return this.readModeFlag;
+      return this.readModeFlag || this.isH5TempReadOnly;
+    },
+    applyH5TempReadOnly() {
+      if (this.isH5TempReadOnly) {
+        this.readModeFlag = true;
+      }
     },
     getGlobalDsv: function () {
       return this.globalDsv;