bonus-ui/src/views/material/ma/supplier/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item  prop="keyWord">
        <el-input
            v-model="queryParams.keyWord"
            placeholder="请输入关键词"
            clearable
            @keyup.enter.native="handleQuery"
            maxlength="20"
          />   
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
                      <el-col :span="1.5">
                          <el-button
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleAdd"
                              v-hasPermi="['machinery:type:add']"
                              >新增</el-button
                          >
                      </el-col> 
                       <el-col :span="1.5">
                          <el-button
                          type="warning"
                          plain
                          icon="el-icon-download"
                          size="mini"
                          @click="handleExport"
                          >导出
                          </el-button>
                      </el-col> 
                      <right-toolbar
                          :showSearch.sync="showSearch"
                          @queryTable="getList"
                      ></right-toolbar>
      </el-row>

  
      <el-table v-loading="loading" :data="houseList" ref="multipleTable" row-key="teamId">
        <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" /> -->
        <el-table-column label="序号" align="center" width="80" type="index">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="厂家名称" align="center" prop="supplier" sortable/>
        <el-table-column label="厂家地址" align="center" prop="address" sortable/>
        <el-table-column label="法人代表" align="center" prop="legalPerson" sortable/>
        <el-table-column label="主要联系人" align="center" prop="primaryContact" sortable/>
        <el-table-column label="联系电话" align="center" prop="phone" sortable/>
        <el-table-column label="主要经营范围" align="center" prop="businessScope" sortable/>
        <el-table-column label="备注" align="center" prop="remark" sortable>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['machinery:type:edit']"
                            >
                                编辑
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['machinery:type:del']"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
     <!-- 新增或修改弹窗 -->
     <el-dialog :title="title" :visible.sync="showHouse" width="1000px"   append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂家名称" prop="supplier" >
                            <el-input
                                v-model="form.supplier"
                                placeholder="请输入厂家名称"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="厂家地址" prop="address">
                            <el-input
                                v-model="form.address"
                                placeholder="请输入厂家地址"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
     
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人代表" prop="legalPerson" >
                            <el-input
                                v-model="form.legalPerson"
                                placeholder="请输入法人代表"
                                maxlength="10"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主要联系人" prop="primaryContact">
                            <el-input
                                v-model="form.primaryContact"
                                placeholder="请输入主要联系人"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>   

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone" >
                            <el-input
                                v-model="form.phone"
                                placeholder="请输入联系电话"
                                maxlength="11"
                            />
                        </el-form-item>
                    </el-col>
                </el-row> 
           <el-row >  
             <el-col :span="12">
               <el-form-item label="主要联系范围" prop="businessScope">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="输入内容"
                  v-model="form.businessScope"
                  show-word-limit
                  >
                </el-input>
                </el-form-item>      
             </el-col> 

            <el-col :span="12">
               <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="请输入备注"
                  v-model="form.remark"
                  maxlength="100"
                  show-word-limit
                  >
                </el-input>
                </el-form-item> 
            </el-col>
           </el-row> 
        <el-form-item label="营业执照">
          <el-upload
              class = "upload-demo"
               action="#"
              :file-list="businessLicenseListTemp"
              :show-file-list="true"
              :auto-upload="false"
              list-type="picture-card"
              accept=".png, .jpg, .jpeg, .pdf"
              :on-change="handleChangeBusinessList"
              :class="{ disabled: uploadDisabled }"
              :on-preview="picturePreview"
              :on-remove="handleRemoveElectricianImgList"
          >

           <!-- 文件格式下载，图片格式预览 -->
           <div slot="file" slot-scope="{file}">
              <img v-if="isImage(file)" class="el-upload-list__item-thumbnail"  :src="file.url" alt="">
              <div v-else class="picture-card-container" >
                <img class="picture-card" :src="urlTemp" alt="">
                <p class="file-name">{{ file.name }}</p>
              </div>
              <span class="el-upload-list__item-actions">
                <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
                </span>
                <span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
                <i class="el-icon-zoom-in" />
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemoveElectricianImgList(file)">
                <i class="el-icon-delete" />
                </span>
              </span>
          </div>

              <i class="el-icon-plus avatar-uploader-icon" ></i>
          </el-upload>
        </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
      <!-- 图片查看弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="500px" height="500px" >
      <img width="100%" height="500px" :src="dialogImageUrl"  />
    </el-dialog>
    </div>
  </template> 
  
  <script>
  import { getListFacturer,getFacturerDetail,editFacturer,addFacturer,delFacturer } from "@/api/ma/supplier";
  import { imgUpLoadThree, fileUpLoad } from '@/api/system/upload'
  import { downloadFile } from '@/utils/download'
  import { getToken } from '@/utils/auth'
  export default {
    name: "supplier",
    data() {
      return {
        // 遮罩层
        loading: false,
  
        loadingTwo: false,
  
  
        // 是否显示项目部Id
        showName: false,
  
        // 是否显示施工预警信息
        showWarn: false,
  

        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
  
  
        // 显示搜索条件
        showSearch: true,
        showHouse: false,
       
        // 总条数
        total: 0,
        totalTwo : 0,
        // 施工记录表格数据
        houseList: [],
        maxLength:100,//已选列表上限，防止数据过多请求报错
        keeperDataRange:[],
        // 班组人员表格数据
        teamList: [],
        teamTempList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord:undefined
        },
        // 查询参数
        queryTeam: {
            pageNum: 1,
            pageSize: 10,
            name: undefined,
            sex: undefined,
            teamId: undefined,
          },

        fileList:[],
        businessLicenseFileList:[],
        businessLicenseListTemp:[],
        delBusinessFileIdList:[],
       //图片查看弹窗
        dialogImageUrl: '',
        dialogVisible: false,
       // 表单参数
        form: {},
       // 表单校验
       rules: {
                
            },

        //上传
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: 'Bearer ' + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + '/file/upload'
        },
      };
    },
    computed: {
   
      //图片上传1张后，隐藏上传框
      uploadDisabled() {
          return this.businessLicenseListTemp.length > 2
      },
    },
    created() {
      this.getList();
    },
    methods: {
    //提交时循环fileList 获取raw文件
     async getFileData() {
        const fileTwo = []
        this.businessLicenseListTemp.forEach(item => {
          if (item?.hasOwnProperty('raw')) {
            fileTwo.push(item.raw)
          }
        })
        return { fileTwo }
      },

      // 图片上传
      async  imgUpLoadTwoAll(param) {
            param.type = 'ma'
            imgUpLoadThree(param)
                .then((res) => {
                    if (res.code == 200) {
                        let obj =  {'name':res.data.name,'url':res.data.url}
                        console.log('obj',obj)
                        this.businessLicenseFileList.push(obj);
                    } else {
                        // this.$msgError(res.msg)
                        this.$modal.msgError(res.msg)
                    }
                })
                .catch((error) => {
                    // this.$msgError(error)
                    this.$modal.msgError(error)
                })
        },
      
      //上传组件-图片查看
      picturePreview(file) {
        this.dialogImageUrl = file.url;
        const parts = file.name.split('.');
        const extension = parts.pop();
        if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
          const windowName = file.name;
          window.open(file.url,windowName)
        }else{
          this.dialogVisible = true
        }
      },
        handleRemoveElectricianImgList(file, fileList) {
          let sum = 0
          this.businessLicenseListTemp.forEach((item, index) => {
              if (item.uid == file.uid) {
                  sum = index
              }
          })
         
         
          this.businessLicenseListTemp.splice(sum, 1)
      },

        isImage(file){
          this.urlTemp = require('@/assets/file.png');
          if(this.updataIf(file)){
              return false
        }else{
          return true
        }
      },
    // 判断文件类型,图片预览，文件下载
     updataIf(e) {
              if (e.fileName) {
                const parts = e.fileName.split('.');
                const extension = parts.pop();
                  if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                      return false
                  } else {
                  return true
                  }
              } else {
                const parts = e.name.split('.');
                const extension = parts.pop();
                  if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                      return false
                  } else {
                      return true
                  }
              }
          },

      handleChangeBusinessList(file, fileList) {
        const fileListTemp = fileList.filter(item => {
                      return item.uid != file.uid
                  });
        const parts = file.name.split('.');
        const extension = parts.pop();
        if(fileList.length > 3){
          this.$message.warning('最多上传3张营业执照')
          fileList = fileList.filter(item => {
              return item.uid != file.uid
          })
        }else if(!(extension === 'pdf' || extension === 'png' || extension === 'jpg' || extension === 'jpeg')){
              this.$message.warning('文件格式不正确')
              fileList = fileList.filter(item => {
                  return item.uid != file.uid
              })
        }else if(file.size > 1024 * 1024 * 10){
                  this.$message.warning('文件大小不能超过10Mb')
                  fileList = fileList.filter(item => {
                      return item.uid != file.uid
                  })
        }else if(file.name.length > 40){
                  this.$message.warning('文件名长度不能超过40个字符')
                  fileList = fileList.filter(item => {
                      return item.uid != file.uid
                  })
        }else if(fileListTemp.some(item =>item.name === file.name)){
                  this.$message.warning('文件名重复')
                  fileList = fileList.filter(item => {
                      return item.uid != file.uid
                  })
        }
        fileList.forEach(file=>{
                  if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
                      this.urlTemp = require('../../../../assets/file.png');
                  
                  }
        });
        this.businessLicenseListTemp = fileList;
      },

      async getList() {
        this.loading = true;
        getListFacturer(this.queryParams).then(response => {
          this.houseList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

        /** 新增按钮操作 */
        handleAdd() {
        this.reset()
        this.businessLicenseListTemp=[];
        this.businessLicenseFileList=[];
        this.showHouse = true
        this.title = '新增'
        },

        handleUpdate(row){
          this.reset()
          this.businessLicenseListTemp=[];
          this.businessLicenseFileList=[];
          const supplierId = row.supplierId 
            getFacturerDetail(supplierId).then((response) => {
                this.form = response.data;

                this.showHouse = true
                this.title = '修改'
            })
        },
        // 表单重置 
        reset() {
            this.form = {};
            this.resetForm("form");
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.keyWord=null;
            this.handleQuery();
        },

        //** 提交按钮 */
       async submitForm() { 
          this.$refs["form"].validate(async valid => {
          if (valid) {           
              if (this.form.supplierId != undefined) {
                 const reqData = new FormData();

              editFacturer(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.showHouse = false;
                  this.getList();
                  this.businessLicenseListTemp=[];
                  this.delBusinessFileIdList=[];
                });
              } else {
                if(this.businessLicenseListTemp.length!=0){
                  await  this.getImaUpload(),
                  await this.addFacturerTemp(this.form);
                }else{
                   await this.addFacturerTemp(this.form);
                }

            }
            }
            });
        },

       async getImaUpload(){
         this.businessLicenseFileList = []
            const reqData = new FormData()
            const {fileTwo} = await this.getFileData()
            let res = await imgUpLoadThree(fileTwo);
            if (res.code === 200) {
                res.data.forEach(item=>{
                let objTwo = { 'fileName': item.name, 'fileUrl': item.url,'modelId': null, 'dicId':4 };
                console.log('obj', objTwo);
                this.businessLicenseFileList.push(objTwo);
               })
            } else {
                this.$modal.msgError(res.msg);
            }
            },   
        
        async addFacturerTemp(form){
                console.log('businessLicenseFileList',this.businessLicenseFileList)
                this.form.businessLicenseFileList=this.businessLicenseFileList
                addFacturer(form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.showHouse = false;
                this.getList();
                this.businessLicenseListTemp=[];
                this.businessLicenseFileList=[];
                this.delBusinessFileIdList=[];
              });
        },

        // 取消按钮
        cancel() {
          this.showHouse = false;
           this.businessLicenseFileList=[];
          this.reset();
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const supplierId = row.supplierId
            this.$modal
                .confirm('是否确认删除数据项？')
                .then(function () {
                    return delFacturer(supplierId)
                })
                .then(() => {
                    this.$modal.msgSuccess('删除成功')
                    this.getList()
                })
                .catch(() => {})
        },
       
        handleExport() {
            this.download('/material/wh_house_info/export', {
              ...this.queryParams
            }, `仓库管理_${new Date().getTime()}.xlsx`)
        },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

    }
  };
  </script>
  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  ::v-deep .el-upload-list--picture-card{
  display: flex;
}
::v-deep .el-upload-list__item {
  margin-bottom: 20px;
  overflow: revert;
}
::v-deep .el-upload-list__item-actions{
  overflow:hidden; 
}
.upload-demo{
  display: flex;
}
.el-upload-list__item-thumbnail{
  height: 145px!important;
}
.picture-card-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.picture-card{
  width: 100%;
  height: 100%;
  object-fit:cover;
  justify-content: center;
  // border: 1px solid  #ddd;
  // border-radius: 4px;
}
.file-name{
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  bottom: -35px;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color:#333;
  z-index: 999999;
}
.file-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
  </style>