diantou/src_product/iam/components/audit-form-top-banner.vue

<template>
  <a-layout ref="formLayout" :class="$style.page">
    <a-layout-header :class="$style.header">
      <!-- <div :class="$style.headerTitle"></div> -->
      <div v-show="showtitle">
        <span v-show="showtitle">
          <div :class="$style.titlepoint"></div>
          <span :class="['toptitle', $style.toptitle]"></span>
        </span>
        <a-button type="default" :class="$style.closeBtn" @click="close">关闭</a-button>
        <slot name="afterbtn"></slot>
        <a-button
          v-if="handelSaveForm && formData !== 'VIEW'"
          type="primary"
          :class="$style.saveBtn"
          :loading="loading['save']"
          @click="saveForm"
          >保存
        </a-button>
        <a-button
          v-if="handelRollback && formData !== 'VIEW'"
          type="primary"
          :class="$style.rollbackBtn"
          @click="reject"
          >驳回
        </a-button>
        <a-button
          v-if="handelSubmitForm && formData !== 'VIEW'"
          type="primary"
          :class="$style.submitBtn"
          :loading="loading['submit']"
          @click="submit"
          >提交
        </a-button>
        <a-button
          v-if="handelPublish && formData !== 'VIEW' && hidenOrShow"
          type="primary"
          :class="$style.publishBtn"
          :loading="loading['publish']"
          @click="publish"
          >发布
        </a-button>
        <slot name="beforebtn"></slot>
      </div>
    </a-layout-header>
    <a-layout style="padding:20px">
      <a-layout
        style="height: 100%;padding:20px;overflow-y: auto;background: #fff"
        class="sd-has-table"
      >
        <div v-sd-watermark="waterMark" :class="$style.formDiv">
          <slot></slot>
        </div>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import systemManage from '@/system-manage/system-manage'

import components from './_import-components/audit-form-top-banner-import'
// 带顶部Banner按钮表单
export default {
  name: 'AuditFormTopBanner',
  components,
  props: {
    handelSubmitForm: {
      type: Function,
      default: null,
    },
    handelSaveForm: {
      type: Function,
      default: null,
    },
    handelPublish: {
      type: Function,
      default: null,
    },
    handelRollback: {
      type: Function,
      default: null,
    },
    formData: {
      type: String,
      default: '',
    },
    hidenOrShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      waterMark: systemManage.getFormWaterMark(),
      showtitle: false,
      loading: { publish: false, save: false, submit: false },
    }
  },
  watch: {
    loading(val) {
      // 加载中状态，3秒之后重置
      if (val === true) {
        setTimeout(() => {
          this.loading = false
        }, 3000)
      }
    },
  },
  mounted() {
    let nums = 0
    const setTitle = setInterval(() => {
      nums++
      if (document.querySelector('.title_sd-detail-form_common') && nums < 1000) {
        document.querySelector('.toptitle').innerHTML = document.querySelector(
          '.title_sd-detail-form_common'
        ).innerHTML
        this.showtitle = true
        clearInterval(setTitle)
      }
    }, 10)
  },
  methods: {
    close(flag) {
      crossWindowWatcher.notifyChange(this.$route.fullPath, flag)
      window.close()
    },
    submit() {
      this.setLoading('submit')
      this.$emit('handelSubmitForm')
    },
    saveForm() {
      this.setLoading('save')
      this.$emit('handelSaveForm')
    },
    publish() {
      this.setLoading('publish')
      this.$emit('handelPublish')
    },
    reject() {
      this.$emit('handelRollback')
    },
    setLoading(type) {
      this.loading[type] = true
      setTimeout(() => {
        this.loading[type] = false
      }, 3000)
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';
.toptitle {
  position: fixed;
  top: 9px;
  left: 40px;
  font-size: 22px;
  font-weight: bold;
  color: #404040;
}
.formDiv {
  margin: -8px 22px 22px 22px;

  :global(.buttons_sd-detail-form_common) {
    :global(.ant-form-item-control-wrapper) {
      padding-top: 4%;
      padding-left: 24%;
    }
  }

  .tr_border {
    box-sizing: border-box;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
  }

  :global(.title_sd-detail-form_common) {
    font-size: 1.5em;
    text-align: center;
  }

  :global(.buttons_sd-detail-form_common) {
    display: none;
  }
}

.close-btn,
.submitBtn,
.save-btn,
.rollbackBtn,
.publishBtn {
  top: 8px;
  float: right;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.close-btn {
  margin-right: 0;
}

// .save-btn {
//   right: 80px;
// }

// .submitBtn {
//   right: 145px;
// }

// .rollbackBtn {
//   right: 210px;
// }

.page {
  height: 100%;

  :global(.sd-frame-main) {
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
}

.header {
  height: 30px;
  padding: 0;
  line-height: 30px;
  // background: linear-gradient(to right, #3f9bff, #0e7df6);
  // background-image: linear-gradient(90deg, #1890ff 0%, #0162eb 100%);
  background: transparent;
  .header-title {
    display: inline-block;
    width: 256px;
    height: 100%;
    background: url('~@custom/images/logo.png') no-repeat center;
  }
  .titlepoint {
    position: fixed;
    top: 12px;
    left: 20px;
    width: 8px;
    height: 27px;
    background: #1890ff;
    border-radius: 8px;
  }
}

.header > div:last-child {
  width: calc(100% - 20px);
}
</style>