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

<script setup>
import { ref,nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { ApprovalStatus,applyApprovalList } from '../use-config'

const props = defineProps({
  isAddApplyHintShow:{//弹窗显示
    type:Boolean,
    default:false
  },
  applyInfo:{//申请信息 
    type:Object,
    default:()=>{
      return {
        applyType:1,//0 账号禁用 1 信息重复
        applyData:[]
      }
    }
  }
})

const emit = defineEmits([
  'closeDialog',
  'overBannedList',
  'applyActiveSuccess',
  'close'
])

const columnList = applyApprovalList

const  applyData = ref([])
const dataIndex = ref(0)

const tableLoading = ref(false)
const tableData = ref([])
const hintText = ref('')
function getTableData(){

  tableLoading.value = true
  //如果是申请启用,则只展示一条数据
  if(props.applyInfo.applyType===0){
    applyData.value = props.applyInfo.applyData
    tableData.value = [applyData.value[0]]
    dataIndex.value = 0
  }
  //如果是申请信息重复,则展示全部数据
  else{
    tableData.value = props.applyInfo.applyData
    dataIndex.value = 0
  }
  nextTick(()=>{
    tableLoading.value=false
  })
}

const applyReason = ref('')
async function handleApprove(getNext=true){
  if(getNext){
    if(!applyReason.value.length){
      ElMessage.warning('请输入申请理由')
      return
    }
    const {UserName,CompanyName,Position,Mobile} = applyData.value[dataIndex.value]
    //调用申请接口
    const res = await etaTrialInterence.applyEnable({
      UserName,CompanyName,Position,Mobile,
      ApplyReasons:applyReason.value
    })
    if(res.Ret!==200) return 
    ElMessage.success('提交成功')
    //申请成功 在父页面将该记录删除
    emit('applyActiveSuccess',applyData.value[dataIndex.value]) 
  }
  applyReason.value=''
  getNextTableData()
}

function getNextTableData(){
  dataIndex.value++
  const length = applyData.value.length
  if(length-1>=dataIndex.value){
    tableData.value = [applyData.value[dataIndex.value]]
  }else{
    closeDialog()
  }
}

function closeDialog(){
  //清空数据什么的
  applyReason.value=''
  tableData.value=[]
  applyData.value=[]
  dataIndex.value=0

  emit("close");
  if(props.applyInfo.applyType===0){
    emit('overBannedList')
    return
  }
  if(props.applyInfo.applyType===1){
    emit('overRepeatList')
    return
  }
  
}
</script>

<template>
<!-- 新增申请 提示弹窗 弹窗 -->
  <div class="add-apply-hint-dialog">
    <el-dialog
      v-if="isAddApplyHintShow"
      :model-value="isAddApplyHintShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="提示"
      @close="handleApprove(false)"
      width="889px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <p class="hint">{{hintText}}</p>
        <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
            placeholder="请输入申请理由"
            v-model="applyReason"
            :rows="3"
          />
        </div>
      </div>
      <div class="foot-container">
        <template v-if="applyInfo.applyType===0">
          <el-button type="primary" @click="handleApprove">申请启用</el-button>
          <el-button @click="handleApprove(false)">取 消</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="closeDialog">知道了</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.add-apply-hint-dialog{
  .dialog-container{
    .table-wrap{
      margin-top:20px;
    }
    .apply-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;
  }
}
</style>