cloud-web-corejs 1.0.54-dev.646 → 1.0.54-dev.648

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="150px" 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>

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

@@ -130,7 +130,8 @@
               @click="openFormatConfigDialog(scope.row, scope.$index)"
               :disabled="
                 !columnFormatMap[scope.row.formatS] &&
-                'widgetRender' !== scope.row.formatS
+                'widgetRender' !== scope.row.formatS &&
+                'editTreeButtonGroup' !== scope.row.formatS
               "
             ></el-button>
           </template>
@@ -265,6 +266,12 @@
         :visiable.sync="showColumnRenderDialog"
         @confirm="confirmWidgetRenderDialog"
       ></columnRenderDialog>
+      <editTreeButtonGroupConfigDialog
+        v-if="showEditTreeButtonGroupConfigDialog && editTreeButtonGroupRowData"
+        :visible.sync="showEditTreeButtonGroupConfigDialog"
+        :row="editTreeButtonGroupRowData"
+        @confirm="confirmEditTreeButtonGroupConfig"
+      />
     </div>
     <div class="dialog-footer" slot="footer">
       <el-button @click="closeHandle" class="button-sty" icon="el-icon-close">
@@ -490,7 +497,8 @@
               @click="openFormatConfigDialog(rowData, rowDataIndex)"
               :disabled="
                 !columnFormatMap[rowData.formatS] &&
-                'widgetRender' !== rowData.formatS
+                'widgetRender' !== rowData.formatS &&
+                'editTreeButtonGroup' !== rowData.formatS
               "
             ></el-button>
           </el-form-item>
@@ -620,6 +628,7 @@ import {
   columnFormatMap,
 } from "../../../../../../components/xform/utils/util";
 import columnRenderDialog from "./columnRenderDialog.vue";
+import editTreeButtonGroupConfigDialog from "./edit-tree-button-group-config-dialog.vue";
 
 let businessOptions = [
   {
@@ -648,7 +657,7 @@ export default {
     selectedWidget: Object,
     optionModel: Object,
   },
-  components: { columnRenderDialog },
+  components: { columnRenderDialog, editTreeButtonGroupConfigDialog },
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
@@ -659,6 +668,9 @@ export default {
       tableColumnConfigCode: null,
       showDialog: true,
       dialogVisible: true,
+      showEditTreeButtonGroupConfigDialog: false,
+      currentEditTreeButtonGroupRow: null,
+      editTreeButtonGroupRowData: null,
       alignOptions: [
         {
           value: "left",
@@ -1059,6 +1071,9 @@ export default {
     getUuid() {
       return new Date().getTime();
     },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
     /**
      * 生成一行数据
      */
@@ -1082,6 +1097,10 @@ export default {
         footerMethodConfg: null,
         widgetList: [],
         labelColor: null,
+        rowAddAuthName: this.createRowAuthName("Add"),
+        rowEditAuthName: this.createRowAuthName("Edit"),
+        rowAddShow: null,
+        rowEditShow: null,
         // treeNode: false,
       };
       return row;
@@ -1314,6 +1333,8 @@ export default {
           row.label = null;
           row.sortable = false;
           row.width = 150;
+          row.columnOption = {};
+          row.widget = null;
         } else if (isButtontCell) {
           if (row.formatS == "dropdown") {
             row.width = 100;
@@ -1494,7 +1515,20 @@ export default {
       }
       return widget;
     },
+    confirmEditTreeButtonGroupConfig(rowConfig) {
+      if (this.currentEditTreeButtonGroupRow) {
+        Object.assign(this.currentEditTreeButtonGroupRow, rowConfig);
+      }
+      this.currentEditTreeButtonGroupRow = null;
+      this.editTreeButtonGroupRowData = null;
+    },
     openFormatConfigDialog(row, index) {
+      if (row.formatS === "editTreeButtonGroup") {
+        this.currentEditTreeButtonGroupRow = row;
+        this.editTreeButtonGroupRowData = this.$baseLodash.cloneDeep(row);
+        this.showEditTreeButtonGroupConfigDialog = true;
+        return;
+      }
       if (row.formatS == "widgetRender") {
         let formWidgetList = deepClone(this.designer.widgetList);
         let tableData = deepClone(this.tableData);
@@ -1527,20 +1561,6 @@ export default {
         return;
       }
 
-      /*let option = row.columnOption;
-      let selectedWidget;
-      let columnWidgetConfig = this.getColumnWidgetConfig(row);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        option = columnSelectedWidget.options;
-        selectedWidget = columnSelectedWidget;
-      } else {
-        option = {};
-        selectedWidget = {};
-      }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;*/
       let selectedWidget = row.widget;
       this.operateIndex = index;
 

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

@@ -0,0 +1,173 @@
+import { propertyRegistered } from './propertyRegister';
+
+let propertyDialogSeed = 0;
+
+function nextPropertyDialogId() {
+  propertyDialogSeed += 1;
+  return `widget-property-dialog-${Date.now()}-${propertyDialogSeed}`;
+}
+
+export default {
+  data() {
+    return {
+      widgetPropertyDialogs: [],
+      activePropertyDialogId: null,
+    };
+  },
+  methods: {
+    getActivePropertyDialog() {
+      if (!this.widgetPropertyDialogs.length) {
+        return null;
+      }
+      if (this.activePropertyDialogId) {
+        const active = this.widgetPropertyDialogs.find(
+          (dlg) => dlg.id === this.activePropertyDialogId
+        );
+        if (active) {
+          return active;
+        }
+      }
+      return this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
+    },
+    setActivePropertyDialog(id) {
+      this.activePropertyDialogId = id;
+      this.syncLegacyPropertyDialogState();
+    },
+    syncLegacyPropertyDialogState() {
+      const active = this.getActivePropertyDialog();
+      this.showDateConfigDialog = !!active;
+      this.columnSelectedWidget = active ? active.columnSelectedWidget : {};
+      this.columnEditFields = active ? active.columnEditFields : [];
+      this.formatConfig = active ? active.formatConfig : {};
+      this.tableColumns = active ? active.tableColumns : null;
+    },
+    openWidgetPropertyDialog(config) {
+      const id = nextPropertyDialogId();
+      const dialog = {
+        id,
+        visible: true,
+        title: config.title,
+        columnSelectedWidget: config.columnSelectedWidget || {},
+        columnEditFields: config.columnEditFields || null,
+        tableColumns: config.tableColumns,
+        formatConfig: config,
+        widgetActiveCollapseName1s: ['1', '3'],
+      };
+      this.widgetPropertyDialogs.push(dialog);
+      this.setActivePropertyDialog(id);
+    },
+    closeWidgetPropertyDialog(id, invokeCallback = false) {
+      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) {
+        const columnOption = this.$baseLodash.cloneDeep(
+          dialog.columnSelectedWidget.options
+        );
+        dialog.formatConfig.callback(columnOption);
+      }
+      this.widgetPropertyDialogs.splice(index, 1);
+      if (this.activePropertyDialogId === id) {
+        const last = this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
+        this.activePropertyDialogId = last ? last.id : null;
+      }
+      this.syncLegacyPropertyDialogState();
+    },
+    handleWidgetPropertyDialogBeforeClose(dialog, done) {
+      this.closeWidgetPropertyDialog(dialog.id);
+      done();
+    },
+    confirmWidgetPropertyDialog(dialog) {
+      this.closeWidgetPropertyDialog(dialog.id, true);
+    },
+    hasPropEditorForDialog(dialog, propName, editorName) {
+      if (!editorName) {
+        return false;
+      }
+      if (dialog.columnEditFields && !dialog.columnEditFields.includes(propName)) {
+        return false;
+      }
+      const widget = dialog.columnSelectedWidget;
+      if (propName.indexOf('-') <= -1) {
+        const originalPropName = `${widget.type}-${propName}`;
+        if (propertyRegistered(originalPropName)) {
+          return false;
+        }
+      }
+      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 uniquePropName = `${widget.type}-${propKey}-editor`;
+      if (this.$options.components[uniquePropName]) {
+        return uniquePropName;
+      }
+      if (this.$root.$options.components[uniquePropName]) {
+        return uniquePropName;
+      }
+      return editorName;
+    },
+    showCollapseForDialog(dialog, props) {
+      for (const propName in props) {
+        if (!props.hasOwnProperty(propName)) {
+          continue;
+        }
+        if (this.hasPropEditorForDialog(dialog, propName, props[propName])) {
+          return true;
+        }
+      }
+      return false;
+    },
+    editEventHandler(eventName, eventParams, eventOptions) {
+      eventOptions = eventOptions || {};
+      const activeDialog = this.getActivePropertyDialog();
+      const eventWidget = activeDialog
+        ? activeDialog.columnSelectedWidget
+        : this.selectedWidget;
+      this.curEventName = eventName;
+      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
+      if (eventOptions.customCode) {
+        this.eventHandlerCode = eventOptions.customCode() || '';
+      } else {
+        this.eventHandlerCode = (eventWidget && eventWidget.options[eventName]) || '';
+      }
+      this.eventOption = eventOptions;
+      if (eventName === 'onCreated' && !this.optionModel.onCreated) {
+        this.eventHandlerCode = '  //组件创建生命周期\n  console.log(\'test onCreated()\')\n';
+      }
+      this.showWidgetEventDialogFlag = true;
+    },
+    saveEventHandler() {
+      const editorAnnotations = this.$refs.ecEditor.getEditorAnnotations();
+      let hasError = false;
+      if (editorAnnotations && editorAnnotations.length > 0) {
+        editorAnnotations.forEach((item) => {
+          if (item.type === 'error') {
+            hasError = true;
+          }
+        });
+        if (hasError) {
+          this.$message.error(this.i18nt('designer.hint.syntaxCheckWarning'));
+          return;
+        }
+      }
+      const eventOptions = this.eventOption || {};
+      if (!eventOptions.callback) {
+        const activeDialog = this.getActivePropertyDialog();
+        const eventWidget = activeDialog
+          ? activeDialog.columnSelectedWidget
+          : this.selectedWidget;
+        if (eventWidget) {
+          eventWidget.options[this.curEventName] = this.eventHandlerCode;
+        }
+      } else {
+        eventOptions.callback(this.eventHandlerCode);
+      }
+      this.showWidgetEventDialogFlag = false;
+    },
+  },
+};

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

@@ -259,10 +259,6 @@ export const containers = [
       tableConfig: null,
       isEditTable: false,
       isTreeTable: false,
-      rowAddAuthName: null,
-      rowEditAuthName: null,
-      rowAddShow: null,
-      rowEditShow: null,
       wbsEnabled: false,
       sortScriptCode: null,
       importTemplateFile: null,