优化

MrShi

2 天以前 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaWithdrawRecordWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,353 @@
<template>
  <GlobalWindow
      :title="title"
      width="100%"
      :visible.sync="visible"
  >
      <div class="detail-box">
        <div class="header">
          <div  class="header-b">基本信息</div>
          <div v-if="form.status ==0" class="header-orange">待审批</div>
          <div v-if="form.status ==1" class="header-green">已通过</div>
          <div v-if="form.status ==2" class="header-red">已驳回</div>
        </div>
        <div class="info-item">
          <div class="info-item-a">经销商名称：<span>{{form.shopName || ''}}</span> </div>
          <div class="info-item-a">门店ID：<span>{{form.shopCode || ''}}</span></div>
          <div class="info-item-a">申请时间：<span>{{form.createDate || ''}}</span></div>
        </div>
        <div class="info-item"></div>
      </div>
      <div class="detail-box">
        <div class="header">
          <div  class="header-b">提现信息</div>
        </div>
        <div class="info-item">
          <div class="info-item-a">提现金额：<span class="orange">ï¿¥{{(form.amount || 0).toFixed(2)}}</span> </div>
          <div class="info-item-a"> </div>
          <div class="info-item-a"> </div>
        </div>
        <div class="info-item">
          <div class="info-item-a">户名：<span  >{{ form.name||'' }}</span> </div>
          <div class="info-item-a">账号：<span  >{{ form.bankAccount||'' }}</span> </div>
          <div class="info-item-a">银行：<span  >{{ form.bankName||'' }}</span> </div>
        </div>
        <div class="info-item"></div>
      </div>
      <div class="detail-box">
        <div class="header">
          <div  class="header-b">审核流程</div>
        </div>
        <div class="info-item">
          <div class="time-line">
            <el-timeline :reverse="true">
              <el-timeline-item
                  v-for="(item, index) in logList"
                  :key="index"
                  color="#2991FF"
                  size="large"
                  type="primary"
              >
                <div class="ml10">
                  <div class="list-title">{{ item.title }}
                    <i  v-if="item.status ==1"  class="el-icon-success green"></i>
                    <i  v-if="item.status ==2"  class="el-icon-error red"></i>
                  </div>
                  <div class="list-company"><span>{{item.info }}</span><span style="margin-left: 10px">{{item.createTime }}</span></div>
                  <div class="list-company1" v-if="item.status ===1"><span>打款凭证：</span>
                     <div v-if="item.files && item.files.length"; style="display: block;margin-left: 100px;">
                       <el-image
                          v-for="file in item.files "
                          :key="'file_'+file.fileurl"
                          style="margin-right: 20px; width: 100px; height: 100px; border-radius: 2px;"
                          :src="file.fileFullUrl"
                          :preview-src-list="[file.fileFullUrl]"
                      ></el-image>
                     </div>
                    <span v-else>无</span>
                  </div>
                  <div class="list-company1"  v-if="item.status ===1"><span>打款银行：</span><span>{{item.payBank||'-' }}</span></div>
                  <div class="list-company1"  v-if="item.status ===1||item.status ==2"><span>审核备注：</span><span>{{item.auditRemark||'' }}</span></div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    <div  v-if="form && form.status == 0">
      <p class="tip-header" >申请审批</p>
      <el-form :model="checkForm" ref="checkForm" :rules="rules" label-width="110px" label-suffix="："  style="margin-left: 20px;width: 500px;" inline >
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="checkForm.status">
            <el-radio :label="1">通过</el-radio>
            <el-radio  :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="打款凭证" prop="payFileList" v-if="checkForm.status ==1">
          <div style="margin-left: 150px">
          <UploadImage
              :fileList="checkForm.payFileList"
              :uploadData="{folder:'transfer'}"
              @beginUpload="isUploading=true"
              @endUpload="isUploading=false"/>
          <p class="tip-warn">
            å»ºè®®å°ºå¯¸ï¼š750px X 750px，上限6å¼ 
            æ”¯æŒpng、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
          </p>
          </div>
        </el-form-item>
        <el-form-item label="打款银行" prop="payBank" v-if="checkForm.status ==1">
          <el-input v-model="checkForm.payBank" placeholder="请输入打款银行"  style="width: 350px"  v-trim/>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemark">
          <el-input v-model="checkForm.auditRemark" placeholder="请输入审核备注" type="textarea"  style="width: 350px; " rows="6" v-trim/>
        </el-form-item>
      </el-form>
      <div class="info-item-a"></div>
    </div>
    <template  v-slot:footer>
      <el-button :loading="isWorking" @click="confirmDo" v-if="form && form.status ==0" :type="checkForm.status==2?'danger':'primary'"  >{{checkForm.status==2?'审核驳回':'审核通过'}}</el-button>
      <el-button @click="visible=false">返回</el-button>
    </template>
  </GlobalWindow>
</template>
<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import UploadImage from '@/components/common/UploadImage'
export default {
  name: 'OperaShopInfoWindow',
  extends: BaseOpera,
  components: { GlobalWindow, UploadImage },
  data () {
    return {
      title: '',
      visible: false,
      tabelHeight: null,
      isUploading: false,
      form: {},
      logList: [],
      checkForm: {
        id: '',
        status: '',
        auditRemark: '',
        payBank: '',
        payFileList: null
      },
      rules: {
        status: [
          { required: true, message: '请选择审核结果' }
        ]
      }
    }
  },
  created () {
    this.config({
      module: '提现申请表',
      api: '/business/withdrawRecord',
      'field.id': 'id',
      'field.main': 'id'
    })
  },
  methods: {
    confirmDo () {
      this.$refs.checkForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.$dialog.confirm('您确定提交该审批结果吗？', '操作提示', {
          confirmButtonText: this.checkForm.status === 1 ? '确认通过' : '确定驳回',
          type: 'warning'
        })
          .then(() => {
            this.isWorking = true
            this.api.updateById(this.checkForm)
              .then(() => {
                this.$tip.apiSuccess('审批成功')
                this.loadInfo()
                this.$emit('success')
              }).catch(e => {
                this.$tip.apiFailed(e)
              })
              .finally(() => {
                this.isWorking = false
              })
          })
          .catch(e => {

          })
        // è°ƒç”¨æ–°å»ºæŽ¥å£
      })
    },
    loadInfo () {
      this.api.detail(this.form.id).then(res => {
        this.form = res || this.form
        this.logList = []
        if (this.form.status == 1) {
          this.logList.push({ title: '平台审核通过', info: this.form.auditUserName, createTime: this.form.auditTime || '', status: 1, files: this.form.payFileList || [], bank: this.form.payBank || '', auditRemark: this.form.auditRemark || '' })
        } else if (this.form.status == 2) {
          this.logList.push({ title: '平台审核驳回', info: this.form.auditUserName, createTime: this.form.auditTime || '', status: 2, auditRemark: this.form.auditRemark || '' })
        }
        this.logList.push({ title: '经销商发起提现申请', info: '恒达机械销售有限公司 ', createTime: this.form.createDate || '', status: 0 })
      })
    },
    open (title, info) {
      this.title = title
      this.visible = true
      this.form = info || {}
      this.loadInfo()
      this.logList = []
      this.checkForm = {
        id: info.id,
        status: 1,
        auditRemark: '',
        payBank: '',
        payFileList: []
      }
    }
  }
}
</script>
<style lang="scss"  scoped>
.platgroup_tabs {
  flex: 1;
  display: flex;
  border-bottom: 1px solid #dfe2e8;
  margin-bottom: 30px;
  .tab {
    color: #666666;
    margin-right: 40px;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid #fff;
  }

  .active {
    font-weight: 500;
    font-size: 15px;
    color: #216EEE;
    border-bottom: 2px solid #216EEE;
  }
}
.table-pagination{
  position: fixed !important;
  bottom: 50px;
}
.header-b{
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}
.confirmbtn1{
  color: #FFFFFF;
  background-color: #0e83d1!important;
  border-color: #0e83d1!important;
}
.confirmbtn2{
  color: #FFFFFF;
  background-color: red!important;
  border-color: red!important;
}
.header-green{
  display: inline-block;
  font-size: 12px;
  border: 1px solid green;
  padding: 2px 10px;
  margin-left: 20px;
  color: green;
  border-radius: 5px ;
}
.header-red{
  display: inline-block;
  font-size: 12px;
  border: 1px solid red;
  padding: 2px 10px;
  margin-left: 20px;
  color: red;
  border-radius: 5px ;
}
.header-orange{
  display: inline-block;
  font-size: 12px;
  border: 1px solid orange;
  padding: 2px 10px;
  margin-left: 20px;
  color:  orange;
  border-radius: 5px ;
}
.header-btn{
  display: inline-block;
  border: none;
  padding: 2px 10px;
  margin-left: 20px;
}
.info-item{
  display: flex;
  width: 100%;
  margin: 15px;
}
.info-item-a{
  flex: 1;
  font-size: 14px;

}
.info-item-a span{
  font-weight: 600;
}
.info-item-a  .btn{
  font-size: 12px !important;
  cursor: pointer !important;
}

.time-line {
  margin-top: 20px;
  margin-left: 20px;
}
.list-title {
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  //color: #181b1e;
  margin-bottom: 5px;
}
.list-company {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #596878;
  margin-bottom: 15px;
}
.list-company1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-bottom: 15px;
}
.list-desc {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #596878;
}
//左侧时间
.time {
  color: #409eff;
  position: absolute;
  left: -94px;
  top: 1px;
  .year {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #20354a;
  }
  .day {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: black;
    text-align: right;
    margin-top: 0px;
  }
}
</style>