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
              >
                <CopyButton :copyText="formData.successLoginProject" />
                <el-button v-if="module !== 'detail'" slot="append" @click="handleFocus">引入</el-button>
              </el-input>
            </el-col>
            <template
              v-if="(pageType == 'home' && !isCustomer) || (['frock', 'cross'].includes(pageType) && isTradeExaminer)"
            >
              <el-col :span="7" class="flex-box">
                <div class="flex-box-title">经销商编号</div>
                <el-input
                  v-model="formData.successCustomerNumber"
                  class="my-input"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />
                <CopyButton :copyText="formData.successCustomerNumber" />
              </el-col>
              <el-col :span="7" class="flex-box">
                <div class="flex-box-title">经销商名称</div>
                <el-input
                  v-model="formData.successCustomerName"
                  class="my-input"
                  placeholder="请填写"
                  size="mini"
                  clearable
                />
                <CopyButton :copyText="formData.successCustomerName" />
              </el-col>
            </template>
            <el-col v-if="!isCustomer" :span="7" class="flex-box">
              <div class="flex-box-title">业务员编号</div>
              <el-input
                v-model="formData.successServiceNumber"
                class="my-input"
                placeholder="请填写"
                size="mini"
                clearable
              />
              <CopyButton :copyText="formData.successServiceNumber" />
            </el-col>
            <el-col v-if="!isCustomer" :span="7" class="flex-box">
              <div class="flex-box-title">业务员名称</div>
              <el-input
                v-model="formData.successServiceName"
                class="my-input"
                placeholder="请填写"
                size="mini"
                clearable
              />
              <CopyButton :copyText="formData.successServiceName" />
            </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 />
            <CopyButton :copyText="formData.note" />
          </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 />
            <CopyButton :copyText="formData.commonFollowProject" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item" v-if="shenheshangchuan">
          <div class="label" style="height: auto">审核上传</div>
          <div class="value" style="height: auto">
            <ImageUpload class="mg-b" :file-list="formData.files" :multiple="true" />
            <div style="margin-left: 20px">注：可上传文件、附件</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="item" v-if="formData.oldFileName && formData.oldFileUrl">
          <div class="label" style="height: auto">旧单附件</div>
          <div class="value" style="padding: 10px">
            <el-link :href="formData.oldFileUrl" target="_blank">{{ formData.oldFileName }}</el-link>
          </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', 'isCustomer']),
    shenheshangchuan() {
      var data = JSON.parse(localStorage.getItem('supply_user') || '{}')
      return data?.isTradeExaminer
        ? true
        : data?.isService && this.$route.name === 'crossDistrictkList'
        ? true
        : this.module === 'detail'
        ? false
        : true
    }
  },
  watch: {
    'formData.id': {
      immediate: true,
      handler() {
        if (this.formData.id) {
          if (this.formData.files.length) {
            console.log(this.formData.files)
            this.formData.files = this.showImage(this.formData.files)
          }
          this.getData()
        }
      }
    }
  },

  methods: {
    handleSuccess(val) {
      const res = val[0]
      this.formData.successLoginProject = res.projectNo
      this.formData.successCustomerNumber = res.customerNumber
      this.formData.successCustomerName = res.customerName
      this.formData.successServiceName = res.serviceName
      this.formData.successServiceNumber = res.serviceNumber
    },
    handleCancel() {
      this.showDialog = false
    },
    handleFocus() {
      this.showDialog = true
    },
    onSbumit() {},
    showImage(arr = []) {
      const newArr = []
      arr &&
        arr.forEach(k => {
          if (k.fileUrl && k.fileUrl !== '0') {
            newArr.push({
              hover: false,
              name: '',
              url: k.fileUrl
            })
          }
        })
      return newArr
    },
    // 检查文件类型
    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() {
      console.log(333)
      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) {
          if (!this.formData.successCustomerNumber) {
            this.formData.successCustomerNumber = res.data.records[0].customerNumber
          }
          if (!this.formData.successCustomerName) {
            this.formData.successCustomerName = res.data.records[0].customerName
          }
          if (!this.formData.successServiceName) {
            this.formData.successServiceName = res.data.records[0].serviceName
          }
          if (!this.formData.successServiceNumber) {
            this.formData.successServiceNumber = 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>