新增

马宇豪

2024-11-21 cc3e08bda13360c88b7189e8f8d043b60783c7fb

 src/views/safetyReview/expertManage/checkProgress/index.vue

@@ -1,45 +1,36 @@
<template>
  <div class="form-container">
    <el-dialog
        v-model="dialogVisible"
        title="专家申请进度查询"
        width="550px"
        :before-close="handleClose"
        center
    >
      <el-form :model="state.form" size="default" ref="formRef" :rules="state.formRules" label-width="110px" >
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model.trim="state.form.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model.trim="state.form.phone" placeholder="请输入申报时预留的手机号"></el-input>
        </el-form-item>
        <el-form-item label="业务处室:" prop="roomId">
          <el-select v-model="state.form.roomId"  style="width: 100%" class="m-2" placeholder="请选择申请的业务处室">
            <el-option
                v-for="item in state.agencyList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>进度查询</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="pro-map">
    <el-form :model="queryParams" size="default" ref="formRef" inline :rules="formRules" label-width="110px" >
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model.trim="queryParams.idCard" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model.trim="queryParams.phone" placeholder="请输入申报时预留的手机号"></el-input>
      </el-form-item>
      <el-form-item label="业务处室:" prop="deptId">
        <el-cascader
            clearable
            placeholder="请选择申请的业务处室"
            v-model="queryParams.deptId"
            :options="deptList"
            :props="{ expandTrigger: 'hover', value: 'deptId',label: 'deptName',checkStrictly: true,emitPath: false}"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="onSubmit(formRef)" v-preReClick>进度查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="pro-map" v-if="showProgress">
      <button class="pro-btn-active">申请提交</button>
      <button class="pro-btn">
        <span>待评定</span>
      <button :class="(result.state == 4 ||result.state == 2) ?'pro-btn-active':result.state == 3?'pro-btn-red':result.state == 1?'pro-btn-blue':'pro-btn'">
        <span v-if="result.state == 1">待评定</span>
        <span v-if="result.state == 3">评定不符合</span>
        <span v-if="result.state == 2">评定通过</span>
      </button>
      <button class="pro-btn">
      <button :class="result.state == 4?'pro-btn-active':'pro-btn'">
        专家入库
      </button>
      <button class="pro-btn">
      <button :class="result.state == 4?'pro-download-active':'pro-download'">
        专家证书下载
      </button>
    </div>
@@ -50,7 +41,10 @@
import {ElMessage, ElMessageBox} from "element-plus"
import {verifyPhone, verifyIdCard} from "../../../../utils/validate"
import { getToken } from "@/utils/auth"
import {getExpertsList, queryApprove} from "@/api/form";
import {listOutDept} from "@/api/system/dept";

const { proxy } = getCurrentInstance();

let validatePhone = (rule, value, callback)=>{
  if(value === ''){
@@ -75,27 +69,34 @@
  }
}

const dialogVisible = ref(false)
const formRef = ref()
const handleClose = () => {
  reset();
  formRef.value.clearValidate();
  dialogVisible.value = false;
}


const state = reactive({
  form:{
    idCard: null,
const data = reactive({
  queryParams: {
    idCard: '',
    phone: '',
    roomId: null
    deptId: null
  },
  formRules:{
    idCard:[{ required: true, validator: verifyId, trigger: 'blur' }],
    phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
    roomId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
  }
    deptId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
  },
  result: {}
})

const {queryParams,formRules,result} = toRefs(data)
const deptList = ref([]);
onMounted(()=>{
  getDepList()
})

const showProgress = ref(false)
const formRef = ref()

function getDepList() {
  listOutDept({}).then(response => {
    deptList.value = proxy.handleTree(response.data, "deptId",'parentId','children');
  })
}

onMounted(()=>{

@@ -105,19 +106,36 @@
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {

      const res = await queryApprove(data.queryParams)
      if(res.code == 200){
        data.result = res.data
        showProgress.value = true
      }else{
        showProgress.value = false
        ElMessage.warning(res.msg)
      }
    } else {
      ElMessage.warning('请完善必填信息')
    }
  })
}


const resetQuery = ()=>{
  data.queryParams = {
    idCard: '',
    phone: '',
    deptId: null
  }
  showProgress.value = false
}
</script>

<style scoped lang="scss">
.form-container{
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

@@ -127,28 +145,42 @@
    display: flex;
    justify-content: space-around;

    .pro-btn {
    .pro-btn,.pro-download{
      width: calc(25% - 20px);
      color: #fff;
      color: #333;
      cursor: pointer;
      border: 1px solid #000;
      border: 1px solid #666;
      border-radius: 40px 99px 99px 40px;
      padding: 2em 4em;
      background: #000;
      background: #ccc;
      transition: 0.2s;
    }

    .pro-btn-active {
    .pro-btn-active,.pro-btn-red,.pro-btn-blue,.pro-download-active {
      width: calc(25% - 20px);
      color: #fff;
      cursor: pointer;
      border: 1px solid #000;
      border: 1px solid #666;
      border-radius: 40px 99px 99px 40px;
      padding: 2em 4em;
      transition: 0.2s;
      transform: translate(-0.25rem, -0.25rem);
      background: #03a9f4;
      box-shadow: 0.25rem 0.25rem #000;
      background: #67C23A;
      box-shadow: 0.25rem 0.25rem #ccc;
    }

    .pro-download-active,.pro-download{
      border-radius: 20px;
    }

    .pro-btn-red{
      color: #fff;
      background: #F56C6C;
    }

    .pro-btn-blue{
      color: #fff;
      background: #2563EB;
    }
  }
}