cloud-web-corejs 1.0.233 → 1.0.235

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.233",
+  "version": "1.0.235",
   "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,231 @@
+<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,
+      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",
+      };
+    },
+  },
+  created() {
+    this.registerToRefList();
+    this.initEventHandler();
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    normalizeComponentPath(path) {
+      return path.replace(/\.vue$/i, "");
+    },
+    resetComponentState() {
+      this.showComponent = false;
+      this.dynamicComponent = null;
+      this.componentProps = {};
+      this.loading = false;
+      this.loadError = null;
+    },
+    loadPage() {
+      if (this.designState) {
+        return;
+      }
+
+      const path = this.normalizeComponentPath(this.componentPath);
+      if (!path) {
+        this.resetComponentState();
+        return;
+      }
+
+      if (this.dynamicComponent) {
+        this.updateComponentProps();
+        this.showComponent = true;
+        return;
+      }
+
+      this.showComponent = false;
+      this.loadError = null;
+      this.loading = true;
+
+      try {
+        const loader = loadView(path);
+        loader((component) => {
+          if (path !== this.normalizeComponentPath(this.componentPath)) {
+            return;
+          }
+          this.loading = false;
+          if (!component) {
+            this.loadError = this.$t1("页面组件未找到");
+            return;
+          }
+          this.dynamicComponent = component.default || component;
+          this.componentRenderKey += 1;
+          this.updateComponentProps();
+          this.showComponent = true;
+        });
+      } catch (error) {
+        this.loading = 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);
+      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"],
+    };
+  },
+};
+</script>
+
+<style scoped></style>

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

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