From 6935f60bff0777048d545395ccb9d4917f8287e7 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 10 Sep 2025 15:38:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E4=B8=AD=E5=BF=83=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DialogModel/index.vue          |  84 ++++
 src/components/TitleTip/index.vue             |  52 +++
 src/components/UploadImgFormData/index.vue    | 268 +++++++++++
 .../components/addAndEditForm.vue             | 423 ++++++++++++++++++
 src/views/dataManage/product-center/index.vue | 279 +++++++++++-
 5 files changed, 1103 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DialogModel/index.vue
 create mode 100644 src/components/TitleTip/index.vue
 create mode 100644 src/components/UploadImgFormData/index.vue
 create mode 100644 src/views/dataManage/product-center/components/addAndEditForm.vue

diff --git a/src/components/DialogModel/index.vue b/src/components/DialogModel/index.vue
new file mode 100644
index 0000000..1ae871c
--- /dev/null
+++ b/src/components/DialogModel/index.vue
@@ -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>
diff --git a/src/components/TitleTip/index.vue b/src/components/TitleTip/index.vue
new file mode 100644
index 0000000..bc03fe9
--- /dev/null
+++ b/src/components/TitleTip/index.vue
@@ -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>
diff --git a/src/components/UploadImgFormData/index.vue b/src/components/UploadImgFormData/index.vue
new file mode 100644
index 0000000..1f530cf
--- /dev/null
+++ b/src/components/UploadImgFormData/index.vue
@@ -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>
diff --git a/src/views/dataManage/product-center/components/addAndEditForm.vue b/src/views/dataManage/product-center/components/addAndEditForm.vue
new file mode 100644
index 0000000..390f86e
--- /dev/null
+++ b/src/views/dataManage/product-center/components/addAndEditForm.vue
@@ -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>
diff --git a/src/views/dataManage/product-center/index.vue b/src/views/dataManage/product-center/index.vue
index 31865df..3f17b34 100644
--- a/src/views/dataManage/product-center/index.vue
+++ b/src/views/dataManage/product-center/index.vue
@@ -1,8 +1,281 @@
 <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>
 
 <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>
+
+<style scoped>
+.link-text {
+    color: #409eff;
+    text-decoration: none;
+}
+.link-text:hover {
+    color: #409eff;
+    text-decoration: underline;
+}
+</style>