From fa831a794e10b368481c6e08b28913414ed8cf5c Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Wed, 9 Jul 2025 10:25:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=88=91=E7=9A=84=E8=B5=84?=
 =?UTF-8?q?=E8=B4=A8=20=E6=A0=87=E7=AD=BE=E9=87=8D=E6=96=B0=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LableApply.vue                 |  16 +-
 .../components/LableReApplyForm.vue           | 425 ++++++++++++++++++
 2 files changed, 435 insertions(+), 6 deletions(-)
 create mode 100644 src/views/qualification/myQualifications/components/LableReApplyForm.vue

diff --git a/src/views/qualification/myQualifications/components/LableApply.vue b/src/views/qualification/myQualifications/components/LableApply.vue
index d6c66e4..2ed1fd1 100644
--- a/src/views/qualification/myQualifications/components/LableApply.vue
+++ b/src/views/qualification/myQualifications/components/LableApply.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="!isShowForm">
+    <div v-if="!isShowForm && !isShowReForm">
         <div class="optionBtn">
             <el-button type="primary" class="qualificationApplyBtn" @click="handleOpenApplyForm">
                 <img :src="applyIcon" class="custom-icon" />
@@ -44,17 +44,21 @@
             </el-table-column>
         </el-table>
     </div>
-    <lable-apply-form v-else ref="lableApplyFormRef" @refresh="reloadList" />
+    <lable-apply-form v-if="isShowForm" ref="lableApplyFormRef" @refresh="reloadList" />
+    <lable-re-apply-form v-if="isShowReForm" ref="lableReApplyFormRef" @refresh="reloadList" />
 </template>
 <script setup>
 import { onMounted, ref, nextTick } from 'vue'
 import applyIcon from '@/assets/images/applyIcon.png'
 import LableApplyForm from './LableApplyForm.vue';
+import LableReApplyForm from './LableReApplyForm.vue';
 import { getcurrentUserPageList, deleteBusUserLabel } from "@/api/labelManage/labelManage"
 
 
 const { proxy } = getCurrentInstance()
 const isShowForm = ref(false)
+const isShowReForm = ref(false)
+const lableReApplyFormRef = ref(null)
 const queryParams = ref({
     pageIndex: 1,
     pageSize: 10,
@@ -89,17 +93,17 @@ const handleOpenApplyForm = () => {
 // 表单操作回调
 const reloadList = () => {
     isShowForm.value = false
+    isShowReForm.value = false
     getCurUserLablePageList()
 }
 
 
 // 重新申请
 const handleReplay = (record) => {
-    // isShowReForm.value = true
+    isShowReForm.value = true
     nextTick(() => {
-        // reApplyFormRef.value.getQualificationInfo(record.id, record.node);
-    });
-
+        lableReApplyFormRef.value.getLableDetailInfo(record.id);
+    }); 
 }
 // 删除
 const handleDetele = (record) => {
diff --git a/src/views/qualification/myQualifications/components/LableReApplyForm.vue b/src/views/qualification/myQualifications/components/LableReApplyForm.vue
new file mode 100644
index 0000000..d52352e
--- /dev/null
+++ b/src/views/qualification/myQualifications/components/LableReApplyForm.vue
@@ -0,0 +1,425 @@
+<template>
+    <div class="qualification-rootContainer">
+        <div class="borderLine"></div>
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
+            <div class="headerTitle">基本信息</div>
+            <div class="applyFormContainer">
+                <el-row class="myRow" :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="申请标签" prop="labelId">
+                            <el-select v-model="ruleForm.labelId" placeholder="请选择申请标签" clearable
+                                @change="handleChoseLabl">
+                                <el-option v-for="dict in bus_label" :key="dict.value" :label="dict.label"
+                                    :value="dict.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="员工工号" prop="workNo">
+                            <el-input v-model="ruleForm.workNo" placeholder="请输入员工工号" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="员工姓名(中文)" prop="userName">
+                            <el-input v-model="ruleForm.userName" placeholder="请输入员工姓名(中文)" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="员工姓名(英文)" prop="englishName">
+                            <el-input v-model="ruleForm.englishName" placeholder="请输入员工姓名(英文)" disabled />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="部门" prop="deptId">
+                            <el-tree-select v-model="ruleForm.deptId" :data="enabledDeptOptions" disabled
+                                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
+                                placeholder="请选择部门" check-strictly />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="科室" prop="sectionId">
+                            <el-select v-model="ruleForm.sectionId" placeholder="请选择科室" disabled>
+                                <el-option v-for="item in sectionData" :key="item.sectionId" :label="item.sectionName"
+                                    :value="item.sectionId" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="属地" prop="dependencyId">
+                            <el-select v-model="ruleForm.dependencyId" placeholder="请选择属地" disabled>
+                                <el-option v-for="item in busDependencyData" :key="item.id" :label="item.dependencyName"
+                                    :value="item.id" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="属地ESC" prop="escUserName">
+                            <el-input v-model="ruleForm.escUserName" disabled />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="headerTitle" v-if="ruleForm.labelId">申请信息</div>
+            <div class="applyFormContainer" v-if="ruleForm.labelId">
+                <el-table :data="tableData" style="width: 100%">
+                    <el-table-column prop="qualificationName" label="资质名称" width="100" />
+                    <el-table-column prop="certificateUrl" label="资质证书" align="center">
+                        <template #default="scope">
+                            <el-image v-if="scope.row.certificateUrl"
+                                style="width: 70px; height: 44px;line-height: 50px;"
+                                :src="baseUrl + scope.row.certificateUrl" fit="fill" />
+                            <span v-else>请在"高压资质培训信息"上传资质证书</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="status" label="是否过期" width="120">
+                        <template #default="scope">
+                            <el-text v-if="scope.row.status == 1 && scope.row.certificateUrl" type="success"
+                                class="successText">正常</el-text>
+                            <el-text v-else-if="scope.row.status == 2 && scope.row.certificateUrl" type="danger"
+                                class="dangerText">过期</el-text>
+                            <span v-else>-</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="startTime" label="有效开始日期" width="150">
+                        <template #default="scope">
+                            <span v-if="scope.row.startTime"> {{ moment(scope.row.startTime).format('YYYY-MM-DD')
+                                }}</span>
+                            <span v-else>-</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="expireTime" label="到期日期" width="130">
+                        <template #default="scope">
+                            <span v-if="scope.row.expireFlag == 0">长期</span>
+                            <template v-else>
+                                <span v-if="scope.row.expireTime"> {{ moment(scope.row.expireTime).format('YYYY-MM-DD')
+                                    }}</span>
+                                <span v-else>-</span>
+                            </template>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+
+        </el-form>
+    </div>
+
+    <div class="qualification-submitTool">
+        <el-button class="cancelApplyBtn" @click="handleCancel">取消</el-button>
+        <el-button class="submitApplyBtn" @click="handleSubmit">提交</el-button>
+    </div>
+</template>
+<script setup>
+import { onMounted, reactive, defineEmits, defineExpose, ref } from 'vue'
+import { deptTreeSelect } from "@/api/system/user"
+import { getBusDependencyPage } from "@/api/system/dependency"
+import { getSysSectionPage } from "@/api/system/section"
+import { getBusUserLabelDetail, reApplyBusUserLabel } from "@/api/labelManage/labelManage"
+import { getCurrentUserList } from "@/api/qualification/myQualifications"
+import moment from 'moment'
+
+const emit = defineEmits(['refresh'])
+const { proxy } = getCurrentInstance()
+const { bus_label } = proxy.useDict("bus_label")
+const data = reactive({
+    ruleForm: {},
+    rules: {
+        labelId: [{ required: true, message: "申请标签不能为空", trigger: "change" }],
+        workNo: [{ required: true, message: "员工工号不能为空", trigger: "blur" }],
+        userName: [{ required: true, message: "员工姓名(中文)不能为空", trigger: "blur" }],
+        englishName: [{ required: true, message: "员工姓名(英文)", trigger: "blur" }],
+        deptId: [{ required: true, message: "部门不能为空", trigger: "change" }],
+        sectionId: [{ required: true, message: "科室不能为空", trigger: "change" }],
+        dependencyId: [{ required: true, message: "属地不能为空", trigger: "change" }],
+        escUserName: [{ required: true, message: "属地ESC不能为空", trigger: "blur" }],
+    },
+})
+const { ruleForm, rules } = toRefs(data)
+const queryParams = ref({
+    pageIndex: 1,
+    pageSize: 10,
+})
+const requiredQualifications = ref([])
+const loading = ref(true)
+const tableData = ref([])
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+
+// 初始化
+onMounted(() => { 
+    getBusDependencyData()
+    getDeptTree()
+    getSysSectionData()
+}); 
+
+// 获取详情
+const getLableDetailInfo = (_id) => {
+    getBusUserLabelDetail(_id).then(res => {
+        if (res.code == 200) {
+            ruleForm.value = res.data 
+            ruleForm.value.node = 0
+            tableData.value = res.data.userQualificationCertificateList
+            console.log('标签详情', ruleForm.value)
+        }
+    })
+}
+// 属地数据
+const busDependencyData = ref([])
+// 获取属地数据
+const getBusDependencyData = () => {
+    getBusDependencyPage({
+        pageIndex: 1,
+        pageSize: 100,
+    }).then(response => {
+        if (response.code == 200) {
+            busDependencyData.value = response.data.list
+        }
+    })
+}
+
+// 部门数据 
+const enabledDeptOptions = ref(undefined)
+// 获取部门数据
+const getDeptTree = () => {
+    deptTreeSelect().then(res => {
+        enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(res.data)))
+    })
+}
+/** 过滤禁用的部门 */
+const filterDisabledDept = (deptList) => {
+    return deptList.filter(dept => {
+        if (dept.disabled) {
+            return false
+        }
+        if (dept.children && dept.children.length) {
+            dept.children = filterDisabledDept(dept.children)
+        }
+        return true
+    })
+}
+
+// 科室数据
+const sectionData = ref([])
+// 获取科室数据
+const getSysSectionData = () => {
+    getSysSectionPage({
+        pageIndex: 1,
+        pageSize: 100,
+    }).then(res => {
+        if (res.code == 200) {
+            sectionData.value = res.data.list
+        }
+    })
+}
+
+// 申请标签选择
+const handleChoseLabl = async (val) => {
+    loading.value = true;
+    try {
+        const res = await getCurUserQualification();
+        console.log('获取接口完毕', res);
+
+        // Define the qualifications mapping
+        const qualificationsMap = {
+            'SH': ['电工证', 'SH'],
+            'ES': ['电工证', 'ES'],
+            'ESC': ['电工证', 'ESC'],
+            'CESC': ['电工证', 'CESC'],
+            'SH+LLP': ['电工证', 'SH', 'LLP', '急救证'],
+            'ES+LLP': ['电工证', 'ES', 'LLP', '急救证'],
+            'ESC+LLP': ['电工证', 'ESC', 'LLP', '急救证'],
+            'CESC+LLP': ['电工证', 'CESC', 'LLP', '急救证']
+        };
+
+        // Get the required qualifications or default to empty array
+        requiredQualifications.value = qualificationsMap[val] || [];
+        console.log('rwerwe', requiredQualifications)
+
+        // Filter the data
+        tableData.value = res.filter(item =>
+            requiredQualifications.value.some(qualification =>
+                item.qualificationName === qualification
+            ))
+    } catch (error) {
+        console.error('获取失败', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 获取当前用户证书情况
+const getCurUserQualification = async () => {
+    try {
+        const res = await getCurrentUserList(queryParams.value);
+        console.log('diao');
+        return res.code === 200 ? res.data : [];
+    } catch (error) {
+        console.error('获取用户证书失败', error);
+        return [];
+    }
+};
+
+const handleCancel = () => {
+    proxy.resetForm("ruleFormRef")
+    emit('refresh')
+}
+const handleSubmit = () => {
+    proxy.$refs["ruleFormRef"].validate(valid => {
+        if (valid) {
+            const qualificArr = tableData.value.filter(item=> item.certificateUrl)
+            console.log('是否有资质证书', qualificArr)
+            if(qualificArr.length < requiredQualifications.value.length) {
+                proxy.$modal.msgError(`资质证书不全,请在"高压资质培训信息"上传资质证书!`)
+                return false;
+            }
+            const qualificStateArr = tableData.value.filter(item=> item.status == 2)
+            console.log('是否有资质证书', qualificStateArr)
+            if(qualificStateArr.length > 0) {
+                proxy.$modal.msgError(`资质过期，请更新资质证书后再申请!`)
+                return false;
+            }
+            ruleForm.value.qualificationCertificateIds = tableData.value.map(item=> item.id)
+            console.log('sdafasdfas', ruleForm.value)
+            reApplyBusUserLabel(ruleForm.value).then(res => {
+                if (res.code == 200) {
+                    proxy.$modal.msgSuccess("提交成功")
+                    emit('refresh')
+                } else {
+                    proxy.$modal.msgSuccess(res.msg)
+                }
+            })
+        }
+    })
+}
+// 暴露方法给父组件
+defineExpose({
+    getLableDetailInfo
+});
+</script>
+<style lang='scss'>
+.qualification-rootContainer {
+    width: 100%;
+    height: calc(100vh - 320px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.headerTitle {
+    font-family: Microsoft YaHei;
+    font-weight: 700;
+    font-size: 18px;
+    text-align: left;
+    color: #000000;
+    background: #e9e9e9;
+    padding: 6px 14px;
+}
+
+.successText {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 18px;
+    color: #00B32A;
+}
+
+.dangerText {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 18px;
+    color: #E13434;
+}
+
+.applyFormContainer {
+    padding-top: 20px;
+    overflow: hidden;
+}
+
+.qualification-submitTool {
+    width: 100%;
+    height: 76px;
+    position: absolute;
+    top: calc(100vh - 320px);
+    background: #ffffff;
+    text-align: center;
+    line-height: 76px;
+    box-shadow: none;
+}
+
+.cancelApplyBtn {
+    width: 100px;
+    height: 36px;
+    border-radius: 4px 4px 4px 4px;
+    background: #ea9f0e;
+    font-family: Microsoft YaHei;
+    font-weight: 700;
+    font-size: 16px;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+.cancelApplyBtn:hover {
+    background: #ea9f0e;
+    color: #FFFFFF;
+}
+
+.submitApplyBtn {
+    width: 100px;
+    height: 36px;
+    border-radius: 4px 4px 4px 4px;
+    background: #4276d1;
+    font-family: Microsoft YaHei;
+    font-weight: 700;
+    font-size: 16px;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+.submitApplyBtn:hover {
+    background: #4276d1;
+    color: #FFFFFF;
+}
+
+.myRow {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.el-form-item--default {
+    margin-bottom: 20px !important;
+}
+
+.el-form-item--label-top .el-form-item__label {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 18px;
+    text-align: left;
+    color: #666666;
+}
+
+.el-input__inner {
+    font-weight: 400;
+    font-size: 18px;
+    text-align: left;
+    color: #000000;
+}
+
+.el-select__wrapper {
+    font-weight: 400;
+    font-size: 18px;
+    text-align: left;
+    color: #000000;
+}
+
+.el-form-item__error {
+    font-size: 16px;
+}
+
+.el-radio__inner {
+    width: 16px !important;
+    height: 16px !important;
+}
+
+.el-radio__label {
+    font-weight: 400;
+    font-size: 18px;
+    text-align: left;
+    color: #000000;
+}
+</style>
\ No newline at end of file