组件库相关完成

src/utils/baseUrl.js

@@ -1,6 +1,6 @@
 const URL = {
-  baseUrl: 'https://admin.bjzxtw.org.cn/zxtapi',//正式环境
-  //baseUrl: 'http://183.131.25.186:9501',//测试环境
+  // baseUrl: 'https://admin.bjzxtw.org.cn/zxtapi',//正式环境
+  baseUrl: 'http://183.131.25.186:9501',//测试环境
   //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
   //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境

src/views/componentGallery/module.vue

@@ -83,14 +83,17 @@
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
                     <el-form-item label="关联版块:" prop="plateName">
-                        <el-cascader v-model="selectedOptions" :options="styleOptions" :props="cascaderProps"
-                            @change="handleChange" placeholder="请选择关联的版块名称" clearable></el-cascader>
+                        <el-cascader v-model="ruleForm.plateName" :options="styleOptions" :props="cascaderProps"
+                            :disabled="this.dialogName === '编辑'" @change="handleChange" placeholder="请选择关联的版块名称"
+                            clearable>
+                        </el-cascader>
                     </el-form-item>
                     <el-form-item label="组件名称:" prop="component_name">
                         <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
                     </el-form-item>
                     <el-form-item label="组件代码:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"></el-input>
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
                     <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
                         :class="['custom-form-item']" class="custom-align-right">
@@ -100,7 +103,7 @@
                                 @mouseleave="hovering = false">
                                 <!-- 上传组件 -->
                                 <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload">
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
                                     <!-- 预览图片 -->
                                     <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                     <!-- 上传图标 -->
@@ -115,7 +118,8 @@
                                     <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
                                     <i class="el-icon-delete"></i>
                                 </div>
                             </div>
@@ -171,18 +175,9 @@ export default {
             cascaderProps: {
                 value: "id", // 指定实际表示值的字段为id
                 label: "name", // 指定实际表示显示文本的字段为name
+                expandTrigger: 'hover',
                 checkStrictly: true, // 严格模式，只能选择叶子节点
                 children: 'children',
-                // 配置一级数据关联子级数据的字段（这里假设用 customId 关联）
-                expandTrigger: 'template_class_id',
-                // 配置二级及以下数据的相关自定义字段
-                props: {
-                    value: 'subCustomValue',
-                    label: 'subCustomLabel',
-                    children: 'children',
-                    // 配置二级及以下数据关联父级数据的字段（这里假设用 subCustomParentId 关联）
-                    // expandTrigger: 'subCustomParentId'
-                }
             },
 
 
@@ -207,6 +202,9 @@ export default {
             formLabelWidth: '', //广告示例图相关
 
 
+            template_id: '', //关联风格id
+            sector_id: '', //关联版块id
+
             ruleForm: {
                 plateName: '', //关联版块名称
                 component_name: '', //组件名称
@@ -226,17 +224,31 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            getComponentList({
-                page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log('组件', data);
-                if (data.code == 200) {
-                    this.moduleLoading = false
+            if (this.templateName != '' || this.componentName != '') {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: '',
+                    component_name: this.componentName,
+                    sector_id: this.templateName,
+                }).then(data => {
+                    console.log(data);
                     this.tableData = data.data.data
                     this.total = data.data.total
-                }
-            })
+                })
+            } else {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log('组件', data);
+                    if (data.code == 200) {
+                        this.moduleLoading = false
+                        this.tableData = data.data.data
+                        this.total = data.data.total
+                    }
+                })
+            }
         },
         //获取版块列表
         getList() {
@@ -251,6 +263,9 @@ export default {
             getTemplateClass().then(data => {
                 console.log("风格", data.data);
                 this.styleOptions = data.data
+                for (let item of this.styleOptions) {
+                    item.children = []
+                }
             })
         },
         //1.2 删除内容
@@ -289,25 +304,51 @@ export default {
                 });
             });
         },
-        //1.3 查看示例图
+        //1.3 版块发生改变时 获取版块下的组件列表
+
+        // handleMouseEnter(event) {
+        //     const currentValue = this.ruleForm.plateName[this.ruleForm.plateName.length - 1];
+        //     console.log('当前级的值:', currentValue);
+        //     console.log('当前级:', event);
+        // },
+
         handleChange(value) {
-            console.log('handleChange', value);
-            this.selectedId = value[0]
-            if (value.length == 1) {
-                getSectorList({
-                    page: this.page,
-                    page_size: 1000,
-                    template_class_id: this.selectedId
-                }).then(data => {
-                    console.log('data', data.data.data);
-                    this.plateOptions = data.data.data
-                })
+            console.log('val', value);
+            this.template_id = value[0]
+            this.sector_id = value[1]
+            console.log("当前选中的父级：", this.template_id);
+            console.log("当前选中的子级：", this.sector_id);
+            // 当选中的选项发生变化时触发
+            if (value.length > 0) {
+                const selectedValue = value[value.length - 1]; // 获取最后一级选中的值
+                this.fetchChildren(selectedValue); // 请求对应的子选项
+
             }
-            this.styleOptions = this.styleOptions.map(item => {
-                if (item.value === this.selectedId) {
-                    item.children = this.plateOptions
-                }
-                return item
+        },
+        fetchChildren(parentValue) {
+            // 根据父级值请求子选项的接口
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+                template_class_id: parentValue
+            }).then(data => {
+                console.log('data', data.data.data);
+                this.plateOptions = data.data.data
+                this.styleOptions = this.styleOptions.map(item => {
+                    if (item.id === parentValue) {
+                        const children = []
+                        for (let item of this.plateOptions) {
+                            children.push({
+                                id: item.id,
+                                name: item.sector_name,
+                            })
+                        }
+                        item.children = children
+                    }
+                    return item
+                })
+                console.log(this.styleOptions);
+
             })
         },
 
@@ -340,11 +381,13 @@ export default {
         goReset() {
             this.templateName = ""
             this.componentName = ""
+            this.page = 1
+            this.pageSize = 10
             this.getData()
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
-        //1.7 添加
+        //1.8 添加
         addWebsite() {
             this.dialogTableVisible = true
             this.dialogName = "添加"
@@ -361,15 +404,19 @@ export default {
 
         //1.9 编辑
         goEdit(id, val) {
-            // console.log(id);
             this.dialogName = '编辑'
             this.activeid = id
             this.dialogTableVisible = true
             console.log(id, val);
-            console.log("状态", val);
+            this.getList()
 
             //数据回显
-            this.ruleForm.plateName = val.sector_name //关联版块
+            this.template_id = val.template_class_id
+            this.sector_id = val.sector_id
+            this.ruleForm.plateName = val.template_class_name //关联版块
+            this.ruleForm.plateName = [val.template_class_id, val.sector_id] // 组合成数组
+            this.ruleForm.plateName = [this.template_id, this.sector_id] // 组合成数组
+            // this.ruleForm.plateName = val.template_class_name+'/'+val.sector_name //组件名称
             this.ruleForm.component_name = val.component_name //组件名称
             this.ruleForm.component_code = val.component_code //组件代码
             this.ruleForm.component_img = val.component_img //组件展示图
@@ -377,8 +424,6 @@ export default {
         },
 
 
-
-
         // 弹出层相关方法
         // 提交表单
         submitForm(formName) {
@@ -391,15 +436,12 @@ export default {
                 }
             });
             if (this.dialogName == "添加") {
-                createAdPlace({
-                    name: this.ruleForm.adName,
-                    website_id: this.website_id,
-                    price: this.ruleForm.price,
-                    thumb: this.ruleForm.adPhoto,
-                    typeid: this.ruleForm.adType,
-                    ad_size_id: this.ruleForm.adSize,
-                    status: this.ruleForm.status,
-                    introduce: this.ruleForm.adDesc,
+                addComponent({
+                    template_id: this.template_id,
+                    sector_id: this.sector_id,
+                    component_name: this.ruleForm.component_name,
+                    component_img: this.ruleForm.component_img,
+                    component_code: this.ruleForm.component_code,
                 }).then(data => {
                     console.log(data);
                     if (data.code == 200) {
@@ -435,16 +477,9 @@ export default {
                 this.dialogVisible = true
             }
             if (this.dialogName == "编辑") {
-                updateAdPlace({
-                    name: this.ruleForm.adName,
-                    website_id: this.website_id,
-                    price: this.ruleForm.price,
-                    thumb: this.ruleForm.adPhoto,
-                    typeid: this.ruleForm.adType,
-                    ad_size_id: this.ruleForm.adSize,
-                    status: this.ruleForm.status,
-                    introduce: this.ruleForm.adDesc,
-                    id: this.activeid
+                updateComponent({
+                    id: this.activeid,
+                    component_name: this.ruleForm.component_name,
                 }).then(data => {
                     console.log(data);
                     if (data.code == 200) {

src/views/componentGallery/plate.vue

@@ -8,7 +8,7 @@
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
                         <el-select v-model="templateStyle" clearable placeholder="请选择模板风格">
-                            <el-option v-for="item in options"  :key="item.id" :label="item.name" :value="item.id">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
                     </div>
@@ -81,9 +81,9 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="关联风格名称:" prop="templateStyle" >
-                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称" :disabled="this.dialogName=== '编辑'"
-                            @change="changeTemplateStyle">
+                    <el-form-item label="关联风格名称:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
@@ -92,10 +92,12 @@
                         <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
                     </el-form-item>
                     <el-form-item label="版块代码:" prop="plateCode">
-                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码" :disabled="this.dialogName=== '编辑'"></el-input>
+                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
                     <el-form-item label="页面类型:" prop="pageType">
-                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox" :disabled="this.dialogName=== '编辑'">
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
+                            :disabled="this.dialogName === '编辑'">
                             <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{
                                 item.label
                             }}</el-checkbox>
@@ -109,7 +111,7 @@
                                 @mouseleave="hovering = false">
                                 <!-- 上传组件 -->
                                 <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName=== '编辑'">
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
                                     <!-- 预览图片 -->
                                     <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                     <!-- 上传图标 -->
@@ -122,7 +124,8 @@
                                     <input type="hidden" name="logo" v-model="ruleForm.image">
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl && dialogName=='添加'" class="delete-button" @click="handleDelete">
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
                                     <i class="el-icon-delete"></i>
                                 </div>
                             </div>
@@ -246,17 +249,31 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            getSectorList({
-                page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log(data);
-                if (data.code == 200) {
-                    this.plateLoading = false
-                }
-                this.tableData = data.data.data
-                this.total = data.data.total
-            })
+            if (this.templateStyle != '' || this.plateName != '') {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle,
+                    sector_name: this.plateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.plateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+
         },
 
         //获取风格列表
@@ -341,7 +358,7 @@ export default {
                 page: this.page,
                 page_size: this.pageSize,
                 template_class_id: this.templateStyle,
-                template_name: this.plateName,
+                sector_name: this.plateName,
             }).then(data => {
                 console.log(data);
                 this.tableData = data.data.data
@@ -353,6 +370,8 @@ export default {
         goReset() {
             this.templateStyle = ""
             this.plateName = ""
+            this.page=1
+            this.pageSize=10
             this.getData()
         },
         //列表和分页相关 end ------------------------------------------------------------>
@@ -365,7 +384,7 @@ export default {
             this.dialogTableVisible = true
             console.log(id, val);
             // console.log("状态", val.status);
-            this.hovering=false
+            this.hovering = false
 
             //数据回显
             this.ruleForm.templateStyle = val.template_class_id //关联风格名称
@@ -373,7 +392,7 @@ export default {
             this.ruleForm.plateCode = val.sector_code //版块代码
             this.ruleForm.pageType = JSON.parse(JSON.parse(val.page_type))//页面类型
             this.ruleForm.image = val.sector_img //组件展示图 
-            this.logoUrl=val.sector_img      
+            this.logoUrl = val.sector_img
         },
 
 
@@ -388,7 +407,7 @@ export default {
             this.ruleForm.plateCode = '' //版块代码
             this.ruleForm.pageType = [] //页面类型
             this.ruleForm.image = '' //组件展示图
-            this.logoUrl=''
+            this.logoUrl = ''
         },
 
         // 弹出层相关方法

src/views/componentGallery/style.vue

@@ -417,18 +417,32 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            getTemplateList({
-                page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log(data);
-                if (data.code == 200) {
-                    this.templateLoading = false
-                }
-                this.tableData = data.data.data
-                this.total = data.data.total
-            })
+            if(this.templateStyle != '' || this.templateName != ''){
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle, //模板风格id
+                    template_name: this.templateName, //模板名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }else{
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.templateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
         },
+        
         //获取模板风格
         getStyleList() {
             getTemplateClass({
@@ -503,6 +517,8 @@ export default {
         goReset() {
             this.templateStyle = ""
             this.templateName = ""
+            this.page=1
+            this.pageSize=10
             this.getData()
         },
         //列表和分页相关 end ------------------------------------------------------------>