middleground_code_v2/src/views/masterDataOptions/masterDataAdd.vue

<script src="configData.js"></script>
<template>
  <div class="wrap">
    <div class="btn">
      <div class="title">主数据信息</div>
      <div class="chunkList">
        <div class="chunk">
          <el-button icon="el-icon-back" @click="
            $router.replace({ path: '/integrationOption/masterDataOptions' })
          "
          >返回
          </el-button>
        </div>
        <div class="chunk">
          <el-button v-if="showForm" icon="el-icon-first-aid-kit" type="primary" @click="saveHandle"
                     :loading="saveLoading"
          >保存
          </el-button>
          <el-button v-else icon="el-icon-first-aid-kit" type="primary" @click="showForm=true">编辑
          </el-button>
        </div>
      </div>

    </div>
    <div class="main">
      <!--      展示页-->
      <template v-if="!showForm">
        <div class="planInfo">
          <div class="img">
            <img v-if="imgUrl" :src="imgUrl" class="avatar">
            <img v-else src="./images/icon.png" alt="">
          </div>
          <div class="info">
            <div class="name">{{ this.ruleForm.mdmName }}</div>
            <div class="remark">{{ this.ruleForm.remark }}</div>
          </div>
        </div>
      </template>
      <template v-if="showForm">
        <!--      编辑页-->
        <div class="upload">
          <div class="uploadMain">
            <div class="left">
              <div class="title">主数据logo</div>
              <el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
                         :on-preview="handlePreview" :on-progress="handleProgress" :before-upload="beforeUpload"
                         list-type="picture" :limit="1" :disabled="lookFlag" :on-success="handleAvatarSuccess"
                         :show-file-list="false"
              >
                <div class="line">
                  <div class="left" v-loading="imgLoading">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <img v-else src="./images/icon.png" alt="">
                  </div>
                  <div class="right" v-if="!lookFlag">
                    <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
                  </div>
                </div>
                <div slot="tip" class="el-upload__tip" v-if="!lookFlag">
                  只能上传jpg/png文件，且不超过2MB
                </div>
              </el-upload>
            </div>
            <div class="right">

            </div>
          </div>
        </div>
        <div class="form">
          <baseNewForm ref="mainForm" :spanNumber="24" :isFunBtn="false" :lookFlag="lookFlag" :formRule="!lookFlag"
                       :formRow="formRow" :ruleForm="ruleForm" @onSubmit="onSubmit"
          ></baseNewForm>
        </div>
      </template>

    </div>
  </div>
</template>

<script>
import { getApiModuleApi } from '@/api/apiChunks/index.js'
import configData from './configData'
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
import request from '@/utils/request'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      fileList: [],
      iconBase64: '',
      imgUrl: '',
      loading: false,
      appLogo: '',
      ruleForm: {
        accessMode: []
      },
      lookFlag: false,
      formRow: configData.addForm,
      imgLoading: false,
      saveLoading: false,
      showForm: false,
      billid: ''
    }
  },
  methods: {
    // 文件上传相关时间
    handleProgress(file, fileList) {
      this.loading = true
      this.handleAvatarSuccess({}, fileList).then(res => {
        this.loading = false
      })
    },
    handlePreview(file) {
    },
    async handleAvatarSuccess(res, file) {
      this.loading = true
      this.$refs.upload.clearFiles()//清理文件上传状态
      this.imgUrl = URL.createObjectURL(file.raw)
      let formData = new FormData()
      formData.append('file', file.raw)
      formData.append('fileFlag', true)
      formData.append('businessType', 'application')
      return request({
        url: '/kangarooDataCenterV3/entranceController/fileUpload',
        method: 'post',
        data: formData
      }).then((res) => {

        if (res.status === '200') {
          console.log(res)
          this.$vmNews('上传成功', 'success')
          this.appLogo = res.attribute.id
        }
      })
      return true

    },
    async beforeUpload(file) {
      if (
          file.type.split('/')[1] != 'jpeg' &&
          file.type.split('/')[1] != 'png'
      ) {
        this.$message({
          type: 'warning',
          message: '只能上传jpg/png文件'
        })
        return
      } else {
        if (file.size >= 2000000) {
          this.$message({
            type: 'warning',
            message: '文件大小不超过2MB'
          })
          return
        }
      }
    },
    // 保存按钮、列表验证
    saveHandle() {
      this.$refs.mainForm.submitForm()

    },
    //验证成功准备上传
    async onSubmit() {
      this.saveLoading = true
      if (!this.billid) {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
          updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: 1
        })
        this.$vmNews('保存成功', 'success')
        this.saveLoading = false
        this.$emit('saveSuccessInit', res, this.initEditFormData)
        this.showForm = false
      } else {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
          ...this.ruleForm,
          mdmLogo: this.appLogo,
          mdmType: 1
        })
        this.$vmNews('保存成功', 'success')
        this.saveLoading = false
        this.showForm = false
        this.$emit('saveSuccess')
      }
    },
    // 获取下拉数据(作废）
    async initSelectOptions() {
      let params = {
        tab_name: 'mdm',
        column_name: 'mdm_type'
      }
      const res = await getApiModuleApi({
        tl: 'generalServiceImpl',
        as: 'dictionaryshop',
        dj: 'selectDictionaryshop'
      }, params)
      this.formRow[1].elCol[0].options = []
      res.attribute.forEach((item) => {
        this.formRow[1].elCol[0].options.push({
          label: item.column_content,
          id: item.column_value
        })
      })
      console.log(this.formRow[1].elCol[0].options)
    },
    // 复制-获取表单数据
    async initCopyFormData() {
      const res = await getApiModuleApi({
        tl: 'sysApplicationService',
        as: 'application',
        dj: 'getCopyApp'
      }, { id: this.$route.query.id })
      this.ruleForm = res.attribute
      this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode)
    },
    async initEditFormData() {
      this.openLoading('detail')
      const res = await getApiModuleApi({
        tl: 'mdmModuleService',
        as: '',
        dj: 'getMdm'
      }, { id: this.billid })
      this.ruleForm = res.attribute
      if (res.attribute.mdmLogo) {
        this.appLogo = res.attribute.mdmLogo
        this.getLogoUrl()
      } else {
        // this.imgUrl = false
      }
    },
    //下载logo
    getLogoUrl() {
      this.imgLoading = true
      let id = this.appLogo ? this.appLogo : this.$route.query.appLogo
      return request({
        url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + id,
        method: 'get',
        responseType: 'arraybuffer'
      }).then((res) => {
        this.imgLoading = false
        if (!res.byteLength) {
          this.imgUrl = false
          return
        }
        this.imgUrl =
            'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }

  },
  components: {
    baseNewForm
  },
  created() {
    // 请求下拉options
    // this.initSelectOptions()
    // 判断是什么类型进来的
    if (this.$route.query.id) {
      this.billid = this.$route.query.id
      this.initEditFormData()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-button {
  border-radius: 16px;
}

::v-deep .el-form-item {
  display: block !important;
}

.wrap {
  background-color: #fff;
  width: 100%;
  overflow: auto;
  border-radius: 8px;
  margin-left: 10px;

  > .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      margin-left: 32px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      line-height: 25px;
      text-align: left;
      font-style: normal;
    }

    .chunkList {
      display: flex;

      > .chunk {
        margin-left: 10px;
      }
    }

  }

  > .main {
    margin-top: 10px;

    > .planInfo {
      margin-top: 17px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      > .img {
        margin-left: 24px;
        width: 64px;
        height: 64px;

        img {
          width: 100%;
          height: 100%;
        }

      }

      .info {
        margin-left: 11px;

        .name {
          margin-bottom: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          line-height: 25px;
          text-align: left;
          font-style: normal;
        }

        .remark {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          line-height: 25px;
          text-align: left;
          font-style: normal;
        }
      }
    }

    > .upload {
      background-color: #fff;
      border-radius: 16px;
      padding: 24px 30px;

      > .title {
        font-size: 18px;
        font-weight: 600;
      }

      > .uploadMain {
        display: flex;
        align-items: center;
        justify-content: space-between;

        > .left {
          > .title {
            font-size: 18px;
            color: #999999;
            margin-bottom: 10px;
          }

          .line {
            display: flex;
            align-items: center;

            .left {
              border: 1px dashed #999999;
              width: 64px;
              height: 64px;

              > img {
                width: 100%;
                height: 100%;
              }
            }

            .right {
              margin-left: 15px;
            }
          }
        }
      }
    }

    > .form {
      overflow: auto;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 16px;
      width: 100%;
      padding: 10px 20px;
    }
  }
}
</style>