314 lines
8.6 KiB
Vue
314 lines
8.6 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" title="编辑职业资格" width="600px" append-to-body :close-on-click-modal="false" destroy-on-close>
|
|
<div v-if="showForm">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="dataForm"
|
|
:rules="formRules"
|
|
label-width="120px"
|
|
>
|
|
<el-form-item label="职业工种" prop="worker">
|
|
<el-select
|
|
v-model="dataForm.worker"
|
|
filterable
|
|
clearable
|
|
placeholder="请选择职业工种"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in workTypeList"
|
|
:key="item.id"
|
|
:label="item.workName"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="等级" prop="qualificationConfigId">
|
|
<el-select
|
|
v-model="dataForm.qualificationConfigId"
|
|
filterable
|
|
clearable
|
|
placeholder="请选择等级"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in qualificationList"
|
|
:key="item.id"
|
|
:label="item.levelName"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="取证时间" prop="certificateTime">
|
|
<el-date-picker
|
|
v-model="dataForm.certificateTime"
|
|
type="date"
|
|
placeholder="请选择取证时间"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="证书编号" prop="certificateNumber">
|
|
<el-input
|
|
v-model="dataForm.certificateNumber"
|
|
placeholder="请输入证书编号（仅支持英文和数字）"
|
|
clearable
|
|
show-word-limit
|
|
maxlength="32"
|
|
@input="handleCertificateNumberInput"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="材料1" prop="materialA">
|
|
<el-upload
|
|
:headers="headers"
|
|
:limit="1"
|
|
:action="url"
|
|
:file-list="fileList"
|
|
:on-success="materiaUploadSuccess"
|
|
:accept="'.jpg,.jpeg,.png,.pdf'"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<template #tip>
|
|
<div style="margin-top: 8px;">
|
|
<el-tag>仅支持jpg,jpeg,png,pdf后缀的文件上传</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="dialogSubmit" :loading="submitLoading">确定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed } from 'vue'
|
|
import { Session } from '/@/utils/storage'
|
|
import { useMessage } from '/@/hooks/message'
|
|
import { addObj } from '/@/api/professional/professionaluser/professionalqualificationrelation'
|
|
import { checkLocked } from '/@/api/professional/professionalstatuslock'
|
|
import { getLevelList } from '/@/api/professional/rsbase/professionalqualificationconfig'
|
|
import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
|
|
|
|
// Emits
|
|
const emit = defineEmits<{
|
|
(e: 'refreshData'): void
|
|
}>()
|
|
|
|
// 消息提示
|
|
const message = useMessage()
|
|
|
|
// 表单引用
|
|
const formRef = ref()
|
|
const submitLoading = ref(false)
|
|
|
|
// 对话框显示状态（内部管理）
|
|
const dialogVisible = ref(false)
|
|
|
|
// 表单数据
|
|
const dataForm = reactive({
|
|
worker: '',
|
|
qualificationConfigId: '',
|
|
certificateTime: '',
|
|
certificateNumber: '',
|
|
materialA: '',
|
|
evidenceA: '',
|
|
state: '',
|
|
id: ''
|
|
})
|
|
|
|
// 表单验证规则
|
|
const formRules = {
|
|
worker: [
|
|
{ required: true, message: '请选择职业工种', trigger: 'change' }
|
|
],
|
|
qualificationConfigId: [
|
|
{ required: true, message: '请选择等级', trigger: 'change' }
|
|
],
|
|
certificateTime: [
|
|
{ required: true, message: '请选择取证时间', trigger: 'change' }
|
|
],
|
|
certificateNumber: [
|
|
{ required: true, message: '请输入证书编号', trigger: 'blur' },
|
|
{ pattern: /^[A-Za-z0-9]+$/, message: '证书编号只能包含英文和数字', trigger: 'blur' }
|
|
],
|
|
materialA: [
|
|
{ required: true, message: '请上传证明材料', trigger: 'change' }
|
|
]
|
|
}
|
|
|
|
// 基础信息
|
|
const baseInfoAbout = reactive<{
|
|
workTypeList: any[]
|
|
qualificationList: any[]
|
|
}>({
|
|
workTypeList: [],
|
|
qualificationList: []
|
|
})
|
|
|
|
// 上传相关
|
|
const url = ref('')
|
|
const fileList = ref<any[]>([])
|
|
|
|
// 请求头
|
|
const headers = computed(() => {
|
|
return {
|
|
"Authorization": 'Bearer ' + Session.getToken()
|
|
}
|
|
})
|
|
|
|
// 显示表单标志
|
|
const showForm = ref(false)
|
|
|
|
// 计算属性：职业工种列表
|
|
const workTypeList = computed(() => baseInfoAbout.workTypeList as any[])
|
|
|
|
// 计算属性：资格列表
|
|
const qualificationList = computed(() => baseInfoAbout.qualificationList as any[])
|
|
|
|
// 初始化字典数据
|
|
const initDicData = async () => {
|
|
try {
|
|
// 使用专门的 API 获取数据（与 index.vue 保持一致）
|
|
const [levelRes, workRes] = await Promise.all([
|
|
getLevelList(),
|
|
getWorkTypeList()
|
|
])
|
|
|
|
// 处理资格等级列表（与 index.vue 保持一致）
|
|
if (levelRes && levelRes.data) {
|
|
baseInfoAbout.qualificationList = levelRes.data
|
|
}
|
|
|
|
// 处理工种列表（与 index.vue 保持一致）
|
|
if (workRes && workRes.data) {
|
|
baseInfoAbout.workTypeList = workRes.data
|
|
}
|
|
} catch (error) {
|
|
// 获取字典数据失败
|
|
}
|
|
}
|
|
|
|
// 证书编号输入处理（只允许英文和数字）
|
|
const handleCertificateNumberInput = (value: string) => {
|
|
dataForm.certificateNumber = value.replace(/[^A-Za-z0-9]/g, '')
|
|
}
|
|
|
|
// 文件上传成功
|
|
const materiaUploadSuccess = (response: any) => {
|
|
if (response.data && response.data.code === "-1") {
|
|
message.error("当前不允许上传文件")
|
|
return
|
|
}
|
|
dataForm.evidenceA = response.data.url
|
|
dataForm.materialA = response.data.url
|
|
// 上传成功后清除该字段的验证错误
|
|
formRef.value?.clearValidate('materialA')
|
|
}
|
|
|
|
// 打开对话框
|
|
const openDialog = async (row?: any) => {
|
|
// 新增模式：先检查是否锁定
|
|
if (!row || !row.id) {
|
|
try {
|
|
const lockResponse = await checkLocked('job')
|
|
if (lockResponse.data) {
|
|
message.warning("新增功能已锁定，暂不允许操作")
|
|
return
|
|
}
|
|
} catch (error) {
|
|
// 错误处理已在数据请求层统一处理，此处不需要提示
|
|
return
|
|
}
|
|
}
|
|
|
|
// 公共设置
|
|
url.value = `/professional/file/teacherAboutInfoUpload?type=3`
|
|
fileList.value = []
|
|
|
|
// 根据是否有 row 设置不同的表单数据
|
|
if (row && row.id) {
|
|
// 编辑模式：使用传入的数据
|
|
Object.assign(dataForm, {
|
|
worker: row.worker || '',
|
|
qualificationConfigId: row.qualificationConfigId || '',
|
|
certificateTime: row.certificateTime || '',
|
|
certificateNumber: row.certificateNumber || '',
|
|
materialA: row.materialA || '',
|
|
evidenceA: row.evidenceA || '',
|
|
state: row.state || '',
|
|
id: row.id || ''
|
|
})
|
|
} else {
|
|
// 新增模式：重置为空
|
|
Object.assign(dataForm, {
|
|
worker: '',
|
|
qualificationConfigId: '',
|
|
certificateTime: '',
|
|
certificateNumber: '',
|
|
materialA: '',
|
|
evidenceA: '',
|
|
state: '',
|
|
id: ''
|
|
})
|
|
}
|
|
|
|
// 公共操作：加载字典数据并显示对话框
|
|
await initDicData()
|
|
showForm.value = true
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 提交表单
|
|
const dialogSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
await formRef.value.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
submitLoading.value = true
|
|
try {
|
|
// 统一使用 addObj 接口（新增和编辑都使用同一个接口）
|
|
// 确保 evidenceA 或 materialA 有值
|
|
if (!dataForm.evidenceA && dataForm.materialA) {
|
|
dataForm.evidenceA = dataForm.materialA
|
|
}
|
|
|
|
await addObj(dataForm)
|
|
message.success(dataForm.id ? "修改成功" : "提交成功")
|
|
dialogVisible.value = false
|
|
emit('refreshData')
|
|
} catch (error: any) {
|
|
// 错误处理已在数据请求层统一处理，此处不需要提示
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 初始化方法（保持兼容性）
|
|
const init = () => {
|
|
// 新版本不再需要初始化配置
|
|
}
|
|
|
|
// 暴露方法
|
|
defineExpose({
|
|
openDialog,
|
|
init
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|