crm_front_v3/src/views/custom_manage/etaTrial/compontents/applyApprovalDialog.vue

<script setup>
import { ref,nextTick } from 'vue'
import {etaTrialInterence}from '@/api/modules/crmApi.js';
import { ElMessage } from 'element-plus'
import { ApprovalStatus,applyApprovalList } from '../use-config'

const props = defineProps({
  isApplyApprovalDialogShow: {
    type: Boolean
  },
  applyInfo: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits([
  'approved',
  'close'
])


const columnList = applyApprovalList//表格列

const tableLoading = ref(false)
const tableData = ref([])
function getTableData(){
  tableLoading.value = true
  tableData.value = props.applyInfo.applyData
  nextTick(()=>{
    tableLoading.value=false
  })
}


const rejectReason = ref('')//驳回理由
const applyStatus = ref(1)//审批状态
async function handleApprove(){
  //提交这条审批
  let res = null
  if(applyStatus.value===1){
    res = await etaTrialInterence.agreeApply({
      ApprovalId:tableData.value[0].ApprovalId
    })
  }else{
    if(!rejectReason.value.length){
      ElMessage.warning('请填写驳回理由')
      return
    }
    res = await etaTrialInterence.rejectApply({
      ApprovalId:tableData.value[0].ApprovalId,
      RejectReason:rejectReason.value
    })
  }
  if(res.Ret!==200) return 
  ElMessage.success(applyStatus.value===1?'通过成功':'驳回成功')
  emit('approved')
  closeDialog()
}
function closeDialog(){
  //清空数据什么的
  applyStatus.value=1
  rejectReason.value=''
  emit("close");
}

</script>

<template>
<!-- 申请账号审批/申请启用审批 弹窗 -->
  <div class="apply-approval-dialog">
    <el-dialog
      :model-value="isApplyApprovalDialogShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="`申请${applyInfo.applyType===0?'启用':'账号'}审批`"
      @close="closeDialog"
      width="889px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <div class="table-wrap">
          <el-table :data="tableData" border v-loading="tableLoading">
            <el-table-column v-for="column in columnList" :key="column.label"
              align="center"
              :prop="column.key"
              :label="column.label"
              :min-width="column.minWidth"
            />
          </el-table>
        </div>
        <div class="apply-reason" v-if="applyInfo.applyType===0">
          <p>申请理由</p>
          <textarea
            v-model="applyInfo.applyData[0].ApplyReasons"
            disabled
            :rows="3"
          />
        </div>
        <div class="apply-form">
          <div class="apply-status">
            <span>审批状态</span>
             <el-radio-group v-model="applyStatus">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2" class="color-hint">驳回</el-radio>
            </el-radio-group>
          </div>
          <div class="reject-reason" v-if="applyStatus===2">
            <span>驳回理由</span>
            <textarea
              v-model="rejectReason"
              placeholder="请输入驳回理由"
              :rows="3"
            />
          </div>
        </div>
      </div>
      <div class="foot-container">
        <el-button type="primary" @click="handleApprove">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss">
</style>
<style scoped lang="scss">
.apply-approval-dialog{
  .dialog-container{
    /* .table-wrap{} */
    .apply-reason{
      margin-top:30px;
      padding-bottom:30px;
      border-bottom: 1px dashed #DCDFE6;
    }
    .apply-form{
      margin-top:30px;
      /* .apply-status{} */
      .reject-reason{
        margin-top:30px;
      }
    }
    textarea{
      width:100%;
      margin-top: 10px;
      padding:10px;
      border-radius: 4px;
      box-sizing: border-box;
      border-color: #DCDFE6;
    }
  }
  .foot-container{
    text-align: center;
    padding-bottom: 40px;
    margin-top: 60px;
  }
}
  .apply-status{
    .el-radio{
      //更改单选框的样式
    :deep(.el-radio__inner){
      background: transparent;
      &::after{
        width:6px;
        height:6px;
        background-color: #409EFF;
      }
    }
    }
  }
  .color-hint{
    //更改驳回的样式
    &.is-checked{
      .el-radio__inner{
        border-color: #C54322;
        &::after{
          background-color: #C54322;
        }
      }
      .el-radio__input{
        &.is-checked{//我真服了
          +.el-radio__label{
            color: #C54322;
          }
        }
      }
    }
  }
</style>