|
|
|
@ -6,65 +6,59 @@
|
|
|
|
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
|
|
|
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
|
|
|
<span>项目巡礼</span>
|
|
|
|
<span>项目巡礼</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="topright" v-if="action === 'fill' || !action">
|
|
|
|
<div class="topright">
|
|
|
|
<el-button type="primary" size="medium" plain
|
|
|
|
<el-button type="primary" size="medium" plain
|
|
|
|
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="openAddDialog">
|
|
|
|
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
|
|
|
|
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
|
|
|
|
@click="dialogVisible = true">
|
|
|
|
|
|
|
|
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
|
|
|
|
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
|
|
|
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
|
|
|
新增
|
|
|
|
新增
|
|
|
|
</el-button>
|
|
|
|
</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 展示的区域 -->
|
|
|
|
<!-- 展示区域 -->
|
|
|
|
|
|
|
|
<div class="image-container">
|
|
|
|
<div class="image-container">
|
|
|
|
<div v-for="(item, index) in projectList" :key="index" class="image-box" >
|
|
|
|
<div v-for="(image, index) in images" :key="index" class="image-box">
|
|
|
|
<img :src="item.img" alt="项目图片" class="image">
|
|
|
|
<img :src="image.src" alt="项目图片" class="image">
|
|
|
|
<div class="close-button" @click="removeImage(index)">
|
|
|
|
<div class="close-button" @click="removeImage(index)">
|
|
|
|
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
|
|
|
|
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="iconguanbi2" @click="openEditDialog(item)"> <img
|
|
|
|
|
|
|
|
src="../../../assets/images/detailsicon/icon-bj@2x.png" alt=""></div>
|
|
|
|
|
|
|
|
<div class="dianjibox" @click="handleItemClick(item)"></div>
|
|
|
|
|
|
|
|
<div class="bottombox">
|
|
|
|
<div class="bottombox">
|
|
|
|
<div class="bottomtext"><span>{{ item.xmmc || '未命名项目' }}</span></div>
|
|
|
|
<div class="bottomtext"><span>新科大厦项目正在施工</span></div>
|
|
|
|
<div class="bottomtime"><span>{{ formatDate(item.createTime) }}</span></div>
|
|
|
|
<div class="bottomtime"><span>2025-02-11</span></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
|
<!-- 新增弹窗 -->
|
|
|
|
<el-dialog title="上传附件" :visible.sync="dialogVisible" width="50%">
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
|
|
|
|
<el-form :model="form" label-width="100px">
|
|
|
|
<el-form :model="form" :rules="rules" ref="projectForm" label-width="100px">
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item label="项目名称" prop="xmmc">
|
|
|
|
<el-form-item label="项目名称">
|
|
|
|
<el-input v-model="form.xmmc" placeholder="请输入项目名称"></el-input>
|
|
|
|
<el-input v-model="form.xmmc" placeholder="请输入项目名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-form-item label="年度">
|
|
|
|
<el-form-item label="年度">
|
|
|
|
<el-date-picker v-model="form.year" type="year" value-format="yyyy" placeholder="选择年度"
|
|
|
|
<el-input v-model="form.year" placeholder="请输入年度"></el-input>
|
|
|
|
@change="handleYearChange" />
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-form-item label="网页地址">
|
|
|
|
<el-col :span="12">
|
|
|
|
<el-input v-model="form.webUrl" placeholder="请输入网页地址"></el-input>
|
|
|
|
<el-form-item label="网页地址">
|
|
|
|
</el-form-item>
|
|
|
|
<el-input v-model="form.webUrl" placeholder="请输入网页地址"></el-input>
|
|
|
|
<el-form-item label="时间">
|
|
|
|
</el-form-item>
|
|
|
|
<el-date-picker v-model="form.sj" type="datetime" placeholder="选择日期时间" style="width: 51rem;"
|
|
|
|
</el-col>
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
|
|
|
|
<el-col :span="12">
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="时间">
|
|
|
|
<el-form-item label="图片上传">
|
|
|
|
<el-date-picker v-model="form.sj" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
|
|
|
|
</el-date-picker>
|
|
|
|
:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeUpload">
|
|
|
|
</el-form-item>
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
</el-col>
|
|
|
|
</el-upload>
|
|
|
|
</el-row>
|
|
|
|
<el-dialog :visible.sync="dialogImageUrlVisible">
|
|
|
|
<el-form-item label="图片上传" prop="img">
|
|
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
|
|
<ImageUpload v-model="form.img" :file-list="fileList" :multiple="false" :limit="1"
|
|
|
|
</el-dialog>
|
|
|
|
@change="handleImageChange" />
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="说明">
|
|
|
|
<el-form-item label="说明">
|
|
|
|
<el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入说明"></el-input>
|
|
|
|
<el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入说明"></el-input>
|
|
|
|
@ -76,334 +70,146 @@
|
|
|
|
<el-input v-model="form.newsEvent" type="textarea" :rows="4" placeholder="请输入新闻事件"></el-input>
|
|
|
|
<el-input v-model="form.newsEvent" type="textarea" :rows="4" placeholder="请输入新闻事件"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="附件上传">
|
|
|
|
<el-form-item label="附件上传">
|
|
|
|
<fileUpload v-model="form.fj" />
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handleFilePreview"
|
|
|
|
|
|
|
|
:on-remove="handleRemove" :before-upload="beforeUpload">
|
|
|
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
|
|
|
</el-upload>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="submitForm" :loading="loading">{{ isEditMode ? '保存' : '确 定'
|
|
|
|
<el-button type="primary" @click="handleAddXmxl">确 定</el-button>
|
|
|
|
}}</el-button>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<!-- 新增详情弹窗 -->
|
|
|
|
|
|
|
|
<el-dialog title="项目详情" :visible.sync="detailVisible" width="50%">
|
|
|
|
|
|
|
|
<el-form :model="currentItem" label-width="100px" :disabled="true">
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<el-form-item label="项目名称">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.xmmc"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<el-form-item label="年度">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.year"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<el-form-item label="网页地址">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.webUrl"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
|
|
<el-form-item label="时间">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.sj"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
<el-form-item label="项目图片">
|
|
|
|
|
|
|
|
<img :src="currentItem.img" style="max-width: 100%; max-height: 200px;" v-if="currentItem.img">
|
|
|
|
|
|
|
|
<span v-else>无图片</span>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="说明">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.content" type="textarea" :rows="4"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="大事记">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.bigEvent" type="textarea" :rows="4"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="新闻事件">
|
|
|
|
|
|
|
|
<el-input v-model="currentItem.newsEvent" type="textarea" :rows="4"></el-input>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
|
|
|
<el-button type="primary" @click="detailVisible = false">关 闭</el-button>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import ImageUpload from '@/components/ImageUpload';
|
|
|
|
import { addXmxl, getXmxlPage } from '@/api/ManageApi/index.js';
|
|
|
|
import fileUpload from '@/components/FileUpload';
|
|
|
|
|
|
|
|
import { addXmxl, getXmxlList, deleteXmxl, updataXmxl } from '@/api/ManageApi/index';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: { ImageUpload, fileUpload },
|
|
|
|
|
|
|
|
props: {
|
|
|
|
|
|
|
|
xmId: {
|
|
|
|
|
|
|
|
type: Number,
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
default: 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
action: {
|
|
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
|
|
required: true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
detailVisible: false,
|
|
|
|
images: [
|
|
|
|
currentItem: {},
|
|
|
|
{ src: 'https://picsum.photos/300/200?random=1', },
|
|
|
|
|
|
|
|
{ src: 'https://picsum.photos/300/200?random=2', },
|
|
|
|
|
|
|
|
{ src: 'https://picsum.photos/300/200?random=3', },
|
|
|
|
|
|
|
|
],
|
|
|
|
dialogVisible: false,
|
|
|
|
dialogVisible: false,
|
|
|
|
isEditMode: false,
|
|
|
|
previewDialogVisible: false,
|
|
|
|
loading: false,
|
|
|
|
previewImageUrl: '',
|
|
|
|
currentEditId: null,
|
|
|
|
|
|
|
|
projectList: [],
|
|
|
|
|
|
|
|
fileList: [],
|
|
|
|
fileList: [],
|
|
|
|
form: {
|
|
|
|
form: {
|
|
|
|
bigEvent: "",
|
|
|
|
xmmc: '',
|
|
|
|
content: "",
|
|
|
|
year: '',
|
|
|
|
fj: "",
|
|
|
|
webUrl: '',
|
|
|
|
img: "",
|
|
|
|
sj: '',
|
|
|
|
newsEvent: "",
|
|
|
|
content: '',
|
|
|
|
sj: "",
|
|
|
|
bigEvent: '',
|
|
|
|
webUrl: "",
|
|
|
|
newsEvent: '',
|
|
|
|
xmmc: "",
|
|
|
|
fj: '',
|
|
|
|
year: ""
|
|
|
|
img: '',
|
|
|
|
},
|
|
|
|
createBy: '',
|
|
|
|
rules: {
|
|
|
|
createId: 0,
|
|
|
|
xmmc: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
|
|
|
createTime: '',
|
|
|
|
year: [{ required: true, message: '请选择年度', trigger: 'change' }],
|
|
|
|
id: 0,
|
|
|
|
img: [{ required: true, message: '请上传项目图片', trigger: 'change' }]
|
|
|
|
updateBy: '',
|
|
|
|
|
|
|
|
updateId: 0,
|
|
|
|
|
|
|
|
updateTime: '',
|
|
|
|
|
|
|
|
xmId: 0 // 确保 xmId 存在
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
dialogTitle() {
|
|
|
|
|
|
|
|
return this.isEditMode ? '编辑项目巡礼' : '新增项目巡礼';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
|
this.fetchProjectList();
|
|
|
|
const xmid = this.$route.query.xmid; // 假设 xmid 通过路由参数传递
|
|
|
|
|
|
|
|
this.form.xmId = xmid; // 设置 xmId
|
|
|
|
|
|
|
|
this.fetchImages(xmid);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
// 处理项目点击
|
|
|
|
async fetchImages(xmid) {
|
|
|
|
handleItemClick(item) {
|
|
|
|
|
|
|
|
// 阻止事件冒泡，避免触发父元素的点击事件
|
|
|
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 检查点击的是否是操作按钮
|
|
|
|
|
|
|
|
const isActionButton = event.target.closest('.close-button') ||
|
|
|
|
|
|
|
|
event.target.closest('.iconguanbi2');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (isActionButton) {
|
|
|
|
|
|
|
|
return; // 如果是操作按钮，不处理主区域点击
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (item.webUrl) {
|
|
|
|
|
|
|
|
// 有网址则在新标签页打开
|
|
|
|
|
|
|
|
window.open(item.webUrl, '_blank');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 无网址则显示详情弹窗
|
|
|
|
|
|
|
|
this.currentItem = { ...item };
|
|
|
|
|
|
|
|
this.detailVisible = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取项目巡礼列表
|
|
|
|
|
|
|
|
fetchProjectList() {
|
|
|
|
|
|
|
|
getXmxlList({ xmId: this.xmId })
|
|
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
|
|
this.projectList = response.data || [];
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message.error(response.msg || '获取数据失败');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
|
|
this.$message.error('请求失败');
|
|
|
|
|
|
|
|
console.error(error);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 删除项目
|
|
|
|
|
|
|
|
async removeImage(index,event) {
|
|
|
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
await this.$confirm('确定要删除该项目巡礼吗?', '提示', {
|
|
|
|
const response = await getXmxlPage({ xmid });
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
if (response.data && response.data.list) {
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
this.images = response.data.list.map(item => ({
|
|
|
|
type: 'warning'
|
|
|
|
src: item.fj
|
|
|
|
});
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
const item = this.projectList[index];
|
|
|
|
|
|
|
|
const response = await deleteXmxl([item.id]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
|
|
this.$message.success('删除成功');
|
|
|
|
|
|
|
|
this.projectList.splice(index, 1);
|
|
|
|
|
|
|
|
this.$emit('deleted', item.id);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
throw new Error(response.msg || '删除失败');
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
if (error !== 'cancel') {
|
|
|
|
// this.$message.error('获取图片失败');
|
|
|
|
this.$message.error(error.message || '删除失败');
|
|
|
|
console.error(error);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
handleAdd() {
|
|
|
|
// 打开新增对话框
|
|
|
|
|
|
|
|
openAddDialog() {
|
|
|
|
|
|
|
|
this.isEditMode = false;
|
|
|
|
|
|
|
|
this.currentEditId = null;
|
|
|
|
|
|
|
|
this.resetForm();
|
|
|
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 打开编辑对话框
|
|
|
|
|
|
|
|
openEditDialog(item) {
|
|
|
|
|
|
|
|
this.isEditMode = true;
|
|
|
|
|
|
|
|
this.currentEditId = item.id;
|
|
|
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
|
|
|
|
|
|
|
// 填充表单数据
|
|
|
|
|
|
|
|
this.form = {
|
|
|
|
|
|
|
|
bigEvent: item.bigEvent || "",
|
|
|
|
|
|
|
|
content: item.content || "",
|
|
|
|
|
|
|
|
fj: item.fj || "",
|
|
|
|
|
|
|
|
img: item.img || "",
|
|
|
|
|
|
|
|
newsEvent: item.newsEvent || "",
|
|
|
|
|
|
|
|
sj: item.sj || "",
|
|
|
|
|
|
|
|
webUrl: item.webUrl || "",
|
|
|
|
|
|
|
|
xmmc: item.xmmc || "",
|
|
|
|
|
|
|
|
year: item.year ? item.year.substring(0, 4) : "" // 只取年份部分
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置图片
|
|
|
|
|
|
|
|
this.fileList = item.img ? [{ url: item.img }] : [];
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
removeImage(index) {
|
|
|
|
// 处理年份选择
|
|
|
|
if (confirm('确定要删除吗？')) {
|
|
|
|
handleYearChange(year) {
|
|
|
|
this.images.splice(index, 1);
|
|
|
|
if (year) {
|
|
|
|
|
|
|
|
const today = new Date();
|
|
|
|
|
|
|
|
const currentMonth = String(today.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
|
|
|
const currentDay = String(today.getDate()).padStart(2, '0');
|
|
|
|
|
|
|
|
this.form.year = `${year}-${currentMonth}-${currentDay}`;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
// 重置表单
|
|
|
|
this.fileList = fileList;
|
|
|
|
resetForm() {
|
|
|
|
|
|
|
|
this.$refs.projectForm?.resetFields();
|
|
|
|
|
|
|
|
this.form = {
|
|
|
|
|
|
|
|
bigEvent: "",
|
|
|
|
|
|
|
|
content: "",
|
|
|
|
|
|
|
|
fj: "",
|
|
|
|
|
|
|
|
img: "",
|
|
|
|
|
|
|
|
newsEvent: "",
|
|
|
|
|
|
|
|
sj: "",
|
|
|
|
|
|
|
|
webUrl: "",
|
|
|
|
|
|
|
|
xmmc: "",
|
|
|
|
|
|
|
|
year: ""
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
handlePictureCardPreview(file) {
|
|
|
|
// 图片上传处理
|
|
|
|
this.previewImageUrl = file.url;
|
|
|
|
handleImageChange(file) {
|
|
|
|
this.previewDialogVisible = true;
|
|
|
|
this.form.img = file.url;
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
handleSuccess(response, file, fileList) {
|
|
|
|
// 提交表单
|
|
|
|
this.fileList = fileList;
|
|
|
|
submitForm() {
|
|
|
|
this.images.push({ src: URL.createObjectURL(file.raw) });
|
|
|
|
this.$refs.projectForm.validate(valid => {
|
|
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
|
|
if (this.isEditMode) {
|
|
|
|
|
|
|
|
this.handleEditXmxl();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.handleAddXmxl();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeUpload(file) {
|
|
|
|
|
|
|
|
const isJPG = file.type === 'image/jpeg';
|
|
|
|
|
|
|
|
const isPNG = file.type === 'image/png';
|
|
|
|
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
|
|
|
|
|
|
|
// 处理新增请求
|
|
|
|
if (!isJPG && !isPNG) {
|
|
|
|
handleAddXmxl() {
|
|
|
|
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
|
const submitData = {
|
|
|
|
}
|
|
|
|
...this.form,
|
|
|
|
if (!isLt2M) {
|
|
|
|
xmId: this.xmId,
|
|
|
|
this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
|
id: 0,
|
|
|
|
}
|
|
|
|
createTime: "",
|
|
|
|
return (isJPG || isPNG) && isLt2M;
|
|
|
|
createBy: "",
|
|
|
|
|
|
|
|
createId: 0,
|
|
|
|
|
|
|
|
updateTime: "",
|
|
|
|
|
|
|
|
updateBy: "",
|
|
|
|
|
|
|
|
updateId: 0,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
addXmxl(submitData)
|
|
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
|
|
this.$message.success('新增成功');
|
|
|
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
|
|
|
this.fetchProjectList();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message.error(response.msg || '新增失败');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
|
|
this.$message.error('请求失败');
|
|
|
|
|
|
|
|
console.error(error);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.finally(() => {
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
submitUpload() {
|
|
|
|
// 处理编辑请求
|
|
|
|
this.$refs.upload.submit();
|
|
|
|
handleEditXmxl() {
|
|
|
|
this.dialogVisible = false;
|
|
|
|
const submitData = {
|
|
|
|
this.handleAddXmxl();
|
|
|
|
...this.form,
|
|
|
|
|
|
|
|
id: this.currentEditId,
|
|
|
|
|
|
|
|
xmId: this.xmId
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updataXmxl(submitData)
|
|
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
|
|
this.$message.success('编辑成功');
|
|
|
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
|
|
|
this.fetchProjectList();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message.error(response.msg || '编辑失败');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
|
|
this.$message.error('请求失败');
|
|
|
|
|
|
|
|
console.error(error);
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.finally(() => {
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
async handleAddXmxl() {
|
|
|
|
|
|
|
|
// 收集表单数据
|
|
|
|
|
|
|
|
const requestData = {
|
|
|
|
|
|
|
|
bigEvent: this.form.bigEvent,
|
|
|
|
|
|
|
|
content: this.form.content,
|
|
|
|
|
|
|
|
createBy: this.form.createBy,
|
|
|
|
|
|
|
|
createId: this.form.createId,
|
|
|
|
|
|
|
|
createTime: this.form.createTime,
|
|
|
|
|
|
|
|
fj: this.form.fj,
|
|
|
|
|
|
|
|
id: this.form.id,
|
|
|
|
|
|
|
|
img: this.form.img,
|
|
|
|
|
|
|
|
newsEvent: this.form.newsEvent,
|
|
|
|
|
|
|
|
sj: this.form.sj,
|
|
|
|
|
|
|
|
updateBy: this.form.updateBy,
|
|
|
|
|
|
|
|
updateId: this.form.updateId,
|
|
|
|
|
|
|
|
updateTime: this.form.updateTime,
|
|
|
|
|
|
|
|
webUrl: this.form.webUrl,
|
|
|
|
|
|
|
|
xmId: this.form.xmId,
|
|
|
|
|
|
|
|
xmmc: this.form.xmmc,
|
|
|
|
|
|
|
|
year: this.form.year
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 格式化日期显示
|
|
|
|
try {
|
|
|
|
formatDate(date) {
|
|
|
|
const response = await addXmxl(requestData);
|
|
|
|
if (!date) return '';
|
|
|
|
this.$message.success('新增成功');
|
|
|
|
return new Date(date).toLocaleDateString();
|
|
|
|
console.log(response);
|
|
|
|
}
|
|
|
|
this.fetchImages(); // 刷新图片列表
|
|
|
|
},
|
|
|
|
} catch (error) {
|
|
|
|
watch: {
|
|
|
|
this.$message.error('新增失败');
|
|
|
|
xmId(newVal) {
|
|
|
|
console.error(error);
|
|
|
|
if (newVal) {
|
|
|
|
|
|
|
|
this.fetchProjectList();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
@ -518,29 +324,4 @@ export default {
|
|
|
|
font-style: normal;
|
|
|
|
font-style: normal;
|
|
|
|
text-transform: none;
|
|
|
|
text-transform: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.iconguanbi2 {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 1rem;
|
|
|
|
|
|
|
|
right: 1rem;
|
|
|
|
|
|
|
|
width: 2rem;
|
|
|
|
|
|
|
|
height: 2rem;
|
|
|
|
|
|
|
|
background-color: rgba(43, 98, 241, 0.1);
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.iconguanbi2 img {
|
|
|
|
|
|
|
|
width: 1.2rem;
|
|
|
|
|
|
|
|
height: 1.2rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.dianjibox{
|
|
|
|
|
|
|
|
width: 18rem;
|
|
|
|
|
|
|
|
height: 11rem;
|
|
|
|
|
|
|
|
/* background-color: red; */
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
bottom: 0rem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
