drp-ui/src/views/qualityControl/gysDetail.vue

<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" class="baseinfoClass" >
            <el-form-item style="margin-left: -3vw;">
                <div class="text-with-line">基本信息</div>
            </el-form-item> 
            <el-form-item>
                <el-col :span="6">
                    <span>企业属性：{{baseInfoData.companyAttributes}}</span>
                </el-col>
                <el-col :span="6">
                    <span>供应商编码：{{baseInfoData.companyCode}}</span>
                </el-col>
                <el-col :span="6">
                    <span>供应商名称：{{baseInfoData.companyName}}</span>
                </el-col>
                <el-col :span="6">
                    <span>纳税人登记号：{{baseInfoData.taxpayerid}}</span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="6">
                    <span>证照分类：{{baseInfoData.licenseType}}</span>
                </el-col>
                <el-col :span="6">
                    <span>企业类别：{{baseInfoData.companyType}}</span>
                </el-col>
                <el-col :span="6">
                    <span>营业执照号：{{baseInfoData.businessLicenseNumber}}</span>
                </el-col>
                <el-col :span="6">
                    <span>注册资金(万元)：{{baseInfoData.registeredFund}}</span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="6">
                    <span>成立日期：{{baseInfoData.establishDate}}</span>
                </el-col>
                <el-col :span="6">
                    <span>法人：{{baseInfoData.legalbody}}</span>
                </el-col>
                <el-col :span="6">
                    <span>e-mail地址：{{baseInfoData.email}}</span>
                </el-col>
                <el-col :span="6">
                    <span>企业地址：{{baseInfoData.companyAddress}}</span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="6">
                    <span>供应商税类：{{baseInfoData.supplierTaxType}}</span>
                </el-col>
                <el-col :span="6">
                    <span>生产许可证号：{{baseInfoData.productionLicenseNumber}}</span>
                </el-col>
                <el-col :span="6">
                    <span>经营许可证号：{{baseInfoData.businessLicenseNumber2}}</span>
                </el-col>
                <el-col :span="6">
                    <span>付款协议：{{baseInfoData.payment}}</span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="6">
                    <span>合作有效期起：{{baseInfoData.cooperationWorkStartTime}}</span>
                </el-col>
                <el-col :span="6">
                    <span>合作有效期止：{{baseInfoData.cooperationWorkEndTime}}</span>
                </el-col>
            </el-form-item> 
            <el-form-item style="margin-left: -3vw;">
                <div class="text-with-line">证照信息</div>
            </el-form-item> 
            <el-form-item >
                <el-col :span="2"  v-for="item in items1" :key="'index1-'+item.id">
                    <el-tag
                        :label="item.id"
                        :value="item.licenseName"
                        :type="item.serviceState == '0' ? 'danger' : 'info'"
                        style="width: 7.5vw; text-align: center;  height: 4vh; line-height:4vh;"
                        effect="plain">
                        {{ item.licenseName }}
                    </el-tag>
                </el-col>
            </el-form-item> 
            <el-form-item >
                <el-col :span="2"  v-for="item in items2" :key="'index1-'+item.id">
                    <el-tag
                        :label="item.id"
                        :value="item.licenseName"
                        :type="item.serviceState == '0' ? 'danger' : 'info'"
                        style="width: 7.5vw; text-align: center;  height: 4vh; line-height:4vh;"
                        effect="plain">
                        {{ item.licenseName }}
                    </el-tag>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="5">
                    <span>
                        证照分类：
                        <el-select v-model="form.licenseType" clearable placeholder="请选择" :disabled="isFlag">
                            <el-option
                                v-for="item in options"
                                :key="'index3-'+item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </span>
                </el-col>
                <el-col :span="12">
                    <span>证照编号：<el-input v-model="form.licenseNumber" placeholder="请输入证照编号" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
                <el-col :span="6">
                    <span>证照名称：<el-input v-model="form.licenseName" placeholder="请输入证照名称" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="5">
                    <span>颁证机构：<el-input v-model="form.licenseCompany" placeholder="请输入颁证机构" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
                <el-col :span="6">
                    <span>颁发日期：<el-input v-model="form.licenseDate" placeholder="请输入颁发日期" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
                <el-col :span="6">
                    <span>经营方式：<el-input v-model="form.businessType" placeholder="请输入经营方式" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
                <el-col :span="6">
                    <span>经营范围：<el-input v-model="form.businessScope" placeholder="请输入经营范围" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
            </el-form-item> 
            <el-form-item>
                <el-col :span="5">
                    <span>
                        有效期至：
                        <el-date-picker
                            :disabled="isFlag"
                            v-model="form.validUntil"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </span>
                </el-col>
                <el-col :span="6">
                    <span>预警天数：<el-input v-model="form.warningDays" placeholder="请输入预警天数" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
                <el-col :span="12">
                    <span>备注：<el-input v-model="form.remark" placeholder="请输入备注" style="width: 60%" :disabled="isFlag"/></span>
                </el-col>
            </el-form-item> 
            <el-form-item class="container">
                <el-button type="primary"  style="margin-right: 4vw;" @click="upload()" :disabled="isFlag">上传证照</el-button>
            </el-form-item> 
            <el-form-item style="margin-left: -3vw; border: 5px solid #fff; padding: 5px; padding-top: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
                <el-col :span="3" v-for="imgs in imgList" :key="'index4-'+imgs.id" style="border-right: 1px solid #ebeef5;">
                    <el-image 
                        :src="imgs.filepath" 
                        :preview-src-list="imgs.srcList"
                        style="width: 165px; height: 165px; margin-left: 1.5vw;"
                        >
                    </el-image>
                </el-col>
            </el-form-item> 
            <el-form-item style="margin-left: -3vw;">
                <div class="text-with-line">经营范围</div>
            </el-form-item> 
                <el-form-item class="container">
                    <el-button type="danger"  style="margin-right: 4vw;" @click="addTable" :disabled="isFlag">新增经营范围</el-button>
                </el-form-item> 
                <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%; margin-left: -2vw; text-align: center;">
                    <el-table-column
                        type="index"
                        width="50">
                        </el-table-column>
                    <el-table-column
                    property="scopeLevel"
                    label="范围层级"
                    width="240">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.scopeLevel" placeholder="请输入范围层级" :disabled="isFlag"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    property="code"
                    label="编码"
                    width="360">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.code" placeholder="请输入编码" :disabled="isFlag"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    property="name"
                    label="名称"
                    width="360">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入名称" :disabled="isFlag"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    property="remark"
                    label="备注"
                    width="360">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="请输入备注" :disabled="isFlag"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteTable(scope.row)" :disabled="isFlag"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <el-form-item>
                <div class="button-container">
                    <el-button type="danger" @click="qx" >取消</el-button>
                    <el-button type="danger" @click="tj" v-show="!isFlag">提交</el-button>
                    <el-button type="danger" @click="bc" v-show="!isFlag">保存</el-button>
                </div>
            </el-form-item>
        </el-form> 

        <el-dialog
            title="文件上传"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
                <el-upload
                    list-type="picture"
                    class="upload-demo"
                    action="#"
                    :on-remove="handleRemove"
                    :http-request="handleFileUpload"
                    :file-list="fileList">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="canclUpload">取 消</el-button>
                <el-button type="primary" @click="submitUpload">确 定</el-button>
            </span>
        </el-dialog>
    </div> 
</template>
  
<script>
  import axios from 'axios';
  import { getToken } from '@/utils/auth';
  import { zjCompanyInfo, byCompanyCode, zjLicenseInfo, byLicenseId, upload } from "@/api/qualityControl/qualityControl";
export default {
    name: "qualityControlDetail",
    data() {
      return {
        key:'53cfd89363924f95b75b7221b6d0bfe3',
        endpoint:'https://zhiguan.cognitiveservices.azure.cn/',
        imgs: '',
        isFlag: false,
        form: {
            xxx: '2'
        },
        rules: {},
        baseInfoData: {
            xxx: '1'
        },
        // 上传
        dialogVisible: false,
        // action
        uploadUrl: 
                process.env.NODE_ENV == "development"
                ? "/drp-file/document-center/fastdfs/upload"
                : "/document-center/fastdfs/upload",
        // token
        headers: {
            Authorization: 'Bearer ' + getToken()
        },
        // 主表ID
        id: '',
        items1: [],
        items2: [],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        value1: '',
        imgList: [
            {
                id: '1',
                filename: 'AAA',
                filepath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                ]
            },
            {
                id: '2',
                filename: 'BBB',
                filepath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                srcList: [
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                ]
            }
        ],
        tableData: [{
            id:'1',
            scopeLevel: '2016-05-02',
            code: '王1虎',
            name: '上海市普陀区金沙江路 1518 弄',
            remark: '1123'
          }],
        companyCode: '',
        licenseNumber: '',
        fileList: [],
      };
    },
    watch: {
        
    },
    created() {
        this.companyCode = this.$route.query.companyCode;
        this.licenseNumber = this.$route.query.licenseNumber;
        if(this.$route.query.isFlag == 'true'){
            this.isFlag = true;
        }else{
            this.isFlag = false;
        }
        zjCompanyInfo(this.companyCode).then(response => {
          if(response.code == 200){
            console.log("A1:::" + JSON.stringify(response.data))
            this.baseInfoData = response.data;
          }
        });
        byCompanyCode(this.companyCode).then(response => {
            if(response.code == 200){
                console.log("A2:::" + JSON.stringify(response.data))
                if(response.data.length>10){
                    this.items1 = response.data.slice(0,10)
                    this.items2 = response.data.slice(10)
                }else{
                    this.items1 = response.data
                }
            }
        });
        zjLicenseInfo(this.licenseNumber).then(response => {
            if(response.code == 200){
                console.log("A3:::" + JSON.stringify(response.data))
                this.form = response.data
            }
        });
        byLicenseId(this.licenseNumber).then(response => {
            if(response.code == 200){
                console.log("A4:::" + JSON.stringify(response.data))
                this.tableData = response.data
            }
        });
    },
    methods: {
         // 修改时自定义上传方法
        handleFileUpload(params){
            let newfile=params.file
            let suffix = (newfile.name).substr((newfile.name).lastIndexOf("."));
            newfile =new File([params.file], this.randomLong()+`${suffix}`)
            newfile.uid=params.file.uid // new File 没有uid属性，会导致组件底层报错，这里手动加上
            console.log(newfile)
            // 使用FormData传参数和文件
            var fileForm = new FormData();
            // 文件
            fileForm.append("file", newfile);
            // 调用封装好的上传方法，传给后台FormData
            upload(fileForm).then(res=>{
                if(res && res.data.code == 200){
                    this.fileList.push({
                        'id': res.data.id,
                        'name':res.data.filename,
                        'url': process.env.NODE_ENV == "development"
                        ? "https://dev-sy.derom.com/document-center/minio/"+res.data.filepath
                        : "https://sy.derom.com/document-center/minio/"+res.data.filepath
                    })
                    this.imgs = process.env.NODE_ENV == "development"
                        ? "https://sy.derom.com/01762feca72748b9b343c861753fe6f.png"
                        : "https://sy.derom.com/document-center/minio/"+res.data.filepath
                    this.sends()
                    this.$modal.msgSuccess("上传成功");
                }
            })
        },
        upload(){
            this.fileList = [];
            this.imgList.forEach(element => {
                this.fileList.push({
                    'id': element.id,
                    'name':element.filename,
                    'url': element.filepath
                })
            });
            this.dialogVisible = true;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        canclUpload(){
            this.dialogVisible = false;
        },
        submitUpload(){
            this.imgList = [];
            this.fileList.forEach(element => {
                let arr = [];
                arr.push(element.url);
                this.imgList.push({
                    'id': element.id,
                    'filename': element.name,
                    'filepath': element.url,
                    'srcList': arr
                })
            });
            this.dialogVisible = false;
        },
        handleRemove(file, fileList) {
            this.fileList = [];
            fileList.forEach(element => {
                this.fileList.push({
                    'id': element.id,
                    'name':element.name,
                    'url': element.url
                })
            });
        },
        addTable() {
            const newRow = { id: this.randomLong(), scopeLevel: '', code: '', name: '', remark: '' };
            this.tableData.push(newRow);
        },
        deleteTable(e) {
          if(this.tableData.length === 1){
              this.$message({
                  message: '当前行无法删除, 请至少保留一条适用科室信息!',
                  type: 'warning'
              });
              return;
          }
          this.tableData = this.tableData.filter(row => 
              row.id != e.id
          );
        },
        randomLong() {
            const min = Number.MIN_SAFE_INTEGER;
            const max = Number.MAX_SAFE_INTEGER;
            // 50% chance of a negative number
            const isNegative = Math.random() < 0.5; 
            const randomValue = Math.random() * (max - min) + min;
            return isNegative ? Math.round(randomValue) : Math.round(randomValue) * -1;
        },
        qx(){
            this.$router.go(-1)
        },
        tj(){

        },
        bc(){

        },
        async sends(){
            const response = await axios.post('https://zhiguan.cognitiveservices.azure.cn/vision/v3.2/read/analyze', {'url': this.imgs}, {
                headers: {
                    'Ocp-Apim-Subscription-Key': this.key,
                    'Content-Type': 'application/json'
                }
            });
            // console.log("A:::" +  JSON.stringify(response))
            if(response.status == '202'){
                let Operations = response.headers["operation-location"];
                // console.log("B:::" + Operations)
                setTimeout(()=>{
                    this.sendGet(Operations);
                },1000)
            }else{
                console.log("图片解析失败!")
            }
        },
        async sendGet(url){
            const res = await axios.get(url, {
                headers: {
                    'Ocp-Apim-Subscription-Key': this.key,
                    'Content-Type': 'application/json'
                }
            });
            // console.log("C:::" +  JSON.stringify(res))
            if(res.data.status == 'succeeded'){
                let ocrs  =  res.data.analyzeResult.readResults;
                if(ocrs.length>0){
                    let lines = ocrs[0].lines;
                    lines.forEach((element,index) => {
                        console.log("A:::" + element.text)
                        if(element.text.includes('许可证编号')||element.text.includes('证照编号')){
                            this.form.licenseNumber = element.text.substr(6);
                            if(!lines[index+1].text.includes(":")){
                                this.form.licenseNumber += lines[index+1].text;
                            }
                        }
                        if((element.text.includes('许可证') && !element.text.includes('编号')) || element.text.includes('证照名称')){
                            this.form.licenseName = element.text;
                            if(!lines[index+1].text.includes(":")){
                                this.form.licenseName += lines[index+1].text;
                            }
                        }
                        if(element.text.includes('发证部门')||element.text.includes('颁证机构')){
                            this.form.licenseCompany = element.text.substr(5);
                            if(!lines[index+1].text.includes(":")){
                                this.form.licenseCompany += lines[index+1].text;
                            }
                        }
                        if(element.text.includes('生产方式') || element.text.includes('经营方式')){
                            this.form.businessType = element.text.substr(5);
                            if(!lines[index+1].text.includes(":")){
                                this.form.businessType += lines[index+1].text;
                            }
                        }
                        if(element.text.includes('生产范围') || element.text.includes('经营范围')){
                            this.form.businessScope = element.text.substr(5);
                            if(!lines[index+1].text.includes(":")){
                                this.form.businessScope += lines[index+1].text;
                            }
                        }
                        if(element.text.includes('至')){
                            let wb = '';
                            wb = element.text.substr(2);
                            if(wb != ''){
                                wb = wb.replace('年','-');
                                wb = wb.replace('月','-');
                                wb = wb.replace('日','');
                                wb = wb.split(' ').join('')
                                this.form.validUntil = wb;
                            }
                        }
                    });
                }
            }
            
            // 

        },
    },
  };
</script>
<style>
.baseinfoClass {
    margin-left: 4vw;
}
.text-with-line {
    position: relative;
    font-size: 16px;
    color: #333;
    padding-bottom: 5px; /* 确保条线在文字下方 */
}
.text-with-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* 条线的宽度 */
    height: 2px; /* 条线的高度 */
    background: #000; /* 条线的颜色 */
}
.container {
    display: flex;
    justify-content: flex-end; /* 这会把子元素放在容器的右边 */
}  
.button-container {
  position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
  top: 10px;        /* 距离顶部10像素 */
  right: 60px;      /* 距离右侧10像素 */
  z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
} 
</style>