drp-ui/src/views/qualityControl/khDetail.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 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' ? 'info' : 'danger'"
                        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' ? 'info' : 'danger'"
                        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="uploadUrl"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :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 { getToken } from '@/utils/auth'
  import { zjCompanyInfo, byCompanyCode, zjLicenseInfo, byLicenseId } from "@/api/qualityControl/qualityControl";

export default {
    name: "qualityControlDetail",
    data() {
      return {
        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',
            one: '2016-05-02',
            two: '王1虎',
            three: '上海市普陀区金沙江路 1518 弄',
            four: '1123'
          }, {
            id:'2',
            one: '2016-05-02',
            two: '王2虎',
            three: '上海市普陀区金沙江路 1518 弄',
            four: '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: {
        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(_ => {});
        },
        handleSuccess(e){
            this.fileList.push({
                'id': e.id,
                'name':e.filename,
                'url': process.env.NODE_ENV == "development"
                ? "https://dev-sy.derom.com/document-center/minio/"+e.filepath
                : "https://sy.derom.com/document-center/minio/"+e.filepath
            })
        },
        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(), one: '', two: '', three: '', four: '' };
            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(){

        }
    },
  };
</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>