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

package/src/components/xform/form-designer/widget-panel/index.vue

@@ -6,7 +6,7 @@
         <el-tab-pane v-if="showComponentLib" name="componentLib">
           <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.componentLib') }}</span>
 
-          <el-collapse v-model="activeNames" class="widget-collapse">
+          <el-collapse v-model="activeNames" class="widget-collapse" :key="currentLayoutType">
             <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
               <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
@@ -34,6 +34,7 @@
               </draggable>
             </el-collapse-item>
 
+            <template v-if="advancedFields.length">
             <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
               <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -47,8 +48,9 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            </template>
 
-            <!-- -->
+            <template v-if="customFields.length">
             <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
               <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -62,7 +64,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
-            <!-- -->
+            </template>
 
 
           </el-collapse>
@@ -71,7 +73,7 @@
         <el-tab-pane v-if="showMetadataLib" name="metadataLib">
           <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.metadataLib') }}</span>
 
-          <el-collapse v-model="metadataActiveNames" class="widget-collapse">
+          <el-collapse v-model="metadataActiveNames" class="widget-collapse" :key="currentLayoutType">
             <el-collapse-item name="0" :title="i18nt('designer.containerTitle')">
               <draggable tag="ul" :list="commonContainers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
@@ -97,6 +99,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            <template v-if="commonAdvancedFields.length">
             <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
               <draggable tag="ul" :list="commonAdvancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -110,6 +113,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            </template>
 
 
 
@@ -160,7 +164,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
-            <el-collapse-item name="compare" :title="i18nt('对比组件')">
+            <el-collapse-item v-if="currentLayoutType !== 'H5'" name="compare" :title="i18nt('对比组件')">
               <draggable tag="ul" :list="compareFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
                          :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
@@ -311,8 +315,8 @@ export default {
         background: #f1f2f3;
         font-size: 12px;
         padding-left: 12px;
-        > span{
-          display: flex;align-items: center;white-space: normal;line-height: 1.2;height: 35px;
+        > span{
+          display: flex;align-items: center;white-space: normal;line-height: 1.2;height: 35px;
         }
         svg {
           display: inline-block;

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

@@ -6,7 +6,8 @@ import {
   advancedFields,
   customFields,
   businessFields,
-  widgetPanelOrder
+  widgetPanelOrder,
+  h5PanelAllowTypes
 } from "./widgetsConfig"
 import {
   formTemplates
@@ -207,7 +208,7 @@ modules = {
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
         };
       }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
+        return !fld.internal && !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
       /* 面板分组归一：表单数据字段（搜索框/自动完成/级联/凭证/状态等）展示在基础字段分组 */
@@ -268,6 +269,14 @@ modules = {
         return !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
+      /* 空分组不渲染（见 index.vue 的 v-if），展开项按当前版式重算：
+         不能只做减法，否则从 H5 切回 PC 时分组回来了却是收起状态 */
+      this.activeNames = ["1", "2"]
+        .concat(this.advancedFields.length ? ["3"] : [])
+        .concat(this.customFields.length ? ["4"] : []);
+      this.metadataActiveNames = ["0", "1", "2", "4"]
+        .concat(this.commonAdvancedFields.length ? ["3"] : []);
+
     },
 
     /* 按 widgetPanelOrder 排序面板展示列表；未列出的类型（含扩展组件）排在末尾，保持原有相对顺序 */
@@ -354,6 +363,10 @@ modules = {
       let flag = !ftd.layoutType || ftd.layoutType === layoutType;
       let flag2 = this.checkColumnFlag(ftd)
       let flag3 = !!ftd.commonFlag
+      /* H5 面板按白名单收口，PC 不受影响 */
+      if (layoutType === "H5") {
+        flag = flag && h5PanelAllowTypes.indexOf(ftd.type) > -1;
+      }
       return flag && flag2 && flag3;
     }
   }

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

@@ -51,6 +51,7 @@ export const containers = [
     category: "container",
     icon: "table",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     rows: [],
     options: {
@@ -341,6 +342,7 @@ export const containers = [
     category: "container",
     icon: "text-field",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     widgetList: [],
     options: {
@@ -716,6 +718,7 @@ export const containers = [
     category: "container",
     icon: "tree-pane",
     commonFlag: !0,
+    layoutType: "PC",
     leftWidgetList: [],
     widgetList: [],
     options: {
@@ -771,7 +774,7 @@ export const containers = [
       name: "",
       hidden: !1,
       customClass: "",
-      fullWidth: false,
+      fullWidth: true,
     },
   },
   {
@@ -795,6 +798,7 @@ export const containers = [
     icon: "tree",
     category: "container",
     commonFlag: !0,
+    layoutType: "PC",
     widgetList: [],
     options: {
       name: "tree",
@@ -1174,6 +1178,7 @@ export const basicFields = [
     type: "input-batch",
     icon: "input-batch",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     columnFlag: true,
     tableField: null,
@@ -2071,6 +2076,7 @@ export const basicFields = [
     type: "html-text",
     icon: "html-text",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     columnFlag: false,
     options: {
@@ -2397,6 +2403,7 @@ export const advancedFields = [
     type: "echart-pie",
     icon: "echart-pie",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -2501,6 +2508,7 @@ export const advancedFields = [
     type: "echart-bar",
     icon: "echart",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -2691,6 +2699,7 @@ export const advancedFields = [
     type: "echart-category",
     icon: "echart-category",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -3264,6 +3273,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     tableField: null,
     options: {
@@ -3293,6 +3303,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     options: {
       name: "",
@@ -3324,6 +3335,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     options: {
       name: "",
@@ -3396,6 +3408,7 @@ export const advancedFields = [
     type: "import-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3448,6 +3461,7 @@ export const advancedFields = [
     type: "import2-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3496,6 +3510,7 @@ export const advancedFields = [
     type: "print-button",
     icon: "el-icon-printer",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3537,6 +3552,7 @@ export const advancedFields = [
     type: "print-detail-button",
     icon: "el-icon-printer",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: false,
     formItemFlag: !1,
     options: {
@@ -3654,6 +3670,7 @@ export const advancedFields = [
     type: "census",
     icon: "census",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -3720,6 +3737,7 @@ export const advancedFields = [
     category: "container",
     icon: "tree-table",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     rows: [],
     options: {
@@ -3796,6 +3814,7 @@ export const advancedFields = [
     type: "gantt",
     icon: "chart",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     options: {
       name: "",
@@ -3818,6 +3837,7 @@ export const advancedFields = [
     type: "download-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3856,6 +3876,7 @@ export const advancedFields = [
     type: "vue-page",
     icon: "vue-sfc",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     columnFlag: false,
     options: {
@@ -4104,6 +4125,8 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    /* H5 业务组件只保留创建人/更新人/创建时间/更新时间 */
+    layoutType: "PC",
     tableField: null,
     options: {
       ...vabsearchConfig,
@@ -4127,6 +4150,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...vabsearchConfig,
@@ -4151,6 +4175,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...projectTagConfig,
@@ -4172,6 +4197,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...projectTagConfig,
@@ -4234,6 +4260,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !1,
+    layoutType: "PC",
     options: {
       name: "",
       label: "复制",
@@ -4264,6 +4291,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !1,
+    layoutType: "PC",
     options: {
       name: "",
       // label: "暂存",
@@ -4286,6 +4314,7 @@ export const businessFields = [
     type: "oplog",
     icon: "list",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     options: {
       name: "",
@@ -4308,6 +4337,7 @@ export const businessFields = [
     icon: "file-upload-field",
     commonFlag: !0,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       name: "",
@@ -4653,6 +4683,28 @@ export const widgetPanelOrder = {
   ],
 };
 
+/**
+ * H5 版式左侧组件面板白名单（仅影响面板展示，不影响已有模板渲染与按 type 查找）。
+ * 容器：H5详情 / H5列表 / H5卡片 / h5表格
+ * 基础字段：文本、状态、凭证、下拉选项
+ *   （status / vabUpload 定义在 advancedFields，面板会归入基础字段）
+ * 业务组件：创建人、更新人、创建时间、更新时间
+ */
+export const h5PanelAllowTypes = [
+  "detail-h5",
+  "list-h5",
+  "h5-card",
+  "h5-table",
+  "text",
+  "status",
+  "vabUpload",
+  "select",
+  "create_by-text",
+  "modify_by-text",
+  "create_date-text",
+  "modify_date-text",
+];
+
 /**
  * H5 版式：所有表单字段统一具备 h5Span（整宽/半宽）。
  *

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)：点行是勾选，保持原行为；