cloud-web-corejs 1.0.54-dev.139 → 1.0.54-dev.140

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

@@ -0,0 +1,132 @@
+<template>
+  <el-drawer
+    title="cc"
+    :visible.sync="showDesingerDialog"
+    :modal="false"
+    :destroy-on-close="true"
+    size="100%"
+    direction="rtl"
+    :before-close="closeFormDesignwinEvent"
+    :append-to-body="false"
+    class="designer-drawer"
+    :class="[isFullscreen ? 'is-fullscreen' : '']"
+    @close="handleFormDesignClose"
+  >
+    <el-tabs
+      v-model="formDesTabs"
+      type="card"
+      class="tab-boxOnly"
+      :stretch="true"
+    >
+      <el-tab-pane :label="$t1('设计器')" name="first">
+        <designer
+          ref="designer"
+          v-if="showDesigner"
+          @customConfirm="customConfirm"
+          :columnFlag="true"
+          :widgetList="widgetList"
+        ></designer>
+      </el-tab-pane>
+    </el-tabs>
+    <el-button
+      class="isFullIcon"
+      v-if="!isFullscreen"
+      @click="handleFullscreen"
+    >
+      <el-tooltip effect="dark" :content="$t1('全屏')" placement="top">
+        <i class="iconfont icon-quanping"></i>
+      </el-tooltip>
+    </el-button>
+    <el-button class="isFullIcon" v-else @click="handleFullscreen">
+      <el-tooltip effect="dark" :content="$t1('缩小')" placement="top">
+        <i class="iconfont icon-suoxiao"></i>
+      </el-tooltip>
+    </el-button>
+  </el-drawer>
+</template>
+<script>
+export default {
+  props: {
+    column: Object,
+  },
+  components: {
+    designer: import("@base/views/user/form/vform/designer.vue"),
+  },
+  inject: ["getReportTemplate"],
+  data() {
+    return {
+      showDesingerDialog: true,
+      formDesTabs: "first",
+      showFormScriptList: false,
+      isFullscreen: false,
+      formCode: "",
+      formName: "",
+      widgetList: [],
+      formTemplate: null,
+      showDesigner:false
+    };
+  },
+  created() {
+    let formTemplate = this.getReportTemplate();
+    debugger
+    this.formTemplate = formTemplate;
+    this.formCode = formTemplate.formCode;
+    this.formName = formTemplate.formName;
+    this.widgetList = this.$baseLodash.cloneDeep(this.column.widgetList || []);
+    this.$nextTick(() => {
+      // this.showDesigner = true;
+    });
+  },
+  mounted() {
+    /* this.$nextTick(() => {
+      this.$refs.designer.initDesigner(this.formCode)
+    }) */
+  },
+  methods: {
+    handleFormDesignClose() {
+      this.$emit("closeFormDesignwinEvent");
+    },
+    handleFullscreen() {
+      this.isFullscreen = !this.isFullscreen;
+    },
+    closeFormDesignwinEvent() {
+      this.$emit("closeFormDesignwinEvent");
+    },
+    reflushTemplateList() {
+      this.$emit("reflushTemplateList");
+    },
+    customConfirm(formJson) {
+      let widgetList = formJson.widgetList;
+      this.handleFormDesignClose();
+      this.$emit("confirm", widgetList);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+::v-deep .tab-boxOnly > .el-tabs__header {
+  position: absolute;
+  right: 130px;
+  top: 0;
+}
+
+::v-deep .tab-boxOnly > .el-tabs__content .el-tab-pane .el-tab-pane {
+  .detail-wrap .d-cont {
+    height: calc(100vh - 158px) !important
+  }
+
+  .grid-height {
+    height: calc(100vh - 126px) !important
+  }
+}
+
+::v-deep .designer-drawer.is-fullscreen .tab-boxOnly > .el-tabs__content .el-tab-pane .el-tab-pane {
+  .detail-wrap .d-cont {
+    height: calc(100vh - 116px) !important
+  }
+
+  .grid-height {
+    height: calc(100vh - 84px) !important
+  }
+}
+</style>

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

@@ -13,6 +13,8 @@
       width="1220px"
       v-dialog-drag
       @closed="closeHandle"
+      :fullscreen="true"
+      :append-to-body="true"
     >
       <div class="cont">
         <el-table
@@ -127,6 +129,7 @@
                   :label="i18nt('designer.setting.customRenderGroup')"
                 >
                   <el-option value="render" label="render"></el-option>
+                  <el-option value="widgetRender" label="widgetRender"></el-option>
                 </el-option-group>
                 <el-option-group
                   v-for="t in op"
@@ -262,7 +265,7 @@
           >
             <template slot-scope="scope">
               <el-button
-                :disabled="'render' !== scope.row.formatS"
+                :disabled="'render' !== scope.row.formatS && 'widgetRender'!== scope.row.formatS"
                 size="mini"
                 plain=""
                 round=""
@@ -353,6 +356,7 @@
           {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
+      <columnRenderDialog :column="currentTableColumn" v-if="showColumnRenderDialog" :visiable.sync="showColumnRenderDialog" @confirm="confirmWidgetRenderDialog"></columnRenderDialog>
     </el-dialog>
     <el-dialog
       v-if="showRenderDialogFlag"
@@ -495,6 +499,7 @@
 import i18n from "../../../../../../components/xform/utils/i18n";
 import Sortable from "sortablejs";
 import { generateId } from "../../../../../../components/xform/utils/util";
+import columnRenderDialog from "./columnRenderDialog.vue"
 
 export default {
   mixins: [i18n],
@@ -503,7 +508,7 @@ export default {
     selectedWidget: Object,
     optionModel: Object,
   },
-  components: {},
+  components: {columnRenderDialog},
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
@@ -731,6 +736,9 @@ export default {
       eventParamsMap: {
         footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
       },
+
+      showColumnRenderDialog:false,
+
     };
   },
   beforeDestroy() {
@@ -782,7 +790,20 @@ export default {
       this.optionModel.tableColumns = this.tableData;
       this.closeHandle();
     },
+    openWidgetRenderDialog(row){
+      this.currentTableColumn = row;
+      this.showColumnRenderDialog = true
+    },
+    confirmWidgetRenderDialog(formJson){
+      this.currentTableColumn.widgetList = formJson.widgetList
+      this.showColumnRenderDialog = false
+    },
     showRenderDialog: function (e) {
+      if(e.formatS == 'widgetRender'){
+        this.openWidgetRenderDialog(e);
+        return
+      }
+
       (this.currentTableColumn = e),
         (this.renderJson = e.render || ""),
         (this.showRenderDialogFlag = !0);
@@ -878,6 +899,7 @@ export default {
         exportType: null,
         footerDataType: null,
         footerMethodConfg: null,
+        widgetList:[]
         // treeNode: false,
       };
       return row;

package/src/components/xform/form-designer/toolbar-panel/index.vue

@@ -424,17 +424,13 @@
 
 <script>
 import VFormRender from '../../../../components/xform/form-render/index';
-import Clipboard from 'clipboard';
 import indexMixin from './indexMixin.js';
 import FormSetting from '../../../../components/xform/form-designer/setting-panel/form-setting';
-import tableForm from "../../../../components/table/tableForm.vue";
 
 export default {
   name: 'ToolbarPanel',
   components: {
-    tableForm,
     VFormRender,
-    Clipboard,
     FormSetting
   },
   inject:["readonly"],