许可证

马宇豪

2025-04-16 e46a6e287f752825a8ae5f4024769cd3fbc39a4a

 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>