dy-admin-manager/src/views/resetTeaming/components/resetPayList.vue

<!--  -->
<template>
  <div class="m-core">
    <save-form :inline="true"
    save-key="resetPayList"
    @submit='getList'
             :model="searchForm">
      <el-form-item>
        <el-select placeholder="缴费类型"
                   v-model="searchForm.paymentType"
                   clearable
                   filterable>
          <el-option v-for="(item, index) in payOrderTypeList"
                     :label="item.label"
                     :value="item.value"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="danger"
                   native-type="submit">搜索</el-button>
        <!-- <el-button @click="onReSet" type="primary">重置</el-button> -->
      </el-form-item>
    </save-form>
    <div class="topWrap">
      <div class="newBand"
           @click="newUserPay"
           v-if="teamStatus"
           v-permission="'musicGroupPaymentCalender/add'">新建学员缴费</div>
      <div class="newBand"
           v-if="teamStatus"
           v-permission="'/studentPayBase'"
           @click="setStudentPay">学员缴费设置</div>
      <!-- <div class="newBand"
      v-if="!isNewGropu"
           @click="onCreateQRCode">续费二维码</div> -->
    </div>
    <div class="tableWrap">
      <el-table style="width: 100%"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
                :data="tableList">
        <el-table-column
          align="center"
          prop="batchNo"
          width="200"
          label="缴费批次"
        >
        <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.batchNo }}</copy-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="paymentType"
                         label="缴费类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentType | userPaymentTypeFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="paymentPattern"
                         label="缴费方式">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentPattern | teamPayStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                          prop="auditStatus"
                          label="审核状态"
                          width="100px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.auditStatus | auditType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="addCourseTotalTime"
                         width="150px"
                         label="加课总时长">
        </el-table-column>
        <el-table-column align="center"
                         width="150px"
                         prop="courseCurrentPrice"
                         label="现价">
          <template slot-scope="scope">
            <div>
              {{ scope.row.courseCurrentPrice | moneyFormat }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         prop="status"
                         label="缴费状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | payTypeStatus }}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center"
                         prop="operatorName"
                         label="责任人">
        </el-table-column> -->
        <el-table-column align="center"
                         prop="memo"
                         width="200px"
                         label="备注">
                     <template slot-scope="scope">
                       <overflow-text width="200px" :text="scope.row.memo"/>
                     </template>
        </el-table-column>
        <el-table-column label="操作"
                         fixed="right"
                         min-width="200px">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="lookList(scope.row)"
                         v-permission="'musicGroupPaymentCalender/queryPage'">查看</el-button>
              <!-- <el-button type="text"
                         @click="lookDetail(scope.row)"
                         v-permission="'musicGroupPaymentCalender/auditListDetail'">查看</el-button> -->
              <el-button type="text"
                         @click="openChioseStudent(scope.row)"
                         v-if="scope.row.status != 'REJECT' && scope.row.status != 'AUDITING'&&teamStatus && scope.row.paymentType != 'MUSIC_APPLY' && scope.row.paymentType != 'ADD_STUDENT'"
                         v-permission="'musicGroupPaymentCalenderDetail/batchAdd'">添加学员</el-button>
              <el-button type="text"
                         v-if="teamStatus && scope.row.auditStatus === 'REJECT'"
                         v-permission="'musicGroupPaymentCalender/update'"
                         @click="resetPay(scope.row)">修改</el-button>

              <el-button type="text"
                       v-permission="'musicGroupPaymentCalender/delByBatchNo'"
                       @click="removeBatchNo(scope.row)">删除</el-button>

              <!-- <el-button type="text"
                         v-if="!isNewGropu&&teamStatus&&scope.row.paymentType!='MUSIC_APPLY'"
                         @click="onCreateQRCode(scope.row)">续费二维码</el-button> -->
              <!-- <el-button type="text"
                         v-if="isNewGropu"
                         v-permission="'musicGroup/findMusicGroupSubjectInfo/966'"
                         @click="onPreview(scope.row)">预览</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
      save-key="resetPayList"
      sync
      :total.sync="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
    <el-dialog
      :visible.sync="itemsVisible"
      title="查看缴费计划"
      width="1000px"
    >
      <pay-items
        v-if="itemsVisible"
        ref="payItems"
        :batchNo="viewDetail && viewDetail.batchNo"
        payUserType="STUDENT"
        :teamStatus="teamStatus"
        :teamType="teamType"
        :isNewGropu="isNewGropu"
        @lookDetail="lookDetail"
        @onPreview="onPreview"
        @openChioseStudent="openChioseStudent"
        @resetPay="resetPay"
        @close="itemsVisible = false"
        @onCreateQRCode="onCreateQRCode"
      />
    </el-dialog>
    <el-dialog :visible.sync="payVisible"
               :close-on-click-modal="false"
               width="500px"
               :title="diTitle">
      <el-form :model="payForm"
               :inline="true"
               label-width="120px"
               label-position="right"
               ref="payForm">
        <el-form-item label="缴费开始日期"
                      :rules="[
            { required: true, message: '请设置缴费开始日期', trigger: 'blur' },
          ]"
                      prop="startPaymentDate">
          <el-date-picker v-model.trim="payForm.startPaymentDate"
                          @change="changeStartTime"
                          type="date"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd"
                          placeholder="开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="缴费结束日期"
                      :rules="[
            { required: true, message: '请设置缴费结束日期', trigger: 'blur' },
          ]"
                      prop="deadlinePaymentDate">
          <el-date-picker v-model.trim="payForm.deadlinePaymentDate"
                          type="date"
                          :picker-options="beginDate(payForm.startPaymentDate)"
                          value-format="yyyy-MM-dd"
                          placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="缴费方式"
                      prop="paymentPattern"
                      :rules="[{ required: true, message: '请选择缴费方式' }]">
          <el-select placeholder="缴费方式"
                     style="width: 220px"
                     clearable
                     filterable
                     @change="paymentPatternChange"
                     v-model.trim="payForm.paymentPattern">
            <el-option :value="0"
                       label="按月"></el-option>
            <el-option :value="1"
                       label="按季"></el-option>
            <el-option :value="2"
                       label="一次性"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费有效期开始"
                      :rules="[
            {
              required: true,
              message: '请设置缴费有效期开始日期',
              trigger: 'blur',
            },
          ]"
                      prop="paymentValidStartDate">
          <el-date-picker v-model.trim="payForm.paymentValidStartDate"
                          type="date"
                          @change="changePaymentStartTime"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd"
                          placeholder="有效期开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="缴费有效期结束"
                      :rules="[{ required: true, message: '请设置缴费有效期结束日期',trigger: 'blur'}]"
                      prop="paymentValidEndDate">
          <el-date-picker v-model.trim="payForm.paymentValidEndDate"
                          type="date"
                          :picker-options="beginDate(payForm.paymentValidStartDate)"
                          value-format="yyyy-MM-dd"
                          placeholder="有效期结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="收费类型"
                      v-if="isNew"
                      :rules="[
            { required: true, message: '请选择收费类型', trigger: 'blur' },
          ]"
                      prop="type">
          <el-select v-model.trim="payForm.type"
                     style="width: 220px !important"
                     placeholder="课程类型">
            <el-option label="线上"
                       value="ONLINE"></el-option>
            <el-option label="线下"
                       value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
                      v-if="isNew"
                      :rules="[{ required: true, message: '请填写备注', trigger: 'blur' }]"
                      prop="memo">
          <el-input type="textarea"
                    style="width: 220px !important"
                    :rows="4"
                    placeholder="请填写备注"
                    v-model="payForm.memo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary"
                   v-if="isNew"
                   @click="newPayInfo">确 定</el-button>
        <el-button type="primary"
                   v-else
                   @click="resetPayDate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看"
               :visible.sync="reviewVisible"
               width="900px"
               destroy-on-close>
      <reviewDetail @close="reviewVisible = false"
                    @submited="getList"
                    :detail="viewDetail"
                    :musicGroupId="$route.query.id"
                    destroy-on-close />
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="reviewVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="payFormTitle"
               :visible.sync="userVisible"
               width="830px">
      <userPayForm v-if="userVisible"
                   @close="userVisible = false"
                   @submited="payedSubmited"
                   @changeActive="changeActive"
                   :organizationCourseUnitPriceSettings="organizationCourseUnitPriceSettings"
                   :rowDetail='activeRow'
                   :type="payFormType"
                   :baseInfo="baseInfo"
                   :paymentType="isNewGropu ? 0 : undefined"
                   :musicGroupId="$route.query.id" />
    </el-dialog>

    <el-dialog title="学员选择"
               :visible.sync="chioseStudentVisible"
               destroy-on-close
               append-to-body
               width='800px'>
      <setStudentFee @chioseStudent='chioseStudent'
                     ref='setStudentFee'
                     v-if="chioseStudentVisible"
                     :batchNo="batchNo"
                     :musicGroupPaymentCalenderId="musicGroupPaymentCalenderId"
                     @submited="chioseStudentSubmited"
                     :clearTale="clearStduent"></setStudentFee>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="chioseStudentVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitNewPay">确 定</el-button>
      </div>
    </el-dialog>

    <qr-code v-model="qrcodeStatus"
             title="续费二维码"
             :codeUrl="codeUrl" />

    <el-dialog title="选择预览声部"
               :visible.sync="dialogSubjectVisible"
               width="400px">
      <el-radio-group v-model="dialogSubjectId">
        <el-radio style="margin-right: 15px;"
                  border
                  size="medium"
                  :label="item.subjectId"
                  v-for="(item, index) in dialogSubjectList"
                  :key="index">{{ item.subName }}</el-radio>
      </el-radio-group>
      <div slot="footer">
        <el-button @click="dialogSubjectVisible = false">取 消</el-button>
        <el-button type="primary"
                   v-permission="'studentRegistration/getSubjectGoodsAndInfo/967'"
                   @click="onPreviewSubmit">预 览</el-button>
      </div>
    </el-dialog>

    <el-dialog title="预览"
               :visible.sync="previewVisible"
               v-if="previewVisible"
               class="previewContainer"
               width="400px">
      <subject-preview :subjectId="dialogSubjectId"
                       :calenderId="dialogCalenderId"></subject-preview>
      <div slot="footer">
        <el-button @click="previewVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import qs from "qs";
import dayjs from 'dayjs'
import QrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from '@/utils/validate'
import { addMusicGroupPaymentCalender, getMusicGroupPaymentCalender, resetMusicGroupPaymentCalender, delMusicGroupPaymentCalender, findMusicGroupSubjectInfo } from "@/api/buildTeam";
import { getAuditList } from '@/api/auditManager'
import {
  getOrganizationCourseUnitPriceSettings
} from '@/api/specialSetting'
import { musicGroupPaymentCalenderQueryPage, getMusicGroupStu, musicGroupPaymentCalenderDetailBatchAdd, musicGroupPaymentCalenderDelByBatchNo } from '../api'
import setStudentFee from './studentPayBase'
import userPayForm from '../modals/user-pay-form'
import payItems from '../modals/pay-items'
import schoolPayForm from '../modals/school-pay-form'
import review from '../modals/review'
import reviewDetail from '../modals/review-detail'
import subjectPreview from '@/views/resetTeaming/modals/subject-preview'
import { userPaymentType } from '@/constant'
import { objectToOptions } from '@/utils'
import { payOrderTypeList } from "@/utils/searchArray";
export default {
  props: ["baseInfo", "isNewGropu"],
  components: {
    pagination,
    setStudentFee,
    userPayForm,
    schoolPayForm,
    QrCode,
    review,
    reviewDetail,
    'pay-items': payItems,
    subjectPreview
  },
  data () {
    return {
      musicGroupStu: [],
      payFormType: "user",
      userVisible: false,
      schoolVisible: false,
      itemsVisible: false,
      reviewVisible: false,
      organizationCourseUnitPriceSettings: [],
      searchForm: {
        paymentType: null,
      },
      viewDetail: null,
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      isInit: false,
      diTitle: "新增缴费",
      payVisible: false,
      payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        paymentPattern: null,
        paymentValidStartDate: null,
        paymentValidEndDate: null,
        type: null,
        memo: null,
      },
      isNew: false,
      activeRow: null,
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate (time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      qrcodeStatus: false, // 生成二维码
      codeUrl: null,
      chioseStudentVisible: false,
      chioseStudentList: [],
      clearStduent: true,
      batchNo: "",
      musicGroupPaymentCalenderId: "",
      teamType: this.$route.query.type,
      payOrderTypeLists: payOrderTypeList,
      dialogSubjectVisible: false, // 预览声部
      dialogSubjectList: [],
      dialogSubjectId: null, // 选择预览声部编号
      dialogCalenderId: null, // 选择编号
      previewVisible: false
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    // 获取分部
    try {
      const res = await getOrganizationCourseUnitPriceSettings({
        rows: 9999
      })
      this.organizationCourseUnitPriceSettings = res.data.rows
    } catch (error) { }
    this.init();
  },
  computed: {
    payOrderTypeList () {
      return objectToOptions(userPaymentType);
    },
    payFormTitle () {
      if (this.isNew) {
        return this.payFormType === "user" ? "新增学员缴费" : "新增学校缴费";
      } else {
        return this.payFormType === "user" ? "修改学员缴费" : "修改学校缴费";
      }
    },
    teamStatus () {
      let type = this.$route.query.type;
      return type == 'teamDraft' || type == 'resetTeam'
    }
  },
  activated () {
    this.init();
  },
  methods: {
    async init () {
      try {
        const res = await getMusicGroupStu({
          musicGroupId: this.$route.query.id,
        });

      } catch (error) { }
      this.getList();
    },
    newUserPay () {
      this.payFormType = "user";
      this.isNew = true;
      this.activeRow = null
      this.userVisible = true;
    },
    newSchoolPay () {
      this.payFormType = "school";
      this.isNew = true;
      this.activeRow = null
      this.userVisible = true;
    },
    getList () {
      let musicGroupId = this.$route.query.id
      return getAuditList({
        page: this.rules.page,
        rows: this.rules.limit,
        search: musicGroupId,
        payUserType: 'STUDENT',
        paymentType: this.searchForm.paymentType,
      }).then(res => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows;
        }
      });
    },
    paymentPatternChange (val) {
      // if (val === 2) {
      //   this.payForm.paymentValidEndDate = null
      // }
    },
    onCreateQRCode (row) { // 生成报名二维码
      this.qrcodeStatus = true
      this.codeUrl = vaildStudentUrl() + '/#/musicGroupRenew?calenderId=' + row.id + '&id=' + this.$route.query.id
    },
    chioseStudent (val) {
      this.chioseStudentList = val;
    },
    newPay () {
      this.diTitle = "新增缴费";
      this.isNew = true;
      this.payVisible = true;
    },
    resetPay (row) {
      this.diTitle = "修改缴费";
      this.isNew = false;
      this.activeRow = row;
      this.payFormType = row.payUserType === 'SCHOOL' ? 'school' : 'user'
      this.userVisible = true;
    },
    changeActive(val) {
      if (this.$listeners.changeActive) {
        this.$listeners.changeActive(val)
      }
    },
    async chioseStudentSubmited () {
      try {
        await this.$confirm('缴费创建完成, 是否立即排课？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (this.$listeners.changeActive) {
          this.$listeners.changeActive({
            name: '5'
          })
        }
      } catch (error) { }
    },
    detelePay (row) {
      let id = row.id;
      this.$confirm(`确定删除该缴费周期?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMusicGroupPaymentCalender({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => { });
    },
    lookList(row) {
      this.viewDetail = row
      this.itemsVisible = true
    },
    lookDetail (row) {
      let query = this.$route.query;
      this.$route.query.paymentId = row.id;
      this.viewDetail = row;
      if (row.payUserType === "SCHOOL") {
        this.reviewVisible = true;
      } else {
        this.$router.push({ path: "/business/strudentPayInfo", query });
      }
    },
    setStudentPay () {
      let query = this.$route.query;
      this.$router.push({ path: "/business/studentPayBase", query });
    },
    async removeBatchNo (row) {
      try {
        await this.$confirm('是否确认删除该缴费批次?', '提示', {
          type: 'warning',
        })
        await musicGroupPaymentCalenderDelByBatchNo({batchNo: row.batchNo})
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {}
    },
    newPayInfo () {
      this.$refs["payForm"].validate((res) => {
        if (res) {
          /**
           *   payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        type: null,
        memo: null
      },
           *
           */
          this.chioseStudentVisible = true;
          return;
        }
      });
    },
    submitNewPay () {
      if (this.chioseStudentList.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }

      let obj = {};
      obj.userIdList = this.chioseStudentList.map((stu) => {
        return stu.userId;
      });
      obj.batchNo = this.batchNo;
      musicGroupPaymentCalenderDetailBatchAdd(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.$refs.setStudentFee.clearTable();
          this.payVisible = false;
          this.chioseStudentVisible = false;
          // this.$refs.payItems?.getList()
          this.getList();

        }
      });
    },
    resetPayDate () {
      resetMusicGroupPaymentCalender({
        id: this.activeRow.id,
        startPaymentDate: this.payForm.startPaymentDate,
        deadlinePaymentDate: this.payForm.deadlinePaymentDate,
        paymentValidStartDate: this.payForm.paymentValidStartDate
          ? dayjs(this.payForm.paymentValidStartDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidStartDate,
        paymentValidEndDate: this.payForm.paymentValidEndDate
          ? dayjs(this.payForm.paymentValidEndDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidEndDate,
        paymentPattern: this.payForm.paymentPattern,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.payVisible = false;
          this.getList();
        }
      });
    },
    changeStartTime (val) {
      this.payForm.deadlinePaymentDate = this.dateAddDays(val, 3);
    },
    changePaymentStartTime (val) {
      this.payForm.paymentValidEndDate = null;
    },
    dateAddDays (dataStr, dayCount) {
      let strdate = dataStr; //日期字符串
      let isdate = new Date(strdate.replace(/-/g, "/")); //把日期字符串转换成日期格式
      isdate = new Date((isdate / 1000 + 86400 * dayCount) * 1000); //日期加1天
      let pdate =
        isdate.getFullYear() +
        "-" +
        (isdate.getMonth() + 1) +
        "-" +
        isdate.getDate(); //把日期格式转换成字符串
      return pdate;
    },
    beginDate (end) {
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReSet () {
      this.searchForm = { payUserType: null };
    },
    openChioseStudent (row) {
      this.chioseStudentVisible = true;
      this.batchNo = row.batchNo;
      this.musicGroupPaymentCalenderId = row.id
    },
    async payedSubmited (data) {
      try {
        await this.getList();
        // if (!this.isNewGropu) {
        //   this.chioseStudentVisible = true;
        //   if (data) {
        //     this.musicGroupPaymentCalenderId = data.musicGroupPaymentCalenderId;
        //   }
        // }
      } catch (error) { }
    },
    async onPreview (row) { // 开始预览
      this.dialogCalenderId = row.id
      const musicGroupId = this.$route.query.id
      await findMusicGroupSubjectInfo({ musicGroupId: musicGroupId }).then(res => {
        if (res.code == 200) {
          this.dialogSubjectList = res.data.musicGroupSubjectPlans
          this.dialogSubjectVisible = true
        } else {
          this.$message.warning('没有可预览的声部')
        }
      })
    },
    onPreviewSubmit () {
      this.previewVisible = true
    }
  },
  watch: {
    chioseStudentVisible () {
      this.chioseStudentList = [];
    },
    payVisible (val) {
      if (!val) {
        this.payForm = {
          startPaymentDate: null,
          paymentPattern: null,
          paymentValidStartDate: null,
          paymentValidEndDate: null,
          type: null,
          memo: null,
          deadlinePaymentDate: null,
        };
        this.$refs["payForm"].resetFields();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.topWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 10px;
  }
}
.left-code,
.right-code {
  // width: 50%;
  // float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}
.previewContainer {
  /deep/.el-dialog__body {
    padding: 0;
  }
}
</style>