ba_web/src/views/Training/securityNjgl/components/shForm.vue

<template>
  <div>
    <el-dialog class="steps-dialog" title="审核" v-model="dialogForm" :close-on-click-modal="false" @close="dialogForm = false,formData = {}" width="420px">
      <el-form :model="formData" ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="审核类型" prop="auditType">
          <el-select v-model="formData.auditType" placeholder="请选择审核类型">
            <el-option label="保安公司审核" value="bakk"></el-option>
            <el-option label="培训公司审核" value="pxgs"></el-option>
            <el-option label="公安局审核" value="gongan"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否通过" prop="auditStatus">
          <el-radio-group v-model="formData.auditStatus">
            <el-radio label="1">通过</el-radio>
            <el-radio label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" prop="rejectReason" v-if="formData.auditStatus === '0'">
          <el-input v-model="formData.rejectReason" type="textarea" placeholder="请输入驳回原因" :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div class="flex just-center">
          <el-button @click="dialogForm = false,formData = {}">取消</el-button>
          <el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, defineExpose,defineEmits } from 'vue';
import { qcckPost } from "@/api/qcckApi.js";
const emit = defineEmits(['refresh'])
const dialogForm = ref(false);
const loading = ref(false)
const formData = ref({})
const rules = ref({
  auditType: [{ required: true, message: '请选择审核类型', trigger: 'blur' }],
  auditStatus: [{ required: true, message: '请选择是否通过', trigger: 'blur' }],
  rejectReason: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }],
})
const formRef = ref();
const idsVal = ref([])
const init = (ids) => {
  idsVal.value = ids;
  dialogForm.value = true;
}

const submitForm = () =>{
  formRef.value.validate((valid) => {
    if (!valid) return;
    loading.value = true;
    let params = { ...formData.value,ids:idsVal.value }
      qcckPost(params,"/mosty-base/bans/njxx/batchAudit").then((res) => {
        loading.value = false;
        ElMessage.success("操作成功");
        dialogForm.value = false;
        formData.value={}
        emit('refresh')
      }).catch(()=>{
        loading.value = false;
      });
  });
}

defineExpose({
  init
})
</script>

<style scoped lang="scss">
.steps-body {
  height: 260px;
  padding: 6px 10px 10px;
  box-sizing: border-box;
}

:deep(.steps-dialog .el-dialog__header) {
  text-align: center;
  padding: 20px 20px 10px;
}

:deep(.steps-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

:deep(.steps-dialog .el-dialog__body) {
  padding: 0 20px 20px;
}

:deep(.steps-dialog .el-step__title) {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 22px;
}

:deep(.steps-dialog .el-step__description) {
  font-size: 16px;
  color: #9AA8B6;
  line-height: 20px;
  margin-top: 8px;
}

:deep(.steps-dialog .el-step__line) {
  left: 8px;
  background-color: transparent;
  border-left: 1px dashed #dadada;
}

:deep(.steps-dialog .el-step.is-vertical .el-step__head) {
  width: 24px;
}

:deep(.steps-dialog .el-step__icon) {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

:deep(.steps-dialog .el-step__head.is-process .el-step__icon),
:deep(.steps-dialog .el-step__head.is-process .el-step__icon.is-text) {
  background: #2e6bff;
  border: none;
  box-shadow: 0 0 0 5px rgba(46, 107, 255, 0.15);
}

:deep(.steps-dialog .el-step.is-wait .el-step__icon),
:deep(.steps-dialog .el-step.is-finish .el-step__icon) {
  background: #fff;
  border: 1px solid #dadada;
  box-shadow: none;
}

:deep(.steps-dialog .el-step__icon-inner) {
  display: none;
}
::v-deep .is-finish .el-step__icon{
  background: #86b6f1;
}
</style>