Leo_Ding/hai_lin_officel_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
Leo_Ding 2025-06-18 17:02:49 +08:00
commit 0624d687eb
49 changed files with 28378 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/

12
.idea/haiLin_web-New.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/haiLin_web-New.iml" filepath="$PROJECT_DIR$/.idea/haiLin_web-New.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

0
README.md Normal file
View File

12
hailin_web/.gitignore vendored Normal file
View File

@ -0,0 +1,12 @@
# ---> Vue
# gitignore template for Vue.js projects
#
# Recommended template: Node.gitignore
# TODO: where does this rule come from?
docs/_book
# TODO: where does this rule come from?
test/
node_modules

5
hailin_web/.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/

12
hailin_web/.idea/hailin_web.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
hailin_web/.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

8
hailin_web/.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/hailin_web.iml" filepath="$PROJECT_DIR$/.idea/hailin_web.iml" />
</modules>
</component>
</project>

6
hailin_web/.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

24
hailin_web/README.md Normal file
View File

@ -0,0 +1,24 @@
# hai-lin-web
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
hailin_web/babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

17775
hailin_web/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
hailin_web/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
hailin_web/public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

28
hailin_web/src/App.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</script>
<style>
@import "reset.css";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 60px; */
}
</style>

20
hailin_web/src/Interface/jiekou.json Normal file
View File

@ -0,0 +1,20 @@
{
"code": 0,
"message": "success",
"status": 200,
"headers": { },
"config": { },
"request": { },
"banner": [
{
"checked": "false",
"image": "require('@/assets/home/lunbotu-new/lunbotu-01-new.png')",
"name": "轮播一",
"status": "展示中",
"Id": 1
}
]
}

5
hailin_web/src/base.less Normal file
View File

@ -0,0 +1,5 @@
@header-bg-color: #fff;
@border-color: #e0e0e0;
@text-color: #606266;
@link-color: #409eff;

27
hailin_web/src/common/breadcrumb.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="breadcrumb-container">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item, index) in items" :key="index" :to="item.to">
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
default: () => []
}
}
};
</script>
<style scoped>
.breadcrumb-container {
margin-bottom: 20px;
}
</style>

258
hailin_web/src/common/dialog.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<el-dialog :title="dialogTitle" :visible.sync="visible" width="50%" @close="resetForm">
<el-form :model="formData" label-width="80px">
<!-- 标题 -->
<el-form-item label="标题" v-if="showTitle">
<el-input v-model="formData.name" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="标题" v-if="showBigTitle">
<el-input v-model="formData.title" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="顺序" v-if="showOder">
<el-input-number v-model="formData.sequence" placeholder="请输入顺序"></el-input-number>
</el-form-item>
<!-- 副标题 -->
<el-form-item label="副标题" v-if="showSubtitle" required>
<el-input type="textarea" v-model="formData.subtitle" :rows="4"></el-input>
</el-form-item>
<!-- 副标题 -->
<el-form-item label="内容" v-if="showContent" required>
<el-input type="textarea" v-model="formData.content" :rows="4"></el-input>
</el-form-item>
<!-- 副标题 -->
<el-form-item label="摘要" v-if="showSubheading" required>
<el-input type="textarea" v-model="formData.subheading" ></el-input>
</el-form-item>
<!-- 日期 -->
<el-form-item label="日期" v-if="showDate">
<el-input v-model="formData.date" placeholder="MM-DD" style="width: 120px;" />
<span style="margin: 0 10px">-</span>
<el-input v-model="formData.year" placeholder="YYYY" style="width: 120px;" />
</el-form-item>
<!-- 日期 -->
<el-form-item label="日期" v-if="showNewDate">
<el-input v-model="formData.pushAT" placeholder="日期" style="width: 120px;" />
</el-form-item>
<!-- 单图上传 -->
<!-- <el-form-item label="图片" v-if="showImage">-->
<!-- <el-upload-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="(file) => $emit('upload', file, formData)"-->
<!-- >-->
<!-- <img v-if="formData.img" :src="formData.img" class="avatar" />-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- <div class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>-->
<!-- </el-form-item>-->
<el-form-item label="图片" prop="sequence" v-if="showImage">
<el-input v-model="formData.img" :min="1" :max="10"></el-input>
</el-form-item>
<el-form-item label="大图片" prop="sequence" v-if="showSmallImg">
<el-input v-model="formData.smallImg" :min="1" :max="10"></el-input>
</el-form-item>
<el-form-item label="小图片" prop="sequence" v-if="showFullImg">
<el-input v-model="formData.fullImg" :min="1" :max="10"></el-input>
</el-form-item>
<el-form-item label="视频" prop="sequence" v-if="showVideo">
<el-input v-model="formData.videoUrl" :min="1" :max="10"></el-input>
</el-form-item>
<el-form-item label="人物描述" prop="sequence" v-if="showRank">
<el-input v-model="formData.rank" :min="1" :max="10"></el-input>
</el-form-item>
<el-form-item label="研究领域" prop="sequence" v-if="showArea">
<el-input v-model="formData.area" :min="1" :max="10"></el-input>
</el-form-item>
<!-- 多图上传 -->
<el-form-item label="多图上传" v-if="showMultiImage">
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:file-list="formData.multiImages || []"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<div class="el-upload__tip">最多上传6张图片，仅支持JPG/PNG格式，每张不超过2MB</div>
<el-dialog :visible.sync="dialogVisibleImage">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
<!-- 饲料原料 -->
<el-form-item label="饲料原料" v-if="showCategoryData">
<el-input v-model="formData.category" placeholder="请输入饲料原料类别"></el-input>
</el-form-item>
<!-- 适用类型 -->
<el-form-item label="适用类型" v-if="showCategoryData">
<el-input v-model="formData.feedstuff" placeholder="请输入适用类型"></el-input>
</el-form-item>
<!-- 链接 -->
<el-form-item label="链接" v-if="showLink">
<el-input v-model="formData.link" placeholder="请输入链接"></el-input>
</el-form-item>
<!-- 名称 -->
<el-form-item label="名称" v-if="showAlt">
<el-input v-model="formData.alt"></el-input>
</el-form-item>
<!-- 状态 -->
<el-form-item label="状态" v-if="showStatus">
<el-select v-model="formData.status">
<el-option label="展示中" value="enabled"></el-option>
<el-option label="未展示" value="disabled"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
visible: Boolean,
item: Object,
showRank:Boolean,
showArea:Boolean,
showVideo:Boolean,
showSubheading:Boolean,
showSmallImg:Boolean,
showFullImg:Boolean,
showBigTitle:Boolean,
dialogTitle: String,
showContent:Boolean,
showNewDate:Boolean,
showCategoryData:Boolean,
showOder:Boolean,
showTitle: Boolean,
showSubtitle: Boolean,
showDate: Boolean,
showLink: Boolean,
showAlt: Boolean,
showStatus: Boolean,
showImage: Boolean,
showMultiImage: Boolean // 新增 prop
},
computed: {
displayStatus() {
return this.formData.status === 'enabled' ? '展示中' : '未展示';
}
},
data() {
return {
formData: { ...this.item },
dialogImageUrl: '',
dialogVisibleImage: false
};
},
watch: {
item: {
immediate: true,
deep: true,
handler(val) {
this.formData = JSON.parse(JSON.stringify(val || {})); // 深拷贝确保响应性
}
}
},
// watch: {
// item(val) {
// this.formData = { ...val };
// }
// },
methods: {
resetForm() {
this.$emit('update:visible', false);
this.formData = {};
},
cancel() {
this.resetForm();
},
// save() {
// this.$emit('save', this.formData);
// this.resetForm();
// },
// 在 save 方法中，确保正确 emit 更新后的数据
save() {
// 使用 this.$emit 将整个 formData 发送回父组件
this.$emit('save', {...this.formData});
this.resetForm();
},
// 查看图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisibleImage = true;
},
// 删除图片
handleRemove(file, fileList) {
this.formData.multiImages = fileList;
},
// 上传前检查
beforeUpload(file) {
const isValidType = ['image/jpeg', 'image/png'].includes(file.type);
const isValidSize = file.size / 1024 / 1024 <= 2;
if (!isValidType) {
this.$message.error('只能上传 JPG/PNG 格式的图片');
return false;
}
if (!isValidSize) {
this.$message.error('图片大小不能超过 2MB');
return false;
}
// 可选：将文件转为 base64 或者上传到服务器
const reader = new FileReader();
reader.onload = (e) => {
this.formData.multiImages = [
...(this.formData.multiImages || []),
{ name: file.name, url: e.target.result }
];
};
reader.readAsDataURL(file);
return false; // 阻止自动上传
}
}
};
</script>
<style scoped>
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

76
hailin_web/src/common/pagination.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'CustomPagination',
props: {
// 当前页码
currentPageProp: {
type: Number,
default: 1
},
// 每页显示条目个数
pageSizeProp: {
type: Number,
default: 10
},
// 总条目数
total: {
type: Number,
required: true
},
// 每页显示个数选择器的选项设置
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 40];
}
}
},
data() {
return {
currentPage: this.currentPageProp,
pageSize: this.pageSizeProp
};
},
watch: {
currentPageProp(newVal) {
this.currentPage = newVal;
},
pageSizeProp(newVal) {
this.pageSize = newVal;
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.$emit('update:pageSizeProp', val);
this.$emit('change', { currentPage: this.currentPage, pageSize: val });
},
handleCurrentChange(val) {
this.currentPage = val;
this.$emit('update:currentPageProp', val);
this.$emit('change', { currentPage: val, pageSize: this.pageSize });
}
}
};
</script>
<style scoped lang="less">
.pagination-container {
margin-top: 20px;
text-align: center;
}
</style>

235
hailin_web/src/common/table.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<div class="hai-lin-table">
<el-table :data="items" border style="width: 100%" @selection-change="onSelectionChange">
<el-table-column type="selection" width="55" ></el-table-column>
<!-- 饲料原料 -->
<el-table-column prop="feedstuff" label="饲料原料" v-if="showFeedstuff"></el-table-column>
<!-- 类别分类 -->
<el-table-column prop="category" label="适用对象" v-if="showCategory"></el-table-column>
<!-- 名称 -->
<el-table-column prop="productname" label="名称" v-if="showProductname"></el-table-column>
<!-- 原料组成 -->
<el-table-column prop="ingredients" label="原料组成" v-if="showIngredients"></el-table-column>
<!-- 产品图片 -->
<el-table-column label="产品图片" v-if="showProductImg">
<template slot-scope="{ row }">
<el-tag :type="row.productimg ? 'success' : 'info'">
{{ row.productimg ? '已上传' : '未上传' }}
</el-tag>
</template>
</el-table-column>
<!-- 适用对象 -->
<el-table-column prop="productsuitable" label="适用对象" v-if="showProductSuitable"></el-table-column>
<!-- 产品标准 -->
<el-table-column prop="productstandard" label="产品标准" v-if="showProductStandard"></el-table-column>
<!-- 功能特点 -->
<el-table-column prop="productfunctional" label="功能特点" v-if="showProductFunctional"></el-table-column>
<!-- 顺序列 -->
<el-table-column prop="sequence" label="顺序" v-if="showId"></el-table-column>
<!-- 图片列 -->
<el-table-column label="图片" width="150" v-if="showImage">
<template slot-scope="{ row }">
<img :src="row.img" alt="" class="BannerImg" />
</template>
</el-table-column>
<!--姓名 -->
<el-table-column prop="name" label="姓名" v-if="showName"></el-table-column>
<!-- 人物描述列-->
<el-table-column prop="rank" label="人物描述" v-if="showPersonDesc"></el-table-column>
<!-- 研究领域列-->
<el-table-column prop="area" label="研究领域" v-if="showPersonArea"></el-table-column>
<!-- 岗位列 -->
<el-table-column prop="post" label="岗位" v-if="showPost"></el-table-column>
<!-- 岗位城市列 -->
<el-table-column prop="city" label="基地" v-if="showCity"></el-table-column>
<!-- 岗位要求列 -->
<el-table-column prop="require" label="岗位要求" v-if="showRequire"></el-table-column>
<!-- 岗位职责列 -->
<el-table-column prop="duty" label="岗位职责" v-if="showDuty"></el-table-column>
<!-- 薪资列 -->
<el-table-column prop="pay" label="薪资" v-if="showPay"></el-table-column>
<!-- 备注列 -->
<el-table-column prop="remark" label="备注" v-if="showRemark"></el-table-column>
<!-- 小图片列 -->
<el-table-column label="小图" width="150" v-if="showSmallImg">
<template slot-scope="{ row }">
<img :src="row.smallImg" alt="" class="BannerImg" />
</template>
</el-table-column>
<!-- 大图片列 -->
<el-table-column label="大图" width="150" v-if="showBigImg">
<template slot-scope="{ row }">
<img :src="row.fullImg" alt="" class="BannerImg" />
</template>
</el-table-column>
<!-- 标题列 -->
<el-table-column prop="name" label="标题" v-if="showTitle"></el-table-column>
<!-- 标题列 -->
<el-table-column prop="title" label="标题" v-if="showBigTitle"></el-table-column>
<!-- 副标题列 -->
<el-table-column prop="content" label="内容" v-if="showContent"></el-table-column>
<!-- 副标题列 -->
<el-table-column prop="subtitle" label="副标题" v-if="showSubtitle"></el-table-column>
<!-- 摘要列 -->
<el-table-column prop="desc" label="摘要" v-if="showDesc"></el-table-column>
<!-- 摘要列 -->
<el-table-column prop="subheading" label="摘要" v-if="showSubheading"></el-table-column>
<!-- 视频列 -->
<el-table-column prop="vido" label="视频" v-if="showVideo">
<template slot-scope="{ row }">
<video controls width="200" height="150" style="border: 1px solid #ddd;">
<source :src="row.videoUrl" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</template>
</el-table-column>
<!-- 日期列 -->
<el-table-column label="日期" v-if="showDate">
<template slot-scope="{ row }">
{{ row.year }}{{ row.hasOwnProperty('date') ? '-' + row.date : '' }}
</template>
</el-table-column>
<!-- 日期列 -->
<el-table-column label="日期" v-if="showNewDate">
<template slot-scope="{ row }">
{{ row.pushAt }}
</template>
</el-table-column>
<!-- 事件列 -->
<el-table-column prop="event" label="事件" v-if="showEvent"></el-table-column>
<!-- 链接列 -->
<el-table-column label="链接" v-if="showLink">
<template slot-scope="{ row }">
<a :href="row.link" target="_blank" rel="noopener noreferrer" class="link-style">
{{ row.link }}
</a>
</template>
</el-table-column>
<!-- 名称列 -->
<el-table-column prop="alt" label="名称" v-if="showAlt"></el-table-column>
<!-- 状态列 -->
<el-table-column label="状态" v-if="showStatus">
<template slot-scope="{ row }">
<el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
{{ row.status === 'enabled' ? '展示中' : '未展示' }}
</el-tag>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column label="操作" width="150" v-if="showActions">
<template slot-scope="{ row }">
<el-button size="mini" @click.prevent="$emit('edit', row)">编辑</el-button>
<el-button size="mini" type="danger" @click.prevent="$emit('delete', row)">删除</el-button>
<!-- <a href="#" @click.prevent="$emit('edit', row)">编辑</a>
<a href="#" @click.prevent="$emit('delete', row)">删除</a> -->
</template>
</el-table-column>
</el-table>
<!-- 批量删除按钮 -->
<!-- <el-button type="danger" @click="$emit('delete-selected')" style="margin-top: 20px; width: 150px;">
删除被选项
</el-button> -->
</div>
</template>
<script>
export default {
name: 'HaiLinTable',
props: {
items: {
type: Array,
required: true,
},
showSubheading:Boolean,
showBigImg:Boolean,
showNewDate:Boolean,
showContent:Boolean,
showImage: Boolean,
showTitle: Boolean,
showBigTitle: Boolean,
showSubtitle: Boolean,
showDate: Boolean,
showLink: Boolean,
showAlt: Boolean,
showStatus: Boolean,
showId: Boolean,
showActions: Boolean,
showDesc: Boolean,
showVideo: Boolean,
showSmallImg: Boolean,
showPost: Boolean,
showDuty: Boolean,
showPay: Boolean,
showRemark: Boolean,
showRequire: Boolean,
showCity: Boolean,
showName: Boolean,
showPersonDesc: Boolean,
showPersonArea: Boolean,
showEvent: Boolean,
showProductname: Boolean,
showFeedstuff: Boolean,
showIngredients: Boolean,
showProductImg: Boolean,
showProductSuitable: Boolean,
showProductStandard: Boolean,
showProductFunctional: Boolean,
showCategory: Boolean,
},
methods: {
onSelectionChange(val) {
this.$emit('selection-change', val);
}
}
};
</script>
<style scoped>
.BannerImg {
max-width: 100px;
}
.status.active {
color: green;
}
</style>

162
hailin_web/src/layout/components/sidebar/menuItem.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<div class="sidebar">
<el-menu
:default-active="activeMenu"
router
ref="menu"
unique-opened
background-color="#263248"
text-color="#BFC5D0"
active-text-color="#20A0FF"
>
<div class="title">海邻后台管理系统</div>
<!-- 图片管理 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-picture"></i>
<span>图片管理</span>
</template>
<el-menu-item index="/picture/banner">首页轮播图</el-menu-item>
<el-menu-item index="/picture/home">首页海邻</el-menu-item>
<el-menu-item index="/picture/scientific">科研成果</el-menu-item>
<el-menu-item index="/picture/honor">企业荣誉</el-menu-item>
<el-menu-item index="/picture/talent">人才中心</el-menu-item>
<el-menu-item index="/picture/team">团队风采</el-menu-item>
</el-submenu>
<!-- 其他菜单保持不变 -->
<el-submenu index="/news">
<template slot="title">
<i class="el-icon-document"></i>
<span>海邻动态</span>
</template>
<el-menu-item index="/dynamic/company">公司动态</el-menu-item>
<el-menu-item index="/dynamic/media">媒体报道</el-menu-item>
<el-menu-item index="/dynamic/video">视频中心</el-menu-item>
</el-submenu>
<el-menu-item index="/product">
<i class="el-icon-box"></i>
<span>产品中心</span>
</el-menu-item>
<el-menu-item index="/team">
<i class="el-icon-user"></i>
<span>技术团队</span>
</el-menu-item>
<el-menu-item index="/recruitment">
<i class="el-icon-suitcase"></i>
<span>招聘岗位</span>
</el-menu-item>
<el-menu-item index="/history">
<i class="el-icon-date"></i>
<span>海邻大事记</span>
</el-menu-item>
<el-menu-item index="/setting">
<i class="el-icon-setting"></i>
<span>网站管理</span>
</el-menu-item>
<el-menu-item index="/newAdding">
<i class="el-icon-circle-plus-outline"></i>
<span>自定义模块</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
// 根据路由动态判断是否是 banner 页面
isBannerPage: this.$route.path === '/picture/banner'
};
},
computed: {
activeMenu() {
return this.$route.path;
}
},
mounted() {
this.handleOpenSubMenu();
},
watch: {
$route() {
this.handleOpenSubMenu();
}
},
methods: {
handleOpenSubMenu() {
const path = this.$route.path;
// 判断是否是图片管理下的页面
if (path.startsWith('/picture/')) {
this.$refs.menu.open('1'); // 展开 index="1" 的子菜单：图片管理
} else {
// 可选：关闭图片管理菜单
// this.$refs.menu.close('1');
}
// 如果是 /picture/banner 页面，则不需要额外操作，因为 el-menu 会根据 default-active 自动高亮
}
}
};
</script>
<style scoped lang="less">
.sidebar {
height: 100%;
background-color: #263248;
.title {
font-size: 26px;
font-weight: 900;
height: 120px;
line-height: 120px;
text-align: center;
color: #BFC5D0;
}
// 确保菜单项内的图标和文字在同一行并垂直居中
/deep/ .el-submenu__title,
/deep/ .el-menu-item {
display: flex;
align-items: center; // 垂直居中
height: 60px;
line-height: normal; // 取消line-height设置以避免干扰flex布局
font-size: 20px;
color: #FFFFFF;
i {
font-size: 24px;
padding-right: 10px; // 图标与文字之间的间距
width: 30px; // 设置一个固定宽度，确保所有图标左边距一致
display: inline-flex;
justify-content: center; // 水平居中
color: #FFFFFF;
}
}
// 添加以下样式使二级菜单项向内缩进
/deep/ .el-menu--inline .el-menu-item {
padding-left: 65px !important; // 根据需要调整padding值
}
// 设置选中状态的颜色
/deep/ .el-menu-item.is-active,
/deep/ .el-submenu__title.is-active {
color: #20A0FF;
}
// 设置选中状态的图标颜色
/deep/ .el-menu-item.is-active i,
/deep/ .el-submenu__title.is-active i {
color: #20A0FF;
}
}
</style>

108
hailin_web/src/layout/index.vue Normal file
View File

@ -0,0 +1,108 @@
<!-- src/layout/index.vue -->
<template>
<el-container style="height: 100vh;">
<!-- 仅包含一个 Sidebar 组件 -->
<el-aside width="300px">
<Sidebar />
</el-aside>
<el-container>
<el-header>
<!-- <div class="header"> -->
<div class="header-content">
<!-- <button class="expand-btn">
<i class="arrow-icon">&gt;</i> 展开
</button> -->
<div class="welcome-info">
上午好，用户名
</div>
<div class="user-profile">
<el-avatar shape="circle" :size="'small'" :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"></el-avatar>
<i class="el-icon-bell"></i>
</div>
</div>
<!-- </div> -->
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import Sidebar from './components/sidebar/menuItem.vue'
export default {
components: { Sidebar },
computed: {
permission_routes() {
return this.$router.options.routes // 或者从 Vuex store 获取动态路由
}
}
}
</script>
<style lang="less" scoped>
@import '../base.less';
.el-header {
background-color: @header-bg-color;
border-bottom: 1px solid @border-color;
// padding: 10px 20px;
display: flex;
align-items: center;
line-height: 60px;
width: 100%;
.header-content {
display: flex;
justify-content: space-between;
width: 100%;
.expand-btn {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 16px;
color: @link-color;
display: flex;
align-items: center;
.arrow-icon {
margin-right: 5px;
}
}
.welcome-info {
color: @text-color;
margin-left: auto;
margin-right: 20px;
}
.user-profile {
display: flex;
align-items: center;
// .avatar {
// width: 30px;
// height: 30px;
// border-radius: 50%;
// margin-right: 10px;
// }
i {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
border: 1px solid @link-color;
text-align: center;
font-size: 24px;
color: @link-color;
margin-left: 15px;
}
}
}
}
</style>

14
hailin_web/src/main.js Normal file
View File

@ -0,0 +1,14 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')

48
hailin_web/src/reset.css Normal file
View File

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

159
hailin_web/src/router.js Normal file
View File

@ -0,0 +1,159 @@
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
import Login from '@/views/login.vue'
Vue.use(Router)
// // 假设你有一个方法可以判断用户是否已登录
// function isLogin() {
// // 这里应该是一个检查用户登录状态的逻辑，比如检查本地存储中的token
// return !!localStorage.getItem('token');
// }
const router = new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'Login',
component: Login,
meta: { requiresAuth: false } // 登录页面不需要认证
},
{
path: '/',
redirect: '/login', // 默认重定向到登录页
meta: { requiresAuth: true }, // 根路径需要认证
},
{
path: '/home',
component: Layout,
meta: { requiresAuth: true }, // 需要认证才能访问
children: [
{
path: '/picture/banner',
name: 'Banner',
component: () => import('@/views/picture/index.vue'),
//meta: { title: '首页轮播图', requiresAuth: true }
meta: { title: '首页轮播图', }
},
{
path: '/picture/home',
name: 'Home',
component: () => import('@/views/picture/home.vue'),
meta: { title: '首页海邻', }
},
{
path: '/picture/scientific',
name: 'Scientific',
component: () => import('@/views/picture/scientific.vue'),
meta: { title: '研究成果', }
},
{
path: '/picture/honor',
name: 'Honor',
component: () => import('@/views/picture/honor.vue'),
meta: { title: '企业荣誉', }
},
{
path: '/picture/talent',
name: 'Talent',
component: () => import('@/views/picture/talent.vue'),
meta: { title: '人才中心', }
},
{
path: '/picture/team',
name: 'team',
component: () => import('@/views/picture/team.vue'),
meta: { title: '人才中心', }
},
]
},
{
path: '/dynamic',
component: Layout,
meta: { requiresAuth: true }, // 需要认证才能访问
children: [
{
path: '/dynamic/media',
name: 'Media',
component: () => import('@/views/dynamic/media.vue'),
//meta: { title: '首页轮播图', requiresAuth: true }
meta: { title: '媒体报道', }
},
{
path: '/dynamic/company',
name: 'Company',
component: () => import('@/views/dynamic/company.vue'),
meta: { title: '公司动态', }
},
{
path: '/dynamic/video',
name: 'Video',
component: () => import('@/views/dynamic/video.vue'),
meta: { title: '视频中心', }
},
{
path: '/team',
meta: { requiresAuth: true },
component: () => import('@/views/team.vue'),
},
{
path: '/recruitment',
meta: { requiresAuth: true },
component: () => import('@/views/recruitment.vue'),
},
{
path: '/history',
meta: { requiresAuth: true },
component: () => import('@/views/history.vue'),
},
{
path: '/product',
meta: { requiresAuth: true },
component: () => import('@/views/product.vue'),
},
{
path: '/setting',
meta: { requiresAuth: true },
component: () => import('@/views/setting.vue'),
},
{
path: '/newAdding',
meta: { requiresAuth: true },
component: () => import('@/views/newAdding.vue'),
},
]
},
// 其他模块的路由配置...
]
})
// 添加全局前置守卫
// router.beforeEach((to, from, next) => {
// const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
// if (requiresAuth && !isLogin()) {
// // 如果目标路由需要认证并且用户未登录，则重定向到登录页
// next({
// path: '/login',
// query: { redirect: to.fullPath } // 将用户尝试访问的路径作为查询参数传递
// });
// } else {
// next(); // 否则继续导航
// }
// });
export default router;

67
hailin_web/src/utils/api.js Normal file
View File

@ -0,0 +1,67 @@
// src/api/user.js
import {getRequest, putRequest,postRequest,deleteRequest,} from "@/utils/request";
// 获取banner列表
export const banner = (data) => {
return getRequest("/banners", data);
};
// add banner列表
export const bannerCreate = (data) => {
return postRequest("/banners", data);
};
// edit banner列表
export const bannerEdit = (id, data) => {
return putRequest(`/banners/${id}`, data); // RESTful 风格，id在URL，数据在body
};
// del banner列表
export const bannerDel = (id) => {
return deleteRequest(`/banners/${id}`);
};
// 获取Article列表
export const Article = (data) => {
return getRequest("/articles", data);
};
// add Article列表
export const ArticleCreate = (data) => {
return postRequest("/articles", data);
};
// edit Article列表
export const ArticleEdit = (id, data) => {
return putRequest(`/articles/${id}`, data); // RESTful 风格，id在URL，数据在body
};
// del Article列表
export const ArticleDel = (id) => {
return deleteRequest(`/articles/${id}`);
};
// 获取Video列表
export const Video = (data) => {
return getRequest("/videos", data);
};
// add Video列表
export const VideoCreate = (data) => {
return postRequest("/videos", data);
};
// edit Video列表
export const VideoEdit = (id, data) => {
return putRequest(`/videos/${id}`, data); // RESTful 风格，id在URL，数据在body
};
// del Video列表
export const VideoDel = (id) => {
return deleteRequest(`/videos/${id}`);
};
// 获取Team列表
export const Team = (data) => {
return getRequest("/teams", data);
};
// add Team列表
export const TeamCreate = (data) => {
return postRequest("/teams", data);
};
// edit Team列表
export const TeamEdit = (id, data) => {
return putRequest(`/teams/${id}`, data); // RESTful 风格，id在URL，数据在body
};
// del Team列表
export const TeamDel = (id) => {
return deleteRequest(`/teams/${id}`);
};

109
hailin_web/src/utils/request.js Normal file
View File

@ -0,0 +1,109 @@
// src/utils/request.js
import axios from "axios";
import { Message } from "element-ui";
// 创建 Axios 实例
const service = axios.create({
baseURL: "/api/v1", // 基础域名（不区分环境变量）
timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
(config) => {
console.log(`[HTTP ${config.method.toUpperCase()}] 请求地址: ${config.url}`);
// 在发送请求之前做些什么
// 可以在这里添加 token 或其他公共参数
// config.headers['Authorization'] = 'Bearer ' + getToken();
return config;
},
(error) => {
// 处理请求错误
console.error("Request Error:", error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
const res = response.data;
//console.log("==res==>", res);
if (res.success !== true) {
Message.error(res.message || "请求失败");
return Promise.reject(new Error(res.message || "Error"));
}
return res; // 注意：这里返回的是 res，不是 response
},
(error) => {
console.error("拦截器捕获的错误：", error);
Message.error(
error.response?.data?.error ||
error.message ||
"网络异常，请稍后重试"
);
return Promise.reject(error);
}
);
// 封装 GET 请求
export function getRequest(url, params) {
return service({
url,
method: "get",
params,
});
}
// 封装 POST 请求
export function postRequest(url, data) {
return service({
url,
method: "post",
data,
});
}
// 封装PUT请求
export function putRequest(url, data) {
return service({
url,
method: "put",
data,
});
}
// 封装 DELETE 请求
export function deleteRequest(url, params) {
return service({
url,
method: "delete",
params,
});
}
// 封装 DELETE 请求（带请求体）
export function deleteRequestWithData(url, data) {
return service({
url,
method: "delete",
data,
});
}
// 接口过慢请求
export function slowRequest(url, data) {
return service({
url,
method: "post",
data,
timeout: 40000, // 设置为40秒或其他合适的时间
});
}
export default service;

638
hailin_web/src/views/contact.vue Normal file
View File

@ -0,0 +1,638 @@
<template>
<div class="teams">
<div class="itemTop">
<h3>技术团队</h3>
<el-button type="primary" class="buttonTop" @click="createNewTeamMember">新建技术团队</el-button>
</div>
<table>
<thead>
<tr>
<th><input type="checkbox" :checked="selectTeamMembersAll" @change="selectTeamMembersAll = !selectTeamMembersAll"></th>
<th>人物图片</th>
<th>人物名</th>
<th>人物描述</th>
<th>研究领域</th>
<th>状态</th>
<th>顺序</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in teamMembers" :key="index">
<td><input type="checkbox" v-model="item.checked"></td>
<td class="image" > <img :src="item.photo" alt="图片" style="max-width: 100px; max-height: 100px;" /></td>
<td>{{ item.name }}</td>
<td>{{ item.titles}}</td>
<td>{{item.field}}</td>
<td :class="{'status': item.status === '展示中', 'not-status': item.status === '未展示'}">{{ item.status }}</td>
<td>{{ item.id}}</td>
<td class="actions">
<a href="#" @click.prevent="editTeamMembersItem(index)">编辑</a>
<a href="#" @click.prevent="deleteTeamMembersItem(index)">删除</a>
</td>
</tr>
</tbody>
</table>
<el-button
type="danger"
@click="deleteSelectedTeamMembers"
style="margin-bottom: 10px; margin-top: 20px;width: 150px"
>
删除被选项
</el-button>
<el-dialog
title="编辑团队成员"
:visible.sync="teamMembersDialogVisible"
width="60%"
:before-close="cancelTeamMembersEdit"
>
<el-form :model="editTeamMembersForm" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="editTeamMembersForm.name"></el-input>
</el-form-item>
<el-form-item label="头衔">
<el-input type="textarea" v-model="editTeamMembersForm.titles" :rows="4"></el-input>
</el-form-item>
<el-form-item label="研究领域">
<el-input type="textarea" v-model="editTeamMembersForm.field" :rows="4"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="editTeamMembersForm.status" placeholder="请选择状态">
<el-option label="展示中" value="展示中"></el-option>
<el-option label="未展示" value="未展示"></el-option>
</el-select>
</el-form-item>
<el-form-item label="顺序">
<el-input-number v-model="editTeamMembersForm.id" :min="1" :max="100"></el-input-number>
</el-form-item>
<el-form-item label="照片">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUploadTeamMember">
<img v-if="editTeamMembersForm.photo" :src="editTeamMembersForm.photo" class="team-member-preview">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelTeamMembersEdit">取 消</el-button>
<el-button type="primary" @click="saveTeamMembersEdit">确 定</el-button>
</span>
</el-dialog>
<!-- 新建团队成员弹窗 -->
<el-dialog
title="新建团队成员"
:visible.sync="createTeamMemberDialogVisible"
width="60%"
:before-close="cancelCreateTeamMember"
>
<el-form :model="createTeamMemberForm" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="createTeamMemberForm.name"></el-input>
</el-form-item>
<el-form-item label="头衔">
<el-input type="textarea" v-model="createTeamMemberForm.titles" :rows="4"></el-input>
</el-form-item>
<el-form-item label="研究领域">
<el-input type="textarea" v-model="createTeamMemberForm.field" :rows="4"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="createTeamMemberForm.status" placeholder="请选择状态">
<el-option label="展示中" value="展示中"></el-option>
<el-option label="未展示" value="未展示"></el-option>
</el-select>
</el-form-item>
<el-form-item label="顺序">
<el-input-number v-model="createTeamMemberForm.id" :min="1" :max="100"></el-input-number>
</el-form-item>
<el-form-item label="照片">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUploadCreateTeamMember">
<img v-if="createTeamMemberForm.photo" :src="createTeamMemberForm.photo" class="team-member-preview">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelCreateTeamMember">取 消</el-button>
<el-button type="primary" @click="saveCreateTeamMember">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'teams',
data(){
return{
currentEditItem: null,
dialogVisible: false,
createTeamMemberDialogVisible: false, // 新建弹窗显示状态
teamMembers: [
{
id: 1,
name: '吴信',
photo: require('@/assets/Research/吴信.png'),
titles: '博士、博士生导师 &nbsp;&nbsp;&nbsp; 国家合成生物技术创新中心研究员 &nbsp;&nbsp;&nbsp; 中国科学院天津工业生物技术研究所 <br> 营养资源合成生物学研究组PI &nbsp;&nbsp;&nbsp; 国家创新人才推进计划中青年科技创新 &nbsp;&nbsp;&nbsp; 领军人才',
field: '探索农业废弃物综合利用、新型蛋白开发、生物基营养资源在动物中的生理功能关键技术问题。'
,status: '展示中', checked: false,
},
{
id: 2,
name: '刘大程',
photo: require('@/assets/Research/刘大程.png'),
titles: '博士、博士生导师 &nbsp;&nbsp;&nbsp; 内蒙古农业大学教授 学科负责人 &nbsp;&nbsp;&nbsp; 农业部动物疾病临床诊疗技术重点实验室主任 <br>' ,
field: '兽医微生物与免疫学、新型饲用蛋白的研发与应用、瘤胃微生态及瘤胃功能的调控，已获得具有自主知识产权的酵母菌12株。先后主持国家重点研发项目、国家自然基金项目和省部级科研项目10余项。'
,status: '展示中', checked: false,
},
{
id: 3,
name: '张宏福',
photo: require('@/assets/Research/张宏福.png'),
titles: '博士、博士生导师 &nbsp;&nbsp;&nbsp; 中国农业科学院北京畜牧兽医研究所二级研究员 <br> 畜禽营养与饲养全国重点实验室常务副主任 &nbsp;&nbsp;&nbsp; 农业农村部动物营养与饲料学(综合性)重点实验室主任 <br> 中国农业科学院家畜营养与调控创新团队资深首席科学家 &nbsp;&nbsp;&nbsp;国务院政府津贴获得者 <br> 国家有突出贡献中青年专家 &nbsp;&nbsp;&nbsp; 国家百千万计划人才 &nbsp;&nbsp;&nbsp;全国农业科研杰出人才 &nbsp;&nbsp;&nbsp;农科英才领军人才',
field: '长期从事动物营养与健康环境科学研究与应用，是单胃动物健康营养与饲料营养价值评定领域学科带头人，倡导营养—环境维护动物自身免疫健康，构建"少用药、慎用苗"的健康养殖技术体系。'
,status: '展示中', checked: false,
},
{
id: 4,
name: '高乐',
photo: require('@/assets/Research/高乐.png'),
titles: '微生物学博士 &nbsp;&nbsp;&nbsp; 中国科学院天津工业生物技术研究所 &nbsp;&nbsp;&nbsp; 副研究员<br>' ,
field: '针对农作物废弃物结构特性，创建饲用茵株固态发酵的智能化控制系统，开发利用玉米副产物生物合成新型饲用蛋白的技术路线。'
,status: '展示中', checked: false,
},
{
id: 5,
name: '郭俊清',
photo: require('@/assets/Research/郭俊清.png'),
titles: '高级畜牧师 &nbsp;&nbsp;&nbsp; 动物营养与饲料科学博士 &nbsp;&nbsp;&nbsp; 新型饲用蛋白技术创新中心主任<br>',
field: '反刍动物营养及生物饲料的研究与应用;新型饲用蛋白研发与产业化应用研究;主持及参与自治区战略性新兴产业发展项目、农业科技成果转化资金项目、科技部星火计划等重点项目。'
,status: '展示中', checked: false,
},
{
id: 6,
name: '陈亮',
photo: require('@/assets/Research/陈亮.png'),
titles: '博士、博士生导师 &nbsp;&nbsp;&nbsp; 中国农业科学院北京畜牧兽医研究所研究员 &nbsp;&nbsp;&nbsp; 农科英才领军人才、杰出青年英才 <br> 国家高层次人才特殊支持计划青年拔尖人才 &nbsp;&nbsp;&nbsp; 中国农业科学院家畜营养与调控创新团队首席科学家 &nbsp;&nbsp;&nbsp; <br> 畜禽营养与饲养全国重点实验室办公室主任',
field: '猪禽碳水化合物营养与饲料高效合成利用研究。'
,status: '展示中', checked: false,
},
{
id: 7,
name: '郝月',
photo: require('@/assets/Research/郝月.png'),
titles: '博士、硕士生导师 &nbsp;&nbsp;&nbsp; 中国农业科学院北京畜牧兽医研究所副研究员 <br>畜禽营养与饲养全国重点实验室科研骨干',
field: '蛋白质饲料开发与猪的健康养殖。'
,status: '展示中', checked: false,
},
{
id: 8,
name: '钟儒清',
photo: require('@/assets/Research/钟儒清.png'),
titles: '博士、硕士生导师 &nbsp;&nbsp;&nbsp; 中国农业科学院北京畜牧兽医研究所副研究员 <br> 中国农业科学院青年创新人才 &nbsp;&nbsp;&nbsp; 畜禽营养与饲养全国重点实验室科研骨干',
field: '主要从事猪禽饲料养分效价精准评估与高效利用、仔猪营养与免疫健康领域研究工作。'
,status: '展示中', checked: false,
},
],
teamMembersDialogVisible: false,
currentEditTeamMember: null,
editTeamMembersForm: {
name: '',
photo: null,
titles: '',
field: '',
status: '',
id: null
},
createTeamMemberForm: { // 新建表单数据
name: '',
photo: null,
titles: '',
field: '',
status: '展示中',
id: null,
checked: false
},
}
},
methods: {
//del选中teamMembers
deleteSelectedTeamMembers() {
this.teamMembers = this.teamMembers.filter(item => !item.checked);
this.selectTeamMembersAll = false; // 取消全选状态
},
// 编辑团队成员
editTeamMembersItem(index) {
this.currentEditTeamMember = this.teamMembers[index];
this.editTeamMembersForm = {
name: this.teamMembers[index].name,
photo: this.teamMembers[index].photo,
titles: this.teamMembers[index].titles,
field: this.teamMembers[index].field,
status: this.teamMembers[index].status,
id: this.teamMembers[index].id
};
this.teamMembersDialogVisible = true;
},
// 删除团队成员
deleteTeamMembersItem(index) {
this.$confirm('确认删除该团队成员吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.teamMembers.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 保存团队成员编辑
saveTeamMembersEdit() {
if (!this.editTeamMembersForm.name || !this.editTeamMembersForm.titles || !this.editTeamMembersForm.field) {
this.$message.error('请填写必填项');
return;
}
// 更新团队成员数据
const index = this.teamMembers.findIndex(item => item.id === this.currentEditTeamMember.id);
if (index !== -1) {
Object.assign(this.teamMembers[index], {
name: this.editTeamMembersForm.name,
titles: this.editTeamMembersForm.titles,
field: this.editTeamMembersForm.field,
status: this.editTeamMembersForm.status,
id: this.editTeamMembersForm.id,
photo: this.editTeamMembersForm.photo
});
}
this.teamMembersDialogVisible = false;
this.$message.success('保存成功');
},
// 取消团队成员编辑
cancelTeamMembersEdit() {
this.teamMembersDialogVisible = false;
this.currentEditTeamMember = null;
this.editTeamMembersForm = {
name: '',
photo: null,
titles: '',
field: '',
status: '',
id: null
};
},
// 处理团队成员图片上传
beforeAvatarUploadTeamMember(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
if (isJPG && isLt2M) {
// 使用FileReader来预览和保存图片
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
// 更新表单中的图片
this.editTeamMembersForm.photo = e.target.result;
this.$message({
type: 'success',
message: '图片上传成功!'
});
};
}
return false;
},
// 打开新建弹窗
createNewTeamMember() {
this.createTeamMemberDialogVisible = true;
this.createTeamMemberForm = {
name: '',
photo: null,
titles: '',
field: '',
status: '展示中',
id: this.teamMembers.length + 1,
checked: false
};
},
// 取消新建
cancelCreateTeamMember() {
this.createTeamMemberDialogVisible = false;
this.createTeamMemberForm = {
name: '',
photo: null,
titles: '',
field: '',
status: '展示中',
id: null,
checked: false
};
},
// 保存新建
saveCreateTeamMember() {
if (!this.createTeamMemberForm.name || !this.createTeamMemberForm.titles || !this.createTeamMemberForm.field) {
this.$message.error('请填写必填项');
return;
}
// 添加新的团队成员数据
this.teamMembers.push({
...this.createTeamMemberForm
});
this.createTeamMemberDialogVisible = false;
this.$message({
type: 'success',
message: '新建成功!'
});
},
// 处理新建团队成员图片上传
beforeAvatarUploadCreateTeamMember(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
if (isJPG && isLt2M) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.createTeamMemberForm.photo = e.target.result;
this.$message({
type: 'success',
message: '图片上传成功!'
});
};
}
return false;
},
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
},
computed: {
// 计算属性判断是否"全部被选中"
selectTeamMembersAll: {
get() {
return this.teamMembers.length > 0 && this.teamMembers.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.teamMembers.forEach(item => {
item.checked = value;
});
}
},
}
}
</script>
<style scoped>
.teams{
display: flex;
flex-direction: column;
}
.team-member-preview {
width: 178px;
height: 178px;
display: block;
object-fit: cover;
}
.itemTop{
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
margin-top: 0;
margin-left: 20px;
margin-bottom: 20px;
}
.el-tabs--left .el-tabs__item.is-left {
text-align: right;
margin-bottom: 20px;
}
.buttonTop{
margin-left: 20px;
}
.el-tabs__item{
padding:0 30px;
font-size: 18px;
height: auto !important;
min-height: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
color: rgba(166, 166, 166, 1);
}
.el-tabs__item.is-active{
color:rgba(20,113,167,1);
}
.el-tabs__active-bar{
background-color: transparent ;
}
.el-button--primary{
background-color: rgba(20,113,167,1);
border-color: rgba(20,113,167,1);
}
.el-button--primary:hover{
background-color: rgba(20,113,167,1);
border-color: rgba(20,113,167,1);
}
.el-button--primary:focus{
background-color: rgba(20,113,167,1);
border-color: rgba(20,113,167,1);
}
.el-tabs__nav {
width: 200px;
}
.el-tabs--left .el-tabs__nav-wrap.is-left::after{
height: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
white-space: nowrap;
}
.status {
color: green;
}
.not-status {
color: gray;
}
.actions a {
margin: 0 5px;
color: blue;
text-decoration: none;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.video-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.video-uploader .el-upload:hover {
border-color: #409EFF;
}
.jobs-table th,
.jobs-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
word-wrap: break-word; /* 允许长文本换行 */
}
/* 设置各列的宽度 */
.jobs-table th:nth-child(1),
.jobs-table td:nth-child(1) {
width: 5%; /* 复选框列 */
}
.jobs-table th:nth-child(2),
.jobs-table td:nth-child(2) {
width: 15%; /* 岗位列 */
}
.jobs-table th:nth-child(3),
.jobs-table td:nth-child(3) {
width: 20%; /* 岗位要求列 */
}
.jobs-table th:nth-child(4),
.jobs-table td:nth-child(4) {
width: 20%; /* 岗位职责列 */
}
.jobs-table th:nth-child(5),
.jobs-table td:nth-child(5) {
width: 10%; /* 薪资列 */
}
.jobs-table th:nth-child(6),
.jobs-table td:nth-child(6) {
width: 10%; /* 备注列 */
}
.jobs-table th:nth-child(7),
.jobs-table td:nth-child(7) {
width: 5%; /* 顺序列 */
}
.jobs-table th:nth-child(8),
.jobs-table td:nth-child(8) {
width: 15%; /* 操作列 */
}
.jobLocationsNameTopRight img {
cursor: pointer;
max-width: 100px;
max-height: 100px;
transition: opacity 0.3s;
}
.event-item {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #EBEEF5;
border-radius: 4px;
}
.event-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.event-header .el-button {
margin-left: 10px;
}
.event-details {
margin-left: 20px;
}
.detail-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.detail-item .el-button {
margin-left: 10px;
}
.detail-item .el-input {
flex: 1;
}
</style>

777
hailin_web/src/views/dynamic/company.vue Normal file
View File

@ -0,0 +1,777 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="公司动态" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-big-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
:show-content="true"
:show-link="true"
:show-new-date="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-big-title="true"
:show-status="true"
:show-oder="true"
:show-new-date="true"
:show-content="true"
:show-link="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { Article, ArticleCreate, ArticleEdit, ArticleDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await Article({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.typer === "home" || item.type === "home" );
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
title: '',
img: '',
sequence: this.haiLinImgList.length + 1,
link:'',
content:'',
pushAT:'',
typer: "home",
type: "home",
status: 'enabled',
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id:item.id,
title: item.title,
img: item.img,
sequence: item.sequence,
link: item.link,
content: item.content,
pushAT: item.pushAT,
typer: "home",
type: "home",
status: item.status,
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await ArticleEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await ArticleCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await ArticleDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
<!--<template>-->
<!-- <div class="company">-->
<!-- <Breadcrumb :items="breadcrumbItems" style="display: none;"/>-->
<!-- <el-tabs v-model="activeTab" type="card" >-->
<!-- <el-tab-pane label="公司动态" name="haiLinNews" >-->
<!-- <div class="itemTop">-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="createNewNews">新增动态</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedNewsList">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <HaiLinTable-->
<!-- :items="newsList"-->
<!-- :show-image="true"-->
<!-- :show-title="true"-->
<!-- :show-status="true"-->
<!-- :show-date="true"-->
<!-- :show-link="true"-->
<!-- :show-id="true"-->
<!-- :show-actions="true"-->
<!-- @selection-change="handleSelectionChange"-->
<!-- @edit="handleEdit"-->
<!-- @delete="handleDelete"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination-->
<!-- :total="newsList.length"-->
<!-- :page-size="pageSize"-->
<!-- :current-page.sync="currentPage"-->
<!-- @change="handlePageChange" />-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- <el-dialog-->
<!-- title="编辑动态新闻"-->
<!-- :visible.sync="newsDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelNewsEdit"-->
<!-- >-->
<!-- <el-form :model="editNewsForm" label-width="80px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="editNewsForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="分类">-->
<!-- <el-input v-model="editNewsForm.type"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="摘要">-->
<!-- <el-input type="textarea" v-model="editNewsForm.desc"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="日期">-->
<!-- <el-input v-model="editNewsForm.date" placeholder="MM-DD"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="年份">-->
<!-- <el-input v-model="editNewsForm.year" placeholder="YYYY"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editNewsForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="链接">-->
<!-- <el-input v-model="editNewsForm.link"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editNewsForm.id" :min="1" :max="10"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadNews">-->
<!-- <img v-if="editNewsForm.img" :src="editNewsForm.img" class="avatar">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelNewsEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveNewsEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建公司动态弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建公司动态"-->
<!-- :visible.sync="createNewsDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelCreateNews"-->
<!-- >-->
<!-- <el-form :model="createNewsForm" label-width="80px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="createNewsForm.mainTitle"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="分类">-->
<!-- <el-input v-model="createNewsForm.type"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="摘要">-->
<!-- <el-input type="textarea" v-model="createNewsForm.desc"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="日期">-->
<!-- <el-input v-model="createNewsForm.date" placeholder="MM-DD"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="年份">-->
<!-- <el-input v-model="createNewsForm.year" placeholder="YYYY"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createNewsForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="链接">-->
<!-- <el-input v-model="createNewsForm.link"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createNewsForm.id" :min="1" :max="10"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreate">-->
<!-- <img v-if="createNewsForm.img" :src="createNewsForm.img" class="avatar">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateNews">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateNews">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import Breadcrumb from '@/common/breadcrumb.vue';-->
<!--import Pagination from '@/common/pagination.vue';-->
<!--import HaiLinTable from '@/common/table.vue';-->
<!--export default {-->
<!-- name: 'company',-->
<!-- components: { Breadcrumb, Pagination,HaiLinTable },-->
<!-- data(){-->
<!-- return{-->
<!-- activeTab: 'haiLinNews', // 默认激活的 tab-->
<!-- breadcrumbItems: [-->
<!-- { title: '海邻动态', to: '/' },-->
<!-- { title: '公司动态', to: '/home' }-->
<!-- ],-->
<!-- // 分页组件-->
<!-- currentPage: 1,-->
<!-- pageSize: 5,-->
<!-- currentEditItem: null,-->
<!-- dialogVisible: false,-->
<!-- createNewsDialogVisible: false, // 新建弹窗显示状态-->
<!-- newsList: [-->
<!-- {-->
<!-- id: 1,-->
<!-- date: '04-08',-->
<!-- year: '2024',-->
<!-- title: '海邻科技总经理<br>王仲仲入选"诚信之星"名单',-->
<!-- desc: '"诚信之星"是由科尔沁区委宣传部、区文明办、区发改委联合开展的诚信评选活动。',-->
<!-- img: require('@/assets/DynamicData/SVG/资源 1.png'),-->
<!-- type: 'company',-->
<!-- link: 'https://mp.weixin.qq.com/s/VV-Cv5_hpVv7nxl_qxpnwA',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- {-->
<!-- id: 2,-->
<!-- date: '04-13',-->
<!-- year: '2025',-->
<!-- title: '【颐和论坛】参会攻略大放送',-->
<!-- desc: '2025颐和论坛将于4月15-17日在青岛鑫江温德姆酒店盛大举办，欢迎行业同仁前来参会交流。',-->
<!-- img: require('@/assets/DynamicData/通辽市科尔沁区：完善三大产业基地升级，带动龙头产业集群发展.jpg'),-->
<!-- type: 'company',-->
<!-- link: 'https://mp.weixin.qq.com/s/w5UJy3oJG9Ka02g_UnVcOw',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- {-->
<!-- id: 3,-->
<!-- date: '03-27',-->
<!-- year: '2025',-->
<!-- title: '【海邻生物】助力2025中国氨基酸与饲料原料应用研讨会盛大开幕',-->
<!-- desc: '动态加速业态重构，饲用氨基酸新视界——2025中国氨基酸与饲料原料应用研讨会盛大开幕。',-->
<!-- img: require('@/assets/DynamicData/助力第三届饲料资源开发利用技术大会顺利召开.jpg'),-->
<!-- type: 'company',-->
<!-- link: 'https://live.photoplus.cn/live/pc/36005100/#/live',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- {-->
<!-- id: 4,-->
<!-- date: "04-08",-->
<!-- year: "2024",-->
<!-- title: "【金台资讯】通辽市科尔沁区：完善三大产业基地升级 带动龙头产业集群发展",-->
<!-- desc: '科尔沁区始终牢把握推进新型工业化进程这一主线，以三大产业基地为依托，打造新兴工业化产业集群。',-->
<!-- img: require('@/assets/DynamicData/开足马力忙生产.jpg'),-->
<!-- type: 'company',-->
<!-- link: 'https://mp.weixin.qq.com/s/o_JrPRUL3x-UULYCkTvPEQ',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- ],-->
<!-- newsDialogVisible: false,-->
<!-- currentEditNews: null,-->
<!-- editNewsForm: {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: '',-->
<!-- status: '',-->
<!-- link: '',-->
<!-- img: '',-->
<!-- type: 'company',-->
<!-- },-->
<!-- createNewsForm: { // 新建表单数据-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- img: '',-->
<!-- id: null,-->
<!-- type: 'company',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- handleSelectionChange(val) {-->
<!-- this.newsListImgSelection = val;-->
<!-- },-->
<!-- // 处理编辑按钮点击-->
<!-- handleEdit(item) {-->
<!-- this.editNewsForm = { ...item }; // 拷贝当前项数据到表单-->
<!-- this.newsDialogVisible = true;-->
<!-- },-->
<!-- // 处理删除按钮点击-->
<!-- handleDelete(item) {-->
<!-- this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.newsList.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.newsList.splice(index, 1);-->
<!-- this.$message.success('删除成功');-->
<!-- }-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 分页变化时触发-->
<!-- handlePageChange(page) {-->
<!-- this.currentPage = page;-->
<!-- },-->
<!-- //del选中NewList-->
<!-- deleteSelectedNewsList() {-->
<!-- // this.newsList = this.newsList.filter(item => !item.checked);-->
<!-- // this.selectNewsListAll = false; // 取消全选状态-->
<!-- if (this.newsListImgSelection.length === 0) {-->
<!-- this.$message.warning('请先选择要删除的轮播图');-->
<!-- return;-->
<!-- }-->
<!-- this.$confirm('确认删除选中的轮播图吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const selectedIds = this.newsListImgSelection.map(item => item.id);-->
<!-- this.newsList = this.newsList.filter(item => !selectedIds.includes(item.id));-->
<!-- this.$message.success('删除成功');-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 编辑动态新闻-->
<!-- editDynamicItem(index) {-->
<!-- this.currentEditNews = this.newsList[index];-->
<!-- this.editNewsForm = {-->
<!-- mainTitle: this.newsList[index].mainTitle,-->
<!-- desc: this.newsList[index].desc,-->
<!-- date: this.newsList[index].date,-->
<!-- year: this.newsList[index].year,-->
<!-- status: this.newsList[index].status,-->
<!-- link: this.newsList[index].link,-->
<!-- img: this.newsList[index].imageUrl,-->
<!-- id: this.newsList[index].id,-->
<!-- };-->
<!-- this.newsDialogVisible = true;-->
<!-- },-->
<!-- // 删除动态新闻-->
<!-- deleteDynamicItem(index) {-->
<!-- this.$confirm('确认删除该动态新闻吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- this.newsList.splice(index, 1);-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '删除成功!'-->
<!-- });-->
<!-- }).catch(() => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: '已取消删除'-->
<!-- });-->
<!-- });-->
<!-- },-->
<!-- // 保存动态新闻编辑-->
<!-- saveNewsEdit() {-->
<!-- if (!this.editNewsForm.type || !this.editNewsForm.id) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- const index = this.newsList.findIndex(h => h.id === this.editNewsForm.id);-->
<!-- if (index > -1) {-->
<!-- this.$set(this.newsList,index, {-->
<!-- ...this.newsList[index],-->
<!-- ...this.editNewsForm-->
<!-- });-->
<!-- }-->
<!-- this.newsDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '保存成功!'-->
<!-- });-->
<!-- },-->
<!-- // 取消动态新闻编辑-->
<!-- cancelNewsEdit() {-->
<!-- this.newsDialogVisible = false;-->
<!-- this.currentEditNews = null;-->
<!-- this.editNewsForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: '',-->
<!-- status: '',-->
<!-- link: '',-->
<!-- img: '',-->
<!-- id:null,-->
<!-- };-->
<!-- },-->
<!-- // 处理动态新闻图片上传-->
<!-- beforeAvatarUploadNews(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.editNewsForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- // 打开新建弹窗-->
<!-- createNewNews() {-->
<!-- this.createNewsDialogVisible = true;-->
<!-- this.createNewsForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- img: '',-->
<!-- id: this.newsList.length + 1,-->
<!-- type: 'company',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- };-->
<!-- },-->
<!-- // 取消新建-->
<!-- cancelCreateNews() {-->
<!-- this.createNewsDialogVisible = false;-->
<!-- this.createNewsForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- img: '',-->
<!-- id: null,-->
<!-- type: 'company',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- };-->
<!-- },-->
<!-- // 保存新建-->
<!-- saveCreateNews() {-->
<!-- if (!this.createNewsForm.type || !this.createNewsForm.id) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- // 添加新的公司动态数据-->
<!-- this.newsList.push({-->
<!-- ...this.createNewsForm-->
<!-- });-->
<!-- this.createNewsDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '新建成功!'-->
<!-- });-->
<!-- },-->
<!-- // 处理新建图片上传-->
<!-- beforeAvatarUploadCreate(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.createNewsForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- selectNewsListAll(newVal) {-->
<!-- this.newsList.forEach(item => item.checked = newVal);-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- // 计算属性判断是否"全部被选中"-->
<!-- selectNewsListAll: {-->
<!-- get() {-->
<!-- return this.newsList.length > 0 && this.newsList.every(item => item.checked);-->
<!-- },-->
<!-- set(value) {-->
<!-- // 如果当前是全选状态，再次点击时 value 为 false，则全部取消-->
<!-- this.newsList.forEach(item => {-->
<!-- item.checked = value;-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style scoped lang="less">-->
<!--.itemTop {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-bottom: 20px;-->
<!-- .button-group {-->
<!-- display: flex;-->
<!-- gap: 10px;-->
<!-- }-->
<!--}-->
<!--.pagination-wrapper {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-top: 20px;-->
<!--}-->
<!--.avatar-uploader{-->
<!-- img{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- }-->
<!--}-->
<!--</style>-->

785
hailin_web/src/views/dynamic/media.vue Normal file
View File

@ -0,0 +1,785 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="公司动态" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-big-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
:show-content="true"
:show-link="true"
:show-new-date="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-big-title="true"
:show-status="true"
:show-oder="true"
:show-new-date="true"
:show-content="true"
:show-link="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { Article, ArticleCreate, ArticleEdit, ArticleDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await Article({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.typer === "home" || item.type === "home" );
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
title: '',
img: '',
sequence: this.haiLinImgList.length + 1,
link:'',
content:'',
pushAT:'',
typer: "home",
type: "home",
status: 'enabled',
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id:item.id,
title: item.title,
img: item.img,
sequence: item.sequence,
link: item.link,
content: item.content,
pushAT: item.pushAT,
typer: "home",
type: "home",
status: item.status,
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await ArticleEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await ArticleCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await ArticleDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
<!--<template>-->
<!-- <div class="media">-->
<!-- <Breadcrumb :items="breadcrumbItems" style="display: none;"/>-->
<!-- <el-tabs v-model="activeTab" type="card" >-->
<!-- <el-tab-pane label="媒体报道" name="haiLinNews" >-->
<!-- <div class="itemTop">-->
<!-- &lt;!&ndash; <h3>科研成果</h3> &ndash;&gt;-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="createNewMediaReport">新建成果</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedMediaReports">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; <table>-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th><input type="checkbox" :checked="selectMediaReportsAll" @change="selectMediaReportsAll = !selectMediaReportsAll"></th>-->
<!-- <th>图片</th>-->
<!-- <th>标题</th>-->
<!-- <th>摘要</th>-->
<!-- <th>时间</th>-->
<!-- <th>状态</th>-->
<!-- <th>链接</th>-->
<!-- <th>顺序</th>-->
<!-- <th>操作</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr v-for="(item, index) in MediaReports" :key="item.id">-->
<!-- <td><input type="checkbox" v-model="item.checked"></td>-->
<!-- <td class="image" > <img :src="item.imageUrl" alt="图片" style="max-width: 100px; max-height: 100px;" /></td>-->
<!-- <td>{{ item.mainTitle }}</td>-->
<!-- <td>{{ item.desc}}</td>-->
<!-- <td>{{item.year}}-{{ item.date }}</td>-->
<!-- <td :class="{'status': item.status === '展示中', 'not-status': item.status === '未展示'}">{{ item.status }}</td>-->
<!-- <td><a :href="item.link" target="_blank">{{ item.link }}</a></td>-->
<!-- <td>{{ item.id}}</td>-->
<!-- <td class="actions">-->
<!-- <a href="#" @click.prevent="editMediaReportsItem(index)">编辑</a>-->
<!-- <a href="#" @click.prevent="deleteMediaReportsItem(index)">删除</a>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table> &ndash;&gt;-->
<!-- <HaiLinTable-->
<!-- :items="MediaReports"-->
<!-- :show-image="true"-->
<!-- :show-title="true"-->
<!-- :show-status="true"-->
<!-- :show-id="true"-->
<!-- :show-desc="true"-->
<!-- :show-actions="true"-->
<!-- @selection-change="handleSelectionChange"-->
<!-- @edit="handleEdit"-->
<!-- @delete="handleDelete"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination-->
<!-- :total="MediaReports.length"-->
<!-- :page-size="pageSize"-->
<!-- :current-page.sync="currentPage"-->
<!-- @change="handlePageChange" />-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- <el-dialog-->
<!-- title="编辑媒体报道"-->
<!-- :visible.sync="mediaReportsDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelMediaReportsEdit"-->
<!-- >-->
<!-- <el-form :model="editMediaReportsForm" label-width="80px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="editMediaReportsForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="摘要">-->
<!-- <el-input type="textarea" v-model="editMediaReportsForm.desc"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="日期">-->
<!-- <el-input v-model="editMediaReportsForm.date" placeholder="MM-DD"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="年份">-->
<!-- <el-input v-model="editMediaReportsForm.year" placeholder="YYYY"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editMediaReportsForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="链接">-->
<!-- <el-input v-model="editMediaReportsForm.link"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editMediaReportsForm.id" :min="1" :max="10"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadMediaReports">-->
<!-- <img v-if="editMediaReportsForm.img" :src="editMediaReportsForm.img" class="avatar">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelMediaReportsEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveMediaReportsEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建媒体报道弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建媒体报道"-->
<!-- :visible.sync="createMediaReportDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelCreateMediaReport"-->
<!-- >-->
<!-- <el-form :model="createMediaReportForm" label-width="80px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="createMediaReportForm.mainTitle"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="摘要">-->
<!-- <el-input type="textarea" v-model="createMediaReportForm.desc"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="日期">-->
<!-- <el-input v-model="createMediaReportForm.date" placeholder="MM-DD"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="年份">-->
<!-- <el-input v-model="createMediaReportForm.year" placeholder="YYYY"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createMediaReportForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="链接">-->
<!-- <el-input v-model="createMediaReportForm.link"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createMediaReportForm.id" :min="1" :max="10"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreate">-->
<!-- <img v-if="createMediaReportForm.imageUrl" :src="createMediaReportForm.imageUrl" class="avatar">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateMediaReport">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateMediaReport">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import Breadcrumb from '@/common/breadcrumb.vue';-->
<!--import Pagination from '@/common/pagination.vue';-->
<!--import HaiLinTable from '@/common/table.vue';-->
<!--export default {-->
<!-- name: 'media',-->
<!-- components: { Breadcrumb, Pagination,HaiLinTable },-->
<!-- data(){-->
<!-- return{-->
<!-- activeTab: 'haiLinNews', // 默认激活的 tab-->
<!-- breadcrumbItems: [-->
<!-- { title: '海邻动态', to: '/' },-->
<!-- { title: '媒体报道', to: '/home' }-->
<!-- ],-->
<!-- // 分页组件-->
<!-- currentPage: 1,-->
<!-- pageSize: 5,-->
<!-- currentEditItem: null,-->
<!-- dialogVisible: false,-->
<!-- createMediaReportDialogVisible: false, // 新建弹窗显示状态-->
<!-- MediaReports: [-->
<!-- {-->
<!-- id: 1,-->
<!-- date: '03-15',-->
<!-- year: '2024 ',-->
<!-- title: '开足马力忙生产',-->
<!-- desc: '立足通辽所拥有的玉米全产业链的优势，充分利用玉米副产物。',-->
<!-- img: require('@/assets/DynamicData/开足马力忙生产.jpg'),-->
<!-- type: 'media',-->
<!-- link: 'https://mp.weixin.qq.com/s/-ryD1v8WNaGREZVKHHTBPg',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- {-->
<!-- id: 2,-->
<!-- date: '04-01',-->
<!-- year: '2022 ',-->
<!-- title: '科尔沁区：优化产业布局 强化服务保障 打造工业集群化新高地',-->
<!-- desc: '近年来，科尔沁区以转变发展方式为主线，以提升工业经济发展质量消息为核心，持续优化产业布局，不断强化服务保障。',-->
<!-- img: require('@/assets/DynamicData/科尔沁区：优化产业布局 强化服务保障 打造工业集群化新高地.jpg'),-->
<!-- type: 'media',-->
<!-- link: 'http://nm.people.com.cn/n2/2022/0401/c398114-35204815.html\n',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- {-->
<!-- id: 3,-->
<!-- date: '11-03',-->
<!-- year: '2021 ',-->
<!-- title: '科尔沁区：企业技术创新 引领高效生产',-->
<!-- desc: '近年来，科尔沁区积极推动中小企业转型，鼓励企业以绿色高新技术引领创新创造，为科尔沁区经济发展提供新支撑。',-->
<!-- img: require('@/assets/DynamicData/科尔沁区：企业技术创新 引领高效生产.png'),-->
<!-- type: 'media',-->
<!-- link: 'http://nm.people.com.cn/n2/2021/1103/c398114-34988638.html\n',-->
<!-- isExternal: true,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- ],-->
<!-- mediaReportsDialogVisible: false,-->
<!-- currentEditMediaReport: null,-->
<!-- editMediaReportsForm:{-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: '',-->
<!-- status: '',-->
<!-- link: '',-->
<!-- image: '',-->
<!-- },-->
<!-- createMediaReportForm: { // 新建表单数据-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- imageUrl: '',-->
<!-- id: null,-->
<!-- type: 'media',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- // 处理编辑按钮点击-->
<!-- handleEdit(item) {-->
<!-- this.editMediaReportsForm = { ...item }; // 拷贝当前项数据到表单-->
<!-- this.mediaReportsDialogVisible = true;-->
<!-- },-->
<!-- // 处理删除按钮点击-->
<!-- handleDelete(item) {-->
<!-- this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.MediaReports.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.MediaReports.splice(index, 1);-->
<!-- this.$message.success('删除成功');-->
<!-- }-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 分页变化时触发-->
<!-- handlePageChange(page) {-->
<!-- this.currentPage = page;-->
<!-- },-->
<!-- //del选中MediaReports-->
<!-- deleteSelectedMediaReports() {-->
<!-- // this.MediaReports = this.MediaReports.filter(item => !item.checked);-->
<!-- // this.selectMediaReportsAll = false; // 取消全选状态-->
<!-- if (this.MediaReportsImgSelection.length === 0) {-->
<!-- this.$message.warning('请先选择要删除的轮播图');-->
<!-- return;-->
<!-- }-->
<!-- this.$confirm('确认删除选中的轮播图吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const selectedIds = this.MediaReportsImgSelection.map(item => item.id);-->
<!-- this.MediaReports = this.MediaReports.filter(item => !selectedIds.includes(item.id));-->
<!-- this.$message.success('删除成功');-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 编辑媒体报道-->
<!-- editMediaReportsItem(index) {-->
<!-- this.currentEditMediaReport = this.MediaReports[index];-->
<!-- this.editMediaReportsForm = {-->
<!-- mainTitle: this.MediaReports[index].mainTitle,-->
<!-- desc: this.MediaReports[index].desc,-->
<!-- date: this.MediaReports[index].date,-->
<!-- year: this.MediaReports[index].year,-->
<!-- status: this.MediaReports[index].status || '展示中',-->
<!-- link: this.MediaReports[index].link,-->
<!-- imageUrl: this.MediaReports[index].imageUrl,-->
<!-- id: this.MediaReports[index].id,-->
<!-- };-->
<!-- this.mediaReportsDialogVisible = true;-->
<!-- },-->
<!-- // 删除媒体报道-->
<!-- deleteMediaReportsItem(index) {-->
<!-- this.$confirm('确认删除该媒体报道吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- this.MediaReports.splice(index, 1);-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '删除成功!'-->
<!-- });-->
<!-- }).catch(() => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: '已取消删除'-->
<!-- });-->
<!-- });-->
<!-- },-->
<!-- // 保存媒体报道编辑-->
<!-- saveMediaReportsEdit() {-->
<!-- if (!this.editMediaReportsForm.mainTitle || !this.editMediaReportsForm.desc) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- const index = this.MediaReports.indexOf(this.currentEditMediaReport);-->
<!-- if (index > -1) {-->
<!-- this.MediaReports[index] = {-->
<!-- ...this.currentEditMediaReport,-->
<!-- ...this.editMediaReportsForm-->
<!-- };-->
<!-- }-->
<!-- this.mediaReportsDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '保存成功!'-->
<!-- });-->
<!-- },-->
<!-- // 取消媒体报道编辑-->
<!-- cancelMediaReportsEdit() {-->
<!-- this.mediaReportsDialogVisible = false;-->
<!-- this.currentEditMediaReport = null;-->
<!-- this.editMediaReportsForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: '',-->
<!-- status: '',-->
<!-- link: '',-->
<!-- imageUrl: '',-->
<!-- id:null,-->
<!-- };-->
<!-- },-->
<!-- // 处理媒体报道图片上传-->
<!-- beforeAvatarUploadMediaReports(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.editMediaReportsForm.imageUrl = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- // 打开新建弹窗-->
<!-- createNewMediaReport() {-->
<!-- this.createMediaReportDialogVisible = true;-->
<!-- this.createMediaReportForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- imageUrl: '',-->
<!-- id: this.MediaReports.length + 1,-->
<!-- type: 'media',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- };-->
<!-- },-->
<!-- // 取消新建-->
<!-- cancelCreateMediaReport() {-->
<!-- this.createMediaReportDialogVisible = false;-->
<!-- this.createMediaReportForm = {-->
<!-- mainTitle: '',-->
<!-- desc: '',-->
<!-- date: '',-->
<!-- year: new Date().getFullYear().toString(),-->
<!-- status: '展示中',-->
<!-- link: '',-->
<!-- imageUrl: '',-->
<!-- id: null,-->
<!-- type: 'media',-->
<!-- isExternal: true,-->
<!-- checked: false-->
<!-- };-->
<!-- },-->
<!-- // 保存新建-->
<!-- saveCreateMediaReport() {-->
<!-- if (!this.createMediaReportForm.mainTitle || !this.createMediaReportForm.desc) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- // 添加新的媒体报道数据-->
<!-- this.MediaReports.push({-->
<!-- ...this.createMediaReportForm-->
<!-- });-->
<!-- this.createMediaReportDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '新建成功!'-->
<!-- });-->
<!-- },-->
<!-- // 处理新建图片上传-->
<!-- beforeAvatarUploadCreate(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.createMediaReportForm.imageUrl = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- selectMediaReportsAll(newVal) {-->
<!-- this.MediaReports.forEach(item => item.checked = newVal);-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- // 计算属性判断是否"全部被选中"-->
<!-- selectMediaReportsAll: {-->
<!-- get() {-->
<!-- return this.MediaReports.length > 0 && this.MediaReports.every(item => item.checked);-->
<!-- },-->
<!-- set(value) {-->
<!-- // 如果当前是全选状态，再次点击时 value 为 false，则全部取消-->
<!-- this.MediaReports.forEach(item => {-->
<!-- item.checked = value;-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style scoped lang="less">-->
<!--.itemTop {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-bottom: 20px;-->
<!-- .button-group {-->
<!-- display: flex;-->
<!-- gap: 10px;-->
<!-- }-->
<!--}-->
<!--.pagination-wrapper {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-top: 20px;-->
<!--}-->
<!--.avatar-uploader{-->
<!-- img{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- }-->
<!--}-->
<!--</style>-->

252
hailin_web/src/views/dynamic/video.vue Normal file
View File

@ -0,0 +1,252 @@
<template>
<div class="video">
<Breadcrumb :items="breadcrumbItems" />
<div class="itemTop">
<!-- <h3>科研成果</h3> -->
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="createNewVideoCenter">新增视频</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedVideoCenter">批量删除</el-button>
</div>
</div>
</div>
<HaiLinTable
:items="VideoCenter"
:show-small-img="true"
:show-big-img="true"
:show-link="true"
:show-big-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
:show-video="true"
:show-new-date="true"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination
:total="VideoCenter.length"
:page-size="pageSize"
:current-page.sync="currentPage"
@change="handlePageChange" />
</div>
<!-- 视频弹窗 -->
<NewsDialog
:visible="videoCenterDialogVisible"
:item="currentVideoCenterForm"
:dialog-title="vdeioDialogTitle"
:show-small-img="true"
:show-full-img="true"
:show-big-title="true"
:show-status="true"
:show-oder="true"
:show-video="true"
:show-new-date="true"
:show-link="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="videoCenterDialogVisible = $event"
/>
</div>
</template>
<script>
import Breadcrumb from '@/common/breadcrumb.vue';
import Pagination from '@/common/pagination.vue';
import HaiLinTable from '@/common/table.vue';
import {VideoEdit, VideoDel, VideoCreate, Video} from '@/utils/api'
import NewsDialog from "@/common/dialog.vue";
export default {
name: 'video',
components: {NewsDialog, Breadcrumb, Pagination,HaiLinTable },
data(){
return{
breadcrumbItems: [
{ title: '海邻动态', to: '/' },
{ title: '视频中心', to: '/home' }
],
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
createVideoCenterDialogVisible: false, // 新建弹窗显示状态
vdeioDialogTitle:'',
VideoCenter: [
],
videoCenterDialogVisible: false,
currentEditVideo: null,
currentVideoCenterForm: {
},
}
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await Video({});
if (res.success) {
this.VideoCenter = res.data;
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
// 处理编辑按钮点击
handleEdit(item) {
this.currentVideoCenterForm = { ...item }; // 拷贝当前项数据到表单
this.videoCenterDialogVisible = true;
this.vdeioDialogTitle = '编辑海邻视频中心';
},
// 打开新建弹窗
createNewVideoCenter() {
this.videoCenterDialogVisible = true;
this.vdeioDialogTitle = '新建海邻视频中心';
this.currentVideoCenterForm = {
sequence:this.VideoCenter.length + 1
};
},
// // 处理删除按钮点击
// handleDelete(item) {
// this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const index = this.VideoCenter.indexOf(item);
// if (index > -1) {
// this.VideoCenter.splice(index, 1);
// this.$message.success('删除成功');
// }
// }).catch(() => {
// this.$message.info('已取消删除');
// });
// },
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentVideoCenterForm = {...formData};
if (this.currentVideoCenterForm.id) {
await VideoEdit(this.currentVideoCenterForm.id, this.currentVideoCenterForm);
this.$message.success('修改成功');
} else {
await VideoCreate(this.currentVideoCenterForm);
this.$message.success('创建成功');
}
this.videoCenterDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
async handleDelete(item) {
// this.VideoCenter = this.VideoCenter.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await VideoDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
//del选中VideoCenter
deleteSelectedVideoCenter() {
this.VideoCenter = this.VideoCenter.filter(item => !item.checked);
this.selectVideoCenterAll = false; // 取消全选状态
},
},
watch: {
selectVideoCenterAll(newVal) {
this.VideoCenter.forEach(item => item.checked = newVal);
},
},
computed: {
// 计算属性判断是否"全部被选中"
selectVideoCenterAll: {
get() {
return this.VideoCenter.length > 0 && this.VideoCenter.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.VideoCenter.forEach(item => {
item.checked = value;
});
}
},
}
}
</script>
<style scoped lang="less">
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.avatar-uploader{
img{
width: 100%;
height: 100%;
}
}
</style>

481
hailin_web/src/views/history.vue Normal file
View File

@ -0,0 +1,481 @@
<template>
<div class="history">
<div class="itemTop">
<div class="search-bar">
<el-form :inline="true" label-width="80px">
<el-form-item label="事件">
<el-input v-model="filters.event" placeholder="请输入事件描述" clearable></el-input>
</el-form-item>
<el-form-item label="年份">
<el-select v-model="filters.year" placeholder="请选择年份" style="width: 100%">
<el-option v-for="year in yearOptions" :key="year" :label="`${year} 年`" :value="year"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="createNewDevelopAbout">新增大事</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedDevelopAbout">批量删除</el-button>
</div>
</div>
<HaiLinTable :items="developAbout"
:show-id="true"
:show-date="true"
:show-event="true"
:show-status="true"
:show-actions="true"
@edit="handleEdit"
@delete="handleDelete" />
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="developAbout.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange" />
</div>
<el-dialog title="编辑发展历程" :visible.sync="developAboutDialogVisible" width="50%" @close="cancelDevelopAboutEdit">
<el-form :model="editDevelopAboutForm" label-width="100px">
<!-- 年份 -->
<el-form-item label="年份" required>
<el-select v-model="editDevelopAboutForm.year" placeholder="请选择年份" style="width: 100%">
<el-option v-for="year in yearOptions" :key="year" :label="`${year} 年`" :value="year"></el-option>
</el-select>
</el-form-item>
<!-- 月份 -->
<el-form-item label="月份" required>
<el-select v-model="editDevelopAboutForm.month" placeholder="请选择月份" style="width: 100%">
<el-option v-for="month in 12" :key="month" :label="`${month} 月`" :value="month"></el-option>
</el-select>
</el-form-item>
<!-- 事件描述 -->
<el-form-item label="事件描述" required>
<el-input v-model="editDevelopAboutForm.event" type="textarea" :rows="4"
placeholder="请输入事件描述"></el-input>
</el-form-item>
<!-- 状态 -->
<el-form-item label="状态">
<el-select v-model="editDevelopAboutForm.status" placeholder="请选择状态">
<el-option label="展示中" value="展示中"></el-option>
<el-option label="未展示" value="未展示"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDevelopAboutEdit">取 消</el-button>
<el-button type="primary" @click="saveDevelopAboutEdit">确 定</el-button>
</span>
</el-dialog>
<!-- 新建海邻大事记弹窗 -->
<el-dialog title="新建海邻大事记" :visible.sync="createDevelopAboutDialogVisible" width="50%"
@close="cancelCreateDevelopAbout">
<el-form :model="editDevelopAboutForm" label-width="100px">
<!-- 年份 -->
<el-form-item label="年份" required>
<el-select v-model="editDevelopAboutForm.year" placeholder="请选择年份" style="width: 100%">
<el-option v-for="year in yearOptions" :key="year" :label="`${year} 年`" :value="year"></el-option>
</el-select>
</el-form-item>
<!-- 月份 -->
<el-form-item label="月份" required>
<el-select v-model="editDevelopAboutForm.month" placeholder="请选择月份" style="width: 100%">
<el-option v-for="month in 12" :key="month" :label="`${month} 月`" :value="month"></el-option>
</el-select>
</el-form-item>
<!-- 事件描述 -->
<el-form-item label="事件描述" required>
<el-input v-model="editDevelopAboutForm.event" type="textarea" :rows="4"
placeholder="请输入事件描述"></el-input>
</el-form-item>
<!-- 状态 -->
<el-form-item label="状态">
<el-select v-model="editDevelopAboutForm.status" placeholder="请选择状态">
<el-option label="展示中" value="展示中"></el-option>
<el-option label="未展示" value="未展示"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDevelopAboutEdit">取 消</el-button>
<el-button type="primary" @click="saveDevelopAboutEdit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue';
import HaiLinTable from '@/common/table.vue';
export default {
name: 'history',
components: { Pagination, HaiLinTable },
data() {
const currentYear = new Date().getFullYear();
return {
filters: {
year: '',
event: ''
},
// 生成从1900年到当前年+10年的选项
yearOptions: Array.from({ length: currentYear - 1900 + 10 }, (_, i) => 1900 + i),
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
createDevelopAboutDialogVisible: false, // 新建弹窗显示状态
developAbout: [
{
id: 1,
year: '2014',
event: '内蒙古中润成立',
status: '展示中',
checked: false,
},
{
id: 2,
year: '2017',
event: '通辽海邻成立',
status: '展示中',
checked: false,
},
{
id: 3,
year: '2018',
event: '内蒙古海邻成立',
status: '展示中',
checked: false,
},
{
id: 4,
year: '2024',
event: '3月:呼伦海邻成立、与中泰证券签署上市服务协议;4月:内股交天骏板挂牌',
status: '展示中',
checked: false,
},
],
developAboutDialogVisible: false,
currentEditDevelopAbout: null,
editDevelopAboutForm: {
id: '',
year: '',
event: '',
status: '',
checked: null,
},
createDevelopAboutForm: { // 新建表单数据
id: '',
year: '',
event: '',
status: '',
checked: null,
},
newEvent: {
month: '',
details: ['']
},
}
},
methods: {
// 处理编辑按钮点击
handleEdit(item) {
this.editDevelopAboutForm = { ...item }; // 拷贝当前项数据到表单
this.developAboutDialogVisible = true;
},
// 处理删除按钮点击
handleDelete(item) {
this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.developAbout.indexOf(item);
if (index > -1) {
this.developAbout.splice(index, 1);
this.$message.success('删除成功');
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
//del选中teamMembers
deleteSelectedDevelopAbout() {
this.developAbout = this.developAbout.filter(item => !item.checked);
this.selectDevelopAboutAll = false; // 取消全选状态
},
editDevelopAboutItem(index) {
this.currentEditDevelopAbout = index;
const item = this.developAbout[index];
this.editDevelopAboutForm = {
year: item.year,
events: JSON.parse(JSON.stringify(item.events)), // 深拷贝events数组
status: item.status
};
this.developAboutDialogVisible = true;
},
deleteDevelopAboutItem(index) {
this.$confirm('确定要删除这条发展历程吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.developAbout.splice(index, 1);
this.$message.success('删除成功');
}).catch(() => { });
},
saveDevelopAboutEdit() {
if (!this.editDevelopAboutForm.year) {
this.$message.error('请输入年份');
return;
}
// 验证events数据
if (!this.editDevelopAboutForm.events.length) {
this.$message.error('请至少添加一个事件');
return;
}
for (const event of this.editDevelopAboutForm.events) {
if (!event.month) {
this.$message.error('请输入月份');
return;
}
if (!event.details.length || !event.details[0]) {
this.$message.error('请输入事件详情');
return;
}
}
if (this.currentEditDevelopAbout !== null) {
// 更新现有项
this.developAbout[this.currentEditDevelopAbout] = {
...this.developAbout[this.currentEditDevelopAbout],
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
};
} else {
// 添加新项
this.developAbout.push({
id: this.developAbout.length + 1,
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
});
}
this.developAboutDialogVisible = false;
this.$message.success('保存成功');
},
cancelDevelopAboutEdit() {
this.developAboutDialogVisible = false;
this.currentEditDevelopAbout = null;
this.editDevelopAboutForm = {
year: '',
events: [],
status: '展示中'
};
},
addNewEvent() {
this.editDevelopAboutForm.events.push({
month: '',
details: ['']
});
},
removeEvent(index) {
this.editDevelopAboutForm.events.splice(index, 1);
},
addEventDetail(eventIndex) {
this.editDevelopAboutForm.events[eventIndex].details.push('');
},
removeEventDetail(eventIndex, detailIndex) {
this.editDevelopAboutForm.events[eventIndex].details.splice(detailIndex, 1);
},
beforeAvatarUploadDevelopAbout(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
// 读取文件并预览
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.editDevelopAboutForm.img = e.target.result;
};
return false;
},
// 打开新建弹窗
createNewDevelopAbout() {
this.createDevelopAboutDialogVisible = true;
this.createDevelopAboutForm = {
Id: this.developAbout.length + 1,
year: '',
events: [
{ month: '', details: [''] }
],
status: '展示中',
checked: false
};
},
// 取消新建
cancelCreateDevelopAbout() {
this.createDevelopAboutDialogVisible = false;
this.createDevelopAboutForm = {
Id: null,
year: '',
events: [
{ month: '', details: [''] }
],
status: '展示中',
checked: false
};
},
// 保存新建
saveCreateDevelopAbout() {
if (!this.createDevelopAboutForm.year) {
this.$message.error('请输入年份');
return;
}
// 验证events数据
if (!this.createDevelopAboutForm.events.length) {
this.$message.error('请至少添加一个事件');
return;
}
for (const event of this.createDevelopAboutForm.events) {
if (!event.month) {
this.$message.error('请输入月份');
return;
}
if (!event.details.length || !event.details[0]) {
this.$message.error('请输入事件详情');
return;
}
}
// 添加新的发展历程数据
this.developAbout.push({
...this.createDevelopAboutForm
});
this.createDevelopAboutDialogVisible = false;
this.$message({
type: 'success',
message: '新建成功!'
});
},
// 添加新建事件
addCreateEvent() {
this.createDevelopAboutForm.events.push({
month: '',
details: ['']
});
},
// 删除新建事件
removeCreateEvent(index) {
this.createDevelopAboutForm.events.splice(index, 1);
},
// 添加新建事件详情
addCreateEventDetail(eventIndex) {
this.createDevelopAboutForm.events[eventIndex].details.push('');
},
// 删除新建事件详情
removeCreateEventDetail(eventIndex, detailIndex) {
this.createDevelopAboutForm.events[eventIndex].details.splice(detailIndex, 1);
},
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
},
computed: {
// 计算属性判断是否"全部被选中"
selectDevelopAboutAll: {
get() {
return this.developAbout.length > 0 && this.developAbout.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.developAbout.forEach(item => {
item.checked = value;
});
}
},
}
}
</script>
<style scoped lang="less">
.itemTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.search-bar {
// flex: 2;
max-width: 900px;
}
.button-group {
white-space: nowrap;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.avatar-uploader {
img {
width: 100%;
height: 100%;
}
}
</style>

177
hailin_web/src/views/login.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<div class="login-container">
<div class="login-left">
<!-- 添加一些装饰元素 -->
<div class="decor-square"></div>
<div class="decor-circle"></div>
<div class="decor-log">
<img class="imgLogo" src="@/assets/海邻LOGO.png">
</div>
</div>
<div class="login-right">
<el-form :model="form" status-icon :rules="rules" ref="form" label-width="0px" class="login-form">
<h1>海邻管理系统</h1>
<p>欢迎来到海邻官网后台管理平台</p>
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="请输入您的账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入您的密码"></el-input>
</el-form-item>
<!-- </el-form-item> -->
<el-button type="primary" @click="submitForm('form')">登录</el-button>
<!-- </el-form-item> -->
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success('登录成功');
setTimeout(() => {
this.$router.push('/picture/banner');
}, 1000);
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
<style lang="less" scoped>
@import '../base.less';
.login-container {
width: 100%;
height: 100vh;
display: flex;
.login-left {
width: 50%;
min-height: 100vh;
background: linear-gradient(to bottom, rgba(70, 130, 180, 0.9),rgba(173, 216, 230, 0.5), rgba(70, 130, 180, 0.9));
position: relative;
.decor-log{
width: 100%;
height: 100px;
.imgLogo{
width: 100%;
height: auto;
margin: 40% auto;
}
}
.decor-square {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
position: absolute;
top: 100px;
left: 50px;
}
.decor-circle {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
position: absolute;
top: 50px;
right: 50px;
}
}
.login-right {
/deep/ .el-form-item__label{
text-align: left;
}
/deep/ .el-input__inner {
height: 60px;
line-height: 60px;
// width: 150%;
}
width: 50%;
// display: flex;
// justify-content: center;
// align-items: center;
background: #fff;
margin-left: 10%;
margin-top: 10%;
.login-form {
text-align: center;
width: 500px;
h1 {
font-size: 30px;
// margin-bottom: 20px;
text-align: left;
height: 60px;
line-height: 60px;
font-weight: bold;
}
p {
font-size: 18px;
color: #999;
text-align: left;
margin-bottom: 30px;
height: 60px;
line-height: 60px;
}
.el-input {
width: 100%;
margin-bottom: 20px;
}
// 给按钮添加阴影效果
/deep/ .el-button {
width: 500px;
box-shadow: 0 5px 10px #1d60e580;
&:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); // 按钮悬停时的阴影效果
}
&:active {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); // 按钮点击时的阴影效果
}
}
}
}
}
</style>

669
hailin_web/src/views/newAdding.vue Normal file
View File

@ -0,0 +1,669 @@
<template>
<div class="newAdding">
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card">
<!-- 产品类别 Tab -->
<el-tab-pane label="自定义饲料原料" name="product">
<div class="sectionA">
<div class="itemTop">
<div class="search-bar">
<el-form :model="filters" :inline="true" label-width="80px">
<el-form-item label="饲料原料" style="margin-bottom: 10px">
<el-select
v-model="filters.category"
placeholder="请选择饲料原料"
style="width: 100%;margin-bottom: 10px"
filterable
allow-create
default-first-option
@change="handleAddCategoryChange"
>
<el-option
v-for="(cat, index) in categoryList"
:key="cat"
:label="cat"
:value="cat"
>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>{{ cat }}</span>
<el-button
type="text"
icon="el-icon-close"
@click.stop="removeCategory(index)"
style="margin-left: 10px; color: red;"
/>
</div>
</el-option>
</el-select>
<el-input
v-model="customCategory"
placeholder="输入自定义适用类型"
class="custom-input"
>
<template #append>
<el-button @click="addCustomCategory">添加</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="适用类型" style="margin-bottom: 0">
<el-select
v-model="filters.feedstuff"
placeholder="请先选择适用类型"
style="width: 100%;margin-bottom: 10px"
:disabled="!filters.category"
>
<el-option
v-for="(item , index ) in feedstuffOptions"
:key="item"
:label="item"
:value="item"
>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>{{ item }}</span>
<el-button
type="text"
icon="el-icon-close"
@click.stop="removeFeedStuff(index)"
style="margin-left: 10px; color: red;"
/>
</div>
</el-option>
</el-select>
<el-input
v-model="customFeedstuff"
placeholder="输入自定义适用类型"
class="custom-input"
:disabled="!filters.category"
>
<template #append>
<el-button @click="addCustomFeedstuff">添加</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
</el-tab-pane>
<!-- 招聘基地 Tab -->
<el-tab-pane label="自定义招聘基地" name="zhaoPin">
<div class="sectionB">
<div class="itemTop">
<div class="search-bar">
<el-form :inline="true" label-width="80px">
<el-form-item label="基地" style="margin-bottom: 0">
<el-select v-model="filtersS.city" placeholder="请选择基地" clearable style="width: 100%;margin-bottom: 10px">
<el-option
v-for="(city , index ) in cityOptions"
:key="city"
:label="city"
:value="city">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>{{ city }}</span>
<el-button
type="text"
icon="el-icon-close"
@click.stop="removeCity(index)"
style="margin-left: 10px; color: red;"
/>
</div>
</el-option>
</el-select>
<el-input
v-model="customCity"
placeholder="输入自定义基地"
class="custom-input"
>
<template #append>
<el-button @click="addCustomCity">添加</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
// components: {Pagination, HaiLinTable},
data() {
return {
customCity: '',
customFeedstuff:'',
customCategory: '',
activeTab: 'product',
filters: {
// 产品原料
feedstuff: '',
// 类别分类
category: ''
},
// 所有一级分类
categoryList: [
'产朊假丝酵母蛋白', '酿酒酵母培养物', '含可溶物的玉米干酒精糟', '其他'
],
// 每个一级分类下的子项
feedstuffMap: {
'产朊假丝酵母蛋白': ['猪', '禽', '水产'],
'酿酒酵母培养物': ['猪', '禽', '反刍'],
'含可溶物的玉米干酒精糟': ['猪', '禽', '反刍'],
'其他': ['肉鸭', '肉鹅'],
},
product: {
category: '',
feedstuff: '',
productname: '',
types: [],
ingredients: '',
productimg: [],
productsuitable:'',
productstandard: [{ value: '' }],
productfunctional: [{ value: '' }]
},
editProduct: {
category: '',
feedstuff: '',
productname: '',
types: [],
ingredients: '',
productimg: [],
productsuitable:'',
productstandard: [{ value: '' }],
productfunctional: [{ value: '' }]
},
productList:[
{id: 1,
category: '猪', //类别分类
productname: 'NFP50', //名称
feedstuff: '产朊假丝酵母蛋白', //饲料原料
ingredients: '玉米浸泡液等等。。。', //原料组成
productimg: false, //产品图片
productsuitable: '断奶猪崽', //适用对象
productstandard: '水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% ', //产品标准
productfunctional: '高酸溶蛋白 高蛋白消化率高苏氨酸无明显抗营养因子发酵处理 适口性佳', // 功能特点
},
{id: 2,
category: '鸭',
productname: 'NFP50',
feedstuff: '产朊假丝酵母蛋白',
ingredients: '玉米浸泡液等等。。。',
productimg: false,
productsuitable: '断奶猪崽',
productstandard: '水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% ',
productfunctional: '高酸溶蛋白 高蛋白消化率高苏氨酸无明显抗营养因子发酵处理 适口性佳',
},
],
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
createDevelopAboutDialogVisible: false, // 新建弹窗显示状态
developAboutDialogVisible: false,
currentEditDevelopAbout: null,
filtersS: {
post: '',
city: ''
},
cityOptions: ['通辽海邻','赤峰中润','大庆海邻','龙江海邻','呼伦海邻'],
groupedCityOptions: [
{
options: ['通辽海邻','赤峰中润','大庆海邻','龙江海邻','呼伦海邻']
},
],
jobLocations:[{
id: 1,
city:'内蒙海邻',
post:'法务助理',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},{
id: 2,
city:'赤峰中润',
post:'法务助理',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},
{
id: 3,
post:'法务助理',
city:'通辽海邻',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},
],
filteredJobLocations:[],
jobLocationVisibility: [] ,// 每项为 true/false，表示是否显示内容
jobDialogVisible: false,
currentEditJob: null,
currentLocationIndex: null,
editJobForm: {
post: '',
city: '',
require:'',
duty: '',
pay: '',
remark:'',
},
editingLocation: {
name: null, // 当前正在编辑的location名称
id: null // 当前正在编辑的location顺序
},
createJobLocationForm: { // 新建表单数据
post: '',
city: '',
require:'',
duty: '',
pay: '',
remark:'',
},
}
},
mounted() {
this.filteredJobLocations = [...this.jobLocations]; // 初始化时显示全部数据
console.log("111",this.filteredJobLocations);
} ,
methods: {
removeCity(index){
console.log('删除的索引:', index);
console.log('删除前的列表:', [...this.cityOptions]);
const category = this.cityOptions[index];
// 删除类别
this.cityOptions.splice(index, 1);
console.log('删除后的列表:', [...this.cityOptions]);
if (this.filters.category === category) {
this.filters.category = '';
this.filters.feedstuff = '';
}
this.$message.success('类别已删除');
},
removeCategory(index) {
console.log('删除的索引:', index);
console.log('删除前的列表:', [...this.categoryList]);
const category = this.categoryList[index];
// 删除类别
this.categoryList.splice(index, 1);
console.log('删除后的列表:', [...this.categoryList]);
// 删除对应的 feedstuffMap 数据
delete this.feedstuffMap[category];
// 如果当前选中的是被删除的类别，清空选择
if (this.filters.category === category) {
this.filters.category = '';
this.filters.feedstuff = '';
}
this.$message.success('类别已删除');
},
removeFeedStuff(index){
console.log('删除的索引:', index);
console.log('删除前的列表:', [...this.feedstuffOptions]);
const category = this.feedstuffOptions[index];
// 删除类别
this.feedstuffOptions.splice(index, 1);
console.log('删除后的列表:', [...this.feedstuffOptions]);
if (this.filters.category === category) {
this.filters.category = '';
this.filters.feedstuff = '';
}
this.$message.success('类别已删除');
},
// 添加自定义基地
addCustomCity() {
if (this.customCity.trim()) {
if (!this.cityOptions.includes(this.customCity.trim())) {
this.cityOptions.push(this.customCity.trim());
this.groupedCityOptions[0].options.push(this.customCity.trim());
this.filters.city = this.customCity.trim();
this.customCity = '';
this.$message.success('自定义基地添加成功');
} else {
this.$message.warning('该基地已存在');
}
} else {
this.$message.error('请输入有效的基地名称');
}
},
handleAddCategoryChange(value) {
if (value && !this.categoryList.includes(value)) {
this.categoryList.push(value); // 添加自定义类别
// 更新 feedstuffMap
if (!this.feedstuffMap[value]) {
this.feedstuffMap[value] = [];
}
this.$message.success('已添加自定义类别');
}
this.applyFilters(); // 刷新筛选数据
},
// 添加自定义类别
addCustomCategory() {
const trimmed = this.customCategory.trim();
if (trimmed) {
if (!this.categoryList.includes(trimmed)) {
this.categoryList.push(trimmed);
this.filters.category = trimmed;
this.customCategory = '';
// 更新 feedstuffMap
if (!this.feedstuffMap[trimmed]) {
this.feedstuffMap[trimmed] = [];
}
this.$message.success('自定义类别添加成功');
this.applyFilters(); // 刷新筛选数据
} else {
this.$message.warning('该类别已存在');
}
} else {
this.$message.error('请输入有效的自定义类别');
}
},
// 添加自定义适用类型
addCustomFeedstuff() {
if (this.customFeedstuff.trim()) {
if (!this.feedstuffMap[this.filters.category]) {
this.feedstuffMap[this.filters.category] = [];
}
if (!this.feedstuffMap[this.filters.category].includes(this.customFeedstuff.trim())) {
this.feedstuffMap[this.filters.category].push(this.customFeedstuff.trim());
this.filters.feedstuff = this.customFeedstuff.trim();
this.customFeedstuff = '';
this.$message.success('自定义适用类型添加成功');
} else {
this.$message.warning('该适用类型已存在');
}
} else {
this.$message.error('请输入有效的自定义适用类型');
}
},
applyFilters() {
this.filteredJobLocations = this.jobLocations.filter(job => {
const matchPost = !this.filtersS.post || job.post.includes(this.filtersS.post);
const matchCity = !this.filtersS.city || job.city === this.filtersS.city;
return matchPost && matchCity;
});
},
// 保存职位编辑
saveJobEdit() {
if (!this.editJobForm.title || !this.editJobForm.requirements || !this.editJobForm.salary || !this.editJobForm.itemId) {
this.$message.error('请填写完整信息');
return;
}
const job = this.jobLocations[this.currentLocationIndex].jobs.find(
j => j === this.currentEditJob
);
if (job) {
Object.assign(job, this.editJobForm);
}
this.jobDialogVisible = false;
this.$message({
type: 'success',
message: '保存成功!'
});
},
// 取消职位编辑
cancelJobEdit() {
this.jobDialogVisible = false;
this.currentEditJob = null;
this.currentLocationIndex = null;
this.editJobForm = {
title: '',
requirements: '',
responsibilities: [],
salary: '',
status: '展示中',
itemId:null,
};
},
// 取消新建
cancelCreateJobLocation() {
this.createJobLocationDialogVisible = false;
this.createJobLocationForm = {
id: null,
name: '',
status: '展示中',
checked: false,
jobs: [
{
itemId: 1,
title: '',
salary: '',
requirements: '',
responsibilities: [''],
status: '展示中',
checked: false,
}
]
};
},
// 保存新建
saveCreateJobLocation() {
if (!this.createJobLocationForm.name) {
this.$message.error('请填写公司名称');
return;
}
// 验证每个职位的信息
for (const job of this.createJobLocationForm.jobs) {
if (!job.title || !job.requirements || !job.salary || !job.itemId) {
this.$message.error('请填写完整的职位信息');
return;
}
}
// 添加新的招聘岗位数据
this.jobLocations.push({
...this.createJobLocationForm
});
this.createJobLocationDialogVisible = false;
this.$message({
type: 'success',
message: '新建成功!'
});
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisibleImage = true;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
addStandard(index) {
if (index === this.product.standards.length - 1) {
this.product.standards.push({ value: '' });
}
},
addFeature(index) {
if (index === this.product.features.length - 1) {
this.product.features.push({ value: '' });
}
},
handleCategoryChange() {
this.filters.feedstuff = ''; // 清空已选饲料原料
}, // 处理编辑按钮点击
handleEdit(item) {
this.editProduct = { ...item }; // 拷贝当前项数据到表单
this.developAboutDialogVisible = true;
},
// 处理删除按钮点击
handleDelete(item) {
this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.productList.indexOf(item);
if (index > -1) {
this.productList.splice(index, 1);
this.$message.success('删除成功');
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
saveDevelopAboutEdit() {
if (!this.editDevelopAboutForm.year) {
this.$message.error('请输入年份');
return;
}
// 验证events数据
if (!this.editDevelopAboutForm.events.length) {
this.$message.error('请至少添加一个事件');
return;
}
for (const event of this.editDevelopAboutForm.events) {
if (!event.month) {
this.$message.error('请输入月份');
return;
}
if (!event.details.length || !event.details[0]) {
this.$message.error('请输入事件详情');
return;
}
}
if (this.currentEditDevelopAbout !== null) {
// 更新现有项
this.developAbout[this.currentEditDevelopAbout] = {
...this.developAbout[this.currentEditDevelopAbout],
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
};
} else {
// 添加新项
this.developAbout.push({
id: this.developAbout.length + 1,
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
});
}
this.developAboutDialogVisible = false;
this.$message.success('保存成功');
},
cancelDevelopAboutEdit() {
this.developAboutDialogVisible = false;
this.currentEditDevelopAbout = null;
this.editDevelopAboutForm = {
year: '',
events: [],
status: '展示中'
};
},
// 取消新建
cancelCreateDevelopAbout() {
this.createDevelopAboutDialogVisible = false;
this.createDevelopAboutForm = {
Id: null,
year: '',
events: [
{ month: '', details: [''] }
],
status: '展示中',
checked: false
};
},
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
},
computed: {
feedstuffOptions() {
return this.filters.category ? this.feedstuffMap[this.filters.category] || [] : [];
},
// 计算属性判断是否"全部被选中"
selectDevelopAboutAll: {
get() {
return this.developAbout.length > 0 && this.developAbout.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.developAbout.forEach(item => {
item.checked = value;
});
}
},
},
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
margin-bottom: 20px;
align-items: center;
justify-content: space-between;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.button-group{
height: 100%;
}
</style>

386
hailin_web/src/views/picture/home.vue Normal file
View File

@ -0,0 +1,386 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<!-- <el-tab-pane label="首页海邻" name="haiLinNews" >-->
<!-- <div class="section">-->
<!-- &lt;!&ndash; <h3>首页海邻</h3> &ndash;&gt;-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="openCreateNewsDialog">新建图片</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelected">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; <el-button @click="openCreateNewsDialog">新建首页海邻</el-button> &ndash;&gt;-->
<!-- <HaiLinTable-->
<!-- :items="haiLinNewsList"-->
<!-- :show-image="true"-->
<!-- :show-title="true"-->
<!-- :show-subtitle="true"-->
<!-- :show-date="true"-->
<!-- :show-link="true"-->
<!-- :show-status="true"-->
<!-- :show-id="true"-->
<!-- :show-actions="true"-->
<!-- @selection-change="handleSelectionChange"-->
<!-- @edit="editNews"-->
<!-- @delete="deleteNews"-->
<!-- @delete-selected="deleteSelectedNews"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination :total="haiLinNewsList.length" :page-size="pageSize" :current-page.sync="currentPage"-->
<!-- @change="handlePageChange('haiLinNews', $event)" />-->
<!-- &lt;!&ndash; <Pagination :current-page="currentPage.haiLinNews" :total="haiLinNewsList.length" @page-change="handlePageChange('haiLinNews', $event)" /> &ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- 关于海邻 Tab -->
<el-tab-pane label="关于海邻" name="haiLinImg">
<div class="section">
<!-- <h3>首页关于海邻</h3>
<el-button @click="openCreateImgDialog">新建首页关于海邻</el-button> -->
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 新闻弹窗 -->
<NewsDialog
:visible="newsDialogVisible"
:item="currentNewsItem"
:dialog-title="newsDialogTitle"
:show-title="true"
:show-subtitle="true"
:show-date="true"
:show-link="true"
:show-status="true"
:show-image="true"
@save="saveNews"
@upload="uploadNewsImage"
@update:visible="newsDialogVisible = $event" />
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
breadcrumbItems: [
{ title: '首页', to: '/' },
{ title: '首页海邻', to: '/home' }
],
haiLinNewsList: [
{
id: 1,
date: "04-08",
year: "2024",
title: "海邻科技总经理王仲仲入选'诚信之星'名单",
subtitle: "'诚信之星'是由科尔沁区委宣传部、区文明办、区发改委联合开展的诚信评选活动。",
img: require("@/assets/DynamicData/SVG/资源 1.png"),
isMain: true,
link:'https://mp.weixin.qq.com/s/VV-Cv5_hpVv7nxl_qxpnwA',
status: '展示中', checked: false,
},
{
id: 2,
date: "04-13",
year: "2025",
title: "颐和论坛将于4月15-17日在青岛鑫江温德姆酒店盛大举办欢迎行业同仁前来参会交流",
isMain: false,
link:' https://mp.weixin.qq.com/s/w5UJy3oJG9Ka02g_UnVcOw',
status: '展示中', checked: false,
},
{
id: 3,
date: "03-27",
year: "2025",
title: "动态加速业态重构，饲用氨基酸新视界——2025中国氨基酸与饲料原料应用研讨会盛大开幕",
isMain: false,
link:' https://live.photoplus.cn/live/pc/36005100/#/live ',
status: '展示中', checked: false,
},
{
id: 4,
date: "04-08",
year: "2024",
title: "【金台资讯】通辽市科尔沁区：完善三大产业基地升级 带动龙头产业集群发展",
isMain: false,
link:' https://mp.weixin.qq.com/s/o_JrPRUL3x-UULYCkTvPEQ',
status: '展示中', checked: false,
},
],
haiLinImgList: [
// {
// id: 1,
// alt: "haiLin",
// img: require("@/assets/DynamicData/SVG/资源 1.png"),
// status: '展示中',
// checked: false,
// },
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.type === 80);
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
//1
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
//1
saveNews(data) {
const index = this.haiLinNewsList.findIndex(i => i.id === data.id);
if (index > -1) {
this.haiLinNewsList.splice(index, 1, data);
} else {
this.haiLinNewsList.push(data);
}
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
name: '',
status: 'enabled',
sequence: this.haiLinImgList.length + 1,
img: '',
link:'',
type: 80,
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
link:item.link,
img: item.img,
type: 80
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await bannerEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await bannerCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
// async saveImg() {
// try {
// // 表单验证
// // await this.$refs.editForm.validate();
// console.log(this.currentImgItem.id);
// console.log(this.currentImgItem.name);
// if (this.currentImgItem.id) {
// // 编辑操作
// await bannerEdit(this.currentImgItem.id, this.currentImgItem);
// this.$message.success('修改成功');
// } else {
// // 创建操作
// await bannerCreate(this.currentImgItem);
// this.$message.success('创建成功');
// }
// this.imgDialogVisible = false;
// this.getBanner();
// } catch (error) {
// if (error !== 'cancel') {
// console.error('保存失败:', error);
// }
// }
// // const index = this.haiLinImgList.findIndex(i => i.id === data.id);
// // if (index > -1) {
// // this.haiLinImgList.splice(index, 1, data);
// // } else {
// // this.haiLinImgList.push(data);
// // }
//
// },
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadNewsImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>

758
hailin_web/src/views/picture/honor.vue Normal file
View File

@ -0,0 +1,758 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="企业荣誉" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.type === 80);
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
name: '',
status: 'enabled',
sequence: this.haiLinImgList.length + 1,
img: '',
link:'',
type: 80,
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
link:item.link,
img: item.img,
type: 80
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await bannerEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await bannerCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
<!--<template>-->
<!-- <div class="honor">-->
<!-- <Breadcrumb :items="breadcrumbItems" style="display: none;" />-->
<!-- <el-tabs v-model="activeTab" type="card" >-->
<!-- <el-tab-pane label="企业荣誉" name="haiLinNews" >-->
<!-- <div class="itemTop">-->
<!-- &lt;!&ndash; <h3>科研成果</h3> &ndash;&gt;-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="createNewHonor">新建成果</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedHonor">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <HaiLinTable-->
<!-- :items="honor"-->
<!-- :show-image="true"-->
<!-- :show-title="true"-->
<!-- :show-status="true"-->
<!-- :show-id="true"-->
<!-- :show-actions="true"-->
<!-- @selection-change="honorSelectionChange"-->
<!-- @edit="handleEdit"-->
<!-- @delete="handleDelete"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination-->
<!-- :total="honor.length"-->
<!-- :page-size="pageSize"-->
<!-- :current-page.sync="currentPage"-->
<!-- @change="handlePageChange" />-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- <el-dialog-->
<!-- title="编辑荣誉"-->
<!-- :visible.sync="honorDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelHonorEdit"-->
<!-- >-->
<!-- <el-form :model="editHonorForm" label-width="100px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="editHonorForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editHonorForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editHonorForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="荣誉图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadHonor">-->
<!-- <img v-if="editHonorForm.img" :src="editHonorForm.img" class="honor-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelHonorEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveHonorEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建企业荣誉弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建企业荣誉"-->
<!-- :visible.sync="createHonorDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelCreateHonor"-->
<!-- >-->
<!-- <el-form :model="createHonorForm" label-width="100px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="createHonorForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createHonorForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createHonorForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="荣誉图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreate">-->
<!-- <img v-if="createHonorForm.img" :src="createHonorForm.img" class="honor-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateHonor">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateHonor">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import Breadcrumb from '@/common/breadcrumb.vue';-->
<!--import Pagination from '@/common/pagination.vue';-->
<!--import HaiLinTable from '@/common/table.vue';-->
<!--export default {-->
<!-- name: 'honor',-->
<!-- components: { Breadcrumb, Pagination,HaiLinTable },-->
<!-- data(){-->
<!-- return{-->
<!-- activeTab: 'haiLinNews', // 默认激活的 tab-->
<!-- breadcrumbItems: [-->
<!-- { title: '图片管理', to: '/' },-->
<!-- { title: '企业荣誉', to: '/home' }-->
<!-- ],-->
<!-- // 分页组件-->
<!-- currentPage: 1,-->
<!-- pageSize: 5,-->
<!-- currentEditItem: null,-->
<!-- dialogVisible: false,-->
<!-- createHonorDialogVisible: false, // 新建弹窗显示状态-->
<!-- honor:[-->
<!-- { id: 1, img: require('@/assets/HONOR/new/安全生产标准化.jpg'), title: '安全生产标准化三级企业(轻工)' , loaded: false,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 2, img: require('@/assets/HONOR/new/创新型中小企业.jpg'), title: '创新型中小企业' , loaded: false,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 3, img: require('@/assets/HONOR/new/创新型中小企业-01.jpg'), title: '创新型中小企业', loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 4, img: require('@/assets/HONOR/new/高新.jpg'), title: '高新技术企业' , loaded: false ,-->
<!-- checked: false,-->
<!-- status: '展示中',-->
<!-- },-->
<!-- { id: 5, img: require('@/assets/HONOR/new/光彩之星.jpg'), title: '通辽市"光彩之星"', loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 6, img: require('@/assets/HONOR/new/科学技术协会.jpg'), title: '科学技术协会' , loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 7, img: require('@/assets/HONOR/new/理事单位.jpg'), title: '内蒙古肉牛产业协会理事单位' , loaded: false,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 8, img: require('@/assets/HONOR/new/龙头.jpg'), title: '农牧业生产化重点龙头企业', loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 9, img: require('@/assets/HONOR/new/龙头企业.jpg'), title: '农牧业生产化市级重点龙头企业' , loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 10, img: require('@/assets/HONOR/new/先进集体.jpg'), title:'疫情防控先进集体', loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 11, img: require('@/assets/HONOR/new/专精.jpg'), title: '专精特新中小企业' , loaded: false ,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 12, img: require('@/assets/HONOR/new/自治区企业研究开发中心-01.jpg'), title: '自治区企业研究开发中心' , loaded: false,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- { id: 13, img: require('@/assets/HONOR/new/自治区战略性新兴产业发展支持项目.jpg'), title: '自治区战略性新兴产业发展支持项目' , loaded: false,-->
<!-- status: '展示中',-->
<!-- checked: false,-->
<!-- },-->
<!-- ],-->
<!-- // Add new data properties for honor editing-->
<!-- honorDialogVisible: false,-->
<!-- currentEditHonor: null,-->
<!-- editHonorForm: {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- },-->
<!-- createHonorForm: { // 新建表单数据-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- honorSelectionChange(val) {-->
<!-- this.honorImgSelection = val;-->
<!-- },-->
<!-- // 处理编辑按钮点击-->
<!-- handleEdit(item) {-->
<!-- this.editHonorForm = { ...item }; // 拷贝当前项数据到表单-->
<!-- this.honorDialogVisible = true;-->
<!-- },-->
<!-- // 处理删除按钮点击-->
<!-- handleDelete(item) {-->
<!-- this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.honor.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.honor.splice(index, 1);-->
<!-- this.$message.success('删除成功');-->
<!-- }-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 分页变化时触发-->
<!-- handlePageChange(page) {-->
<!-- this.currentPage = page;-->
<!-- },-->
<!-- //del选中honor-->
<!-- deleteSelectedHonor() {-->
<!-- // this.honor = this.honor.filter(item => !item.checked);-->
<!-- // this.selectHonorAll = false; // 取消全选状态-->
<!-- if (this.honorImgSelection.length === 0) {-->
<!-- this.$message.warning('请先选择要删除的轮播图');-->
<!-- return;-->
<!-- }-->
<!-- this.$confirm('确认删除选中的轮播图吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const selectedIds = this.honorImgSelection.map(item => item.id);-->
<!-- this.honor = this.honor.filter(item => !selectedIds.includes(item.id));-->
<!-- this.$message.success('删除成功');-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 编辑荣誉-->
<!-- editHonor(item) {-->
<!-- this.currentEditHonor = item;-->
<!-- this.editHonorForm = {-->
<!-- name: item.name,-->
<!-- src: item.src,-->
<!-- status: item.status,-->
<!-- Id: item.Id,-->
<!-- loaded: item.loaded-->
<!-- };-->
<!-- this.honorDialogVisible = true;-->
<!-- },-->
<!-- // 删除荣誉-->
<!-- deleteHonor(item) {-->
<!-- this.$confirm('确认删除该荣誉吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.honor.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.honor.splice(index, 1);-->
<!-- }-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '删除成功!'-->
<!-- });-->
<!-- }).catch(() => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: '已取消删除'-->
<!-- });-->
<!-- });-->
<!-- },-->
<!-- // 保存荣誉编辑-->
<!-- saveHonorEdit() {-->
<!-- if (!this.editHonorForm.title) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- const index = this.honor.findIndex(h => h.id === this.editHonorForm.id);-->
<!-- if (index > -1) {-->
<!-- this.$set(this.honor, index, {-->
<!-- ...this.honor[index],-->
<!-- ...this.editHonorForm-->
<!-- });-->
<!-- this.honorDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '保存成功!'-->
<!-- });-->
<!-- }-->
<!-- // const index = this.honor.indexOf(this.currentEditHonor);-->
<!-- // if (index > -1) {-->
<!-- // this.honor[index] = {-->
<!-- // ...this.currentEditHonor,-->
<!-- // ...this.editHonorForm-->
<!-- // };-->
<!-- // }-->
<!-- //-->
<!-- // this.honorDialogVisible = false;-->
<!-- // this.$message({-->
<!-- // type: 'success',-->
<!-- // message: '保存成功!'-->
<!-- // });-->
<!-- },-->
<!-- // 取消荣誉编辑-->
<!-- cancelHonorEdit() {-->
<!-- this.honorDialogVisible = false;-->
<!-- this.currentEditHonor = null;-->
<!-- this.editHonorForm = {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 处理荣誉图片上传-->
<!-- beforeAvatarUploadHonor(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.editHonorForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- // 打开新建弹窗-->
<!-- createNewHonor() {-->
<!-- this.createHonorDialogVisible = true;-->
<!-- this.createHonorForm = {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: this.honor.length + 1,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 取消新建-->
<!-- cancelCreateHonor() {-->
<!-- this.createHonorDialogVisible = false;-->
<!-- this.createHonorForm = {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 保存新建-->
<!-- saveCreateHonor() {-->
<!-- if (!this.createHonorForm.title) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- // 添加新的企业荣誉数据-->
<!-- this.honor.push({-->
<!-- ...this.createHonorForm,-->
<!-- checked: false-->
<!-- });-->
<!-- this.createHonorDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '新建成功!'-->
<!-- });-->
<!-- },-->
<!-- // 处理新建图片上传-->
<!-- beforeAvatarUploadCreate(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.createHonorForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- selectHonorAll(newVal) {-->
<!-- this.honor.forEach(item => item.checked = newVal);-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- // 计算属性判断是否"全部被选中"-->
<!-- selectHonorAll: {-->
<!-- get() {-->
<!-- return this.honor.length > 0 && this.honor.every(item => item.checked);-->
<!-- },-->
<!-- set(value) {-->
<!-- // 如果当前是全选状态，再次点击时 value 为 false，则全部取消-->
<!-- this.honor.forEach(item => {-->
<!-- item.checked = value;-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.Banner {-->
<!-- padding: 20px;-->
<!--}-->
<!--.itemTop {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-bottom: 20px;-->
<!-- .button-group {-->
<!-- display: flex;-->
<!-- gap: 10px;-->
<!-- }-->
<!--}-->
<!--.pagination-wrapper {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-top: 20px;-->
<!--}-->
<!--.BannerImg {-->
<!-- width: 100px;-->
<!-- height: 60px;-->
<!-- object-fit: cover;-->
<!--}-->
<!--.status {-->
<!-- color: #999;-->
<!--}-->
<!--.status.active {-->
<!-- color: green;-->
<!--}-->
<!--.avatar-uploader .el-upload {-->
<!-- border: 1px dashed #d9d9d9;-->
<!-- border-radius: 6px;-->
<!-- cursor: pointer;-->
<!-- position: relative;-->
<!-- overflow: hidden;-->
<!-- img{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- }-->
<!--}-->
<!--.avatar-uploader .el-upload:hover {-->
<!-- border-color: #409EFF;-->
<!--}-->
<!--.avatar-uploader-icon {-->
<!-- font-size: 28px;-->
<!-- color: #8c939d;-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- line-height: 178px;-->
<!-- text-align: center;-->
<!--}-->
<!--.avatar {-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- display: block;-->
<!--}-->
<!--</style>-->

367
hailin_web/src/views/picture/index.vue Normal file
View File

@ -0,0 +1,367 @@
<template>
<div class="Banner">
<!-- 面包屑导航 -->
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<el-tabs v-model="activeTab" type="card" >
<el-tab-pane label="首页轮播图海邻" name="haiLinNews" >
<!-- 表头 -->
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelected">批量删除</el-button>
</div>
</div>
<!-- 数据表格 -->
<el-table :data="carouselData" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="80" ></el-table-column>
<el-table-column label="图片" width="150">
<template slot-scope="{ row }">
<img :src="row.img" alt="轮播图" class="BannerImg" />
</template>
</el-table-column>
<el-table-column prop="name" label="标题" ></el-table-column>
<el-table-column prop="status" label="状态" width="200">
<template slot-scope="{ row }">
<el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
{{ row.status === 'enabled' ? '展示中' : '未展示' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="sequence" label="顺序" width="80"></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="{ row }">
<el-button size="mini" @click="editBanner(row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteBanner(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination
:total="carouselData.length"
:page-size="pageSize"
:current-page.sync="currentPage"
@change="handlePageChange" />
</div>
</el-tab-pane>
</el-tabs>
<!-- 编辑弹窗 -->
<el-dialog :title="editBannerForm.id ? '编辑轮播图' : '新建轮播图'" :visible.sync="dialogVisible" width="50%" @close="resetEditForm">
<el-form ref="editForm" :model="editBannerForm" label-width="80px" :rules="rules">
<el-form-item label="名称" prop="name">
<el-input v-model="editBannerForm.name"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="editBannerForm.status" placeholder="请选择状态">
<el-option label="展示中" value="enabled"></el-option>
<el-option label="未展示" value="disabled"></el-option>
</el-select>
</el-form-item>
<el-form-item label="顺序" prop="sequence">
<el-input-number v-model.number="editBannerForm.sequence" :min="1" :max="10"></el-input-number>
</el-form-item>
<!-- <el-form-item label="图片" prop="img">-->
<!-- <el-upload class="avatar-uploader" action="#" :show-file-list="false"-->
<!-- :before-upload="(file) => beforeUpload(file, 'edit')">-->
<!-- <img v-if="editBannerForm.img" :src="editBannerForm.img" class="avatar" />-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<el-form-item label="图片" prop="sequence">
<el-input v-model="editBannerForm.img" :min="1" :max="10"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveBanner">保存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Breadcrumb from '@/common/breadcrumb.vue';
import Pagination from '@/common/pagination.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
name: 'Banner',
components: { Breadcrumb, Pagination },
data() {
const validateImage = (rule, value, callback) => {
if (!value) {
return callback(new Error('请上传图片'));
}
callback();
};
return {
activeTab: 'haiLinNews', // 默认激活的 tab
multipleSelection: [] ,// 存储当前选中的项
loading: true, // 添加加载状态
// 面包屑导航组件
breadcrumbItems: [
{ title: '首页', to: '/picture/banner' },
{ title: '首页轮播图', to: '/picture/banner' }
],
// 分页组件
currentPage: 1,
pageSize: 5,
carouselData: [],
dialogVisible: false,
editBannerForm: {
id: '',
name: '',
status: '',
sequence: 1,
img: '',
type: 80
},
rules: {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
sequence: [{ required: true, message: '请输入顺序', trigger: 'blur' }],
img: [{ required: true, validator: validateImage, trigger: 'change' }]
}
};
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.carouselData.slice(start, end);
}
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.carouselData = res.data.filter(item => item.type === 80);
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
// 处理选中项变化
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 批量删除
async deleteSelected() {
if (this.multipleSelection.length === 0) {
this.$message.warning('请先选择要删除的轮播图');
return;
}
try {
await this.$confirm('确认删除选中的轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
const deleteIds = this.multipleSelection.map(item => item.id);
// 调用批量删除接口
for (const id of deleteIds) {
await bannerDel({ id });
}
this.$message.success('批量删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('批量删除失败:', error);
this.$message.error('批量删除失败');
}
}
},
// 删除单个轮播图
async deleteBanner(item) {
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
// console.log('idDEL', item.id);
// await bannerDel({ id: item.id } );
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
// 打开编辑弹窗
editBanner(item) {
this.editBannerForm = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
img: item.img,
type: 80
};
this.dialogVisible = true;
},
// 打开创建弹窗
openCreateDialog() {
this.editBannerForm = {
id: '',
name: '',
status: 'enabled',
sequence: this.carouselData.length + 1,
img: '',
type: 80
};
this.dialogVisible = true;
},
// 保存轮播图（创建/编辑）
async saveBanner() {
try {
// 表单验证
// await this.$refs.editForm.validate();
if (this.editBannerForm.id) {
// 编辑操作
await bannerEdit(this.editBannerForm.id, this.editBannerForm);
this.$message.success('修改成功');
} else {
// 创建操作
await bannerCreate(this.editBannerForm);
this.$message.success('创建成功');
}
this.dialogVisible = false;
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
}
}
},
// 重置表单
resetEditForm() {
this.$refs.editForm.resetFields();
},
// 图片上传处理
// beforeUpload(file, type) {
// const isImage = file.type.includes('image/');
// const isLt2M = file.size / 1024 / 1024 < 2;
//
// if (!isImage) {
// this.$message.error('只能上传图片文件!');
// return false;
// }
// if (!isLt2M) {
// this.$message.error('图片大小不能超过 2MB!');
// return false;
// }
//
// const reader = new FileReader();
// reader.onload = (e) => {
// this.editBannerForm.img = e.target.result;
// // 手动触发表单验证
// this.$refs.editForm.validateField('img');
// };
// reader.readAsDataURL(file);
//
// return false;
// },
// 分页变化处理
handlePageChange(page) {
this.currentPage = page;
}
},
mounted() {
this.getBanner();
}
};
</script>
<style lang="less" scoped>
.Banner {
padding: 0;
}
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.BannerImg {
width: 100px;
height: 60px;
object-fit: cover;
}
.status {
color: #999;
}
.status.active {
color: green;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

238
hailin_web/src/views/picture/scientific.vue Normal file
View File

@ -0,0 +1,238 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="科研成果" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.type === 80);
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
name: '',
status: 'enabled',
sequence: this.haiLinImgList.length + 1,
img: '',
link:'',
type: 80,
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
link:item.link,
img: item.img,
type: 80
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await bannerEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await bannerCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>

679
hailin_web/src/views/picture/talent.vue Normal file
View File

@ -0,0 +1,679 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="人才中心" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.type === 80);
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
name: '',
status: 'enabled',
sequence: this.haiLinImgList.length + 1,
img: '',
link:'',
type: 80,
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
link:item.link,
img: item.img,
type: 80
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await bannerEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await bannerCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
<!--<template>-->
<!--<div class="talent">-->
<!-- <Breadcrumb :items="breadcrumbItems" style="display: none;" />-->
<!-- <el-tabs v-model="activeTab" type="card" >-->
<!-- <el-tab-pane label="人才中心" name="haiLinNews" >-->
<!-- <div class="itemTop">-->
<!-- &lt;!&ndash; <h3>科研成果</h3> &ndash;&gt;-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="createNewHonor">新建人才</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedHonor">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <HaiLinTable-->
<!-- :items="honor"-->
<!-- :show-image="true"-->
<!-- :show-status="true"-->
<!-- :show-id="true"-->
<!-- :show-actions="true"-->
<!-- @edit="handleEdit"-->
<!-- @selection-change="talentSelectionChange"-->
<!-- @delete="handleDelete"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination-->
<!-- :total="honor.length"-->
<!-- :page-size="pageSize"-->
<!-- :current-page.sync="currentPage"-->
<!-- @change="handlePageChange" />-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- <el-dialog-->
<!-- title="编辑荣誉"-->
<!-- :visible.sync="honorDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelHonorEdit"-->
<!-- >-->
<!-- <el-form :model="editHonorForm" label-width="100px">-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editHonorForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editHonorForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="荣誉图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadHonor">-->
<!-- <img v-if="editHonorForm.img" :src="editHonorForm.img" class="honor-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelHonorEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveHonorEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建企业荣誉弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建企业荣誉"-->
<!-- :visible.sync="createHonorDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelCreateHonor"-->
<!-- >-->
<!-- <el-form :model="createHonorForm" label-width="100px">-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createHonorForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createHonorForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="荣誉图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreate">-->
<!-- <img v-if="createHonorForm.img" :src="createHonorForm.img" class="honor-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateHonor">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateHonor">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import Breadcrumb from '@/common/breadcrumb.vue';-->
<!--import Pagination from '@/common/pagination.vue';-->
<!--import HaiLinTable from '@/common/table.vue';-->
<!--export default {-->
<!-- name: 'talent',-->
<!-- components: { Breadcrumb, Pagination,HaiLinTable },-->
<!-- data(){-->
<!-- return{-->
<!-- activeTab: 'haiLinNews', // 默认激活的 tab-->
<!-- breadcrumbItems: [-->
<!-- { title: '图片管理', to: '/' },-->
<!-- { title: '人才中心', to: '/home' }-->
<!-- ],-->
<!-- // 分页组件-->
<!-- currentPage: 1,-->
<!-- pageSize: 5,-->
<!-- currentEditItem: null,-->
<!-- dialogVisible: false,-->
<!-- createHonorDialogVisible: false, // 新建弹窗显示状态-->
<!-- honor: [-->
<!-- { id: 1, img: require('@/assets/Talent/huanjing/01.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 2, img: require('@/assets/Talent/huanjing/02.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 3, img: require('@/assets/Talent/huanjing/03.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 4, img: require('@/assets/Talent/huanjing/04.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 5, img: require('@/assets/Talent/huanjing/05.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 6, img: require('@/assets/Talent/huanjing/06.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 7, img: require('@/assets/Talent/huanjing/07.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- { id: 8, img: require('@/assets/Talent/huanjing/08.png'), loaded: false ,status: '展示中', checked: false,},-->
<!-- ],-->
<!-- // Add new data properties for honor editing-->
<!-- honorDialogVisible: false,-->
<!-- currentEditHonor: null,-->
<!-- editHonorForm: {-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- },-->
<!-- createHonorForm: { // 新建表单数据-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- talentSelectionChange(val){-->
<!-- this.talentsImgSelection = val;-->
<!-- },-->
<!-- // 处理编辑按钮点击-->
<!-- handleEdit(item) {-->
<!-- console.log("===itme",item)-->
<!-- this.editHonorForm = { ...item }; // 拷贝当前项数据到表单-->
<!-- this.honorDialogVisible = true;-->
<!-- },-->
<!-- // 处理删除按钮点击-->
<!-- handleDelete(item) {-->
<!-- this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.honor.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.honor.splice(index, 1);-->
<!-- this.$message.success('删除成功');-->
<!-- }-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 分页变化时触发-->
<!-- handlePageChange(page) {-->
<!-- this.currentPage = page;-->
<!-- },-->
<!-- //del选中honor-->
<!-- deleteSelectedHonor() {-->
<!-- // this.honor = this.honor.filter(item => !item.checked);-->
<!-- // this.selectHonorAll = false; // 取消全选状态-->
<!-- if (this.talentsImgSelection.length === 0) {-->
<!-- this.$message.warning('请先选择要删除的轮播图');-->
<!-- return;-->
<!-- }-->
<!-- this.$confirm('确认删除选中的轮播图吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const selectedIds = this.talentsImgSelection.map(item => item.id);-->
<!-- this.honor = this.honor.filter(item => !selectedIds.includes(item.id));-->
<!-- this.$message.success('删除成功');-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 删除荣誉-->
<!-- deleteHonor(item) {-->
<!-- this.$confirm('确认删除该荣誉吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.honor.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.honor.splice(index, 1);-->
<!-- }-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '删除成功!'-->
<!-- });-->
<!-- }).catch(() => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: '已取消删除'-->
<!-- });-->
<!-- });-->
<!-- },-->
<!-- // 保存荣誉编辑-->
<!-- saveHonorEdit() {-->
<!-- if (!this.editHonorForm.id) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- const index = this.honor.findIndex(h => h.id === this.editHonorForm.id);-->
<!-- if (index > -1) {-->
<!-- this.$set(this.honor, index, {-->
<!-- ...this.honor[index],-->
<!-- ...this.editHonorForm-->
<!-- });-->
<!-- this.honorDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '保存成功!'-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- // 取消荣誉编辑-->
<!-- cancelHonorEdit() {-->
<!-- this.honorDialogVisible = false;-->
<!-- this.currentEditHonor = null;-->
<!-- this.editHonorForm = {-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 处理荣誉图片上传-->
<!-- beforeAvatarUploadHonor(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.editHonorForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- // 打开新建弹窗-->
<!-- createNewHonor() {-->
<!-- this.createHonorDialogVisible = true;-->
<!-- this.createHonorForm = {-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: this.honor.length + 1,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 取消新建-->
<!-- cancelCreateHonor() {-->
<!-- this.createHonorDialogVisible = false;-->
<!-- this.createHonorForm = {-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: null,-->
<!-- loaded: false-->
<!-- };-->
<!-- },-->
<!-- // 保存新建-->
<!-- saveCreateHonor() {-->
<!-- if (!this.createHonorForm.id) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- // 添加新的企业荣誉数据-->
<!-- this.honor.push({-->
<!-- ...this.createHonorForm,-->
<!-- checked: false-->
<!-- });-->
<!-- this.createHonorDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '新建成功!'-->
<!-- });-->
<!-- },-->
<!-- // 处理新建图片上传-->
<!-- beforeAvatarUploadCreate(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- this.createHonorForm.img = e.target.result;-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- selectHonorAll(newVal) {-->
<!-- this.honor.forEach(item => item.checked = newVal);-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- // 计算属性判断是否"全部被选中"-->
<!-- selectHonorAll: {-->
<!-- get() {-->
<!-- return this.honor.length > 0 && this.honor.every(item => item.checked);-->
<!-- },-->
<!-- set(value) {-->
<!-- // 如果当前是全选状态，再次点击时 value 为 false，则全部取消-->
<!-- this.honor.forEach(item => {-->
<!-- item.checked = value;-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.Banner {-->
<!-- padding: 20px;-->
<!--}-->
<!--.itemTop {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-bottom: 20px;-->
<!-- .button-group {-->
<!-- display: flex;-->
<!-- gap: 10px;-->
<!-- }-->
<!--}-->
<!--.pagination-wrapper {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-top: 20px;-->
<!--}-->
<!--.BannerImg {-->
<!-- width: 100px;-->
<!-- height: 60px;-->
<!-- object-fit: cover;-->
<!--}-->
<!--.status {-->
<!-- color: #999;-->
<!--}-->
<!--.status.active {-->
<!-- color: green;-->
<!--}-->
<!--.avatar-uploader .el-upload {-->
<!-- border: 1px dashed #d9d9d9;-->
<!-- border-radius: 6px;-->
<!-- cursor: pointer;-->
<!-- position: relative;-->
<!-- overflow: hidden;-->
<!-- img{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- }-->
<!--}-->
<!--.avatar-uploader .el-upload:hover {-->
<!-- border-color: #409EFF;-->
<!--}-->
<!--.avatar-uploader-icon {-->
<!-- font-size: 28px;-->
<!-- color: #8c939d;-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- line-height: 178px;-->
<!-- text-align: center;-->
<!--}-->
<!--.avatar {-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- display: block;-->
<!--}-->
<!--</style>-->

725
hailin_web/src/views/picture/team.vue Normal file
View File

@ -0,0 +1,725 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" style="display: none;" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card" >
<!-- 首页海邻 Tab -->
<el-tab-pane label="团队风采" name="haiLinImg">
<div class="section">
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateImgDialog">新建图片</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteImgSelected">批量删除</el-button>
</div>
</div>
<HaiLinTable
:items="haiLinImgList"
:show-image="true"
:show-title="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@selection-change="handleSelectionChange"
@edit="editImg"
@delete="deleteImg"
@delete-selected="deleteSelectedImg"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinImgList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<Pagination :current-page="currentPage.haiLinImg" :total="haiLinImgList.length" @page-change="handlePageChange('haiLinImg', $event)" />
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import { banner, bannerCreate, bannerEdit, bannerDel } from "@/utils/api"; //引入接口请求
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination },
data() {
return {
multipleSelection: [], // 存储当前选中的项
haiLinNewsSelection: [], // 存储首页海邻选中的项
haiLinImgSelection: [], // 存储关于海邻选中的项
activeTab: 'haiLinImg', // 默认激活的 tab
haiLinImgList: [
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {
},
newsDialogTitle: '',
imgDialogTitle: ''
};
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await banner({});
if (res.success) {
this.haiLinImgList = res.data.filter(item => item.type === 80);
// console.log(this.haiLinImgList)
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
handleSelectionChange(val) {
if (this.activeTab === 'haiLinNews') {
this.haiLinNewsSelection = val;
} else if (this.activeTab === 'haiLinImg') {
this.haiLinImgSelection = val;
}
},
// 删除选中的haiLin图
async deleteImgSelected(){
// this.$confirm('确认删除选中的轮播图吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const selectedIds = this.haiLinImgSelection.map(item => item.id);
// this.haiLinImgList = this.haiLinImgList.filter(item => !selectedIds.includes(item.id));
// this.$message.success('删除成功');
// }).catch(() => {
// this.$message.info('已取消删除');
// });
},
openCreateImgDialog() {
console.log(this.haiLinImgList.length);
this.currentImgItem = {
id:'',
name: '',
status: 'enabled',
sequence: this.haiLinImgList.length + 1,
img: '',
link:'',
type: 80,
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = {
id: item.id,
name: item.name,
status: item.status,
sequence: item.sequence,
link:item.link,
img: item.img,
type: 80
};
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
async saveImg(formData) { // 直接从子组件接收完整数据
try {
// 更新当前项
this.currentImgItem = {...formData};
if (this.currentImgItem.id) {
await bannerEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await bannerCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async deleteImg(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
await bannerDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
</style>
<!--<template>-->
<!-- <div class="team">-->
<!-- <Breadcrumb :items="breadcrumbItems" style="display: none;" />-->
<!-- <el-tabs v-model="activeTab" type="card" >-->
<!-- <el-tab-pane label="团队风采" name="haiLinNews" >-->
<!-- <div class="itemTop">-->
<!-- &lt;!&ndash; <h3>科研成果</h3> &ndash;&gt;-->
<!-- <div class="itemTop">-->
<!-- <div class="button-group">-->
<!-- <el-button type="primary" icon="el-icon-edit" plain @click="createNewAllAlbums">团队风采</el-button>-->
<!-- <el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedAllAlbums">批量删除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <HaiLinTable-->
<!-- :items="allAlbums"-->
<!-- :show-image="true"-->
<!-- :show-title="true"-->
<!-- :show-status="true"-->
<!-- :show-id="true"-->
<!-- :show-actions="true"-->
<!-- @selection-change="honorSelectionChange"-->
<!-- @edit="handleEdit"-->
<!-- @delete="handleDelete"-->
<!-- />-->
<!-- &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!-- <div class="pagination-wrapper">-->
<!-- <Pagination-->
<!-- :total="allAlbums.length"-->
<!-- :page-size="pageSize"-->
<!-- :current-page.sync="currentPage"-->
<!-- @change="handlePageChange" />-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<!-- <el-dialog-->
<!-- title="编辑团队风采"-->
<!-- :visible.sync="allAlbumsDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelAllAlbumsEdit"-->
<!-- >-->
<!-- <el-form :model="editAllAlbumsForm" label-width="100px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="editAllAlbumsForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editAllAlbumsForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editAllAlbumsForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="团队风采图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadAllAlbums">-->
<!-- <img v-if="editAllAlbumsForm.img" :src="editAllAlbumsForm.img" class="album-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelAllAlbumsEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveAllAlbumsEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建团队风采弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建团队风采"-->
<!-- :visible.sync="createAllAlbumsDialogVisible"-->
<!-- width="50%"-->
<!-- :before-close="cancelCreateAllAlbums"-->
<!-- >-->
<!-- <el-form :model="createAllAlbumsForm" label-width="100px">-->
<!-- <el-form-item label="标题">-->
<!-- <el-input v-model="createAllAlbumsForm.title"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createAllAlbumsForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createAllAlbumsForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="团队风采图片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreate">-->
<!-- <img v-if="createAllAlbumsForm.img" :src="createAllAlbumsForm.img" class="album-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateAllAlbums">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateAllAlbums">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import Breadcrumb from '@/common/breadcrumb.vue';-->
<!--import Pagination from '@/common/pagination.vue';-->
<!--import HaiLinTable from '@/common/table.vue';-->
<!--export default {-->
<!-- name: 'team',-->
<!-- components: { Breadcrumb, Pagination,HaiLinTable },-->
<!-- data(){-->
<!-- return{-->
<!-- activeTab: 'haiLinNews', // 默认激活的 tab-->
<!-- breadcrumbItems: [-->
<!-- { title: '图片管理', to: '/' },-->
<!-- { title: '团队风采', to: '/home' }-->
<!-- ],-->
<!-- // 分页组件-->
<!-- currentPage: 1,-->
<!-- pageSize: 5,-->
<!-- currentEditItem: null,-->
<!-- dialogVisible: false,-->
<!-- createAllAlbumsDialogVisible: false, // 新建弹窗显示状态-->
<!-- allAlbums: [-->
<!-- { id: 1, img: require('@/assets/team/SVG/迎新年.jpg'), title: '迎新年·庆元旦',status: '展示中', checked: false, },-->
<!-- { id: 2, img: require('@/assets/team/SVG/十周年庆典活动.jpg'), title: '员工生日会' ,status: '展示中', checked: false, },-->
<!-- { id: 3, img: require('@/assets/team/SVG/物流部户外团建.jpg'), title: '乌兰布统草原团建',status: '展示中', checked: false, },-->
<!-- { id: 4, img: require('@/assets/team/SVG/2024年医展活动.jpg'), title: '北京同仁堂义诊' ,status: '展示中', checked: false, },-->
<!-- { id: 5, img: require('@/assets/team/SVG/年度足球赛.jpg'), title: '"石榴籽杯"篮球赛' ,status: '展示中', checked: false, },-->
<!-- { id: 6, img: require('@/assets/team/SVG/2024年末团建活动.jpg'), title: '年末述职团建' ,status: '展示中', checked: false, },-->
<!-- ],-->
<!-- // Add new data properties for allAlbums editing-->
<!-- allAlbumsDialogVisible: false,-->
<!-- currentEditAlbum: null,-->
<!-- editAllAlbumsForm: {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '',-->
<!-- id: null-->
<!-- },-->
<!-- createAllAlbumsForm: { // 新建表单数据-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: null-->
<!-- },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- honorSelectionChange(val) {-->
<!-- this.honorImgSelection = val;-->
<!-- },-->
<!-- // 处理编辑按钮点击-->
<!-- handleEdit(item) {-->
<!-- this.editAllAlbumsForm = { ...item }; // 拷贝当前项数据到表单-->
<!-- this.allAlbumsDialogVisible = true;-->
<!-- },-->
<!-- // 处理删除按钮点击-->
<!-- handleDelete(item) {-->
<!-- this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.allAlbums.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.allAlbums.splice(index, 1);-->
<!-- this.$message.success('删除成功');-->
<!-- }-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 分页变化时触发-->
<!-- handlePageChange(page) {-->
<!-- this.currentPage = page;-->
<!-- },-->
<!-- //del选中allAlbums-->
<!-- deleteSelectedAllAlbums() {-->
<!-- // this.allAlbums = this.allAlbums.filter(item => !item.checked);-->
<!-- // this.selectAllAlbumsAll = false; // 取消全选状态-->
<!-- if (this.honorImgSelection.length === 0) {-->
<!-- this.$message.warning('请先选择要删除的轮播图');-->
<!-- return;-->
<!-- }-->
<!-- this.$confirm('确认删除选中的轮播图吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const selectedIds = this.honorImgSelection.map(item => item.id);-->
<!-- this.allAlbums = this.allAlbums.filter(item => !selectedIds.includes(item.id));-->
<!-- this.$message.success('删除成功');-->
<!-- }).catch(() => {-->
<!-- this.$message.info('已取消删除');-->
<!-- });-->
<!-- },-->
<!-- // 编辑团队风采-->
<!-- editAllAlbums(item) {-->
<!-- this.currentEditAlbum = item;-->
<!-- this.editAllAlbumsForm = {-->
<!-- title: item.title,-->
<!-- image: item.image,-->
<!-- status: item.status,-->
<!-- id: item.id-->
<!-- };-->
<!-- this.allAlbumsDialogVisible = true;-->
<!-- },-->
<!-- // 删除团队风采-->
<!-- deleteAllAlbums(item) {-->
<!-- this.$confirm('确认删除该团队风采吗?', '提示', {-->
<!-- confirmButtonText: '确定',-->
<!-- cancelButtonText: '取消',-->
<!-- type: 'warning'-->
<!-- }).then(() => {-->
<!-- const index = this.allAlbums.indexOf(item);-->
<!-- if (index > -1) {-->
<!-- this.allAlbums.splice(index, 1);-->
<!-- }-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '删除成功!'-->
<!-- });-->
<!-- }).catch(() => {-->
<!-- this.$message({-->
<!-- type: 'info',-->
<!-- message: '已取消删除'-->
<!-- });-->
<!-- });-->
<!-- },-->
<!-- // 保存团队风采编辑-->
<!-- saveAllAlbumsEdit() {-->
<!-- if (!this.editAllAlbumsForm.title) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- const index = this.allAlbums.findIndex(h => h.id === this.editAllAlbumsForm.id);-->
<!-- if (index > -1) {-->
<!-- this.$set(this.allAlbums, index, {-->
<!-- ...this.allAlbums[index],-->
<!-- ...this.editAllAlbumsForm-->
<!-- });-->
<!-- this.allAlbumsDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '保存成功!'-->
<!-- });-->
<!-- }-->
<!-- // if (index > -1) {-->
<!-- // // 保持原有的图片引用-->
<!-- // // const originalImage = this.currentEditAlbum.image;-->
<!-- // this.$set(this.allAlbums, index, {-->
<!-- // ...this.currentEditAlbum[index],-->
<!-- // ...this.editAllAlbumsForm,-->
<!-- // // image: originalImage // 保持原有的图片引用不变-->
<!-- // });-->
<!-- // this.allAlbumsDialogVisible = false;-->
<!-- // this.$message({-->
<!-- // type: 'success',-->
<!-- // message: '保存成功!'-->
<!-- // });-->
<!-- // }-->
<!-- },-->
<!-- // 取消团队风采编辑-->
<!-- cancelAllAlbumsEdit() {-->
<!-- this.allAlbumsDialogVisible = false;-->
<!-- this.currentEditAlbum = null;-->
<!-- this.editAllAlbumsForm = {-->
<!-- title: '',-->
<!-- img: null,-->
<!-- status: '',-->
<!-- id: null-->
<!-- };-->
<!-- },-->
<!-- // 处理团队风采图片上传-->
<!-- beforeAvatarUploadAllAlbums(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- return false;-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- return false;-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- // 使用FileReader来预览和保存图片-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- // 更新表单中的图片-->
<!-- this.editAllAlbumsForm.img = e.target.result;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '图片上传成功!'-->
<!-- });-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- // 打开新建弹窗-->
<!-- createNewAllAlbums() {-->
<!-- this.createAllAlbumsDialogVisible = true;-->
<!-- this.createAllAlbumsForm = {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: this.allAlbums.length + 1-->
<!-- };-->
<!-- },-->
<!-- // 取消新建-->
<!-- cancelCreateAllAlbums() {-->
<!-- this.createAllAlbumsDialogVisible = false;-->
<!-- this.createAllAlbumsForm = {-->
<!-- title: '',-->
<!-- img: '',-->
<!-- status: '展示中',-->
<!-- id: null-->
<!-- };-->
<!-- },-->
<!-- // 保存新建-->
<!-- saveCreateAllAlbums() {-->
<!-- if (!this.createAllAlbumsForm.title) {-->
<!-- this.$message.error('请填写完整信息');-->
<!-- return;-->
<!-- }-->
<!-- // 添加新的团队风采数据-->
<!-- this.allAlbums.push({-->
<!-- ...this.createAllAlbumsForm,-->
<!-- checked: false-->
<!-- });-->
<!-- this.createAllAlbumsDialogVisible = false;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '新建成功!'-->
<!-- });-->
<!-- },-->
<!-- // 处理新建图片上传-->
<!-- beforeAvatarUploadCreate(file) {-->
<!-- const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';-->
<!-- const isLt2M = file.size / 1024 / 1024 < 2;-->
<!-- if (!isJPG) {-->
<!-- this.$message.error('上传图片只能是 JPG/PNG 格式!');-->
<!-- return false;-->
<!-- }-->
<!-- if (!isLt2M) {-->
<!-- this.$message.error('上传图片大小不能超过 2MB!');-->
<!-- return false;-->
<!-- }-->
<!-- if (isJPG && isLt2M) {-->
<!-- // 使用FileReader来预览和保存图片-->
<!-- const reader = new FileReader();-->
<!-- reader.readAsDataURL(file);-->
<!-- reader.onload = (e) => {-->
<!-- // 更新表单中的图片-->
<!-- this.createAllAlbumsForm.img = e.target.result;-->
<!-- this.$message({-->
<!-- type: 'success',-->
<!-- message: '图片上传成功!'-->
<!-- });-->
<!-- };-->
<!-- }-->
<!-- return false;-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- selectAllAlbums(newVal) {-->
<!-- this.allAlbums.forEach(item => item.checked = newVal);-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- // 计算属性判断是否"全部被选中"-->
<!-- selectAllAlbumsAll: {-->
<!-- get() {-->
<!-- return this.allAlbums.length > 0 && this.allAlbums.every(item => item.checked);-->
<!-- },-->
<!-- set(value) {-->
<!-- // 如果当前是全选状态，再次点击时 value 为 false，则全部取消-->
<!-- this.allAlbums.forEach(item => {-->
<!-- item.checked = value;-->
<!-- });-->
<!-- }-->
<!-- },-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.Banner {-->
<!-- padding: 20px;-->
<!--}-->
<!--.itemTop {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-bottom: 20px;-->
<!-- .button-group {-->
<!-- display: flex;-->
<!-- gap: 10px;-->
<!-- }-->
<!--}-->
<!--.pagination-wrapper {-->
<!-- display: flex;-->
<!-- justify-content: flex-end;-->
<!-- margin-top: 20px;-->
<!--}-->
<!--.BannerImg {-->
<!-- width: 100px;-->
<!-- height: 60px;-->
<!-- object-fit: cover;-->
<!--}-->
<!--.status {-->
<!-- color: #999;-->
<!--}-->
<!--.status.active {-->
<!-- color: green;-->
<!--}-->
<!--.avatar-uploader .el-upload {-->
<!-- border: 1px dashed #d9d9d9;-->
<!-- border-radius: 6px;-->
<!-- cursor: pointer;-->
<!-- position: relative;-->
<!-- overflow: hidden;-->
<!-- img{-->
<!-- width: 100%;-->
<!-- height: 100%;-->
<!-- }-->
<!--}-->
<!--.avatar-uploader .el-upload:hover {-->
<!-- border-color: #409EFF;-->
<!--}-->
<!--.avatar-uploader-icon {-->
<!-- font-size: 28px;-->
<!-- color: #8c939d;-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- line-height: 178px;-->
<!-- text-align: center;-->
<!--}-->
<!--.avatar {-->
<!-- width: 178px;-->
<!-- height: 178px;-->
<!-- display: block;-->
<!--}-->
<!--</style>-->

721
hailin_web/src/views/product.vue Normal file
View File

@ -0,0 +1,721 @@
<template>
<div class="history">
<div class="itemTop">
<div class="button-group">
<el-button style="margin-left: 0;margin-bottom: 12px" type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>
<el-button style="margin-left: 0" icon="el-icon-refresh" @click="resetFilters">重置</el-button>
</div>
<div class="search-bar">
<el-form :model="filters" :inline="true" label-width="80px">
<el-form-item label="饲料原料">
<div class="custom-input-group">
<el-select v-model="filters.category" placeholder="请选择类别分类" style="width: 100%" @change="handleCategoryChange">
<el-option
v-for="cat in categoryList"
:key="cat"
:label="cat"
:value="cat"
></el-option>
</el-select>
<el-input
v-model="customCategory"
placeholder="输入自定义类别"
class="custom-input"
style="display: none"
>
<template #append>
<el-button @click="addCustomCategory">添加</el-button>
</template>
</el-input>
</div>
</el-form-item>
<el-form-item label="适用类型">
<div class="custom-input-group">
<el-select v-model="filters.feedstuff" placeholder="请先选择类别" style="width: 100%" :disabled="!filters.category">
<el-option
v-for="item in feedstuffOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
<el-input
v-model="customFeedstuff"
placeholder="输入自定义适用类型"
class="custom-input"
:disabled="!filters.category"
style="display: none"
>
<template #append>
<el-button @click="addCustomFeedstuff">添加</el-button>
</template>
</el-input>
</div>
</el-form-item>
<!-- <el-form-item>-->
<!-- <el-button type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>-->
<!-- <el-button icon="el-icon-refresh" @click="resetFilters">重置</el-button>-->
<!-- </el-form-item>-->
</el-form>
</div>
<div class="button-group">
<el-button style="margin-left: 0;margin-bottom: 12px" type="primary" icon="el-icon-edit" plain @click="createNewDevelopAbout">新增产品</el-button>
<el-button style="margin-left: 0" type="danger" icon="el-icon-delete" plain @click="deleteSelectedDevelopAbout">批量删除</el-button>
</div>
</div>
<HaiLinTable :items="productList"
:show-productname="true"
:show-feedstuff="true"
:show-ingredients="true"
:show-product-img="true"
:show-product-suitable="true"
:show-product-standard="true"
:show-product-functional="true"
:show-category="true"
:show-actions="true"
@edit="handleEdit"
@delete="handleDelete" />
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="productList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange" />
</div>
<el-dialog title="编辑产品" :visible.sync="developAboutDialogVisible" width="50%" @close="cancelDevelopAboutEdit">
<el-form :model="editProduct" label-width="100px">
<!-- 饲料分类 -->
<el-form-item label="饲料原料">
<el-select v-model="editProduct.feedstuff" placeholder="请选择类别分类" style="width: 100%" @change="handleCategoryChange">
<el-option
v-for="cat in categoryList"
:key="cat"
:label="cat"
:value="cat"
></el-option>
</el-select>
</el-form-item>
<!-- 类别分类 -->
<el-form-item label="适用类型">
<el-select v-model="editProduct.category" placeholder="请先选择类别" style="width: 100%" :disabled="!filters.category">
<el-option
v-for="item in feedstuffOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
<!-- 名称 -->
<el-form-item label="名称">
<el-input v-model="editProduct.productname" placeholder="请输入名称"></el-input>
</el-form-item>
<!-- 原料组成 -->
<el-form-item label="原料组成">
<el-input v-model="editProduct.ingredients" placeholder="请输入原料组成"></el-input>
</el-form-item>
<!-- 产品图片 -->
<el-form-item label="产品图片">
<div class="image-uploader">
<el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisibleImage">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</el-form-item>
<!-- 适用对象 -->
<el-form-item label="适用对象">
<el-input v-model="editProduct.productsuitable" placeholder="请输入适用对象"></el-input>
</el-form-item>
<!-- 产品标准 -->
<el-form-item label="产品标准">
<div v-for="(standard, index) in editProduct.productstandard" :key="index" class="standard-item">
<el-input v-model="standard.value" placeholder="请输入产品标准"></el-input>
<el-button type="primary" @click="addStandard(index)" icon="el-icon-plus"></el-button>
</div>
</el-form-item>
<!-- 功能特点 -->
<el-form-item label="功能特点">
<div v-for="(feature, index) in editProduct.productfunctional" :key="index" class="standard-item">
<el-input v-model="feature.value" placeholder="请输入功能特点"></el-input>
<el-button type="primary" @click="addFeature(index)" icon="el-icon-plus"></el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDevelopAboutEdit">取 消</el-button>
<el-button type="primary" @click="saveDevelopAboutEdit">确 定</el-button>
</span>
</el-dialog>
<!-- 新增产品 -->
<el-dialog title="新增产品" :visible.sync="createDevelopAboutDialogVisible" width="50%"
@close="cancelCreateDevelopAbout">
<el-form :model="product" label-width="100px">
<!-- 饲料分类 -->
<el-form-item label="饲料原料">
<el-select v-model="product.feedstuff" placeholder="请选择类别分类" style="width: 100%" @change="handleCategoryChange">
<el-option
v-for="cat in categoryList"
:key="cat"
:label="cat"
:value="cat"
></el-option>
</el-select>
</el-form-item>
<!-- 类别分类 -->
<el-form-item label="适应类型">
<el-select v-model="product.category" placeholder="请先选择类别" style="width: 100%" :disabled="!filters.category">
<el-option
v-for="item in feedstuffOptions"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
<!-- 名称 -->
<el-form-item label="名称">
<el-input v-model="product.productname" placeholder="请输入名称"></el-input>
</el-form-item>
<!-- 原料组成 -->
<el-form-item label="原料组成">
<el-input v-model="product.ingredients" placeholder="请输入原料组成"></el-input>
</el-form-item>
<!-- 产品图片 -->
<el-form-item label="产品图片">
<div class="image-uploader">
<el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisibleImage">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</el-form-item>
<!-- 适用对象 -->
<el-form-item label="适用对象">
<el-input v-model="product.productsuitable" placeholder="请输入适用对象"></el-input>
</el-form-item>
<!-- 产品标准 -->
<el-form-item label="产品标准">
<div v-for="(standard, index) in product.productstandard" :key="index" class="standard-item">
<el-input v-model="standard.value" placeholder="请输入产品标准"></el-input>
<el-button type="primary" @click="addStandard(index)" icon="el-icon-plus"></el-button>
</div>
</el-form-item>
<!-- 功能特点 -->
<el-form-item label="功能特点">
<div v-for="(feature, index) in product.productfunctional" :key="index" class="standard-item">
<el-input v-model="feature.value" placeholder="请输入功能特点"></el-input>
<el-button type="primary" @click="addFeature(index)" icon="el-icon-plus"></el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDevelopAboutEdit">取 消</el-button>
<el-button type="primary" @click="saveDevelopAboutEdit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue';
import HaiLinTable from '@/common/table.vue';
export default {
name: 'history',
components: { Pagination, HaiLinTable },
data() {
return {
filters: {
// 产品原料
feedstuff: '',
// 类别分类
category: ''
},
// 所有一级分类
categoryList: ['产朊假丝酵母蛋白', '酿酒酵母培养物', '含可溶物的玉米干酒精糟','其他'],
// 每个一级分类下的子项
feedstuffMap: {
'产朊假丝酵母蛋白': ['猪', '禽', '水产'],
'酿酒酵母培养物': ['猪', '禽', '反刍'],
'含可溶物的玉米干酒精糟': ['猪', '禽', '反刍'],
'其他': ['肉鸭', '肉鹅'],
},
// 自定义类别和适用类型
customCategories: [], // 存储自定义类别
customFeedstuffs: [], // 存储自定义适用类型
// 输入框的值
customCategory: '',
customFeedstuff: '',
product: {
category: '',
feedstuff: '',
productname: '',
types: [],
ingredients: '',
productimg: [],
productsuitable:'',
productstandard: [{ value: '' }],
productfunctional: [{ value: '' }]
},
editProduct: {
category: '',
feedstuff: '',
productname: '',
types: [],
ingredients: '',
productimg: [],
productsuitable:'',
productstandard: [{ value: '' }],
productfunctional: [{ value: '' }]
},
productList:[
{id: 1,
category: '猪', //类别分类
productname: 'NFP50', //名称
feedstuff: '产朊假丝酵母蛋白', //饲料原料
ingredients: '玉米浸泡液等等。。。', //原料组成
productimg: false, //产品图片
productsuitable: '断奶猪崽', //适用对象
productstandard: '水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% ', //产品标准
productfunctional: '高酸溶蛋白 高蛋白消化率高苏氨酸无明显抗营养因子发酵处理 适口性佳', // 功能特点
},
{id: 2,
category: '鸭',
productname: 'NFP50',
feedstuff: '产朊假丝酵母蛋白',
ingredients: '玉米浸泡液等等。。。',
productimg: false,
productsuitable: '断奶猪崽',
productstandard: '水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% 水分<13% ',
productfunctional: '高酸溶蛋白 高蛋白消化率高苏氨酸无明显抗营养因子发酵处理 适口性佳',
},
],
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
createDevelopAboutDialogVisible: false, // 新建弹窗显示状态
developAboutDialogVisible: false,
currentEditDevelopAbout: null,
}
},
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisibleImage = true;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
addStandard(index) {
if (index === this.product.standards.length - 1) {
this.product.standards.push({ value: '' });
}
},
addFeature(index) {
if (index === this.product.features.length - 1) {
this.product.features.push({ value: '' });
}
},
saveProduct() {
// 这里可以添加保存逻辑
console.log('保存产品:', this.product);
this.dialogVisible = false;
},
handleCategoryChange() {
this.filters.feedstuff = ''; // 清空已选饲料原料
},
// 添加自定义类别
addCustomCategory() {
if (this.customCategory.trim()) {
if (!this.categoryList.includes(this.customCategory.trim())) {
this.categoryList.push(this.customCategory.trim());
this.filters.category = this.customCategory.trim();
this.customCategory = '';
this.$message.success('自定义类别添加成功');
} else {
this.$message.warning('该类别已存在');
}
} else {
this.$message.error('请输入有效的自定义类别');
}
},
// 添加自定义适用类型
addCustomFeedstuff() {
if (this.customFeedstuff.trim()) {
if (!this.feedstuffMap[this.filters.category]) {
this.feedstuffMap[this.filters.category] = [];
}
if (!this.feedstuffMap[this.filters.category].includes(this.customFeedstuff.trim())) {
this.feedstuffMap[this.filters.category].push(this.customFeedstuff.trim());
this.filters.feedstuff = this.customFeedstuff.trim();
this.customFeedstuff = '';
this.$message.success('自定义适用类型添加成功');
} else {
this.$message.warning('该适用类型已存在');
}
} else {
this.$message.error('请输入有效的自定义适用类型');
}
},
// 处理编辑按钮点击
handleEdit(item) {
this.editProduct = { ...item }; // 拷贝当前项数据到表单
this.developAboutDialogVisible = true;
},
// 处理删除按钮点击
handleDelete(item) {
this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.productList.indexOf(item);
if (index > -1) {
this.productList.splice(index, 1);
this.$message.success('删除成功');
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
//del选中teamMembers
deleteSelectedDevelopAbout() {
this.developAbout = this.developAbout.filter(item => !item.checked);
this.selectDevelopAboutAll = false; // 取消全选状态
},
editDevelopAboutItem(index) {
this.currentEditDevelopAbout = index;
const item = this.developAbout[index];
this.editDevelopAboutForm = {
year: item.year,
events: JSON.parse(JSON.stringify(item.events)), // 深拷贝events数组
status: item.status
};
this.developAboutDialogVisible = true;
},
deleteDevelopAboutItem(index) {
this.$confirm('确定要删除这条发展历程吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.developAbout.splice(index, 1);
this.$message.success('删除成功');
}).catch(() => { });
},
saveDevelopAboutEdit() {
if (!this.editDevelopAboutForm.year) {
this.$message.error('请输入年份');
return;
}
// 验证events数据
if (!this.editDevelopAboutForm.events.length) {
this.$message.error('请至少添加一个事件');
return;
}
for (const event of this.editDevelopAboutForm.events) {
if (!event.month) {
this.$message.error('请输入月份');
return;
}
if (!event.details.length || !event.details[0]) {
this.$message.error('请输入事件详情');
return;
}
}
if (this.currentEditDevelopAbout !== null) {
// 更新现有项
this.developAbout[this.currentEditDevelopAbout] = {
...this.developAbout[this.currentEditDevelopAbout],
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
};
} else {
// 添加新项
this.developAbout.push({
id: this.developAbout.length + 1,
year: this.editDevelopAboutForm.year,
events: this.editDevelopAboutForm.events,
status: this.editDevelopAboutForm.status
});
}
this.developAboutDialogVisible = false;
this.$message.success('保存成功');
},
cancelDevelopAboutEdit() {
this.developAboutDialogVisible = false;
this.currentEditDevelopAbout = null;
this.editDevelopAboutForm = {
year: '',
events: [],
status: '展示中'
};
},
addNewEvent() {
this.editDevelopAboutForm.events.push({
month: '',
details: ['']
});
},
removeEvent(index) {
this.editDevelopAboutForm.events.splice(index, 1);
},
addEventDetail(eventIndex) {
this.editDevelopAboutForm.events[eventIndex].details.push('');
},
removeEventDetail(eventIndex, detailIndex) {
this.editDevelopAboutForm.events[eventIndex].details.splice(detailIndex, 1);
},
beforeAvatarUploadDevelopAbout(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
// 读取文件并预览
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.editDevelopAboutForm.img = e.target.result;
};
return false;
},
// 打开新建弹窗
createNewDevelopAbout() {
this.createDevelopAboutDialogVisible = true;
this.createDevelopAboutForm = {
Id: this.developAbout.length + 1,
year: '',
events: [
{ month: '', details: [''] }
],
status: '展示中',
checked: false
};
},
// 取消新建
cancelCreateDevelopAbout() {
this.createDevelopAboutDialogVisible = false;
this.createDevelopAboutForm = {
Id: null,
year: '',
events: [
{ month: '', details: [''] }
],
status: '展示中',
checked: false
};
},
// 保存新建
saveCreateDevelopAbout() {
if (!this.createDevelopAboutForm.year) {
this.$message.error('请输入年份');
return;
}
// 验证events数据
if (!this.createDevelopAboutForm.events.length) {
this.$message.error('请至少添加一个事件');
return;
}
for (const event of this.createDevelopAboutForm.events) {
if (!event.month) {
this.$message.error('请输入月份');
return;
}
if (!event.details.length || !event.details[0]) {
this.$message.error('请输入事件详情');
return;
}
}
// 添加新的发展历程数据
this.developAbout.push({
...this.createDevelopAboutForm
});
this.createDevelopAboutDialogVisible = false;
this.$message({
type: 'success',
message: '新建成功!'
});
},
// 添加新建事件
addCreateEvent() {
this.createDevelopAboutForm.events.push({
month: '',
details: ['']
});
},
// 删除新建事件
removeCreateEvent(index) {
this.createDevelopAboutForm.events.splice(index, 1);
},
// 添加新建事件详情
addCreateEventDetail(eventIndex) {
this.createDevelopAboutForm.events[eventIndex].details.push('');
},
// 删除新建事件详情
removeCreateEventDetail(eventIndex, detailIndex) {
this.createDevelopAboutForm.events[eventIndex].details.splice(detailIndex, 1);
},
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
},
computed: {
feedstuffOptions() {
return this.filters.category ? this.feedstuffMap[this.filters.category] || [] : [];
},
// 计算属性判断是否"全部被选中"
selectDevelopAboutAll: {
get() {
return this.developAbout.length > 0 && this.developAbout.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.developAbout.forEach(item => {
item.checked = value;
});
}
},
},
}
</script>
<style scoped lang="less">
.standard-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.itemTop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.custom-input{
flex: 100%;
}
.search-bar {
// flex: 2;
max-width: 900px;
}
.button-group {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.avatar-uploader {
img {
width: 100%;
height: 100%;
}
}
.custom-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.custom-input {
flex: 1;
}
:deep(.el-input-group__append) {
padding: 0;
}
:deep(.el-input-group__append .el-button) {
margin: 0;
border: none;
height: 100%;
border-radius: 0 4px 4px 0;
}
:deep( .el-form-item ) {
margin: 12px;
}
</style>

721
hailin_web/src/views/recruitment.vue Normal file
View File

@ -0,0 +1,721 @@
<template>
<div class="recruitment">
<Breadcrumb :items="breadcrumbItems" />
<!-- 查询区域 -->
<div class="itemTop">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetFilters">重置</el-button>
</el-form-item>
<div class="search-bar">
<el-form :inline="true" label-width="80px" >
<el-form-item label="岗位">
<el-input v-model="filters.post" placeholder="请输入岗位名称" clearable></el-input>
</el-form-item>
<el-form-item label="基地">
<div class="custom-input-group">
<el-select v-model="filters.city" placeholder="请选择基地" clearable style="width: 150px;">
<el-option
v-for="city in cityOptions"
:key="city"
:label="city"
:value="city">
</el-option>
</el-select>
<el-input
v-model="customCity"
placeholder="输入自定义基地"
class="custom-input"
>
<template #append>
<el-button @click="addCustomCity">添加</el-button>
</template>
</el-input>
</div>
</el-form-item>
<!-- <el-form-item>-->
<!-- <el-button type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>-->
<!-- <el-button icon="el-icon-refresh" @click="resetFilters">重置</el-button>-->
<!-- </el-form-item>-->
</el-form>
</div>
<div class="button-group">
<div class="leftA" style="display: flex;flex-direction: row;margin-bottom: 20px;margin-top: -20px">
<el-button type="primary" icon="el-icon-search" @click="applyFilters">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetFilters">重置</el-button>
</div>
<div class="rightA" style="display: flex;flex-direction: row;">
<el-button type="primary" icon="el-icon-edit" plain @click="createNewJobLocation">新增招聘</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedJobs">批量删除</el-button>
</div>
</div>
</div>
<HaiLinTable
:items="filteredJobLocations"
:show-post="true"
:show-duty="true"
:show-city="true"
:show-require="true"
:show-pay="true"
:show-remark="true"
:show-id="true"
:show-actions="true"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination
:total="jobLocations.length"
:page-size="pageSize"
:current-page.sync="currentPage"
@change="handlePageChange" />
</div>
<el-dialog
title="编辑职位"
:visible.sync="jobDialogVisible"
width="50%"
:before-close="cancelJobEdit"
>
<el-form :model="editJobForm" label-width="100px">
<el-form-item label="岗位" required>
<el-input v-model="editJobForm.post"></el-input>
</el-form-item>
<el-form-item label="基地" required>
<el-select v-model="editJobForm.city" placeholder="请选择基地" style="width: 100%">
<el-option-group
v-for="group in groupedCityOptions"
:key="group.label"
:label="group.label">
<el-option
v-for="city in group.options"
:key="city"
:label="city"
:value="city">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="岗位要求" required>
<el-input type="textarea" v-model="editJobForm.require" :rows="5"></el-input>
</el-form-item>
<el-form-item label="岗位职责">
<el-input type="textarea" v-model="editJobForm.duty" :rows="5"></el-input>
</el-form-item>
<el-form-item label="薪资" required>
<el-input v-model="editJobForm.pay"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="editJobForm.remark" :rows="5"></el-input>
</el-form-item>
<el-form-item label="顺序">
<el-input-number v-model="editJobForm.id" :min="1" :max="100"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelJobEdit">取 消</el-button>
<el-button type="primary" @click="saveJobEdit">确 定</el-button>
</span>
</el-dialog>
<!-- 新建招聘岗位弹窗 -->
<el-dialog
title="新建招聘岗位"
:visible.sync="createJobLocationDialogVisible"
width="60%"
:before-close="cancelCreateJobLocation"
>
<el-form :model="createJobLocationForm" label-width="100px">
<el-form-item label="岗位" required>
<el-input v-model="createJobLocationForm.post"></el-input>
</el-form-item>
<el-form-item label="基地" required>
<el-select v-model="createJobLocationForm.city" placeholder="请选择基地" style="width: 100%">
<el-option-group
v-for="group in groupedCityOptions"
:key="group.label"
:label="group.label">
<el-option
v-for="city in group.options"
:key="city"
:label="city"
:value="city">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="岗位要求" required>
<el-input type="textarea" v-model="createJobLocationForm.require" :rows="5"></el-input>
</el-form-item>
<el-form-item label="岗位职责">
<el-input type="textarea" v-model="createJobLocationForm.duty" :rows="5"></el-input>
</el-form-item>
<el-form-item label="薪资" required>
<el-input v-model="createJobLocationForm.pay"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="createJobLocationForm.remark" :rows="5"></el-input>
</el-form-item>
<el-form-item label="顺序">
<el-input-number v-model="createJobLocationForm.id" :min="1" :max="100"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelCreateJobLocation">取 消</el-button>
<el-button type="primary" @click="saveCreateJobLocation">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Breadcrumb from '@/common/breadcrumb.vue';
import Pagination from '@/common/pagination.vue';
import HaiLinTable from '@/common/table.vue';
export default {
name: 'recruitment',
components: { Breadcrumb, Pagination,HaiLinTable },
data(){
return{
filters: {
post: '',
city: ''
},
cityOptions: ['通辽海邻','赤峰中润','大庆海邻','龙江海邻','呼伦海邻'],
// 自定义基地
customCity: '',
groupedCityOptions: [
{
options: ['通辽海邻','赤峰中润','大庆海邻','龙江海邻','呼伦海邻']
},
],
breadcrumbItems: [
{ title: '图片管理', to: '/' },
{ title: '招聘岗位', to: '/home' }
],
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
createJobLocationDialogVisible: false, // 新建弹窗显示状态
jobLocations:[{
id: 1,
city:'内蒙海邻',
post:'法务助理',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},{
id: 2,
city:'赤峰中润',
post:'法务助理',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},
{
id: 3,
post:'法务助理',
city:'通辽海邻',
require:'法学专业硕士以上或985/211本科法学。优先考虑具备两年左右企业法务或律师事务所工作经验的。具备卓越的综合分析、决策、策略思维能力以及高度的保密意识。具备优秀的组织、协调、沟通和团队领导能力及高度的工作责任心与敬业精神。孰练掌握办公软件、网络技术及各种商务沟通、商务交通工具(法学、民商法学、诉讼法学、经济法学)。',
duty:'助理工作:组织和协调各项会议。负责总经办撰写各类文件、报告、决策方案和会议纪要等。协助董事长安排、推进和跟进重要会议和项目,协调相关部门的工作法务工作:依据国家法律法规对公司经营决策过程及结果提出法律意见和建议。处理公司业务环节相关法律手续,保证公司经济行为的合法性。运用专业知识,对合同签订和执行中出现的问题提出建议。参与公司的投融资重大合作项目的商务谈判处理相关法律事务。处理和解决公司经营过程中发生的仲裁或者诉讼案件。负责起草、审核和修改公司的各类法律文件。',
pay: '6K-11k',
remark:'测试',
},
],
filteredJobLocations:[],
jobLocationVisibility: [] ,// 每项为 true/false，表示是否显示内容
jobDialogVisible: false,
currentEditJob: null,
currentLocationIndex: null,
editJobForm: {
post: '',
city: '',
require:'',
duty: '',
pay: '',
remark:'',
},
editingLocation: {
name: null, // 当前正在编辑的location名称
id: null // 当前正在编辑的location顺序
},
createJobLocationForm: { // 新建表单数据
post: '',
city: '',
require:'',
duty: '',
pay: '',
remark:'',
},
}
},
mounted() {
this.filteredJobLocations = [...this.jobLocations]; // 初始化时显示全部数据
console.log("111",this.filteredJobLocations);
} ,
methods: {
applyFilters() {
this.filteredJobLocations = this.jobLocations.filter(job => {
const matchPost = !this.filters.post || job.post.includes(this.filters.post);
const matchCity = !this.filters.city || job.city === this.filters.city;
return matchPost && matchCity;
});
},
resetFilters() {
this.filters.post = '';
this.filters.city = '';
this.filteredJobLocations = [...this.jobLocations]; // 重置后显示全部数据
},
handleEdit(item) {
this.editJobForm = { ...item }; // 拷贝当前项数据到表单
this.jobDialogVisible = true;
},
// 处理删除按钮点击
handleDelete(item) {
this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.jobLocations.indexOf(item);
if (index > -1) {
this.jobLocations.splice(index, 1);
this.$message.success('删除成功');
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
// 添加新的职位
addLocation(locIndex) {
// 创建新的职位对象
const newJob = {
itemId: this.jobLocations[locIndex].jobs.length + 1, // 生成新的itemId
title: '', // 职位名称
salary: '', // 薪资
requirements: '', // 岗位要求
responsibilities: [''], // 岗位职责，初始化为空数组
status: '展示中', // 默认状态为展示中
checked: false // 默认未选中
};
// 将新职位添加到指定location的jobs数组中
this.jobLocations[locIndex].jobs.push(newJob);
// 自动打开编辑对话框
this.currentLocationIndex = locIndex;
this.currentEditJob = newJob;
this.editJobForm = {
title: '',
requirements: '',
responsibilities: [''],
salary: '',
status: '展示中',
itemId:'1',
};
this.jobDialogVisible = true;
},
startEditLocationName(location) {
this.editingLocation.name = location.id;
},
saveLocationName(location, event) {
location.name = event.target.value;
this.editingLocation.name = null;
},
startEditLocationId(location) {
this.editingLocation.id = location.id;
},
saveLocationId(location, event) {
location.id = event.target.value;
this.editingLocation.id = null;
},
handleLocationKeydown(location, event, type) {
if (event.key === 'Enter') {
if (type === 'name') {
this.saveLocationName(location, event);
} else {
this.saveLocationId(location, event);
}
}
},
// 监听location的checked状态变化
watchLocationChecked(location) {
// 当location的checked状态改变时，同步更新其下所有jobs的选中状态
location.jobs.forEach(job => {
job.checked = location.checked;
});
},
// 删除选中的职位
deleteSelectedJobs() {
this.$confirm('确认删除选中的职位吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 遍历所有location
this.jobLocations.forEach(location => {
// 过滤掉被选中的jobs
location.jobs = location.jobs.filter(job => !job.checked);
});
// 移除空的location
this.jobLocations = this.jobLocations.filter(location => location.jobs.length > 0);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 编辑职位
editJobLocationsItem(jobIndex, locIndex) {
this.currentLocationIndex = locIndex;
this.currentEditJob = this.jobLocations[locIndex].jobs[jobIndex];
this.editJobForm = {
title: this.currentEditJob.title,
requirements: this.currentEditJob.requirements,
responsibilities: Array.isArray(this.currentEditJob.responsibilities)
? [...this.currentEditJob.responsibilities]
: [this.currentEditJob.responsibilities],
salary: this.currentEditJob.salary,
status: this.currentEditJob.status || '展示中',
itemId: this.currentEditJob.itemId,
};
this.jobDialogVisible = true;
},
// 删除职位
deleteJobLocationsItem(jobIndex, locIndex) {
this.$confirm('确认删除该职位吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.jobLocations[locIndex].jobs.splice(jobIndex, 1);
// 如果该location下没有jobs了，移除该location
if (this.jobLocations[locIndex].jobs.length === 0) {
this.jobLocations.splice(locIndex, 1);
}
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 保存职位编辑
saveJobEdit() {
if (!this.editJobForm.title || !this.editJobForm.requirements || !this.editJobForm.salary || !this.editJobForm.itemId) {
this.$message.error('请填写完整信息');
return;
}
const job = this.jobLocations[this.currentLocationIndex].jobs.find(
j => j === this.currentEditJob
);
if (job) {
Object.assign(job, this.editJobForm);
}
this.jobDialogVisible = false;
this.$message({
type: 'success',
message: '保存成功!'
});
},
// 取消职位编辑
cancelJobEdit() {
this.jobDialogVisible = false;
this.currentEditJob = null;
this.currentLocationIndex = null;
this.editJobForm = {
title: '',
requirements: '',
responsibilities: [],
salary: '',
status: '展示中',
itemId:null,
};
},
// 添加职责项
addResponsibility() {
this.editJobForm.responsibilities.push('');
},
// 删除职责项
removeResponsibility(index) {
this.editJobForm.responsibilities.splice(index, 1);
},
// 收起当前 locIndex 的内容
scrollToPreviousLocation(locIndex) {
this.$set(this.jobLocationVisibility, locIndex, false);
},
// 展开下一个 locIndex + 1 的内容
scrollToNextLocation(locIndex) {
this.$set(this.jobLocationVisibility, locIndex, true);
},
// 打开新建弹窗
createNewJobLocation() {
this.createJobLocationDialogVisible = true;
this.createJobLocationForm = {
id: this.jobLocations.length + 1,
name: '',
status: '展示中',
checked: false,
jobs: [
{
itemId: 1,
title: '',
salary: '',
requirements: '',
responsibilities: [''],
status: '展示中',
checked: false,
}
]
};
},
// 取消新建
cancelCreateJobLocation() {
this.createJobLocationDialogVisible = false;
this.createJobLocationForm = {
id: null,
name: '',
status: '展示中',
checked: false,
jobs: [
{
itemId: 1,
title: '',
salary: '',
requirements: '',
responsibilities: [''],
status: '展示中',
checked: false,
}
]
};
},
// 保存新建
saveCreateJobLocation() {
if (!this.createJobLocationForm.name) {
this.$message.error('请填写公司名称');
return;
}
// 验证每个职位的信息
for (const job of this.createJobLocationForm.jobs) {
if (!job.title || !job.requirements || !job.salary || !job.itemId) {
this.$message.error('请填写完整的职位信息');
return;
}
}
// 添加新的招聘岗位数据
this.jobLocations.push({
...this.createJobLocationForm
});
this.createJobLocationDialogVisible = false;
this.$message({
type: 'success',
message: '新建成功!'
});
},
// 添加新建职位
addCreateJob() {
this.createJobLocationForm.jobs.push({
itemId: this.createJobLocationForm.jobs.length + 1,
title: '',
salary: '',
requirements: '',
responsibilities: [''],
status: '展示中',
checked: false,
});
},
// 添加新建职责
addCreateResponsibility(jobIndex) {
this.createJobLocationForm.jobs[jobIndex].responsibilities.push('');
},
// 删除新建职责
removeCreateResponsibility(jobIndex, respIndex) {
this.createJobLocationForm.jobs[jobIndex].responsibilities.splice(respIndex, 1);
},
// 添加自定义基地
addCustomCity() {
if (this.customCity.trim()) {
if (!this.cityOptions.includes(this.customCity.trim())) {
this.cityOptions.push(this.customCity.trim());
this.groupedCityOptions[0].options.push(this.customCity.trim());
this.filters.city = this.customCity.trim();
this.customCity = '';
this.$message.success('自定义基地添加成功');
} else {
this.$message.warning('该基地已存在');
}
} else {
this.$message.error('请输入有效的基地名称');
}
},
},
created() {
// 初始化全部展开
this.jobLocationVisibility = this.jobLocations.map(() => true);
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
'jobLocations': {
deep: true,
handler(newVal) {
newVal.forEach(location => {
// 监听每个location的checked属性变化
this.$watch(
() => location.checked,
() => {
this.watchLocationChecked(location);
}
);
});
}
},
},
computed: {
// 计算属性判断是否"全部被选中"
selectJobLocationsAll: {
get() {
return this.jobLocations.length > 0 && this.jobLocations.every(location => location.checked);
},
set(value) {
this.jobLocations.forEach(location => {
location.checked = value;
// 同时更新该location下所有jobs的选中状态
location.jobs.forEach(job => {
job.checked = value;
});
});
}
}
}
}
</script>
<style scoped lang="less">
.itemTop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.search-bar {
flex: 100%;
max-width: 900px;
}
.button-group {
display: flex;
flex-direction: column;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.avatar-uploader{
img{
width: 100%;
height: 100%;
}
}
.custom-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.custom-input {
flex: 1;
}
:deep(.el-input-group__append) {
padding: 0;
}
:deep(.el-input-group__append .el-button) {
margin: 0;
border: none;
height: 80%;
border-radius: 0 4px 4px 0;
}
:deep(.el-form--inline .el-form-item){
display: flex;
}
</style>

417
hailin_web/src/views/setting.vue Normal file
View File

@ -0,0 +1,417 @@
<template>
<div class="home">
<Breadcrumb :items="breadcrumbItems" />
<!-- 使用 Tabs 切换 -->
<el-tabs v-model="activeTab" type="card">
<!-- 友情链接 Tab -->
<el-tab-pane label="友情链接" name="blogroll">
<div class="section">
<!-- <h3>首页海邻</h3> -->
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="openCreateNewsDialog">新建链接</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelected">批量删除</el-button>
</div>
</div>
<!-- <el-button @click="openCreateNewsDialog">新建首页海邻</el-button> -->
<HaiLinTable
:items="haiLinNewsList"
:show-image="true"
:show-title="true"
:show-link="true"
:show-actions="true"
@edit="editNews"
@delete="deleteNews"
@delete-selected="deleteSelectedNews" />
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination :total="haiLinNewsList.length" :page-size="pageSize" :current-page.sync="currentPage"
@change="handlePageChange('haiLinNews', $event)" />
<!-- <Pagination :current-page="currentPage.haiLinNews" :total="haiLinNewsList.length" @page-change="handlePageChange('haiLinNews', $event)" /> -->
</div>
</div>
</el-tab-pane>
<!-- 网站声明 Tab -->
<el-tab-pane label="网站声明" name="doctype">
<div class="section">
<!-- 富文本编辑器 -->
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
</div>
<div style="margin-top: 30px;">
<!-- 保存按钮 -->
<el-button type="primary" @click="saveContent">保存</el-button>
</div>
</el-tab-pane>
<!-- 联系我们 Tab -->
<el-tab-pane label="联系我们" name="type">
<div class="sectionTT" style="display: none;">
<div class="sectionT" style="display: flex;flex-direction: row;justify-content: space-between;">
<p>
"零容忍"文本编辑
</p>
<div style="margin: 0;">
<!-- 保存按钮 -->
<el-button type="primary" @click="saveContent0">保存</el-button>
</div>
</div>
<div class="section">
<!-- 富文本编辑器 -->
<quill-editor v-model="content0" ref="myQuillEditor0" :options="editorOption"></quill-editor>
</div>
</div>
<el-card shadow="always" header="公司信息管理" class="box-card">
<el-form label-width="120px" :model="companyInfo" ref="formRef">
<!-- 基础信息 -->
<el-form-item label="公司名称">
<el-input v-model="companyInfo.name" />
</el-form-item>
<el-form-item label="公司地址">
<el-input v-model="companyInfo.address" />
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="companyInfo.phone" />
</el-form-item>
<el-form-item label="邮政编码">
<el-input v-model="companyInfo.postalCode" />
</el-form-item>
<!-- 图片上传区 -->
<el-form-item label="海邻公众号">
<el-upload
class="upload-box"
action="#"
:auto-upload="false"
:show-file-list="false"
:on-change="file => handleImageChange(file, 'wechat')"
>
<img v-if="companyInfo.wechatImg" :src="companyInfo.wechatImg" class="qrcode" />
<el-button type="primary">上传二维码</el-button>
</el-upload>
</el-form-item>
<el-form-item label="视频号">
<el-upload
class="upload-box"
action="#"
:auto-upload="false"
:show-file-list="false"
:on-change="file => handleImageChange(file, 'video')"
>
<img v-if="companyInfo.videoImg" :src="companyInfo.videoImg" class="qrcode" />
<el-button type="primary">上传二维码</el-button>
</el-upload>
</el-form-item>
<el-form-item label="抖音号">
<el-upload
class="upload-box"
action="#"
:auto-upload="false"
:show-file-list="false"
:on-change="file => handleImageChange(file, 'douyin')"
>
<img v-if="companyInfo.douyinImg" :src="companyInfo.douyinImg" class="qrcode" />
<el-button type="primary">上传二维码</el-button>
</el-upload>
</el-form-item>
<!-- 提交按钮 -->
<el-form-item >
<el-button type="success" @click="saveInfo">保存修改</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- <div class="sectionT">-->
<!-- <p>-->
<!-- "举报邮箱"文本编辑-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="section">-->
<!-- &lt;!&ndash; 富文本编辑器 &ndash;&gt;-->
<!-- <quill-editor v-model="contentE" ref="myQuillEditorE" :options="editorOption"></quill-editor>-->
<!-- </div>-->
<!-- <div style="margin-top: 30px;">-->
<!-- &lt;!&ndash; 保存按钮 &ndash;&gt;-->
<!-- <el-button type="primary" @click="saveContentE">保存</el-button>-->
<!-- </div>-->
</el-tab-pane>
</el-tabs>
<!-- 新闻弹窗 -->
<NewsDialog
:visible="newsDialogVisible"
:item="currentNewsItem"
:dialog-title="newsDialogTitle"
:show-image="true"
:show-title="true"
:show-link="true"
@save="saveNews"
@upload="uploadNewsImage"
@update:visible="newsDialogVisible = $event" />
</div>
</template>
<script>
import Pagination from '@/common/pagination.vue'; // 引入分页组件
import Breadcrumb from '@/common/breadcrumb.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from '@/common/dialog.vue';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: { Breadcrumb, HaiLinTable, NewsDialog,Pagination,quillEditor },
data() {
return {
content: '',
content0: '',
contentE: '',
editorOption: {
placeholder: '在这里输入内容...',
theme: 'snow', // or 'bubble'
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
]
}
},
activeTab: 'blogroll' ,
breadcrumbItems: [
{ title: '首页', to: '/' },
{ title: '网站设置', to: '/home' }
],
haiLinNewsList: [
{
id: 1,
title: "中华人民共和国农业部网站",
img: require("@/assets/DynamicData/SVG/资源 1.png"),
link:'https://mp.weixin.qq.com/s/VV-Cv5_hpVv7nxl_qxpnwA',
status: '展示中', checked: false,
},
{
id: 1,
title: "中国饲料工业信息网",
img: require("@/assets/DynamicData/SVG/资源 1.png"),
link:'https://mp.weixin.qq.com/s/VV-Cv5_hpVv7nxl_qxpnwA',
status: '展示中', checked: false,
},
],
haiLinImgList: [
// { Id: 1, alt: "haiLin", src: require('@/assets/home/logo.png'),
// status: '展示中',
// checked: false,
// },
],
currentPage: {
haiLinNews: 1,
haiLinImg: 1
},
pageSize: 10, // 每页显示的记录数
newsDialogVisible: false,
imgDialogVisible: false,
currentNewsItem: {},
currentImgItem: {},
newsDialogTitle: '',
imgDialogTitle: '',
companyInfo: {
name: '内蒙古海邻科技发展有限公司',
address: '内蒙古自治区通辽市科尔沁区木里图镇工业园区',
phone: '0475-2737300',
postalCode: '028000',
wechatImg: '', // 存放上传后的图片地址
videoImg: '',
douyinImg: '',
},
};
},
methods: {
openCreateNewsDialog() {
this.currentNewsItem = {
title: '',
img: '',
link: '',
// status: '展示中',
// id: this.haiLinNewsList.length + 1
};
this.newsDialogTitle = '新增网站链接';
this.newsDialogVisible = true;
},
editNews(item) {
this.currentNewsItem = { ...item };
this.newsDialogTitle = '编辑友情链接';
this.newsDialogVisible = true;
},
saveNews(data) {
const index = this.haiLinNewsList.findIndex(i => i.id === data.id);
if (index > -1) {
this.haiLinNewsList.splice(index, 1, data);
} else {
this.haiLinNewsList.push(data);
}
},
deleteNews(item) {
this.haiLinNewsList = this.haiLinNewsList.filter(i => i !== item);
},
deleteSelectedNews() {
this.haiLinNewsList = this.haiLinNewsList.filter(i => !i.checked);
},
openCreateImgDialog() {
this.currentImgItem = {
alt: '',
img: '',
status: '展示中',
id: this.haiLinImgList.length + 1
};
this.imgDialogTitle = '新建首页关于海邻';
this.imgDialogVisible = true;
},
editImg(item) {
this.currentImgItem = { ...item };
this.imgDialogTitle = '编辑首页关于海邻';
this.imgDialogVisible = true;
},
saveImg(data) {
const index = this.haiLinImgList.findIndex(i => i.id === data.id);
if (index > -1) {
this.haiLinImgList.splice(index, 1, data);
} else {
this.haiLinImgList.push(data);
}
},
deleteImg(item) {
this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
},
deleteSelectedImg() {
this.haiLinImgList = this.haiLinImgList.filter(i => !i.checked);
},
uploadNewsImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.image = e.target.result;
};
reader.readAsDataURL(file);
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.image = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页方法
handlePageChange(tabName, newPage) {
if (tabName === 'haiLinNews') {
this.currentPage.haiLinNews = newPage;
} else if (tabName === 'haiLinImg') {
this.currentPage.haiLinImg = newPage;
}
},
//富文本保存
saveContent(){
console.log("======this.content",this.content)
},
//富文本保存
saveContent0(){
console.log("======this.content",this.content0)
},
//富文本保存
saveContentE(){
console.log("======this.content",this.contentE)
},
handleImageChange(file, type) {
const reader = new FileReader();
reader.onload = e => {
this.companyInfo[`${type}Img`] = e.target.result;
};
reader.readAsDataURL(file.raw);
},
saveInfo() {
console.log('提交的数据：', this.companyInfo);
this.$message.success('信息已保存（仅本地模拟）');
},
}
};
</script>
<style lang="less" scoped>
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.sectionT{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height:calc(100% + 20px);
padding: 10px;
border: 1px solid #ccc;
}
.upload-box {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
.qrcode{
max-width: 200px;
margin-right: 40px;
}
.el-button--primary {
margin-right: 10px;
}
}
</style>

349
hailin_web/src/views/team.vue Normal file
View File

@ -0,0 +1,349 @@
<template>
<div class="teams">
<Breadcrumb :items="breadcrumbItems" />
<div class="itemTop">
<!-- <h3>科研成果</h3> -->
<div class="itemTop">
<div class="button-group">
<el-button type="primary" icon="el-icon-edit" plain @click="createNewTeamMember">新增团队</el-button>
<el-button type="danger" icon="el-icon-delete" plain @click="deleteSelectedTeamMembers">批量删除</el-button>
</div>
</div>
</div>
<HaiLinTable
:items="teamMembers"
:show-image="true"
:show-name="true"
:show-person-desc="true"
:show-person-area="true"
:show-status="true"
:show-id="true"
:show-actions="true"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- 分页组件 -->
<div class="pagination-wrapper">
<Pagination
:total="teamMembers.length"
:page-size="pageSize"
:current-page.sync="currentPage"
@change="handlePageChange" />
</div>
<!-- 图片弹窗 -->
<NewsDialog
:visible="imgDialogVisible"
:item="currentImgItem"
:dialog-title="imgDialogTitle"
:show-image="true"
:show-title="true"
:show-status="true"
:show-oder="true"
:show-rank="true"
:show-area="true"
@save="saveImg"
@upload="uploadImgImage"
@update:visible="imgDialogVisible = $event"
/>
<!-- <el-dialog-->
<!-- title="编辑团队成员"-->
<!-- :visible.sync="teamMembersDialogVisible"-->
<!-- width="60%"-->
<!-- :before-close="cancelTeamMembersEdit"-->
<!-- >-->
<!-- <el-form :model="editTeamMembersForm" label-width="100px">-->
<!-- <el-form-item label="姓名">-->
<!-- <el-input v-model="editTeamMembersForm.name"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="头衔">-->
<!-- <el-input type="textarea" v-model="editTeamMembersForm.titles" :rows="4"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="研究领域">-->
<!-- <el-input type="textarea" v-model="editTeamMembersForm.field" :rows="4"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="editTeamMembersForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="editTeamMembersForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="照片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadTeamMember">-->
<!-- <img v-if="editTeamMembersForm.photo" :src="editTeamMembersForm.photo" class="team-member-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelTeamMembersEdit">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveTeamMembersEdit">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 新建团队成员弹窗 &ndash;&gt;-->
<!-- <el-dialog-->
<!-- title="新建团队成员"-->
<!-- :visible.sync="createTeamMemberDialogVisible"-->
<!-- width="60%"-->
<!-- :before-close="cancelCreateTeamMember"-->
<!-- >-->
<!-- <el-form :model="createTeamMemberForm" label-width="100px">-->
<!-- <el-form-item label="姓名">-->
<!-- <el-input v-model="createTeamMemberForm.name"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="头衔">-->
<!-- <el-input type="textarea" v-model="createTeamMemberForm.titles" :rows="4"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="研究领域">-->
<!-- <el-input type="textarea" v-model="createTeamMemberForm.field" :rows="4"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态">-->
<!-- <el-select v-model="createTeamMemberForm.status" placeholder="请选择状态">-->
<!-- <el-option label="展示中" value="展示中"></el-option>-->
<!-- <el-option label="未展示" value="未展示"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="顺序">-->
<!-- <el-input-number v-model="createTeamMemberForm.id" :min="1" :max="100"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="照片">-->
<!-- <el-upload-->
<!-- class="avatar-uploader"-->
<!-- action="#"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeAvatarUploadCreateTeamMember">-->
<!-- <img v-if="createTeamMemberForm.photo" :src="createTeamMemberForm.photo" class="team-member-preview">-->
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancelCreateTeamMember">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveCreateTeamMember">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
</div>
</template>
<script>
import Breadcrumb from '@/common/breadcrumb.vue';
import Pagination from '@/common/pagination.vue';
import HaiLinTable from '@/common/table.vue';
import NewsDialog from "@/common/dialog.vue";
import {TeamCreate , Team , TeamEdit ,TeamDel} from "@/utils/api";
export default {
name: 'teams',
components: {NewsDialog, Breadcrumb, Pagination,HaiLinTable },
data(){
return{
breadcrumbItems: [
{ title: '图片管理', to: '/' },
{ title: '科研成果', to: '/home' }
],
// 分页组件
currentPage: 1,
pageSize: 5,
currentEditItem: null,
dialogVisible: false,
imgDialogTitle:'',
imgDialogVisible: false,
teamMembers: [
],
teamMembersDialogVisible: false,
currentEditTeamMember: null,
currentImgItem: { // 新建表单数据
},
}
},
mounted() {
this.getBanner();
},
methods: {
// 获取轮播图数据
async getBanner() {
try {
const res = await Team ({});
if (res.success) {
this.teamMembers = res.data;
} else {
this.$message.error('获取轮播图数据失败');
}
} catch (error) {
console.error('获取轮播图数据出错:', error);
this.$message.error('获取数据失败');
}
},
// 处理编辑按钮点击
handleEdit(item) {
this.currentImgItem = { ...item }; // 拷贝当前项数据到表单
this.imgDialogVisible = true;
this.imgDialogTitle = '编辑团队成员'
},
// 打开新建弹窗
createNewTeamMember() {
this.imgDialogVisible = true;
this.imgDialogTitle = '新建团队成员'
this.createTeamMemberForm = {
sequence: this.teamMembers.length + 1,
};
},
// 处理删除按钮点击
// handleDelete(item) {
// this.$confirm('此操作将永久删除该成果, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const index = this.teamMembers.indexOf(item);
// if (index > -1) {
// this.teamMembers.splice(index, 1);
// this.$message.success('删除成功');
// }
// }).catch(() => {
// this.$message.info('已取消删除');
// });
// },
async saveImg(formData) { // 直接从子组件接收完整数据
try {
this.currentImgItem = {
...formData,
rank: Array.isArray(formData.rank)
? formData.rank
: typeof formData.rank === 'string'
? formData.rank
.split(/[\s;]+/)
.map(item => item.trim())
.filter(Boolean)
: []
};
console.log(this.currentImgItem);
if (this.currentImgItem.id) {
await TeamEdit(this.currentImgItem.id, this.currentImgItem);
this.$message.success('修改成功');
} else {
await TeamCreate(this.currentImgItem);
this.$message.success('创建成功');
}
this.imgDialogVisible = false;
this.getBanner(); // 刷新列表
} catch (error) {
if (error !== 'cancel') {
console.error('保存失败:', error);
this.$message.error('操作失败');
}
}
},
async handleDelete(item) {
// this.haiLinImgList = this.haiLinImgList.filter(i => i !== item);
try {
await this.$confirm('确认删除该轮播图吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
//console.log(this.teamMembers(item).id)
await TeamDel(item.id);
this.$message.success('删除成功');
this.getBanner();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
this.$message.error('删除失败');
}
}
},
uploadImgImage(file, data) {
const reader = new FileReader();
reader.onload = e => {
data.img = e.target.result;
};
reader.readAsDataURL(file);
},
// 分页变化时触发
handlePageChange(page) {
this.currentPage = page;
},
//del选中teamMembers
deleteSelectedTeamMembers() {
this.teamMembers = this.teamMembers.filter(item => !item.checked);
this.selectTeamMembersAll = false; // 取消全选状态
},
},
watch: {
selectTeamMembers(newVal) {
this.teamMembers.forEach(item => item.checked = newVal);
},
},
computed: {
// 计算属性判断是否"全部被选中"
selectTeamMembersAll: {
get() {
return this.teamMembers.length > 0 && this.teamMembers.every(item => item.checked);
},
set(value) {
// 如果当前是全选状态，再次点击时 value 为 false，则全部取消
this.teamMembers.forEach(item => {
item.checked = value;
});
}
},
}
}
</script>
<style scoped lang="less">
.itemTop {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
.button-group {
display: flex;
gap: 10px;
}
}
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.avatar-uploader{
img{
width: 100%;
height: 100%;
}
}
</style>

15
hailin_web/vue.config.js Normal file
View File

@ -0,0 +1,15 @@
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api/v1': {
target: 'http://10.10.1.6:8040',
changeOrigin: true,
pathRewrite: {
'^/api/v1': '/api/v1'
}
}
}
},
lintOnSave: false, // 关闭保存时 ESLint 检查（提高编译速度）
}