ylrz_his_scrm_adminUI/src/views/hisStore/store/audit.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="店铺名称" prop="storeName">
        <el-input
          v-model="queryParams.storeName"
          placeholder="请输入店铺名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入店铺电话"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="登录帐号" prop="account">
        <el-input
          v-model="queryParams.account"
          placeholder="请输入登录帐号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="店铺Id" prop="storeSeq">
        <el-input
          v-model="queryParams.storeSeq"
          placeholder="请输入店铺Id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商家Id" prop="merchantId">
        <el-input
          v-model="queryParams.merchantId"
          placeholder="请输入商家Id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['his:store:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-tabs type="card" v-model="queryParams.isAudit" @tab-click="handleClickX">
      <el-tab-pane v-for="(item,index) in isAuditOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" border :data="storeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="店铺id" align="center" prop="storeId" width="120px"/>-->
      <el-table-column label="商家ID" align="center" prop="merchantId"  width="150px"/>
      <el-table-column label="店铺ID" align="center" prop="storeSeq"  width="150px"/>
      <el-table-column label="店铺名称" align="center" prop="storeName" width="120px"/>
      <el-table-column label="店铺LOGO" align="center" prop="logoUrl" width="100px">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="scope.row.logoUrl" width="80px">
            <img :src="scope.row.logoUrl" style="max-width: 150px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" prop="enterpriseAddress" width="200px"/>
      <el-table-column label="店铺电话" align="center" prop="phone" width="120px"/>
<!--      <el-table-column label="资质证书" align="center" prop="licenseImages" width="100px">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="scope.row.licenseImages" width="80px">
            <img :src="scope.row.licenseImages" style="max-width: 150px;">
          </el-popover>
        </template>
      </el-table-column>-->
      <el-table-column label="审核状态" align="center" prop="isAudit">
        <template slot-scope="scope">
          <dict-tag :options="isAuditOptions" :value="scope.row.isAudit"/>
        </template>
      </el-table-column>
      <el-table-column label="商品总数" align="center" prop="productCount" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="statusOptions" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="销量" align="center" prop="salesCount" />
      <el-table-column label="余额" align="center" prop="balance" />
      <el-table-column label="累计金额" align="center" prop="totalMoney" />

      <el-table-column label="登录帐号" align="center" prop="account" width="150px" />
      <el-table-column label="创建时间" align="center" prop="createTime"  width="150px"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="130px" v-if="medicalMallConfig.isAudit">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="handledetails(scope.row)">
            <span v-if="scope.row.isAudit===0">审核</span>
            <span v-else>详情</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 使用StoreDialog组件 -->
    <StoreDialog
      :visible.sync="open"
      mode="audit"
      :form-data="form"
      :audit-logs="auditLogs"
      :medicalMallConfig="medicalMallConfig"
      @audit="handleAuditSubmit"
      @close="handleDialogClose"
    >
      <template #form="{ form: dialogForm, formDisabled }">
        <el-form :model="dialogForm" label-width="120px" label-position="top" :disabled="formDisabled">
          <el-divider content-position="left">基础信息</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="店铺名称">
                <el-input v-model="dialogForm.storeName" placeholder="请输入店铺名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="dialogForm.phone" placeholder="请输入店铺电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="企业全称">
            <el-input v-model="dialogForm.fullName" placeholder="请输入企业全称" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="店铺LOGO">
                <img v-if="dialogForm.logoUrl" :src="dialogForm.logoUrl" width="200px">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="店铺介绍">
                <el-input v-model="dialogForm.descs" type="textarea" :rows="3" placeholder="请输入店铺介绍" maxlength="100" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属城市">
                <el-input v-model="dialogForm.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="enterpriseAddress">
                <el-input v-model="dialogForm.enterpriseAddress" placeholder="请输入地址"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="法人姓名">
                <el-input v-model="dialogForm.legalPersonName" placeholder="请输入法人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="dialogForm.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商家ID">
                <el-input v-model="dialogForm.merchantId" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="营业范围">
            <el-input v-model="dialogForm.businessScope" type="textarea" placeholder="请输入营业范围" />
          </el-form-item>

          <!-- 证书信息 -->
          <el-divider content-position="left">资质证书信息</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="营业执照">
                <el-image v-if="dialogForm.businessLicense" style="width: 200px" :src="dialogForm.businessLicense" :preview-src-list="[dialogForm.businessLicense]"></el-image>
              </el-form-item>
              <el-form-item label="营业执照编号" style="margin-left: 5px">
                <el-input v-model="dialogForm.businessCode" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业执照有效期">
                <span v-if="dialogForm.isBusinessLicensePermanent == 1">长期有效</span>
                <span v-else>{{dialogForm.businessLicenseExpireStart}} - {{dialogForm.businessLicenseExpireEnd}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 医疗相关证书 -->
          <div v-if="medicalMallConfig.isMedicalMall">
            <el-row>
              <el-col :span="12">
                <el-form-item label="药品经营许可证">
                  <el-image v-if="dialogForm.drugLicense" style="width: 200px" :src="dialogForm.drugLicense" :preview-src-list="[dialogForm.drugLicense]"></el-image>
                  <!-- 未上传图片时显示的默认图标 -->
                  <div v-else class="no-image-placeholder">
                    <span>用户未上传</span>
                  </div>
                </el-form-item>

                <el-form-item label="药品经营许可证编号" style="margin-left: 5px">
                  <el-input v-model="dialogForm.drugCode" />
                </el-form-item>
              </el-col>

              <el-col :sapn="24">
                <el-form-item label="药品经营许可证范围" prop="drugLicenseBusinessScope" style="margin-left: 5px">
                  <el-input v-model="form.drugLicenseBusinessScope" placeholder="请输入药品经营许可证范围" type="textarea"/>
                </el-form-item>
              </el-col>

              <!-- 新增的单选框 -->
              <el-col :span="24">
                <el-form-item label="药品经营许可证范围是否包含" prop="drugScopeHasFrozen" style="margin-left: 5px">
                  <el-radio-group v-model="form.drugScopeHasFrozen">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">冷冻</el-radio>
                    <el-radio label="2">冷藏</el-radio>
                    <el-radio label="3">冷冻冷藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <!-- 结束 -->

              <el-col :span="12">
                <el-form-item label="药品经营许可证有效期">
                  <span v-if="dialogForm.isDrugLicensePermanent == 1">长期有效</span>
                  <span v-else>{{dialogForm.drugLicenseExpiryStart}} - {{dialogForm.drugLicenseExpiryEnd}}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="2类医疗器械备案证书">
                  <el-image v-if="dialogForm.medicalDevice2" style="width: 200px" :src="dialogForm.medicalDevice2" :preview-src-list="[dialogForm.medicalDevice2]"></el-image>
                  <!-- 未上传图片时显示的默认图标 -->
                  <div v-else class="no-image-placeholder">
                    <span>用户未上传</span>
                  </div>
                </el-form-item>
                <el-form-item label="2类器械生产备案编号" style="margin-left: 5px">
                  <el-input v-model="dialogForm.medicalDevice2Code" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="2类器械经营许可证是否长期有效" prop="isMedicalDevice2ExpiryPermanent">
                  <el-switch
                    @change="switchChange()"
                    v-model="dialogForm.isMedicalDevice2ExpiryPermanent"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>

                <el-form-item label="2类器械经营许可证有效期" prop="foodLicenseExpiry" v-if="dialogForm.isMedicalDevice2ExpiryPermanent != 1">
                  <span>{{dialogForm.medicalDevice2ExpiryStart}} - {{dialogForm.medicalDevice2ExpiryEnd}}</span>
                </el-form-item>
              </el-col>

              <el-col :sapn="24">
                <el-form-item label="2类器械经营范围" prop="medicalDevice2BusinessScope" style="margin-left: 5px">
                  <el-input v-model="form.medicalDevice2BusinessScope" placeholder="请输入2类器械经营范围" type="textarea"/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="3类器械经营许可证">
                  <el-image v-if="dialogForm.medicalDevice3" style="width: 200px" :src="dialogForm.medicalDevice3" :preview-src-list="[dialogForm.medicalDevice3]"></el-image>
                  <!-- 未上传图片时显示的默认图标 -->
                  <div v-else class="no-image-placeholder">
                    <span>用户未上传</span>
                  </div>
                </el-form-item>
                <el-form-item label="3类器械生产备案编号" style="margin-left: 5px">
                  <el-input v-model="dialogForm.medicalDevice3Code" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="3类器械经营许可证是否长期有效" prop="isMedicalDevice3ExpiryPermanent">
                  <el-switch
                    @change="switchChange()"
                    v-model="dialogForm.isMedicalDevice3ExpiryPermanent"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>

                <el-form-item label="3类器械经营许可证有效期" prop="foodLicenseExpiry" v-if="dialogForm.isMedicalDevice3ExpiryPermanent != 1">
                  <span>{{dialogForm.medicalDevice3ExpiryStart}} - {{dialogForm.medicalDevice3ExpiryEnd}}</span>
                </el-form-item>
              </el-col>

              <el-col :sapn="24">
                <el-form-item label="3类器械经营范围" prop="medicalDevice3BusinessScope" style="margin-left: 5px">
                  <el-input v-model="form.medicalDevice3BusinessScope" placeholder="请输入3类器械经营范围" type="textarea"/>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="食品经营许可证/备案凭证上传">
                  <!-- 图片容器（包含图片和删除按钮，仅在有图片时显示） -->
                  <div v-if="dialogForm.foodLicense && dialogForm.foodLicense.length > 0" class="food-license-container">
                    <div v-for="(url, index) in dialogForm.foodLicense" :key="index" class="food-license-item">
                      <div class="avatar-wrapper">
                        <img :src="url" class="avatar small-avatar" />
                        <div class="button-group">
                          <div class="preview-btn" @click.stop="previewImage(url)">
                            <i class="el-icon-zoom-in"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 未上传图片时显示的默认图标 -->
                  <div v-else class="no-image-placeholder small-placeholder">
                    <span>用户未上传</span>
                  </div>
                </el-form-item>
                <el-form-item label="食品经营许可证/备案凭证编号" style="margin-left: 5px">
                  <el-input v-model="dialogForm.foodCode" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="食品经营许可证/备案凭证是否长期有效" prop="isFoodLicenseExpiryPermanent">
                  <el-switch
                    @change="switchChange()"
                    v-model="dialogForm.isFoodLicenseExpiryPermanent"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>

                <el-form-item label="食品经营许可证/备案凭证有效期" prop="foodLicenseExpiry" v-if="dialogForm.isFoodLicenseExpiryPermanent != 1">
                  <span>{{dialogForm.foodLicenseExpiryStart}} - {{dialogForm.foodLicenseExpiryEnd}}</span>
                </el-form-item>
              </el-col>

              <el-col :sapn="24">
                <el-form-item label="食品经营许可证/备案凭证经营范围" prop="foodLicenseBusinessScope">
                  <el-input v-model="form.foodLicenseBusinessScope" placeholder="请输入食品经营许可证/备案凭证经营范围" type="textarea"/>
                </el-form-item>
              </el-col>

            </el-row>

          </div>

          <el-divider content-position="left">店铺配置信息</el-divider>
          <el-col :span="12">
            <el-form-item label="网销报告" prop="reportUrl">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handleFilePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="reportFileList"
                :show-file-list="true"
                disabled>
                <el-button size="small" type="primary" disabled>点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备案" prop="filingUrl">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handleFilePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :show-file-list="true"
                disabled>
                <el-button size="small" type="primary" disabled>点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-form-item label="退货地址">
            <el-input v-model="dialogForm.refundAddress" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="退货电话">
                <el-input v-model="dialogForm.refundPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退货收货人">
                <el-input v-model="dialogForm.refundConsignee" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="寄件人电话">
            <el-input v-model="dialogForm.sendPhone" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="商品总数">
                <span>{{dialogForm.productCount || 0}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销量">
                <span>{{dialogForm.salesCount || 0}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="累计金额">
                <span>{{dialogForm.totalMoney || 0}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分佣方式">
                <span v-if="dialogForm.brokerageType == 1">每盒</span>
                <span v-else-if="dialogForm.brokerageType == 2">总价</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="状态">
                <dict-tag :options="statusOptions" :value="dialogForm.status"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核状态">
                <dict-tag :options="isAuditOptions" :value="dialogForm.isAudit"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="配送方式">
            <span v-if="dialogForm.shippingType">
              <span v-if="dialogForm.shippingType.includes('1') || dialogForm.shippingType === '1'">配送</span>
              <span v-if="dialogForm.shippingType.includes('2') || dialogForm.shippingType === '2'">,自提</span>
              <span v-if="dialogForm.shippingType.includes('3') || dialogForm.shippingType === '3'">,配送自提</span>
            </span>
          </el-form-item>
          <el-form-item label="登录帐号">
            <el-input v-model="dialogForm.account" />
          </el-form-item>
        </el-form>
      </template>
    </StoreDialog>

    <el-dialog :visible.sync="imagePreviewVisible" width="800px" append-to-body>
      <img :src="previewImageUrl" style="width: 100%; height: auto; max-height: 600px; object-fit: contain;" />
    </el-dialog>
  </div>


</template>

<script>
import { audit, listStore, exportStore, getStore, getStoreAuditLog } from "@/api/hisStore/store";
import { getCitys } from "@/api/store/city";
import { getConfigByKey } from '@/api/system/config';
import ImageUpload from '@/components/ImageUpload';
import StoreDialog from '../components/StoreDialog.vue';

export default {
  name: "adutstore",
  components: { ImageUpload, StoreDialog },
  data() {
    return {
      previewImageUrl: '',
      imagePreviewVisible: false,
      reportFileList:[],
      fileList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isAuditMode: false,
      // 审核表单
      auditForm: {
        reason: '',
        attachImage: ''
      },
      // 审核记录
      auditLogs: [],
      medicalMallConfig:{},
      citys:[],
      licenseuploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      baseUrl: process.env.VUE_APP_BASE_API,
      shippingTypeOptions: [{
        "label": "配送",
        "value": "1"
      }, {
        "label": "自提",
        "value": "2"
      }, {
        "label": "配送自提",
        "value": "3"
      }],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 店铺管理表格数据
      storeList: [],
      // 状态字典
      statusOptions: [],
      // 审核状态字典
      isAuditOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeName: null,
        address: null,
        phone: null,
        status: null,
        isAudit: 0,
        account: null,
      },


      // 表单参数
      form: {},
      // 表单校验
      rules: {
        storeName: [
          { required: true, message: "店铺名称不能为空", trigger: "blur" }
        ],
        logoUrl: [
          { required: true, message: "店铺LOGO不能为空", trigger: "blur" }
        ],
        cityIds: [
          { required: true, message: "所属城市不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        licenseImages: [
          { required: true, message: "资质证书不能为空", trigger: "blur" }
        ],
        shippingType: [
          { required: true, message: "配送方式不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "店铺电话不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getCitys();
    this.getList();
    getConfigByKey("medicalMall.func.switch").then(response => {
      if(response.data && response.data.configValue) {
        this.medicalMallConfig = JSON.parse(response.data.configValue);
      }
    });
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_company_isaudit").then(response => {
      this.isAuditOptions = response.data;
    });
  },
  methods: {
    /** 审核/详情按钮操作 */
    handledetails(row) {
      this.reset();
      this.isAuditMode = row.isAudit === 0; // 未审核的进入审核模式
      this.title = row.isAudit === 0 ? "店铺审核" : "店铺详情";

      const storeId = row.storeId;
      // 调用后端接口获取详情和审核记录
      Promise.all([getStore(storeId), getStoreAuditLog(storeId)])
        .then(([storeResponse, auditResponse]) => {
          this.form = storeResponse.data;
          // 处理食品经营许可证图片数据，支持逗号分隔的字符串
          if (this.form.foodLicense) {
            if (typeof this.form.foodLicense === 'string') {
              // 如果是逗号分隔的字符串，则分割成数组
              this.form.foodLicense = this.form.foodLicense.split(',').filter(url => url.trim() !== '');
            } else if (!Array.isArray(this.form.foodLicense)) {
              // 如果既不是字符串也不是数组，则初始化为空数组
              this.form.foodLicense = [];
            }
          } else {
            // 如果为空，则初始化为空数组
            this.form.foodLicense = [];
          }
          this.auditLogs = auditResponse.auditLog || [];
          this.reportFileList = this.urlToFileList(this.form.reportUrl);
          this.fileList = this.urlToFileList(this.form.filingUrl);
          this.open = true;
        })
        .catch(() => {
          this.msgError("获取店铺详情失败");
        });
    },

    /** 审核通过 */
    handleAuditPass() {
      this.$confirm('确认审核通过该店铺？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          storeId: this.form.storeId,
          isAudit: 1,
          reason: this.auditForm.reason,
          attachImage: this.auditForm.attachImage
        };
        return audit(data);
      }).then(res => {
        if (res.code === 200) {
          this.msgSuccess("审核通过成功");
          this.open = false;
          this.getList();
          // 清空审核表单
          this.auditForm = { reason: '', attachImage: '' };
        } else {
          this.msgError("审核失败");
        }
      }).catch(() => {});
    },

    /** 审核驳回 */
    handleAuditReject() {
      this.$confirm('确认驳回该店铺审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          storeId: this.form.storeId,
          isAudit: -1,
          reason: this.auditForm.reason,
          attachImage: this.auditForm.attachImage
        };
        return audit(data);
      }).then(res => {
        if (res.code === 200) {
          this.msgSuccess("审核驳回成功");
          this.open = false;
          this.getList();
          // 清空审核表单
          this.auditForm = { reason: '', attachImage: '' };
        } else {
          this.msgError("审核失败");
        }
      }).catch(() => {});
    },

    /** 处理审核提交 */
    handleAuditSubmit(auditData) {
      audit(auditData).then(res => {
        if (res.code === 200) {
          this.msgSuccess(auditData.isAudit === 1 ? "审核通过成功" : "审核驳回成功");
          this.open = false;
          this.getList();
        } else {
          this.msgError("审核失败");
        }
      }).catch(() => {
        this.msgError("审核操作失败");
      });
    },

    /** 对话框关闭 */
    handleDialogClose() {
      this.reset();
    },

    handleCityChange(value) {
      var nodes=this.$refs.citySelect.getCheckedNodes();
      this.form.address=nodes[0].pathLabels[0]+nodes[0].pathLabels[1]+nodes[0].pathLabels[2];
      this.form.cityIds=value.toString();
    },
    getCitys(){
      getCitys().then(res => {
        this.loading = false;
        this.citys=res.data;
      })
    },

    licensehandleAvatarSuccess(res, file) {
      if(res.code==200){
        this.form.licenseImages=res.url;
        this.$forceUpdate()
      }
      else{
        this.msgError(res.msg);
      }
    },
    handleAvatarSuccess(res, file) {
      if(res.code==200){
        this.form.logoUrl=res.url;
        this.$forceUpdate()
      }
      else{
        this.msgError(res.msg);
      }
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return   isLt1M;
    },
    handleClickX(){
      this.getList()
    },
    /** 查询店铺管理列表 */
    getList() {
      this.loading = true;
      listStore(this.queryParams).then(response => {
        this.storeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        storeId: null,
        cityIds: null,
        storeName: null,
        descs: null,
        logoUrl: null,
        address: null,
        lng: null,
        lat: null,
        phone: null,
        licenseImages: null,
        productCount: null,
        status: 0,
        createTime: null,
        updateTime: null,
        salesCount: null,
        balance: null,
        totalMoney: null,
        isAudit: 0,
        account: null,
        password: null,
        shippingType: ["1"]
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.storeId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },


    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有店铺管理数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportStore(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 将逗号分隔的URL字符串转换为文件对象数组
    urlToFileList(urlStr) {
      if (!urlStr) return [];
      return urlStr.split(',').map(url => {
        const fileName = url.substring(url.lastIndexOf('/') + 1);
        return {
          name: fileName,
          url: url,
          uid: Date.now() + Math.random().toString(36).substr(2, 9) // 生成唯一ID
        };
      });
    },
    isImageFile(fileName) {
      const imageSuffix = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
      const suffix = fileName.split('.').pop().toLowerCase();
      return imageSuffix.includes(suffix);
    },

    handleFilePreview(file) {
      const { url, name } = file;
      if (this.isImageFile(name)) {
        this.previewImageUrl = url;
        this.imagePreviewVisible = true;
      } else {
        window.open(url, '_blank');
      }
    },
    // 添加图片预览方法
    previewImage(url) {
      this.previewImageUrl = url;
      this.imagePreviewVisible = true;
    },
  }
};
</script>
<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

/* 无图片占位符样式 */
.no-image-placeholder {
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background-color: #fafafa;
}
.upload-demo.el-upload--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.upload-demo.el-upload--disabled .el-upload-list {
  display: block !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 食品经营许可证容器 */
.food-license-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}

/* 食品经营许可证单项 */
.food-license-item {
  position: relative;
  display: inline-block;
  text-align: center;
}

.avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.small-avatar {
  width: 150px;
  height: 150px;
}

/* 无图片占位符样式 */
.small-placeholder {
  width: 150px;
  height: 150px;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
}

/* 并排按钮样式 */
.button-group {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
}

.preview-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.preview-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
</style>