glj-代码提交
This commit is contained in:
glj
parent
469e2b1e58
commit
a2d1305482
|
|
@ -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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -1,29 +1,13 @@
|
|||
<template>
|
||||
<el-dialog title="edit picture" v-model="state.isShowDialog" width="700px" :close-on-click-modal="false"
|
||||
@close="closeDialog">
|
||||
<el-dialog title="edit" v-model="state.isShowDialog" width="550px">
|
||||
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
|
||||
<el-form-item label="upload picture" prop="img">
|
||||
<el-upload ref="upFileRef" v-model:file-list="state.fileList" action="#" list-type="picture-card" accept="image/*"
|
||||
: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"
|
||||
<el-form-item prop="title" label="name">
|
||||
<el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
|
||||
style="width:220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Home page show" prop="isMain">
|
||||
<el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show">
|
||||
<el-option label="show" value="1"></el-option>
|
||||
<el-option label="not show" value="0"></el-option>
|
||||
</el-select>
|
||||
<el-form-item prop="link" label="link">
|
||||
<el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
|
||||
style="width:220px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -36,112 +20,46 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Plus } from '@element-plus/icons-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 { UploadFilled } from '@element-plus/icons-vue'
|
||||
import { computed } from "@vue/reactivity";
|
||||
const upFileRef = ref();
|
||||
const emit = defineEmits(['callback']);
|
||||
const adminAddFormRef = ref();
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
disabled: false,
|
||||
hideUpload: false,
|
||||
fileList: [],
|
||||
isShowDialog: false,
|
||||
isLoading: false,
|
||||
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({
|
||||
img: [
|
||||
{ required: true, trigger: 'change', validator: validImg }
|
||||
title: [
|
||||
{ required: true, message: 'please enter name', trigger: 'blur' }
|
||||
],
|
||||
isMain: [
|
||||
{ required: true, message: 'please select home page show', trigger: 'change' }
|
||||
],
|
||||
remark: [
|
||||
{ required: true, message: 'please select data details', trigger: 'blur' }
|
||||
link: [
|
||||
{ required: true, message: 'please enter link', 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 = () => {
|
||||
adminAddFormRef.value.resetFields();
|
||||
state.fileList = [];
|
||||
upFileRef.value.clearFiles();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row) => {
|
||||
state.isShowDialog = true;
|
||||
//回显图片
|
||||
state.fileList.push({ 'name': row.name, 'uid': row.id, 'url': row.link });
|
||||
state.hideUpload = state.fileList.length >= 1
|
||||
//state.dialogImageUrl = row.link;
|
||||
state.ruleForm.isMain = row.isMain + "";
|
||||
state.ruleForm.title = row.name;
|
||||
state.id = row.id
|
||||
state.ruleForm.id = row.id;
|
||||
getWebsitesById(row.id).then(da=>{
|
||||
state.ruleForm.title = da.title;
|
||||
state.ruleForm.link = da.link;
|
||||
})
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
//重置表格数据
|
||||
state.ruleForm.tableData = [];
|
||||
resetField();
|
||||
};
|
||||
// 取消
|
||||
|
|
@ -152,24 +70,9 @@ const onCancel = () => {
|
|||
const onSubmit = () => {
|
||||
adminAddFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log(state.fileList);
|
||||
state.isLoading = true;
|
||||
|
||||
state.fileList.forEach(item => {
|
||||
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");
|
||||
updateWebsites(state.ruleForm).then(da => {
|
||||
ElMessage.success("success");
|
||||
emit('callback');
|
||||
}).finally(() => {
|
||||
state.isLoading = false;
|
||||
|
|
@ -186,37 +89,4 @@ defineExpose({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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>
|
||||
<style scoped></style>
|
||||
|
|
@ -1,29 +1,13 @@
|
|||
<template>
|
||||
<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-item label="upload picture" prop="img">
|
||||
<el-upload ref="upFileRef" class="upload-demo" drag accept="image/*" action="#" multiple :http-request="uploadPic"
|
||||
: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"
|
||||
<el-form-item prop="title" label="name">
|
||||
<el-input v-model="state.ruleForm.title" class="m-2" placeholder="please enter name" :rows="3" type="text"
|
||||
style="width:220px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Home page show" prop="isMain">
|
||||
<el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show">
|
||||
<el-option label="show" value="1"></el-option>
|
||||
<el-option label="not show" value="0"></el-option>
|
||||
</el-select>
|
||||
<el-form-item prop="link" label="link">
|
||||
<el-input v-model="state.ruleForm.link" class="m-2" placeholder="please enter link" :rows="3" type="text"
|
||||
style="width:220px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
|
@ -37,9 +21,8 @@
|
|||
|
||||
<script setup>
|
||||
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 { UploadFilled } from '@element-plus/icons-vue'
|
||||
const upFileRef = ref();
|
||||
const emit = defineEmits(['callback']);
|
||||
const adminAddFormRef = ref();
|
||||
|
|
@ -47,55 +30,20 @@ const state = reactive({
|
|||
isShowDialog: false,
|
||||
isLoading: false,
|
||||
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({
|
||||
img: [
|
||||
{ required: true, trigger: 'change', validator: validImg }
|
||||
title: [
|
||||
{ required: true, message: 'please enter name', trigger: 'blur' }
|
||||
],
|
||||
isMain: [
|
||||
{ required: true, message: 'please select home page show', trigger: 'change' }
|
||||
],
|
||||
remark: [
|
||||
{ required: true, message: 'please select data details', trigger: 'blur' }
|
||||
link: [
|
||||
{ required: true, message: 'please enter link', 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 = () => {
|
||||
adminAddFormRef.value.resetFields();
|
||||
|
|
@ -106,13 +54,11 @@ const resetField = () => {
|
|||
// 打开弹窗
|
||||
const openDialog = (row) => {
|
||||
state.isShowDialog = true;
|
||||
state.disasterId = row;
|
||||
state.ruleForm.disasterId = row;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
//重置表格数据
|
||||
state.ruleForm.tableData = [];
|
||||
resetField();
|
||||
};
|
||||
// 取消
|
||||
|
|
@ -124,20 +70,8 @@ const onSubmit = () => {
|
|||
adminAddFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
state.isLoading = true;
|
||||
state.fileArray.forEach(item => {
|
||||
state.dataForm.append('file', item);
|
||||
})
|
||||
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");
|
||||
saveWebsites(state.ruleForm).then(da => {
|
||||
ElMessage.success("success");
|
||||
emit('callback');
|
||||
}).finally(() => {
|
||||
state.isLoading = false;
|
||||
|
|
|
|||
|
|
@ -10,14 +10,6 @@
|
|||
<el-col :span="14">
|
||||
<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;">
|
||||
<!-- <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-icon>
|
||||
<ele-Upload />
|
||||
|
|
@ -36,22 +28,12 @@
|
|||
@selection-change="handleSelectionChange" style="width: 100%">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<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">
|
||||
{{ formatName(scope.row.name) }}
|
||||
{{ formatName(scope.row.title) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="link" label="Image" 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 prop="link" label="Link" width="450" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
|
|
@ -69,7 +51,6 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-config-provider>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
<Upload ref="uploadRef" @callback="getTableData" />
|
||||
<EditPicture ref="editUploadRef" @callback="getTableData" />
|
||||
</div>
|
||||
|
|
@ -79,7 +60,8 @@
|
|||
import type { TabsPaneContext } from 'element-plus';
|
||||
import Upload from './component/upload.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';
|
||||
const activeName = ref('first');
|
||||
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 { ElMessageBox, ElMessage } from 'element-plus';
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
const auditRef = ref();
|
||||
const uploadRef = ref();
|
||||
const editUploadRef = ref();
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
multipleSelection: [],
|
||||
tabVal: 'first',
|
||||
|
|
@ -123,7 +103,6 @@ const handleSelectionChange = (val) => {
|
|||
};
|
||||
//格式化图片名称
|
||||
const formatName = (name) => {
|
||||
|
||||
return name;
|
||||
};
|
||||
const auditData = (row) => {
|
||||
|
|
@ -185,7 +164,8 @@ const getDisasterData = () => {
|
|||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
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) => {
|
||||
state.tableData.data = res.records;
|
||||
state.tableData.total = res.total;
|
||||
|
|
@ -213,14 +193,14 @@ const batchDel = () => {
|
|||
ElMessage.warning('Select the data to be operated first');
|
||||
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',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
let id = state.multipleSelection.map((item) => item.id);
|
||||
delPicture(id.join()).then((res) => {
|
||||
delWebsites(id.join()).then((res) => {
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
});
|
||||
|
|
@ -229,13 +209,13 @@ const batchDel = () => {
|
|||
};
|
||||
// 删除图片信息
|
||||
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',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delPicture(row.id).then((res) => {
|
||||
delWebsites(row.id).then((res) => {
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue