<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="open"
|
append-to-body
|
width="50%"
|
:before-close="handleClose"
|
>
|
<el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
|
<el-form-item label="姓名:" prop="name">
|
<el-input v-model.trim="form.name" :readonly="disable"/>
|
</el-form-item>
|
<el-form-item label="身份证号:" prop="idCard">
|
<el-input v-model.trim="form.idCard" :readonly="disable"/>
|
</el-form-item>
|
<el-form-item label="IC卡编号:" prop="icNum">
|
<el-input v-model.trim="form.icNum" :readonly="disable"/>
|
</el-form-item>
|
<el-form-item label="电子证号:" prop="electNum">
|
<el-input v-model.trim="form.electNum" :readonly="disable"/>
|
</el-form-item>
|
<el-form-item label="所属单位:" prop="dept">
|
<el-input v-model.trim="form.dept" :readonly="disable"/>
|
</el-form-item>
|
<el-form-item label="违章日期:" prop="violationTime">
|
<el-date-picker
|
v-model="form.violationTime"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd 00:00:00"
|
placeholder="选择日期"
|
:disabled="disable">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="操作类型:" prop="operateTypeId">
|
<el-cascader
|
v-model="form.operateTypeId"
|
:options="typeList"
|
:disabled="disable"
|
:show-all-levels="false"
|
:props="{ expandTrigger: 'hover', value: 'id',label: 'name',emitPath:false}"></el-cascader>
|
</el-form-item>
|
<el-form-item label="图片上传:" prop="violationPath">
|
<el-upload
|
action=""
|
:disabled="disable"
|
:auto-upload="false"
|
:limit="10"
|
multiple
|
accept="image/*,.pdf"
|
:file-list="fileList"
|
list-type="picture-card"
|
:before-upload="beforeAvatarUpload"
|
:on-change="avatorChange"
|
:on-preview="handlePreview"
|
:on-exceed="overLimit"
|
:on-remove="handleRemove">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="违章描述:" prop="remark">
|
<el-input type="textarea" v-model.trim="form.remark" :readonly="disable"/>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button v-if="disable == false" type="primary" @click="submit">提交</el-button>
|
<el-button v-else type="primary" @click="handleClose">确定</el-button>
|
</span>
|
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script >
|
import {addViolation, editViolation, uploadFile} from "@/api/coalMine/violation";
|
import {verifyIdCard} from "@/utils/validate";
|
|
export default {
|
name: 'violationDialog',
|
components: {
|
},
|
props: ['typeList'],
|
data() {
|
let validatePass = (rule, value, callback) => {
|
if (this.fileList.length == 0) {
|
callback(new Error('请上传图片'));
|
} else {
|
callback();
|
}
|
}
|
let verifyId = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入身份证号'))
|
}else{
|
if(!verifyIdCard(value)){
|
callback(new Error('身份证号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
return {
|
disable: false,
|
title: '新增填报',
|
open: false,
|
form:{
|
id: null,
|
isCm: 0,
|
name: '',
|
idCard: '',
|
icNum: '',
|
electNum: '',
|
dept: '',
|
violationTime: '',
|
operateTypeId: null,
|
violationPath: '',
|
remark: ''
|
},
|
fileList: [],
|
dialogImageUrl: '',
|
dialogVisible: false,
|
rules:{
|
name:[{ required: true, message: '请填写姓名', trigger: 'blur' }],
|
// idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
|
idCard: [{ required: true, message: '请填写身份证号', trigger: 'blur' }],
|
dept: [{ required: true, message: '请填写所在单位', trigger: 'blur' }],
|
violationTime: [{ required: true, message: '请选择违章日期', trigger: 'blur' }],
|
violationPath: [{ required: true,validator: validatePass, trigger: 'blur' }],
|
operateTypeId: [{ required: true, message: '请选择操作类型', trigger: 'blur' }]
|
},
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
openDialog (val,type) {
|
const t = this
|
t.fileList = []
|
t.open = true
|
if(type == 'add'){
|
t.title = '新增填报'
|
t.disable = false
|
t.form = {
|
id: null,
|
isCm: 0,
|
name: '',
|
idCard: '',
|
icNum: '',
|
electNum: '',
|
dept: '',
|
violationTime: '',
|
operateTypeId: null,
|
violationPath: '',
|
remark: ''
|
}
|
}else{
|
t.title = '查看'
|
t.disable = true
|
if(val){
|
for(let i in val){
|
if(t.isValidKey(i,this.form)){
|
t.form[i] = val[i]
|
}
|
}
|
const picList = val.violationPath.split(',')
|
t.fileList = picList.map((item,index)=>{
|
return {
|
name: index,
|
url: process.env.VUE_APP_BASE_API + item
|
}
|
})
|
}
|
}
|
},
|
isValidKey(key,obj){
|
return key in obj
|
},
|
|
avatorChange(file, fileList) {
|
this.fileList = fileList;
|
console.log(fileList,'list2')
|
},
|
|
overLimit(){
|
this.$message({
|
type: 'warning',
|
message: '超出文件上传数量'
|
});
|
},
|
handlePreview(file) {
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
beforeAvatarUpload(file) {
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
if (!isLt5M) {
|
this.$message.error('上传头像图片大小不能超过 5MB!');
|
}
|
return isLt5M;
|
},
|
async submitUpload() {
|
const t = this;
|
// 创建一个数组来存储所有上传操作的 Promise
|
const uploadPromises = [];
|
// 定义一个函数来上传文件并将结果存入 resumeLink 数组
|
async function uploadAndCollect(fileList) {
|
if (fileList.length > 0) {
|
const resumeLink = [];
|
for (const file of fileList) {
|
const formData = new FormData();
|
formData.append("file", file.raw);
|
formData.append("module", 'accountPath');
|
|
const res = await uploadFile(formData);
|
if (res.code === 200) {
|
resumeLink.push(res.data.fileKey);
|
} else {
|
this.$message.error('图片上传出错!');
|
}
|
}
|
// 将收集到的文件链接设置到 this.form 中
|
t.form.violationPath = resumeLink.join(',')
|
return resumeLink;
|
}
|
return [];
|
}
|
// 依次执行上传操作并等待完成
|
uploadPromises.push(uploadAndCollect(t.fileList));
|
// 等待所有上传操作完成
|
await Promise.all(uploadPromises);
|
// 打印已更新的 this.form
|
console.log(t.form, 'form1');
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
this.fileList = fileList
|
},
|
handleClose() {
|
this.open = false;
|
this.resetForm();
|
},
|
async submit(){
|
this.$refs["ruleForm"].validate(async(valid) =>{
|
if(valid) {
|
await this.submitUpload()
|
if(this.title == '新增填报'){
|
const {id,...data} = this.form
|
const res= await addViolation(data)
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
this.fileList = []
|
this.open = false
|
this.$emit('getList')
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else{
|
const res= await editViolation(this.form)
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
this.fileList = []
|
this.open = false
|
this.$emit('getList')
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}
|
}else{
|
this.$message({
|
type:'warning',
|
message:'请完善必填信息'
|
})
|
}
|
})
|
},
|
resetForm() {
|
this.form = {
|
id: null,
|
isCm: 0,
|
name: '',
|
idCard: '',
|
icNum: '',
|
electNum: '',
|
dept: '',
|
violationTime: '',
|
operateTypeId: null,
|
violationPath: '',
|
remark: ''
|
}
|
},
|
}
|
}
|
|
</script>
|
<style scoped>
|
|
</style>
|
