yiliangyiyun-pc-jj/src/views/contractManagement/storageContractRecord.vue

<!--代储合同记录-->
<template>
  <div>
    <div class="top-btn">
      <div class="right">
        <el-date-picker class="date-select" size="small" style="margin: 0 10px 0 0" value-format="yyyy-MM-dd"
          v-model="value2" @change="datechange" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="结算时间起" end-placeholder="结算时间止" :picker-options="pickerOptions">
        </el-date-picker>
        <!--  -->
        <el-button type='primary' @click='addRecord' v-if="isSHowAddRecordBtn">生成代储记录</el-button>
        <el-button type="primary" @click="exportlist"
          v-hasPermission="`contractManagement.dsContract.dsContractInfo.export`" v-if="isSHowExportBtn">导出
        </el-button>
        <el-button type="primary" @click="collectMoney"
          v-hasPermission="`contractManagement.dsContract.dsContractInfo.shou`" v-if="isSHowExportBtn">收费
        </el-button>
        <el-button type='primary' @click='collectMoneyRecord' v-if="isSHowExportBtn">收费记录</el-button>
      </div>
    </div>
    <div class="content-top">
      <div class="content-top-item">合同编号：{{routeData.contractNo}}</div>
      <div class="content-top-item">买方：{{routeData.buyer}}</div>
      <div class="content-top-item">合同量：{{routeData.weight}}</div>
      <div class="content-top-item">已完成量：{{routeData.completedQuantity}}</div>
      <div class="content-top-item">应收代储费：{{routeData.total}}</div>
      <div class="content-top-item">已收代储费：{{routeData.received}}</div>
    </div>
    <div v-show="isShowRecord">
      <el-table :data="recordList" ref="table" style="width: 100%; margin-top: 20px" border height="calc(100% - 190px)">
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column class="table_td" prop="goodsName" label="货名"></el-table-column>
        <el-table-column class="table_td" prop="storageFeeDate" label="日期" width="150"></el-table-column>
        <el-table-column class="table_td" prop="storageVolume" label="当日入库量（吨）"></el-table-column>
        <el-table-column class="table_td" prop="deliveryVolume" label="当日出库量（吨）"></el-table-column>
        <el-table-column class="table_td" prop="dailyBillingReserves" label="当日计费储量（吨）"></el-table-column>
        <el-table-column class="table_td" prop="storageFee" label="代储费（元/吨天）"></el-table-column>
        <el-table-column class="table_td" prop="receivable" label="应收(元)"></el-table-column>
        <el-table-column class="table_td" prop="collectionEdPayable" label="操作" width="300">
          <template scope="scope">
            <el-button @click="storageFeeLook(scope.row)">代储费</el-button>
            <el-button @click="warehousingLook(scope.row)">入库</el-button>
            <el-button @click="stop(scope.row)" v-if="scope.row.endFlag==0">终止</el-button>
            <el-button @click="cancelTermination(scope.row)" v-if="scope.row.endFlag==1&&scope.$index==0">取消终止
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="deptBudgetTotal">
      </el-pagination>
    </div>
    <!-- 修改代储费 -->
    <el-dialog :visible.sync="editStorageFee" :append-to-body="true" title="修改代储费" class="sk-dialog"
      width="400px!important">
      <div class="sf-dialog">
        <div class="row">
          <div class="left">代储费（元/吨·天）</div>
          <div class="right">
            <el-input type="number" @mousewheel.native.prevent v-model="editRecordObj.storageFee" placeholder="请输入代储费"
              maxlength="100" size="small" />
          </div>
        </div>
        <div class="row">
          <div class="left">起用日期</div>
          <div class="right">
            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeStartdate" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row row-last">
          <el-button @click="editStorageFee = false">取消</el-button>
          <el-button @click="editStorageFeeSubmit" type='primary'>提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 入库 -->
    <el-dialog :visible.sync="editWarehousing" :append-to-body="true" title="修改入库量" class="sk-dialog"
      width="400px!important">
      <div class="sf-dialog">
        <div class="row">
          <div class="left">当日入库量（吨）</div>
          <div class="right">
            <el-input type="number" @mousewheel.native.prevent v-model="editWarehousingObj.storageVolume"
              placeholder="请输入入库量" maxlength="100" size="small" />
          </div>
        </div>
        <div class="row">
          <div class="left">入库日期</div>
          <div class="right">
            <el-input type="text" @mousewheel.native.prevent v-model="rowData.storageFeeDate" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row row-last">
          <el-button @click="editWarehousing = false">取消</el-button>
          <el-button @click="editWarehousingSubmit" type='primary'>提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 生成记录 -->
    <el-dialog :visible.sync="addRecoredDialog" :append-to-body="true" title="生成记录" class="scjl-dialog"
      width="400px!important">
      <div class="sf-dialog">
        <div class="row">
          <div class="left">代储费（元/吨·天）</div>
          <div class="right">
            <el-input type="number" @mousewheel.native.prevent v-model="recordObj.storageFee" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row">
          <div class="left">起算日期</div>
          <div class="right">
            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeStartdate" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row">
          <div class="left">预计截止日期</div>
          <div class="right">
            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeEnddate" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row">
          <div class="left">起算重量（吨）</div>
          <div class="right">
            <el-input type="number" @mousewheel.native.prevent v-model="recordObj.storageFeeWeight" placeholder=""
              maxlength="100" size="small" disabled />
          </div>
        </div>
        <div class="row row-last">
          <el-button @click="addRecoredDialog = false">取消</el-button>
          <el-button @click="addRecoredSubmit" type='primary'>提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 收费 -->
    <el-dialog :visible.sync="collectForm" :append-to-body="true" title="收费" class="sk-dialog">
      <div class="sf-dialog">
        <div class="row">
          <div class="left">金额（元）</div>
          <div class="right">
            <el-input type="number" @mousewheel.native.prevent v-model="chargeObj.amountMoney"
              placeholder="请输入本次收款金额（元）" maxlength="100" size="small" />
          </div>
        </div>
        <div class="row">
          <div class="left">收款日期</div>
          <div class="right">
            <el-date-picker v-model="chargeObj.collectionDate" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </div>
        <div class="row">
          <div class="left">收款截图</div>
          <el-upload class="avatar-uploader" action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <div v-if='imageUrl.length>0'>
              <div style='display:inline-block;' v-for='item in imageUrl'>
                <img :src="item" class="avatar" />
              </div>
            </div>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="row row-last">
          <el-button @click="collectForm = false">取消</el-button>
          <el-button @click="collectSubmit" type='primary'>提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 收费记录 -->
    <el-dialog :visible.sync="dialogVisible" title="收费记录" class="sfjl-dialog">
      <el-table :data="sfRecordList" ref="table" style="width: 100%; margin-top: 20px" border
        height="calc(100% - 190px)">
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column class="table_td" prop="amountMoney" label="金额(元)"></el-table-column>
        <el-table-column class="table_td" prop="collectionDate" label="收费日期"></el-table-column>
        <el-table-column class="table_td" prop="updateDate" label="操作日期"></el-table-column>
        <el-table-column class="table_td" prop="operator" label="操作人"></el-table-column>
        <el-table-column class="table_td" prop="collectionScreenshot" label="附件">
          <template slot-scope="scope">
            <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
              src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
            <span v-if="scope.row.addressUrlArray != null">
              {{scope.row.addressUrlArray.length == 0? "":scope.row.addressUrlArray.length}}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
        @on-cancel="handleClose">
        <div class="image-list">
          <el-image v-for="(item,index) in fjImageList" style="width: 100px; height: 100px" :src="item" fit="fill"
            :preview-src-list="fjImageList"></el-image>
        </div>
      </WinseaContentModal>
      <div class="close-sfju-dialog">
        <el-button type='primary' @click='dialogVisible=false'>关闭</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script>
  import {
    dayjs,
    EventBus
  } from 'base-core-lib'
  import {
    downloadFile
  } from '@/utils/batchDown'
  import {
    storageFeeRecordList,
    addStorageFeeRecord,
    editStorageRecordInfo,
    storageFeeRecordCharge,
    feeRecord,
    stopStorageFeeRecord,
    exportStorageFee
  } from '@/model/contarct/index'
  import download from '../../components/WsDownload/download'
  import WsUpload from '@/components/WsUpload'
  export default {
    components: {
      WsUpload
    },
    watch: {},
    data() {
      return {
        date: {
          year: dayjs().format('YYYY'),
          month: dayjs().format('MM'),
        },
        termination: true,
        fjImageList: [],
        sfRecordList: [],
        //公司id，合同id，金额，收费截图，收费日期，操作人
        chargeObj: {
          compId: '',
          contractId: '',
          amountMoney: '',
          collectionScreenshot: '',
          collectionDate: "",
          operator: '',
        },
        editWarehousingObj: {
          id: '',
          storageVolume: '',
        },
        editRecordObj: {
          id: '',
          storageFee: '',
          flag: 1
        },
        pickerOptions: {},
        isSHowExportBtn: false,
        isSHowAddRecordBtn: false,
        recordObj: {
          storageFeeStartdate: ''
        },
        editWarehousing: false,
        editStorageFee: false,
        addRecoredDialog: false,
        compId: localStorage.getItem('ws-pf_compId'),
        id: '',
        accessoryTFs: false,
        appendixIdss: [],
        isShowRecord: false,
        collectForm: false,
        routeData: {},
        //分页
        currentPage: 1,
        pageSize: 10,
        recordList: [],
        deptCircularPage: {},
        deptBudgetTotal: 0,
        dialogVisible: false,
        //上传截图路径
        imageUrl: [],
        rowData: {},
        value2: [],
      }
    },
    destroyed: function() {
      this.editWarehousing = false
      this.editStorageFee = false
      this.addRecoredDialog = false
      this.isShowRecord = false
    },
    mounted() {
      let that = this
      this.routeData = {
        contractNo: this.$route.query.contractNo,
        compId: localStorage.getItem('ws-pf_compId'),
        buyer: this.$route.query.buyer,
        weight: this.$route.query.weight,
        completedQuantity: this.$route.query.completedQuantity,
        total: this.$route.query.total,
        received: this.$route.query.received,
        storageFee: this.$route.query.storageFee,
        storageFeeStartdate: this.$route.query.storageFeeStartdate,
        storageFeeEnddate: this.$route.query.storageFeeEnddate,
        storageFeeWeight: this.$route.query.storageFeeWeight,
        status: this.$route.query.status
      }
      this.recordObj = {
        storageFee: this.$route.query.storageFee,
        storageFeeStartdate: this.$route.query.storageFeeStartdate,
        storageFeeEnddate: this.$route.query.storageFeeEnddate,
        storageFeeWeight: this.$route.query.storageFeeWeight,
      }
      this.value2 = [this.$route.query.storageFeeStartdate, this.$route.query.storageFeeEnddate]
      this.pickerOptions = {
        disabledDate(time) {
          return (time.getTime() < (new Date(that.recordObj.storageFeeStartdate).getTime() - 86400000)) || (time
            .getTime() >
            new Date(that.recordObj.storageFeeEnddate).getTime())
        }
      }
      this.getList()
    },
    methods: {
      // 收费记录附件
      fujian(row) {
        this.id = row.id
        this.accessoryTFs = true
        this.appendixIdss = row.collectionScreenshot
        console.log(this.appendixIdss)
      },
      // 代储费
      storageFeeLook(row) {
        if (this.routeData.status == '已完成') {
          this.$message({
            message: '合同已完成，不可操作！',
            type: 'warning',
          })
          return
        }
        this.editRecordObj.id = row.id;
        this.editRecordObj.storageFee = row.storageFee
        this.editStorageFee = true

        // this.customerInfo = true
        // this.viewLock = true
        // this.getCustomerNumberCard(row)
      },
      // 入库
      warehousingLook(row) {
        if (this.routeData.status == '已完成') {
          this.$message({
            message: '合同已完成，不可操作！',
            type: 'warning',
          })
          return
        }
        this.rowData = row
        this.editWarehousingObj = {
          id: row.id,
          storageVolume: row.storageVolume,
        }
        this.editWarehousing = true

        // this.getCustomerNumberCard(row)
      },
      // 修改代储费
      editStorageFeeSubmit() {
        if (!this.editRecordObj.storageFee && this.editRecordObj.storageFee != 0) {
          this.$message({
            message: '代储费不能为空！',
            type: 'warning',
          })
          return
        }
        this.editRecordObj.storageFee = Number(this.editRecordObj.storageFee)
        if (this.editRecordObj.storageFee < 0 || this.editRecordObj.storageFee > 1000) {
          this.$message({
            message: '代储费输入错误,0-1000之间数字！',
            type: 'warning',
          })
          return
        }
        if (this.editRecordObj.storageFee.toString().indexOf('.') > -1) {
          if (this.editRecordObj.storageFee.toString().split('.')[1].length > 2) {
            this.$message({
              message: '代储费输入错误,最多保留两位小数！',
              type: 'warning',
            })
            return
          }
        }
        editStorageRecordInfo(this.editRecordObj)
          .toPromise()
          .then((response) => {
            this.$message.success('修改成功！')
            this.editStorageFee = false
            this.getList()
          })
      },
      // 修改入库量
      editWarehousingSubmit() {
        if (!this.editWarehousingObj.storageVolume && this.editWarehousingObj.storageVolume != 0) {
          this.$message({
            message: '入库量不能为空！',
            type: 'warning',
          })
          return
        }
        this.editWarehousingObj.storageVolume = Number(this.editWarehousingObj.storageVolume)
        if (this.editWarehousingObj.storageVolume < 0 || this.editWarehousingObj.storageVolume > 200000) {
          this.$message({
            message: '入库量输入错误,0-200000之间数字！',
            type: 'warning',
          })
          return
        }
        if (this.editWarehousingObj.storageVolume.toString().indexOf('.') > -1) {
          if (this.editWarehousingObj.storageVolume.toString().split('.')[1].length > 3) {
            this.$message({
              message: '代储费输入错误,最多保留三位小数！',
              type: 'warning',
            })
            return
          }
        }
        editStorageRecordInfo(this.editWarehousingObj)
          .toPromise()
          .then((response) => {
            this.$message.success('修改成功！')
            this.editWarehousing = false
            this.getList()
          })
      },
      // 收费记录
      collectMoneyRecord() {
        feeRecord({
            contractId: this.$route.query.contractId
          })
          .toPromise()
          .then((response) => {
            this.sfRecordList = response
            for (let i = 0; i < response.length; i++) {
              response[i].addressUrlArray = response[i].collectionScreenshot.split(',')
              this.fjImageList = response[i].collectionScreenshot.split(',')
            }
            // this.$message.success('修改成功！')
            // this.editWarehousing = false
            // this.getList()
          })

        this.dialogVisible = true
      },
      // 取消终止
      cancelTermination(row) {
        if (this.routeData.status == '已完成') {
          this.$message({
            message: '合同已完成，不可操作！',
            type: 'warning',
          })
          return
        }
        //判断当前时间是在预计终止前还是后
        let _stopData = new Date(this.$route.query.storageFeeEnddate).getTime()
        let _rowTime = new Date(row.storageFeeDate).getTime()
        if (_rowTime - _stopData < 0) {
          this.$confirm(
              '确定取消终止，继续收费？',
              '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
            .then(() => {
              addStorageFeeRecord({
                  contractNo: this.$route.query.contractNo,
                })
                .toPromise()
                .then((response) => {
                  this.$message.success('操作成功！')
                  this.getList()
                })
            })
            .catch(() => {
              this.$message.success('操作失败！')
              return false
            })
        } else {
          this.$confirm(
              '已达到预计终止日期，如需继续收费请前往合同修改终止日期？',
              '提示', {
                confirmButtonText: '去修改',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
            .then(() => {
              // addStorageFeeRecord({
              //     contractNo: this.$route.query.contractNo,
              //   })
              //   .toPromise()
              //   .then((response) => {
              //       this.$message.success('操作成功！')
              //     this.getList()
              //   })
            })
            .catch(() => {
              // this.$message.success('操作失败！')
              return false
            })
        }
      },
      // 终止
      stop(row) {
        if (this.routeData.status == '已完成') {
          this.$message({
            message: '合同已完成，不可操作！',
            type: 'warning',
          })
          return
        }
        // this.$confirm(
        //     '已达到预计终止日期，如需继续收费请前往合同修改终止日期？',
        //     '提示', {
        //       confirmButtonText: '确定',
        //       cancelButtonText: '取消',
        //       type: 'warning',
        //     }
        //   )
        //   .then(() => {

        //   })
        //   .catch(() => {
        //     return false
        //   })
        this.$confirm(
            row.storageFeeDate + '之后将不在计费，是否确定终止？',
            '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
          .then(() => {
            stopStorageFeeRecord({
                id: row.id,
                endFlag: 1,
                flag: 2
              })
              .toPromise()
              .then((response) => {
                this.$message.success('终止成功！')
                this.termination = false
                this.getList()
              })

          })
          .catch(() => {
            return false
          })
      },
      //生成代储费记录
      addRecord() {
        console.log(111)
        this.addRecoredDialog = true
      },
      // 时间筛选
      datechange() {
        this.getList()
      },
      // 导出
      async exportlist() {
        let _data = {
          compId: localStorage.getItem('ws-pf_compId'),
          contractNo: this.routeData.contractNo
        }
        const {
          data
        } = await exportStorageFee(
          _data, {}, {
            responseType: 'blob',
          }
        ).toPromise()
        downloadFile({
          res: data,
          fileName: `${
            this.date.year + (this.date.month ? `-${this.date.month}` : '')
          }代储费信息`,
          type: 'xls',
        })

      },
      //上传付款截图
      handleAvatarSuccess(e) {
        this.imageUrl.push(e.url)
      },
      // 查询列表
      getList() {
        storageFeeRecordList({
            compId: localStorage.getItem('ws-pf_compId'),
            contractNo: this.$route.query.contractNo,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          })
          .toPromise()
          .then((response) => {
            this.recordList = response.records
            if (response.records.length > 0) {
              this.isSHowExportBtn = true
              this.isShowRecord = true
            } else {
              this.isSHowAddRecordBtn = true
            }
          })
      },
      dateFormat(fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          // "M+": date.getMinutes().toString(),         // 分
          // "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
      // 收款
      collectMoney() {
        if (this.routeData.status == '已完成') {
          this.$message({
            message: '合同已完成，不可操作！',
            type: 'warning',
          })
          return
        }
        this.chargeObj = {
          compId: localStorage.getItem('ws-pf_compId'),
          contractId: this.$route.query.contractId,
          operator: localStorage.getItem('ws-pf_staffName'),
          collectionDate: this.dateFormat('YYYY-mm-dd', new Date())
        }
        this.collectForm = true
      },
      // 生成记录提交
      addRecoredSubmit() {
        this.$confirm(
            '提交后起算日期和起算重量不可修改，是否确定提交？',
            '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
          .then(() => {
            // // 添加记录
            addStorageFeeRecord({
                contractNo: this.$route.query.contractNo,
              })
              .toPromise()
              .then((response) => {
                this.getList()
              })

            this.addRecoredDialog = false
            this.isShowRecord = true
          })
          .catch(() => {
            return false
          })
      },
      // 收费提交
      collectSubmit() {
        if (!this.chargeObj.amountMoney && this.chargeObj.amountMoney != 0) {
          this.$message({
            message: '金额不能为空！',
            type: 'warning',
          })
          return
        }
        this.chargeObj.amountMoney = Number(this.chargeObj.amountMoney)
        if (this.chargeObj.amountMoney < 0 || this.chargeObj.amountMoney > 1000000) {
          this.$message({
            message: '金额输入错误,0-1000000之间数字！',
            type: 'warning',
          })
          return
        }
        if (this.chargeObj.amountMoney.toString().indexOf('.') > -1) {
          if (this.chargeObj.amountMoney.toString().split('.')[1].length > 2) {
            this.$message({
              message: '代储费输入错误,最多保留三位小数！',
              type: 'warning',
            })
            return
          }
        }
        if (!this.imageUrl) {
          this.$message({
            message: '请上传收费截图',
            type: 'warning',
          })
          return
        }
        this.chargeObj.collectionScreenshot = this.imageUrl.toString()

        this.$confirm(`确定提交收费信息？`, {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
        }).then(() => {
          storageFeeRecordCharge(this.chargeObj)
            .toPromise()
            .then((response) => {
              this.$message.success('收费成功！')
              this.chargeObj = {}
              this.collectForm = false
              this.getList()
            })
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`)
        this.getList()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader {
    position: relative;
    width: 80px;
  }

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

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

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #8890b1;
    border-radius: 5px;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border: 1px solid #8890b1;
    border-radius: 5px;
    display: block;
  }


  .top-btn {
    display: flex;
    justify-content: space-between;

    .el-date-editor {
      width: 220px !important;
    }

    .date-select {
      width: 240px;
    }
  }

  .top-btn-two {
    margin-top: 20px;

    .left {
      display: flex;
    }
  }

  .content-top {
    display: flex;
    margin-top: 20px;
  }

  .customer-item {
    margin-bottom: 0;
    display: flex;
  }

  .el-form-item__content {
    width: 100%;
    margin-left: 0 !important;
  }



  /deep/.el-form-item__content {
    margin-left: 0 !important;
    width: 200px;
  }

  .content-top-item {
    // background: red;
    margin-right: 20px;
  }

  .el-pagination {
    text-align: center;
  }

  .top-btn /deep/.el-date-editor {
    width: 300px !important;
  }

  .sk-dialog {
    /deep/.el-dialog {
      width: 300px !important;
    }
  }

  .sf-dialog {
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;

      .right {
        width: 200px;
      }
    }

    .row-last {
      justify-content: space-around;
    }
  }

  .close-sfju-dialog {
    width: 100%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>