cloud-web-corejs-haier 1.0.42 → 1.0.44

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/form-setting.vue

@@ -106,7 +106,7 @@
               v-model="formConfig.addFormCode"
               @clear="
                 formConfig.addFormCode = null;
-                formConfig.addFormName = null
+                formConfig.addFormName = null;
                 $forceUpdate();
               "
               v-el-readonly
@@ -227,6 +227,9 @@
           <el-form-item :label="i18nt('启用其他标签页')">
             <el-switch v-model="formConfig.otherTabEnabled"></el-switch>
           </el-form-item>
+          <el-form-item :label="i18nt('隐藏常规标签')">
+            <el-switch v-model="formConfig.hideNormalTab"></el-switch>
+          </el-form-item>
           <el-form-item :label="i18nt('其他标签页配置')"> </el-form-item>
           <el-form-item label-width="0">
             <div>
@@ -998,7 +1001,7 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
   created() {
     //导入表单JSON后需要重新加载自定义CSS样式！！！
     this.designer.handleEvent("form-json-imported", () => {
-      this.formCssCode = this.formConfig.cssCode;
+      this.formCssCode = this.formConfig.cssCode || "";
       insertCustomCssToHead(this.formCssCcssCodeode);
       this.extractCssClass();
       this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
@@ -1008,7 +1011,7 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
     /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
          此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
     setTimeout(() => {
-      this.formCssCode = this.formConfig.cssCode;
+      this.formCssCode = this.formConfig.cssCode || "";
       insertCustomCssToHead(this.formCssCode);
       this.extractCssClass();
       this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
@@ -1031,7 +1034,7 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
 
     extractCssClass() {
       let regExp = /\..*{/g;
-      let result = this.formCssCode.match(regExp);
+      let result = this.formCssCode ? this.formCssCode.match(regExp) : [];
       let cssNameArray = [];
 
       if (!!result && result.length > 0) {

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/edit-tree-button-group-config-dialog.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-dialog
+    title="编辑行按钮组配置"
+    :visible.sync="dialogVisible"
+    custom-class="dialog-style list-dialog"
+    :show-close="true"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    width="520px"
+    v-dialog-drag
+    @close="handleClose"
+  >
+    <div class="cont">
+      <el-form label-width="166px" class="edit-tree-button-group-form">
+        <el-form-item label="新增按钮唯一名称">
+          <el-input
+            v-model="row.rowAddAuthName"
+            class="all-width"
+            placeholder="留空则不校验权限"
+            clearable
+          >
+            <el-tooltip
+              slot="suffix"
+              :enterable="false"
+              effect="dark"
+              content="随机生成"
+              placement="top"
+            >
+              <i
+                class="el-input__icon el-icon-refresh-right"
+                @click="createRandomRowAddAuthName"
+              ></i>
+            </el-tooltip>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新增按钮编码" v-if="rowAddAuthCode">
+          <div class="auth-code-text">
+            <el-tooltip effect="light" content="复制">
+              <a
+                class="a-link"
+                style="color: unset"
+                @click="copyAuthCode(rowAddAuthCode, $event)"
+              >
+                <span
+                  ><i
+                    class="el-icon-copy-document"
+                    style="margin-right: 2px"
+                  ></i
+                  >{{ rowAddAuthCode }}</span
+                >
+              </a>
+            </el-tooltip>
+          </div>
+        </el-form-item>
+        <el-form-item label="编辑按钮唯一名称">
+          <el-input
+            v-model="row.rowEditAuthName"
+            class="all-width"
+            placeholder="留空则不校验权限"
+            clearable
+          >
+            <el-tooltip
+              slot="suffix"
+              :enterable="false"
+              effect="dark"
+              content="随机生成"
+              placement="top"
+            >
+              <i
+                class="el-input__icon el-icon-refresh-right"
+                @click="createRandomRowEditAuthName"
+              ></i>
+            </el-tooltip>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="编辑按钮编码" v-if="rowEditAuthCode">
+          <div class="auth-code-text">
+            <el-tooltip effect="light" content="复制">
+              <a
+                class="a-link"
+                style="color: unset"
+                @click="copyAuthCode(rowEditAuthCode, $event)"
+              >
+                <span
+                  ><i
+                    class="el-icon-copy-document"
+                    style="margin-right: 2px"
+                  ></i
+                  >{{ rowEditAuthCode }}</span
+                >
+              </a>
+            </el-tooltip>
+          </div>
+        </el-form-item>
+        <el-form-item label="新增按钮显隐条件定义">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editRowShowScript('rowAddShow')"
+          >
+            <span>{{ row.rowAddShow }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item label="编辑按钮显隐条件定义">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editRowShowScript('rowEditShow')"
+          >
+            <span>{{ row.rowEditShow }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button class="button-sty" icon="el-icon-close" @click="handleClose">
+        {{ i18nt("designer.hint.cancel") }}
+      </el-button>
+      <el-button
+        type="primary"
+        class="button-sty"
+        icon="el-icon-check"
+        @click="handleConfirm"
+      >
+        {{ i18nt("designer.hint.confirm") }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+import { generateId } from "../../../../../../components/xform/utils/util";
+import Clipboard from "clipboard";
+
+export default {
+  name: "edit-tree-button-group-config-dialog",
+  mixins: [i18n, eventMixin],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+  },
+  inject: ["getReportTemplate"],
+  data() {
+    return {
+      rowShowParams: ["dataId", "formCode", "tableParam"],
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+    reportTemplate() {
+      return this.getReportTemplate();
+    },
+    rowAddAuthName() {
+      return this.getRowAddAuthName();
+    },
+    rowEditAuthName() {
+      return this.getRowEditAuthName();
+    },
+    rowAddAuthCode() {
+      return this.getRowAuthCode(this.rowAddAuthName);
+    },
+    rowEditAuthCode() {
+      return this.getRowAuthCode(this.rowEditAuthName);
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.ensureRowAuthNames();
+      }
+    },
+  },
+  methods: {
+    getRowAddAuthName() {
+      return this.row.rowAddAuthName ?? this.row.treeRowAddName;
+    },
+    getRowEditAuthName() {
+      return this.row.rowEditAuthName ?? this.row.treeRowEditName;
+    },
+    getRowAuthCode(authName) {
+      if (!authName || !this.reportTemplate?.formCode) {
+        return "";
+      }
+      return this.reportTemplate.formCode + ":" + authName;
+    },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
+    ensureRowAuthNames() {
+      if (!this.getRowAddAuthName()) {
+        this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
+      }
+      if (!this.getRowEditAuthName()) {
+        this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
+      }
+    },
+    createRandomRowAddAuthName() {
+      this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
+      this.$message.success("生成成功");
+    },
+    createRandomRowEditAuthName() {
+      this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
+      this.$message.success("生成成功");
+    },
+    editRowShowScript(eventName) {
+      this.editEventHandler(eventName, this.rowShowParams, {
+        customCode: () => this.row[eventName] || "",
+        callback: (code) => {
+          this.$set(this.row, eventName, code);
+        },
+      });
+    },
+    copyAuthCode(content, clickEvent) {
+      const clipboard = new Clipboard(clickEvent.target, {
+        text: () => content,
+      });
+      clipboard.on("success", () => {
+        this.$message.success("复制成功");
+        clipboard.destroy();
+      });
+      clipboard.on("error", () => {
+        this.$message.error("复制失败");
+        clipboard.destroy();
+      });
+      clipboard.onClick(clickEvent);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    handleConfirm() {
+      this.$emit("confirm", this.getRowConfigSnapshot());
+      this.dialogVisible = false;
+    },
+    getRowConfigSnapshot() {
+      return {
+        rowAddAuthName: this.row.rowAddAuthName,
+        rowEditAuthName: this.row.rowEditAuthName,
+        rowAddShow: this.row.rowAddShow,
+        rowEditShow: this.row.rowEditShow,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.edit-tree-button-group-form {
+  ::v-deep .el-form-item {
+    margin-bottom: 12px;
+  }
+  ::v-deep .el-form-item__label {
+    line-height: 28px;
+  }
+  ::v-deep .el-form-item__content {
+    line-height: 28px;
+  }
+  .auth-code-text {
+    word-break: break-all;
+    line-height: 1.5;
+  }
+}
+</style>