<template>
  <div class="app-container">
    <el-card>
      <!-- 搜索工作栏 -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="98px"
      >
        <div class="filter-box">
          <div class="filter-lf">
            <el-form-item label="凭证号" prop="voucherNum">
              <el-input
                v-model="queryParams.voucherNum"
                placeholder="请输入凭证号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="凭证类型" prop="type">
              <el-select
                v-model="queryParams.type"
                placeholder="请选择凭证类型"
                clearable
                size="small"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="凭证日期" prop="voucherTime">
              <el-date-picker
                v-model="queryParams.voucherTime"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
            <el-form-item label="摘要" prop="digest">
              <el-input
                v-model="queryParams.digest"
                placeholder="请输入摘要"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
      <!-- 操作工具栏 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['accounting:voucher:create']"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['accounting:voucher:export']"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleDownloadData"
            >下载元数据</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <!-- 列表 -->
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="凭证号" align="center" prop="voucherNum" />
        <el-table-column label="凭证日期" align="center" prop="voucherTime" />
        <el-table-column label="摘要" align="center" prop="digest" />
        <el-table-column label="会计年份" align="center" prop="year" />
        <el-table-column label="会计月份" align="center" prop="period" />
        <el-table-column label="纸档位置" align="center" prop="position" />
        <el-table-column label="审核人" align="center" prop="audit" />
        <el-table-column label="制单人" align="center" prop="createBy" />
        <el-table-column label="凭证类型" align="center" prop="type">
          <template v-slot="scope">
            <dict-tag
              :type="DICT_TYPE.ACCOUNTING_VOUCHER_TYPE"
              :value="scope.row.type"
            />
          </template>
        </el-table-column>
        <el-table-column label="完整性" align="center" prop="cherks">
          <template v-slot="scope">
            <dict-tag
              :type="DICT_TYPE.ACCOUNTING_FILE_STATUS"
              :value="scope.row.cherks"
            />
          </template>
        </el-table-column>
        <el-table-column label="归档状态" align="center" prop="fileStatus">
          <template v-slot="scope">
            <dict-tag
              :type="DICT_TYPE.ARCHIVES_FILE_STATUS"
              :value="scope.row.fileStatus"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="180px"
        >
          <template v-slot="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              >查看
            </el-button>
            <el-button
              v-if="scope.row.fileStatus == '0'"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['accounting:voucher:update']"
              >修改</el-button
            >
            <el-button
              v-if="scope.row.fileStatus == '0'"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['accounting:voucher:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        :disabled="this.title === '查看会计凭证'"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="业务实体" prop="company">
              <el-select
                v-model="form.company"
                placeholder="请选择业务实体"
                value-key="id"
                @change="handleCompanyChange"
                filterable
              >
                <el-option
                  v-for="item in organizationList"
                  :key="item.id"
                  :value="item"
                  :label="item.organizationName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="凭证号" prop="voucherNum">
              <el-input v-model="form.voucherNum" placeholder="请输入凭证号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="凭证类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择凭证类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.id"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="审核人" prop="audit">
              <el-select
                v-model="form.audit"
                clearable
                filterable
                remote
                :remote-method="getUserDatas"
                :loading="loading"
                placeholder="请选择或输入审核人"
                class="formItemFullWidth"
              >
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.nickname"
                >
                </el-option>
              </el-select>
              <el-button
                @click="handleSelectUser1"
                icon="el-icon-search"
                style="
                  border-color: #46a6ff;
                  background-color: #46a6ff;
                  color: white;
                "
              >
              </el-button>
              <UserSelect ref="UserSelect1" @onSelected="onUserSelected1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="核准人" prop="checker">
              <el-select
                v-model="form.checker"
                clearable
                filterable
                remote
                :remote-method="getUserDatas"
                :loading="loading"
                placeholder="请选择或输入核准人"
                class="formItemFullWidth"
              >
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.nickname"
                >
                </el-option>
              </el-select>
              <el-button
                @click="handleSelectUser2"
                icon="el-icon-search"
                style="
                  border-color: #46a6ff;
                  background-color: #46a6ff;
                  color: white;
                "
              ></el-button>
              <UserSelect ref="UserSelect2" @onSelected="onUserSelected2" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人" prop="handle">
              <el-select
                v-model="form.handle"
                clearable
                filterable
                remote
                :remote-method="getUserDatas"
                :loading="loading"
                placeholder="请选择或输入经办人"
                class="formItemFullWidth"
              >
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.nickname"
                >
                </el-option>
              </el-select>
              <el-button
                @click="handleSelectUser3"
                icon="el-icon-search"
                style="
                  border-color: #46a6ff;
                  background-color: #46a6ff;
                  color: white;
                "
              ></el-button>
              <UserSelect ref="UserSelect3" @onSelected="onUserSelected3"
            /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="凭证日期" prop="voucherTime">
              <el-date-picker
                clearable
                v-model="form.voucherTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择凭证日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会计年度" prop="year">
              <el-date-picker
                format="yyyy年"
                v-model="form.year"
                value-format="yyyy"
                type="year"
                placeholder="请选择会计年度"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会计期间" prop="period">
              <el-date-picker
                popper-class="due_month"
                v-model="form.period"
                format="M月"
                value-format="M"
                type="month"
                placeholder="请选择会计期间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="纸档位置" prop="site">
              <el-cascader
                v-model="siteArray"
                :options="siteOptions"
                :props="propName"
                placeholder="请选择纸档位置"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="摘要" prop="digest">
          <el-input
            v-model="form.digest"
            type="textarea"
            placeholder="请输入摘要"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>

      <!-- 记账凭证 -->
      <el-divider v-if="optType != 'add'">记账凭证</el-divider>
      <el-table :data="tableData" style="width: 100%" v-if="optType != 'add'">
        <el-table-column prop="digest" label="摘要" width="180" />
        <el-table-column prop="subjectCode" label="科目代码" width="180" />
        <el-table-column prop="subjectName" label="科目名称" />
        <el-table-column prop="debitMoney" label="借方金额" />
        <el-table-column prop="creditorMoney" label="贷方金额" />
      </el-table>

      <!-- 凭证详情 -->
      <el-divider v-if="optType != 'add'">凭证详情</el-divider>
      <el-tabs
        style="margin-top: 20px"
        v-if="optType != 'add'"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="附件" name="first">
          <el-table :data="fjList">
            <el-table-column prop="flowCode" label="流程编号" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView1(scope.row)"
                  >查看
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewFJ(scope.row)"
                  >查看附件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 查看详情 -->
          <el-dialog
            title="查看会计附件"
            :visible.sync="openFJ"
            width="1000px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="form"
              label-width="140px"
              style="margin-top: 20px"
              :disabled="this.title === '查看会计凭证'"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="流程编号" prop="flowCode">
                    <el-input
                      v-model="form.flowCode"
                      placeholder="请输入流程编号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="凭证号" prop="voucherNum">
                    <el-input
                      v-model="form.voucherNum"
                      placeholder="请选择凭证"
                      readonly
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                  readonly
                />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelFJ">返 回</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="审批流程" name="second">
          <el-table :data="splcList">
            <el-table-column prop="flowCode" label="流程编号" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView2(scope.row)"
                  >查看
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewSPLC(scope.row)"
                  >查看附件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 查看 -->
          <el-dialog
            title="查看审批流程"
            :visible.sync="openSPLC"
            width="1000px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="form"
              label-width="130px"
              style="margin-top: 20px"
              :disabled="this.title === '查看会计凭证'"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="流程编号" prop="flowCode">
                    <el-input
                      v-model="form.flowCode"
                      placeholder="请输入流程编号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="凭证号" prop="voucherNum">
                    <el-input
                      v-model="form.voucherNum"
                      placeholder="请选择凭证"
                      readonly
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="摘要" prop="note">
                    <el-input
                      v-model="form.note"
                      placeholder="请输入摘要"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelSPLC">返 回</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="电子发票" name="third">
          <el-table :data="dzfpList">
            <el-table-column prop="invoiceCode" label="发票代码" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView3(scope.row)"
                  >查看
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewDZFP(scope.row)"
                  >查看附件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 查看 -->
          <el-dialog
            title="查看电子发票"
            :visible.sync="openDZFP"
            width="1200px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="form"
              label-width="140px"
              :disabled="this.title === '查看会计凭证'"
            >
              <el-divider>发票信息</el-divider>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="发票代码" prop="invoiceCode">
                    <el-input
                      v-model="form.invoiceCode"
                      placeholder="请输入发票代码"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发票号码" prop="invoiceNum">
                    <el-input
                      v-model="form.invoiceNum"
                      placeholder="请输入发票号码"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="大写金额" prop="amountinWords">
                    <el-input
                      v-model="form.amountinWords"
                      placeholder="请输入大写金额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="合计税额" prop="totalTax">
                    <el-input
                      v-model="form.totalTax"
                      placeholder="请输入合计税额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="税率" prop="taxRate">
                    <el-input
                      v-model="form.taxRate"
                      placeholder="请输入税率"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="金额" prop="totalAmount">
                    <el-input
                      v-model="form.totalAmount"
                      placeholder="请输入金额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="税额" prop="commodityTax">
                    <el-input
                      v-model="form.commodityTax"
                      placeholder="请输入税额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="价税合计" prop="commodityAmount">
                    <el-input
                      v-model="form.commodityAmount"
                      placeholder="请输入价税合计"
                      readonly
                    />
                  </el-form-item> </el-col
              ></el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="小写价税合计" prop="amountinFiguers">
                    <el-input
                      v-model="form.amountinFiguers"
                      placeholder="请输入小写价税合计"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开票人" prop="foteDrawer">
                    <el-input
                      v-model="form.foteDrawer"
                      placeholder="请输入开票人"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="销方地址电话" prop="sellerAddress">
                    <el-input
                      v-model="form.sellerAddress"
                      placeholder="请输入销方地址电话"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="销方纳税识别号" prop="sellerRegisterNum">
                    <el-input
                      v-model="form.sellerRegisterNum"
                      placeholder="请输入销方纳税识别号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="销方开户行及账号" prop="sellerBank">
                    <el-input
                      v-model="form.sellerBank"
                      placeholder="请输入销方开户行及账号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="校验码" prop="checkCode">
                    <el-input
                      v-model="form.checkCode"
                      placeholder="请输入校验码"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="开票日期" prop="invoiceDate">
                    <el-date-picker
                      clearable
                      v-model="form.invoiceDate"
                      type="date"
                      value-format="timestamp"
                      placeholder="选择开票日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="购方税号" prop="purchaserRegisterNum">
                    <el-input
                      v-model="form.purchaserRegisterNum"
                      placeholder="请输入购方税号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="购方开户行及账号" prop="purchaserBank">
                    <el-input
                      v-model="form.purchaserBank"
                      placeholder="请输入购方开户行及账号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="复核人" prop="checker">
                    <el-input
                      v-model="form.checker"
                      placeholder="请输入复核人"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="购方公司名" prop="purchaserName">
                    <el-input
                      v-model="form.purchaserName"
                      placeholder="请输入购方公司名"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="购方地址电话" prop="purchaserAddress">
                    <el-input
                      v-model="form.purchaserAddress"
                      placeholder="请输入购方地址电话"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="发票种类" prop="invoiceType">
                    <el-input
                      v-model="form.invoiceType"
                      placeholder="请输入发票种类"
                      readonly
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="收款人" prop="payee">
                    <el-input
                      v-model="form.payee"
                      placeholder="请输入收款人"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="销方名称" prop="sellerName">
                    <el-input
                      v-model="form.sellerName"
                      placeholder="请输入销方名称"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="二维码查验" prop="qrCheckCode">
                    <el-select v-model="form.qrCheckCode" placeholder="请选择">
                      <el-option
                        v-for="item in qrCheckCodeOptions"
                        :key="item.id"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="发票状态" prop="invoiceState">
                    <el-select
                      v-model="form.invoiceState"
                      placeholder="请选择发票状态"
                    >
                      <el-option
                        v-for="item in invoiceStateOptions"
                        :key="item.id"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="form.invoiceState == 0">
                  <el-form-item label="作废日期" prop="printNum">
                    <el-date-picker
                      clearable
                      v-model="form.printNum"
                      type="date"
                      value-format="timestamp"
                      placeholder="选择作废日期"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="进销项" prop="inoutMark">
                    <el-select v-model="form.inoutMark" placeholder="请选择">
                      <el-option
                        v-for="item in inOrOutOptions"
                        :key="item.id"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="查重" prop="duplicateMark">
                    <el-select
                      v-model="form.duplicateMark"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in invoicesDuplicateOptions"
                        :key="item.id"
                        :value="item.value"
                        :label="item.label"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                  readonly
                />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelDZFP">返 回</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="银行回单" name="fourth">
          <el-table :data="yhhdList">
            <el-table-column prop="serialNum" label="银行回单流水号" />
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView4(scope.row)"
                  >查看
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewYHHD(scope.row)"
                  >查看附件
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 查看 -->
          <el-dialog
            title="查看银行回单"
            :visible.sync="openYHHD"
            width="1200px"
            append-to-body
          >
            <el-form
              ref="form"
              :model="form"
              label-width="130px"
              :disabled="this.title === '查看会计凭证'"
            >
              <el-divider>银行回单信息</el-divider>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="交易日期" prop="tradTime">
                    <el-date-picker
                      clearable
                      v-model="form.tradTime"
                      type="date"
                      value-format="timestamp"
                      placeholder="手动填写"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="交易类型" prop="type">
                    <el-input
                      v-model="form.type"
                      placeholder="请输入交易类型"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="银行" prop="bank">
                    <el-input
                      v-model="form.bank"
                      placeholder="请输入银行"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="我方账户" prop="myCompany">
                    <el-input
                      v-model="form.myCompany"
                      placeholder="请输入我方账户"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="我方账号" prop="myNum">
                    <el-input
                      v-model="form.myNum"
                      placeholder="请输入我方账号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="流程编号" prop="flowCode">
                    <el-input
                      v-model="form.flowCode"
                      placeholder="请输入流程编号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="对方账户" prop="adverseCompany">
                    <el-input
                      v-model="form.adverseCompany"
                      placeholder="请输入对方账户"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="对方账号" prop="adverseNum">
                    <el-input
                      v-model="form.adverseNum"
                      placeholder="请输入对方账号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借/贷" prop="debitOrCredit">
                    <el-input
                      v-model="form.debitOrCredit"
                      placeholder="请输入借/贷"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="币种" prop="currency">
                    <el-input
                      v-model="form.currency"
                      placeholder="请输入币种"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="交易流水号" prop="serialNum">
                    <el-input
                      v-model="form.serialNum"
                      placeholder="请输入交易流水号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借方金额" prop="debitMoney">
                    <el-input
                      v-model="form.debitMoney"
                      placeholder="请输入借方金额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="交易金额" prop="tradMoney">
                    <el-input
                      v-model="form.tradMoney"
                      placeholder="请输入交易金额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="贷方金额" prop="creditMoney">
                    <el-input
                      v-model="form.creditMoney"
                      placeholder="请输入贷方金额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="余额" prop="balance">
                    <el-input
                      v-model="form.balance"
                      placeholder="请输入余额"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="业务单号" prop="busNum">
                    <el-input
                      v-model="form.busNum"
                      placeholder="请输入业务单号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="回单编号" prop="receiptNum">
                    <el-input
                      v-model="form.receiptNum"
                      placeholder="请输入回单编号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="摘要" prop="digest">
                    <el-input
                      v-model="form.digest"
                      placeholder="请输入摘要"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="扩展摘要" prop="digestExtend">
                    <el-input
                      v-model="form.digestExtend"
                      placeholder="请输入扩展摘要"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="业务摘要" prop="businessDigest">
                    <el-input
                      v-model="form.businessDigest"
                      placeholder="请输入业务摘要"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="用途" prop="purpose">
                    <el-input
                      v-model="form.purpose"
                      placeholder="请输入用途"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="业务编号" prop="businessNum">
                    <el-input
                      v-model="form.businessNum"
                      placeholder="请输入业务编号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="业务名称" prop="businessName">
                    <el-input
                      v-model="form.businessName"
                      placeholder="请输入业务名称"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="票据号" prop="billNum">
                    <el-input
                      v-model="form.billNum"
                      placeholder="请输入票据号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="商务支付订单号" prop="businessOrder">
                    <el-input
                      v-model="form.businessOrder"
                      placeholder="请输入商务支付订单号"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="企业识别码" prop="headingCode">
                    <el-input
                      v-model="form.headingCode"
                      placeholder="请输入企业识别码"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="对方银行码" prop="bankCode">
                    <el-input
                      v-model="form.bankCode"
                      placeholder="请输入对方银行码"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="对方开户地址" prop="bankSite">
                    <el-input
                      v-model="form.bankSite"
                      placeholder="请输入对方开户地址"
                      readonly
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="对方开户地区" prop="bankRegion">
                    <el-input
                      v-model="form.bankRegion"
                      placeholder="请输入对方开户地区"
                      readonly
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelYHHD">返 回</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="optType != 'view'"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 密码输入框-->
    <el-dialog
      :title="title"
      :visible.sync="open1"
      width="800px"
      append-to-body
    >
      <el-form
        ref="queryForm"
        :model="queryParams"
        :rules="rules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="14">
            <el-form-item label="密码" prop="inputPassword">
              <el-input
                v-model="queryParams.inputPassword"
                placeholder="请输入密码"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createVoucher,
  updateVoucher,
  deleteVoucher,
  getVoucher,
  getVoucherPage,
  exportVoucherExcel,
  getVoucherDetailsPage,
  downloadXml,
} from "@/api/accounting/voucher";
import { getSiteTree } from "@/api/setting/organization";
import { listData } from "@/api/system/dict/data";
import { getAttachmentPage, getAttachment } from "@/api/accounting/attachment";
import { getFlowPage, getFlow } from "@/api/accounting/flow";
import { getInvoicesPage, getInvoices } from "@/api/accounting/invoices";
import { getBankSlipPage, getBankSlip } from "@/api/accounting/bankSlip";
import UserSelect from "@/components/UserSelect/single.vue";
import { getOrganizationPage } from "@/api/setting/organization";
import { listSimpleUsers } from "@/api/system/user";

export default {
  name: "Voucher",
  components: { UserSelect },
  data() {
    return {
      propName: {
        label: "pName",
        value: "pId",
        multiple: false,
      },
      imgType1: ".jpeg, .jpg, .png, .pdf ,.ofd",
      imgType2: ".jpeg, .jpg, .png, .pdf",
      // 遮罩层
      loading: true,
      optType: undefined,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 选中数组
      ids: [],
      // 会计凭证列表
      list: [],
      // 会计凭证行列表
      tableData: [],
      // 弹出层标题
      title: "",
      //tab名
      activeName: "first",
      // 是否显示弹出层
      open: false,
      open1: false,
      openFJ: false,
      openSPLC: false,
      openDZFP: false,
      openYHHD: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        createBy: null,
        createTime: [],
        companyId: null,
        company: null,
        deptId: null,
        deptName: null,
        voucherTime: [],
        voucherNum: null,
        digest: null,
        audit: null,
        checker: null,
        handle: null,
        serviceId: null,
        serviceExplain: null,
        type: null,
        flowId: null,
        source: null,
        year: null,
        period: null,
        borrowStatus: null,
        recordTime: [],
        position: null,
        cherks: null,
        userId: null,
        recordId: null,
        fileStatus: null,
        remark: null,
        organizationId: null,
        depotId: null,
        cabinetId: null,
        inputPassword: null,
      },
      fjList: [], //会计凭证列表
      splcList: [], //审批流程列表
      dzfpList: [], //电子发票列表
      yhhdList: [], //银行回单列表
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        inputPassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        company: [
          { required: true, message: "业务实体不能为空", trigger: "blur" },
        ],
        voucherNum: [
          { required: true, message: "凭证号不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "凭证类型不能为空", trigger: "blur" },
        ],
        year: [
          { required: true, message: "会计年度不能为空", trigger: "blur" },
        ],
        period: [
          { required: true, message: "会计期间不能为空", trigger: "blur" },
        ],
      },
      siteOptions: [], //归档位置数据
      siteArray: [], //归档位置选中值
      typeOptions: [], //凭证类别
      organizationList: [],
      qrCheckCodeOptions: [], //发票二维码查验状态
      invoiceStateOptions: [], //发票状态
      inOrOutOptions: [], //发票进销项
      invoicesDuplicateOptions: [], //发票查重
      userOptions: [], //人员选项
    };
  },
  created() {
    this.getList();
    this.getSiteList();
    this.handleInitList();
    this.getOrganizationList();
    this.getUserDatas();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getVoucherPage(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询行列表 */
    getLineList(val) {
      // 执行查询
      getVoucherDetailsPage({ voucherId: val }).then((response) => {
        this.tableData = response.data.list;
      });
    },
    /* 获取人员选项列表 */
    getUserDatas(key) {
      this.loading = true;
      listSimpleUsers({
        nickname: key || "", // 关键字参数
      }).then((res) => {
        this.loading = false;
        this.userOptions = res.data;
      });
    },
    /**
     * 文件预览
     * @param fileUrl
     */
    openLink(fileUrl) {
      const url =
        process.env.VUE_APP_ONLINE_API +
        `/onlinePreview?url=${encodeURIComponent(this.base64Encode(fileUrl))}`;
      window.open(url);
    },

    /** 查询附件 */
    getFJ(val) {
      // 执行查询
      getAttachmentPage({ voucherId: val }).then((response) => {
        this.fjList = response.data.list;
      });
    },
    handleView1(row) {
      const id = row.id;
      getAttachment(id).then((response) => {
        this.form = response.data;
        this.openFJ = true;
      });
    },
    handleViewFJ(row) {
      this.openLink(row.fileUrl);
    },
    cancelFJ() {
      this.openFJ = false;
    },
    /** 查询附件 */

    /** 查询审批流程 */
    getSPLC(val) {
      getFlowPage({ voucherId: val }).then((response) => {
        this.splcList = response.data.list;
      });
    },
    handleView2(row) {
      const id = row.id;
      getFlow(id).then((response) => {
        this.form = response.data;
        this.openSPLC = true;
      });
    },
    handleViewSPLC(row) {
      this.openLink(row.fileUrl);
    },
    cancelSPLC() {
      this.openSPLC = false;
    },
    /** 查询审批流程 */

    /** 查询电子发票 */
    getDZFP(val) {
      getInvoicesPage({ voucherId: val }).then((response) => {
        this.dzfpList = response.data.list;
      });
    },
    handleView3(row) {
      const id = row.id;
      getInvoices(id).then((response) => {
        this.form = response.data;
        if (response.data.invoiceState != null) {
          const num1 = response.data.invoiceState.toString();
          this.form.invoiceState = num1;
        }
        if (response.data.inoutMark != null) {
          const num2 = response.data.inoutMark.toString();
          this.form.inoutMark = num2;
        }
        if (response.data.duplicateMark != null) {
          const num3 = response.data.duplicateMark.toString();
          this.form.duplicateMark = num3;
        }
        if (response.data.qrCheckCode != null) {
          const num4 = response.data.qrCheckCode.toString();
          this.form.qrCheckCode = num4;
        }
        this.openDZFP = true;
      });
    },
    handleViewDZFP(row) {
      this.openLink(row.fileUrl);
    },
    cancelDZFP() {
      this.openDZFP = false;
    },
    /** 查询电子发票 */

    /** 查询银行回单 */
    getYHHD(val) {
      getBankSlipPage({ voucherId: val }).then((response) => {
        this.yhhdList = response.data.list;
      });
    },
    handleView4(row) {
      const id = row.id;
      getBankSlip(id).then((response) => {
        this.form = response.data;
        this.openYHHD = true;
      });
    },
    handleViewYHHD(row) {
      this.openLink(row.fileUrl);
    },
    cancelYHHD() {
      this.openYHHD = false;
    },
    /** 查询银行回单 */

    //获取字典数据
    handleInitList() {
      // 获取凭证类别
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: "accounting_voucher_type",
      }).then((res) => {
        this.typeOptions = res.data.list || [];
      });
      // 获取发票状态
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: "accounting_invoices_code_status",
      }).then((res) => {
        this.qrCheckCodeOptions = res.data.list || [];
      });
      // 获取发票状态
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: "accounting_invoices_status",
      }).then((res) => {
        this.invoiceStateOptions = res.data.list || [];
      });
      // 获取发票进销项
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: "accounting_invoices_type",
      }).then((res) => {
        this.inOrOutOptions = res.data.list || [];
      });
      // 获取发票查重
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: "accounting_invoices_duplicate",
      }).then((res) => {
        this.invoicesDuplicateOptions = res.data.list || [];
      });
    },
    // 获取业务实体
    getOrganizationList() {
      getOrganizationPage().then((response) => {
        this.organizationList = response.data.list;
      });
    },
    // 业务实体选择事件
    handleCompanyChange(val) {
      this.form.companyId = val.id;
      this.form.company = val.organizationName;
    },
    //获取归档位置
    getSiteList() {
      getSiteTree().then((response) => {
        this.siteOptions = response.data;
        this.siteOptions.map((w) => {
          w.children.map((l) => {
            let lstr = JSON.stringify(l.children)
              .replace(/depotId/g, "lId")
              .replace(/cabinetId/g, "pId")
              .replace(/cabinetName/g, "pName");
            l.children = JSON.parse(lstr);
          });

          let wstr = JSON.stringify(w.children)
            .replace(/organizationId/g, "wId")
            .replace(/depotId/g, "pId")
            .replace(/depotName/g, "pName");
          w.children = JSON.parse(wstr);
        });
        let ostr = JSON.stringify(this.siteOptions)
          .replace(/organizationId/g, "pId")
          .replace(/organizationName/g, "pName");
        this.siteOptions = JSON.parse(ostr);
        // console.log(this.siteOptions);
      });
    },
    //选择默认的归档位置
    handleSiteChanged(obj) {
      if (obj != null) {
        this.form.organizationId = obj[0];
        this.form.depotId = obj[1];
        this.form.cabinetId = obj[2];
      }
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 取消按钮 */
    cancel1() {
      this.open1 = false;
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        createBy: undefined,
        companyId: undefined,
        company: undefined,
        deptId: undefined,
        deptName: undefined,
        voucherTime: undefined,
        voucherNum: undefined,
        digest: undefined,
        audit: undefined,
        checker: undefined,
        handle: undefined,
        serviceId: undefined,
        serviceExplain: undefined,
        type: undefined,
        flowId: undefined,
        source: undefined,
        year: undefined,
        period: undefined,
        borrowStatus: undefined,
        recordTime: undefined,
        position: undefined,
        cherks: undefined,
        userId: undefined,
        recordId: undefined,
        fileStatus: undefined,
        remark: undefined,
        organizationId: undefined,
        depotId: undefined,
        cabinetId: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加会计凭证";
      this.optType = "add";
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id;
      getVoucher(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查看会计凭证";
        this.optType = "view";
      });
      this.getLineList(row.id);
      this.getFJ(row.id);
      this.getSPLC(row.id);
      this.getDZFP(row.id);
      this.getYHHD(row.id);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id;
      getVoucher(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改会计凭证";
        this.optType = "edit";
      });
      this.getLineList(row.id);
      this.getFJ(row.id);
      this.getSPLC(row.id);
      this.getDZFP(row.id);
      this.getYHHD(row.id);
    },
    handleClick(tab) {},
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateVoucher(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createVoucher(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除会计凭证编号为"' + id + '"的数据项?')
        .then(function () {
          return deleteVoucher(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal
        .confirm("是否确认导出所有会计凭证数据项?")
        .then(() => {
          this.exportLoading = true;
          return exportVoucherExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, "会计凭证.xls");
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    //下载元数据
    handleDownloadData() {
      this.open1 = true;
      this.queryParams.inputPassword = null;
    },
    submitForm1() {
      this.$refs["queryForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 处理查询参数
        let params = { ...this.queryParams };
        downloadXml(params)
          .then((response) => {
            console.log(response.size);
            if (response.size == 39) {
              this.$modal.msgError("密码错误");
              return false;
            } else {
              this.$download.excel(response, "会计凭证元数据.xml");
              this.open1 = false;
            }
          })
          .catch(() => {});
      });
    },
    // 人员选择弹窗
    handleSelectUser1() {
      this.$refs.UserSelect1.showFlag = true;
    },
    handleSelectUser2() {
      this.$refs.UserSelect2.showFlag = true;
    },
    handleSelectUser3() {
      this.$refs.UserSelect3.showFlag = true;
    },
    // 审核人选择
    onUserSelected1(obj) {
      if (obj != undefined && obj != null) {
        this.form.audit = obj.username;
      }
    },
    // 核准人选择
    onUserSelected2(obj) {
      if (obj != undefined && obj != null) {
        this.form.checker = obj.username;
      }
    },
    // 经办人选择
    onUserSelected3(obj) {
      if (obj != undefined && obj != null) {
        this.form.handle = obj.username;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.null1 {
  display: flex;
  font-size: large;
  justify-content: center;
}
.el-tab-pane {
  display: flex;
}
@import "@/assets/styles/header/index.scss";
@import "@/assets/styles/common/index.scss";
</style>
