许可证

马宇豪

2025-04-16 e46a6e287f752825a8ae5f4024769cd3fbc39a4a

许可证

 src/api/monitor/permit.js

对比新文件
@@ -0,0 +1,109 @@
import request from '@/utils/request'

// 查询操作日志列表
export function getLicenseList(query) {
  return request({
    url: '/license/info',
    method: 'get',
    params: query
  })
}

export function getExportLicense(query) {
  return request({
    url: '/license/export',
    method: 'get',
    params: query
  })
}

export function reviewLicenseInfo(data) {
  return request({
    url: '/license/review?id=' + data.id + '&reviewstatus=' + data.reviewstatus,
    method: 'post',
  })
}

export function deleteById(data) {
  return request({
    url: '/license/delete?id=' + data,
    method: 'post'
  })
}

export function deleteCertificate(id){
  return request({
    url:'/transport/delcertificate?id=' + id,
    method: 'post'
  })
}

export function getProvinceListData(query){
  return request({
    url: '/districtByName',
    method: 'get',
    params: query
  })
}

export function getCityListData(query){
  return request({
    url: '/district?type=' + query.type + '&parentname=' + query.parentname + '&parenttype=' + query.parenttype,
    method: 'get'
  })
}

export function refuseLicense(data) {
  return request({
    url: '/license/reject',
    method: 'post',
    data: data
  })
}

export function addLicenseInfo(data) {
  return request({
    url: '/license/addLicense',
    method: 'post',
    data: data
  })
}

export function updateLicenseInfo(data) {
  return request({
    url: '/license/editLicense',
    method: 'post',
    data: data
  })
}
export function delayLicense(data) {
  return request({
    url: '/license/delay',
    method: 'post',
    data: data
  })
}

export function modLicense(data) {
  return request({
    url: '/license/mod',
    method: 'post',
    data: data
  })
}

export function dictionaryAllItems(query) {
  return request({
    url: '/dictionaryAllItems',
    method: 'get',
    params: query
  })
}

export function getSuperiorDepartmentList(data) {
  return request({
    url: '/enterprise/parentList',
    method: 'post',
    data: data
  })
}

 src/permission.js

@@ -11,7 +11,7 @@

NProgress.configure({ showSpinner: false });

const whiteList = ['/homePage','/fillForm','/checkProgress','/certPdf'];
const whiteList = ['/homePage'];

router.beforeEach((to, from, next) => {
  NProgress.start()

 src/router/index.js

@@ -57,11 +57,6 @@
  //   component: () => import('@/views/safetyReview/expertManage/fillForm/index.vue'),
  //   hidden: true
  // },
  {
    path: '/certPdf',
    component: () => import('@/views/certificatePdf'),
    hidden: true
  },
  // {
  //   path: '/checkProgress',
  //   component: () => import('@/views/safetyReview/expertManage/checkProgress/index.vue'),

 src/store/modules/user.js

@@ -37,6 +37,8 @@
            this.avatar = avatar
            Cookies.set('userInfo',JSON.stringify(user))
            Cookies.set('userRole',JSON.stringify(this.roles))
            Cookies.set('roleType',user.roleType)
            Cookies.set('isSupervision',user.companyid)
            resolve()
          }).catch(error => {
            reject(error)

 src/utils/index.js

@@ -20,6 +20,7 @@
 * @param {string} option
 * @returns {string}
 */

export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
@@ -93,6 +94,15 @@
  return s
}

export function computePageCount(totalCount, pageSize) {
  if (pageSize == 0) {
    return 0
  }
  return totalCount % pageSize == 0
      ? totalCount / pageSize
      : totalCount / pageSize + 1
}

/**
 * @param {Array} actual
 * @returns {Array}

 src/utils/licence.js

对比新文件
@@ -0,0 +1,23 @@
import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function computePageCount(totalCount, pageSize) {
  if (pageSize == 0) {
    return 0
  }
  return totalCount % pageSize == 0
      ? totalCount / pageSize
      : totalCount / pageSize + 1
}

export function formatDateDay(value) {
  let date = new Date(value);
  let y = date.getFullYear();
  let MM = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let h = date.getHours();
  return y + "年" + MM + "月" + d + "日";
}

 src/views/firework/permit/components/licenseDelayForm.vue

对比新文件
@@ -0,0 +1,1096 @@
<template>
  <el-dialog
      v-model="licenseInfoVisible"
      append-to-body
      :title="title"
      top="1%"
      :close-on-click-modal="false"
      width="65%"
  >

    <el-form ref="dataForm"  :model="dataForm" :rules="ruleForm" label-position="right" label-width="150px"  element-loading-text="保存中...">
      <el-row>
        <el-col :span="23">
          <el-row>
            <el-col :span="15">
              <el-form-item label="企业名称:" >
                <el-input v-model.trim="dataForm.name" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一社会信用代码:" >
                <el-input v-model.trim="dataForm.code" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="主要负责人姓名:" >
                <el-input v-model.trim="dataForm.mainpersonname" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人身份证号:" >
                <el-input v-model.trim="dataForm.mainpersonidcardnum" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人联系电话:" >
                <el-input v-model.trim="dataForm.mainpersontel" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="安全负责人姓名:" >
                <el-input v-model.trim="dataForm.safetypersonname" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人身份证号:" >
                <el-input v-model.trim="dataForm.safetypersonidcardnum" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人联系电话:" >
                <el-input v-model.trim="dataForm.safetypersontel" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="许可类型:" >
                <el-select v-model="dataForm.licensetype"    :disabled="true">
                  <el-option
                      v-for="item in licensetypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"

                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营方式:" >
                <el-select v-model="dataForm.dealingtype" clearable filterable @change="changeDealing()" :disabled="true">
                  <el-option
                      v-for="item in dealingtypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定储量（箱）:" >
                <el-input-number :controls="false"  v-model="dataForm.reservebox" :disabled="true">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="核定储量（千克）:" >
                <el-input-number :controls="false"  v-model="dataForm.reservekg" :disabled="true">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（全部）:" >
                <el-input-number :controls="false"  v-model="dataForm.dealingarea" :disabled="true">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（物品）:"  v-if="showSaveArea">
                <el-input-number :controls="false"  v-model="dataForm.savearea" :disabled="true">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册地址省:" >
                <el-select v-model="dataForm.province" clearable filterable @change="changeArea('province')" placeholder="省" :disabled="true">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" >
                <el-select v-model="dataForm.city" prop="city" clearable filterable @change="changeArea('city')" placeholder="市"  :disabled="true">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区" >
                <el-select v-model="dataForm.district" clearable filterable @change="changeArea('district')" placeholder="区"  :disabled="true">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册详细地址:" >
                <el-input v-model.trim="dataForm.address" class="carrierLicense_select" placeholder="详细地址（无需填写省市区信息）"  :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="仓储地址省:" >
                <el-select v-model="dataForm.storageprovince" clearable filterable @change="changeStorageArea('province')" placeholder="省"  :disabled="true">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" >
                <el-select v-model="dataForm.storagecity" prop="city" clearable filterable @change="changeStorageArea('city')" placeholder="市"  :disabled="true">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区" >
                <el-select v-model="dataForm.storagedistrict" clearable filterable @change="changeStorageArea('district')" placeholder="区"  :disabled="true">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="仓储详细地址:" >
                <el-input v-model.trim="dataForm.storageaddress" class="carrierLicense_select" placeholder="详细地址（无需填写省市区信息）"  :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-form-item label="经济类型:" prop="economictype" >
              <el-select v-model.trim="dataForm.economictype"  placeholder="" clearable class="enterpriseBasicInformation_input"  :disabled="true">
                <el-option
                    v-for="item in economicTypeList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.text"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <div v-if="roleType==='烟花爆竹批发经营' || type === 2 "  :disabled="true">
            <div class="enterpriseBasicInformation_title">
              <span>库房信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto"   v-model.trim="area"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input  v-model.trim="storagenum" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input  v-model.trim="storagearea" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input  v-model.trim="powder" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false"  v-model.trim="firststoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false"  v-model.trim="firststoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false"  v-model.trim="firstpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false"  v-model.trim="thirdstoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false"  v-model.trim="thirdstoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false"  v-model.trim="thirdpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="roleType==='烟花爆竹生产' || type === 1 ">
            <div class="enterpriseBasicInformation_title">
              <span>危险品中转库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage1.area"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firstpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>药物总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage2.area"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firstpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdstoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdtoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>成品总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage3.area"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firstpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdstoragenum"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdtoragearea"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdpowder"  :disabled="true">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row>
            <el-col :span="24">
              <el-form-item label="许可范围:" >
                <el-row>
                  <el-col :span="8">
                    <el-checkbox  :disabled="true" v-model="checked1" >爆竹类</el-checkbox>
                    <el-checkbox-group :disabled="true"  v-model="checkMore1" style="display:inline-block;" >
                      <el-checkbox  v-for="item in checkList1" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked2" >喷花类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore2" style="display:inline-block;" >
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked3" >旋转类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore3" style="display:inline-block;">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked4">吐珠类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore4" style="display:inline-block;" >
                      <el-checkbox v-for="item in checkList1" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked5" >玩具类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore5" style="display:inline-block;">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked6">组合烟花类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore6" style="display:inline-block;" >
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox :disabled="true" v-model="checked7">升空类</el-checkbox>
                    <el-checkbox-group :disabled="true" v-model="checkMore7" style="display:inline-block;" >
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" >
                <el-input type="textarea" :disabled="true" :rows="3" v-model.trim="dataForm.remark" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="enterpriseBasicInformation_title">
            <span>发证机关必填内容</span>
            <span style="display: inline-block;color:red">(*延期修改必填内容)</span>
          </div>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="发证机关:" prop="issuingunit" :rules="rules.rulesItem">
                <el-input v-model.trim="dataForm.issuingunit"  :disabled="isSupervision !== 'null' ">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期:" prop="issuingdate" :rules="rules.rulesItem">
                <el-date-picker
                    :disabled="isSupervision !== 'null' "
                    value-format="YYYY-MM-DD"
                    v-model="dataForm.issuingdate"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
                <span :span="16">
                    <el-form-item label="有效期:" prop="effectdate" :rules="rules.rulesArray">
                        <el-date-picker
                            :disabled="isSupervision !== 'null' "
                            value-format="yyyy-MM-dd"
                            v-model="validTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="giveData"
                        >
                        </el-date-picker>
                    </el-form-item>
                </span>
          </el-row>


        </el-col>

      </el-row>

    </el-form>
    <div  align="right" style="margin-top:30px;" v-if="title==='延期' ">
      <el-button  @click="licenseInfoVisible=false" >取消</el-button>
      <el-button type="primary" @click="submit('')" :disabled="isSending">延期</el-button>
    </div>
  </el-dialog>
</template>

<script>
import selectEnterprise from "./selectEnterprise";
import {addLicenseInfo,updateLicenseInfo,delayLicense,getCityListData, getProvinceListData,dictionaryAllItems} from "../../../../api/monitor/permit";
import Cookies from "js-cookie";
import {ElMessage} from "element-plus";

export default {
  name: "licenseInfoForm",
  data(){
    return{
      title:'',
      licenseInfoVisible:false,
      ruleForm:{

      },
      rules:{
        rulesItem:[
          { message:"必填项",required:true, trigger: 'change'}
        ],
        rulesArray:[
          { type:'array',message:"开始结束日期必填",required:true, trigger: 'change'}
        ],
      },
      type:null,
      isSupervision:'',
      roleType:'',
      showSaveArea:false,
      salecompanyname:[],
      economicTypeList:[],
      licensetypeList:[
        {id:1,name:'长期'},
        {id:2,name:'临时'}
      ],
      dealingtypeList:[
        {id:1,name:'专柜'},
        {id:2,name:'专店'}
      ],
      validTime:['',''],
      dataForm:{
        id:'',
        type:null,
        name:'',
        mainpersonname:'',
        mainpersonidcardnum:'',
        mainpersontel:'',
        safetypersonname:'',
        safetypersonidcardnum:'',
        safetypersontel:'',
        dealingrange:[],
        licensetype:'',
        dealingtype:'',
        reservebox:'',
        reservekg:'',
        dealingarea:'',
        savearea:'',
        province:'',
        city:'',
        district:'',
        address:'',
        storageprovince:'',
        storagecity:'',
        storagedistrict:'',
        storageaddress:'',
        issuingunit:'',
        issuingdate:'',
        effectdate:'',
        noeffectdate:'',
        economictype:'',
        licenseStorage:[

        ],
        remark:'',
      },
      areaListQuery:{

      },
      provinceList:[],
      cityList:[],
      districtList:[],
      checked1:false,
      checked2:false,
      checked3:false,
      checked4:false,
      checked5:false,
      checked6:false,
      checked7:false,
      checkMore1:[],
      checkMore2:[],
      checkMore3:[],
      checkMore4:[],
      checkMore5:[],
      checkMore6:[],
      checkMore7:[],
      checkList1:['C级','D级'],
      checkList2:['C级','D级'],
      checkMoreList:['C级','D级'],
      storage1:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      storage2:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      storage3:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      id:null,
      area:null,
      firststoragenum:null,
      thirdstoragenum:null,
      firststoragearea:null,
      thirdstoragearea:null,
      firstpowder:null,
      thirdpowder:null,
      isSending:false
    }
  },
  created(){
    this.getProvince();
    this.getEconomicTypeList()
  },
  computed:{
    storagenum:function (){
      return Number(this.firststoragenum) + Number(this.thirdstoragenum)
    },
    storagearea:function(){
      return Number(this.firststoragearea) + Number(this.thirdstoragearea)
    },
    powder:function (){
      return Number(this.firstpowder) + Number(this.thirdpowder)
    },
    storagenum1:function (){
      return Number(this.storage1.firststoragenum) + Number(this.storage1.thirdstoragenum)
    },
    storagearea1:function(){
      console.log(this.storage1);
      return Number(this.storage1.firststoragearea) + Number(this.storage1.thirdstoragearea)
    },
    powder1:function (){
      console.log(this.storage1);
      return Number(this.storage1.firstpowder) + Number(this.storage1.thirdpowder)
    },
    storagenum2:function (){
      return Number(this.storage2.firststoragenum) + Number(this.storage2.thirdstoragenum)
    },
    storagearea2:function(){
      return Number(this.storage2.firststoragearea) + Number(this.storage2.thirdstoragearea)
    },
    powder2:function (){
      return Number(this.storage2.firstpowder) + Number(this.storage2.thirdpowder)
    },
    storagenum3:function (){
      return Number(this.storage3.firststoragenum) + Number(this.storage3.thirdstoragenum)
    },
    storagearea3:function(){
      return Number(this.storage3.firststoragearea) + Number(this.storage3.thirdstoragearea)
    },
    powder3:function (){
      return Number(this.storage3.firstpowder) + Number(this.storage3.thirdpowder)
    }
  },
  methods:{
    showLicenseForm(title,value,isSupervision,roleType){
      console.log(6666666)
      this.isSupervision = isSupervision
      this.roleType = roleType
      this.licenseInfoVisible = true
      this.title = title
      this.validTime = [value.effectdate,value.noeffectdate]
      let {...copyValue} = value
      this.dataForm = copyValue
      if(roleType === '烟花爆竹批发经营' ||  (this.dataForm.type === 2 && roleType === 'null')){
        this.type = 2
        if(this.dataForm.licenseStorage.length > 10){
          this.dataForm.licenseStorage = JSON.parse(this.dataForm.licenseStorage)
          this.dataForm.dealingrange =JSON.parse(this.dataForm.dealingrange)
        }
        let licenseStorage = this.dataForm.licenseStorage
        let dealingrange = this.dataForm.dealingrange
        this.id = licenseStorage[0].id
        this.area = licenseStorage[0].area
        this.firststoragenum=licenseStorage[0].firststoragenum
        this.thirdstoragenum=licenseStorage[0].thirdstoragenum
        this.firststoragearea=licenseStorage[0].firststoragearea
        this.thirdstoragearea=licenseStorage[0].thirdstoragearea
        this.firstpowder=licenseStorage[0].firstpowder
        this.thirdpowder=licenseStorage[0].thirdpowder
        this.checked1 = dealingrange[0].checked1
        this.checked2 = dealingrange[1].checked2
        this.checked3 = dealingrange[2].checked3
        this.checked4 = dealingrange[3].checked4
        this.checked5 = dealingrange[4].checked5
        this.checked6 = dealingrange[5].checked6
        this.checked7 = dealingrange[6].checked7
        this.checkMore1=dealingrange[0].checkMore1
        this.checkMore2=dealingrange[1].checkMore2
        this.checkMore3=dealingrange[2].checkMore3
        this.checkMore4=dealingrange[3].checkMore4
        this.checkMore5=dealingrange[4].checkMore5
        this.checkMore6=dealingrange[5].checkMore6
        this.checkMore7=dealingrange[6].checkMore7
      }else if(roleType === '烟花爆竹零售经营（长期）' || roleType === '烟花爆竹零售经营（短期）' || (roleType === 'null'&& this.dataForm.type ===3)){
        this.type = 3
        if(this.dataForm.dealingrange.length > 10){
          this.dataForm.dealingrange =JSON.parse(this.dataForm.dealingrange)
        }
        let dealingrange = this.dataForm.dealingrange
        this.checked1 = dealingrange[0].checked1
        this.checked2 = dealingrange[1].checked2
        this.checked3 = dealingrange[2].checked3
        this.checked4 = dealingrange[3].checked4
        this.checked5 = dealingrange[4].checked5
        this.checked6 = dealingrange[5].checked6
        this.checked7 = dealingrange[6].checked7
        this.checkMore1=dealingrange[0].checkMore1
        this.checkMore2=dealingrange[1].checkMore2
        this.checkMore3=dealingrange[2].checkMore3
        this.checkMore4=dealingrange[3].checkMore4
        this.checkMore5=dealingrange[4].checkMore5
        this.checkMore6=dealingrange[5].checkMore6
        this.checkMore7=dealingrange[6].checkMore7
      }
    },
    async submit(value){


      if (this.validTime == null || this.validTime.length < 2) {
        this.$message({
          type:'warning',
          message:'请填写日期'
        })
        return
      }
      if (this.dealingtypeList.filter(item => item.id === this.dataForm.dealingtype).length !== 1) {
        ElMessage({
          type: 'warning',
          message: '请填写经营方式'
        })
        return
      }
      if (this.licensetypeList.filter(item => item.id === this.dataForm.licensetype).length !== 1) {
        ElMessage({
          type: 'warning',
          message: '请填写许可类型'
        })
        return
      }

      this.isSending  = true
      delayLicense({id:this.dataForm.id,
        issuingunit:this.dataForm.issuingunit,
        issuingdate:this.dataForm.issuingdate,
        validstarttime:this.validTime[0],
        validendtime:this.validTime[1]

      }).then(res=>{
        this.isSending = false
        let data = res.data
        if (data.code === '200') {
          this.licenseInfoVisible = false
          this.$emit('getinfo')
          this.$message({
            type:'success',
            message:'操作成功'
          })
        }else{
          this.$message({
            type:'success',
            message:data.message
          })
        }

      })


    },

    getEconomicTypeList() {
      const _this = this
      if (_this.levelOptions && _this.levelOptions.length > 0) {
        return
      }
      dictionaryAllItems({dictionaryType: '国民经济类型'}).then(res => {
        if (res.code == '200') {
          _this.economicTypeList = res.result
        } else {
          ElMessage.warning(res.message)
        }
      }).catch(error => {
        ElMessage.warning(error)
      })
    },//获取国民经济类型列表


    async getProvince(){
      let res = await getProvinceListData()
      if(res.code === "200"){
        this.provinceList = res.result.provinceList
      }
    },
    async changeArea(value){
      if(value === 'province'){
        this.dataForm.city = ''
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.province,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.cityList = res.result
        }
      }else if(value === 'city'){
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.city,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.districtList = res.result
        }
      }else if(value === 'district'){
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.district,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.streetList = res.result
        }
      }
    },
    async changeStorageArea(value){
      if(value === 'province'){
        this.dataForm.storagecity = ''
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.storageprovince,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.cityList = res.result
        }
      }else if(value === 'city'){
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.storagecity,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.districtList = res.result
        }
      }else if(value === 'district'){
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.storagedistrict,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.streetList = res.result
        }
      }
    },
    changeDealing(){
      if(this.dataForm.dealingtype === 1){
        this.showSaveArea = true
      }else{
        this.showSaveArea = false
      }
    },
    giveData(){
      if(this.validTime ===null){
        this.dataForm.effectdate = ""
        this.dataForm.noeffectdate = ""
      }else{
        this.dataForm.effectdate = this.validTime[0]
        this.dataForm.noeffectdate = this.validTime[1]
      }
    },
    showEnterprise(){
      this.$refs.selectEnterprise.showEnterPrise(this.safetySuperVisionList)
    },
    giveEnterprise(val){
      this.dataForm.name = val
    },
    getByteLen(val) {
      let len = 0;
      for (let i = 0; i < val.length; i++) {
        let a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        }
        else {
          len += 1;
        }
      }
      return len;
    }
  }
}
</script>

<style scoped>
.enterpriseBasicInformation_title{
  font-weight: bolder;
  font-size: large;
  text-align: center;
  margin-top: 10px;
}
.enterpriseBasicInformation_image{
  width:70%;
  height:70%;
  margin-left:10px;
}
.el-input-number{
  width: 100%;
}
</style>

 src/views/firework/permit/components/licenseInfoForm.vue

对比新文件
@@ -0,0 +1,1393 @@
<template>
  <el-dialog
      v-model="licenseInfoVisible"
      append-to-body
      :title="title"
      :close-on-click-modal="false"
      width="60%"
  >

    <el-form ref="dataForm" :model="dataForm" :rules="ruleForm" label-position="right" label-width="150px"
             element-loading-text="保存中...">
      <el-row>
        <el-col :span="23">
          <el-row>
            <el-col :span="15">
              <el-form-item label="企业名称:">
                <el-input v-model.trim="dataForm.name" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="1">
                <img src="../../../../assets/enterprise.png" class="enterpriseBasicInformation_image" @click="showEnterprise"></img>
            </el-col>-->
            <el-col :span="8">
              <el-form-item label="统一社会信用代码:">
                <el-input v-model.trim="dataForm.code" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="主要负责人姓名:">
                <el-input v-model.trim="dataForm.mainpersonname" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人身份证号:">
                <el-input v-model.trim="dataForm.mainpersonidcardnum" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人联系电话:">
                <el-input v-model.trim="dataForm.mainpersontel" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="安全负责人姓名:">
                <el-input v-model.trim="dataForm.safetypersonname" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人身份证号:">
                <el-input v-model.trim="dataForm.safetypersonidcardnum" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人联系电话:">
                <el-input v-model.trim="dataForm.safetypersontel" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="许可类型:">
                <el-select v-model="dataForm.licensetype" clearable filterable>
                  <el-option
                      v-for="item in licensetypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营方式:">
                <el-select v-model="dataForm.dealingtype" clearable filterable
                           @change="changeDealing()">
                  <el-option
                      v-for="item in dealingtypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定储量（箱）:">
                <el-input-number :controls="false" v-model="dataForm.reservebox">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="核定储量（千克）:">
                <el-input-number :controls="false" v-model="dataForm.reservekg">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（全部）:">
                <el-input-number :controls="false" v-model="dataForm.dealingarea">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（物品）:" v-if="showSaveArea">
                <el-input-number :controls="false" v-model="dataForm.savearea">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册地址省:">
                <el-select v-model="dataForm.province" clearable filterable
                           @change="changeArea('province')" placeholder="省">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市">
                <el-select v-model="dataForm.city" prop="city" clearable filterable
                           @change="changeArea('city')" placeholder="市">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区">
                <el-select v-model="dataForm.district" clearable filterable
                           @change="changeArea('district')" placeholder="区">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册详细地址:">
                <el-input v-model.trim="dataForm.address" class="carrierLicense_select"
                          placeholder="详细地址（无需填写省市区信息）">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="仓储地址省:">
                <el-select v-model="dataForm.storageprovince" clearable filterable
                           @change="changeStorageArea('province')" placeholder="省">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市">
                <el-select v-model="dataForm.storagecity" prop="city" clearable filterable
                           @change="changeStorageArea('city')" placeholder="市">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区">
                <el-select v-model="dataForm.storagedistrict" clearable filterable
                           @change="changeStorageArea('district')" placeholder="区">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="仓储详细地址:">
                <el-input v-model.trim="dataForm.storageaddress" class="carrierLicense_select"
                          placeholder="详细地址（无需填写省市区信息）">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-form-item label="经济类型:" prop="economictype">
              <el-select v-model.trim="dataForm.economictype" placeholder="" clearable
                         class="enterpriseBasicInformation_input">
                <el-option
                    v-for="item in economicTypeList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.text"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <div v-if="roleType==='烟花爆竹批发经营' || type === 2 ? true : false">
            <div class="enterpriseBasicInformation_title">
              <span>库房信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:">
                  <el-input-number :controls="false" style="width: auto" v-model.trim="area">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:">
                  <el-input v-model.trim="storagenum" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:">
                  <el-input v-model.trim="storagearea" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:">
                  <el-input v-model.trim="powder" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="firststoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="thirdstoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="thirdstoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="roleType==='烟花爆竹生产' || type === 1 ? true : false">
            <div class="enterpriseBasicInformation_title">
              <span>危险品中转库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:">
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage1.area">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:">
                  <el-input v-model.trim="storagenum1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:">
                  <el-input v-model.trim="storagearea1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:">
                  <el-input v-model.trim="powder1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage1.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage1.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>药物总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:">
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage2.area">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:">
                  <el-input v-model.trim="storagenum2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:">
                  <el-input v-model.trim="storagearea2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:">
                  <el-input v-model.trim="powder2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage2.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage2.thirdstoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage2.thirdtoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage2.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>成品总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:">
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage3.area">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:">
                  <el-input v-model.trim="storagenum3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:">
                  <el-input v-model.trim="storagearea3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:">
                  <el-input v-model.trim="powder3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage3.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:">
                  <el-input-number :controls="false" v-model.trim="storage3.thirdstoragenum">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:">
                  <el-input-number :controls="false" v-model.trim="storage3.thirdtoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:">
                  <el-input-number :controls="false" v-model.trim="storage3.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row>
            <el-col :span="24">
              <el-form-item label="许可范围:">
                <el-row :gutter="40">
                  <el-col :span="8">
                    <el-checkbox v-model="checked1" style="margin-right: 15px" @change="justifySingle(1)">爆竹类</el-checkbox>
                    <el-checkbox-group v-model="checkMore1" style="display:inline-block;"
                                       @change="justify(1)">
                      <el-checkbox v-for="item in checkList1" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked2" style="margin-right: 15px" @change="justifySingle(2)">喷花类</el-checkbox>
                    <el-checkbox-group v-model="checkMore2" style="display:inline-block;"
                                       @change="justify(2)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked3" style="margin-right: 15px" @change="justifySingle(3)">旋转类</el-checkbox>
                    <el-checkbox-group v-model="checkMore3" style="display:inline-block;"
                                       @change="justify(3)">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked4" style="margin-right: 15px" @change="justifySingle(4)">吐珠类</el-checkbox>
                    <el-checkbox-group v-model="checkMore4" style="display:inline-block;"
                                       @change="justify(4)">
                      <el-checkbox v-for="item in checkList1" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked5" style="margin-right: 15px" @change="justifySingle(5)">玩具类</el-checkbox>
                    <el-checkbox-group v-model="checkMore5" style="display:inline-block;"
                                       @change="justify(5)">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked6" style="margin-right: 15px" @change="justifySingle(6)">组合烟花类
                    </el-checkbox>
                    <el-checkbox-group v-model="checkMore6" style="display:inline-block;"
                                       @change="justify(6)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked7" style="margin-right: 15px" @change="justifySingle(7)">升空类</el-checkbox>
                    <el-checkbox-group v-model="checkMore7" style="display:inline-block;"
                                       @change="justify(7)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">
                        {{ item }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input type="textarea" :rows="3" v-model.trim="dataForm.remark"
                          class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="enterpriseBasicInformation_title">
            <span>发证机关必填内容</span>
            <span style="display: inline-block;color:red">(*必填)</span>
          </div>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="发证机关:">
                <el-input v-model.trim="dataForm.issuingunit"
                          :disabled="isSupervision === 'null' ? false :true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期:" prop="issuingdate">
                <el-date-picker
                    :disabled="isSupervision === 'null' ? false :true"
                    value-format="YYYY-MM-DD"
                    v-model="dataForm.issuingdate"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
                <span :span="16">
                    <el-form-item label="有效期:">
                        <el-date-picker
                            :disabled="isSupervision === 'null' ? false :true"
                            value-format="YYYY-MM-DD"
                            v-model="validTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="giveData"
                        >
                        </el-date-picker>
                    </el-form-item>
                </span>
          </el-row>


        </el-col>

      </el-row>

    </el-form>
    <div align="right" style="margin-top:30px;" v-if="title==='审核' ? false : true">
      <el-button @click="licenseInfoVisible = false">取消</el-button>
      <el-button type="primary" @click="submit('')">确认</el-button>
    </div>
    <div align="right" style="margin-top:30px;" v-if="title==='审核' ?true : false">
      <el-button @click="submit('拒绝')">拒绝</el-button>
      <el-button type="primary" @click="submit('同意')">同意</el-button>
    </div>
    <!--        <select-enterprise ref="selectEnterprise" @getinfo="giveEnterprise"></select-enterprise>-->
  </el-dialog>
</template>

<script>
import selectEnterprise from "./selectEnterprise";
import {addLicenseInfo, updateLicenseInfo,getCityListData, getProvinceListData,dictionaryAllItems} from "../../../../api/monitor/permit";
import Cookies from "js-cookie";
import {ElMessage} from "element-plus";

export default {
  name: "licenseInfoForm",
  data() {
    return {
      title: '',
      licenseInfoVisible: false,
      ruleForm: {},
      type: null,
      isSupervision: '',
      roleType: '',
      showSaveArea: false,
      salecompanyname: [],
      economicTypeList: [],
      licensetypeList: [
        {id: 1, name: '长期'},
        {id: 2, name: '临时'}
      ],
      dealingtypeList: [
        {id: 1, name: '专柜'},
        {id: 2, name: '专店'}
      ],
      validTime: ['', ''],
      dataForm: {
        id: '',
        type: null,
        name: '',
        mainpersonname: '',
        mainpersonidcardnum: '',
        mainpersontel: '',
        safetypersonname: '',
        safetypersonidcardnum: '',
        safetypersontel: '',
        dealingrange: [],
        licensetype: '',
        dealingtype: '',
        reservebox: '',
        reservekg: '',
        dealingarea: '',
        savearea: '',
        province: '',
        city: '',
        district: '',
        address: '',
        storageprovince: '',
        storagecity: '',
        storagedistrict: '',
        storageaddress: '',
        issuingunit: '',
        issuingdate: '',
        effectdate: '',
        noeffectdate: '',
        economictype: '',
        licenseStorage: [],
        remark: '',
      },
      areaListQuery: {},
      provinceList: [],
      cityList: [],
      districtList: [],
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      checked6: false,
      checked7: false,
      checkMore1: [],
      checkMore2: [],
      checkMore3: [],
      checkMore4: [],
      checkMore5: [],
      checkMore6: [],
      checkMore7: [],
      checkList1: ['C级', 'D级'],
      checkList2: ['C级', 'D级'],
      checkMoreList: ['C级', 'D级'],
      storage1: {
        id: null,
        area: null,
        firststoragenum: null,
        thirdstoragenum: null,
        firststoragearea: null,
        thirdstoragearea: null,
        firstpowder: null,
        thirdpowder: null,
      },
      storage2: {
        id: null,
        area: null,
        firststoragenum: null,
        thirdstoragenum: null,
        firststoragearea: null,
        thirdstoragearea: null,
        firstpowder: null,
        thirdpowder: null,
      },
      storage3: {
        id: null,
        area: null,
        firststoragenum: null,
        thirdstoragenum: null,
        firststoragearea: null,
        thirdstoragearea: null,
        firstpowder: null,
        thirdpowder: null,
      },
      id: null,
      area: null,
      firststoragenum: null,
      thirdstoragenum: null,
      firststoragearea: null,
      thirdstoragearea: null,
      firstpowder: null,
      thirdpowder: null,
    }
  },
  components: {
    selectEnterprise
  },
  computed: {
    storagenum: function () {
      return Number(this.firststoragenum) + Number(this.thirdstoragenum)
    },
    storagearea: function () {
      return Number(this.firststoragearea) + Number(this.thirdstoragearea)
    },
    powder: function () {
      return Number(this.firstpowder) + Number(this.thirdpowder)
    },
    storagenum1: function () {
      return Number(this.storage1.firststoragenum) + Number(this.storage1.thirdstoragenum)
    },
    storagearea1: function () {
      console.log(this.storage1);
      return Number(this.storage1.firststoragearea) + Number(this.storage1.thirdstoragearea)
    },
    powder1: function () {
      console.log(this.storage1);
      return Number(this.storage1.firstpowder) + Number(this.storage1.thirdpowder)
    },
    storagenum2: function () {
      return Number(this.storage2.firststoragenum) + Number(this.storage2.thirdstoragenum)
    },
    storagearea2: function () {
      return Number(this.storage2.firststoragearea) + Number(this.storage2.thirdstoragearea)
    },
    powder2: function () {
      return Number(this.storage2.firstpowder) + Number(this.storage2.thirdpowder)
    },
    storagenum3: function () {
      return Number(this.storage3.firststoragenum) + Number(this.storage3.thirdstoragenum)
    },
    storagearea3: function () {
      return Number(this.storage3.firststoragearea) + Number(this.storage3.thirdstoragearea)
    },
    powder3: function () {
      return Number(this.storage3.firstpowder) + Number(this.storage3.thirdpowder)
    }
  },
  created() {
    this.getProvince();
    this.getEconomicTypeList()
  },
  methods: {
    showLicenseForm(title, value, isSupervision, roleType) {
      this.isSupervision = isSupervision
      this.roleType = roleType
      this.licenseInfoVisible = true
      this.title = title
      if (title === '新增') {
        this.dataForm = {
          id: '',
          type: null,
          name: Cookies.get("company"),
          mainpersonname: '',
          mainpersonidcardnum: '',
          mainpersontel: '',
          safetypersonname: '',
          safetypersonidcardnum: '',
          safetypersontel: '',
          dealingrange: [],
          licensetype: '',
          dealingtype: '',
          reservebox: '',
          reservekg: '',
          dealingarea: '',
          savearea: '',
          province: '',
          city: '',
          district: '',
          address: '',
          storageprovince: '',
          storagecity: '',
          storagedistrict: '',
          storageaddress: '',
          issuingunit: '',
          issuingdate: '',
          effectdate: '',
          noeffectdate: '',
          licenseStorage: [],
          remark: '',
        }
        if (roleType === '烟花爆竹生产') {
          this.dataForm.type = 1
        } else if (roleType === '烟花爆竹批发经营') {
          this.dataForm.type = 2
        } else {
          this.dataForm.type = 3
        }
        this.checked1 = false
        this.checked2 = false
        this.checked3 = false
        this.checked4 = false
        this.checked5 = false
        this.checked6 = false
        this.checked7 = false
        this.checkMore1 = []
        this.checkMore2 = []
        this.checkMore3 = []
        this.checkMore4 = []
        this.checkMore5 = []
        this.checkMore6 = []
        this.checkMore7 = []
        this.id = null
        this.area = null
        this.firststoragenum = null
        this.thirdstoragenum = null
        this.firststoragearea = null
        this.thirdstoragearea = null
        this.firstpowder = null
        this.thirdpowder = null
      } else {
        this.dataForm = value
        if (roleType === '烟花爆竹批发经营' || (this.dataForm.type === 2 && roleType === 'null')) {
          this.type = 2
          if (value.licenseStorage.length > 10) {
            value.licenseStorage = JSON.parse(value.licenseStorage)
            value.dealingrange = JSON.parse(value.dealingrange)
          } else {

          }
          let licenseStorage = this.dataForm.licenseStorage
          let dealingrange = this.dataForm.dealingrange
          console.log(dealingrange,'range')
          this.id = licenseStorage[0].id
          this.area = licenseStorage[0].area
          this.firststoragenum = licenseStorage[0].firststoragenum
          this.thirdstoragenum = licenseStorage[0].thirdstoragenum
          this.firststoragearea = licenseStorage[0].firststoragearea
          this.thirdstoragearea = licenseStorage[0].thirdstoragearea
          this.firstpowder = licenseStorage[0].firstpowder
          this.thirdpowder = licenseStorage[0].thirdpowder
          this.checked1 = dealingrange[0].checked1
          this.checked2 = dealingrange[1].checked2
          this.checked3 = dealingrange[2].checked3
          this.checked4 = dealingrange[3].checked4
          this.checked5 = dealingrange[4].checked5
          this.checked6 = dealingrange[5].checked6
          this.checked7 = dealingrange[6].checked7
          this.checkMore1 = dealingrange[0].checkMore1
          this.checkMore2 = dealingrange[1].checkMore2
          this.checkMore3 = dealingrange[2].checkMore3
          this.checkMore4 = dealingrange[3].checkMore4
          this.checkMore5 = dealingrange[4].checkMore5
          this.checkMore6 = dealingrange[5].checkMore6
          this.checkMore7 = dealingrange[6].checkMore7
        } else if (roleType === '烟花爆竹零售经营（长期）' || roleType === '烟花爆竹零售经营（短期）' || (roleType === 'null' && this.dataForm.type === 3)) {
          this.type = 3
          if (value.dealingrange.length > 10) {
            value.dealingrange = JSON.parse(value.dealingrange)
          } else {

          }
          let dealingrange = this.dataForm.dealingrange
          this.checked1 = dealingrange[0].checked1
          this.checked2 = dealingrange[1].checked2
          this.checked3 = dealingrange[2].checked3
          this.checked4 = dealingrange[3].checked4
          this.checked5 = dealingrange[4].checked5
          this.checked6 = dealingrange[5].checked6
          this.checked7 = dealingrange[6].checked7
          this.checkMore1 = dealingrange[0].checkMore1
          this.checkMore2 = dealingrange[1].checkMore2
          this.checkMore3 = dealingrange[2].checkMore3
          this.checkMore4 = dealingrange[3].checkMore4
          this.checkMore5 = dealingrange[4].checkMore5
          this.checkMore6 = dealingrange[5].checkMore6
          this.checkMore7 = dealingrange[6].checkMore7
        }
      }
    },
    async submit(value) {
      if (this.dataForm.type === 1) {
        let storageOne = Object.assign(this.storage1, {
          storagenum1: this.storagenum1,
          storagearea1: this.storagearea1,
          powder1: this.powder1
        })
        let storageTwo = Object.assign(this.storage1, {
          storagenum2: this.storagenum2,
          storagearea2: this.storagearea2,
          powder2: this.powder2
        })
        let storageThree = Object.assign(this.storage1, {
          storagenum3: this.storagenum3,
          storagearea3: this.storagearea3,
          powder3: this.powder3
        })
        this.dataForm.licenseStorage.push(storageOne)
        this.dataForm.licenseStorage.push(storageTwo)
        this.dataForm.licenseStorage.push(storageThree)
        this.dataForm.dealingrange = JSON.stringify([{
          checked1: this.checked1,
          checkMore1: this.checkMore1
        }, {checked2: this.checked2, checkMore2: this.checkMore2}, {
          checked3: this.checked3,
          checkMore3: this.checkMore3
        }, {checked4: this.checked4, checkMore4: this.checkMore4}, {
          checked5: this.checked5,
          checkMore5: this.checkMore5
        }, {checked6: this.checked6, checkMore6: this.checkMore6}, {
          checked7: this.checked7,
          checkMore7: this.checkMore7
        }])
        this.dataForm.licenseStorage = JSON.stringify(this.dataForm.licenseStorage)
      } else if (this.dataForm.type === 2) {
        this.dataForm.licenseStorage = JSON.stringify([{
          id: this.id,
          area: this.area,
          storagenum: this.storagenum,
          storagearea: this.storagearea,
          powder: this.powder,
          firststoragenum: this.firststoragenum,
          firststoragearea: this.firststoragearea,
          firstpowder: this.firstpowder,
          thirdstoragenum: this.thirdstoragenum,
          thirdstoragearea: this.thirdstoragearea,
          thirdpowder: this.thirdpowder,
          type: 3
        }])
        this.dataForm.dealingrange = JSON.stringify([{
          checked1: this.checked1,
          checkMore1: this.checkMore1
        }, {checked2: this.checked2, checkMore2: this.checkMore2}, {
          checked3: this.checked3,
          checkMore3: this.checkMore3
        }, {checked4: this.checked4, checkMore4: this.checkMore4}, {
          checked5: this.checked5,
          checkMore5: this.checkMore5
        }, {checked6: this.checked6, checkMore6: this.checkMore6}, {
          checked7: this.checked7,
          checkMore7: this.checkMore7
        }])
      } else {
        this.dataForm.dealingrange = JSON.stringify([{
          checked1: this.checked1,
          checkMore1: this.checkMore1
        }, {checked2: this.checked2, checkMore2: this.checkMore2}, {
          checked3: this.checked3,
          checkMore3: this.checkMore3
        }, {checked4: this.checked4, checkMore4: this.checkMore4}, {
          checked5: this.checked5,
          checkMore5: this.checkMore5
        }, {checked6: this.checked6, checkMore6: this.checkMore6}, {
          checked7: this.checked7,
          checkMore7: this.checkMore7
        }])
        this.dataForm.licenseStorage = JSON.stringify([])
      }
      let fullAddress = (this.dataForm.province === '新疆维吾尔自治区' ? '新疆' : this.dataForm.province)
          + this.dataForm.city + this.dataForm.district + this.dataForm.address;
      let fullStorageAddress = (this.dataForm.storageprovince === '新疆维吾尔自治区' ? '新疆' : this.dataForm.storageprovince)
          + this.dataForm.storagecity + this.dataForm.storagedistrict + this.dataForm.storageaddress;
      if (this.getByteLen(fullAddress) > 390 || this.getByteLen(fullStorageAddress) > 390) {
        ElMessage.warning('注册地址或仓储地址的省市区详细地址总和不能超过200个字，请删减')
      } else {
        if (this.title === "新增") {
          let res = await addLicenseInfo(this.dataForm)
          if (res.code === '200') {
            this.licenseInfoVisible = false
            this.$emit('getinfo')
            this.$notify({
              title: '成功',
              duration: 2000,
              message: '新增成功',
              type: 'success'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.message
            })
          }
        } else if (this.title === '修改') {

          let res = await updateLicenseInfo(this.dataForm)
          if (res.code === '200') {
            this.licenseInfoVisible = false
            this.$emit('getinfo')
            this.$notify({
              title: '成功',
              duration: 2000,
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.message
            })
          }
        } else {
          if (value === '同意') {
            this.dataForm.reviewstatus = 2
            let res = await updateLicenseInfo(this.dataForm)
            if (res.code === '200') {
              this.licenseInfoVisible = false
              this.$emit('getinfo')
              this.$notify({
                title: '成功',
                duration: 2000,
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          } else {
            this.dataForm.reviewstatus = 3
            let res = await updateLicenseInfo(this.dataForm)
            if (res.code === '200') {
              this.licenseInfoVisible = false
              this.$emit('getinfo')
              this.$notify({
                title: '成功',
                duration: 2000,
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          }
        }
      }


    },
    justify(value) {
      if (value === 1) {
        if (this.checkMore1.length !== 0) {
          this.checked1 = true
        } else {
          this.checked1 = false
        }
      } else if (value === 2) {
        if (this.checkMore2.length !== 0) {
          this.checked2 = true
        } else {
          this.checked2 = false
        }
      } else if (value === 3) {
        if (this.checkMore3.length !== 0) {
          this.checked3 = true
        } else {
          this.checked3 = false
        }
      } else if (value === 4) {
        if (this.checkMore4.length !== 0) {
          this.checked4 = true
        } else {
          this.checked4 = false
        }
      } else if (value === 5) {
        if (this.checkMore5.length !== 0) {
          this.checked5 = true
        } else {
          this.checked5 = false
        }
      } else if (value === 6) {
        if (this.checkMore6.length !== 0) {
          this.checked6 = true
        } else {
          this.checked6 = false
        }
      } else {
        if (this.checkMore7.length !== 0) {
          this.checked7 = true
        } else {
          this.checked7 = false
        }
      }
    },

    justifySingle(value) {
      if (value === 1) {
        if (this.checked1 === true) {
          this.checkMore1 = ['C级', 'D级']
        } else {
          this.checkMore1 = []
        }
      } else if (value === 2) {
        if (this.checked2 === true) {
          this.checkMore2 = ['C级', 'D级']
        } else {
          this.checkMore2 = []
        }
      } else if (value === 3) {
        if (this.checked3 === true) {
          this.checkMore3 = ['C级', 'D级']
        } else {
          this.checkMore3 = []
        }
      } else if (value === 4) {
        if (this.checked4 === true) {
          this.checkMore4 = ['C级', 'D级']
        } else {
          this.checkMore4 = []
        }
      } else if (value === 5) {
        if (this.checked5 === true) {
          this.checkMore5 = ['C级', 'D级']
        } else {
          this.checkMore5 = []
        }
      } else if (value === 6) {
        if (this.checked6 === true) {
          this.checkMore6 = ['C级', 'D级']
        } else {
          this.checkMore6 = []
        }
      } else {
        if (this.checked7 === true) {
          this.checkMore7 = ['C级', 'D级']
        } else {
          this.checkMore7 = []
        }
      }
    },

    getEconomicTypeList() {
      const _this = this
      if (_this.levelOptions && _this.levelOptions.length > 0) {
        return
      }
      const params = {}
      params['dictionaryType'] = '国民经济类型'
      dictionaryAllItems(params).then(res => {
        if (res.code == 200) {
          _this.economicTypeList = res.result
        } else {
          ElMessage.warning(res.message)
        }
      }).catch(error => {
        ElMessage.warning(error)
      })
    },//获取国民经济类型列表


    async getProvince() {
      let res = await getProvinceListData()
      if (res.code === "200") {
        this.provinceList = res.result.provinceList
      }
    },
    async changeArea(value) {
      if (value === 'province') {
        this.dataForm.city = ''
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.province,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.cityList = res.result
        }
      } else if (value === 'city') {
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.city,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.districtList = res.result
        }
      } else if (value === 'district') {
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.district,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.streetList = res.result
        }
      }
    },
    async changeStorageArea(value) {
      if (value === 'province') {
        this.dataForm.storagecity = ''
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.storageprovince,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.cityList = res.result
        }
      } else if (value === 'city') {
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.storagecity,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.districtList = res.result
        }
      } else if (value === 'district') {
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.storagedistrict,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.streetList = res.result
        }
      }
    },
    changeDealing() {
      if (this.dataForm.dealingtype === 1) {
        this.showSaveArea = true
      } else {
        this.showSaveArea = false
      }
    },
    giveData() {
      if (this.validTime === null) {
        this.dataForm.effectdate = ""
        this.dataForm.noeffectdate = ""
      } else {
        this.dataForm.effectdate = this.validTime[0]
        this.dataForm.noeffectdate = this.validTime[1]
      }
    },
    showEnterprise() {
      this.$refs.selectEnterprise.showEnterPrise(this.safetySuperVisionList)
    },
    giveEnterprise(val) {
      this.dataForm.name = val
    },
    getByteLen(val) {
      let len = 0;
      for (let i = 0; i < val.length; i++) {
        let a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        } else {
          len += 1;
        }
      }
      return len;
    }
  }
}
</script>

<style scoped>
.enterpriseBasicInformation_title {
  font-weight: bolder;
  font-size: large;
  text-align: center;
  margin-top: 10px;
}

.enterpriseBasicInformation_image {
  width: 70%;
  height: 70%;
  margin-left: 10px;
}

.el-input-number {
  width: 100%;
}
</style>

 src/views/firework/permit/components/licenseModForm.vue

对比新文件
@@ -0,0 +1,1193 @@
<template>
  <el-dialog
      v-model="licenseInfoVisible"
      append-to-body
      :title="title"
      :close-on-click-modal="false"
      width="60%"
  >

    <el-form ref="dataForm"  :model="dataForm" :rules="ruleForm" label-position="right" label-width="150px"  element-loading-text="保存中...">
      <el-row>
        <el-col :span="23">
          <el-row>
            <el-col :span="15">
              <el-form-item label="企业名称:" >
                <el-input v-model.trim="dataForm.name" class="carrierLicense_select" :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一社会信用代码:" >
                <el-input v-model.trim="dataForm.code" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="主要负责人姓名:" >
                <el-input v-model.trim="dataForm.mainpersonname" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人身份证号:" >
                <el-input v-model.trim="dataForm.mainpersonidcardnum" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主要负责人联系电话:" >
                <el-input v-model.trim="dataForm.mainpersontel" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="安全负责人姓名:" >
                <el-input v-model.trim="dataForm.safetypersonname" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人身份证号:" >
                <el-input v-model.trim="dataForm.safetypersonidcardnum" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="安全负责人联系电话:" >
                <el-input v-model.trim="dataForm.safetypersontel" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="许可类型:" >
                <el-select v-model="dataForm.licensetype" clearable filterable >
                  <el-option
                      v-for="item in licensetypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营方式:" >
                <el-select v-model="dataForm.dealingtype" clearable filterable @change="changeDealing()">
                  <el-option
                      v-for="item in dealingtypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定储量（箱）:" >
                <el-input-number :controls="false"  v-model="dataForm.reservebox">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="核定储量（千克）:" >
                <el-input-number :controls="false"  v-model="dataForm.reservekg">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（全部）:" >
                <el-input-number :controls="false"  v-model="dataForm.dealingarea">
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营面积（物品）:"  v-if="showSaveArea">
                <el-input-number :controls="false"  v-model="dataForm.savearea">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册地址省:" >
                <el-select v-model="dataForm.province" clearable filterable @change="changeArea('province')" placeholder="省">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" >
                <el-select v-model="dataForm.city" prop="city" clearable filterable @change="changeArea('city')" placeholder="市">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区" >
                <el-select v-model="dataForm.district" clearable filterable @change="changeArea('district')" placeholder="区">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册详细地址:" >
                <el-input v-model.trim="dataForm.address" class="carrierLicense_select" placeholder="详细地址（无需填写省市区信息）">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="仓储地址省:" >
                <el-select v-model="dataForm.storageprovince" clearable filterable @change="changeStorageArea('province')" placeholder="省">
                  <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市" >
                <el-select v-model="dataForm.storagecity" prop="city" clearable filterable @change="changeStorageArea('city')" placeholder="市">
                  <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区" >
                <el-select v-model="dataForm.storagedistrict" clearable filterable @change="changeStorageArea('district')" placeholder="区">
                  <el-option
                      v-for="item in districtList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="仓储详细地址:" >
                <el-input v-model.trim="dataForm.storageaddress" class="carrierLicense_select" placeholder="详细地址（无需填写省市区信息）">
                </el-input>
              </el-form-item>
            </el-col>
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="发证机关:" >-->
            <!--                        <el-input v-model.trim="dataForm.salecompanyname" class="carrierLicense_select">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
          </el-row>
          <el-row>
            <el-form-item label="经济类型:" prop="economictype" >
              <el-select v-model.trim="dataForm.economictype"  placeholder="" clearable class="enterpriseBasicInformation_input">
                <el-option
                    v-for="item in economicTypeList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.text"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <div v-if="roleType==='烟花爆竹批发经营' || type === 2 ? true : false">
            <div class="enterpriseBasicInformation_title">
              <span>库房信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto"   v-model.trim="area" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input  v-model.trim="storagenum" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input  v-model.trim="storagearea" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input  v-model.trim="powder" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false"  v-model.trim="firststoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false"  v-model.trim="firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false"  v-model.trim="firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false"  v-model.trim="thirdstoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false"  v-model.trim="thirdstoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false"  v-model.trim="thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="roleType==='烟花爆竹生产' || type === 1 ? true : false">
            <div class="enterpriseBasicInformation_title">
              <span>危险品中转库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage1.area" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder1" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdstoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage1.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>药物总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage2.area" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder2" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdstoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdtoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage2.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <div class="enterpriseBasicInformation_title">
              <span>成品总库信息</span>
            </div>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="库区面积:" >
                  <el-input-number :controls="false" style="width: auto" v-model.trim="storage3.area" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房数量:" >
                  <el-input v-model.trim="storagenum3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="库房面积:" >
                  <el-input v-model.trim="storagearea3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核定药量:" >
                  <el-input v-model.trim="powder3" :disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.1级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firststoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.1级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.firstpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="1.3级  库房数量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdstoragenum" >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  库房面积:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdtoragearea">
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="1.3级  核定药量:" >
                  <el-input-number :controls="false" v-model.trim="storage3.thirdpowder">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-row>
            <el-col :span="24">
              <el-form-item label="许可范围:" >
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="checked1" @change="justifySingle(1)">爆竹类</el-checkbox>
                    <el-checkbox-group v-model="checkMore1" style="display:inline-block;" @change="justify(1)">
                      <el-checkbox v-for="item in checkList1" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked2" @change="justifySingle(2)">喷花类</el-checkbox>
                    <el-checkbox-group v-model="checkMore2" style="display:inline-block;" @change="justify(2)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked3" @change="justifySingle(3)">旋转类</el-checkbox>
                    <el-checkbox-group v-model="checkMore3" style="display:inline-block;" @change="justify(3)">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="checked4" @change="justifySingle(4)">吐珠类</el-checkbox>
                    <el-checkbox-group v-model="checkMore4" style="display:inline-block;" @change="justify(4)">
                      <el-checkbox v-for="item in checkList1" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked5" @change="justifySingle(5)">玩具类</el-checkbox>
                    <el-checkbox-group v-model="checkMore5" style="display:inline-block;" @change="justify(5)">
                      <el-checkbox v-for="item in checkMoreList" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked6" @change="justifySingle(6)">组合烟花类</el-checkbox>
                    <el-checkbox-group v-model="checkMore6" style="display:inline-block;" @change="justify(6)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="checked7" @change="justifySingle(7)">升空类</el-checkbox>
                    <el-checkbox-group v-model="checkMore7" style="display:inline-block;" @change="justify(7)">
                      <el-checkbox v-for="item in checkList2" :label="item" :key="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" >
                <el-input type="textarea" :rows="3" v-model.trim="dataForm.remark" class="carrierLicense_select">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="enterpriseBasicInformation_title">
            <span>发证机关必填内容</span>
            <span style="display: inline-block;color:red">(*必填)</span>
          </div>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="发证机关:" prop="issuingunit" :rules="rules.rulesItem">
                <el-input v-model.trim="dataForm.issuingunit"  :disabled="isSupervision === 'null' ? false :true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期:" prop="issuingdate" :rules="rules.rulesItem">
                <el-date-picker
                    :disabled="isSupervision === 'null' ? false :true"
                    value-format="YYYY-MM-DD"
                    v-model="dataForm.issuingdate"
                    placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
                <span :span="16">
                    <el-form-item label="有效期:" prop="effectdate" :rules="rules.rulesArray">
                        <el-date-picker
                            :disabled="isSupervision === 'null' ? false :true"
                            value-format="YYYY-MM-DD"
                            v-model="validTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="giveData"
                        >
                        </el-date-picker>
                    </el-form-item>
                </span>
          </el-row>


        </el-col>

      </el-row>

    </el-form>
    <div  align="right" style="margin-top:30px;" v-if="title==='审核' ? false : true">
      <el-button @click="licenseInfoVisible = false">取消</el-button>
      <el-button type="primary" @click="submit('')">确认</el-button>
    </div>
    <div  align="right" style="margin-top:30px;" v-if="title==='审核' ?true : false">
      <el-button @click="submit('拒绝')">拒绝</el-button>
      <el-button type="primary" @click="submit('同意')">同意</el-button>
    </div>
    <!--        <select-enterprise ref="selectEnterprise" @getinfo="giveEnterprise"></select-enterprise>-->
  </el-dialog>
</template>

<script>
import selectEnterprise from "./selectEnterprise";
import {addLicenseInfo,modLicense,getCityListData, getProvinceListData,dictionaryAllItems} from "../../../../api/monitor/permit";
import Cookies from "js-cookie";
import {ElMessage} from "element-plus";

export default {
  name: "licenseInfoForm",
  data(){
    return{
      title:'',
      licenseInfoVisible:false,
      ruleForm:{

      },
      rules:{
        rulesItem:[
          { message:"必填项",required:true, trigger: 'change'}
        ],
        rulesArray:[
          { type:'array',message:"开始结束日期必填",required:true, trigger: 'change'}
        ],
      },
      type:null,
      isSupervision:'',
      roleType:'',
      showSaveArea:false,
      salecompanyname:[],
      economicTypeList:[],
      licensetypeList:[
        {id:1,name:'长期'},
        {id:2,name:'临时'}
      ],
      dealingtypeList:[
        {id:1,name:'专柜'},
        {id:2,name:'专店'}
      ],
      validTime:['',''],
      dataForm:{
        id:'',
        type:null,
        name:'',
        mainpersonname:'',
        mainpersonidcardnum:'',
        mainpersontel:'',
        safetypersonname:'',
        safetypersonidcardnum:'',
        safetypersontel:'',
        dealingrange:[],
        licensetype:'',
        dealingtype:'',
        reservebox:'',
        reservekg:'',
        dealingarea:'',
        savearea:'',
        province:'',
        city:'',
        district:'',
        address:'',
        storageprovince:'',
        storagecity:'',
        storagedistrict:'',
        storageaddress:'',
        issuingunit:'',
        issuingdate:'',
        effectdate:'',
        noeffectdate:'',
        economictype:'',
        licenseStorage:[

        ],
        remark:'',
      },
      areaListQuery:{

      },
      provinceList:[],
      cityList:[],
      districtList:[],
      checked1:false,
      checked2:false,
      checked3:false,
      checked4:false,
      checked5:false,
      checked6:false,
      checked7:false,
      checkMore1:[],
      checkMore2:[],
      checkMore3:[],
      checkMore4:[],
      checkMore5:[],
      checkMore6:[],
      checkMore7:[],
      checkList1:['C级','D级'],
      checkList2:['C级','D级'],
      checkMoreList:['C级','D级'],
      storage1:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      storage2:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      storage3:{
        id:null,
        area:null,
        firststoragenum:null,
        thirdstoragenum:null,
        firststoragearea:null,
        thirdstoragearea:null,
        firstpowder:null,
        thirdpowder:null,
      },
      id:null,
      area:null,
      firststoragenum:null,
      thirdstoragenum:null,
      firststoragearea:null,
      thirdstoragearea:null,
      firstpowder:null,
      thirdpowder:null,
    }
  },
  components:{
    selectEnterprise
  },
  computed:{
    storagenum:function (){
      return Number(this.firststoragenum) + Number(this.thirdstoragenum)
    },
    storagearea:function(){
      return Number(this.firststoragearea) + Number(this.thirdstoragearea)
    },
    powder:function (){
      return Number(this.firstpowder) + Number(this.thirdpowder)
    },
    storagenum1:function (){
      return Number(this.storage1.firststoragenum) + Number(this.storage1.thirdstoragenum)
    },
    storagearea1:function(){
      console.log(this.storage1);
      return Number(this.storage1.firststoragearea) + Number(this.storage1.thirdstoragearea)
    },
    powder1:function (){
      console.log(this.storage1);
      return Number(this.storage1.firstpowder) + Number(this.storage1.thirdpowder)
    },
    storagenum2:function (){
      return Number(this.storage2.firststoragenum) + Number(this.storage2.thirdstoragenum)
    },
    storagearea2:function(){
      return Number(this.storage2.firststoragearea) + Number(this.storage2.thirdstoragearea)
    },
    powder2:function (){
      return Number(this.storage2.firstpowder) + Number(this.storage2.thirdpowder)
    },
    storagenum3:function (){
      return Number(this.storage3.firststoragenum) + Number(this.storage3.thirdstoragenum)
    },
    storagearea3:function(){
      return Number(this.storage3.firststoragearea) + Number(this.storage3.thirdstoragearea)
    },
    powder3:function (){
      return Number(this.storage3.firstpowder) + Number(this.storage3.thirdpowder)
    }
  },
  created(){
    this.getProvince();
    this.getEconomicTypeList()
  },
  methods:{
    showLicenseForm(title,value,isSupervision,roleType){
      this.isSupervision = isSupervision
      this.roleType = roleType
      this.licenseInfoVisible = true
      this.title = title
      this.validTime = [value.effectdate,value.noeffectdate]
      let {...copyValue} = value
      this.dataForm = copyValue
      if(roleType === '烟花爆竹批发经营' ||  (this.dataForm.type === 2 && roleType === 'null')){
        this.type = 2
        if(this.dataForm.licenseStorage.length > 10){
          this.dataForm.licenseStorage = JSON.parse(this.dataForm.licenseStorage)
          this.dataForm.dealingrange =JSON.parse(this.dataForm.dealingrange)
        }
        let licenseStorage = this.dataForm.licenseStorage
        let dealingrange = this.dataForm.dealingrange
        this.id = licenseStorage[0].id
        this.area = licenseStorage[0].area
        this.firststoragenum=licenseStorage[0].firststoragenum
        this.thirdstoragenum=licenseStorage[0].thirdstoragenum
        this.firststoragearea=licenseStorage[0].firststoragearea
        this.thirdstoragearea=licenseStorage[0].thirdstoragearea
        this.firstpowder=licenseStorage[0].firstpowder
        this.thirdpowder=licenseStorage[0].thirdpowder
        this.checked1 = dealingrange[0].checked1
        this.checked2 = dealingrange[1].checked2
        this.checked3 = dealingrange[2].checked3
        this.checked4 = dealingrange[3].checked4
        this.checked5 = dealingrange[4].checked5
        this.checked6 = dealingrange[5].checked6
        this.checked7 = dealingrange[6].checked7
        this.checkMore1=dealingrange[0].checkMore1
        this.checkMore2=dealingrange[1].checkMore2
        this.checkMore3=dealingrange[2].checkMore3
        this.checkMore4=dealingrange[3].checkMore4
        this.checkMore5=dealingrange[4].checkMore5
        this.checkMore6=dealingrange[5].checkMore6
        this.checkMore7=dealingrange[6].checkMore7
      }else if(roleType === '烟花爆竹零售经营（长期）' || roleType === '烟花爆竹零售经营（短期）' || (roleType === 'null'&& this.dataForm.type ===3)){
        this.type = 3
        if(this.dataForm.dealingrange.length > 10){
          this.dataForm.dealingrange =JSON.parse(this.dataForm.dealingrange)
        }
        let dealingrange = this.dataForm.dealingrange
        this.checked1 = dealingrange[0].checked1
        this.checked2 = dealingrange[1].checked2
        this.checked3 = dealingrange[2].checked3
        this.checked4 = dealingrange[3].checked4
        this.checked5 = dealingrange[4].checked5
        this.checked6 = dealingrange[5].checked6
        this.checked7 = dealingrange[6].checked7
        this.checkMore1=dealingrange[0].checkMore1
        this.checkMore2=dealingrange[1].checkMore2
        this.checkMore3=dealingrange[2].checkMore3
        this.checkMore4=dealingrange[3].checkMore4
        this.checkMore5=dealingrange[4].checkMore5
        this.checkMore6=dealingrange[5].checkMore6
        this.checkMore7=dealingrange[6].checkMore7
      }
    },
    async submit(value){
      if(this.dataForm.type === 1){
        let storageOne = Object.assign(this.storage1,{storagenum1:this.storagenum1,storagearea1:this.storagearea1,powder1:this.powder1})
        let storageTwo = Object.assign(this.storage1,{storagenum2:this.storagenum2,storagearea2:this.storagearea2,powder2:this.powder2})
        let storageThree = Object.assign(this.storage1,{storagenum3:this.storagenum3,storagearea3:this.storagearea3,powder3:this.powder3})
        this.dataForm.licenseStorage.push(storageOne)
        this.dataForm.licenseStorage.push(storageTwo)
        this.dataForm.licenseStorage.push(storageThree)
        this.dataForm.dealingrange = JSON.stringify([{checked1:this.checked1,checkMore1:this.checkMore1},{checked2:this.checked2,checkMore2:this.checkMore2},{checked3:this.checked3,checkMore3:this.checkMore3},{checked4:this.checked4,checkMore4:this.checkMore4},{checked5:this.checked5,checkMore5:this.checkMore5},{checked6:this.checked6,checkMore6:this.checkMore6},{checked7:this.checked7,checkMore7:this.checkMore7}])
        this.dataForm.licenseStorage = JSON.stringify(this.dataForm.licenseStorage)
      }else if(this.dataForm.type === 2){
        this.dataForm.licenseStorage = JSON.stringify([{id:this.id,area:this.area,storagenum:this.storagenum,storagearea:this.storagearea,powder:this.powder,firststoragenum:this.firststoragenum,firststoragearea:this.firststoragearea,firstpowder:this.firstpowder,thirdstoragenum:this.thirdstoragenum,thirdstoragearea:this.thirdstoragearea,thirdpowder:this.thirdpowder,type:3}])
        this.dataForm.dealingrange = JSON.stringify([{checked1:this.checked1,checkMore1:this.checkMore1},{checked2:this.checked2,checkMore2:this.checkMore2},{checked3:this.checked3,checkMore3:this.checkMore3},{checked4:this.checked4,checkMore4:this.checkMore4},{checked5:this.checked5,checkMore5:this.checkMore5},{checked6:this.checked6,checkMore6:this.checkMore6},{checked7:this.checked7,checkMore7:this.checkMore7}])
      }else{
        this.dataForm.dealingrange = JSON.stringify([{checked1:this.checked1,checkMore1:this.checkMore1},{checked2:this.checked2,checkMore2:this.checkMore2},{checked3:this.checked3,checkMore3:this.checkMore3},{checked4:this.checked4,checkMore4:this.checkMore4},{checked5:this.checked5,checkMore5:this.checkMore5},{checked6:this.checked6,checkMore6:this.checkMore6},{checked7:this.checked7,checkMore7:this.checkMore7}])
        this.dataForm.licenseStorage = JSON.stringify([])
      }
      let fullAddress = (this.dataForm.province ==='新疆维吾尔自治区'? '新疆': this.dataForm.province)
          + this.dataForm.city + this.dataForm.district + this.dataForm.address;
      let fullStorageAddress = (this.dataForm.storageprovince ==='新疆维吾尔自治区'? '新疆': this.dataForm.storageprovince)
          + this.dataForm.storagecity + this.dataForm.storagedistrict + this.dataForm.storageaddress;

      if (this.dealingtypeList.filter(item => item.id === this.dataForm.dealingtype).length !== 1) {
        ElMessage.warning('请填写经营方式')
        return
      }
      if (this.licensetypeList.filter(item => item.id === this.dataForm.licensetype).length !== 1) {
        ElMessage.warning('请填写许可类型')
        return
      }
      if (this.getByteLen(fullAddress) > 390 || this.getByteLen(fullStorageAddress) > 390){
        ElMessage.warning('注册地址或仓储地址的省市区详细地址总和不能超过200个字，请删减')
      } else {
        let res = await modLicense(this.dataForm)
        if(res.code === '200'){
          this.licenseInfoVisible = false
          this.$emit('getinfo')
          this.$notify({
            title:'成功',
            duration:2000,
            message:'变更成功',
            type:'success'
          })
        }else{
          this.$message({
            type:'warning',
            message:res.message
          })
        }
      }


    },
    justify(value){
      if(value === 1){
        if(this.checkMore1.length !== 0){
          this.checked1 = true
        }else{
          this.checked1 = false
        }
      }else if(value===2){
        if(this.checkMore2.length !== 0){
          this.checked2 = true
        }else{
          this.checked2= false
        }
      }else if(value ===3){
        if(this.checkMore3.length !== 0){
          this.checked3 = true
        }else{
          this.checked3 = false
        }
      }else if(value === 4){
        if(this.checkMore4.length !== 0){
          this.checked4 = true
        }else{
          this.checked4 = false
        }
      }else if(value === 5){
        if(this.checkMore5.length !== 0){
          this.checked5 = true
        }else{
          this.checked5 = false
        }
      }else if(value === 6){
        if(this.checkMore6.length !== 0){
          this.checked6 = true
        }else{
          this.checked6 = false
        }
      }else{
        if(this.checkMore7.length !== 0){
          this.checked7 = true
        }else{
          this.checked7 = false
        }
      }
    },

    justifySingle(value){
      if(value === 1){
        if(this.checked1 === true){
          this.checkMore1 = ['C级','D级']
        }else{
          this.checkMore1 = []
        }
      }else if(value ===2){
        if(this.checked2 === true){
          this.checkMore2 = ['C级','D级']
        }else{
          this.checkMore2 = []
        }
      }else if(value=== 3){
        if(this.checked3 === true){
          this.checkMore3 = ['C级','D级']
        }else{
          this.checkMore3 = []
        }
      }else if(value === 4){
        if(this.checked4 === true){
          this.checkMore4 = ['C级','D级']
        }else{
          this.checkMore4 = []
        }
      }else if(value ===5){
        if(this.checked5 === true){
          this.checkMore5 = ['C级','D级']
        }else{
          this.checkMore5 = []
        }
      }else if(value === 6){
        if(this.checked6 === true){
          this.checkMore6 = ['C级','D级']
        }else{
          this.checkMore6 = []
        }
      }else{
        if(this.checked7 === true){
          this.checkMore7 = ['C级','D级']
        }else{
          this.checkMore7 = []
        }
      }
    },

    getEconomicTypeList() {
      const _this = this
      if (_this.levelOptions && _this.levelOptions.length > 0) {
        return
      }
      const params = {}
      params['dictionaryType'] = '国民经济类型'
      dictionaryAllItems(params).then(res => {
        if (res.code == 200) {
          _this.economicTypeList = res.result
        } else {
          ElMessage.warning(res.message)
        }
      }).catch(error => {
        ElMessage.warning(error)
      })
    },//获取国民经济类型列表


    async getProvince(){
      let res = await getProvinceListData()
      if(res.code === "200"){
        this.provinceList = res.result.provinceList
      }
    },
    async changeArea(value){
      if(value === 'province'){
        this.dataForm.city = ''
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.province,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.cityList = res.result
        }
      }else if(value === 'city'){
        this.dataForm.district = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.city,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.districtList = res.result
        }
      }else if(value === 'district'){
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.district,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.streetList = res.result
        }
      }
    },
    async changeStorageArea(value){
      if(value === 'province'){
        this.dataForm.storagecity = ''
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.dataForm.storageprovince,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.cityList = res.result
        }
      }else if(value === 'city'){
        this.dataForm.storagedistrict = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.dataForm.storagecity,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.districtList = res.result
        }
      }else if(value === 'district'){
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.dataForm.storagedistrict,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.streetList = res.result
        }
      }
    },
    changeDealing(){
      if(this.dataForm.dealingtype === 1){
        this.showSaveArea = true
      }else{
        this.showSaveArea = false
      }
    },
    giveData(){
      if(this.validTime ===null){
        this.dataForm.effectdate = ""
        this.dataForm.noeffectdate = ""
      }else{
        this.dataForm.effectdate = this.validTime[0]
        this.dataForm.noeffectdate = this.validTime[1]
      }
    },
    showEnterprise(){
      this.$refs.selectEnterprise.showEnterPrise(this.safetySuperVisionList)
    },
    giveEnterprise(val){
      this.dataForm.name = val
    },
    getByteLen(val) {
      let len = 0;
      for (let i = 0; i < val.length; i++) {
        let a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        }
        else {
          len += 1;
        }
      }
      return len;
    }
  }
}
</script>

<style scoped>
.enterpriseBasicInformation_title{
  font-weight: bolder;
  font-size: large;
  text-align: center;
  margin-top: 10px;
}
.enterpriseBasicInformation_image{
  width:70%;
  height:70%;
  margin-left:10px;
}
.el-input-number{
  width: 100%;
}
</style>

 src/views/firework/permit/components/printDetail.vue

对比新文件
@@ -0,0 +1,183 @@

<template>
  <el-dialog
      v-model="licenseInfoVisible"
      append-to-body
      :close-on-click-modal="false"
      width="60%"
  >
    <div id="printMe2">
      <el-row>
        <el-col :span="8" style="margin-top:660px;margin-left: 180px">
          <el-row >
            <el-col :span="24">
              {{name}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 45px">
            <el-col :span="24">
              {{address}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 45px">
            <el-col :span="24">
              {{storageaddress}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 48px">
            <el-col :span="24" style="padding-right: 100px;">
              {{dealingrange}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 48px">
            <el-col :span="12">
              {{effectdate}}
            </el-col>
            <el-col :span="8">
              {{noeffectdate}}
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="margin-top: 385px;">
          <el-row>
            <el-col :span="10">
              <el-row>
                <el-col :span="24">
                  <span>{{value}}</span>
                </el-col>
              </el-row>
              <el-row style="margin-top: 17px;margin-left: 5px">
                <el-col :span="24">
                  <span>{{code}}</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div style="width:20px;height:20px;" class="qrcode" id="qrcode" ref="qrcode"/>
            </el-col>
          </el-row>

          <el-row style="margin-top: 92px;margin-left: 100px">
            <el-col :span="12">
              {{mainpersonname}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 48px;margin-left: 100px">
            <el-col :span="12">
              {{area}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 48px;margin-left: 100px">
            <el-col :span="12">
              {{storagearea}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 48px;margin-left: 100px">
            <el-col :span="12">
              {{powder}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 150px;margin-left: 100px">
            <el-col :span="12">
              {{issuingunit}}
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px;margin-left: 100px">
            <el-col :span="2" >
              <span>{{year}}</span>
            </el-col>
            <el-col :span="1"  style="margin-left:60px">
              <span>{{month}}</span>
            </el-col>
            <el-col :span="1"  style="margin-left:40px">
              <span>{{day}}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div  align="right" style="margin-top:30px;">
      <el-button type="primary"  v-print="printObj2">打印</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import QRCode from "qrcodejs2"
export default {
  name: "printForm",
  data(){
    return{
      code:'',
      name:'',
      mainpersonname:'',
      address:'',
      area:'',
      storageaddress:'',
      storagearea:'',
      dealingrange:'',
      powder:'',
      effectdate:'',
      noeffectdate:'',
      issuingunit:'',
      year:'',
      month:'',
      day:'',
      licenseInfoVisible:false,
      printObj2:{
        id:'printMe1',
        extraHead:'<meta  http-equiv="Content-Language" content="zh-cn"/>'
      },
      value:'',
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.qrcode()
    })
  },
  methods:{
    show(val){
      this.code = val.code
      this.licenseInfoVisible = true
      this.name =val.name
      this.mainpersonname = val.mainpersonname
      this.address = val.address
      this.area = JSON.parse(val.licenseStorage)[0].area
      this.storageaddress =val.storageaddress
      this.storagearea = JSON.parse(val.licenseStorage)[0].storagearea
      this.dealingrange = val.dealingRangeStr
      this.powder =  JSON.parse(val.licenseStorage)[0].powder
      this.effectdate = val.effectdate
      this.noeffectdate = val.noeffectdate
      this.issuingunit = val.issuingunit
      this.value = val.licensecode
      this.year = val.issuingdate.split('-')[0]
      this.month = val.issuingdate.split('-')[1]
      this.day= val.issuingdate.split('-')[2]
      this.$nextTick(() => {
        this.qrcode()
      })
    },
    qrcode(){
      if(this.value === ''){

      }else{
        document.getElementById("qrcode").innerHTML = ""
        let qrcode = new QRCode('qrcode', {
          width: 100,
          height: 100,        // 高度
          text:  this.value,   // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f',   // 背景色
          // foreground: '#ff0'    // 前景色
        })
      }
    }

  }
}
</script>

<style scoped>
</style>

 src/views/firework/permit/components/printForm.vue

对比新文件
@@ -0,0 +1,175 @@

<template>
  <el-dialog
      v-model="licenseInfoVisible"
      append-to-body
      :close-on-click-modal="false"
      width="60%"
  >
    <div id="printMe2">
      <el-row style="height:130px;margin-left:320px;margin-top:197px">
        <el-col :span="18">
          <span style="display: inline-block;font-size: 25px;">{{code}}</span>
        </el-col>
        <el-col :span="6">
          <div style="width: 40%;height: 40%;margin-left:25%;padding-top: 10px" id="qrcode" ref="qrcode"/>
        </el-col>
      </el-row>
      <el-row style="text-align: center;height:35px;font-size: 25px;margin-top:70px">
        <el-col :span="24">
          <span style="display: inline-block">{{value}}</span>
        </el-col>
      </el-row>
      <el-row style="height:80px;margin-left:290px;margin-top:30px;">
        <el-col :span="16" style="font-size: 27px">
          <span>{{name}}</span>
        </el-col>
        <el-col :span="8" style="font-size: 27px">
          <span>{{mainpersonname}}</span>
        </el-col>
      </el-row >
      <el-row style="height:80px;margin-left:290px;">
        <el-col :span="16"  style="font-size: 27px">
          <span>{{address}}</span>
        </el-col>
        <el-col :span="8"  style="font-size: 27px">
          <span>{{area}}</span>
        </el-col>
      </el-row>
      <el-row style="height:60px;margin-left:290px;">
        <el-col :span="16"  style="font-size: 27px">
          <span>{{storageaddress}}</span>
        </el-col>
        <el-col :span="8"  style="font-size: 27px">
          <span>{{storagearea}}</span>
        </el-col>
      </el-row>
      <el-row style="height:100px;margin-left:290px;">
        <el-col :span="16"  style="font-size: 27px;padding-right: 200px;">
          <span>{{dealingrange}}</span>
        </el-col>
        <el-col :span="8"  style="font-size: 27px;margin-top:20px;">
          <span>{{powder}}</span>
        </el-col>
      </el-row>
      <el-row style="height:80px;margin-left:290px;">
        <el-col :span="6"  style="font-size: 27px">
          <span>{{effectdate}}</span>
        </el-col>
        <el-col :span="10"  style="font-size: 27px">
          <span>{{noeffectdate}}</span>
        </el-col>
        <el-col :span="8"  style="font-size: 27px;margin-top:38px;">
          <span>{{issuingunit}}</span>
        </el-col>
      </el-row>
      <el-row style="height:80px;margin-left:290px;">
        <el-col :span="16"  style="font-size: 1px">
          <span>{{"."}}</span>
        </el-col>
        <el-col :span="2"  style="font-size: 27px;margin-top: 30px">
          <span>{{year}}</span>
        </el-col>
        <el-col :span="1"  style="font-size: 27px;margin-top: 30px;margin-left:40px">
          <span>{{month}}</span>
        </el-col>
        <el-col :span="1"  style="font-size: 27px;margin-top: 30px;margin-left:40px">
          <span>{{day}}</span>
        </el-col>
      </el-row>
      <!--            <el-row style="height:80px;margin-left:1110px;">-->
      <!--                <el-col :span="3"  style="font-size: 25px;margin-top:50px;">-->
      <!--                    <span>{{"xxxx"}}</span>-->
      <!--                </el-col>-->
      <!--                <el-col :span="3"  style="font-size: 25px;margin-top:50px;margin-left:30px">-->
      <!--                    <span>{{"xx"}}</span>-->
      <!--                </el-col>-->
      <!--                <el-col :span="3"  style="font-size: 25px;margin-top:50px;">-->
      <!--                    <span>{{"xx"}}</span>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
    </div>
    <div  align="right" style="margin-top:30px;">
      <el-button type="primary" v-print="printObj1">打印</el-button>
    </div>

  </el-dialog>
</template>

<script>
// import QRCode from "qrcodejs2"
export default {
  name: "printForm",
  data(){
    return{
      code:'',
      name:'',
      mainpersonname:'',
      address:'',
      area:'',
      storageaddress:'',
      storagearea:'',
      dealingrange:'',
      powder:'',
      effectdate:'',
      noeffectdate:'',
      issuingunit:'',
      year:'',
      month:'',
      day:'',
      licenseInfoVisible:false,
      value:'',
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.qrcode()
    })
  },
  methods:{
    show(val){
      this.licenseInfoVisible = true
      this.code = val.code
      this.name =val.name
      this.mainpersonname = val.mainpersonname
      this.address = val.address
      this.area = JSON.parse(val.licenseStorage)[0].area
      this.storageaddress =val.storageaddress
      this.storagearea = JSON.parse(val.licenseStorage)[0].storagearea
      this.dealingrange = val.dealingRangeStr
      this.powder =  JSON.parse(val.licenseStorage)[0].powder
      this.effectdate = val.effectdate
      this.noeffectdate = val.noeffectdate
      this.issuingunit = val.issuingunit
      this.value = val.licensecode
      this.year = val.issuingdate.split('-')[0]
      this.month = val.issuingdate.split('-')[1]
      this.day= val.issuingdate.split('-')[2]
      this.$nextTick(() => {
        this.qrcode()
      })
    },
    qrcode(){
      if(this.value === ''){

      }else{
        document.getElementById("qrcode").innerHTML = ""
        let qrcode = new QRCode('qrcode', {
          width: 125,
          height: 125,        // 高度
          text:  this.value,   // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f',   // 背景色
          // foreground: '#ff0'    // 前景色

        })
      }
    }

  }
}
</script>

<style scoped>

</style>

 src/views/firework/permit/components/selectEnterprise.vue

对比新文件
@@ -0,0 +1,244 @@
<template>
  <el-dialog
      v-model="superiorDepartmentVisible"
      append-to-body
      :close-on-click-modal="false"
      width="75%"
  >
    <div class="app-container">
      <div class="filter-container">
        <div class="basic_search">
          <span>区域：</span>
          <el-select v-model="listQuery.filter.province" clearable filterable @change="changeArea('province')">
            <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="basic_search">
          <el-select v-model="listQuery.filter.city" prop="city" clearable filterable @change="changeArea('city')">
            <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="basic_search">
          <el-select v-model="listQuery.filter.district" clearable filterable @change="changeArea('district')">
            <el-option
                v-for="item in districtList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="basic_search">
          <el-select v-model="listQuery.filter.street" clearable filterable @change="changeArea('street')" >
            <el-option
                v-for="item in streetList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: block;padding-top: 10px;padding-bottom: 10px">
          <div class="basic_search">
            <span>安全监管分类：</span>
            <el-select filterable clearable v-model="listQuery.filter.safetysupervision">
              <el-option
                  v-for="item in safetySuperVisionList"
                  :key="item.id"
                  :label="item.text"
                  :value="item.text"
              ></el-option>
            </el-select>
          </div>
          <div class="basic_search" style="margin-left:10px">
            <span>企业名称：</span>
            <el-input v-model="listQuery.filter.enterprisename" style="width:200px">
            </el-input>
          </div>
          <el-button  type="primary" icon="el-icon-search" @click="queryHandle" />
        </div>
      </div>
      <div class="table_content">
        <el-table
            v-loading="listLoading"
            :key="tableKey"
            :data="superiorDepartmentListData"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
          <el-table-column label="序号" type="index" align="center" width="60"/>
          <el-table-column label="级别" prop="enteenterprisesizerprisename" align="center">
            <template #default="scope">
              <span>{{ scope.row.enterprisename }}</span>
            </template>
          </el-table-column>
          <el-table-column label="机构代码" prop="province" align="center">
          </el-table-column>
          <el-table-column label="机构名字" prop="enterprisename" align="center">
            <template #default="scope">
              <span>{{ scope.row.enterprisesize }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <template #default="scope">
              <!--            <el-button type="text" @click="showEditHandle(scope.row)">编辑</el-button>-->
              <el-button type="text" @click="updatePublicSecurityDepartment('修改',scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <el-pagination
            v-show="recordTotal>0"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            :total="recordTotal"
            layout="total, sizes, prev, pager, next, jumper"
            background
            style="float:right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {computePageCount} from "../../../../utils/licence";
import {  getSuperiorDepartmentList,getCityListData, getProvinceListData } from "../../../../api/monitor/permit";
export default {
  name: "publicSecurityDepartment",
  data(){
    return{
      tableKey:0,
      listLoading:false,
      pageSize: 10,
      recordTotal: 0,
      currentPage: 1,
      pageTotal: 0,
      searchContent:'',
      listQuery:{
        filter: {enterprisename:"",safetysupervision:"",province:"",city:"",district:"",street:""},
        pageIndex: 1,
        pageSize:10
      },
      provinceList:[],
      cityList:[],
      districtList:[],
      streetList:[],
      safetySuperVisionList:[],
      superiorDepartmentVisible:false,
      superiorDepartmentListData:[],
    }
  },
  created(){
    this.getSuperiorDepartmentListData()
    this.getProvince()
  },
  methods:{
    showEnterPrise(value){
      this.superiorDepartmentVisible = true
      this.safetySuperVisionList = value
      this.getSuperiorDepartmentListData()
    },
    async getProvince(){
      let res = await getProvinceListData()
      if(res.code === "200"){
        this.provinceList = res.result.provinceList
      }
    },//获取省

    async changeArea(value){
      if(value === 'province'){
        this.listQuery.filter.city = ''
        this.listQuery.filter.district = ''
        this.listQuery.filter.street = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.listQuery.filter.province,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.cityList = res.result
        }
      }else if(value === 'city'){
        this.listQuery.filter.district = ''
        this.listQuery.filter.street = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.listQuery.filter.city,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.districtList = res.result
        }
      }else if(value === 'district'){
        this.listQuery.filter.street = ''
        this.areaListQuery = {
          type: 4,
          parenttype: 3,
          parentname: this.listQuery.filter.district,
        }
        let res = await getCityListData(this.areaListQuery)
        if(res.code === "200"){
          this.streetList = res.result
        }
      }
    },//市、镇、街道、委员会

    async getSuperiorDepartmentListData(){
      let res = await getSuperiorDepartmentList(this.listQuery)
      if(res.code === "200"){
        this.recordTotal = res.result.total
        this.pageSize = res.result.size
        this.pageTotal = computePageCount(res.result.total, res.result.size)
        this.currentPage = res.result.current
        this.superiorDepartmentListData = res.result.records
      }
    },
    refreshHandle(){

    },
    queryHandle(){
      this.getSuperiorDepartmentListData()
    },
    updatePublicSecurityDepartment(title,value){
      this.$emit('getinfo',value.enterprisename)
      this.superiorDepartmentVisible = false
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getSuperiorDepartmentListData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val
      this.getSuperiorDepartmentListData()
    },
  }
}
</script>

<style scoped>
.basic_search{
  display:inline-block;
}
</style>

 src/views/firework/permit/index.vue

@@ -1,12 +1,1587 @@
<script setup>

</script>

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
          type="primary"
          plain
          icon="Plus"
          style="margin-right: 12px"
          @click="openLicenseForm('新增','')"
      >
        新增
      </el-button>
      <div class="basic_search">
        <span>区域：</span>
        <el-select style="margin-right: 12px" v-model="params.province" clearable filterable
                   @change="changeArea('province')">
          <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
        <el-select style="margin-right: 12px" v-model="params.city" prop="city" clearable filterable
                   @change="changeArea('city')">
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
        <el-select style="margin-right: 12px" v-model="params.district" clearable filterable>
          <el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </div>
      <div class="basic_search">
        <span>创建时间：</span>
        <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="validTime1" type="datetimerange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="basic_search">
        <span>发证时间：</span>
        <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="validTime2" type="datetimerange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="basic_search">
        <span>企业名称：</span>
        <el-input v-model="params.name" style="width: 220px"></el-input>
      </div>
      <div class="basic_search">
        <span>企业类型：</span>
        <el-select filterable clearable v-model="params.type">
          <el-option label="烟花爆竹经营（生产）许可证" value="1">烟花爆竹经营（生产）许可证</el-option>
          <el-option label="烟花爆竹经营（批发）许可证" value="2">烟花爆竹经营（批发）许可证</el-option>
          <el-option label="烟花爆竹经营（长期零售）许可证" value="3">烟花爆竹经营（长期零售）许可证</el-option>
          <el-option label="烟花爆竹经营（短期零售）许可证" value="4">烟花爆竹经营（短期零售）许可证</el-option>
        </el-select>
      </div>
      <div class="basic_search">
        <span>审核状态：</span>
        <el-select filterable clearable v-model="params.reviewstatus">
          <el-option v-for="item in reviewStatusList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </div>
      <div class="basic_search">
        <span>许可证状态：</span>
        <el-select filterable clearable v-model="params.validstatus">
          <el-option v-for="item in validStatusList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </div>
      <div class="basic_search">
        <span>发证类型：</span>
        <el-select filterable clearable v-model="params.licensecode">
          <el-option v-for="item in licenseStatusList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </div>
      <el-button style="margin-left: 10px;" type="primary" @click="searchData()">查询</el-button>
      <el-button type="primary" plain @click="reset()">重置</el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="exportRetail()">零售许可证台账导出</el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="exportWholesale()">批发许可证台账导出</el-button>

    </div>
    <div class="table_content">
      <el-table v-loading="listLoading" :key="tableKey" :data="licenseList" border fit @sort-change="sortChange"
                highlight-current-row style="width: 100%;">
        <el-table-column label="序号" type="index" align="center" width="60"/>
        <el-table-column label="行政区划" prop="province" align="center" sortable="custom">
          <template #default="scope">
            {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.district }}
          </template>
        </el-table-column>
        <el-table-column label="单位名称" prop="name" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="主要负责人" prop="mainpersonname" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="许可证编号" prop="licensecode" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="许可证类型" prop="type" align="center" sortable="custom">
          <template #default="scope">
            <div v-for="item in typeList">
              <div v-if="scope.row.type === item.id">
                {{ item.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发证类型" prop="licensestatus" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="发证日期" prop="issuingdate" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="到期日期" prop="noeffectdate" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="发证机关" prop="issuingunit" align="center" sortable="custom">
        </el-table-column>
        <el-table-column label="审批状态" prop="reviewstatus" align="center" sortable="custom">
          <template #default="scope">
            <div v-for="item in reviewStatusList">
              <div v-if="scope.row.reviewstatus === item.id">
                {{ item.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="许可证状态" prop="validstatus" align="center" sortable="custom">
          <template #default="scope">
            <div v-for="item in validStatusList">
              <div v-if="scope.row.validstatus === item.id">
                {{ item.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="text" @click="commit(scope.row.id)"
                       v-if="isSupervision!=='null' && (scope.row.reviewstatus== 0||scope.row.reviewstatus===3) ?true:false">
              提交
            </el-button>
            <el-button type="text" @click="openLicenseForm('修改',scope.row)" v-if="isSupervision==='null'?false:true">
              修改
            </el-button>
            <el-button type="text" @click="openLicenseForm('审核',scope.row)"
                       v-if="isSupervision ==='null' &&scope.row.reviewstatus !==2&&scope.row.reviewstatus !==3">审核
            </el-button>
            <el-button type="text" @click="refuse(scope.row.id)"
                       v-if="isSupervision ==='null'&&scope.row.reviewstatus !==3">驳回
            </el-button>
            <el-button type="text" @click="deleteById(scope.row.id)" v-if="isSupervision==='null'?false:true">删除
            </el-button>
            <br>
            <el-button type="text" v-print="printObj1" @click="giveData(scope.row)"
                       v-if="isSupervision==='null' && scope.row.reviewstatus === 2?true:false">打印正本（新）
            </el-button>
            <el-button type="text" v-print="printObj2" @click="giveDetail(scope.row)"
                       v-if="isSupervision==='null' && scope.row.reviewstatus === 2?true:false">打印副本（新）
            </el-button>
            <el-button type="text" v-print="printObj3" @click="giveData(scope.row)"
                       v-if="isSupervision==='null' && scope.row.reviewstatus === 2?true:false">打印正本（旧）
            </el-button>
            <el-button type="text" v-print="printObj4" @click="giveDetail(scope.row)"
                       v-if="isSupervision==='null' && scope.row.reviewstatus === 2?true:false">打印副本（旧）
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="其他操作" v-if="isSupervision === 'null'" align="center" width="180"
                         class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="text" v-if="scope.row.reviewstatus === 2"
                       @click="openDelayLicenseDialog(scope.row)">延期
            </el-button>
            <el-button type="text" v-if="scope.row.reviewstatus === 2"
                       @click="openModLicenseDialog(scope.row)">变更
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination v-show="recordTotal>0" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]"
                     :page-size="pageSize" :total="recordTotal" layout="total, sizes, prev, pager, next, jumper"
                     background
                     style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      <br>
    </div>
    <div v-show="false">
      <div id="printMe1">
        <el-row style="height:130px;margin-left:140px;margin-top:197px">
          <el-col :span="3">
            <span style="display: inline-block;font-size: 20px;">统一社会信用代码</span>
          </el-col>
          <el-col :span="15">
            <span style="display: inline-block;font-size: 20px;">&nbsp;&nbsp;{{ code }}</span>
          </el-col>
          <el-col :span="6">
            <div style="width: 40%;height: 40%;margin-left:65px;padding-top: 35px" id="qrcode" ref="qrcode">
            </div>
          </el-col>
        </el-row>
        <el-row style="text-align: center;height:35px;font-size: 20px;margin-top:70px">
          <el-col :span="24">
            <span>编号&emsp;&emsp;</span>
            <span style="display: inline-block">{{ value }}</span>
          </el-col>
        </el-row>
        <el-row style="height:75px;margin-left:140px;margin-top:30px;">
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">企业名称</span>
            <span v-if="type === 3 || type === 4">单位名称</span>
          </el-col>
          <el-col :span="11" style="font-size: 27px">
            <span>{{ name }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">主要负责人</span>
            <span v-if="type === 3 || type === 4">许可类型</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px">
            <span v-if="type === 2">{{ mainpersonname }}</span>
            <span v-if="type === 3 || type === 4">{{ licensetype }}</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
        <el-row style="height:75px;margin-left:140px;">
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">注册地址</span>
            <span v-if="type === 3  || type === 4">主要负责人</span>
          </el-col>
          <el-col :span="11" style="font-size: 27px">
                        <span
                            v-if="type === 2">{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{
                            city
                          }}{{ district }}{{ address }}</span>
            <span v-if="type === 3 || type === 4">{{ mainpersonname }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">库区面积</span>
            <span v-if="type === 3 || type === 4">经营方式</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px">
            <span v-if="type === 2">{{ area }}㎡</span>
            <span v-if="type === 3 || type === 4">{{ dealingtype }}</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
        <el-row style="height:75px;margin-left:140px;">
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">仓储地址</span>
            <span v-if="type === 3 || type === 4">单位地址</span>
          </el-col>
          <el-col :span="11" style="font-size: 27px">
                        <span
                            v-if="type === 2">{{
                            storageprovince === "新疆维吾尔自治区" ? "新疆" : storageprovince
                          }}{{ storagecity }}{{ storagedistrict }}{{ storageaddress }}</span>
            <span
                v-if="type === 3 || type === 4">{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{
                city
              }}{{ district }}{{ address }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">库房面积</span>
            <span v-if="type === 3 || type === 4">经营面积</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px">
            <span v-if="type === 2">{{ storagearea }}㎡</span>
            <span v-if="type === 3 || type === 4">{{ area }}㎡</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
        <el-row style="height:100px;margin-left:140px;">
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span>许可范围</span>
          </el-col>
          <el-col :span="11" style="font-size: 22px;padding-right: 80px;">
            <span>{{ dealingrange }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span v-if="type === 2">核定药量</span>
            <span v-if="type === 3 || type === 4">核定储量</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px;">
            <span>{{ powder }}kg</span>
            <span>（{{ reservebox }}箱）</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
        <el-row style="height:40px;margin-left:140px;">
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span>有效期</span>
          </el-col>
          <el-col :span="4" style="font-size: 27px">
            <span>{{ effectdate }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 27px;font-weight: bold">
            <span>至</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px">
            <span>{{ noeffectdate }}</span>
          </el-col>
          <el-col :span="11" style="font-size: 27px">
            <span></span>
          </el-col>
          <!--                    <el-col :span="8"  style="font-size: 27px;margin-top:38px;">-->
          <!--                        <span>{{issuingunit}}</span>-->
          <!--                    </el-col>-->
        </el-row>
        <el-row style="height:60px;margin-left:140px;">
          <el-col :span="14" style="font-size: 1px">
            <span>{{ "." }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span>发证机关</span>
          </el-col>
          <el-col :span="5" style="font-size: 27px;">
            <span>{{ issuingunit }}</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
        <el-row style="height:60px;margin-left:140px;">
          <el-col :span="14" style="font-size: 1px">
            <span>{{ "." }}</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;font-weight: bold">
            <span>发证日期</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span>{{ year }}</span>
            <span style="font-size: 27px;font-weight: bold">&nbsp;年</span>
          </el-col>
          <el-col :span="3" style="font-size: 27px;">
            <span>{{ month }}</span>
            <span style="font-size: 27px;font-weight: bold">月</span>
            <span>&nbsp;{{ day }}</span>
            <span style="font-size: 27px;font-weight: bold">日</span>
          </el-col>
          <el-col :span="2" style="font-size: 27px;">
            <span></span>
          </el-col>
        </el-row>
      </div>
    </div>


    <div v-show="false">
      <div id="printMe2">
        <el-row>
          <el-col :span="7" style="margin-top:670px;margin-left: 80px">
            <el-row style="height: 60px;">
              <el-col :span="6" style="font-weight: bold;">
                <span v-if="type === 2">企业名称</span>
                <span v-if="type === 3">单位名称</span>
              </el-col>
              <el-col :span="18">
                {{ name }}
              </el-col>
            </el-row>
            <el-row style="height: 60px;margin-top: 4px">
              <el-col :span="6" style="font-weight: bold;">
                <span v-if="type === 2">注册地址</span>
                <span v-if="type === 3">主要负责人</span>
              </el-col>
              <el-col :span="18">
                                <span
                                    v-if="type === 2">{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{
                                    city
                                  }}{{ district }}{{ address }}</span>
                <span v-if="type === 3">{{ mainpersonname }}</span>
              </el-col>
            </el-row>
            <el-row style="height: 60px;margin-top: 4px">
              <el-col :span="6" style="font-weight: bold;">
                <span></span>
                <span v-if="type === 2">仓储地址</span>
                <span v-if="type === 3">单位地址</span>
              </el-col>
              <el-col :span="18">
                                <span
                                    v-if="type === 2">{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{
                                    city
                                  }}{{ storagedistrict }}{{ storageaddress }}</span>
                <span
                    v-if="type === 3">{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{ city }}{{
                    district
                  }}{{ address }}</span>
              </el-col>
            </el-row>
            <el-row style="height: 60px;margin-top: 4px">
              <el-col :span="6" style="font-weight: bold;">
                <span>许可范围</span>
              </el-col>
              <el-col :span="18">
                {{ dealingrange }}
              </el-col>
            </el-row>
            <el-row style="height: 60px;margin-top: 4px">
              <el-col :span="6" style="font-weight: bold;">
                <span>有效期</span>
              </el-col>
              <el-col :span="8">
                {{ (effectdate) }}
              </el-col>
              <el-col :span="2" style="font-weight: bold">至</el-col>
              <el-col :span="7">
                {{ (noeffectdate) }}
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="13" style="margin-top: 385px;">
            <el-row>

              <el-col :span="10">
                <el-row>
                  <el-col :span="10">
                    <span>编号</span>
                  </el-col>
                  <el-col :span="14">
                    <span>{{ value }}</span>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 17px;">
                  <el-col :span="10">
                    <span>统一社会信用代码</span>
                  </el-col>
                  <el-col :span="14">
                    <span>{{ code }}</span>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="10">
                <div style="width:20px;height:20px;margin-top: 14px;margin-left: 28px" class="qrcode"
                     id="qrcode2" ref="qrcode"></div>
              </el-col>
            </el-row>

            <el-row style="margin-top: 92px;padding-left: 120px">
              <el-col :span="4" style="font-weight: bold;">
                <span v-if="type === 2">主要负责人</span>
                <span v-if="type === 3 || type === 4">许可类型</span>
              </el-col>
              <el-col :span="8">
                <span v-if="type === 2">{{ mainpersonname }}</span>
                <span v-if="type === 3 || type === 4">{{ licensetype }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 48px;margin-left: 120px;">
              <el-col :span="4" style="font-weight: bold;">
                <span v-if="type === 2">库区面积</span>
                <span v-if="type === 3">经营方式</span>

              </el-col>
              <el-col :span="8">
                <span v-if="type === 2">{{ area }}㎡</span>
                <span v-if="type === 3">{{ dealingtype }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 48px;margin-left: 120px;">
              <el-col :span="4" style="font-weight: bold;">
                <span v-if="type === 2">库房面积</span>
                <span v-if="type === 3">经营面积</span>
              </el-col>
              <el-col :span="8">
                <span v-if="type === 2">{{ storagearea }}㎡</span>
                <span v-if="type === 3">{{ area }}㎡</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 48px;margin-left: 120px;">
              <el-col :span="4" style="font-weight: bold;">
                <span v-if="type === 2">核定药量</span>
                <span v-if="type === 3">核定储量</span>
              </el-col>
              <el-col :span="8">
                <span>{{ powder }}kg</span>
                <span>（{{ reservebox }}箱）</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 150px;margin-left: 120px;">
              <el-col :span="4" style="font-weight: bold;">
                <span>发证机关</span>
              </el-col>
              <el-col :span="8">
                {{ issuingunit }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 30px;margin-left: 120px">
              <el-col :span="4" style="font-weight: bold;">
                <span>发证日期</span>
              </el-col>
              <el-col :span="3">
                <span>{{ year }}&emsp;</span>
                <span style="font-weight: bold;">年</span>
              </el-col>
              <el-col :span="3">
                <span>{{ month }}</span>
                <span style="font-weight: bold;">月</span>
                <span>&nbsp;{{ day }}</span>
                <span style="font-weight: bold;">日</span>
              </el-col>

            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-show="false">
      <div id="printMe3">
        <el-row style="height:130px;margin-left:320px;padding-top:95px;padding-bottom: 95px">
          <el-col :span="18">
            <span style="display: inline-block;font-size: 25px;"></span>
          </el-col>
          <el-col :span="6">
            <div style="width: 40%;height: 40%;margin-left:20%;padding-top: 10px" id="qrcode3"
                 ref="qrcode"/>
          </el-col>
        </el-row>
        <el-row style="height:50px;font-size: 20px;margin-top:280px;margin-left:1050px;">
          <el-col :span="24">
            <span style="display: inline-block">{{ value }}</span>
          </el-col>
        </el-row>
        <el-row style="height:60px;margin-left:470px;margin-top:28px;">
          <el-col :span="13" style="font-size: 22px">
            <span>{{ name }}</span>
          </el-col>
          <el-col :span="8" style="font-size: 22px;padding-left: 50px">
            <span>{{ mainpersonname }}</span>
          </el-col>
        </el-row>
        <el-row style="height:80px;margin-left:470px;">
          <el-col :span="13" style="font-size: 22px;height: 90px;padding-right: 200px;">
            <span>{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{ city }}{{ district }}{{ address }}</span>
          </el-col>
          <!--<el-col :span="8"  style="font-size: 27px">
              <span>{{area}}㎡</span>
          </el-col>-->
          <el-col :span="7" style="font-size: 22px;padding-left: 50px;padding-top: 10px">
            <span>{{ economictype }}</span>
          </el-col>
        </el-row>
        <!--<el-row style="height:60px;margin-left:290px;">
            <el-col :span="16"  style="font-size: 27px">
                <span>{{storageaddress}}</span>
            </el-col>
            <el-col :span="8"  style="font-size: 27px">
                <span>{{storagearea}}㎡</span>
            </el-col>
        </el-row>-->
        <el-row style="height:100px;margin-left:470px;">
          <el-col :span="13" style="font-size: 22px;padding-right: 200px;">
            <span>{{ dealingrange }}</span><br>
            <span>核定药量：{{ powder }}kg</span>
            <span>（{{ reservebox }}箱）</span>
          </el-col>
          <el-col :span="8" style="font-size: 22px;padding-left: 50px;height: 80px">
            <span>{{ storageprovince === "新疆维吾尔自治区" ? "新疆" : storageprovince }}{{
                storagecity
              }}{{ storagedistrict }}{{ storageaddress }}</span><br>
            <span>库区面积{{ area }}㎡</span>；
            <span>库房面积{{ storagearea }}㎡</span>
          </el-col>
          <!--<el-col :span="8"  style="font-size: 27px;margin-top:20px;">
              <span>{{powder}}kg</span>
          </el-col>-->
        </el-row>
        <el-row style="height:80px;margin-left:400px;">
          <el-col :span="10" style="font-size: 1px">
            <span>.</span>
          </el-col>
          <el-col :span="7" style="font-size: 18px;margin-top:24px;padding-left: 180px;">
            <span>{{ issuingunit }}</span>
          </el-col>
        </el-row>
        <el-row style="height:75px;margin-left:290px;">
          <el-col :span="2" style="font-size: 22px;margin-top: 15px;margin-left:45px">
            <span>{{ year1 }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:0px">
            <span>{{ month1 }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:20px">
            <span>{{ day1 }}</span>
          </el-col>
          <el-col :span="2" style="font-size: 22px;margin-top: 15px;margin-left:40px">
            <span>{{ year2 }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:7px">
            <span>{{ month2 }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:20px">
            <span>{{ day2 }}</span>
          </el-col>
          <el-col :span="2" style="font-size: 22px;margin-top: 15px;margin-left:210px">
            <span>{{ year }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:35px">
            <span>{{ month }}</span>
          </el-col>
          <el-col :span="1" style="font-size: 22px;margin-top: 15px;margin-left:35px">
            <span>{{ day }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-show="false">
      <div id="printMe4">
        <el-row>
          <el-col :span="8" style="margin-top:666px;margin-left: 170px">
            <el-row>
              <el-col :span="24" style="margin-top: 140px;margin-left: 70px">
                {{ value }}
              </el-col>
              <el-col :span="8" style="margin-top: 38px;margin-left: 70px;height: 60px">
                {{ issuingunit }}
              </el-col>
              <el-col style="margin-left: 70px">
                <el-col :span="2" style="margin-top: 17px;">
                  <span>{{ year }}</span>
                </el-col>
                <el-col :span="1" style="margin-top: 17px;margin-left:18px">
                  <span>{{ month }}</span>
                </el-col>
                <el-col :span="1" style="margin-top: 17px;margin-left:20px">
                  <span>{{ day }}</span>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12" style="margin-top: 386px;">
            <el-row style="margin-left: 225px">
              <el-col :span="8">
                <div style="width:20px;height:20px;" class="qrcode" id="qrcode4" ref="qrcode"/>
              </el-col>
            </el-row>
            <el-row style="margin-top: 58px;margin-left: 75px;padding-top: 20px;">
              <el-col :span="8">
                {{ name }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 38px;margin-left: 75px">
              <el-col :span="8">
                {{ mainpersonname }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 50px;margin-left: 75px;height: 35px">
              <el-col :span="8">
                <span>{{ province === "新疆维吾尔自治区" ? "新疆" : province }}{{ city }}{{ district }}{{
                    address
                  }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 22px;margin-left: 75px">
              <el-col :span="8">
                {{ economictype }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 15px;margin-left: 75px;height: 35px">
              <el-col :span="8">
                <span>{{ storageprovince === "新疆维吾尔自治区" ? "新疆" : storageprovince }}{{
                    storagecity
                  }}{{ storagedistrict }}{{ storageaddress }}</span><br>
                <span>库区面积{{ area }}㎡</span>；
                <span>库房面积{{ storagearea }}㎡</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 60px;margin-left: 75px;height: 80px">
              <el-col :span="8">
                <span>{{ dealingrange }}</span><br>
                <span>核定药量：{{ powder }}kg</span>
                <span>（{{ reservebox }}箱）</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 89px;margin-left: 8px">
              <el-col :span="2" style="font-size: 16px;margin-left:5px">
                <span>{{ year1 }}</span>
              </el-col>
              <el-col :span="1" style="font-size: 16px;margin-left:0px">
                <span>{{ month1 }}</span>
              </el-col>
              <el-col :span="1" style="font-size: 16px;margin-left:1px">
                <span>{{ day1 }}</span>
              </el-col>
              <el-col :span="1" style="font-size: 16px;margin-left:17px">
                <span>{{ year2 }}</span>
              </el-col>
              <el-col :span="1" style="font-size: 16px;margin-left:22px">
                <span>{{ month2 }}</span>
              </el-col>
              <el-col :span="1" style="font-size: 16px;margin-left:5px">
                <span>{{ day2 }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog :visible.sync="refuseVisible" append-to-body :close-on-click-modal="false" width="30%">
      <el-form ref="refuseForm" :model="refuseForm" label-position="right" label-width="80px">
        <el-form-item label="驳回理由:" prop="name">
          <el-input type="textarea" :rows="2" v-model="refuseForm.rejectnote"/>
        </el-form-item>
      </el-form>
      <div align="right">
        <el-button type="primary" @click="submitRefuse()">确认</el-button>
      </div>
    </el-dialog>
    <license-info-form ref="addFormRef" @getinfo="getLicenseListData"></license-info-form>
    <license-delay-form ref="delay-form" @getinfo="getLicenseListData"></license-delay-form>
    <license-mod-form ref="mod-form" @getinfo="getLicenseListData"></license-mod-form>
  </div>
</template>

<style scoped lang="scss">
<script>
import {
  computePageCount,
  formatDateDay
} from '../../../utils/licence'
import {
  getLicenseList,
  getExportLicense,
  reviewLicenseInfo,
  deleteById,
  deleteCertificate,
  getCityListData,
  getProvinceListData,
  refuseLicense
} from "../../../api/monitor/permit";
import Cookies from "js-cookie";
import XLSX from 'xlsx-js-style';
// import QRCode from "qrcodejs2";
import LicenseInfoForm from "./components/licenseInfoForm";
import LicenseDelayForm from "./components/licenseDelayForm"
import LicenseModForm from "./components/licenseModForm"
import {ElMessage} from "element-plus";

export default {
  name: "carrier",
  data() {
    return {
      cityList: [],
      provinceList: [],
      districtList: [],
      streetList: [],
      committeeList: [],
      validTime1: [],
      validTime2: [],
      refuseVisible: false,
      enterprisenumber: '',
      value: '',
      code: '',
      name: '',
      mainpersonname: '11',
      province: '',
      city: '',
      district: '',
      address: '',
      area: '',
      storageaddress: '',
      storagearea: '',
      storageprovince: '',
      storagecity: '',
      storagedistrict: '',
      economictype: '',
      dealingrange: '',
      reservebox: '',
      powder: '',
      effectdate: '',
      noeffectdate: '',
      issuingunit: '',
      year: '',
      month: '',
      day: '',
      year1: '',
      month1: '',
      day1: '',
      year2: '',
      month2: '',
      day2: '',
      type: '',
      licensetype: '',
      dealingtype: '',
      tableKey: 0,
      listLoading: false,
      approveVisible: false,
      pageSize: 10,
      recordTotal: 0,
      currentPage: 1,
      pageTotal: 0,
      ruleForm: {},
      isSupervision: '',
      roleType: '',
      params: {
        pageIndex: 1,
        pageSize: 10,
        sort: '',
        order: "ASC",
        name: '',
        type: '',
        province: '',
        city: '',
        district: '',
        starttime1: '',
        endtime1: '',
        starttime2: '',
        endtime2: '',
        reviewstatus: '',
        validstatus: '',
        licensecode: '',
      },
      dataForm: {
        signperson: '',
        issueperson: '',
        issuepersonphone: '',
        id: '',
      },
      listQuery: {
        filter: {
          code: "",
          page: "approve",
        },
        pageIndex: 1,
        pageSize: 100,
      },
      refuseForm: {
        id: '',
        rejectnote: '',
      },
      searchContent: '',
      licenseList: [],
      reviewStatusList: [{
        id: 0,
        name: '等待提交'
      },
        {
          id: 1,
          name: '等待审核'
        },
        {
          id: 2,
          name: '审核通过'
        },
        {
          id: 3,
          name: '审核驳回'
        },
      ],
      licenseStatusList: [{
        id: 'NEW',
        name: '新发'
      },
        {
          id: 'POSTP',
          name: '延期'
        },
        {
          id: 'MOD',
          name: '变更'
        },
      ],
      validStatusList: [{
        id: -1,
        name: '已注销'
      },
        {
          id: 1,
          name: '有效'
        },
        {
          id: -2,
          name: '已过期'
        }
      ],
      typeList: [{
        id: 1,
        name: '烟花爆竹经营（生产）许可证'
      },
        {
          id: 2,
          name: '烟花爆竹经营（批发）许可证'
        },
        {
          id: 3,
          name: '烟花爆竹经营（长期零售）许可证'
        },
        {
          id: 4,
          name: '烟花爆竹经营（短期零售）许可证'
        }
      ],
      licensetypeList: [{
        id: 1,
        name: '长期'
      },
        {
          id: 2,
          name: '临时'
        }
      ],
      dealingtypeList: [{
        id: 1,
        name: '专柜'
      },
        {
          id: 2,
          name: '专店'
        }
      ],
      printObj1: {
        id: 'printMe1',
        extraHead: '<meta  http-equiv="Content-Language" content="zh-cn"/>'
      },
      printObj2: {
        id: 'printMe2',
        extraHead: '<meta  http-equiv="Content-Language" content="zh-cn"/>'
      },
      printObj3: {
        id: 'printMe3',
        extraHead: '<meta  http-equiv="Content-Language" content="zh-cn"/>'
      },
      printObj4: {
        id: 'printMe4',
        extraHead: '<meta  http-equiv="Content-Language" content="zh-cn"/>'
      },
    }
  },
  components: {
    LicenseInfoForm,
    LicenseDelayForm,
    LicenseModForm
  },
  created() {
    this.isSupervision = Cookies.get('isSupervision')
    this.roleType = Cookies.get('roleType')
    this.getProvince()
    this.getLicenseListData()
    console.log(this.isSupervision, this.roleType, 6666666666)
  },

  methods: {
    giveDetail(val) {
      console.log(val)
      this.code = val.code
      this.name = val.name
      this.mainpersonname = val.mainpersonname
      this.province = val.province
      this.city = val.city
      this.district = val.district
      this.address = val.address
      if (val.type === 2) {
        if (JSON.parse(val.licenseStorage)[0] && JSON.parse(val.licenseStorage)[0].area) {
          this.area = JSON.parse(val.licenseStorage)[0].area
        } else {
          this.area = 0
        }
        this.storagearea = JSON.parse(val.licenseStorage)[0].storagearea
        this.powder = JSON.parse(val.licenseStorage)[0].powder
      } else if (val.type === 3 || val.type === 4) {
        this.area = val.dealingarea
        this.powder = val.reservekg
        if (val.licensetype === 1) {
          this.licensetype = '长期零售'
        } else {
          this.licensetype = '短期零售'
        }
        if (val.dealingtype === 2 || val.dealingtype === 4) {
          this.dealingtype = '专店'
        } else {
          this.dealingtype = '专柜'
        }
      }

      this.reservebox = val.reservebox
      this.storageaddress = val.storageaddress
      this.storageprovince = val.storageprovince
      this.storagecity = val.storagecity
      this.storagedistrict = val.storagedistrict
      //带出口的特殊情况
      if (val.remark.indexOf("批发出口") != -1) {
        this.dealingrange = val.dealingRangeStr + " （批发出口） ★★★"
      } else {
        this.dealingrange = val.dealingRangeStr + "  ★★★"
      }
      // 乌鲁木齐局临时自定义许可范围
      // this.dealingrange="烟花类（C级、D级）、爆竹类（C级）、喷花类（C级、D级）、旋转类（C级、D级）、吐珠类（C级）、玩具类（C级、D级）、组合烟花类（C级、D级），储存能力76吨；烟花类储存（A类储存能力2吨、B类储存能力5吨，仅限于储存，储存库为4号库）  ★★★"

      this.effectdate = formatDateDay(val.effectdate)
      this.noeffectdate = formatDateDay(val.noeffectdate)
      this.issuingunit = val.issuingunit
      this.value = val.licensecode
      this.type = val.type
      this.enterprisenumber = val.enterprisenumber
      this.year = val.issuingdate.split('-')[0]
      this.month = val.issuingdate.split('-')[1]
      this.day = val.issuingdate.split('-')[2]
      this.year1 = val.effectdate.split('-')[0]
      this.month1 = val.effectdate.split('-')[1]
      this.day1 = val.effectdate.split('-')[2]
      this.year2 = val.noeffectdate.split('-')[0]
      this.month2 = val.noeffectdate.split('-')[1]
      this.day2 = val.noeffectdate.split('-')[2]
      this.economictype = val.economictype
      this.$nextTick(() => {
        this.qrcode()
      })
    },
    //打印正本
    giveData(val) {
      console.log(JSON.parse(val.licenseStorage)[0], '>>>>')
      this.code = val.code
      this.name = val.name
      this.mainpersonname = val.mainpersonname
      this.province = val.province
      this.city = val.city
      this.district = val.district
      this.address = val.address
      if (val.type === 2) {
        if (JSON.parse(val.licenseStorage)[0]) {
          this.area = JSON.parse(val.licenseStorage)[0].area
          this.storagearea = JSON.parse(val.licenseStorage)[0].storagearea
          this.powder = JSON.parse(val.licenseStorage)[0].powder
        } else {
          this.area = 0
          this.storagearea = 0
          this.powder = 0
        }
        // this.storagearea = JSON.parse(val.licenseStorage)[0].storagearea
        // this.powder = JSON.parse(val.licenseStorage)[0].powder
      } else if (val.type === 3 || val.type === 4) {
        this.area = val.dealingarea
        this.powder = val.reservekg
        if (val.licensetype === 1) {
          this.licensetype = '长期零售'
        } else {
          this.licensetype = '短期零售'
        }
        if (val.dealingtype === 2 || val.dealingtype === 4) {
          this.dealingtype = '专店'
        } else {
          this.dealingtype = '专柜'
        }
      }

      this.storageaddress = val.storageaddress
      this.storageprovince = val.storageprovince
      this.storagecity = val.storagecity
      this.storagedistrict = val.storagedistrict
      // 带出口的特殊情况
      if (val.remark.indexOf("批发出口") != -1) {
        this.dealingrange = val.dealingRangeStr + " （批发出口） ★★★"
      } else {
        this.dealingrange = val.dealingRangeStr + "  ★★★"
      }
      // 乌鲁木齐局临时自定义许可范围
      // this.dealingrange="烟花类（C级、D级）、爆竹类（C级）、喷花类（C级、D级）、旋转类（C级、D级）、吐珠类（C级）、玩具类（C级、D级）、组合烟花类（C级、D级），储存能力76吨；烟花类储存（A类储存能力2吨、B类储存能力5吨，仅限于储存，储存库为4号库）  ★★★"

      this.reservebox = val.reservebox
      this.effectdate = formatDateDay(val.effectdate)
      this.noeffectdate = formatDateDay(val.noeffectdate)
      this.issuingunit = val.issuingunit
      this.value = val.licensecode
      this.type = val.type
      this.enterprisenumber = val.enterprisenumber
      this.year = val.issuingdate.split('-')[0]
      this.month = val.issuingdate.split('-')[1]
      this.day = val.issuingdate.split('-')[2]
      this.year1 = val.effectdate.split('-')[0]
      this.month1 = val.effectdate.split('-')[1]
      this.day1 = val.effectdate.split('-')[2]
      this.year2 = val.noeffectdate.split('-')[0]
      this.month2 = val.noeffectdate.split('-')[1]
      this.day2 = val.noeffectdate.split('-')[2]
      this.economictype = val.economictype
      this.$nextTick(() => {
        this.qrcode()
      })
    },
    qrcode() {
      if (this.enterprisenumber != '') {
        document.getElementById("qrcode").innerHTML = ""
        let qrcode = new QRCode('qrcode', {
          width: 125,
          height: 125, // 高度
          text: this.enterprisenumber, // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f', // 背景色
          // foreground: '#ff0'    // 前景色

        })

        document.getElementById("qrcode2").innerHTML = ""
        let qrcode2 = new QRCode('qrcode2', {
          width: 90,
          height: 90, // 高度
          text: this.enterprisenumber, // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f', // 背景色
          // foreground: '#ff0'    // 前景色

        })

        document.getElementById("qrcode3").innerHTML = ""
        let qrcode3 = new QRCode('qrcode3', {
          width: 125,
          height: 125, // 高度
          text: this.enterprisenumber, // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f', // 背景色
          // foreground: '#ff0'    // 前景色

        })

        document.getElementById("qrcode4").innerHTML = ""
        let qrcode4 = new QRCode('qrcode4', {
          width: 75,
          height: 75, // 高度
          text: this.enterprisenumber, // 二维码内容
          // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          background: '#f0f', // 背景色
          // foreground: '#ff0'    // 前景色

        })
      }
    },
    async getLicenseListData() {
      this.listLoading = true
      if (this.validTime1 != null && this.validTime1.length > 0) {
        this.params.starttime1 = this.validTime1[0]
        this.params.endtime1 = this.validTime1[1]
      } else {
        this.params.starttime1 = ''
        this.params.endtime1 = ''

      }

      if (this.validTime2 != null && this.validTime2.length > 0) {
        this.params.starttime2 = this.validTime2[0]
        this.params.endtime2 = this.validTime2[1]
      } else {
        this.params.starttime2 = ''
        this.params.endtime2 = ''
      }

      let res = await getLicenseList(this.params)
      if (res.code === "200") {
        this.recordTotal = res.result.totalCount
        this.pageSize = res.result.pageSize
        this.pageTotal = computePageCount(res.result.totalCount, res.result.pageSize)
        this.currentPage = res.result.current
        this.licenseList = res.result.result
      }
      this.listLoading = false
    },
    openLicenseForm(title, value) {
      this.$refs.addFormRef.showLicenseForm(title, value, this.isSupervision, this.roleType)
    },
    searchData() {
      this.params.pageIndex = 1
      this.getLicenseListData()
    },
    reset() {
      this.params = {
        pageIndex: 1,
        pageSize: 10,
        sort: '',
        order: "ASC",
        name: '',
        type: '',
        province: '',
        city: '',
        district: '',
        starttime1: '',
        endtime1: '',
        starttime2: '',
        endtime2: '',
        reviewstatus: '',
        validstatus: '',
        licensecode: '',
      }
      this.validTime1 = []
      this.validTime2 = []
      this.getLicenseListData()
    },
    handleSizeChange: function (val) {
      this.params.pageSize = val
      this.getLicenseListData()
    },
    handleCurrentChange: function (val) {
      this.params.pageIndex = val
      this.getLicenseListData()
    },
    commit(val) {
      this.$confirm('提交此条信息，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        reviewLicenseInfo({
          id: val,
          reviewstatus: 1
        }).then(() => {
          this.getLicenseListData()
          this.$notify({
            title: '成功',
            message: '提交成功',
            type: 'success',
            duration: 2000,
          })
        }).catch(error => {
          ElMessage.warning(error)
        })
      })
    },
    //删除
    deleteById(val) {
      this.$confirm('删除此条信息，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteById(val).then(response => {
          const res = response.data;

          if (res.code === "200") {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getLicenseListData()
          } else {
            ElMessage.warning(res.message)
          }
        }).catch(error => {
          ElMessage.warning(error)
        })
      })
    },
    sortChange() {

    },
    //获取地区
    async changeArea(value) {
      if (value === 'province') {
        this.params.city = ''
        this.params.district = ''
        this.areaListQuery = {
          type: 2,
          parenttype: 1,
          parentname: this.params.province,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.cityList = res.result
        }
      } else if (value === 'city') {
        this.params.district = ''
        this.areaListQuery = {
          type: 3,
          parenttype: 2,
          parentname: this.params.city,
        }
        let res = await getCityListData(this.areaListQuery)
        if (res.code === "200") {
          this.districtList = res.result
        }
      }
    }, //市、镇、街道、委员会
    async getProvince() {
      let res = await getProvinceListData()
      if (res.code === "200") {
        this.provinceList = res.result.provinceList
      }
    },

    async exportRetail() {
      let params = {
        ...this.params
      }
      params.type = 3
      params.reviewstatus = 2
      const res = await getExportLicense(params)
      if (res.code == '200') {
        if(res.result && res.result.length>0){
          let mainData = res.result
          const data = mainData.map((item,index)=>{
            return [
              item.licensecode,
              item.issuingunit,
              item.issuingcode,
              item.mainpersonname,
              '自然人',
              '身份证',
              item.mainpersonidcardnum,
              item.issuingdate,
              item.effectdate,
              item.noeffectdate,
              item.effectdate,
              item.address,
              item.issuingdate,
              item.code,
              item.reservekg,
              item.noeffectdate,
              item.licensecode,
              this.licensetypeList.filter(it => it.id === item
                  .licensetype).name,
              item.dealingRangeStr,
              item.dealingarea,
              item.mainpersonname,
              item.issuingunit,
              item.name,
              this.dealingtypeList.filter(it => it.id === item
                  .dealingtype).name
            ]
          })
          console.log(data,'data')
          // 定义表头
          const headers = [
            ['证照编号',
              '颁发单位',
              '颁发单位统一社会信用代码',
              '持有人姓名',
              '持有人类型',
              '持有人证件类型',
              '持有人证件号码',
              '颁证日期',
              '有效期（起始）',
              '有效期（截止）',
              '有效期起',
              '单位地址',
              '发证日期',
              '统一社会信用代码',
              '核定储量',
              '有效期至',
              '编号',
              '许可类型',
              '许可范围',
              '经营面积',
              '主要负责人',
              '发证机关',
              '单位名称',
              '经营方式']
          ]
          // 创建工作表
          const ws = XLSX.utils.aoa_to_sheet([
            ...headers,      // 表头
            ...data,         // 数据
          ])
          const dataRowCount = data.length;
          const totalRows = dataRowCount + 1; // 标题、固定行和数据行的总数
          // 设置列宽，计算每列的最大宽度
          const MIN_COL_WIDTH = 40;
          const colWidths = [];
          for (let c = 0; c < 24; c++) {
            let maxLength = 0;
            // 计算每列最大单元格内容长度
            for (let r = 0; r < totalRows; r++) {
              const cellRef = `${String.fromCharCode(65 + c)}${r + 1}`; // 获取每个单元格的引用
              const cell = ws[cellRef];
              if (cell && cell.v) {
                if(cell.v == '序号'){
                  maxLength = 1
                }else {
                  maxLength = Math.max(maxLength, cell.v.toString().length);
                }

              }
            }
            // 根据最大长度设置列宽，添加额外的空间
            colWidths[c] = { wpx: Math.max(maxLength * 15, MIN_COL_WIDTH) }; // 你可以根据需要调整乘数
          }
          // 设置工作表的列宽
          ws['!cols'] = colWidths;
          // 设置行高，统一调整上下间距
          const rowHeight = 24; // 设置每一行的行高（可以根据需要调整）
          for (let r = 0; r < totalRows; r++) {
            ws['!rows'] = ws['!rows'] || [];
            ws['!rows'][r] = { hpx: rowHeight };  // 设置行高，单位是像素
          }
          // 创建工作簿
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
          // 使用 Blob 和 URL 触发文件下载
          const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
          const blob = new Blob([wbout], { type: 'application/octet-stream' })
          const url = URL.createObjectURL(blob)
          // 创建下载链接并触发下载
          const a = document.createElement('a')
          a.href = url;
          a.download = '烟花爆竹经营(零售)许可证台账.xlsx'  // 设置下载文件名
          document.body.appendChild(a)
          a.click();
          document.body.removeChild(a)
          // 释放 URL 对象
          URL.revokeObjectURL(url)
        }else{
          this.$message({
            type: 'warning',
            message: '无数据可导出'
          })
        }
      } else {
        ElMessage.warning(res.msg)
      }
    },

    async exportWholesale() {
      let params = {
        ...this.params
      }
      params.type = 2
      params.reviewstatus = 2
      const res = await getExportLicense(params)
      if (res.code == '200') {
        if(res.result && res.result.length>0){
          let mainData = res.result
          const data = mainData.map((item,index)=>{
            return [
              item.licensecode,
              item.issuingunit,
              item.issuingcode,
              item.mainpersonname,
              '自然人',
              '身份证',
              item.mainpersonidcardnum,
              item.issuingdate,
              item.effectdate,
              item.noeffectdate,
              item.dealingRangeStr,
              item.mainpersonname,
              [item.province, item.city, item.district].join(
                  "-"),
              eval(item.licenseStorage).reduce((sum, e) =>
                  sum + Number(e.area || 0), 0),
              item.address,
              item.issuingdate,
              item.licensecode,
              item.name,
              item.noeffectdate,
              item.reservekg,
              item.code,
              item.effectdate,
              eval(item.licenseStorage).reduce((sum, e) =>
                  sum + Number(e.storagearea || 0), 0),
              item.issuingunit
            ]
          })
          console.log(data,'data')
          // 定义表头
          const headers = [
            ['证照编号',
              '颁发单位',
              '颁发单位统一社会信用代码',
              '持有人姓名',
              '持有人类型', //自然人
              '持有人证件类型',
              '持有人证件号码',
              '颁证日期',
              '有效期（起始）',
              '有效期（截止）',
              '许可范围',
              '主要负责人',
              '仓储地址',
              '库区面积',
              '注册地址',
              '发证日期',
              '编号',
              '企业名称',
              '有效期至',
              '核定药量',
              '统一社会信用代码',
              '有效期起',
              '库房面积',
              '发证机关']
          ]
          // 创建工作表
          const ws = XLSX.utils.aoa_to_sheet([
            ...headers,      // 表头
            ...data,         // 数据
          ])
          const dataRowCount = data.length;
          const totalRows = dataRowCount + 1; // 标题、固定行和数据行的总数
          // 设置列宽，计算每列的最大宽度
          const MIN_COL_WIDTH = 40;
          const colWidths = [];
          for (let c = 0; c < 24; c++) {
            let maxLength = 0;
            // 计算每列最大单元格内容长度
            for (let r = 0; r < totalRows; r++) {
              const cellRef = `${String.fromCharCode(65 + c)}${r + 1}`; // 获取每个单元格的引用
              const cell = ws[cellRef];
              if (cell && cell.v) {
                if(cell.v == '序号'){
                  maxLength = 1
                }else {
                  maxLength = Math.max(maxLength, cell.v.toString().length);
                }

              }
            }
            // 根据最大长度设置列宽，添加额外的空间
            colWidths[c] = { wpx: Math.max(maxLength * 15, MIN_COL_WIDTH) }; // 你可以根据需要调整乘数
          }
          // 设置工作表的列宽
          ws['!cols'] = colWidths;
          // 设置行高，统一调整上下间距
          const rowHeight = 24; // 设置每一行的行高（可以根据需要调整）
          for (let r = 0; r < totalRows; r++) {
            ws['!rows'] = ws['!rows'] || [];
            ws['!rows'][r] = { hpx: rowHeight };  // 设置行高，单位是像素
          }
          // 创建工作簿
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "Sheet1")
          // 使用 Blob 和 URL 触发文件下载
          const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
          const blob = new Blob([wbout], { type: 'application/octet-stream' })
          const url = URL.createObjectURL(blob)
          // 创建下载链接并触发下载
          const a = document.createElement('a')
          a.href = url;
          a.download = '烟花爆竹经营(批发)许可证台账.xlsx'  // 设置下载文件名
          document.body.appendChild(a)
          a.click();
          document.body.removeChild(a)
          // 释放 URL 对象
          URL.revokeObjectURL(url)
        }else{
          this.$message({
            type: 'warning',
            message: '无数据可导出'
          })
        }
      } else {
        ElMessage.warning(res.msg)
      }
    },

    refuse(val) {
      this.refuseForm.id = val
      this.refuseVisible = true
    },
    submitRefuse() {
      refuseLicense(this.refuseForm).then((res) => {
        if (res.code === '200') {
          this.getLicenseListData()
          this.refuseVisible = false
          this.$notify({
            title: '成功',
            duration: 2000,
            message: '驳回成功',
            type: 'success'
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      })
    },
    openDelayLicenseDialog(value) {
      this.$refs['delay-form'].showLicenseForm('延期', value, this.isSupervision, this.roleType)
    },
    openModLicenseDialog(value) {
      this.$refs['mod-form'].showLicenseForm('变更', value, this.isSupervision, this.roleType)
    },

  }
}
</script>

<style scoped>
.basic_search {
  display: inline-block;
  margin-right: 32px;
  margin-bottom: 18px;
}

.carrier_search {
  display: inline-block;
}

.carrier_search_input {
  width: 200px;
}
</style>