<template>
|
<div class="system-add-user-container">
|
<el-dialog :title="title" v-model="isShowCtfDialog" width="769px" @close="restForm">
|
<el-form :model="ctfForm" size="default" ref="ctfRef" :rules="ctfFormRules" label-width="120px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="关联角色" prop="roleId">
|
<el-select v-model="ctfForm.roleId" placeholder="请选择" clearable class="w100" :disabled="disabled">
|
<el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="证书编号" prop="certNo">
|
<el-input v-model.trim="ctfForm.certNo" :disabled="disabled" placeholder="" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="证书到期时间" prop="certExpiredAt">
|
<el-date-picker :disabled="disabled" v-model="ctfForm.certExpiredAt" type="date" placeholder="请选择" class="w100" value-format="YYYY-MM-DD"> </el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="作业类型" prop="workType">
|
<el-select v-model="ctfForm.workType" placeholder="请选择作业类型" :disabled="disabled">
|
<el-option
|
v-for="item in workTypeList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="证书上传" prop="certUrl">
|
<el-upload :disabled="disabled" accept="image/*" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='1' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" list-type="picture-card" :before-remove="beforeRemove" :before-upload="getUploadUrl">
|
<el-icon><Plus /></el-icon>
|
<template #tip>
|
<div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="isShowCtfDialog = !isShowCtfDialog" size="default">取 消</el-button>
|
<el-button type="primary" v-throttle @click="onSubmit" size="default" v-if="!disabled">确 定</el-button>
|
</span>
|
</template>
|
<el-dialog v-model="dialogImg">
|
<el-image :preview-src-list="[dialogImageUrl]" :src="dialogImageUrl" fit="cover" />
|
</el-dialog>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { userApi } from '/@/api/systemManage/user';
|
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
|
import axios from "axios";
|
import {useUserInfo} from "/@/stores/userInfo";
|
|
// 定义接口来定义对象的类型
|
interface DeptData {}
|
interface roleData {}
|
interface dutyData {}
|
interface sexData {}
|
interface type {}
|
interface CtfState {
|
title: string;
|
disabled: boolean;
|
isShowCtfDialog: boolean;
|
dialogImg: boolean
|
ctfForm: {
|
userCertId?: string
|
roleId: number| null
|
certNo: string
|
certExpiredAt: string
|
workType: number| null
|
certUrl: string
|
uid: string | null
|
};
|
ctfFormRules:{}
|
dialogImageUrl: string | null
|
fileList: Array<file>
|
delList: Array<any>
|
uploadUrl: string
|
workTypeList: Array<any>
|
}
|
interface file {
|
url: string;
|
uid?: string | null
|
name?: string | null
|
status?: string | null
|
}
|
export default defineComponent({
|
name: 'ctf',
|
props: ['roleData'],
|
setup(props, context) {
|
const userInfo = useUserInfo()
|
const ctfRef = ref()
|
const state = reactive<CtfState>({
|
title: '',
|
disabled: false,
|
isShowCtfDialog: false,
|
dialogImg: false,
|
ctfForm: {
|
userCertId: '',
|
roleId: null,
|
certNo: '',
|
certExpiredAt: '',
|
workType: null,
|
certUrl: '',
|
uid: ''
|
},
|
ctfFormRules:{
|
roleId: [{ required: true, message: '请选择证书相关角色', trigger: 'blur' }],
|
certNo: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
|
certExpiredAt: [{ required: true, message: '请选择证书到期时间', trigger: 'change' }],
|
workType: [{ required: true, message: '请选择作业类型', trigger: 'blur' }],
|
certUrl: [{ required: true, message: '请上传证书', trigger: 'change' }],
|
},
|
dialogImageUrl: null,
|
fileList: [],
|
delList: [],
|
uploadUrl: '',
|
workTypeList: [
|
{ id: 1, name: '动火作业' },
|
{ id: 2, name: '受限空间作业' },
|
{ id: 3, name: '吊装作业' },
|
{ id: 4, name: '动土作业' },
|
{ id: 5, name: '断路作业' },
|
{ id: 6, name: '高处作业' },
|
{ id: 7, name: '临时用电作业' },
|
{ id: 8, name: '盲板抽堵作业' }
|
]
|
});
|
|
// 打开弹窗
|
const openDialog = (type: string, value: any, uid: string) => {
|
state.isShowCtfDialog = true;
|
state.fileList = []
|
if (type === 'add') {
|
state.disabled = false
|
state.title = '新增证书';
|
state.ctfForm = {
|
roleId: null,
|
certNo: '',
|
certExpiredAt: '',
|
workType: null,
|
certUrl: '',
|
uid: uid
|
};
|
} else{
|
for(let i in value){
|
if(isValidKey(i,state.ctfForm)){
|
state.ctfForm[i] = value[i]
|
}
|
}
|
state.ctfForm.certExpiredAt = state.ctfForm.certExpiredAt.substring(0,10)
|
console.log(state.ctfForm.certExpiredAt,'time')
|
state.ctfForm.userCertId = value.id
|
state.fileList.push({
|
uid: value.id,
|
name: value.certUrl,
|
status: 'success',
|
url: value.certPath
|
})
|
if(type === 'edit'){
|
state.disabled = false
|
state.title = '修改证书';
|
console.log(state.ctfForm,'555')
|
}else{
|
state.disabled = true
|
state.title = '查看';
|
state.ctfForm = JSON.parse(JSON.stringify(value));
|
}
|
}
|
};
|
|
const isValidKey =(key: string | number | symbol, data:object): key is keyof typeof data => {
|
return key in data
|
}
|
|
// 新增修改
|
const onSubmit = async () => {
|
ctfRef.value.validate(async (valid:Boolean) => {
|
if(valid){
|
if (state.title === '新增证书') {
|
let res = await userApi().addCtf(state.ctfForm);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '证书新增成功',
|
duration: 2000
|
});
|
if(state.delList.length>0){
|
await deletePic()
|
}
|
state.isShowCtfDialog = false;
|
context.emit('refresh');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
} else {
|
let res = await userApi().modCtf(state.ctfForm);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '证书修改成功',
|
duration: 2000
|
});
|
if(state.delList.length>0){
|
await deletePic()
|
}
|
state.isShowCtfDialog = false;
|
context.emit('refresh');
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type:'warning',
|
message:'请完善基本信息'
|
})
|
}
|
})
|
|
};
|
|
// 图片上传
|
const showTip =()=>{
|
ElMessage({
|
type: 'warning',
|
message: '超出文件上传数量'
|
});
|
}
|
|
const handlePictureCardPreview = (uploadFile: { url: string }) => {
|
state.dialogImageUrl = uploadFile.url!;
|
state.dialogImg = true;
|
};
|
|
const getUploadUrl = async (rawFile: any) => {
|
if(rawFile.size / 1024 / 1024 > 5){
|
ElMessage({
|
type: 'warning',
|
message: '文件大小不能超过5M。'
|
});
|
return Promise.reject(false)
|
}else{
|
const res = await userApi().getPresignUrl(rawFile.name);
|
state.ctfForm.certUrl = res.data.data.fileName
|
state.uploadUrl = res.data.data.uploadUrl;
|
}
|
};
|
|
const upload = async (params: any) => {
|
let reader = new FileReader();
|
reader.readAsArrayBuffer(params.file);
|
reader.onload = async () => {
|
axios
|
.put(state.uploadUrl, reader.result, {
|
header: { 'Content-Type': 'multipart/form-data' }
|
})
|
.then(() => {
|
});
|
};
|
};
|
|
const beforeRemove = (file: {}, fileList: []) => {
|
if (file && file.status === "success") {
|
const result = new Promise((resolve, reject) => {
|
ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
// console.log(state.workDetail.photos,'path')
|
state.fileList = []
|
fileList = []
|
state.delList.push(state.ctfForm.certUrl)
|
// deletePic(state.ctfForm.certUrl)
|
state.ctfForm.certUrl = ''
|
})
|
.catch(() => {
|
reject(false);
|
});
|
});
|
return result;
|
}
|
}
|
|
// 删除图片接口
|
const deletePic = async()=>{
|
for(let i of state.delList) {
|
const res = await workApplyApi().deleteFile({fileName: i})
|
if (res.data.code === '200') {
|
console.log('文件删除成功')
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
}
|
|
const restForm = ()=>{
|
state.ctfForm = {
|
userCertId: '',
|
roleId: null,
|
certNo: '',
|
certExpiredAt: '',
|
workType: null,
|
certUrl: '',
|
uid: ''
|
}
|
state.fileList = []
|
state.delList = []
|
}
|
|
// 页面加载时
|
onMounted(() => {
|
});
|
return {
|
ctfRef,
|
userInfo,
|
showTip,
|
restForm,
|
openDialog,
|
onSubmit,
|
handlePictureCardPreview,
|
getUploadUrl,
|
upload,
|
beforeRemove,
|
isValidKey,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
