From cc59f5f7f859e4d32d17840e1eac48a3ae84feaa Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 10 Sep 2025 15:52:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A3=E4=BC=A0=E7=89=A9=E6=96=99=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/api/dataManage/pro-materials.js           |   0
 src/api/dataManage/product-center.js          |  37 +++
 src/components/UploadFileFormData/index.vue   | 265 +++++++++++++++++
 .../components/addAndEditForm.vue             | 185 ++++++++++++
 src/views/dataManage/pro-materials/index.vue  | 272 +++++++++++++++++-
 5 files changed, 756 insertions(+), 3 deletions(-)
 create mode 100644 src/api/dataManage/pro-materials.js
 create mode 100644 src/api/dataManage/product-center.js
 create mode 100644 src/components/UploadFileFormData/index.vue
 create mode 100644 src/views/dataManage/pro-materials/components/addAndEditForm.vue

diff --git a/src/api/dataManage/pro-materials.js b/src/api/dataManage/pro-materials.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/dataManage/product-center.js b/src/api/dataManage/product-center.js
new file mode 100644
index 0000000..d852ccf
--- /dev/null
+++ b/src/api/dataManage/product-center.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询产品中心列表
+export function getProductCenterListAPI(data) {
+    return request({
+        url: '/dataManage/product-center/list',
+        method: 'GET',
+        params: data,
+    })
+}
+
+// 新增产品中心
+export function addProductCenterAPI(data) {
+    return request({
+        url: '/dataManage/product-center/add',
+        method: 'POST',
+        data: data,
+    })
+}
+
+// 编辑产品中心
+export function editProductCenterAPI(data) {
+    return request({
+        url: '/dataManage/product-center/edit',
+        method: 'POST',
+        data: data,
+    })
+}
+
+// 删除产品中心
+export function deleteProductCenterAPI(data) {
+    return request({
+        url: '/dataManage/product-center/delete',
+        method: 'POST',
+        data: data,
+    })
+}
diff --git a/src/components/UploadFileFormData/index.vue b/src/components/UploadFileFormData/index.vue
new file mode 100644
index 0000000..67b80df
--- /dev/null
+++ b/src/components/UploadFileFormData/index.vue
@@ -0,0 +1,265 @@
+<template>
+    <div>
+        <el-upload
+            action="#"
+            :limit="limit"
+            :auto-upload="false"
+            :multiple="multiple"
+            :show-file-list="true"
+            :on-error="handleError"
+            :on-exceed="handleExceed"
+            :file-list="fileListInner"
+            :on-remove="handleRemove"
+            :on-change="handleChange"
+            :before-upload="handleBeforeUpload"
+        >
+            <el-button type="text" icon="el-icon-upload" v-if="!isDetail">
+                点击上传
+            </el-button>
+            <div slot="tip" class="el-upload__tip" v-if="isDetail">
+                {{ uploadTip }}
+            </div>
+        </el-upload>
+    </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,
+        },
+        uploadTip: {
+            type: String,
+            default: '请上传文件',
+        },
+    },
+    data() {
+        return {
+            // addOrEditForm: {
+            //     fileList: [],
+            // },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            dialogInnerVisible: false,
+            previewUrl: '',
+            deleteFileList: [],
+        }
+    },
+    methods: {
+        // 删除
+        async handleRemove(file, 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
+            }
+
+            // 判断文件名称是否过长
+            if (file.name.length > 30) {
+                this.$modal.msgError('文件名称不能超过30个字符')
+                return false
+            }
+
+            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
+            }
+
+            // // 替换文件路径中的#号
+            // const newFileName = file.name.replace(/#/g, '@')
+            // const newFile = new File([file], newFileName, { type: file.type })
+
+            // // 修改原始文件的name属性
+            // Object.defineProperty(file, 'name', {
+            //     value: newFileName,
+            // })
+
+            this.$emit('update:fileList', 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/pro-materials/components/addAndEditForm.vue b/src/views/dataManage/pro-materials/components/addAndEditForm.vue
new file mode 100644
index 0000000..7f6efc9
--- /dev/null
+++ b/src/views/dataManage/pro-materials/components/addAndEditForm.vue
@@ -0,0 +1,185 @@
+<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="file">
+                        <UploadFileFormData
+                            :limit="1"
+                            :file-size="10"
+                            :file-type="['jpg', 'png', 'jpeg']"
+                            :file-list.sync="addAndEditForm.file"
+                            :is-uploaded="addAndEditForm.file.length >= 1"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="12">
+                    <el-form-item label="封面" prop="cover">
+                        <UploadFileFormData
+                            :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="12">
+                    <el-form-item label="版本" prop="version">
+                        <el-input v-model="addAndEditForm.version" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="归属产品">
+                        <el-input v-model="addAndEditForm.belongProduct" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="描述" prop="description">
+                        <el-input
+                            clearable
+                            type="textarea"
+                            placeholder="请输入描述"
+                            :autosize="{ minRows: 3, maxRows: 6 }"
+                            v-model="addAndEditForm.description"
+                        />
+                    </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 UploadFileFormData from '@/components/UploadFileFormData'
+export default {
+    name: 'AddAndEditForm',
+    components: { TitleTip, UploadFileFormData },
+    data() {
+        return {
+            currentTab: '1', // 当前激活的Tab名称
+            // 基本信息表单
+            addAndEditForm: {
+                name: '', // 名称
+                type: '', // 类型
+                file: [], // 附件
+                cover: [], // 封面
+                version: '', // 版本
+                belongProduct: '', // 归属产品
+                description: '', // 描述
+            },
+            // 基本信息表单校验规则
+            addAndEditFormRules: {
+                name: [
+                    { required: true, message: '请输入名称', trigger: 'blur' },
+                ],
+                type: [
+                    { required: true, message: '请输入类型', trigger: 'blur' },
+                ],
+                file: [
+                    { required: true, message: '请上传附件', trigger: 'blur' },
+                ],
+                cover: [
+                    { required: true, message: '请上传封面', trigger: 'blur' },
+                ],
+                version: [
+                    {
+                        required: true,
+                        message: '请输入版本',
+                        trigger: 'blur',
+                    },
+                ],
+                description: [
+                    {
+                        required: true,
+                        message: '请输入描述',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+
+    methods: {
+        // 取消操作
+        handleCancel() {
+            // 重置基本信息表单
+            this.$refs.addAndEditForm?.resetFields()
+
+            this.$emit('closeDialog', false)
+        },
+        // 保存操作：校验所有表单
+        async handleSave() {
+            this.$message.closeAll()
+            try {
+                await this.$refs.addAndEditForm.validate()
+
+                this.$message.success('保存成功')
+                this.$emit('closeDialog', true)
+            } catch (error) {
+                // 校验失败，提示用户
+                this.$message.error('请完善所有必填项后再保存')
+            }
+        },
+    },
+}
+</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;
+    }
+}
+</style>
diff --git a/src/views/dataManage/pro-materials/index.vue b/src/views/dataManage/pro-materials/index.vue
index 5ff8bb5..1be2368 100644
--- a/src/views/dataManage/pro-materials/index.vue
+++ b/src/views/dataManage/pro-materials/index.vue
@@ -1,8 +1,274 @@
 <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 === 'file'"> 附件 </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: 'ProMaterials',
+    components: {
+        AddAndEditForm,
+        DialogModel,
+    },
+    data() {
+        return {
+            tableData: [
+                {
+                    name: '产品1',
+                    type: '智慧基建',
+                    version: '1.0.0',
+                    file: 'https://www.baidu.com',
+                    description: '描述',
+                    createBy: 'admin',
+                },
+                {
+                    name: '产品2',
+                    type: '智慧后勤',
+                    version: '1.0.0',
+                    file: 'https://www.baidu.com',
+                    description: '描述',
+                    createBy: 'admin',
+                },
+            ],
+            queryParams: {
+                name: undefined,
+                type: undefined,
+            },
+            columns: [
+                {
+                    prop: 'name',
+                    label: '名称',
+                },
+                {
+                    prop: 'type',
+                    label: '类型',
+                },
+                {
+                    prop: 'version',
+                    label: '版本',
+                },
+                {
+                    prop: 'file',
+                    label: '附件',
+                },
+                {
+                    prop: 'description',
+                    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>