cloud-web-corejs 1.0.54-dev.665 → 1.0.54-dev.667

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.665",
+  "version": "1.0.54-dev.667",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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

@@ -0,0 +1,253 @@
+<template>
+  <static-content-wrapper
+    :designer="designer"
+    :field="field"
+    :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"
+  >
+    <div
+      v-if="designState"
+      class="designer-vue-page-container"
+      :style="containerStyle"
+    >
+      <div class="designer-vue-page-title">Vue页面</div>
+      <div class="designer-vue-page-path">
+        {{ componentPath || "请配置 Vue 页面路径" }}
+      </div>
+    </div>
+    <div v-else class="vue-page-container" :style="containerStyle">
+      <div v-if="!componentPath" class="vue-page-placeholder">{{ $t1("请配置 Vue 页面路径") }}</div>
+      <div v-else-if="loadError" class="vue-page-error">{{ loadError }}</div>
+      <div v-else-if="loading" class="vue-page-loading">{{ $t1("页面加载中...") }}</div>
+      <component
+        v-if="showComponent && dynamicComponent"
+        :is="dynamicComponent"
+        :key="componentRenderKey"
+        v-bind="componentProps"
+        visible-key="showComponent"
+        :parent-target="_self"
+        @reload="$reloadHandle"
+      />
+    </div>
+  </static-content-wrapper>
+</template>
+
+<script>
+import StaticContentWrapper from "./static-content-wrapper";
+import emitter from "../../../utils/emitter";
+import i18n from "../../../utils/i18n";
+import fieldMixin from "./fieldMixin";
+import { loadView } from "@base/store/modules/permission";
+
+export default {
+  name: "vue-page-widget",
+  componentName: "FieldWidget",
+  mixins: [emitter, fieldMixin, i18n],
+  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: "",
+    },
+  },
+  components: {
+    StaticContentWrapper,
+  },
+  data() {
+    return {
+      showComponent: false,
+      dynamicComponent: null,
+      componentProps: {},
+      componentRenderKey: 0,
+      componentLoaded: false,
+      loading: false,
+      loadError: null,
+    };
+  },
+  computed: {
+    componentPath() {
+      return (this.field.options.componentPath || "").trim();
+    },
+    containerStyle() {
+      const height = (this.field.options.componentHeight || "").trim();
+      if (!height) {
+        return {};
+      }
+      return {
+        height,
+        minHeight: height,
+        overflow: "auto",
+      };
+    },
+  },
+  watch: {
+    componentPath() {
+      this.reloadDynamicComponent();
+    },
+    "field.options.componentConfig"() {
+      this.updateComponentProps();
+    },
+    formModel: {
+      deep: true,
+      handler() {
+        this.updateComponentProps();
+      },
+    },
+  },
+  created() {
+    this.registerToRefList();
+    this.initEventHandler();
+    this.handleOnCreated();
+    this.loadPage();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    normalizeComponentPath(path) {
+      return path.replace(/\.vue$/i, "");
+    },
+    resetComponentState() {
+      this.showComponent = false;
+      this.dynamicComponent = null;
+      this.componentProps = {};
+      this.componentLoaded = false;
+      this.loading = false;
+      this.loadError = null;
+    },
+    reloadDynamicComponent() {
+      this.resetComponentState();
+      this.loadPage();
+    },
+    loadPage() {
+      if (this.designState) {
+        return;
+      }
+
+      if (this.dynamicComponent) {
+        this.showComponent = true;
+        this.updateComponentProps();
+        return;
+      }
+
+      const path = this.normalizeComponentPath(this.componentPath);
+      this.showComponent = false;
+      this.loadError = null;
+
+      if (!path) {
+        this.loading = false;
+        this.componentLoaded = false;
+        return;
+      }
+
+      this.loading = true;
+      try {
+        const loader = loadView(path);
+        loader((component) => {
+          this.loading = false;
+          if (!component) {
+            this.loadError = this.$t1("页面组件未找到");
+            this.componentLoaded = false;
+            return;
+          }
+          this.dynamicComponent = component.default || component;
+          this.componentRenderKey += 1;
+          this.componentLoaded = true;
+          this.showComponent = true;
+          this.updateComponentProps();
+        });
+      } catch (error) {
+        this.loading = false;
+        this.componentLoaded = false;
+        this.loadError = error.message || this.$t1("页面加载失败");
+      }
+    },
+    reloadPage() {
+      if (!this.dynamicComponent) {
+        this.loadPage();
+        return;
+      }
+      this.$openEditView("showComponent");
+    },
+    updateComponentProps() {
+      if (this.designState || !this.dynamicComponent) {
+        return;
+      }
+
+      let props = this.handleCustomEvent(
+        this.field.options.componentConfig,
+        ["formModel"],
+        [this.formModel]
+      );
+      this.componentProps = props && typeof props === "object" ? props : {};
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.designer-vue-page-container {
+  outline: 1px dashed #336699;
+  padding: 12px;
+  margin: 5px;
+  min-height: 120px;
+  background: #f8fbff;
+}
+
+.designer-vue-page-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #336699;
+  margin-bottom: 8px;
+}
+
+.designer-vue-page-path {
+  font-size: 12px;
+  color: #666;
+  word-break: break-all;
+}
+
+.vue-page-container {
+  width: 100%;
+  min-height: 120px;
+}
+
+.vue-page-placeholder,
+.vue-page-loading,
+.vue-page-error {
+  padding: 16px;
+  font-size: 13px;
+  color: #909399;
+  text-align: center;
+}
+
+.vue-page-error {
+  color: #f56c6c;
+}
+</style>

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

@@ -1976,17 +1976,28 @@ export default {
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: border-box;
+
+    .cont.table-column-row-edit-cont {
+      overflow: visible;
+      max-height: none;
+      padding-bottom: 12px;
+    }
+
+    .form-m2 {
+      height: auto !important;
+      overflow: visible !important;
+
+      .el-form-item.form-item-full:last-child {
+        margin-bottom: 8px;
+      }
+    }
   }
 }
 
 .table-column-row-edit-cont {
-  padding-bottom: 8px;
   box-sizing: border-box;
 
   ::v-deep .form-m2 {
-    height: auto;
-    overflow: visible;
-
     .form-item-full {
       width: calc(100% - 20px) !important;
       display: block;

package/src/components/xform/form-designer/setting-panel/property-editor/field-vue-page/vue-page-editor.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-form-item label="Vue页面路径">
+      <el-input
+        v-model="optionModel.componentPath"
+        placeholder="如 @base/views/user/form/view/list 或 /user/form/view/list"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="页面高度">
+      <el-input
+        v-model="optionModel.componentHeight"
+        placeholder="如 500px，留空则自适应"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="页面传参" label-width="150px">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="editEventHandler('componentConfig', params)"
+      >
+        <span>{{ optionModel.componentConfig }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../utils/i18n";
+import eventMixin from "../event-handler/eventMixin";
+
+export default {
+  name: "vue-page-editor",
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      params: ["dataId", "formCode", "formModel"],
+    };
+  },
+};
+</script>
+
+<style scoped></style>

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

@@ -122,6 +122,7 @@ const COMMON_PROPERTIES = {
   // 'dropdownItemFlag': 'dropdown-item-editor',
 
   oplogFlag: "oplogFlag-editor",
+  vuePageFlag: "vue-page-editor",
   ganttConfig: "gantt-editor",
 
   //弹框

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

@@ -1,4 +1,4 @@
-import { propertyRegistered } from './propertyRegister';
+import { propertyRegistered } from "./propertyRegister";
 
 let propertyDialogSeed = 0;
 
@@ -51,18 +51,24 @@ export default {
         columnEditFields: config.columnEditFields || null,
         tableColumns: config.tableColumns,
         formatConfig: config,
-        widgetActiveCollapseName1s: ['1', '3'],
+        widgetActiveCollapseName1s: ["1", "3"],
       };
       this.widgetPropertyDialogs.push(dialog);
       this.setActivePropertyDialog(id);
     },
     closeWidgetPropertyDialog(id, invokeCallback = false) {
-      const index = this.widgetPropertyDialogs.findIndex((dlg) => dlg.id === id);
+      const index = this.widgetPropertyDialogs.findIndex(
+        (dlg) => dlg.id === id
+      );
       if (index === -1) {
         return;
       }
       const dialog = this.widgetPropertyDialogs[index];
-      if (invokeCallback && dialog.formatConfig && dialog.formatConfig.callback) {
+      if (
+        invokeCallback &&
+        dialog.formatConfig &&
+        dialog.formatConfig.callback
+      ) {
         const columnSelectedWidget = this.$baseLodash.cloneDeep(
           dialog.columnSelectedWidget
         );
@@ -70,7 +76,8 @@ export default {
       }
       this.widgetPropertyDialogs.splice(index, 1);
       if (this.activePropertyDialogId === id) {
-        const last = this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
+        const last =
+          this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
         this.activePropertyDialogId = last ? last.id : null;
       }
       this.syncLegacyPropertyDialogState();
@@ -86,22 +93,25 @@ export default {
       if (!editorName) {
         return false;
       }
-      if (dialog.columnEditFields && !dialog.columnEditFields.includes(propName)) {
+      if (
+        dialog.columnEditFields &&
+        !dialog.columnEditFields.includes(propName)
+      ) {
         return false;
       }
       const widget = dialog.columnSelectedWidget;
-      if (propName.indexOf('-') <= -1) {
+      if (propName.indexOf("-") <= -1) {
         const originalPropName = `${widget.type}-${propName}`;
         if (propertyRegistered(originalPropName)) {
           return false;
         }
       }
-      const propKey = propName.replace(`${widget.type}-`, '');
+      const propKey = propName.replace(`${widget.type}-`, "");
       return this.designer.hasConfig(widget, propKey);
     },
     getPropEditorForDialog(dialog, propName, editorName) {
       const widget = dialog.columnSelectedWidget;
-      const propKey = propName.replace(`${widget.type}-`, '');
+      const propKey = propName.replace(`${widget.type}-`, "");
       const uniquePropName = `${widget.type}-${propKey}-editor`;
       if (this.$options.components[uniquePropName]) {
         return uniquePropName;
@@ -129,16 +139,19 @@ export default {
         ? activeDialog.columnSelectedWidget
         : this.selectedWidget;
       this.curEventName = eventName;
-      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
+      this.eventHeader = `${
+        this.optionModel.name
+      }.${eventName}(${eventParams.join(", ")}) {`;
       if (eventOptions.customCode) {
-        this.eventHandlerCode = eventOptions.customCode() || '';
+        this.eventHandlerCode = eventOptions.customCode() || "";
       } else {
-        this.eventHandlerCode = (eventWidget && eventWidget.options[eventName]) || '';
+        this.eventHandlerCode =
+          (eventWidget && eventWidget.options[eventName]) || "";
       }
       this.eventOption = eventOptions;
-      if (eventName === 'onCreated' && !this.optionModel.onCreated) {
-        this.eventHandlerCode = '  //组件创建生命周期\n  console.log(\'test onCreated()\')\n';
-      }
+      /* if (eventName === 'onCreated' && !this.optionModel.onCreated) {
+        this.eventHandlerCode = '  //组件创建生命周期\n  onsole.logc(\'test onCreated()\')\n';
+      } */
       this.showWidgetEventDialogFlag = true;
     },
     saveEventHandler() {
@@ -146,12 +159,12 @@ export default {
       let hasError = false;
       if (editorAnnotations && editorAnnotations.length > 0) {
         editorAnnotations.forEach((item) => {
-          if (item.type === 'error') {
+          if (item.type === "error") {
             hasError = true;
           }
         });
         if (hasError) {
-          this.$message.error(this.i18nt('designer.hint.syntaxCheckWarning'));
+          this.$message.error(this.i18nt("designer.hint.syntaxCheckWarning"));
           return;
         }
       }

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

@@ -3511,7 +3511,7 @@ export const advancedFields = [
     },
   },
 
-  /* {
+  {
     type: "vue-page",
     icon: "html-text",
     commonFlag: !0,
@@ -3521,15 +3521,18 @@ export const advancedFields = [
       name: "",
       hidden: !1,
       customClass: "",
-      onCreated: "",
+      onCreated: "this.loadPage();",
       onMounted: "",
+      vuePageFlag: 1,
       componentPath: "",
+      componentHeight: "",
       componentConfig: "",
-      label: "",
-      labelHidden: !1,
-
+      accessType: "1",
+      showRuleFlag: 1,
+      showRuleEnabled: 1,
+      showRules: [],
     },
-  }, */
+  },
 ];
 
 export const businessFields = [

package/src/components/xform/lang/en-US.js

@@ -48,6 +48,7 @@ export default {
           slider: "Slider",
           "static-text": "Text",
           "html-text": "HTML",
+          "vue-page": "Vue Page",
           button: "Button",
           divider: "Divider",
           "picture-upload": "Picture",

package/src/components/xform/lang/zh-CN.js

@@ -54,6 +54,7 @@ export default {
       "static-text": "静态文字",
       "tips-text": "提示文字",
       "html-text": "HTML",
+      "vue-page": "Vue页面",
       button: "按钮",
       divider: "分隔线",
       census: '统计',