supply-front/src/views/commercialEngineering/components/examine.vue

<template>
  <div>
    <h3>{{ title }}</h3>
    <el-divider />
    <div class="diy-table-1">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label">登录状态</div>
          <div class="value">
            <el-radio-group v-model="formData.loginStatus">
              <el-radio v-for="item in engType" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col v-if="formData.loginStatus === 'FAIL'" :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">选择登录成功项目</div>
          <div class="value" style="height: 100%; display: block">
            <el-col :span="7" class="flex-box">
              <div class="flex-box-title">项目编号{{ formData.loginStatus === 'REJECT' ? '*' : '' }}</div>
              <el-input
                v-model="formData.successLoginProject"
                class="my-input"
                placeholder="请填写"
                size="mini"
                clearable
              >
                <el-button slot="append" @click="handleFocus">引入</el-button>
              </el-input>
            </el-col>
            <template v-if="isTradeExaminer">
              <el-col :span="7" class="flex-box">
              <div class="flex-box-title">经销商编号</div>
              <el-input
                v-model="formData.customerNumber2"
                class="my-input"
                placeholder="请填写"
                size="mini"
                clearable
              />
            </el-col>
            <el-col :span="7" class="flex-box">
              <div class="flex-box-title">经销商名称</div>
              <el-input v-model="formData.customerName2" class="my-input" placeholder="请填写" size="mini" clearable />
            </el-col>
            </template>
            <el-col :span="7" class="flex-box">
              <div class="flex-box-title">业务员编号</div>
              <el-input v-model="formData.serviceNumber2" class="my-input" placeholder="请填写" size="mini" clearable />
            </el-col>
            <el-col :span="7" class="flex-box">
              <div class="flex-box-title">业务员名称</div>
              <el-input v-model="formData.serviceName2" class="my-input" placeholder="请填写" size="mini" clearable />
            </el-col>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="item">
          <div class="label">审核备注{{ formData.loginStatus === 'REJECT' ? '*' : '' }}</div>
          <div class="value">
            <el-select v-if="!['frock', 'cross'].includes(pageType)" v-model="formData.examineNote" placeholder="请选择" size="mini" clearable style="width: 100%">
              <el-option
                v-for="item in commonData.dict['TRADE_EXAMINE_NOTE']"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="formData.note"
              placeholder="请填写"
              size="mini"
              clearable
            />
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="item">
          <div class="label">共同跟进项目编号</div>
          <div class="value">
            <el-input v-model="formData.commonFollowProject" placeholder="请填写" size="mini" clearable />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item">
          <div class="label" style="height: auto">审核上传</div>
          <div class="value" style="height: auto">
            <ImageUpload v-if="module !== 'detail'" class="mg-b" :file-list="formData.files" />
            <template v-else>
              <div
                v-for="item in formData.files"
                :key="item.fileUrl"
                style="display: flex; width: 120px; height: 120px; align-items: center; justify-content: center"
              >
                <el-image
                  v-if="checkFileType(item.fileUrl) == 'image'"
                  ref="img"
                  :src="$imageUrl + item.fileUrl"
                  fit="cover"
                  :preview-src-list="[$imageUrl + item.fileUrl]"
                  class="elImageClose"
                />
                <div
                  style="
                    display: flex;
                    width: 120px;
                    height: 120px;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                  "
                  @click="openPdf(item)"
                >
                  <img v-if="checkFileType(item.fileUrl) == 'word'" class="file" src="@/assets/common/word.png">
                  <img v-if="checkFileType(item.fileUrl) == 'excel'" class="file" src="@/assets/common/excel.png">
                  <img v-if="checkFileType(item.fileUrl) == 'ppt'" class="file" src="@/assets/common/ppt.png">
                  <img
                    v-if="checkFileType(item.fileUrl) == 'pdf'"
                    class="file"
                    style="cursor: pointer"
                    src="@/assets/common/pdf.png"
                  >

                  <img v-if="checkFileType(item.fileUrl) == 'file'" class="file aaa" src="@/assets/common/zip.jpeg">
                </div>
              </div>
            </template>
            <div style="margin-left: 20px">注：可上传文件、附件</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--  -->
    <LoginSuccess
      :page-type="pageType"
      :form-data="formData"
      :show-dialog="showDialog"
      @success="handleSuccess"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import { getLoginHomeDecorationList } from '@/api/homeDecoration'
import { getLoginCrossDistrictList } from '@/api/crossDistrict'
import { getLoginFrockList } from '@/api/frock'
import { mapGetters } from 'vuex'

import ImageUpload from '@/components/Common/image-upload.vue'
import LoginSuccess from './loginSuccess.vue'
export default {
  components: {
    ImageUpload,
    LoginSuccess
  },
  props: {
    title: {
      type: String,
      default: '审核信息'
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    // 页面类型
    pageType: {
      type: String,
      default: 'frock'
    },
    // 功能类型
    module: {
      type: String,
      default: 'add'
    },
    commonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      engType: [
        { label: '登录成功', value: 'OK' },
        { label: '登录不成功', value: 'FAIL' },
        { label: '驳回', value: 'REJECT' }
      ],
      showDialog: false
    }
  },
  computed: {
    ...mapGetters(['isTradeExaminer'])
  },
  watch: {
    async 'formData.id'(newValue, oldValue) {
      console.log(3333)
       this.getData()
    }
  },
  methods: {
    handleSuccess(val) {
      const res = val[0]
      this.formData.successLoginProject = res.projectNo
      this.formData.customerNumber2 = res.customerNumber
      this.formData.customerName2 = res.customerName
      this.formData.serviceName2 = res.serviceName
      this.formData.serviceNumber2 = res.serviceNumber
    },
    handleCancel() {
      this.showDialog = false
    },
    handleFocus() {
      this.showDialog = true
    },
    onSbumit() {},
    // 检查文件类型
    checkFileType(url) {
      if (!url) return ''
      const fileSuffix = url.substring(url.lastIndexOf('.') + 1)

      if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
        return 'image'
      } else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
        return 'word'
      } else if (['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
        return 'excel'
      } else if (['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
        return 'ppt'
      } else if (['pdf'].includes(fileSuffix)) {
        return 'pdf'
      } else if (['zip', 'rar', 'gz', 'apk'].includes(fileSuffix)) {
        return 'file'
      } else {
        return ''
      }
    },
    openPdf(item) {
      console.log(item, 999)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = this.$imageUrl + item.fileUrl
      link.download = item.fileName
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    getData() {
      if (!this.formData.successLoginProject) return
      const params = {
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'a.project_no',
            compare: 'like',
            value: this.formData.successLoginProject
          }
        ]
      }
      const objFn = {
        home: getLoginHomeDecorationList,
        cross: getLoginCrossDistrictList,
        frock: getLoginFrockList
      }
      objFn[this.pageType](params).then(res => {
        if (res.data.records && res.data.records.length) {
          this.formData.customerNumber2 = res.data.records[0].customerNumber
          this.formData.customerName2 = res.data.records[0].customerName
          this.formData.serviceName2 = res.data.records[0].serviceName
          this.formData.serviceNumber2 = res.data.records[0].serviceNumber
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.diy-table-1 {
  border: 1px solid #cccc;
}
.diy-table-1 .item {
  border-bottom: 1px solid #ccc;
}
.diy-table-1 .item .label {
  width: 150px;
  border-right: 1px solid #ccc;
}
.diy-table-1 .item .value{
  border-right: 1px solid #ccc;
}

::v-deep .el-radio {
  margin-right: 120px;
}
.flex-box {
  display: flex;
  align-items: center;
  margin: 5px 20px;
  &-title {
    width: 100px;
  }
}
::v-deep .my-input > input {
  padding-left: 10px !important;
  border: 1px solid #dcdfe6 !important;
}
.mg-b {
  margin: 10px 0;
}
::v-deep .el-image-viewer__close {
  top: 106px;
  right: 40px;
  width: 40px;
  height: 40px;
  font-size: 40px;
}
::v-deep .el-radio__inner {
    border: 2px solid #ccc;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>