|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="layout_container">
|
|
|
<header>
|
|
|
- <el-input v-model="text" class="w-50 m-2" style="width: 360px" placeholder="请输入工号/身份证号" clearable>
|
|
|
- <template #prepend>工号/身份证号 </template>
|
|
|
+ <el-input v-model="text" class="w-50 m-2" style="width: 360px" placeholder="请输入工号/身份证号/姓名" clearable>
|
|
|
+ <template #prepend>工号/身份证号/姓名 </template>
|
|
|
</el-input>
|
|
|
<el-button type="primary" icon="Search" @click="queryEmployeeInfo" style="margin-left: 10px">查询</el-button>
|
|
|
<el-button type="primary" icon="Check" @click="submitForm(ruleFormRef)" style="margin-left: 10px">保存</el-button>
|
|
@@ -263,24 +263,40 @@
|
|
|
<el-table-column prop="image" label="图片链接">
|
|
|
<template v-slot="scope">
|
|
|
<!-- <el-input size="small" v-model="scope.row.image"></el-input>-->
|
|
|
- <div v-if="scope.row.isEdit">
|
|
|
+ <div v-if="scope.row.isEdit" stylr="display:flex;">
|
|
|
<el-upload
|
|
|
- class="upload-demo"
|
|
|
ref="upload"
|
|
|
- :action="apiUrl + '/technologyArchives/putCertificateImage'"
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ :action="apiUrl + `/technologyArchives/putCertificateImage?getTime=` + scope.row.getTime"
|
|
|
:headers="header"
|
|
|
- :file-list="fileList"
|
|
|
- :data="{ socialNo: scope.row.socialNo }"
|
|
|
:on-success="uploadSuccess"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
:auto-upload="false"
|
|
|
+ :multiple
|
|
|
+ :show-file-list="true"
|
|
|
>
|
|
|
- <template #trigger>
|
|
|
- <el-button type="primary" icon="Picture">选取文件</el-button>
|
|
|
- </template>
|
|
|
- <el-button style="margin-left: 10px" type="success" icon="Upload" @click="submitUpload">上传到服务器</el-button>
|
|
|
+ <el-icon> <Plus /></el-icon>
|
|
|
</el-upload>
|
|
|
+ <el-button style="margin-top: 10px" type="success" icon="Upload" @click="submitUpload(scope.row)">上传到服务器</el-button>
|
|
|
+ <el-dialog width="75%" v-model="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
- <span v-else>{{ scope.row.image }}</span>
|
|
|
+ <!-- <span v-else>{{ scope.row.image }}</span> -->
|
|
|
+ <div v-else class="demo-image__preview">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="url"
|
|
|
+ :zoom-rate="1.2"
|
|
|
+ :max-scale="7"
|
|
|
+ :min-scale="0.2"
|
|
|
+ :preview-src-list="srcList"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column fixed="right" label="操作" min-width="180" width="180" center>
|
|
@@ -1057,9 +1073,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script setup name="TechnologyArchivesMain">
|
|
|
+<script setup lang="ts" name="TechnologyArchivesMain">
|
|
|
import {nextTick, onMounted, ref} from "vue";
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+import type { UploadFile, UploadFiles, UploadProps, UploadUserFile, UploadInstance } from 'element-plus'
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+import {stringIsBlank} from "@/utils/blank-utils";
|
|
|
import {QuestionFilled, StarFilled} from '@element-plus/icons-vue'
|
|
|
import {
|
|
|
delTechnologyArchives10ByCode,
|
|
@@ -1075,6 +1094,8 @@ import {
|
|
|
delTechnologyArchives7ByCode,
|
|
|
delTechnologyArchives9ByCode,
|
|
|
saveTechnologyArchives1,
|
|
|
+ selectImage1,
|
|
|
+ deleteImage1,
|
|
|
saveTechnologyArchives10,
|
|
|
saveTechnologyArchives12,
|
|
|
saveTechnologyArchives13,
|
|
@@ -1310,7 +1331,14 @@ const queryTechnologyArchives1 = () => {
|
|
|
row['isEdit'] = false
|
|
|
// 是否新增
|
|
|
row['isAdd'] = false
|
|
|
- })
|
|
|
+ selectImage1(row.socialNo, row.getTime)
|
|
|
+ .then((res1)=>{
|
|
|
+ url.value = row.image
|
|
|
+ srcList.value = [res1.data.image]
|
|
|
+ console.log(res1.data)
|
|
|
+ console.log(srcList.value)
|
|
|
+ })
|
|
|
+ })
|
|
|
firstData.value = res
|
|
|
})
|
|
|
.catch(() => {
|
|
@@ -1493,6 +1521,7 @@ const onAddItem = () => {
|
|
|
image: '',
|
|
|
isEdit: true,
|
|
|
isAdd: true,
|
|
|
+ isUpload: false
|
|
|
})
|
|
|
} else if(editableTabsValue.value === 'secondInfo'){
|
|
|
secondData.value.push({
|
|
@@ -1629,6 +1658,13 @@ const editFirstInfo = (row) => {
|
|
|
// 备份原始数据
|
|
|
row['oldRow'] = JSON.parse(JSON.stringify(row))
|
|
|
row.isEdit = true
|
|
|
+ // if(!row.isUpload){
|
|
|
+ // for(let i=0; i<fileList.value.length; i++){
|
|
|
+ // fileList.value[i].name = row[i].image
|
|
|
+ // }
|
|
|
+ // }else{
|
|
|
+ // fileList.value = []
|
|
|
+ // }
|
|
|
}
|
|
|
// 取消
|
|
|
const cancelFirstInfo = (row, index) => {
|
|
@@ -1644,24 +1680,78 @@ const cancelFirstInfo = (row, index) => {
|
|
|
firstKey.value = Math.random()
|
|
|
}
|
|
|
|
|
|
+//上传图片
|
|
|
const apiUrl = import.meta.env.VITE_BASE_URL
|
|
|
+const upload = ref()
|
|
|
const fileList = ref([])
|
|
|
-const upload = ref(null)
|
|
|
-const header = {
|
|
|
- token: localStorage.token,
|
|
|
+
|
|
|
+const dialogImageUrl = ref('')
|
|
|
+const dialogVisible = ref(false)
|
|
|
+
|
|
|
+const handleRemove= (uploadFile, uploadFiles) => {
|
|
|
+ console.log(uploadFile, uploadFiles)
|
|
|
}
|
|
|
-const submitUpload = () => {
|
|
|
- upload.value.submit()
|
|
|
+
|
|
|
+const handlePreview= (uploadFile) => {
|
|
|
+ dialogImageUrl.value = uploadFile.url
|
|
|
+ dialogVisible.value = true
|
|
|
+ console.log(fileList.value[0].name)
|
|
|
+}
|
|
|
+
|
|
|
+const isOversize = ref(false)
|
|
|
+// 图片上传前文件信息
|
|
|
+const beforeUpload = (file: File) => {
|
|
|
+ if (file.size / 1024 / 1024 > 2) {
|
|
|
+ ElMessage.error('上传图片大小不能超过 2MB!')
|
|
|
+ return isOversize.value = true
|
|
|
+ }
|
|
|
+ console.log('正在上传文件:'+ file.name)
|
|
|
}
|
|
|
-const uploadSuccess = (response) =>{
|
|
|
- if(response.code === 200){
|
|
|
- firstData.value.image = response.data.image;
|
|
|
- ElMessage.success('上传成功!')
|
|
|
+
|
|
|
+const header = {
|
|
|
+ token: localStorage.token,
|
|
|
+}
|
|
|
+
|
|
|
+const multiple = computed(() => {
|
|
|
+ // return stringIsBlank(props.getTime)
|
|
|
+ if(fileList.value.length > 1){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const submitUpload = (row) => {
|
|
|
+ upload.value!.submit();
|
|
|
+ if(!isOversize.value){
|
|
|
+ row.isUpload = true
|
|
|
}else{
|
|
|
- return upload.status = 'fail';
|
|
|
+ row.isUpload = false
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
+function uploadSuccess(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
|
|
|
+ const index = XEUtils.findLastIndexOf(fileList.value, (item: UploadUserFile) => {
|
|
|
+ return item.uid === uploadFile.uid;
|
|
|
+ })
|
|
|
+ if (response.code === 200) {
|
|
|
+ fileList.value[index] = {
|
|
|
+ ...fileList.value[index],
|
|
|
+ ...response.data,
|
|
|
+ }
|
|
|
+ ElMessage.success("上传成功");
|
|
|
+ } else {
|
|
|
+ fileList.value[index].status = 'fail'
|
|
|
+ ElMessage.error("上传失败");
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//查看图片
|
|
|
+const srcList = ref([])
|
|
|
+const url = ref("")
|
|
|
+
|
|
|
+
|
|
|
// 保存
|
|
|
const updateFirstInfo = (row) => {
|
|
|
if (!row.socialNo || !row.getTime) {
|
|
@@ -1673,7 +1763,6 @@ const updateFirstInfo = (row) => {
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
if (row.isAdd) {
|
|
|
let fe = 0
|
|
|
for (let num in firstData.value) {
|
|
@@ -1690,9 +1779,8 @@ const updateFirstInfo = (row) => {
|
|
|
});
|
|
|
} else {
|
|
|
callSaveFirstInfo(row, null)
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ }else {
|
|
|
let oldGetTime = row.oldRow.getTime
|
|
|
if (oldGetTime !== row.getTime) {
|
|
|
ElMessageBox.confirm(megTip, {
|
|
@@ -1710,40 +1798,50 @@ const updateFirstInfo = (row) => {
|
|
|
})
|
|
|
} else {
|
|
|
callSaveFirstInfo(row, oldGetTime)
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const callSaveFirstInfo = (row, oldGetTime) => {
|
|
|
- let title = '请确认是否保存<span style="color:#d12020;">' + row.title + '</span>?'
|
|
|
- ElMessageBox.confirm(title, {
|
|
|
- cancelButtonText: '取消',
|
|
|
- confirmButtonText: '确定',
|
|
|
- type: 'warning',
|
|
|
- distinguishCancelAndClose: true,
|
|
|
- dangerouslyUseHTMLString: true
|
|
|
- }).then(() => {
|
|
|
- saveTechnologyArchives1(row).then((res) => {
|
|
|
- ElMessage({
|
|
|
- type: "success",
|
|
|
- message: res.cg,
|
|
|
- duration: 2500,
|
|
|
- showClose: true,
|
|
|
- });
|
|
|
- if (oldGetTime !== null && oldGetTime !== row.getTime) {
|
|
|
- // 删除原始数据
|
|
|
- delTechnologyArchives1ByCode(row.socialNo, oldGetTime).then((res) => {
|
|
|
+ if(!row.isUpload){
|
|
|
+ ElMessage({
|
|
|
+ type: "warning",
|
|
|
+ message: "图片还未上传!",
|
|
|
+ duration: 2500,
|
|
|
+ showClose: true,
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ let title = '请确认是否保存<span style="color:#d12020;">' + row.title + '</span>?'
|
|
|
+ ElMessageBox.confirm(title, {
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ type: 'warning',
|
|
|
+ distinguishCancelAndClose: true,
|
|
|
+ dangerouslyUseHTMLString: true
|
|
|
+ }).then(() => {
|
|
|
+ saveTechnologyArchives1(row).then((res) => {
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: res.cg,
|
|
|
+ duration: 2500,
|
|
|
+ showClose: true,
|
|
|
+ });
|
|
|
+ if (oldGetTime !== null && oldGetTime !== row.getTime) {
|
|
|
+ // 删除原始数据
|
|
|
+ delTechnologyArchives1ByCode(row.socialNo, oldGetTime).then((res) => {
|
|
|
+ queryTechnologyArchives1()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
queryTechnologyArchives1()
|
|
|
- })
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch((action) => {
|
|
|
+ if (action === 'cancel') {
|
|
|
queryTechnologyArchives1()
|
|
|
}
|
|
|
})
|
|
|
- }).catch((action) => {
|
|
|
- if (action === 'cancel') {
|
|
|
- queryTechnologyArchives1()
|
|
|
- }
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
const deleteFirstInfo = (row) => {
|
|
@@ -1769,6 +1867,7 @@ const deleteFirstInfo = (row) => {
|
|
|
queryTechnologyArchives1()
|
|
|
}
|
|
|
})
|
|
|
+ fileList.value = [];
|
|
|
}
|
|
|
// 专业技术职称晋升情况增删改存结束
|
|
|
|