cloud-web-corejs 1.0.284 → 1.0.285

package/src/directive/append-to-body/index.js

@@ -0,0 +1,48 @@
+/**version-1.0*/
+/**
+ * v-append-to-body —— 把元素搬到 document.body 下，脱离宿主子树。
+ *
+ * 用途：那些视觉上是全屏浮层、但写死在业务模板里的 div（如移动版流程的
+ * 通过/驳回/中断/转办/加签确认框）。它们靠 `position:fixed` 定位，一旦祖先出现
+ * transform / filter / display:none 就会失效或被裁掉。搬到 body 下即可根治，
+ * 且不必把它们改造成 el-dialog（造型差太远，改了样式量不减反增）。
+ *
+ * ★ 必须配 v-show 用，不能配 v-if。
+ *   Vue 2 的 patch 在插入节点时要拿兄弟节点当参照物：
+ *     function insert (parent, elm, ref) {
+ *       if (isDef(ref)) { if (nodeOps.parentNode(ref) === parent) { ... } }
+ *     }
+ *   本指令把节点搬走后，它的 parentNode 变成了 body、不再等于宿主元素，于是
+ *   以它为参照物的那次插入会被这个判断**静默跳过**（不报错，但节点没插进去），
+ *   兄弟节点的顺序随之错乱。v-show 不产生插入/移除，节点从头到尾只搬一次，
+ *   没有这个问题 —— element-ui 自己的 append-to-body 弹框也是用 v-show，
+ *   不是 v-if，同一个原因。
+ *
+ * ★ 元素上原有的 `display` 内联值要保留。
+ *   v-show 记的 originalDisplay 取自 `el.style.display`；如果元素本身靠内联
+ *   `style="display: block;"` 顶掉某条 `.xxx{display:none}` 的全局规则，把内联值
+ *   删了会让「显示」态退回 display:none，表现为点了没反应。
+ */
+let modules = {};
+
+modules = {
+  install: function (Vue) {
+    Vue.directive("append-to-body", {
+      inserted(el) {
+        if (el.parentNode !== document.body) {
+          document.body.appendChild(el);
+        }
+      },
+      unbind(el) {
+        // 配 v-show 时切换显隐不会走到这里，只有宿主组件销毁才会。
+        // 那时节点在 body 下、已不在宿主子树里，宿主自身的 DOM 移除够不着它——
+        // 不在这里摘掉就会永久留在 body 上（每进出一次详情页泄漏一份）。
+        if (el.parentNode) {
+          el.parentNode.removeChild(el);
+        }
+      },
+    });
+  },
+};
+
+export default modules;

package/src/index.js

@@ -167,6 +167,10 @@ import elReadonly from "@base/directive/el-readonly/index.js";
 
 Vue.use(elReadonly);
 
+import appendToBody from "@base/directive/append-to-body/index.js";
+
+Vue.use(appendToBody.install);
+
 /*import cnPrint from "@base/components/cnPrint/index.js"
 
 Vue.use(cnPrint);*/

package/src/views/bd/setting/form_template/edit.vue

@@ -91,20 +91,42 @@
                     </el-form-item>
                   </td>
                 </tr>
+                <tr>
+                  <th>
+                    <em class="f-red" v-if="!formTemplate.id">*</em>
+                    {{ $t1("模板类型") }}
+                  </th>
+                  <td colspan="3">
+                    <el-radio-group
+                      v-model="templateType"
+                      v-if="!formTemplate.id"
+                    >
+                      <el-radio label="PC">{{ $t1("PC端") }}</el-radio>
+                      <el-radio label="H5">{{ $t1("移动端") }}</el-radio>
+                    </el-radio-group>
+                    <template v-else>
+                      {{ templateTypeText }}
+                    </template>
+                  </td>
+                </tr>
                 <tr>
                   <th>{{ $t1("模板编码") }}</th>
                   <td colspan="3">
                     <el-form-item
                       prop="formCode"
-                      :rules="[{ required: true, trigger: 'blur' }]"
+                      :rules="formCodeRules"
                       v-if="!formTemplate.id"
                     >
                       <el-input
                         type="text"
                         autocomplete="off"
-                        v-model="formTemplate.formCode"
+                        v-model="formCodeInput"
                         clearable
-                      />
+                      >
+                        <template #prepend v-if="isH5Template">
+                          {{ h5FormCodePrefix }}
+                        </template>
+                      </el-input>
                     </el-form-item>
                     <template v-else>
                       {{ formTemplate.formCode }}

package/src/views/bd/setting/form_template/formDesignerDialog.vue

@@ -26,6 +26,7 @@
           :sourceData="sourceData"
           :formTemplate="formTemplate"
           :jsonFlag="jsonFlag"
+          :defaultLayoutType="defaultLayoutType"
         ></designer>
       </el-tab-pane>
       <el-tab-pane :label="$t1('后端脚本')" name="second" v-if="showFormScript">
@@ -87,6 +88,11 @@ export default {
     widgetList: Array,
     columnFlag: Boolean,
     sourceData: Object,
+    /* 进入设计器时的默认布局模式（临时模式，不写死模板） */
+    defaultLayoutType: {
+      type: String,
+      default: "",
+    },
   },
   components: {
     designer: () => import("@base/views/user/form/vform/designer.vue"),

package/src/views/bd/setting/form_template/formTemplateType.js

@@ -0,0 +1,43 @@
+/**
+ * 表单模板「模板类型」（PC端 / 移动端）
+ *
+ * 模板类型不是数据库字段，只在新增时维护：选择移动端后模板编码固定加前缀 h5_，
+ * 之后一律由 formCode 前缀反推类型，列表展示、编辑态回显、设计器默认布局共用此处。
+ */
+export const H5_FORM_CODE_PREFIX = "h5_";
+
+export const TEMPLATE_TYPE_PC = "PC";
+export const TEMPLATE_TYPE_H5 = "H5";
+
+/** 模板编码是否为移动端模板 */
+export function isH5FormTemplate(formCode) {
+  return (
+    typeof formCode === "string" && formCode.indexOf(H5_FORM_CODE_PREFIX) === 0
+  );
+}
+
+/** 去掉移动端前缀，返回编码主体 */
+export function stripH5Prefix(formCode) {
+  if (!isH5FormTemplate(formCode)) {
+    return formCode || "";
+  }
+  return formCode.slice(H5_FORM_CODE_PREFIX.length);
+}
+
+/** 按模板类型给编码补/去前缀，重复调用不会叠加前缀 */
+export function applyTemplateTypeToFormCode(formCode, templateType) {
+  let code = stripH5Prefix(formCode);
+  return templateType === TEMPLATE_TYPE_H5 ? H5_FORM_CODE_PREFIX + code : code;
+}
+
+/** 由模板编码推导模板类型 */
+export function getTemplateTypeByFormCode(formCode) {
+  return isH5FormTemplate(formCode) ? TEMPLATE_TYPE_H5 : TEMPLATE_TYPE_PC;
+}
+
+/**
+ * 进入设计器时的布局模式：由模板类型决定，进入后不允许在工具栏切换
+ */
+export function getDesignerLayoutType(formCode) {
+  return isH5FormTemplate(formCode) ? "H5" : "PC";
+}

package/src/views/bd/setting/form_template/list.vue

@@ -227,6 +227,7 @@
       @reflushTemplateList="reflushTemplateList"
       :readonly="designerReadonly"
       :formTemplate="currentFormTemplate"
+      :defaultLayoutType="designerLayoutType"
     ></formDesignerDialog>
     <el-dialog
       :title="$t1('流程设计')"

package/src/views/bd/setting/form_template/mixins/edit.js

@@ -4,6 +4,14 @@ import preformDialog from "@base/views/bd/setting/form_template/preformDialog.vu
 import formOplogTable from "@base/components/formOplog/index.vue";
 import { getBdFlag } from "@base/api/user";
 import otherAuthDialog from "../otherAuthDialog.vue";
+import {
+  H5_FORM_CODE_PREFIX,
+  TEMPLATE_TYPE_PC,
+  applyTemplateTypeToFormCode,
+  getTemplateTypeByFormCode,
+  isH5FormTemplate,
+  stripH5Prefix,
+} from "../formTemplateType.js";
 
 let modules = {};
 modules = {
@@ -33,6 +41,8 @@ modules = {
   data() {
     return {
       isEdit: false,
+      /* 模板类型不是数据库字段，只在新增时维护，不能挂到 formTemplate 上（保存会整体提交） */
+      templateType: TEMPLATE_TYPE_PC,
       tabIndex: "first",
       dataId: "",
       formTemplate: {
@@ -71,6 +81,58 @@ modules = {
       isCompare: false,
     };
   },
+  computed: {
+    h5FormCodePrefix() {
+      return H5_FORM_CODE_PREFIX;
+    },
+    isH5Template() {
+      return isH5FormTemplate(this.formTemplate.formCode);
+    },
+    templateTypeText() {
+      return this.isH5Template ? this.$t1("移动端") : this.$t1("PC端");
+    },
+    /* 移动端模板编码带固定前缀，输入框里只让用户维护前缀之后的部分 */
+    formCodeInput: {
+      get() {
+        return stripH5Prefix(this.formTemplate.formCode);
+      },
+      set(val) {
+        this.$set(
+          this.formTemplate,
+          "formCode",
+          applyTemplateTypeToFormCode(val, this.templateType)
+        );
+      },
+    },
+    formCodeRules() {
+      return [
+        {
+          required: true,
+          trigger: "blur",
+          validator: (rule, value, callback) => {
+            /* 带前缀时 value 恒非空，必须校验前缀之后的主体 */
+            if (!stripH5Prefix(value)) {
+              callback(new Error(this.$t1("模板编码不能为空")));
+            } else {
+              callback();
+            }
+          },
+        },
+      ];
+    },
+  },
+  watch: {
+    templateType(val) {
+      if (this.formTemplate.id) {
+        return;
+      }
+      this.$set(
+        this.formTemplate,
+        "formCode",
+        applyTemplateTypeToFormCode(this.formTemplate.formCode, val)
+      );
+    },
+  },
   created() {
     if (this.hData) {
       this.readonly = true;
@@ -96,6 +158,7 @@ modules = {
     initData(formData) {
       this.isEdit = true;
       this.formTemplate = formData || {};
+      this.templateType = getTemplateTypeByFormCode(this.formTemplate.formCode);
       this.getMenuKindAuth(this.formTemplate.menuKindCode);
       this.$nextTick(() => {
         this.isInited = true;
@@ -154,6 +217,7 @@ modules = {
       } else if (this.hData) {
         this.isEdit = true;
         this.formTemplate = this.$baseLodash.cloneDeep(this.hData);
+        this.templateType = getTemplateTypeByFormCode(this.formTemplate.formCode);
         this.dataId = this.hData.id;
         this.isInited = true;
         this.getMenuKindAuth(this.formTemplate.menuKindCode);

package/src/views/bd/setting/form_template/mixins/list.js

@@ -20,6 +20,10 @@ import {
 } from "@base/views/bd/setting/utils/index";
 import formVersionButton from "@base/views/bd/setting/formVersion/link.vue";
 import settingConfig from "@/settings";
+import {
+  getDesignerLayoutType,
+  isH5FormTemplate,
+} from "@base/views/bd/setting/form_template/formTemplateType.js";
 
 let modules = {};
 modules = {
@@ -142,6 +146,7 @@ modules = {
       menuKindAuth: {},
       showTree: false,
       designerReadonly: false,
+      designerLayoutType: "PC",
     };
   },
   computed: {
@@ -223,6 +228,8 @@ modules = {
       }
     },
     openDesingerDialog(row, callback, readonly = false) {
+      /* 布局模式跟随模板类型，移动端模板进设计器为 H5，且工具栏不可切换 */
+      this.designerLayoutType = getDesignerLayoutType(row.formCode);
       this.formCode = row.formCode;
       this.formName = row.formName;
       this.currentFormTemplate = row;
@@ -334,6 +341,26 @@ modules = {
             field: "formCode",
             width: 150,
           },
+          {
+            /* 模板类型非数据库字段，由模板编码前缀派生，不参与后端查询 */
+            title: this.$t1("模板类型"),
+            field: "templateType",
+            width: 120,
+            slots: {
+              default: ({ row }) => {
+                return isH5FormTemplate(row.formCode)
+                  ? this.$t1("移动端")
+                  : this.$t1("PC端");
+              },
+            },
+            params: {
+              exportVal: ({ row }) => {
+                return isH5FormTemplate(row.formCode)
+                  ? this.$t1("移动端")
+                  : this.$t1("PC端");
+              },
+            },
+          },
           {
             title: this.$t1("表单分类"),
             field: "menuKindName",

package/src/views/user/form/vform/designer.vue

@@ -7,7 +7,8 @@
       @field-widget-used="handleFWU" @field-widget-removed="handleFWR"
       @form-json-updated="handleFJU" @reflushTemplateList="reflushTemplateList"
       v-if="showDesinger" :readonly="readonly" :columnFlag="columnFlag"
-      :sourceData="sourceData" sourceData:="sourceData" @customConfirm="customConfirm" />
+      :sourceData="sourceData" sourceData:="sourceData" @customConfirm="customConfirm"
+      :defaultLayoutType="defaultLayoutType" />
     </div>
     <!--
     <el-tabs v-model="activeName" class="tab-boxCard tabCard-sty1" v-if="showDesinger">
@@ -37,6 +38,7 @@ export default {
     columnFlag: Boolean,
     sourceData: Object,
     jsonFlag: Boolean,
+    defaultLayoutType: String,
   },
   components: {
     VFormDesigner,