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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.666",
+  "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/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

@@ -150,7 +150,7 @@ export default {
       }
       this.eventOption = eventOptions;
       /* if (eventName === 'onCreated' && !this.optionModel.onCreated) {
-        this.eventHandlerCode = '  //组件创建生命周期\n  console.log(\'test onCreated()\')\n';
+        this.eventHandlerCode = '  //组件创建生命周期\n  onsole.logc(\'test onCreated()\')\n';
       } */
       this.showWidgetEventDialogFlag = true;
     },

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: '统计',