优化

src/api/dataManage/pro-materials.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+import request_formdata from '@/utils/request_formdata'
+
+// 查询宣传物料列表
+export function getProMaterialsListAPI(data) {
+    return request({
+        url: '/material/list',
+        method: 'GET',
+        params: data,
+    })
+}
+
+// 新增宣传物料
+export function addProMaterialsAPI(data) {
+    return request_formdata({
+        url: '/material',
+        method: 'POST',
+        data,
+    })
+}
+
+// 编辑产品中心
+export function editProductCenterAPI(data) {
+    return request_formdata({
+        url: '//material/edit',
+        method: 'POST',
+        data,
+    })
+}
+
+// 删除产品中心
+export function deleteProductCenterAPI(id) {
+    return request({
+        url: `/material/${id}`,
+        method: 'POST',
+        data: { id },
+    })
+}
+
+// 获取产品中心详情
+export function getProductCenterDetailAPI(id) {
+    return request({
+        url: `/material/${id}`,
+        method: 'GET',
+    })
+}
+
+// 获取产品列表
+export function getProductListAPI() {
+    return request({
+        url: '/select/selectProduct',
+        method: 'POST',
+    })
+}

src/components/UploadFileFormData/index.vue

@@ -137,15 +137,15 @@ export default {
         handleBeforeUpload(file) {
             // 根据file的name的后缀判断是否符合要求
             // console.log(file, 'file')
-            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            // const isFormat = this.fileType.some((e) => file.name.endsWith(e))
-            if (!isFormat) {
+            // if (!isFormat) {
-                this.$modal.msgError(
+            //     this.$modal.msgError(
-                    `文件格式不正确, 请上传${this.fileType.join(
+            //         `文件格式不正确, 请上传${this.fileType.join(
-                        '、',
+            //             '、',
-                    )}格式的文件!`,
+            //         )}格式的文件!`,
-                )
+            //     )
-                return false
+            //     return false
-            }
+            // }
             // 判断文件大小
             const isLt = file.size / 1024 / 1024 < this.fileSize
             if (!isLt) {
@@ -181,20 +181,20 @@ export default {
         handleChange(file, fileList) {
             // console.log(file, fileList, 'file, fileList')
 
-            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
+            // const isFormat = this.fileType.some((e) => file.name.endsWith(e))
-            if (!isFormat) {
+            // if (!isFormat) {
-                this.$modal.msgError(
+            //     this.$modal.msgError(
-                    `文件格式不正确, 请上传${this.fileType.join(
+            //         `文件格式不正确, 请上传${this.fileType.join(
-                        '、',
+            //             '、',
-                    )}格式的文件!`,
+            //         )}格式的文件!`,
-                )
+            //     )
 
-                this.$emit(
+            //     this.$emit(
-                    'update:fileList',
+            //         'update:fileList',
-                    fileList.filter((item) => item.uid !== file.uid),
+            //         fileList.filter((item) => item.uid !== file.uid),
-                )
+            //     )
-                return false
+            //     return false
-            }
+            // }
             // 判断文件大小
             const isLt = file.size / 1024 / 1024 < this.fileSize
             if (!isLt) {

src/views/dataManage/pro-materials/components/addAndEditForm.vue

@@ -11,12 +11,32 @@
             <el-row>
                 <el-col :span="12">
                     <el-form-item label="名称" prop="name">
-                        <el-input v-model="addAndEditForm.name" />
+                        <el-input
+                            clearable
+                            maxlength="50"
+                            show-word-limit
+                            placeholder="请输入名称"
+                            v-model.trim="addAndEditForm.name"
+                        />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                    <el-form-item label="类型" prop="type">
+                    <el-form-item label="类型" prop="typeId">
-                        <el-input v-model="addAndEditForm.type" />
+                        <el-select
+                            clearable
+                            filterable
+                            style="width: 100%"
+                            placeholder="请选择类型"
+                            @change="handleTypeIdChange"
+                            v-model="addAndEditForm.typeId"
+                        >
+                            <el-option
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                                v-for="item in dict.type.tb_product_type"
+                            />
+                        </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -25,8 +45,8 @@
                     <el-form-item label="附件" prop="file">
                         <UploadFileFormData
                             :limit="1"
-                            :file-size="10"
+                            :file-size="500"
-                            :file-type="['jpg', 'png', 'jpeg']"
+                            :file-type="[]"
                             :file-list.sync="addAndEditForm.file"
                             :is-uploaded="addAndEditForm.file.length >= 1"
                         />
@@ -37,8 +57,8 @@
                     <el-form-item label="封面" prop="cover">
                         <UploadFileFormData
                             :limit="1"
-                            :file-size="10"
+                            :file-size="20"
-                            :file-type="['jpg', 'png', 'jpeg']"
+                            :file-type="['png', 'jpg', 'jpeg']"
                             :file-list.sync="addAndEditForm.cover"
                             :is-uploaded="addAndEditForm.cover.length >= 1"
                         />
@@ -49,12 +69,33 @@
             <el-row>
                 <el-col :span="12">
                     <el-form-item label="版本" prop="version">
-                        <el-input v-model="addAndEditForm.version" />
+                        <el-input
+                            clearable
+                            maxlength="10"
+                            show-word-limit
+                            placeholder="请输入版本"
+                            v-model.trim="addAndEditForm.version"
+                        />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="归属产品">
-                        <el-input v-model="addAndEditForm.belongProduct" />
+                        <el-select
+                            clearable
+                            filterable
+                            multiple
+                            style="width: 100%"
+                            placeholder="请选择类型"
+                            @change="handleProductIdChange"
+                            v-model="addAndEditForm.productId"
+                        >
+                            <el-option
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                                v-for="item in productList"
+                            />
+                        </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -64,10 +105,12 @@
                     <el-form-item label="描述" prop="description">
                         <el-input
                             clearable
+                            maxlength="500"
+                            show-word-limit
                             type="textarea"
                             placeholder="请输入描述"
-                            :autosize="{ minRows: 3, maxRows: 6 }"
                             v-model="addAndEditForm.description"
+                            :autosize="{ minRows: 6, maxRows: 10 }"
                         />
                     </el-form-item>
                 </el-col>
@@ -87,22 +130,41 @@
 </template>
 
 <script>
+import {
+    addProMaterialsAPI,
+    editProductCenterAPI,
+    getProductCenterDetailAPI,
+    getProductListAPI,
+} from '@/api/dataManage/pro-materials'
 import TitleTip from '@/components/TitleTip'
 import UploadFileFormData from '@/components/UploadFileFormData'
 export default {
     name: 'AddAndEditForm',
+    dicts: ['tb_product_type'],
     components: { TitleTip, UploadFileFormData },
+    props: {
+        detailsId: {
+            type: Number,
+        },
+        formType: {
+            type: Number,
+            default: 1,
+        },
+    },
     data() {
         return {
             currentTab: '1', // 当前激活的Tab名称
+            productList: [],
             // 基本信息表单
             addAndEditForm: {
                 name: '', // 名称
-                type: '', // 类型
+                typeId: '', // 类型
+                typeName: '', // 类型名称
                 file: [], // 附件
                 cover: [], // 封面
                 version: '', // 版本
-                belongProduct: '', // 归属产品
+                productName: '', // 归属产品
+                productId: '', // 归属产品
                 description: '', // 描述
             },
             // 基本信息表单校验规则
@@ -110,7 +172,7 @@ export default {
                 name: [
                     { required: true, message: '请输入名称', trigger: 'blur' },
                 ],
-                type: [
+                typeId: [
                     { required: true, message: '请输入类型', trigger: 'blur' },
                 ],
                 file: [
@@ -137,6 +199,10 @@ export default {
         }
     },
 
+    created() {
+        this.getProductList()
+    },
+
     methods: {
         // 取消操作
         handleCancel() {
@@ -151,13 +217,107 @@ export default {
             try {
                 await this.$refs.addAndEditForm.validate()
 
-                this.$message.success('保存成功')
+                // 组装参数
-                this.$emit('closeDialog', true)
+                const {
+                    name, // 名称
+                    file, // 附件
+                    cover, // 封面
+                    typeId, // 类型
+                    version, // 版本
+                    typeName, // 类型名称
+                    productId, // 归属产品
+                    productName, // 归属产品
+                    description,
+                } = this.addAndEditForm
+                const params = {
+                    name, // 名称
+                    typeId, // 类型
+                    version, // 版本
+                    typeName, // 类型名称
+                    productName, // 归属产品
+                    description,
+                    productId: productId.join(','),
+                }
+                const formData = new FormData()
+                const fileMsg = []
+
+                file.forEach((item) => {
+                    if (!item.id) {
+                        formData.append('files', item.raw)
+                        fileMsg.push({ type: 1 })
+                    }
+                })
+
+                cover.forEach((item) => {
+                    if (!item.id) {
+                        formData.append('files', item.raw)
+                        fileMsg.push({ type: 2 })
+                    }
+                })
+
+                formData.append('fileMsg', JSON.stringify(fileMsg))
+                formData.append('params', JSON.stringify(params))
+
+                const res = await addProMaterialsAPI(formData)
+                console.log(res, 'res')
+
+                if (res.code === 200) {
+                    this.$message.success('保存成功')
+                    this.$emit('closeDialog', true)
+                }
+
+                // this.$message.success('保存成功')
+                // this.$emit('closeDialog', true)
             } catch (error) {
                 // 校验失败，提示用户
-                this.$message.error('请完善所有必填项后再保存')
+                // this.$message.error('请完善所有必填项后再保存')
             }
         },
+
+        // 类型ID改变事件
+        handleTypeIdChange(value) {
+            this.addAndEditForm.typeName = this.dict.type.tb_product_type.find(
+                (item) => item.value === value,
+            ).label
+        },
+
+        // 获取归属产品下拉选
+        async getProductList() {
+            const res = await getProductListAPI()
+
+            this.productList = res.data
+        },
+
+        // 归属产品ID改变事件
+        handleProductIdChange(value) {
+            this.addAndEditForm.productName = ''
+            if (value.length > 0) {
+                {
+                    value.forEach((item) => {
+                        this.addAndEditForm.productName +=
+                            this.productList.find((j) => item == j.value).label
+                    })
+                }
+            }
+        },
+
+        // 获取宣传物料详情
+        async getProductCenterDetail() {
+            const res = await getProductCenterDetailAPI(this.detailsId)
+
+            console.log(res, '宣传物料详情')
+        },
+    },
+
+    watch: {
+        formType: {
+            handler(newVal) {
+                if (newVal === 2) {
+                    this.getProductCenterDetail()
+                }
+            },
+            immediate: true,
+        },
     },
 }
 </script>

src/views/dataManage/pro-materials/index.vue

@@ -58,7 +58,7 @@
                     新增
                 </el-button>
             </el-col>
-            <el-col :span="1.5">
+            <!-- <el-col :span="1.5">
                 <el-button
                     plain
                     size="mini"
@@ -79,7 +79,7 @@
                 >
                     导出
                 </el-button>
-            </el-col>
+            </el-col> -->
         </el-row>
 
         <!-- 表格 -->
@@ -128,6 +128,12 @@
                 </template>
             </el-table-column>
         </el-table>
+        <pagination
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getProMaterialsListFun"
+        />
 
         <!-- 新增和编辑表单 -->
 
@@ -136,15 +142,23 @@
             @closeDialogOuter="handleCloseDialogOuter"
         >
             <template #outerContent>
-                <AddAndEditForm @closeDialog="closeDialog" />
+                <AddAndEditForm
+                    :formType="formType"
+                    :detailsId="detailsId"
+                    @closeDialog="closeDialog"
+                />
             </template>
         </DialogModel>
     </div>
 </template>
 
 <script>
-import AddAndEditForm from './components/addAndEditForm.vue'
+import {
+    getProMaterialsListAPI,
+    deleteProductCenterAPI,
+} from '@/api/dataManage/pro-materials'
 import DialogModel from '@/components/DialogModel'
+import AddAndEditForm from './components/addAndEditForm.vue'
 export default {
     name: 'ProMaterials',
     components: {
@@ -153,27 +167,15 @@ export default {
     },
     data() {
         return {
-            tableData: [
+            total: 0,
-                {
+            formType: 1,
-                    name: '产品1',
+            detailsId: null,
-                    type: '智慧基建',
+            tableData: [],
-                    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,
+                typeId: undefined,
+                pageNum: 1,
+                pageSize: 10,
             },
             columns: [
                 {
@@ -181,7 +183,7 @@ export default {
                     label: '名称',
                 },
                 {
-                    prop: 'type',
+                    prop: 'typeName',
                     label: '类型',
                 },
                 {
@@ -197,7 +199,7 @@ export default {
                     label: '描述',
                 },
                 {
-                    prop: 'createBy',
+                    prop: 'createUser',
                     label: '创建人',
                 },
                 {
@@ -215,9 +217,19 @@ export default {
             },
         }
     },
+    created() {
+        this.getProMaterialsListFun()
+    },
     methods: {
+        // 获取列表数据
+        async getProMaterialsListFun() {
+            const res = await getProMaterialsListAPI(this.queryParams)
+            this.tableData = res?.rows
+            this.total = res?.total
+        },
         onHandleQuery() {
             console.log(this.queryParams)
+            this.getProMaterialsListFun()
         },
         onResetQuery() {
             this.queryParams = {
@@ -226,7 +238,8 @@ export default {
             }
         },
         onHandleAdd() {
-            console.log('新增')
+            this.formType = 1
+            this.detailsId = null
             this.dialogConfig.outerTitle = '新增'
             this.dialogConfig.outerVisible = true
         },
@@ -237,12 +250,27 @@ export default {
             console.log('导出')
         },
         onHandleEdit(row) {
-            console.log('编辑', row)
+            this.formType = 2
+            this.detailsId = row.id
             this.dialogConfig.outerTitle = '编辑'
             this.dialogConfig.outerVisible = true
         },
         onHandleDelete(row) {
-            console.log('删除', row)
+            this.$confirm('确定删除该宣传物料吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    const res = await deleteProductCenterAPI(row.id)
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('删除成功')
+                        this.onHandleQuery()
+                    }
+                })
+                .catch(() => {
+                    console.log('取消')
+                })
         },
         // 关闭弹框
         handleCloseDialogOuter() {
@@ -256,9 +284,6 @@ export default {
             }
         },
     },
-    created() {
-        // this.onHandleQuery()
-    },
 }
 </script>