yaowang
/
vordm-admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

glj-代码提交

This commit is contained in:
glj 2023-05-08 19:32:29 +08:00
parent 469e2b1e58
commit a2d1305482
4 changed files with 100 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/api/websites/websites.js Normal file
View File

@ -0,0 +1,50 @@
import request from '/@/utils/request';
import { moduleName } from '/@/utils/request';
export function websitesPage(current, size, params) {
return request({
url: '/api/' + moduleName + '/ui/websites/websitesPage',
method: 'get',
params: {
current,
size,
...params
},
});
};
export function saveWebsites(data) {
return request({
url: '/api/' + moduleName + '/ui/websites/saveWebsites',
method: 'post',
data: data
});
};
export function updateWebsites(data) {
return request({
url: '/api/' + moduleName + '/ui/websites/updateWebsites',
method: 'post',
data: data
});
};
export const delWebsites = (id) => {
return request({
url: '/api/' + moduleName + '/ui/websites/remove',
method: 'delete',
params: {
id
}
});
};
export const getWebsitesById = (id) => {
return request({
url: '/api/' + moduleName + '/ui/websites/getWebsitesById',
method: 'get',
params: {
id
}
});
};

174
src/views/dataService/disasterPartners/component/editPicture.vue
View File

@ -1,29 +1,13 @@
<template> <template>
<el-dialog title="edit picture" v-model="state.isShowDialog" width="700px" :close-on-click-modal="false" <el-dialog title="edit" v-model="state.isShowDialog" width="550px">
@close="closeDialog">
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef"> <el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="upload picture" prop="img"> <el-form-item prop="title" label="name">
<el-upload ref="upFileRef" v-model:file-list="state.fileList" action="#" list-type="picture-card" accept="image/*" <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="changeUpload" :limit="1"
:auto-upload="false" :class="{ hide: state.hideUpload }">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-dialog v-model="state.dialogVisible">
<img w-full :src="state.dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<el-form-item prop="title" label="data title">
<el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter data title" :rows="3" type="text"
style="width:220px;" /> style="width:220px;" />
</el-form-item> </el-form-item>
<el-form-item label="Home page show" prop="isMain"> <el-form-item prop="link" label="link">
<el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show"> <el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
<el-option label="show" value="1"></el-option> style="width:220px;" />
<el-option label="not show" value="0"></el-option>
</el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -36,112 +20,46 @@
</template> </template>
<script setup> <script setup>
import { Plus } from '@element-plus/icons-vue'
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { updatePicture } from '/@/api/data/pictureInfo.js'; import { getWebsitesById, updateWebsites } from '/@/api/websites/websites.js';
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
import { computed } from "@vue/reactivity";
const upFileRef = ref();
const emit = defineEmits(['callback']); const emit = defineEmits(['callback']);
const adminAddFormRef = ref(); const adminAddFormRef = ref();
const state = reactive({ const state = reactive({
dialogVisible: false,
dialogImageUrl: '',
disabled: false,
hideUpload: false,
fileList: [],
isShowDialog: false, isShowDialog: false,
isLoading: false, isLoading: false,
ruleForm: { ruleForm: {
title: null,
}, },
tableData: [],
//字典值
dictData: [],
unitData: [],
standardId: '',
detectionData: [],
disasterId: null,
dataForm: new FormData(),
fileArray: [],
id: null,
}) })
//上传图片改变时
const changeUpload = (file, fileList) => {
state.dialogImageUrl = file.url;
state.hideUpload = fileList.length >= 1;
}
//验证图片
const validImg = (rule, value, callback) => {
if (state.fileList.length > 0) {
adminAddFormRef.value.clearValidate('img')
callback();
} else {
return callback(new Error('please upload image'));
}
}
//校验规则 //校验规则
const rules = reactive({ const rules = reactive({
img: [ title: [
{ required: true, trigger: 'change', validator: validImg } { required: true, message: 'please enter name', trigger: 'blur' }
], ],
isMain: [ link: [
{ required: true, message: 'please select home page show', trigger: 'change' } { required: true, message: 'please enter link', trigger: 'blur' }
],
remark: [
{ required: true, message: 'please select data details', trigger: 'blur' }
], ],
}) })
//图片删除
const handleRemove = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
state.hideUpload = state.fileList.length >= 1
}
//图片预览
const handlePictureCardPreview = (uploadFile) => {
state.dialogImageUrl = uploadFile.url
state.dialogVisible = true
}
//图片上传之前
const beforeUpload = (file) => {
const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
if (!isLt1GB) {
ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
}
return isLt1GB;
}
//手动上传操作
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//移除时
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item => item.uid === data.raw.uid), 1)
console.log(state.fileArray)
}
//重置表单 //重置表单
const resetField = () => { const resetField = () => {
adminAddFormRef.value.resetFields(); adminAddFormRef.value.resetFields();
state.fileList = [];
upFileRef.value.clearFiles();
} }
// 打开弹窗 // 打开弹窗
const openDialog = (row) => { const openDialog = (row) => {
state.isShowDialog = true; state.isShowDialog = true;
//回显图片 state.ruleForm.id = row.id;
state.fileList.push({ 'name': row.name, 'uid': row.id, 'url': row.link }); getWebsitesById(row.id).then(da=>{
state.hideUpload = state.fileList.length >= 1 state.ruleForm.title = da.title;
//state.dialogImageUrl = row.link; state.ruleForm.link = da.link;
state.ruleForm.isMain = row.isMain + ""; })
state.ruleForm.title = row.name;
state.id = row.id
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.isShowDialog = false; state.isShowDialog = false;
//重置表格数据
state.ruleForm.tableData = [];
resetField(); resetField();
}; };
// 取消 // 取消
@ -152,24 +70,9 @@ const onCancel = () => {
const onSubmit = () => { const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => { adminAddFormRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
console.log(state.fileList);
state.isLoading = true; state.isLoading = true;
updateWebsites(state.ruleForm).then(da => {
state.fileList.forEach(item => { ElMessage.success("success");
console.log(item.raw,"item.raw");
if (item.raw) {
console.log(1111111111111);
state.dataForm.append('file', item.raw);
}
})
state.dataForm.append('isMain', state.ruleForm.isMain);
state.dataForm.append('id', state.id);
state.dataForm.append('name', state.ruleForm.title);
for (let [a, b] of state.dataForm.entries()) {
console.log(a, b, '--------------');
}
updatePicture(state.dataForm).then(res => {
ElMessage.success("Upload successfully");
emit('callback'); emit('callback');
}).finally(() => { }).finally(() => {
state.isLoading = false; state.isLoading = false;
@ -186,37 +89,4 @@ defineExpose({
}); });
</script> </script>
<style scoped> <style scoped></style>
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.hide .el-upload--picture-card {
display: none;
}
</style>

98
src/views/dataService/disasterPartners/component/upload.vue
View File

@ -1,29 +1,13 @@
<template> <template>
<el-dialog title="upload" v-model="state.isShowDialog" width="700px"> <el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef"> <el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="upload picture" prop="img"> <el-form-item prop="title" label="name">
<el-upload ref="upFileRef" class="upload-demo" drag accept="image/*" action="#" multiple :http-request="uploadPic" <el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
:on-remove="removePic" :before-upload="beforeUpload">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
<template #tip>
<div class="el-upload__tip">
image files with a size less than 1GB
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item prop="title" label="data title">
<el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter data title" :rows="3" type="text"
style="width:220px;" /> style="width:220px;" />
</el-form-item> </el-form-item>
<el-form-item label="Home page show" prop="isMain"> <el-form-item prop="link" label="link">
<el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show"> <el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
<el-option label="show" value="1"></el-option> style="width:220px;" />
<el-option label="not show" value="0"></el-option>
</el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -37,9 +21,8 @@
<script setup> <script setup>
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { uploadData } from '/@/api/data/pictureInfo.js'; import { saveWebsites } from '/@/api/websites/websites.js';
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
const upFileRef = ref(); const upFileRef = ref();
const emit = defineEmits(['callback']); const emit = defineEmits(['callback']);
const adminAddFormRef = ref(); const adminAddFormRef = ref();
@ -47,55 +30,20 @@ const state = reactive({
isShowDialog: false, isShowDialog: false,
isLoading: false, isLoading: false,
ruleForm: { ruleForm: {
title:null, title: null,
}, },
tableData: [],
//字典值
dictData: [],
unitData: [],
standardId: '',
detectionData: [],
disasterId: null,
dataForm: new FormData(),
fileArray: [],
}) })
const validImg = (rule, value, callback) => {
if (state.fileArray.length > 0) {
adminAddFormRef.value.clearValidate('img')
callback();
} else {
return callback(new Error('please upload image'));
}
}
//校验规则 //校验规则
const rules = reactive({ const rules = reactive({
img: [ title: [
{ required: true, trigger: 'change', validator: validImg } { required: true, message: 'please enter name', trigger: 'blur' }
], ],
isMain: [ link: [
{ required: true, message: 'please select home page show', trigger: 'change' } { required: true, message: 'please enter link', trigger: 'blur' }
],
remark: [
{ required: true, message: 'please select data details', trigger: 'blur' }
], ],
}) })
//图片上传之前
const beforeUpload = (file) => {
const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
if (!isLt1GB) {
ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
}
return isLt1GB;
}
//手动上传操作
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//移除时
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item => item.uid === data.raw.uid), 1)
console.log(state.fileArray)
}
//重置表单 //重置表单
const resetField = () => { const resetField = () => {
adminAddFormRef.value.resetFields(); adminAddFormRef.value.resetFields();
@ -106,13 +54,11 @@ const resetField = () => {
// 打开弹窗 // 打开弹窗
const openDialog = (row) => { const openDialog = (row) => {
state.isShowDialog = true; state.isShowDialog = true;
state.disasterId = row; state.ruleForm.disasterId = row;
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.isShowDialog = false; state.isShowDialog = false;
//重置表格数据
state.ruleForm.tableData = [];
resetField(); resetField();
}; };
// 取消 // 取消
@ -124,20 +70,8 @@ const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => { adminAddFormRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
state.isLoading = true; state.isLoading = true;
state.fileArray.forEach(item => { saveWebsites(state.ruleForm).then(da => {
state.dataForm.append('file', item); ElMessage.success("success");
})
state.dataForm.append('disasterId', state.disasterId);
state.dataForm.append('isMain', state.ruleForm.isMain);
state.dataForm.append('title', state.ruleForm.title);
for (let [a, b] of state.dataForm.entries()) {
console.log(a, b, '--------------');
}
uploadData(state.dataForm).then(res => {
state.dataForm = new FormData(),
state.fileArray = [];
upFileRef.value.clearFiles();
ElMessage.success("Upload successfully");
emit('callback'); emit('callback');
}).finally(() => { }).finally(() => {
state.isLoading = false; state.isLoading = false;

42
src/views/dataService/disasterPartners/index.vue
View File

@ -10,14 +10,6 @@
<el-col :span="14"> <el-col :span="14">
<div class="system-role-padding layout-padding-auto layout-padding-view" style="height: 90vh;"> <div class="system-role-padding layout-padding-auto layout-padding-view" style="height: 90vh;">
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;"> <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
<!-- <el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
clearable></el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search/>
</el-icon>
search
</el-button>-->
<el-button size="default" type="success" class="ml10" @click="uploadData"> <el-button size="default" type="success" class="ml10" @click="uploadData">
<el-icon> <el-icon>
<ele-Upload /> <ele-Upload />
@ -36,22 +28,12 @@
@selection-change="handleSelectionChange" style="width: 100%"> @selection-change="handleSelectionChange" style="width: 100%">
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column type="index" label="ID" width="50" /> <el-table-column type="index" label="ID" width="50" />
<el-table-column prop="name" label="Name" show-overflow-tooltip> <el-table-column prop="title" label="Name" width="120" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
{{ formatName(scope.row.name) }} {{ formatName(scope.row.title) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="link" label="Image" show-overflow-tooltip> <el-table-column prop="link" label="Link" width="450" show-overflow-tooltip>
<template #default="scope">
<el-popover trigger="hover" placement="right" popper-class="max-h-300px overflow-auto" :width="330">
<!-- table中原本显示的图片 -->
<template #reference>
<img :src="scope.row.link" :alt="scope.row.link" style="max-height: 130px;max-width: 130px">
</template>
<!-- 鼠标移入时弹出的图片 -->
<img :src="scope.row.link" alt="" style="height: 150px;width: 300px">
</el-popover>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip> <el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
@ -69,7 +51,6 @@
</el-col> </el-col>
</el-row> </el-row>
</el-config-provider> </el-config-provider>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<Upload ref="uploadRef" @callback="getTableData" /> <Upload ref="uploadRef" @callback="getTableData" />
<EditPicture ref="editUploadRef" @callback="getTableData" /> <EditPicture ref="editUploadRef" @callback="getTableData" />
</div> </div>
@ -79,7 +60,8 @@
import type { TabsPaneContext } from 'element-plus'; import type { TabsPaneContext } from 'element-plus';
import Upload from './component/upload.vue'; import Upload from './component/upload.vue';
import EditPicture from './component/editPicture.vue'; import EditPicture from './component/editPicture.vue';
import { getPicturePage, getDisasterPage, delPicture } from '/@/api/data/pictureInfo.js'; import { getDisasterPage } from '/@/api/data/pictureInfo.js';
import { websitesPage, delWebsites } from '/@/api/websites/websites.js';
import en from 'element-plus/dist/locale/en.mjs'; import en from 'element-plus/dist/locale/en.mjs';
const activeName = ref('first'); const activeName = ref('first');
import disasterTable from "/@/components/table/DisasterTable.vue"; import disasterTable from "/@/components/table/DisasterTable.vue";
@ -87,12 +69,10 @@ import disasterTable from "/@/components/table/DisasterTable.vue";
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue'; import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件 // 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const auditRef = ref(); const auditRef = ref();
const uploadRef = ref(); const uploadRef = ref();
const editUploadRef = ref(); const editUploadRef = ref();
// 定义变量内容 // 定义变量内容
const roleDialogRef = ref();
const state = reactive({ const state = reactive({
multipleSelection: [], multipleSelection: [],
tabVal: 'first', tabVal: 'first',
@ -123,7 +103,6 @@ const handleSelectionChange = (val) => {
}; };
//格式化图片名称 //格式化图片名称
const formatName = (name) => { const formatName = (name) => {
return name; return name;
}; };
const auditData = (row) => { const auditData = (row) => {
@ -185,7 +164,8 @@ const getDisasterData = () => {
// 初始化表格数据 // 初始化表格数据
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
getPicturePage(state.tableData.param.pageNum, state.tableData.param.pageSize, { disasterId_equal: state.disasterId, isDeleted_equal: 0 }).then(
websitesPage(state.tableData.param.pageNum, state.tableData.param.pageSize, { disasterId: state.disasterId}).then(
(res) => { (res) => {
state.tableData.data = res.records; state.tableData.data = res.records;
state.tableData.total = res.total; state.tableData.total = res.total;
@ -213,14 +193,14 @@ const batchDel = () => {
ElMessage.warning('Select the data to be operated first'); ElMessage.warning('Select the data to be operated first');
return false; return false;
} }
ElMessageBox.confirm(`This action batch deletes the picture data，Whether to continue?`, 'tip', { ElMessageBox.confirm(`This action batch deletes the data，Whether to continue?`, 'tip', {
confirmButtonText: 'confirm', confirmButtonText: 'confirm',
cancelButtonText: 'cancel', cancelButtonText: 'cancel',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
let id = state.multipleSelection.map((item) => item.id); let id = state.multipleSelection.map((item) => item.id);
delPicture(id.join()).then((res) => { delWebsites(id.join()).then((res) => {
getTableData(); getTableData();
ElMessage.success('delete successfully'); ElMessage.success('delete successfully');
}); });
@ -229,13 +209,13 @@ const batchDel = () => {
}; };
// 删除图片信息 // 删除图片信息
const del = (row) => { const del = (row) => {
ElMessageBox.confirm(`This action will delete the picture：“${row.name}”，，Whether to continue?`, 'tip', { ElMessageBox.confirm(`This action will delete the picture：“${row.title}”，，Whether to continue?`, 'tip', {
confirmButtonText: 'confirm', confirmButtonText: 'confirm',
cancelButtonText: 'cancel', cancelButtonText: 'cancel',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
delPicture(row.id).then((res) => { delWebsites(row.id).then((res) => {
getTableData(); getTableData();
ElMessage.success('delete successfully'); ElMessage.success('delete successfully');
}); });