fix(证照管理) 页面+ocr能力

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@azure/cognitiveservices-computervision": "^8.2.0",
     "@gby/deep-copy": "^4.0.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
@@ -57,6 +58,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
+    "ms-rest-azure": "^3.0.2",
     "nprogress": "0.2.0",
     "print-js": "^1.6.0",
     "quill": "1.3.7",

src/api/qualityControl/qualityControl.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询各业务状态有多少数据
+export function getCountStatus(query) {
+  return request({
+    url: '/mk/zj/zjLicenseInfo/byServiceState/'+query,
+    method: 'get'
+  })
+}
+
+// 查询合作企业列表
+export function listInfo(query) {
+  return request({
+    url: '/mk/zj/zjLicenseInfo/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 企业ID查询详情
+export function zjCompanyInfo(query) {
+  return request({
+    url: '/mk/zj/zjCompanyInfo/'+query,
+    method: 'get'
+  })
+}
+
+//  企业编码查询证照集合
+export function byCompanyCode(query) {
+  return request({
+    url: '/mk/zj/zjLicenseInfo/byCompanyId/'+query,
+    method: 'get'
+  })
+}
+
+//  证照id查询详情
+export function zjLicenseInfo(query) {
+  return request({
+    url: '/mk/zj/zjLicenseInfo/'+query,
+    method: 'get'
+  })
+}
+
+// 证照id查询经营范围
+export function byLicenseId(query) {
+  return request({
+    url: '/mk/zj/zjBusinessScope/byLicenseId/'+query,
+    method: 'get'
+  })
+}
+
+
+// 文件上传 
+export function upload(data) {
+  return request({
+    url: '/document/attachment/uploadSingle',
+    method: 'post',
+    data: data
+  })
+}

src/router/index.js

@@ -129,11 +129,6 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/business/as/keyword',
-    component: () => import('@/views/business/as/keyword/index'),
-    hidden: true
-  },
-  {
     path: '/business/newsLink',
     component: () => import('@/views/business/newsLink/index'),
     hidden: true
@@ -411,6 +406,41 @@ export const constantRoutes = [
     component: () => import('@/views/material/extend/indexMain'),
     hidden: true,
   },
+  // 质管-主页
+  {
+    path: '/qualityControl/index',
+    name: "QualityControl",
+    component: () => import('@/views/qualityControl/index'),
+    hidden: true,
+  },
+  // 质管-待处理
+  {
+    path: '/qualityControl/approval',
+    name: "QualityControlApproval",
+    component: () => import('@/views/qualityControl/approval'),
+    hidden: true,
+  },
+  // 质管-已处理
+  {
+    path: '/qualityControl/approved',
+    name: "QualityControlApproved",
+    component: () => import('@/views/qualityControl/approved'),
+    hidden: true,
+  },
+   // 质管-供应商编辑
+  {
+    path: '/qualityControl/gysDetail',
+    name: "QualityControlGysDetail",
+    component: () => import('@/views/qualityControl/gysDetail'),
+    hidden: true,
+  },
+  // 质管-客户编辑
+  {
+    path: '/qualityControl/khDetail',
+    name: "QualityControlKhDetail",
+    component: () => import('@/views/qualityControl/khDetail'),
+    hidden: true,
+  },
 ]
 
 

src/views/qualityControl/approval.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="企业名称" prop="companyName">
+          <el-input
+            v-model="queryParams.companyName"
+            placeholder="请输入企业名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="证照类型" prop="licenseType">
+        <el-select
+                clearable
+                v-model="queryParams.licenseType"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="level in licenseTypeList"
+                  :key="level.value"
+                  :label="level.label"
+                  :value="level.value"
+                >
+                </el-option>
+              </el-select>
+      </el-form-item>
+        <el-form-item label="证照名称" prop="licenseName">
+          <el-input
+            v-model="queryParams.licenseName"
+            placeholder="请输入证照名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </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-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="企业属性" align="center" prop="companyAttributes">
+            <template slot-scope="scope">
+                {{ scope.row.companyAttributes == '1' ?  '客户' : scope.row.companyAttributes == '2' ? '供应商' : scope.row.companyAttributes == '3' ? '客户和供应商' : '未知' }}
+            </template>
+        </el-table-column>
+        <el-table-column label="企业名称" align="center" prop="companyName" />
+        <el-table-column label="证照类型" align="center" prop="licenseType" />
+        <el-table-column label="证照编号" align="center" prop="licenseNumber" />
+        <el-table-column label="证照名称" align="center" prop="licenseName" />
+        <el-table-column label="颁发日期 " align="center" prop="licenseDate" />
+        <el-table-column label="预警天数" align="center" prop="warningDays" />
+        <el-table-column label="有效期至" align="center" prop="validUntil" />
+        <el-table-column label="工单状态" align="center" prop="workState">
+            <template slot-scope="scope">
+                {{ scope.row.workState == '1' ?  '草稿' : scope.row.workState == '2' ? '审批中' : scope.row.workState == '3' ? '已审批' : '未知' }}
+            </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleInfo(scope.row)"
+            >查看</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"
+      />
+  
+    </div>
+  </template>
+  
+  <script>
+  import { listInfo } from "@/api/qualityControl/qualityControl.js";
+  
+  export default {
+    name: "Info",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 合作企业证照表格数据
+        infoList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          status: 0,
+          companyAttributes: null,
+          companyName: null,
+          licenseType: null,
+          licenseNumber: null,
+          licenseName: null,
+          licenseDate: null,
+          warningDays: null,
+          validUntil: null,
+          workState: null,
+        },
+        licenseTypeList : [{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }],
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+        }
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询合作企业证照列表 */
+      getList() {
+        this.loading = true;
+        listInfo(this.queryParams).then(response => {
+          this.infoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          status: 0,
+          companyAttributes: null,
+          companyName: null,  
+          licenseType: null,
+          licenseNumber: null,
+          licenseName: null,
+          licenseDate: null,
+          warningDays: null,
+          validUntil: null,
+          workState: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        if(row.companyAttributes == '1'){
+            // 客户
+            this.$router.push({ path: '/qualityControl/khDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': false} });
+        }
+        if(row.companyAttributes == '2'){
+            // 供应商
+            this.$router.push({ path: '/qualityControl/gysDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': false} });
+        }
+        if(row.companyAttributes == '3'){
+            // 客户和供应商
+            
+        }
+      },
+      /** 查看按钮操作 */
+      handleInfo(row) {
+        this.reset();
+        if(row.companyAttributes == '1'){
+            // 客户
+            this.$router.push({ path: '/qualityControl/khDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': true} });
+        }
+        if(row.companyAttributes == '2'){
+            // 供应商
+            this.$router.push({ path: '/qualityControl/gysDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': true} });
+        }
+        if(row.companyAttributes == '3'){
+            // 客户和供应商
+            
+        }
+      },
+    }
+  };
+  </script>
+  

src/views/qualityControl/approved.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="企业名称" prop="companyName">
+          <el-input
+            v-model="queryParams.companyName"
+            placeholder="请输入企业名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="证照类型" prop="licenseType">
+        <el-select
+                clearable
+                v-model="queryParams.licenseType"
+                style="width: 200px"
+              >
+                <el-option
+                  v-for="level in licenseTypeList"
+                  :key="level.value"
+                  :label="level.label"
+                  :value="level.value"
+                >
+                </el-option>
+              </el-select>
+      </el-form-item>
+        <el-form-item label="证照名称" prop="licenseName">
+          <el-input
+            v-model="queryParams.licenseName"
+            placeholder="请输入证照名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </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-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="企业属性" align="center" prop="companyAttributes">
+            <template slot-scope="scope">
+                {{ scope.row.companyAttributes == '1' ?  '客户' : scope.row.companyAttributes == '2' ? '供应商' : scope.row.companyAttributes == '3' ? '客户和供应商' : '未知' }}
+            </template>
+        </el-table-column>
+        <el-table-column label="企业名称" align="center" prop="companyName" />
+        <el-table-column label="证照类型" align="center" prop="licenseType" />
+        <el-table-column label="证照编号" align="center" prop="licenseNumber" />
+        <el-table-column label="证照名称" align="center" prop="licenseName" />
+        <el-table-column label="颁发日期 " align="center" prop="licenseDate" />
+        <el-table-column label="预警天数" align="center" prop="warningDays" />
+        <el-table-column label="有效期至" align="center" prop="validUntil" />
+        <el-table-column label="工单状态" align="center" prop="workState">
+            <template slot-scope="scope">
+                {{ scope.row.workState == '1' ?  '草稿' : scope.row.workState == '2' ? '审批中' : scope.row.workState == '3' ? '已审批' : '未知' }}
+            </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleInfo(scope.row)"
+            >查看</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"
+      />
+  
+    </div>
+  </template>
+  
+  <script>
+  import { listInfo } from "@/api/qualityControl/qualityControl.js";
+  
+  export default {
+    name: "Info",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 合作企业证照表格数据
+        infoList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          status: 1,
+          companyAttributes: null,
+          companyName: null,
+          licenseType: null,
+          licenseNumber: null,
+          licenseName: null,
+          licenseDate: null,
+          warningDays: null,
+          validUntil: null,
+          workState: null,
+        },
+        licenseTypeList : [{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }],
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+        }
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询合作企业证照列表 */
+      getList() {
+        this.loading = true;
+        listInfo(this.queryParams).then(response => {
+          this.infoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          status: 1,
+          companyAttributes: null,
+          companyName: null,  
+          licenseType: null,
+          licenseNumber: null,
+          licenseName: null,
+          licenseDate: null,
+          warningDays: null,
+          validUntil: null,
+          workState: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        if(row.companyAttributes == '1'){
+            // 客户
+            this.$router.push({ path: '/qualityControl/khDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': false} });
+        }
+        if(row.companyAttributes == '2'){
+            // 供应商
+            this.$router.push({ path: '/qualityControl/gysDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': false} });
+        }
+        if(row.companyAttributes == '3'){
+            // 客户和供应商
+            
+        }
+      },
+      /** 查看按钮操作 */
+      handleInfo(row) {
+        this.reset();
+        if(row.companyAttributes == '1'){
+            // 客户
+            this.$router.push({ path: '/qualityControl/khDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': true} });
+        }
+        if(row.companyAttributes == '2'){
+            // 供应商
+            this.$router.push({ path: '/qualityControl/gysDetail',  query:{'companyCode': row.companyId, 'licenseNumber': row.id, 'isFlag': true} });
+        }
+        if(row.companyAttributes == '3'){
+            // 客户和供应商
+            
+        }
+      },
+    }
+  };
+  </script>
+  

src/views/qualityControl/demo.vue

@@ -0,0 +1,49 @@
+<template>
+    
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+    name: "ai",
+    data() {
+      return {
+         key:'53cfd89363924f95b75b7221b6d0bfe3',
+         endpoint:'https://zhiguan.cognitiveservices.azure.cn/',
+         imgs: 'https://test0523.blob.core.chinacloudapi.cn/test0523liu/123456.JPG',
+      }
+    },
+    created(){
+        this.sends();
+    },
+    methods: {
+        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);
+                },500)
+            }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))
+        },
+    },
+}
+</script>

src/views/qualityControl/gysDetail.vue

@@ -0,0 +1,593 @@
+<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>

src/views/qualityControl/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="app-container">
+      <el-tabs v-model="activeName" >
+        <el-tab-pane :label="num1" name="approval" @click="tabClick"></el-tab-pane>
+        <el-tab-pane :label="num2" name="approved" @click="tabClick" ></el-tab-pane>
+      </el-tabs>
+      <component :is="currentPage" :oid="ocode"></component>
+    </div>
+  </template>
+  
+  <script>
+  import { getCountStatus } from "@/api/qualityControl/qualityControl";
+  import approval from '@/views/qualityControl/approval';
+  import approved from '@/views/qualityControl/approved';
+import { _ } from "core-js";
+  export default {
+    mounted() {
+      let code = this.$route.query.mid; // 质管企微跳转ID
+      if(code!= undefined){
+        this.ocode = code;
+        this.activeName = 'approved';
+      }
+    },
+    name: "tabs",
+    data() {
+      return {
+        ocode: '',
+        num1: '',
+        num2: '',
+        queryParams1: '0',
+        queryParams2: '1',
+        activeName: 'approval' // 默认激活第一个标签
+      };
+    },
+    watch: {
+      currentPage(newValue, oldValue) {
+          if(oldValue != newValue){
+            this.tabClick();
+            if(newValue == 'approval'){
+              this.$router.replace('/business/qualityControl/index');
+            }
+          }
+        },
+      },
+    created() {
+      this.tabClick();
+    },
+    methods: {
+      tabClick(){
+        getCountStatus(this.queryParams1).then(response => {
+          this.num1 = "待处理 ("+response.data+")";
+        });
+        getCountStatus(this.queryParams2).then(response => {
+          this.num2 = "已处理 ("+response.data+")";
+        });
+      }
+    },
+    components:{
+      approval,
+      approved
+    },
+    computed: {
+      // 计算属性返回当前应该显示的组件
+      currentPage() {
+        return this.activeName;
+      }
+    }
+  };
+  </script>
+  

src/views/qualityControl/khDetail.vue

@@ -0,0 +1,448 @@
+<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>