gva
/
web-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加企业家管理

This commit is contained in:
jacky 2024-04-20 18:46:49 +08:00
parent 001f445bce
commit 7e7030a13e
12 changed files with 696 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/api/entrepreneur.js Normal file
View File

@ -0,0 +1,70 @@
import service from '@/utils/request'
// @Summary 获取列表
// @Produce application/json
// @Router /cms/entrepreneur/getList [post]
export const getEntrepreneurList = (data) => {
return service({
url: '/cms/entrepreneur/getList',
method: 'post',
data
})
}
// @Summary 新增
// @Produce application/json
// @Param Object
// @Router /cms/entrepreneur/add [post]
export const addEntrepreneur = (data) => {
return service({
url: '/cms/entrepreneur/add',
method: 'post',
data
})
}
// @Summary 删除
// @Produce application/json
// @Param ID int
// @Router /cms/entrepreneur/delete [delete]
export const deleteEntrepreneur = (data) => {
return service({
url: '/cms/entrepreneur/delete',
method: 'delete',
data
})
}
// @Summary 批量删除
// @Param data body request.IdsReq true "批量删除"
// @Router /cms/entrepreneur/deleteByIds [delete]
export const deleteEntrepreneurByIds = (params) => {
return service({
url: '/cms/entrepreneur/deleteByIds',
method: 'delete',
params
})
}
// @Summary 修改
// @Produce application/json
// @Param Object
// @Router /cms/entrepreneur/update [put]
export const updateEntrepreneur = (data) => {
return service({
url: '/cms/entrepreneur/update',
method: 'put',
data
})
}
// @Summary 根据id获取
// @Param data body api.GetById true "根据id获取"
// @Router /cms/entrepreneur/get [get]
export const getEntrepreneurById = (params) => {
return service({
url: '/cms/entrepreneur/get',
method: 'get',
params
})
}

9
src/components/richtext/rich-edit.vue
View File

@ -24,17 +24,20 @@ const change = (editor) => {
}
const props = defineProps({
mediaCategory: {
type: String,
default: 'rich_edit'
},
modelValue: {
type: String,
default: ''
},
// eslint-disable-next-line vue/no-reserved-props
style: {
type: Object,
default: () => ({
height: '20rem',
})
}
},
})
const editorRef = shallowRef()
@ -47,7 +50,7 @@ const editorConfig = {
}
editorConfig.MENU_CONF['uploadImage'] = {
fieldName: 'file',
server: basePath + '/cms/mediaFile/upload?category=rich_edit',
server: basePath + '/cms/mediaFile/upload?category=' + props.mediaCategory,
customInsert(res, insertFn) {
if (res.code === 0) {
const urlPath = getUrl(res.data.mediaFile.url)

67
src/view/ad/content.vue
View File

@ -9,7 +9,7 @@
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="媒体文件" min-width="160" prop="position">
<el-table-column align="left" label="媒体文件" min-width="160" prop="mediaUrl">
<template #default="scope">
<el-image v-if="scope.row.adType === 1 || scope.row.adType === 3" :src="scope.row.mediaUrl" class="file"
fit="cover" :preview-src-list="[scope.row.mediaUrl]" preview-teleported hide-on-click-modal
@ -29,7 +29,6 @@
{{ formatAdPosition(scope.row.adPositionId) }}
</template>
</el-table-column>
<el-table-column align="left" label="媒体地址" min-width="300" prop="mediaUrl" />
<el-table-column align="left" label="跳转地址" min-width="300" prop="url" />
<el-table-column align="left" label="有效起始" min-width="140" prop="validStart">
<template #default="scope">
@ -41,10 +40,10 @@
{{ formatOnlyDate(scope.row.validEnd) }}
</template>
</el-table-column>
<el-table-column align="left" fixed="right" label="操作" width="300">
<el-table-column align="left" fixed="right" label="操作" width="160">
<template #default="scope">
<el-button type="primary" link icon="edit" @click="handleEdit(scope.row.ID)">编辑</el-button>
<el-button type="primary" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
<el-button type="danger" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -68,47 +67,47 @@
</template>
<el-form v-if="dialogFormVisible" ref="editFormRef" label-position="top" label-width="auto" :inline="true"
:model="editForm" :rules="rules">
<el-form-item label="类型" prop="adType" style="width: 88%">
<el-form-item label="类型" prop="adType" style="width: 100%">
<el-select v-model="editForm.adType" placeholder="请选择" allow-create clearable filterable style="width: 100%"
@change="handleChangeAdType">
<el-option v-for="item in adTypeOptions" :key="item.key" :label="item.label" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item label="位置" prop="adPositionId" style="width: 88%">
<el-form-item label="位置" prop="adPositionId" style="width: 100%">
<el-select v-model="editForm.adPositionId" placeholder="请选择" allow-create clearable filterable
style="width: 100%" @change="handleChangePosition">
<el-option v-for="item in positionOptions" :key="item.ID" :label="item.title" :value="item.ID" />
</el-select>
</el-form-item>
<el-form-item label="跳转地址" prop="url" style="width: 88%">
<el-form-item label="跳转地址" prop="url" style="width: 100%">
<el-input v-model="editForm.url" type="url" rows="3" autocomplete="off" style="width: 100%" />
</el-form-item>
<el-form-item label="有效起始日期" prop="validStart" style="width: 88%">
<el-form-item label="有效起始日期" prop="validStart" style="width: 100%">
<el-date-picker v-model="editForm.validStart" :clearable="false" style="width: 100%" :editable="false" />
</el-form-item>
<el-form-item label="有效截止日期" prop="validEnd" style="width: 88%">
<el-form-item label="有效截止日期" prop="validEnd" style="width: 100%">
<el-date-picker v-model="editForm.validEnd" :clearable="false" :editable="false" style="width: 100%" />
</el-form-item>
<el-form-item label="媒体（需要先选择 “类型” 和 “位置”）" prop="mediaUrl" style="width: 88%">
<warning-bar v-if="editForm.adType !== '' && editForm.adPositionId !== ''"
:title="`文件类型为：${uploadInfo.mediaTypeInfo}, 大小不超过${uploadInfo.fileSizeInfo}, 宽*高: ${uploadInfo.mediaWidth}px*${uploadInfo.mediaHeight}px`"
style="display: block; width: 100%;" />
<el-form-item label="媒体（需要先选择 “类型” 和 “位置”）" prop="mediaUrl" style="width: 100%">
<el-alert v-if="editForm.adType !== '' && editForm.adPositionId !== ''" type="info" :closable="false"
style="margin-bottom: 10px;"
:title="`文件类型为：${uploadInfo.mediaTypeInfo}, 大小不超过${uploadInfo.fileSizeInfo}, 宽*高: ${uploadInfo.mediaWidth}px*${uploadInfo.mediaHeight}px`" />
<div v-if="editForm.adType !== '' && editForm.adPositionId !== ''" class="flex flex-wrap gap-3">
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?noSave=0&category=ad_content_imgs`"
:show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFailure"
:before-upload="beforeUpload">
<el-button type="success" plain icon="upload">上传</el-button>
<el-button type="primary" plain icon="upload">上传</el-button>
</el-upload>
</div>
<div class="upload-file-box">
<el-image
v-if="editForm.mediaUrl !== '' && (uploadInfo.mediaType === 'pic' || uploadInfo.mediaType === 'gif')"
:src="editForm.mediaUrl" class="avatar" fit="cover"
style="width: 100%; min-height: 178px; min-width: 178px;" />
style="width: 100%; max-height: 500px; max-width: 500px;" />
<div v-else-if="editForm.mediaUrl !== '' && uploadInfo.mediaType === 'video'">
<video :src="editForm.mediaUrl" controls="controls" :width="uploadInfo.mediaWidth"
:height="uploadInfo.mediaHeight" />
:height="uploadInfo.mediaHeight" style="min-width: 280px; min-height: 200px" />
</div>
</div>
</el-form-item>
@ -121,7 +120,6 @@
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatOnlyDate } from '@/utils/format'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
import {
getAdContentList,
@ -454,3 +452,38 @@ const uploadFailure = () => {
width: 100%;
}
</style>
<style scoped>
.avatar-uploader .avatar {
width: 100%;
height: 100%;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px solid var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.admin-box .el-table td .cell {
line-height: 28px;
}
</style>

8
src/view/ad/position.vue
View File

@ -16,10 +16,10 @@
<el-table-column align="left" label="位置说明" min-width="120" prop="title" />
<el-table-column align="left" label="媒体宽" min-width="60" prop="mediaWidth" />
<el-table-column align="left" label="媒体高" min-width="60" prop="mediaHeight" />
<el-table-column align="left" fixed="right" label="操作" width="300">
<el-table-column align="left" fixed="right" label="操作" width="160">
<template #default="scope">
<el-button type="primary" link icon="edit" @click="handleEdit(scope.row.ID)">编辑</el-button>
<el-button type="primary" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
<el-button type="danger" link icon="delete" @click="handleDelete(scope.row.ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -285,4 +285,8 @@ const uploadFailure = () => {
height: 178px;
text-align: center;
}
.admin-box .el-table td .cell {
line-height: 28px;
}
</style>

0
src/view/content/academician/index.vue Normal file
View File

16
src/view/content/article/index.vue
View File

@ -49,17 +49,19 @@
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="标题/副标题" min-width="350" prop="title">
<el-table-column align="left" label="标题/副标题" min-width="400" prop="title">
<template #default="scope">
<div>
<el-link type="primary" :href="'http://w1.zkzk.org.cn/article/' + scope.row.ID + '.html'" target="_blank">
{{ scope.row.title }}
<el-text :line-clamp="2"> {{ scope.row.title }}</el-text>
</el-link>
<div><small>{{ scope.row.subtitle }}</small></div>
</div>
<el-text :line-clamp="2" size="small">{{ scope.row.subtitle }}</el-text>
</template>
</el-table-column>
<el-table-column align="left" label="摘要" min-width="400" prop="desc" class-name="text-truncate">
<template #default="scope">
<div>{{ scope.row.desc }}</div>
<el-text :line-clamp="3">{{ scope.row.desc }}</el-text>
</template>
</el-table-column>
<el-table-column align="left" label="标签" min-width="150" prop="tags">
@ -101,7 +103,7 @@
<el-table-column align="left" label="状态" width="80">
<template #default="scope">{{ formatStatus(scope.row.status) }}</template>
</el-table-column>
<el-table-column align="left" fixed="right" label="操作" width="140">
<el-table-column align="left" fixed="right" label="操作" width="140" class="dispose-cell">
<template #default="scope">
<div class="flex md-2">
<el-button v-if="scope.row.status === 1" v-auth="btnAuth.submit" type="success" link icon="check"
@ -538,6 +540,10 @@ getTableData()
line-height: 28px;
}
.cell button {
line-height: 22px;
}
.text-truncate .cell {
overflow: hidden;
text-overflow: ellipsis;

2
src/view/content/components/articleEdit.vue
View File

@ -56,7 +56,7 @@
</el-row>
<el-form-item label="文章内容" prop="content">
<div v-if="showDrawer">
<RichEdit v-model="editForm.content" style="height: 50rem;" />
<RichEdit v-model="editForm.content" media-category="article_content_imgs" style="height: 50rem;" />
</div>
</el-form-item>
</el-col>

344
src/view/content/components/entrepreneurEdit.vue Normal file
View File

@ -0,0 +1,344 @@
<template>
<el-drawer v-model="showDrawer" size="80%" :show-close="false" :close-on-click-modal="false"
:close-on-press-escape="false">
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{ !isEdit ? '添加' : '修改' }}企业家</span>
<div>
<el-button type="primary" @click="handleFormSubmit">确 定</el-button>
<el-button @click="handleFormClose">取 消</el-button>
</div>
</div>
</template>
<div v-loading="fullscreenLoading">
<div v-if="showErrMessage != ''">
{{ showErrMessage }}
</div>
<el-form v-else ref="editFormRef" label-position="top" :model="editForm" :rules="rules">
<el-row :gutter="0">
<el-col :span="16">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="姓名" prop="name" style="width: 100%">
<el-input v-model="editForm.name" autocomplete="off" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="企业名称" prop="enterprise" style="width: 100%">
<el-input v-model="editForm.enterprise" autocomplete="off" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="简介" prop="brief">
<el-input v-model="editForm.brief" type="textarea" rows="5" :show-word-limit="true" style="width: 100%"
maxlength="300" autocomplete="off" resize="none" />
</el-form-item>
<el-form-item label="个人详细介绍" prop="description">
<div v-if="showDrawer">
<RichEdit v-model="editForm.description" media-category="entrepreneur_dsc_imgs"
style="height: 30rem;" />
</div>
</el-form-item>
<el-form-item label="企业详细介绍" prop="enterpriseDsc">
<div v-if="showDrawer">
<RichEdit v-model="editForm.enterpriseDsc" media-category="enterprise_dsc_imgs"
style="height: 30rem;" />
</div>
</el-form-item>
</el-col>
<el-col :span="1" align="center">
<el-divider direction="vertical" style="height: 100%" />
</el-col>
<el-col :span="7">
<el-form-item label="头像" prop="avatar" style="width: 100%">
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${avatarInfo.mediaTypeInfo}, 大小不超过${avatarInfo.fileSizeInfo}, 宽*高: ${avatarInfo.mediaWidth}px*${avatarInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?noSave=1&category=entrepreneur_avatar`"
:show-file-list="false" :on-success="(res) => { uploadSuccess(res, 'avatar') }"
:on-error="uploadFailure" :before-upload="(file) => { return beforeUpload(file, avatarInfo) }">
<img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" style="object-fit: cover;">
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="企业视频" prop="videoUrl" style="width: 100%">
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:description="`类型为：${videoInfo.mediaTypeInfo}, 大小不超过${videoInfo.fileSizeInfo}, 宽*高: ${videoInfo.mediaWidth}px*${videoInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader"
:action="`${imgUploadPath}/cms/mediaFile/upload?noSave=1&category=entrepreneur_video`"
:show-file-list="false" :on-success="(res) => { uploadSuccess(res, 'video') }" :on-error="uploadFailure"
:before-upload="(file) => { return beforeUpload(file, videoInfo) }">
<el-button type="primary" plain icon="upload">上传</el-button>
</el-upload>
<video ref="videoRef" controls="controls" :width="300">
<source src />
</video>
</el-form-item>
<el-form-item label="企业二维码" prop="qrcodeUrl" style="width: 100%">
<el-alert type="info" :closable="false" style="margin-bottom: 10px;"
:title="`类型为：${qrcodeInfo.mediaTypeInfo}, 大小不超过${qrcodeInfo.fileSizeInfo}, 宽*高: ${qrcodeInfo.mediaWidth}px*${qrcodeInfo.mediaHeight}px`" />
<el-upload class="avatar-uploader" style="width: 100px; height: 100px"
:action="`${imgUploadPath}/cms/mediaFile/upload?noSave=1&category=entrepreneur_avatar`"
:show-file-list="false" :on-success="(res) => { uploadSuccess(res, 'qrcode') }"
:on-error="uploadFailure" :before-upload="(file) => { return beforeUpload(file, qrcodeInfo) }">
<img v-if="editForm.qrcodeUrl" :src="editForm.qrcodeUrl" class="avatar" style="object-fit: cover;">
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-drawer>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import RichEdit from '@/components/richtext/rich-edit.vue'
import { isImageMime, isVideoMime, isGifMime, checkImageWHEqual } from '@/utils/image'
import {
addEntrepreneur,
updateEntrepreneur,
getEntrepreneurById,
} from '@/api/entrepreneur'
// 组件定义
defineOptions({
name: 'ArticleEdit',
})
const emit = defineEmits(['on-save', 'on-close'])
const props = defineProps({
title: { type: String, default: '' }
})
const showDrawer = ref(false)
const showErrMessage = ref('')
const fullscreenLoading = ref(true)
// ------ 以下为form表单相关 ------
const editFormRef = ref(null)
const editForm = ref({})
const checkFlag = ref(false)
const isEdit = ref(false)
const rules = reactive({
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
enterprise: [
{ required: true, message: '请输入企业名称', trigger: 'blur' }
],
brief: [
{ required: true, message: '请输入简介', trigger: 'blur' }
],
avatar: [
{ required: true, message: '请选择头像', trigger: 'blur' },
],
})
// 初始化弹窗内表格方法
const emptyForm = () => {
checkFlag.value = false
editForm.value = {
ID: 0,
adType: '',
adPositionId: '',
url: '',
validStart: '',
validEnd: '',
mediaUrl: '',
}
}
// 关闭弹窗
const handleFormClose = () => {
showDrawer.value = false
emit('on-close')
}
// 提交表单
const handleFormSubmit = async () => {
editFormRef.value.validate(async valid => {
if (!valid) {
return
}
let res
if (isEdit.value) {
res = await updateEntrepreneur(editForm.value)
} else {
res = await addEntrepreneur(editForm.value)
}
if (res.code === 0) {
ElMessage({
type: 'success',
message: isEdit.value ? '编辑成功' : '添加成功!'
})
showDrawer.value = false
emit('on-save')
}
})
}
// ----- 以下为图片操作 -----
const avatarInfo = {
mediaType: 'pic',
mediaTypeInfo: 'jpg,png,webp,svg',
fileSize: 500,
fileSizeInfo: '500K',
mediaWidth: 280,
mediaHeight: 360,
}
const videoInfo = {
mediaType: 'video',
mediaTypeInfo: 'mp4,webm',
fileSize: 5000,
fileSizeInfo: '5M',
mediaWidth: 300,
mediaHeight: 180,
}
const qrcodeInfo = {
mediaType: 'pic',
mediaTypeInfo: 'jpg,png,webp,svg',
fileSize: 500,
fileSizeInfo: '500K',
mediaWidth: 300,
mediaHeight: 300,
}
const videoRef = ref(null)
const imgUploadPath = import.meta.env.VITE_BASE_API
const beforeUpload = (file, info) => {
const isLtSize = file.size / 1024 < info.fileSize
const isVideo = isVideoMime(file.type)
const isImage = isImageMime(file.type)
const isGif = isGifMime(file.type)
if (info.mediaType === 'pic' && !isImage) {
ElMessage.error('上传文件只能是 ' + info.mediaTypeInfo + ' 格式')
return false
}
if (info.mediaType === 'video' && !isVideo) {
ElMessage.error('上传文件只能是 ' + info.mediaTypeInfo + ' 格式')
return false
}
if (info.mediaType === 'gif' && !isGif) {
ElMessage.error('上传文件只能是 ' + info.mediaTypeInfo + ' 格式')
return false
}
if (!isLtSize) {
ElMessage.error('上传文件大小不能超过 ' + info.fileSizeInfo)
return false
}
if (info.mediaType === 'pic') {
const isSize = checkImageWHEqual(
file, info.mediaWidth, info.mediaHeight
).then(
() => {
return file
},
() => {
ElMessage.error('上传文件宽*高必须为: ' + info.mediaWidth + 'px*' + info.mediaHeight + 'px')
return Promise.reject()
})
return isSize
} else {
return true
}
}
const uploadSuccess = (res, field) => {
const { code, data, msg } = res
if (code !== 0) {
ElMessage({ type: 'error', message: msg })
return
}
if (!data.mediaFile) {
ElMessage({ type: 'error', message: '返回错误，上传失败' })
return
}
if (field === 'avatar') {
editForm.value.avatar = data.mediaFile.url
} else if (field === 'video') {
editForm.value.videUrl = data.mediaFile.url
videoRef.value.src = data.mediaFile.url
} else if (field === 'qrcode') {
editForm.value.qrcodeUrl = data.mediaFile.url
}
}
const uploadFailure = () => {
ElMessage({
type: 'error',
message: '上传失败'
})
}
// 初始化方法
const openPage = async (params) => {
fullscreenLoading.value = true
showDrawer.value = true
isEdit.value = false
emptyForm()
// 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
if (params.ID && params.ID > 0) {
// 编辑
isEdit.value = true
initFormById(params.ID)
} else {
// 新建
fullscreenLoading.value = false
}
}
const initFormById = async (ID) => {
const res = await getEntrepreneurById({ ID: ID })
if (res.code === 0) {
// 初始化表单数据
editForm.value = res.data.entrepreneur
fullscreenLoading.value = false
} else {
ElMessage({
type: 'error',
message: '获取数据失败'
})
showErrMessage.value = '获取数据失败'
}
fullscreenLoading.value = false
}
// 对外暴露方法
defineExpose({ openPage })
</script>
<style scoped>
.avatar-uploader .avatar {
width: 100%;
height: 100%;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px solid var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 150px;
text-align: center;
}
</style>

203
src/view/content/entrepreneur/index.vue Normal file
View File

@ -0,0 +1,203 @@
<template>
<div>
<div class="gva-search-box">
<el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" label-width="0" class="demo-form-inline"
@keyup.enter="handleSubmitSearch">
<el-form-item style="width:300px">
<el-tooltip content="从名称中搜索" placement="top-start">
<el-input v-model="searchInfo.keyword" class="keyword" placeholder="请输入关键词" clearable style="width:100%" />
</el-tooltip>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="handleSubmitSearch">查询</el-button>
<el-button icon="refresh" @click="handleResetSearch">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="handleAdd">新增企业家</el-button>
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length"
@click="handleMultiDelete">删除</el-button>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table ref="multipleTable" :data="tableData" row-key="ID" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40" align="center" />
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="头像" min-width="120" prop="avatar">
<template #default="scope">
<el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="file" fit="cover"
:preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal close-on-press-escape
style="width: 70px; height: 90px" />
</template>
</el-table-column>
<el-table-column align="left" label="姓名/企业" min-width="120" prop="name">
<template #default="scope">
<el-link type="primary" :href="'http://w1.zkzk.org.cn/entrepreneur/' + scope.row.ID + '.html'"
target="_blank">
<el-text size="large" tag="b">{{ scope.row.name }}</el-text>
</el-link>
<div>{{ scope.row.enterprise }}</div>
</template>
</el-table-column>
<el-table-column align="left" label="介绍" min-width="300" prop="brief" class-name="text-truncate">
<template #default="scope">
<el-text :line-clamp="3">{{ scope.row.brief }}</el-text>
</template>
</el-table-column>
<el-table-column align="left" fixed="right" label="操作" width="160">
<template #default="scope">
<el-button type="primary" link icon="edit" @click="handleRowEdit(scope.row.ID)">编辑</el-button>
<el-button type="danger" link icon="delete" @click="handleRowDelete(scope.row.ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
:page-sizes="[10, 30, 50, 100]" :total="total" @current-change="handleCurrentChange"
@size-change="handleSizeChange" />
</div>
</div>
<EntrepreneurEdit ref="elEditRef" :title="editTitle" @on-save="handlerFormSave" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
getEntrepreneurList,
deleteEntrepreneur,
deleteEntrepreneurByIds,
} from '@/api/entrepreneur'
import EntrepreneurEdit from '@/view/content/components/entrepreneurEdit.vue'
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const searchInfo = ref({})
const tableData = ref([])
const multipleSelection = ref([])// 多选数据
const elSearchFormRef = ref()
const initSearchInfo = () => {
searchInfo.value.keyword = ''
page.value = 1
}
initSearchInfo()
const getTableData = async valid => {
const res = await getEntrepreneurList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
if (res.code === 0) {
tableData.value = res.data.list
total.value = res.data.total
}
}
getTableData()
// 重置
const handleResetSearch = () => {
initSearchInfo()
getTableData()
}
// 搜索
const handleSubmitSearch = () => {
elSearchFormRef.value?.validate(async valid => {
if (!valid) return
getTableData()
})
}
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
// 修改页面容量
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// ------ 列表操作相关 -----
// 多选
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
// 批量删除
const handleMultiDelete = () => {
ElMessageBox.confirm('确定要删除所选内容吗?', '请确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async valid => {
const IDs = []
if (multipleSelection.value.length === 0) {
ElMessage({
type: 'warning',
message: '请选择要删除的数据'
})
return
}
multipleSelection.value &&
multipleSelection.value.map(item => {
IDs.push(item.ID)
})
const res = await deleteEntrepreneurByIds({ IDs })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === IDs.length && page.value > 1) {
page.value--
}
getTableData()
}
})
}
// 删除
const handleRowDelete = (ID) => {
ElMessageBox.confirm('此操作将删除企业家, 是否继续?', '请确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async valid => {
const res = await deleteEntrepreneur({ ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
})
if (tableData.value.length === 1 && page.value > 1) {
page.value--
}
getTableData()
}
})
}
const elEditRef = ref(null)
const editTitle = ref('')
// 添加
const handleAdd = () => {
editTitle.value = '添加企业家'
elEditRef.value.openPage({ id: 0 })
}
// 修改
const handleRowEdit = async (ID) => {
editTitle.value = '修改企业家-' + ID
elEditRef.value.openPage({ ID: ID })
}
// 保存后
const handlerFormSave = () => {
getTableData()
}
</script>
<style type="scss">
.admin-box .el-table td .cell {
line-height: 28px;
}
</style>

7
src/view/content/fetcher/article.vue
View File

@ -47,14 +47,13 @@
<el-table-column align="left" label="ID" min-width="60" prop="ID" />
<el-table-column align="left" label="标题" min-width="300" prop="title">
<template #default="scope">
<span>{{ scope.row.title }}</span>
&nbsp;
<a v-if="scope.row.sourceUrl != ''" type="primary" :href="scope.row.sourceUrl" target="_blank">
<el-text tag="b">{{ scope.row.title }}</el-text>
<el-link v-if="scope.row.sourceUrl != ''" type="primary" :href="scope.row.sourceUrl" target="_blank">
<el-icon>
<Link />
</el-icon>
查看原文
</a>
</el-link>
</template>
</el-table-column>
<el-table-column align="left" label="来源" min-width="240" prop="source" />

0
src/view/content/mediaFile/breakpoint.vue → src/view/mediaFile/breakpoint.vue
View File

0
src/view/content/mediaFile/index.vue → src/view/mediaFile/index.vue
View File