初始化
This commit is contained in:
Leo_Ding
commit
0624d687eb
5
.idea/.gitignore
generated
vendored
Normal file
5
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# 默认忽略的文件
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# 基于编辑器的 HTTP 客户端请求
|
||||||
|
/httpRequests/
|
||||||
12
.idea/haiLin_web-New.iml
generated
Normal file
12
.idea/haiLin_web-New.iml
generated
Normal 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
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal 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
8
.idea/modules.xml
generated
Normal 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
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
12
hailin_web/.gitignore
vendored
Normal file
12
hailin_web/.gitignore
vendored
Normal 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
5
hailin_web/.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# 默认忽略的文件
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# 基于编辑器的 HTTP 客户端请求
|
||||||
|
/httpRequests/
|
||||||
12
hailin_web/.idea/hailin_web.iml
generated
Normal file
12
hailin_web/.idea/hailin_web.iml
generated
Normal 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
6
hailin_web/.idea/inspectionProfiles/Project_Default.xml
generated
Normal 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
8
hailin_web/.idea/modules.xml
generated
Normal 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
6
hailin_web/.idea/vcs.xml
generated
Normal 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
24
hailin_web/README.md
Normal 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
5
hailin_web/babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
17775
hailin_web/package-lock.json
generated
Normal file
17775
hailin_web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
hailin_web/public/favicon.ico
Normal file
BIN
hailin_web/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
hailin_web/public/index.html
Normal file
17
hailin_web/public/index.html
Normal 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
28
hailin_web/src/App.vue
Normal 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
20
hailin_web/src/Interface/jiekou.json
Normal 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
5
hailin_web/src/base.less
Normal 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
27
hailin_web/src/common/breadcrumb.vue
Normal 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
258
hailin_web/src/common/dialog.vue
Normal 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
76
hailin_web/src/common/pagination.vue
Normal 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
235
hailin_web/src/common/table.vue
Normal 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
162
hailin_web/src/layout/components/sidebar/menuItem.vue
Normal 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
108
hailin_web/src/layout/index.vue
Normal 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">></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
14
hailin_web/src/main.js
Normal 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
48
hailin_web/src/reset.css
Normal 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
159
hailin_web/src/router.js
Normal 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
67
hailin_web/src/utils/api.js
Normal 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
109
hailin_web/src/utils/request.js
Normal 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
638
hailin_web/src/views/contact.vue
Normal 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: '博士、博士生导师 国家合成生物技术创新中心研究员 中国科学院天津工业生物技术研究所 <br> 营养资源合成生物学研究组PI 国家创新人才推进计划中青年科技创新 领军人才',
|
||||||
|
field: '探索农业废弃物综合利用、新型蛋白开发、生物基营养资源在动物中的生理功能关键技术问题。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '刘大程',
|
||||||
|
photo: require('@/assets/Research/刘大程.png'),
|
||||||
|
titles: '博士、博士生导师 内蒙古农业大学教授 学科负责人 农业部动物疾病临床诊疗技术重点实验室主任 <br>' ,
|
||||||
|
field: '兽医微生物与免疫学、新型饲用蛋白的研发与应用、瘤胃微生态及瘤胃功能的调控，已获得具有自主知识产权的酵母菌12株。先后主持国家重点研发项目、国家自然基金项目和省部级科研项目10余项。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '张宏福',
|
||||||
|
photo: require('@/assets/Research/张宏福.png'),
|
||||||
|
titles: '博士、博士生导师 中国农业科学院北京畜牧兽医研究所二级研究员 <br> 畜禽营养与饲养全国重点实验室常务副主任 农业农村部动物营养与饲料学(综合性)重点实验室主任 <br> 中国农业科学院家畜营养与调控创新团队资深首席科学家 国务院政府津贴获得者 <br> 国家有突出贡献中青年专家 国家百千万计划人才 全国农业科研杰出人才 农科英才领军人才',
|
||||||
|
field: '长期从事动物营养与健康环境科学研究与应用，是单胃动物健康营养与饲料营养价值评定领域学科带头人，倡导营养—环境维护动物自身免疫健康，构建"少用药、慎用苗"的健康养殖技术体系。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '高乐',
|
||||||
|
photo: require('@/assets/Research/高乐.png'),
|
||||||
|
titles: '微生物学博士 中国科学院天津工业生物技术研究所 副研究员<br>' ,
|
||||||
|
field: '针对农作物废弃物结构特性，创建饲用茵株固态发酵的智能化控制系统，开发利用玉米副产物生物合成新型饲用蛋白的技术路线。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '郭俊清',
|
||||||
|
photo: require('@/assets/Research/郭俊清.png'),
|
||||||
|
titles: '高级畜牧师 动物营养与饲料科学博士 新型饲用蛋白技术创新中心主任<br>',
|
||||||
|
field: '反刍动物营养及生物饲料的研究与应用;新型饲用蛋白研发与产业化应用研究;主持及参与自治区战略性新兴产业发展项目、农业科技成果转化资金项目、科技部星火计划等重点项目。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: '陈亮',
|
||||||
|
photo: require('@/assets/Research/陈亮.png'),
|
||||||
|
titles: '博士、博士生导师 中国农业科学院北京畜牧兽医研究所研究员 农科英才领军人才、杰出青年英才 <br> 国家高层次人才特殊支持计划青年拔尖人才 中国农业科学院家畜营养与调控创新团队首席科学家 <br> 畜禽营养与饲养全国重点实验室办公室主任',
|
||||||
|
field: '猪禽碳水化合物营养与饲料高效合成利用研究。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: '郝月',
|
||||||
|
photo: require('@/assets/Research/郝月.png'),
|
||||||
|
titles: '博士、硕士生导师 中国农业科学院北京畜牧兽医研究所副研究员 <br>畜禽营养与饲养全国重点实验室科研骨干',
|
||||||
|
field: '蛋白质饲料开发与猪的健康养殖。'
|
||||||
|
,status: '展示中', checked: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: '钟儒清',
|
||||||
|
photo: require('@/assets/Research/钟儒清.png'),
|
||||||
|
titles: '博士、硕士生导师 中国农业科学院北京畜牧兽医研究所副研究员 <br> 中国农业科学院青年创新人才 畜禽营养与饲养全国重点实验室科研骨干',
|
||||||
|
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
777
hailin_web/src/views/dynamic/company.vue
Normal 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"-->
|
||||||
|
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建公司动态弹窗 –>-->
|
||||||
|
<!-- <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
785
hailin_web/src/views/dynamic/media.vue
Normal 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">-->
|
||||||
|
<!-- <!– <h3>科研成果</h3> –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <!– <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> –>-->
|
||||||
|
|
||||||
|
<!-- <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"-->
|
||||||
|
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建媒体报道弹窗 –>-->
|
||||||
|
<!-- <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
252
hailin_web/src/views/dynamic/video.vue
Normal 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
481
hailin_web/src/views/history.vue
Normal 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
177
hailin_web/src/views/login.vue
Normal 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
669
hailin_web/src/views/newAdding.vue
Normal 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
386
hailin_web/src/views/picture/home.vue
Normal 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">-->
|
||||||
|
<!-- <!– <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-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"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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="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
758
hailin_web/src/views/picture/honor.vue
Normal 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">-->
|
||||||
|
<!-- <!– <h3>科研成果</h3> –>-->
|
||||||
|
<!-- <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"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建企业荣誉弹窗 –>-->
|
||||||
|
<!-- <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
367
hailin_web/src/views/picture/index.vue
Normal 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
238
hailin_web/src/views/picture/scientific.vue
Normal 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
679
hailin_web/src/views/picture/talent.vue
Normal 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">-->
|
||||||
|
<!-- <!– <h3>科研成果</h3> –>-->
|
||||||
|
<!-- <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"-->
|
||||||
|
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建企业荣誉弹窗 –>-->
|
||||||
|
<!-- <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
725
hailin_web/src/views/picture/team.vue
Normal 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">-->
|
||||||
|
<!-- <!– <h3>科研成果</h3> –>-->
|
||||||
|
<!-- <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"-->
|
||||||
|
|
||||||
|
<!-- />-->
|
||||||
|
<!-- <!– 分页组件 –>-->
|
||||||
|
<!-- <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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建团队风采弹窗 –>-->
|
||||||
|
<!-- <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
721
hailin_web/src/views/product.vue
Normal 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
721
hailin_web/src/views/recruitment.vue
Normal 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
417
hailin_web/src/views/setting.vue
Normal 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">-->
|
||||||
|
<!-- <!– 富文本编辑器 –>-->
|
||||||
|
<!-- <quill-editor v-model="contentE" ref="myQuillEditorE" :options="editorOption"></quill-editor>-->
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div style="margin-top: 30px;">-->
|
||||||
|
<!-- <!– 保存按钮 –>-->
|
||||||
|
<!-- <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
349
hailin_web/src/views/team.vue
Normal 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>-->
|
||||||
|
|
||||||
|
<!-- <!– 新建团队成员弹窗 –>-->
|
||||||
|
<!-- <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
15
hailin_web/vue.config.js
Normal 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 检查（提高编译速度）
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user