🐎 弹窗 mixin 同步更新

2021-03-23 19:51:07 +08:00
parent a8e9cf2d4e
commit 80cb9d20d9
10 changed files with 63 additions and 84 deletions
--- a/ballcat-codegen/ballcat-codegen-frontend/src/mixins/formMixin.js
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/mixins/formMixin.js
@@ -34,13 +34,13 @@ export default {
  methods: {
    /**
     * 构建新建型表单
-     * @param argument 额外参数，用于透传到表单构建完成的回调函数中
+     * @param attributes 额外参数，用于透传到表单构建完成的回调函数中
     */
-    buildCreatedForm(argument) {
+    buildCreatedForm(attributes) {
      this.form.resetFields()
      this.formAction = this.FORM_ACTION.CREATE
      // 钩子函数 处理某些页面定制需求
-      this.createdFormCallback(argument)
+      this.createdFormCallback(attributes)
    },

    /**
@@ -48,7 +48,7 @@ export default {
     * 默认无行为，组件可复写此方法 完成添加之前的事件
     */
    /*eslint-disable*/
-    createdFormCallback(argument) {},
+    createdFormCallback(attributes) {},

    /**
     * 表单数据回填
@@ -72,14 +72,14 @@ export default {
    /**
     * 构建 => 修改型表单
     * @param record 回显数据
-     * @param argument 额外参数，用于透传到表单构建完成的回调函数中
+     * @param attributes 额外参数，用于透传到表单构建完成的回调函数中
     */
-    buildUpdatedForm(record, argument) {
+    buildUpdatedForm(record, attributes) {
      let that = this
      that.formAction = that.FORM_ACTION.UPDATE
      that.echoDataProcess(record)
      this.fillFormData(record, true)
-      this.updatedFormCallback(argument)
+      this.updatedFormCallback(attributes)
    },

    /**
@@ -91,7 +91,7 @@ export default {
    echoDataProcess(data) {},

    /*eslint-disable*/
-    updatedFormCallback(argument) {
+    updatedFormCallback(attributes) {
      // 组件复写此方法 完成修改之后的事件
    },

@@ -101,9 +101,11 @@ export default {
     */
    handleSubmit(e) {
      // 阻止 submit 事件的默认行为
-      e.preventDefault()
-      // 表单提交前事件
-      this.beforeStartSubmit()
+      e && e.preventDefault()
+      // 表单提交前事件，返回 false 时停止提交
+      if (this.beforeStartSubmit() === false) {
+        return
+      }
      // 根据表单行为，获取对应的请求方法
      const reqFunction = this.reqFunctions[this.formAction]
      // 表单校验，成功则进行提交
@@ -120,7 +122,7 @@ export default {
              }
            })
            .catch(error => {
-              this.$message.error(error.response.data.msg)
+              this.$message.error(error.response.data.message)
            })
            .finally(() => {
              this.submitLoading = false
--- a/ballcat-codegen/ballcat-codegen-frontend/src/mixins/index.js
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/mixins/index.js
@@ -1,6 +1,6 @@
 import TablePageMixin from './tablePageMixin'
 import FormMixin from './formMixin'
 import FormPageMixin from './formPageMixin'
-import FormModalMixin from './formModalMixin'
+import PopUpFormMixin from './popUpFormMixin'

-export { TablePageMixin, FormMixin, FormPageMixin, FormModalMixin }
+export { TablePageMixin, FormMixin, FormPageMixin, PopUpFormMixin }
--- a/ballcat-codegen/ballcat-codegen-frontend/src/mixins/popUpFormMixin.js
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/mixins/popUpFormMixin.js
@@ -4,6 +4,7 @@ export default {
  mixins: [FormMixin],
  data() {
    return {
+      // 标题
      title: '',
      visible: false,
      labelCol: {
@@ -19,23 +20,22 @@ export default {
    }
  },
  methods: {
-    show(title) {
+    show(attributes) {
+      this.title = attributes.title
      this.visible = true
      this.submitLoading = false
-
-      this.title = title
    },
-    add(title) {
+    add(attributes) {
      this.buildCreatedForm()
-      this.show(title)
+      this.show(attributes)
    },
-    update(record, title) {
-      this.buildUpdatedForm(record)
-      this.show(title)
+    update(record, attributes) {
+      this.buildUpdatedForm(record, attributes)
+      this.show(attributes)
    },
    /*eslint-disable*/
    submitSuccess(res) {
-      this.$emit('reloadPageTable', false)
+      this.$emit('reload-page-table', false)
      this.handleClose()
    },
    /*eslint-disable*/
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/codegen/GenerateModal.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/codegen/GenerateModal.vue
@@ -80,15 +80,15 @@
 </template>

 <script>
-import { FormModalMixin } from '@/mixins'
+import { PopUpFormMixin } from '@/mixins'
 import { getSelectData } from '@/api/gen/templategroup'
 import { getProperties } from '@/api/gen/templateproperty'
 import { getList as getTemplateFiles } from '@/api/gen/templateinfo'
 import { generate } from '@/api/gen/generate'

 export default {
-  name: 'GenerateModal',
-  mixins: [FormModalMixin],
+  name: 'GenerateModalForm',
+  mixins: [PopUpFormMixin],
  props: {
    dsName: String
  },
@@ -127,12 +127,6 @@ export default {
    })
  },
  methods: {
-    show(tableNames) {
-      this.visible = true
-      this.submitLoading = false
-
-      this.tableNames = tableNames
-    },
    onTemplateGroupChange(templateGroupId) {
      getProperties(templateGroupId).then(res => {
        this.properties = res.data
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/codegen/GeneratePage.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/codegen/GeneratePage.vue
@@ -142,7 +142,7 @@ export default {
  },
  methods: {
    singleGenerate(record) {
-      this.$refs.generateModal.show([record.tableName])
+      this.$refs.generateModal.show({ title: record.tableName })
    },
    multiGenerate() {
      const tableNames = this.selectedRowKeys
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryForm.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryForm.vue
@@ -4,11 +4,11 @@
      :min-percent="minPercent"
      :default-percent="defaultPercent"
      split="vertical"
-      :style="splitPane"
+      :style="splitPaneStyle"
      @resize="resize"
    >
      <template slot="paneL">
-        <div class="treesetting-row" @contextmenu.prevent="onRightClickBox" :style="treesettingRow">
+        <div class="left-pane" @contextmenu.prevent="onRightClickBox" :style="leftPaneStyle">
          <h1 align="center">右键即可创建文件或文件夹</h1>
          <a-directory-tree
            :style="directoryTreeStyle"
@@ -51,8 +51,8 @@
        </div>
      </template>
      <template slot="paneR" style="padding:0;">
-        <div class="treesetting-row-leftbtn" @click="moveLeft">{{ leftHtml }}</div>
-        <div class="treesetting-paneR">
+        <div class="left-pane-leftbtn" @click="moveLeft">{{ leftHtml }}</div>
+        <div ref="paneR" class="right-pane">
          <div v-show="showTips">
            <a-descriptions title="使用说明">
              <a-descriptions-item label="文件名占位" :span="3">
@@ -261,13 +261,13 @@ export default {
      },

      // ========== split样式 ==============
-      splitPane: {
-        height: 0
+      splitPaneStyle: {
+        height: '800px'
      },
      leftbtnStyle: {
        left: '0'
      },
-      treesettingRow: {
+      leftPaneStyle: {
        padding: '10px'
      },
      directoryTreeStyle: {
@@ -317,13 +317,16 @@ export default {
  watch: {
    templateGroupId() {
      this.initPage()
+    },
+    properties() {
+      // 当自定义属性北更新时，需要同步更新高度
+      this.$nextTick(function() {
+        this.splitPaneStyle.height = this.$refs.paneR.offsetHeight + 'px'
+      })
    }
  },
  created() {
    this.initPage()
-    this.heightClient = document.documentElement.clientHeight || document.body.clientHeight
-    this.heightClient = this.heightClient - 210
-    this.splitPane.height = this.heightClient + 'px'
  },
  methods: {
    /**
@@ -529,11 +532,11 @@ export default {
      if (this.defaultPercent !== 0) {
        this.minPercent = 0
        this.defaultPercent = 0
-        this.treesettingRow.padding = 0
+        this.leftPaneStyle.padding = 0
        this.leftHtml = '>'
      } else {
        this.leftHtml = '<'
-        this.treesettingRow.padding = '10px'
+        this.leftPaneStyle.padding = '10px'
        this.minPercent = 15
        this.defaultPercent = 30
      }
@@ -545,7 +548,7 @@ export default {
 .ant-form-item {
  margin-bottom: 8px;
 }
-.treesetting-paneR {
+.right-pane {
  overflow-y: auto;
  height: 100%;
  border: none;
@@ -553,7 +556,7 @@ export default {
  box-sizing: border-box;
  padding: 2%;
 }
-.treesetting-row {
+.left-pane {
  overflow: auto;
  height: 100%;
  border: none;
@@ -561,7 +564,7 @@ export default {
  box-sizing: border-box;
 }

-.treesetting-row-leftbtn {
+.left-pane-leftbtn {
  position: absolute;
  left: 0;
  cursor: pointer;
@@ -576,40 +579,22 @@ export default {
  z-index: 1;
 }

-.treesetting-row-leftbtn:hover {
+.left-pane-leftbtn:hover {
  background: #1da57a;
 }

-.treesetting-row::-webkit-scrollbar {
+.left-pane::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
 }
-.treesetting-paneR::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 6px;
-}
-.treesetting-paneR::-webkit-scrollbar-thumb {
+.left-pane::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #969696;
 }
-.treesetting-paneR::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  background: #ededed;
-}
-.treesetting-row::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 8px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #969696;
-}
-
-.treesetting-row::-webkit-scrollbar-track {
+.left-pane::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
@@ -618,6 +603,9 @@ export default {
 .splitter-pane.vertical.splitter-paneR {
  padding: 0 !important;
 }
+.splitter-paneL {
+  padding-right: 0 !important;
+}
 .template-form-title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
@@ -626,8 +614,3 @@ export default {
  text-align: center;
 }
 </style>
-<style>
-.splitter-paneL {
-  padding-right: 0 !important;
-}
-</style>
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryRemoveModal.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryRemoveModal.vue
@@ -22,11 +22,11 @@
 </template>

 <script>
-import { FormModalMixin } from '@/mixins'
+import { PopUpFormMixin } from '@/mixins'
 import { delObj } from '@/api/gen/templatedirectoryentry'
 export default {
  name: 'TemplatePropertyPage',
-  mixins: [FormModalMixin],
+  mixins: [PopUpFormMixin],
  data() {
    return {
      id: '',
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryRenameModal.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateEntryRenameModal.vue
@@ -12,12 +12,12 @@
 </template>

 <script>
-import { FormModalMixin } from '@/mixins'
+import { PopUpFormMixin } from '@/mixins'
 import { rename } from '@/api/gen/templatedirectoryentry'

 export default {
  name: 'TemplatePropertyPage',
-  mixins: [FormModalMixin],
+  mixins: [PopUpFormMixin],
  data() {
    return {
      id: '',
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateGroupFormModal.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateGroupFormModal.vue
@@ -21,11 +21,11 @@
 </template>

 <script>
-import { FormModalMixin } from '@/mixins'
+import { PopUpFormMixin } from '@/mixins'
 import { addObj, putObj, copyObj } from '@/api/gen/templategroup'

 export default {
-  mixins: [FormModalMixin],
+  mixins: [PopUpFormMixin],
  data() {
    return {
      reqFunctions: {
--- a/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateGroupPage.vue
+++ b/ballcat-codegen/ballcat-codegen-frontend/src/views/gen/templategroup/TemplateGroupPage.vue
@@ -145,13 +145,13 @@ export default {
  },
  methods: {
    handleAdd() {
-      this.$refs.formModal.add('新建模板组')
+      this.$refs.formModal.add({ title: '新建模板组' })
    },
    handleEdit(record) {
-      this.$refs.formModal.update(record, '编辑模板组')
+      this.$refs.formModal.update(record, { title: '编辑模板组' })
    },
    handleCopy(record) {
-      this.$refs.formModal.copy(record, '复制模板组')
+      this.$refs.formModal.copy(record, { title: '复制模板组' })
    },
    editEntry(record, title) {
      this.switchPage()