产品中心管理页面完善
This commit is contained in:
BianLzhaoMin
parent
5a24ca6b45
commit
6935f60bff
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<!-- 弹框组件 -->
|
||||||
|
<div>
|
||||||
|
<el-dialog
|
||||||
|
append-to-body
|
||||||
|
:title="dialogConfig.outerTitle"
|
||||||
|
v-if="dialogConfig.outerVisible"
|
||||||
|
:width="dialogConfig.outerWidth"
|
||||||
|
:before-close="handleCloseOuter"
|
||||||
|
:visible.sync="dialogConfig.outerVisible"
|
||||||
|
:style="{
|
||||||
|
'--el-dialog-min-height': dialogConfig.minHeight,
|
||||||
|
'--el-dialog-max-height': dialogConfig.maxHeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 外层弹框内容 -->
|
||||||
|
<slot name="outerContent"> </slot>
|
||||||
|
|
||||||
|
<!-- 内层对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
append-to-body
|
||||||
|
:title="dialogConfig.innerTitle"
|
||||||
|
:width="dialogConfig.innerWidth"
|
||||||
|
v-if="dialogConfig.innerVisible"
|
||||||
|
:before-close="handleCloseInner"
|
||||||
|
:visible.sync="dialogConfig.innerVisible"
|
||||||
|
:style="{
|
||||||
|
'--el-dialog-min-height': dialogConfig.innerMinHeight,
|
||||||
|
'--el-dialog-max-height': dialogConfig.innerMaxHeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 内层弹框内容 -->
|
||||||
|
<slot name="innerContent"></slot>
|
||||||
|
</el-dialog>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
/* 配置项 */
|
||||||
|
dialogConfig: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/* 右上角关闭外层 */
|
||||||
|
handleCloseOuter() {
|
||||||
|
/* 通知父组件更改弹框显示值 */
|
||||||
|
this.$emit('closeDialogOuter', false)
|
||||||
|
},
|
||||||
|
/* 右上角关闭内层 */
|
||||||
|
handleCloseInner() {
|
||||||
|
/* 通知父组件更改弹框显示值 */
|
||||||
|
this.$emit('closeDialogInner', false)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
// height: var(--el-dialog-min-height) !important;
|
||||||
|
min-height: var(--el-dialog-min-height) !important;
|
||||||
|
max-height: var(--el-dialog-max-height) !important;
|
||||||
|
.el-dialog__body {
|
||||||
|
flex: 1 !important;
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
padding: 20px 20px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<div class="title-tip">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<div class="title-tip-text">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title-tip {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-tip span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #409eff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-tip span:first-child {
|
||||||
|
transform: translateX(30%);
|
||||||
|
}
|
||||||
|
.title-tip span:nth-child(2) {
|
||||||
|
background-color: #8cc8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-tip-text {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #363131;
|
||||||
|
font-family: 'PingFang SC', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,268 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-upload
|
||||||
|
action="#"
|
||||||
|
name="files"
|
||||||
|
:limit="limit"
|
||||||
|
:headers="headers"
|
||||||
|
:auto-upload="false"
|
||||||
|
:multiple="multiple"
|
||||||
|
:show-file-list="true"
|
||||||
|
list-type="picture-card"
|
||||||
|
:on-error="handleError"
|
||||||
|
:on-exceed="handleExceed"
|
||||||
|
:file-list="fileListInner"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:on-preview="handlePreview"
|
||||||
|
:on-change="handleChange"
|
||||||
|
:before-upload="handleBeforeUpload"
|
||||||
|
:class="isDetail || isUploaded ? 'upload-img' : ''"
|
||||||
|
>
|
||||||
|
<i class="el-icon-plus" />
|
||||||
|
<div class="upload-img-box">
|
||||||
|
<slot name="upload-img-box"></slot>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
width="30%"
|
||||||
|
append-to-body
|
||||||
|
:before-close="
|
||||||
|
() => {
|
||||||
|
dialogInnerVisible = false
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:visible.sync="dialogInnerVisible"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="previewUrl"
|
||||||
|
style="display: block; max-width: 100%; margin: 0 auto"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getToken } from '@/utils/auth'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 文件列表
|
||||||
|
fileList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 上传地址
|
||||||
|
uploadFileUrl: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
// 文件类型
|
||||||
|
fileType: {
|
||||||
|
type: Array,
|
||||||
|
default: ['png', 'jpg', 'jpeg'],
|
||||||
|
},
|
||||||
|
// 文件大小
|
||||||
|
fileSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
// 限制数量
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
// 是否多选
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否为查看详情
|
||||||
|
isDetail: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否上传的数量已经满足
|
||||||
|
isUploaded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// addOrEditForm: {
|
||||||
|
// fileList: [],
|
||||||
|
// },
|
||||||
|
headers: {
|
||||||
|
Authorization: 'Bearer ' + getToken(),
|
||||||
|
},
|
||||||
|
dialogInnerVisible: false,
|
||||||
|
previewUrl: '',
|
||||||
|
deleteFileList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 删除
|
||||||
|
async handleRemove(file, fileList) {
|
||||||
|
this.$emit('onUploadChange', fileList)
|
||||||
|
// if (file.response && file.response.data.length > 0) {
|
||||||
|
// this.$emit('deleteFile', {
|
||||||
|
// filePath: file.response.data[0].filePath,
|
||||||
|
// isNew: true,
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// if (file.isNew) {
|
||||||
|
// this.$emit('deleteFile', {
|
||||||
|
// filePath: file.filePath,
|
||||||
|
// isNew: true,
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// this.$emit('deleteFile', {
|
||||||
|
// filePath: file.filePath,
|
||||||
|
// isNew: false,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.$emit('update:fileList', fileList)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 预览
|
||||||
|
handlePreview(file) {
|
||||||
|
this.dialogInnerVisible = true
|
||||||
|
this.previewUrl = file.url
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传成功
|
||||||
|
handleSuccess(response, file, fileList) {
|
||||||
|
this.$emit('update:fileList', [])
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$emit('update:fileList', fileList)
|
||||||
|
this.$emit('uploadSuccess')
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError('上传失败')
|
||||||
|
}
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传失败
|
||||||
|
handleError() {
|
||||||
|
this.$modal.msgError('上传失败')
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传前
|
||||||
|
handleBeforeUpload(file) {
|
||||||
|
// 根据file的name的后缀判断是否符合要求
|
||||||
|
console.log(file, 'file')
|
||||||
|
const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||||
|
if (!isFormat) {
|
||||||
|
this.$modal.msgError(
|
||||||
|
`文件格式不正确, 请上传${this.fileType.join(
|
||||||
|
'、',
|
||||||
|
)}格式的文件!`,
|
||||||
|
)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 判断文件大小
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||||
|
if (!isLt) {
|
||||||
|
this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(file.name, 'file.name')
|
||||||
|
|
||||||
|
this.$modal.loading('图片正在上传，请稍候...')
|
||||||
|
// 替换文件路径中的#号
|
||||||
|
const newFileName = file.name.replace(/#/g, '@')
|
||||||
|
const newFile = new File([file], newFileName, { type: file.type })
|
||||||
|
|
||||||
|
// 修改原始文件的name属性
|
||||||
|
Object.defineProperty(file, 'name', {
|
||||||
|
value: newFileName,
|
||||||
|
})
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 超出限制
|
||||||
|
handleExceed(files, fileList) {
|
||||||
|
this.$modal.msgError(`上传的图片数量不能超过 ${this.limit} 个`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 文件发生变化
|
||||||
|
handleChange(file, fileList) {
|
||||||
|
console.log(file, fileList, 'file, fileList')
|
||||||
|
|
||||||
|
const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||||
|
if (!isFormat) {
|
||||||
|
this.$modal.msgError(
|
||||||
|
`文件格式不正确, 请上传${this.fileType.join(
|
||||||
|
'、',
|
||||||
|
)}格式的文件!`,
|
||||||
|
)
|
||||||
|
|
||||||
|
this.$emit(
|
||||||
|
'update:fileList',
|
||||||
|
fileList.filter((item) => item.uid !== file.uid),
|
||||||
|
)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// 判断文件大小
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||||
|
if (!isLt) {
|
||||||
|
this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
|
||||||
|
this.$emit(
|
||||||
|
'update:fileList',
|
||||||
|
fileList.filter((item) => item.uid !== file.uid),
|
||||||
|
)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断文件名称是否过长
|
||||||
|
if (file.name.length > 40) {
|
||||||
|
this.$modal.msgError('文件名称不能超过40个字符')
|
||||||
|
this.$emit(
|
||||||
|
'update:fileList',
|
||||||
|
fileList.filter((item) => item.uid !== file.uid),
|
||||||
|
)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.$emit('update:fileList', fileList)
|
||||||
|
this.$emit('onUploadChange', fileList)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
fileListInner: {
|
||||||
|
get() {
|
||||||
|
return this.fileList
|
||||||
|
},
|
||||||
|
set(newValue) {
|
||||||
|
this.$emit('update:fileList', newValue)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep .el-upload--picture-card {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.upload-img-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .upload-img .el-upload--picture-card {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,423 @@
|
||||||
|
<template>
|
||||||
|
<div class="add-and-edit-form">
|
||||||
|
<!-- 基本信息表单 -->
|
||||||
|
<TitleTip title="基本信息" />
|
||||||
|
<el-form
|
||||||
|
ref="addAndEditForm"
|
||||||
|
label-width="120px"
|
||||||
|
:model="addAndEditForm"
|
||||||
|
:rules="addAndEditFormRules"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="addAndEditForm.name" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="类型" prop="type">
|
||||||
|
<el-input v-model="addAndEditForm.type" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="链接" prop="link">
|
||||||
|
<el-input v-model="addAndEditForm.link" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="封面" prop="cover">
|
||||||
|
<UploadImgFormData
|
||||||
|
:limit="1"
|
||||||
|
:file-size="10"
|
||||||
|
:file-type="['jpg', 'png', 'jpeg']"
|
||||||
|
:file-list.sync="addAndEditForm.cover"
|
||||||
|
:is-uploaded="addAndEditForm.cover.length >= 1"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="是否支持访问" prop="isSupportAccess">
|
||||||
|
<el-radio-group
|
||||||
|
v-model="addAndEditForm.isSupportAccess"
|
||||||
|
>
|
||||||
|
<el-radio :label="1">是</el-radio>
|
||||||
|
<el-radio :label="0">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="产品介绍" prop="productIntroduction">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||||
|
v-model="addAndEditForm.productIntroduction"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 产品案例Tabs区域 -->
|
||||||
|
<TitleTip title="产品案例" />
|
||||||
|
<el-row class="add-product-case">
|
||||||
|
<el-col :span="21" class="add-product-case-tags">
|
||||||
|
<el-tabs
|
||||||
|
closable
|
||||||
|
type="card"
|
||||||
|
v-model="currentTab"
|
||||||
|
@tab-remove="handleRemoveTab"
|
||||||
|
@tab-click="handleTabClick"
|
||||||
|
>
|
||||||
|
<el-tab-pane
|
||||||
|
:key="item.name"
|
||||||
|
:name="item.name"
|
||||||
|
:label="item.title"
|
||||||
|
v-for="item in editableTabs"
|
||||||
|
>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="3">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="handleAddProductCase"
|
||||||
|
style="height: 40px; width: 100%"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 产品案例表单：绑定当前Tab的formInfo -->
|
||||||
|
<el-form
|
||||||
|
label-width="120px"
|
||||||
|
v-if="currentTabFormInfo"
|
||||||
|
:model="currentTabFormInfo"
|
||||||
|
:ref="`caseForm_${currentTab}`"
|
||||||
|
:rules="addAndEditFormCaseRules"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="案例公司" prop="caseCompany">
|
||||||
|
<el-input v-model="currentTabFormInfo.caseCompany" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="案例图片" prop="caseSort">
|
||||||
|
<el-input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
v-model.number="currentTabFormInfo.caseSort"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="案例图片" prop="caseImage">
|
||||||
|
<UploadImgFormData
|
||||||
|
:limit="6"
|
||||||
|
:file-size="10"
|
||||||
|
:file-type="['jpg', 'png', 'jpeg']"
|
||||||
|
:file-list.sync="currentTabFormInfo.caseImage"
|
||||||
|
:is-uploaded="
|
||||||
|
currentTabFormInfo.caseImage.length >= 6
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="案例介绍" prop="caseIntroduction">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||||
|
v-model="currentTabFormInfo.caseIntroduction"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<el-row class="add-and-edit-form-footer">
|
||||||
|
<el-button size="mini" type="info" @click="handleCancel">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
<el-button size="mini" type="primary" @click="handleSave">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TitleTip from '@/components/TitleTip'
|
||||||
|
import UploadImgFormData from '@/components/UploadImgFormData'
|
||||||
|
export default {
|
||||||
|
name: 'AddAndEditForm',
|
||||||
|
components: { TitleTip, UploadImgFormData },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentTab: '1', // 当前激活的Tab名称
|
||||||
|
// 基本信息表单
|
||||||
|
addAndEditForm: {
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
link: '',
|
||||||
|
cover: '',
|
||||||
|
isSupportAccess: 1,
|
||||||
|
productIntroduction: '', // 修复原代码中缺少的字段
|
||||||
|
},
|
||||||
|
// 基本信息表单校验规则
|
||||||
|
addAndEditFormRules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
type: [
|
||||||
|
{ required: true, message: '请输入类型', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{ required: true, message: '请输入链接', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
cover: [
|
||||||
|
{ required: true, message: '请输入封面', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
isSupportAccess: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择是否支持访问',
|
||||||
|
trigger: 'change',
|
||||||
|
}, // 优化：radio用change触发
|
||||||
|
],
|
||||||
|
productIntroduction: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入产品介绍',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 案例表单校验规则
|
||||||
|
addAndEditFormCaseRules: {
|
||||||
|
caseCompany: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入案例公司',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
caseImage: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入案例图片',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
caseSort: [
|
||||||
|
{ required: true, message: '请输入排序', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
type: 'number',
|
||||||
|
message: '排序必须为数字',
|
||||||
|
trigger: 'blur',
|
||||||
|
}, // 新增：数字校验
|
||||||
|
],
|
||||||
|
caseIntroduction: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入案例介绍',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 案例Tabs数据：每个Tab包含独立的表单信息
|
||||||
|
editableTabs: [
|
||||||
|
{
|
||||||
|
title: '案例1',
|
||||||
|
name: '1',
|
||||||
|
formInfo: {
|
||||||
|
caseSort: 1,
|
||||||
|
caseImage: '',
|
||||||
|
caseCompany: '',
|
||||||
|
caseIntroduction: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前Tab的表单数据（简化引用）
|
||||||
|
currentTabFormInfo() {
|
||||||
|
const currentTab = this.editableTabs.find(
|
||||||
|
(tab) => tab.name === this.currentTab,
|
||||||
|
)
|
||||||
|
return currentTab ? currentTab.formInfo : null
|
||||||
|
},
|
||||||
|
// 当前Tab的索引（简化引用）
|
||||||
|
currentTabIndex() {
|
||||||
|
return this.editableTabs.findIndex(
|
||||||
|
(tab) => tab.name === this.currentTab,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 取消操作
|
||||||
|
handleCancel() {
|
||||||
|
// 重置基本信息表单
|
||||||
|
this.$refs.addAndEditForm?.resetFields()
|
||||||
|
// 重置所有案例表单
|
||||||
|
this.editableTabs.forEach((tab) => {
|
||||||
|
this.$refs[`caseForm_${tab.name}`]?.resetFields()
|
||||||
|
})
|
||||||
|
// 回到第一个Tab
|
||||||
|
this.currentTab = '1'
|
||||||
|
|
||||||
|
this.$emit('closeDialog', false)
|
||||||
|
},
|
||||||
|
// 保存操作：校验所有表单
|
||||||
|
async handleSave() {
|
||||||
|
this.$message.closeAll()
|
||||||
|
try {
|
||||||
|
// 1. 校验基本信息表单
|
||||||
|
await this.$refs.addAndEditForm.validate()
|
||||||
|
|
||||||
|
// 2. 校验所有案例表单
|
||||||
|
const caseFormPromises = this.editableTabs.map((tab) => {
|
||||||
|
return this.$refs[`caseForm_${tab.name}`].validate()
|
||||||
|
})
|
||||||
|
await Promise.all(caseFormPromises)
|
||||||
|
|
||||||
|
// 3. 所有校验通过，提交数据
|
||||||
|
const submitData = {
|
||||||
|
...this.addAndEditForm,
|
||||||
|
cases: this.editableTabs.map((tab) => tab.formInfo),
|
||||||
|
}
|
||||||
|
console.log('提交数据：', submitData)
|
||||||
|
// 这里可以添加接口请求逻辑
|
||||||
|
this.$message.success('保存成功')
|
||||||
|
this.$emit('closeDialog', true)
|
||||||
|
} catch (error) {
|
||||||
|
// 校验失败，提示用户
|
||||||
|
this.$message.error('请完善所有必填项后再保存')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 新增产品案例Tab
|
||||||
|
handleAddProductCase() {
|
||||||
|
const newTabIndex = this.editableTabs.length + 1
|
||||||
|
const newTab = {
|
||||||
|
title: `案例${newTabIndex}`,
|
||||||
|
name: newTabIndex.toString(),
|
||||||
|
formInfo: {
|
||||||
|
caseCompany: '',
|
||||||
|
caseImage: '',
|
||||||
|
caseIntroduction: '',
|
||||||
|
caseSort: newTabIndex,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.editableTabs.push(newTab)
|
||||||
|
// 自动切换到新Tab
|
||||||
|
this.currentTab = newTab.name
|
||||||
|
},
|
||||||
|
// 移除产品案例Tab
|
||||||
|
handleRemoveTab(removeTabName) {
|
||||||
|
// 禁止删除最后一个Tab
|
||||||
|
if (this.editableTabs.length <= 1) {
|
||||||
|
this.$message.warning('至少保留一个案例')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 找到要删除的Tab索引
|
||||||
|
const removeIndex = this.editableTabs.findIndex(
|
||||||
|
(tab) => tab.name === removeTabName,
|
||||||
|
)
|
||||||
|
this.editableTabs.splice(removeIndex, 1)
|
||||||
|
|
||||||
|
// 如果删除的是当前激活的Tab，切换到第一个Tab
|
||||||
|
if (removeTabName === this.currentTab) {
|
||||||
|
this.currentTab = this.editableTabs[0].name
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新计算排序（可选：保持排序连续）
|
||||||
|
this.editableTabs.forEach((tab, index) => {
|
||||||
|
tab.formInfo.caseSort = index + 1
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// Tab切换事件：触发当前Tab的表单校验
|
||||||
|
handleTabClick() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs[`caseForm_${this.currentTab}`]?.validate(
|
||||||
|
(isValid) => {},
|
||||||
|
)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-and-edit-form {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
|
||||||
|
.add-and-edit-form-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 10px;
|
||||||
|
border-top: 1px solid #e5e6e7;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-product-case {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
// .add-product-case-tags {
|
||||||
|
// border: 1px solid #e5e6e7;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__header {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--card > .el-tabs__header {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__nav-scroll {
|
||||||
|
border: 1px solid #e5e6e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
|
||||||
|
background-color: #1abc9c;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,8 +1,281 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 产品中心 -->
|
<!-- 产品中心管理 -->
|
||||||
<div class="app-container"> 产品中心列表 </div>
|
<div class="app-container">
|
||||||
|
<el-form
|
||||||
|
size="small"
|
||||||
|
:inline="true"
|
||||||
|
ref="queryForm"
|
||||||
|
:model="queryParams"
|
||||||
|
>
|
||||||
|
<el-form-item prop="name">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
placeholder="请输入名称"
|
||||||
|
v-model="queryParams.name"
|
||||||
|
@keyup.enter.native="onHandleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="status">
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
placeholder="选择类型"
|
||||||
|
v-model="queryParams.type"
|
||||||
|
>
|
||||||
|
<el-option value="1" label="智慧基建" />
|
||||||
|
<el-option value="2" label="智慧后勤" />
|
||||||
|
<el-option value="3" label="数智装备" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
@click="onHandleQuery"
|
||||||
|
icon="el-icon-search"
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="onResetQuery"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="onHandleAdd"
|
||||||
|
>
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-upload"
|
||||||
|
@click="onHandleImport"
|
||||||
|
>
|
||||||
|
导入
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="onHandleExport"
|
||||||
|
>
|
||||||
|
导出
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border>
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
label="序号"
|
||||||
|
width="50"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
:key="column.prop"
|
||||||
|
:prop="column.prop"
|
||||||
|
:label="column.label"
|
||||||
|
v-for="column in columns"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<template v-if="column.prop === 'cover'">
|
||||||
|
<ImagePreview
|
||||||
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
||||||
|
:width="50"
|
||||||
|
:height="50"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.prop === 'link'">
|
||||||
|
<a
|
||||||
|
:href="scope.row[column.prop]"
|
||||||
|
target="_blank"
|
||||||
|
class="link-text"
|
||||||
|
>{{ scope.row[column.prop] }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[column.prop] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="success"
|
||||||
|
style="padding: 4px 8px"
|
||||||
|
@click="onHandleEdit(scope.row)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
style="padding: 4px 8px"
|
||||||
|
@click="onHandleDelete(scope.row)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 新增和编辑表单 -->
|
||||||
|
|
||||||
|
<DialogModel
|
||||||
|
:dialogConfig="dialogConfig"
|
||||||
|
@closeDialogOuter="handleCloseDialogOuter"
|
||||||
|
>
|
||||||
|
<template #outerContent>
|
||||||
|
<AddAndEditForm @closeDialog="closeDialog" />
|
||||||
|
</template>
|
||||||
|
</DialogModel>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {}
|
import AddAndEditForm from './components/addAndEditForm.vue'
|
||||||
|
import DialogModel from '@/components/DialogModel'
|
||||||
|
export default {
|
||||||
|
name: 'ProductCenter',
|
||||||
|
components: {
|
||||||
|
AddAndEditForm,
|
||||||
|
DialogModel,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
name: '产品1',
|
||||||
|
type: '智慧基建',
|
||||||
|
cover: 'https://www.baidu.com',
|
||||||
|
link: 'https://www.baidu.com',
|
||||||
|
createBy: 'admin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产品2',
|
||||||
|
type: '智慧后勤',
|
||||||
|
cover: 'https://www.baidu.com',
|
||||||
|
link: 'https://www.baidu.com',
|
||||||
|
createBy: 'admin',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
queryParams: {
|
||||||
|
name: undefined,
|
||||||
|
type: undefined,
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
prop: 'name',
|
||||||
|
label: '名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'type',
|
||||||
|
label: '类型',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'cover',
|
||||||
|
label: '封面',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'link',
|
||||||
|
label: '链接',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'createBy',
|
||||||
|
label: '创建人',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'createTime',
|
||||||
|
label: '创建时间',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
dialogConfig: {
|
||||||
|
outerTitle: '新增',
|
||||||
|
outerVisible: false,
|
||||||
|
outerWidth: '70%',
|
||||||
|
minHeight: '50vh',
|
||||||
|
maxHeight: '90vh',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onHandleQuery() {
|
||||||
|
console.log(this.queryParams)
|
||||||
|
},
|
||||||
|
onResetQuery() {
|
||||||
|
this.queryParams = {
|
||||||
|
name: undefined,
|
||||||
|
type: undefined,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHandleAdd() {
|
||||||
|
console.log('新增')
|
||||||
|
this.dialogConfig.outerTitle = '新增'
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
onHandleImport() {
|
||||||
|
console.log('导入')
|
||||||
|
},
|
||||||
|
onHandleExport() {
|
||||||
|
console.log('导出')
|
||||||
|
},
|
||||||
|
onHandleEdit(row) {
|
||||||
|
console.log('编辑', row)
|
||||||
|
this.dialogConfig.outerTitle = '编辑'
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
onHandleDelete(row) {
|
||||||
|
console.log('删除', row)
|
||||||
|
},
|
||||||
|
// 关闭弹框
|
||||||
|
handleCloseDialogOuter() {
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
},
|
||||||
|
// 关闭弹框 由子组件调用
|
||||||
|
closeDialog(isSuccess) {
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
if (isSuccess) {
|
||||||
|
this.onHandleQuery()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.onHandleQuery()
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.link-text {
|
||||||
|
color: #409eff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.link-text:hover {
|
||||||
|
color: #409eff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue