cloud-web-corejs 1.0.54-dev.656 → 1.0.54-dev.658

package/src/views/bd/setting/formVersion/compareDialog.vue

@@ -7,7 +7,7 @@
       :close-on-click-modal="falseValue"
       :visible.sync="showDialog"
       :modal="falseValue"
-      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
+      custom-class="dialog-style list-dialog dialog-checkbox pd_0 form-version-compare-dialog"
       width="1200px"
       @close="dialogClose"
       v-el-drag-dialog
@@ -15,62 +15,20 @@
       :fullscreen="true"
     >
       <div
-        class="cont"
-        id="containt"
-        style="height: calc(100vh - 58px); overflow: hidden"
+        class="cont compare-dialog-cont"
+        style="height: calc(100vh - 58px); overflow: auto"
       >
-        <el-row :gutter="20" style="height: 100%">
-          <el-col :span="12">
-            <el-container>
-              <el-header>版本号：{{ preRow.version }}</el-header>
-              <el-main>
-                <component
-                  :is="compareContent"
-                  v-if="showCompareContent1"
-                  visible-key="showCompareContent1"
-                  :hData="compareHData1"
-                  :parent-target="_self"
-                  @reload="$reloadHandle"
-                  @openDesignDialog="openDesingerDialogByChild"
-                  @reverCallback="reverCallback"
-                ></component>
-              </el-main>
-            </el-container>
-          </el-col>
-          <el-col :span="12">
-            <el-container>
-              <el-header>版本号：{{ curRow.version }}</el-header>
-              <el-main>
-                <component
-                  :is="compareContent"
-                  v-if="showCompareContent2"
-                  visible-key="showCompareContent2"
-                  :hData="compareHData2"
-                  :parent-target="_self"
-                  @reload="$reloadHandle"
-                  @openDesignDialog="openDesingerDialogByChild"
-                  :isCompare="true"
-                  :compareHData="compareHData1"
-                  @reverCallback="reverCallback"
-                ></component>
-              </el-main>
-            </el-container>
-          </el-col>
-        </el-row>
+        <compareContent
+          v-if="compareReady"
+          :objType="objType"
+          :objCode="objCode"
+          :compareHData1="compareHData1"
+          :compareHData2="compareHData2"
+          :preVersion="preVersion"
+          :curVersion="curVersion"
+          @reverCallback="reverCallback"
+        />
       </div>
-      <formDesignerDialog
-        ref="formDesignerDialog"
-        v-if="showDesingerDialog"
-        :visiable.sync="showDesingerDialog"
-        :formName="formName"
-        :formCode="formCode"
-        @reflushTemplateList="reflushTemplateList"
-        :readonly="designerReadonly"
-        :showFormScript="false"
-        :historyFlag="true"
-        :jsonFlag="true"
-        :formTemplate="currentFormTemplate"
-      ></formDesignerDialog>
     </el-dialog>
   </div>
 </template>
@@ -80,208 +38,166 @@ export default {
   name: "compareDialog",
   props: ["visiable", "objType", "objCode", "relationCode", "preRow", "curRow"],
   components: {
-    formDesignerDialog: () =>
-      import("@base/views/bd/setting/form_template/formDesignerDialog.vue"),
-    FormTemplateEdit: () => import("@base/views/bd/setting/form_template/edit.vue"),
-    FormScriptEdit: () => import("@base/views/bd/setting/form_script/edit.vue"),
-    FormScriptEdit1: () => import("@base/views/bd/setting/form_script/edit1.vue"),
-    SzTaMbEdit: () => import("@base/views/bd/setting/table_model/edit.vue"),
+    compareContent: () => import("./compareContent.vue"),
   },
-  created() {
-    // this.initSetting();
-    this.initTitle();
-    this.compare();
-  },
-  mounted() {},
   data() {
     return {
-      showEdit: false,
       showDialog: true,
       falseValue: false,
-      selectMulti: true,
-      formData: {},
-      vxeOption: {},
-      showSaleOrgDialog: false,
-      activeName: "second",
-
-      editContent: null,
-      hData: null,
-
-      formCode: null,
-      formName: null,
-      currentFormTemplate: null,
-      isFullscreen: false,
-      designerReadonly: false,
-      showDesingerDialog: false,
-
-      showFormScriptList: false,
-      formDesTabs: "first",
-      title: "历史列表",
-
-      showCompareDialog: false,
-      compareContent: null,
-      showCompareContent1: false,
-      showCompareContent2: false,
+      title: "",
       compareHData1: null,
       compareHData2: null,
+      preVersion: null,
+      curVersion: null,
+      compareReady: false,
     };
   },
-  watch: {
-    formDesTabs(val) {
-      if (this.showFormScriptList == false && val == "second") {
-        this.showFormScriptList = true;
-      }
-    },
+  created() {
+    this.initTitle();
+    this.initCompare();
   },
   methods: {
-    compare() {
-      let map = {
-        FormTemplate: "FormTemplateEdit",
-        FormScript: "FormScriptEdit",
-        SzTaMb: "SzTaMbEdit",
-      };
-      let scriptTypeMap = {
-        0: "FormScriptEdit",
-        1: "FormScriptEdit1",
-      };
-
+    initCompare() {
+      if (!this.preRow?.content || !this.curRow?.content) {
+        return;
+      }
       this.compareHData1 = JSON.parse(this.preRow.content);
       this.compareHData2 = JSON.parse(this.curRow.content);
-      if (this.objType === "FormScript") {
-        this.compareContent = scriptTypeMap[this.compareHData1.scriptType];
-      } else {
-        this.compareContent = map[this.objType];
-      }
-      this.showCompareContent1 = true;
-      this.showCompareContent2 = true;
+      this.preVersion = this.preRow.version;
+      this.curVersion = this.curRow.version;
+      this.compareReady = true;
     },
     initTitle() {
-      let titleMap = {
+      const titleMap = {
         FormTemplate: "表单模板历史版本对比",
         FormScript: "逻辑脚本历史版本对比",
         SzTaMb: "数据表历史版本对比",
       };
-      this.title = titleMap[this.objType];
-    },
-    openEditView(row) {
-      this.$http({
-        url: USER_PREFIX + "/formVersion/get",
-        method: "post",
-        data: {
-          id: row.id,
-        },
-        success: (res) => {
-          let objx = res.objx;
-          let hData = JSON.parse(objx.content);
-          this.hData = hData;
-          let map = {
-            FormTemplate: FormTemplateEdit,
-            FormScript: FormScriptEdit,
-            SzTaMb: SzTaMbEdit,
-          };
-          let scriptTypeMap = {
-            0: FormScriptEdit,
-            1: FormScriptEdit1,
-          };
-          if (row.objType === "FormScript") {
-            this.editContent = scriptTypeMap[hData.scriptType];
-          } else {
-            this.editContent = map[row.objType];
-          }
-          this.activeName = "first";
-          this.$openEditView("showEdit");
-        },
-      });
-    },
-    rever(row) {},
-    openDesingerDialog(row, callback, readonly = false) {
-      this.formCode = row.formCode;
-      this.formName = row.formName + " - " + row.version;
-      this.currentFormTemplate = row;
-      this.isFullscreen = false;
-
-      this.designerReadonly = readonly;
-      this.showDesingerDialog = true;
-      this.designerSaveCallback = callback ?? null;
-    },
-    openDesingerDialogByChild({ row, readonly, callback }) {
-      this.openDesingerDialog(row, callback, readonly);
-    },
-    reflushTemplateList() {
-      this.searchEvent();
-      this.designerSaveCallback && this.designerSaveCallback();
-    },
-    handleFullscreen() {
-      let isFullscreen = this.isFullscreen;
-      if (!isFullscreen) {
-        indexUtil.addClass(document.body, "hideMenu");
-      } else {
-        indexUtil.removeClass(document.body, "hideMenu");
-      }
-      this.isFullscreen = !isFullscreen;
-    },
-    handleFormDesignClose() {
-      this.formDesTabs = "first";
-      this.showFormScriptList = false;
+      this.title = titleMap[this.objType] || "历史版本对比";
     },
     reverCallback() {
       this.$emit("reverCallback");
       this.dialogClose();
     },
     dialogClose() {
-      this.showCompareDialog = false;
       this.$emit("close");
       this.$emit("update:visiable", false);
     },
   },
 };
 </script>
-<style scoped lang="scss">
-.grid-height {
-  height: calc(100vh - 162px) !important;
-}
-::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;
+<style lang="scss">
+.form-version-compare-dialog {
+  .compare-cont {
+    position: relative;
+    margin: 12px 16px;
+    padding: 12px 16px 16px;
+    background: #fff;
+    border-radius: 4px;
+
+    .title {
+      margin-bottom: 12px;
+      font-size: 14px;
+      color: #303133;
+    }
+
+    .is-full {
+      position: absolute;
+      top: 12px;
+      right: 16px;
+      font-size: 16px;
+      color: #409eff;
+    }
+
+    .version-blue,
+    .version-green {
+      display: inline-block;
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .version-blue {
+      color: #409eff;
+    }
+
+    .version-green {
+      color: #67c23a;
+    }
+
+    .flex {
+      display: flex;
+      gap: 12px;
+
+      .flex-1 {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    &.is-section-fullscreen:not(.compare-code-section):not(.compare-detail-section) {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 9999;
+      margin: 0;
+      overflow: auto;
+    }
   }
 
-  .grid-height {
-    height: calc(100vh - 126px) !important;
+  .table-border_1 {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+
+    th,
+    td {
+      padding: 10px 12px;
+      border: 1px solid #ebeef5;
+      font-size: 13px;
+      line-height: 20px;
+      vertical-align: middle;
+      word-break: break-all;
+    }
+
+    th {
+      width: 160px;
+      background: #f5f7fa;
+      color: #606266;
+      font-weight: 500;
+      text-align: left;
+    }
+
+    td {
+      width: calc((100% - 160px) / 2);
+      color: #303133;
+
+      .compare-revert-btn {
+        float: right;
+      }
+    }
+
+    tr.id-difference {
+      td {
+        background: #fef0f0;
+        color: #f56c6c;
+      }
+    }
   }
-}
 
-::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;
+  .compare-code-flex .ace-container {
+    border: 1px solid #ebeef5;
   }
 
-  .grid-height {
-    height: calc(100vh - 84px) !important;
+  .compare-detail-grid {
+    margin-top: 8px;
+
+    .grid-height {
+      height: 320px !important;
+    }
   }
 }
-.el-header {
-  background-color: #b3c0d1;
-  color: #333;
-  text-align: center;
-  line-height: 30px;
-  font-size: 15px;
-  height: 30px !important;
-}
-.el-main {
-  padding-bottom: 0px;
-}
-::v-deep .detail-wrap .d-cont {
-  height: calc(100vh - 158px) !important;
-}
 </style>

package/src/views/bd/setting/formVersion/compareMixin.js

@@ -0,0 +1,93 @@
+export default {
+  props: {
+    compareHData1: {
+      type: Object,
+      default: () => ({}),
+    },
+    compareHData2: {
+      type: Object,
+      default: () => ({}),
+    },
+    preVersion: [String, Number],
+    curVersion: [String, Number],
+    objType: String,
+    objCode: String,
+  },
+  methods: {
+    isNull(val) {
+      return val == null || val === "" || val === undefined;
+    },
+    isDiff(val1, val2) {
+      if (this.isNull(val1) && this.isNull(val2)) return false;
+      return val1 !== val2;
+    },
+    rowDiffClass(val1, val2) {
+      return this.isDiff(val1, val2) ? "id-difference" : "";
+    },
+    formatBool(val, trueText = "是", falseText = "否") {
+      if (val === true || val === 1) return this.$t1(trueText);
+      if (val === false || val === 0) return this.$t1(falseText);
+      return val ?? "";
+    },
+    formatTags(tags) {
+      if (!tags || !tags.length) return "";
+      return tags
+        .map((item) => item.tagName)
+        .filter(Boolean)
+        .join(", ");
+    },
+    formatDataRange(val) {
+      if (val === 1) return this.$t1("集团");
+      if (val === 0) return this.$t1("当前组织");
+      return val ?? "";
+    },
+    formatFormCode(val) {
+      if (val === "intf") return this.$t1("intf(接口)");
+      if (val === "busgeneral") return this.$t1("busgeneral(业务通用)");
+      return val ?? "";
+    },
+    formatScriptUrlPath(val, data) {
+      if (!data) return "";
+      return `${data.formCode || ""}/${data.scriptCode || ""}`;
+    },
+    formatJson(content) {
+      if (this.isNull(content)) return "";
+      if (typeof content === "object") {
+        try {
+          return JSON.stringify(content, null, 2);
+        } catch (e) {
+          return String(content);
+        }
+      }
+      const text = String(content).trim();
+      if (!text) return "";
+      try {
+        return JSON.stringify(JSON.parse(text), null, 2);
+      } catch (e) {
+        return text;
+      }
+    },
+    auditFields() {
+      return [
+        { key: "createBy", label: "创建人" },
+        { key: "createDate", label: "创建时间" },
+        { key: "modifyBy", label: "更新人" },
+        { key: "modifyDate", label: "更新时间" },
+      ];
+    },
+    getFieldVal(data, field) {
+      if (!data) return "";
+      let val = data[field.key];
+      if (field.formatter) {
+        return field.formatter(val, data);
+      }
+      return val ?? "";
+    },
+    fieldDiffClass(field) {
+      return this.rowDiffClass(
+        this.getFieldVal(this.compareHData1, field),
+        this.getFieldVal(this.compareHData2, field)
+      );
+    },
+  },
+};

package/src/views/bd/setting/formVersion/formScriptCompareView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="compare-view-wrap">
+    <compareBasicSection
+      sectionTitle="基础信息"
+      headerLabel="查看表单脚本"
+      :objType="objType"
+      :objCode="objCode"
+      :compareHData1="compareHData1"
+      :compareHData2="compareHData2"
+      :preVersion="preVersion"
+      :curVersion="curVersion"
+      :fields="basicFields"
+      @reverCallback="$emit('reverCallback')"
+    />
+    <compareCodeSection
+      sectionTitle="脚本"
+      :preVersion="preVersion"
+      :curVersion="curVersion"
+      :leftCode="compareHData1.script || ''"
+      :rightCode="compareHData2.script || ''"
+      mode="java"
+      enableDiff
+    />
+  </div>
+</template>
+
+<script>
+import compareMixin from "./compareMixin";
+import compareBasicSection from "./compareBasicSection.vue";
+import compareCodeSection from "./compareCodeSection.vue";
+
+export default {
+  name: "formScriptCompareView",
+  mixins: [compareMixin],
+  components: {
+    compareBasicSection,
+    compareCodeSection,
+  },
+  computed: {
+    isFormScriptType1() {
+      return this.compareHData1?.scriptType === 1 || this.compareHData2?.scriptType === 1;
+    },
+    basicFields() {
+      const commonFields = [
+        { key: "scriptName", label: "脚本名称" },
+        { key: "scriptCode", label: "脚本编码" },
+      ];
+      const type1Fields = this.isFormScriptType1
+        ? [
+            { key: "menuKindName", label: "表单分类" },
+            {
+              key: "formCode",
+              label: "表单模板编码",
+              formatter: (val) => this.formatFormCode(val),
+            },
+            {
+              key: "urlPath",
+              label: "Url路径",
+              formatter: (val, data) => this.formatScriptUrlPath(val, data),
+            },
+          ]
+        : [];
+      return [
+        ...commonFields,
+        ...type1Fields,
+        {
+          key: "enabled",
+          label: "是否启用",
+          formatter: (val) => this.formatBool(val, "启用", "禁用"),
+        },
+        {
+          key: "transactions",
+          label: "开启事务",
+          formatter: (val) => this.formatBool(val),
+        },
+        ...(this.isFormScriptType1
+          ? [
+              { key: "serviceName", label: "服务名" },
+              { key: "uri", label: "自定义URL" },
+              {
+                key: "formScriptTagDTOs",
+                label: "项目标签",
+                formatter: (val) => this.formatTags(val),
+              },
+            ]
+          : []),
+        { key: "scriptRemark", label: "脚本说明" },
+        { key: "sid", label: "唯一标识" },
+        ...this.auditFields(),
+      ];
+    },
+  },
+};
+</script>

package/src/views/bd/setting/formVersion/formTemplateCompareView.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="compare-view-wrap">
+    <compareBasicSection
+      sectionTitle="基础信息"
+      headerLabel="查看表单模板"
+      :objType="objType"
+      :objCode="objCode"
+      :compareHData1="compareHData1"
+      :compareHData2="compareHData2"
+      :preVersion="preVersion"
+      :curVersion="curVersion"
+      :fields="basicFields"
+      @reverCallback="$emit('reverCallback')"
+    />
+    <compareCodeSection
+      sectionTitle="表单模板JSON"
+      :preVersion="preVersion"
+      :curVersion="curVersion"
+      :leftCode="leftFormViewContent"
+      :rightCode="rightFormViewContent"
+      mode="json"
+      enableDiff
+    />
+  </div>
+</template>
+
+<script>
+import compareMixin from "./compareMixin";
+import compareBasicSection from "./compareBasicSection.vue";
+import compareCodeSection from "./compareCodeSection.vue";
+
+export default {
+  name: "formTemplateCompareView",
+  mixins: [compareMixin],
+  components: {
+    compareBasicSection,
+    compareCodeSection,
+  },
+  computed: {
+    leftFormViewContent() {
+      return this.formatJson(this.compareHData1?.formViewContent);
+    },
+    rightFormViewContent() {
+      return this.formatJson(this.compareHData2?.formViewContent);
+    },
+    basicFields() {
+      return [
+        { key: "formName", label: "模板名称" },
+        { key: "formCode", label: "模板编码" },
+        {
+          key: "enabled",
+          label: "是否启用",
+          formatter: (val) => this.formatBool(val, "启用", "禁用"),
+        },
+        {
+          key: "hasWf",
+          label: "启用流程",
+          formatter: (val) => this.formatBool(val),
+        },
+        { key: "menuKindName", label: "表单分类" },
+        { key: "remark", label: "备注" },
+        {
+          key: "formTemplateTagDTOs",
+          label: "项目标签",
+          formatter: (val) => this.formatTags(val),
+        },
+        { key: "serviceName", label: "服务名" },
+        { key: "sid", label: "唯一标识" },
+        ...this.auditFields(),
+      ];
+    },
+  },
+};
+</script>