udi-spms-vue/src/views/purchase/manufacturer/supManufacturerEditDialog.vue

<template>
  <div>
    <el-form
      :model="inputQuery"
      :rules="rules"
      ref="inputQuery"
      label-width="100px"
      style="margin-top: -30px"
    >
      <el-card class="el-card">

        <div style="float:right ">
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 0"
            @click="addOrModifyCompany(0)"
          >草稿保存
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 0|| inputQuery.auditStatus == 6"
            @click="onModifySubmit(6)"
          >提交审核
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            v-if="inputQuery.auditStatus == 3|| inputQuery.auditStatus == 1|| inputQuery.auditStatus == 2"
            @click="onModifySubmit(3)"
          >提交审核
          </el-button
          >
        </div>
        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 40px">
          <el-col :span="10" class="el-col" v-if="fromType==2">
            <el-form-item label="所属供应商:" label-width="150px" prop="customerId">
              <el-select
                v-model="inputQuery.customerId"
                filterable
                remote
                clearable="true"
                :disabled="editType!=0"
                reserve-keyword
                placeholder="请输入供应商名称"
                :remote-method="findMethod"
                :loading="loading"
                style="width: 100%;"
                @change="unitChange"
              >
                <el-option
                  v-for="item in fromOptions"
                  :key="item.customerId"
                  :label="item.companyName"
                  :value="item.customerId"
                >
                  <span style="float: left">{{ item.companyName }}</span>
                </el-option>
              </el-select>
            </el-form-item
            >
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="生产企业:" label-width="150px" prop="companyName">
              <el-input
                size="small"
                placeholder="请输入生产企业"
                v-model="inputQuery.companyName"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="社会信用号:" label-width="150px" prop="creditCode">
              <el-input
                size="small"
                placeholder="请输入社会信用号"
                v-model="inputQuery.creditCode"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="境内境外企业:" label-width="150px" prop="companyType">
              <el-select
                size="small"
                v-model="inputQuery.companyType"
                placeholder="请选择境内境外企业"
                style="width: 100%;"
                @input="companyTypeChange()"
              >
                <el-option label="境内企业" value="1"></el-option>
                <el-option label="境外企业" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="登记状态:" label-width="150px" prop="registerStatus">
              <el-select
                size="small"
                v-model="inputQuery.registerStatus"
                placeholder="请选择登记状态"
                style="width: 100%;"
              >
                <el-option label="续存（在营，开业，在册）" value="1"></el-option>
                <el-option label="吊销" value="2"></el-option>
                <el-option label="注销" value="3"></el-option>
                <el-option label="迁出" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="所在地区:" label-width="150px" prop="placeArea">
              <el-cascader
                size="small"
                :options="options"
                v-model="selectedOptions"
                placeholder="请选择所在地区"
                style="width: 100%"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="生产地区:" label-width="150px" prop="productionArea">
              <el-cascader
                size="small"
                :options="options"
                v-model="selectedOptions2"
                placeholder="请选择生产地区"
                style="width: 100%"
                @change="handleChange2"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="所在地址:" label-width="150px" prop="placeAddress">
              <el-input
                size="small"
                placeholder="请输入内容"
                v-model="inputQuery.placeAddress"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="生产地址:" label-width="150px" prop="productionAddress">
              <el-input
                size="small"
                placeholder="请输入内容"
                v-model="inputQuery.productionAddress"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item label="代理商名称:" label-width="150px" prop="agentName">
              <el-input
                size="small"
                placeholder="请输入代理商名称"
                v-model="inputQuery.agentName"
                :disabled="inputQuery.companyType==1"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="20" class="el-col">
            <el-form-item label="备注:" label-width="150px" prop="remark">
              <el-input
                type="textarea"
                size="small"
                placeholder="请输入内容"
                v-model="inputQuery.remark"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="el-card">
        <div style="float:right ">

          <el-button type="primary" size="mini" icon="search" @click="selectCert"
          >选入资质证书
          </el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="addCert()"
          >添加资质证书
          </el-button
          >

        </div>
        <el-table v-loading="certLoading" :data="certList" style="width: 100%;margin-top: 40px" border
                  highlight-current-row
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column label="证书名称" prop="name"></el-table-column>
          <el-table-column label="证书编号" prop="code"></el-table-column>
          <el-table-column label="生效期" prop="vailDate"></el-table-column>
          <el-table-column label="失效期" prop="expireDate"></el-table-column>
          <el-table-column label="审核状态" prop="auditStatus" width="100">
            <template slot-scope="scope">
              <el-tag :type="(scope.row.auditStatus) | statusFilterType">
                {{ checkFlag[scope.row.auditStatus] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核说明" prop="auditComment"></el-table-column>
          <el-table-column label="状态" prop="status" width="120">
            <template slot-scope="scope">
              <el-tag :type="(scope.row.status) | statusType">
                {{ statusFlag[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>

          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native="addCert(scope.row)">编辑</el-button>
              <el-button type="text" size="mini" @click.native="showImgViewer(scope.row)">预览</el-button>
              <el-button type="text" size="small"
                         v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 2|| scope.row.auditStatus == 6"
                         @click.native="deleteCompanyCert(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>

        <pagination
          v-show="certTotal>0"
          :total="certTotal"
          :page.sync="certQuery.page"
          :limit.sync="certQuery.limit"
          @pagination="certHandleCurrentChange"

        ></pagination>
      </el-card>

      <el-dialog
        title="添加资质证书"
        :visible.sync="addCertVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="70%"
        v-if="addCertVisible"
        append-to-body
        @close="closeLocalDialog"
      >
        <companyAddCert
          :closeDialog="closeLocalDialog"
          :inputQuery="inputQuery"
          :addType="addType"
          :editTye="editTye"
        ></companyAddCert>
      </el-dialog>
      <el-dialog
        title="选入资质证书"
        :visible.sync="selectCertVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="70%"
        v-if="selectCertVisible"
        append-to-body
        @close="closeLocalDialog"
      >
        <supCertSetSelectDialog
          :certType="certType"
          :manufacturerId="manufacturerId"
          :customerId="customerId"
          :closeDialog="closeLocalDialog"
        ></supCertSetSelectDialog>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import { getCompanyInfo, addOrModifyCompany } from '../../../api/purchase/supManufacturer'
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from 'element-china-area-data'
import { filterCompanyCert, deleteCompanyCert, updateCompanyCert } from '../../../api/purchase/companyCert'
import companyAddCert from '@/views/purchase/cert/supCertAddDialog'
import draggable from 'vuedraggable'
import { getSupComapnys, previewImage } from '@/api/purchase/supCompany'
import { getUUID } from '@/utils/strUtil'
import supCertSetSelectDialog from '@/views/purchase/cert/supCertSetSelectDialog'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'supManufacturerEdit',
  props: {
    addCloseDialog: {
      type: Function,
      required: true
    },
    inputQuery: {
      type: Object,
      required: true
    },
    editType: {
      type: Object,
      required: true
    },
    fromType: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API,
      loading: false,
      classesDisplay: false,
      selectedOptions: [],
      selectedOptions2: [],
      imgViewerVisible: false,
      imgList: [],
      options: regionData,
      rules: {

        customerId: [
          {
            required: true,
            message: '请选择所属供应商',
            trigger: 'blur'
          }
        ],

        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }
        ],
        creditCode: [
          {
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }
        ],
        companyType: [
          {
            required: true,
            message: '请选择企业类型',
            trigger: 'change'
          }
        ],
        registerStatus: [
          {
            required: true,
            message: '请选择登记状态',
            trigger: 'change'
          }
        ],
        placeArea: [
          {
            required: true,
            message: '请选择所在地区',
            trigger: 'change'
          }
        ],
        placeAddress: [
          {
            required: true,
            message: '请输入所在地址',
            trigger: 'change'
          }
        ],
        legalPersonName: [
          {
            required: true,
            message: '请输入法人姓名',
            trigger: 'change'
          }
        ],
        legalPersonPapersType: [
          {
            required: true,
            message: '请选择法人证件类型',
            trigger: 'change'
          }
        ],
        legalPersonPapersCode: [
          {
            required: true,
            message: '请输入法人证件号码',
            trigger: 'change'
          }
        ]
      },
      uploadUrl: '',
      fileList: [],
      fileUrl: '',
      certFileUrl: '',
      url: 'http://127.0.0.1:9996/udiwms/image/register/file/getImage?type=image1&name=t11111.jpg',
      certQuery: {
        customerId: null,
        manufacturerIdFk: null,
        page: 1,
        limit: 20,
        type: 2
      },
      certList: [],
      certTotal: 0,
      certLoading: false,
      addCertVisible: false,
      fromOptions: [],
      idQuery: {
        id: ''
      },
      addType: '2', //证书类型：1:供应商；2.生产企业；3.产品品种
      checkFlag: {
        0: '草稿',
        1: '已通过',
        2: '已拒绝',
        3: '变更未审核',
        6: '未审核'
      },
      statusFlag: {
        0: '有效',
        1: '失效'
      },
      editTye: 1,
      formName: 1,
      formMap: {
        1: '新增生产企业资质证书',
        2: '编辑生产企业资质证书'
      },
      manufacturerId: null,
      customerId: null,
      selectCertVisible: false,
      certType: 2
    }
  },
  created() {
    if (this.editType == 0) {
      this.inputQuery.manufacturerId = getUUID('')
    } else {
      this.certQuery.customerId = this.inputQuery.customerId
      this.selectedOptions = this.inputQuery.placeAreaCode.split(',')
      if (this.inputQuery.productionAreaCode != '' && this.inputQuery.productionAreaCode != null && this.inputQuery.productionAreaCode != undefined) {
        this.selectedOptions2 = this.inputQuery.productionAreaCode.split(',')
      }

    }
    this.certQuery.manufacturerIdFk = this.inputQuery.manufacturerId
    this.manufacturerId = this.inputQuery.manufacturerId
    this.customerId = this.inputQuery.customerId
    // this.getData();
    this.getCompanyCertList()
    this.findMethod()
    this.uploadUrl = this.BASE_URL + '/udiwms/upload/register/file'
    this.fileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
    this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
  },
  components: {
    draggable,
    companyAddCert, supCertSetSelectDialog, ElImageViewer
  },
  methods: {
    onModifySubmit(type) {

      this.addOrModifyCompany(type)
    },
    addOrModifyCompany(type) {
      this.$refs['inputQuery'].validate(valid => {
        if (valid) {

          let formData = JSON.parse(JSON.stringify(this.inputQuery))
          formData.auditStatus = type
          this.loading = true
          let urlName = this.editType == 0 ? 'add' : 'update'
          addOrModifyCompany(formData, urlName).then(response => {
            this.loading = false
            if (response.code === 20000) {
              this.addCloseDialog(true)
              this.$message.success('保存成功')
            } else {
              this.$message.error(response.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    certHandleCurrentChange(val) {
      this.certQuery.page = val.page
      this.getCompanyCertList()
    },
    companyTypeChange(val) {
      if (this.inputQuery.companyType == 1 &&  this.inputQuery.agentName!=null) {
        this.inputQuery.agentName = null
      }
    },
    getCompanyCertList() {
      this.certLoading = true
      filterCompanyCert(this.certQuery)
        .then((response) => {
          this.certLoading = false
          this.certList = response.data.list || []
          this.certTotal = response.data.total
        })
        .catch(() => {
          this.certLoading = false
          this.certList = []
        })
    },
    addCert(row) {
      if (this.$isNotBlank(row)) {
        this.formName = 2
        this.inputQuery.formData = row
        this.editTye = 2
      } else {
        this.formName = 1
        this.inputQuery.formData = {}
        this.editTye = 1
      }
      this.addCertVisible = true
    },

    selectCert() {
      this.customerId = this.inputQuery.customerId
      this.selectCertVisible = true
    },

    toViewCompanyCert(row) {
      window.open(this.certFileUrl + row.filePath)
    },
    deleteCompanyCert(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.certLoading = true
        let tquery = {
          id: row.id,
          filePath: row.filePath
        }
        deleteCompanyCert(tquery)
          .then((response) => {
            this.certLoading = false
            if (response.code === 20000) {
              this.getCompanyCertList()
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
            } else {
              this.$message.error(response.message)
            }
          })
          .catch(() => {
            this.certLoading = false
          })
      }).catch(() => {
      })
    },

    isAssetTypeAnImage(ext) {
      return [
        'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
    },
    showImgViewer(row) {
      this.certFileUrl = this.BASE_URL + '/udiwms/image/register/file/getImage?type=image2&name='
      this.imgList = []
      previewImage({ imageUrl: row.filePath, certFileUrl: this.certFileUrl }).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data
        }
      })
      this.imgViewerVisible = true
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'hidden'
      document.addEventListener('touchmove', m, false) // 禁止页面滑动
    },
    closeImgViewer() {
      this.imgViewerVisible = false
      const m = (e) => {
        e.preventDefault()
      }
      document.body.style.overflow = 'auto'
      document.removeEventListener('touchmove', m, true)
    },
    disableCert(row, status) {
      row.status = status
      updateCompanyCert(row).then(response => {
        this.loading = false
        if (response.code === 20000) {
          this.$message.success('更新成功！')
          this.getCompanyCertList()
        } else {
          this.$message.error(response.message)
        }
      })

    },

    closeLocalDialog() {
      this.addCertVisible = false
      this.selectCertVisible = false
      this.getCompanyCertList()
    },

    findMethod(query) {
      this.fromOptions = []
      let cQuery = {
        companyName: query
      }
      getSupComapnys(cQuery)
        .then((response) => {
          this.loading = false
          this.fromOptions = response.data.list || []
        })
        .catch(() => {
          this.loading = false
        })
    }
    ,
    unitChange(val) {
      this.certQuery.customerId = val
    },

    handleChange(value) {
      this.inputQuery.placeArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
      console.log(this.inputQuery.placeArea)
      this.inputQuery.placeAreaCode = value.toString()
    },
    handleChange2(value) {
      this.inputQuery.productionArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
      this.inputQuery.productionAreaCode = value.toString()
    },
    uploadHandleRemove(file, fileList) {
      console.log(file, fileList)
    },
    uploadHandlePreview(file) {
      console.log(file)
      console.log(this.fileList)
    },
    uploadHandleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    uploadOnchange(file, fileList) {
      let fileName = file.name
      let uid = file.uid
      let pos = fileName.lastIndexOf('.')
      let lastName = fileName.substring(pos, fileName.length)
      if (lastName.toLowerCase() !== '.jpg' && lastName.toLowerCase() !== '.png') {
        this.$message.error('上传文件只能是 .jpg,.png 格式')
        for (let i = 0; i < fileList.length; i++) {//从list删除
          if (fileList[i].uid === uid) {
            fileList.splice(i, 1)
          }
        }
        return
      }
      // 限制上传文件的大小
      const isLt = file.size / 1024 / 1024 / 30 <= 1
      if (!isLt) {
        this.$message.error('上传文件大小不能超过 30MB')
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].uid === uid) {
            fileList.splice(i, 1)
          }
        }
      }
      return isLt
    },
    uploadHandleSuccess(response, file, fileList) {
      console.log(response)
      if (response.code === 20000) {
        this.inputQuery.newFilePath = response.data.name
        this.onModifySubmit('inputQuery')
      } else {
        this.$message.error('文件上传失败：' + response.message)
      }
    },
    uploadHandleError() {

    }

  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: 'warning',
        1: 'success',
        2: 'danger',
        6: 'warning'
      }
      return statusMap[status]
    }
  }
}
</script>
<style>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>