Merge branch 'pre' of http://git.bjzxtw.org.cn:3000/zxt/admin_home into pre

src/api/genre.js

@@ -1,6 +1,9 @@
+// 最新-自助建站
+
 import request from '@/utils/request'
+// 风格管理  start------------------------------------------------------------
 
-//获取岗位信息
+//获取风格列表
 export function getTemplateClassList(params) {
     return request({
         url: '/public/getTemplateClassList',
@@ -8,7 +11,7 @@ export function getTemplateClassList(params) {
         params
     })
 }
-//获取工作性质
+//新增风格
 export function addTemplateClass(data) {
     return request({
         url: '/public/addTemplateClass',
@@ -16,7 +19,7 @@ export function addTemplateClass(data) {
         data
     })
 }
-//获取工作年限
+//更新风格
 export function upTemplateClass(data) {
     return request({
         url: '/public/upTemplateClass',
@@ -24,7 +27,7 @@ export function upTemplateClass(data) {
         data
     })
 }
-//获取学历文凭
+//删除风格
 export function delTemplateClass(data) {
     return request({
         url: '/public/delTemplateClass',
@@ -32,75 +35,62 @@ export function delTemplateClass(data) {
         data
     })
 }
-//获取语言能力
-export function getLanguage(params) {
-    return request({
-        url: `/public/getLanguage`,
-        method: 'get',
-        params
-    })
-}
-//获得薪资
-export function getSalary(params) {
-    return request({
-        url: `/public/getSalary`,
-        method: 'get',
-        params
-    })
-}
-//获得公司规模
-export function getCompanySize(params) {
+// 风格管理  end------------------------------------------------------------
+
+
+// 皮肤管理  start------------------------------------------------------------
+
+//获取风格名称
+export const getTemplateClass=(data)=>{
     return request({
-        url: `/public/getCompanySize`,
-        method: 'get',
-        params
+        url:'/public/getTemplateClass',
+        method:'post',
+        data
     })
 }
-//获得公司性质
-export function getCompanyNature(params) {
+
+//获取皮肤列表
+export const getTemplateList = (data) => {
     return request({
-        url: `/public/getCompanyNature`,
-        method: 'get',
-        params
+        url: '/public/getTemplateList',
+        method: 'post',
+        data
     })
 }
-//获得公司行业
-export function getIndustry(params) {
+
+//新增皮肤
+export const addTemplate = (data) => {
     return request({
-        url: `/website/getIndustry`,
-        method: 'get',
-        params
+        url: '/public/addTemplate',
+        method: 'post',
+        data
     })
 }
-//获得招聘岗位名称
-export function getPositionList(params) {
+
+//删除皮肤
+export const delTemplate=(data)=>{
     return request({
-        url: `/website/getPositionList`,
-        method: 'get',
-        params
+        url:'/public/delTemplate',
+        method:'post',
+        data
     })
 }
-//获得所在省
-export function getJobRecruitingArea(params) {
+
+//更新皮肤
+export const updateTemplate = (data) => {
     return request({
-        url: `/website/getJobRecruitingArea`,
-        method: 'get',
-        params
+        url: '/public/updateTemplate',
+        method: 'post',
+        data
     })
 }
-//获得职位机会列表
-export function getRecruitingList(params) {
+
+//获取皮肤详情
+export const getTemplateInfo=(data)=>{
     return request({
-        url: `/website/getRecruitingList`,
-        method: 'get',
-        params
+        url:'/public/getTemplateInfo',
+        method:'post',
+        data
     })
 }
-//获得我的沟通列表
-export function getJobResumeList(data) {
-        return request({
-            url: `/website/getJobResumeList`,
-            method: 'post',
-            data
-        })
-    }
+// 皮肤管理  end------------------------------------------------------------

src/api/style.js

@@ -1,4 +1,4 @@
-// 风格
+// 皮肤
 import request from '@/utils/request'
 
 //获取风格名称
@@ -10,7 +10,7 @@ export const getTemplateClass=(data)=>{
     })
 }
 
-//获取风格列表
+//获取皮肤列表
 export const getTemplateList = (data) => {
     return request({
         url: '/public/getTemplateList',
@@ -19,7 +19,7 @@ export const getTemplateList = (data) => {
     })
 }
 
-//新增风格
+//新增皮肤
 export const addTemplate = (data) => {
     return request({
         url: '/public/addTemplate',
@@ -28,7 +28,7 @@ export const addTemplate = (data) => {
     })
 }
 
-//删除风格
+//删除皮肤
 export const delTemplate=(data)=>{
     return request({
         url:'/public/delTemplate',
@@ -37,7 +37,7 @@ export const delTemplate=(data)=>{
     })
 }
 
-//更新风格
+//更新皮肤
 export const updateTemplate = (data) => {
     return request({
         url: '/public/updateTemplate',
@@ -46,7 +46,7 @@ export const updateTemplate = (data) => {
     })
 }
 
-//获取风格详情
+//获取皮肤详情
 export const getTemplateInfo=(data)=>{
     return request({
         url:'/public/getTemplateInfo',

src/store/modules/genre.js

@@ -1,4 +1,5 @@
 import { getTemplateClassList,addTemplateClass,upTemplateClass,delTemplateClass,
+    getTemplateClass,getTemplateList,addTemplate,delTemplate,updateTemplate,getTemplateInfo
  } from '@/api/genre'
 
 const state = {
@@ -10,6 +11,7 @@ const mutations = {
 }
 
 const actions = {
+    // 风格管理  start------------------------------------------------------------
     getTemplateClassList({ commit }, data) {
         return new Promise((resolve, reject) => {
             getTemplateClassList(data).then(response => {
@@ -46,6 +48,75 @@ const actions = {
             })
         })
     },
+    // 风格管理  end------------------------------------------------------------
+
+
+    // 皮肤管理  start------------------------------------------------------------
+    //获取风格名称
+    getTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤列表
+    getTemplateList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //新增皮肤
+    addTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //删除皮肤
+    delTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //更新皮肤
+    updateTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            updateTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤详情
+    getTemplateInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
 }
 
 

src/views/componentGallery/skin.vue

@@ -34,9 +34,10 @@
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
                         <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="template_id" label="皮肤编号" width=""></el-table-column>
                         <el-table-column prop="template_name" label="皮肤名称" width=""></el-table-column>
                         <el-table-column prop="template_class_name" label="所属风格" width=""></el-table-column>
-                        <el-table-column prop="template_skin_keyword" label="皮肤关键词" width=""></el-table-column>
+                        <el-table-column prop="template_keyword" label="皮肤关键词" width=""></el-table-column>
                         <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
                         <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
@@ -82,11 +83,22 @@
                             </el-option>
                         </el-select>
                     </el-form-item>
+                    <el-form-item label="皮肤编号:" prop="templateId">
+                        <el-input v-model="ruleForm.templateId" placeholder="请输入皮肤编号"></el-input>
+                    </el-form-item>
                     <el-form-item label="皮肤名称:" prop="templateName">
                         <el-input v-model="ruleForm.templateName" placeholder="请输入皮肤名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="皮肤关键词:" prop="templateKeyword">
-                        <el-input v-model="ruleForm.templateKeyword" placeholder="请输入皮肤关键词"></el-input>
+                    <el-form-item label="皮肤关键词：" prop="templateKeyword" class="custom-align-right">
+                        <template #label>
+                        <span class="askBox">
+                            皮肤关键词：
+                            <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
+                            <i class="el-icon-question"></i>
+                            </el-tooltip>
+                        </span>
+                        </template>
+                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
                     </el-form-item>
                     <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
                         :class="['custom-form-item']" class="custom-align-right">
@@ -138,7 +150,7 @@
                                 <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
                                     <i class="el-icon-delete"></i>
                                 </div>
-                                <h5>分类页</h5>
+                                <h5>频道页</h5>
                             </div>
                             <!--图片上传组件 end ------------------------------------------------------------>
                         </div>
@@ -291,13 +303,15 @@
 <script>
 //表格标题
 import tableTitle from './components/tableTitle.vue';
-
+//引入tag标签组件
+import tagInput from '../../components/InputTag/index.vue';
 //引入公用样式
 import '@/styles/global.less';
 import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
 export default {
     components: {
         tableTitle,//表格标题-
+        tagInput,//标签组件
     },
     data() {
         const validateEmpty = (rule, value, callback) => {
@@ -306,20 +320,27 @@ export default {
             } else {
                 callback()
             }
+        }
+            const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
         }
         return {
             // 1.1  初始化数据 ---------------------------------
-            tableDivTitle: "模板列表",  //列表标题
+            tableDivTitle: "皮肤列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
             templateLoading: true,//页面加载中
 
             tableData: [],//表格数据
 
-
+            tags: [],//标签数据
             //1.2 搜索框相关 ----------------------------------
-            templateStyle: '',//模板风格
-            templateName: '',//模板名称
+            templateStyle: '',//皮肤风格
+            templateName: '',//皮肤名称
 
 
             // 1.3 分页相关 -----------------------------------
@@ -339,12 +360,12 @@ export default {
                 name: '首页',
                 value: '1',
             },
-            //分类页图片
+            //频道页图片
             classifyImg: '',
             logoUrl_class: '',
             class_obj: {
                 url: '',
-                name: '分类页',
+                name: '频道页',
                 value: '2',
             },
             //列表页图片
@@ -400,14 +421,18 @@ export default {
 
             // 弹框相关 -------------------------------------------
             ruleForm: {
-                templateStyle: '', //模板风格
-                templateName: '', //模板名称
-                templateImg: [], //模板图片
+                templateStyle: '', //皮肤风格
+                templateName: '', //皮肤名称
+                templateImg: [], //皮肤图片
+                templateKeyword: [], //皮肤关键词
+                templateId: '', //皮肤编号
             },
             rules: {
                 templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateKeyword: [{ required: true, trigger: 'blur', validator: validateArray }],
+                templateId: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             }
         }
     },
@@ -415,77 +440,65 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            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
-                })
+            const data = {
+                page: this.page,
+                page_size: this.pageSize,
             }
+            this.$store.dispatch('genre/getTemplateList', data).then(res => {
+                this.tableData = res.data.data
+                this.tableData.forEach(item => {
+                    item.tags =item.template_keyword;
+                    if (typeof item.template_keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.template_keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.template_keyword = keywordArray.join(' | ');
+                            } else {
+                                item.template_keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.total
+                this.templateLoading = false
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
         },
-        
-        //获取模板风格
+        //获取皮肤风格
         getStyleList() {
-            getTemplateClass({
-                page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log('模板风格列表', data);
-                this.options = data.data
+            this.$store.dispatch('genre/getTemplateClass').then(res => {
+                this.options  = res.data
+                console.log(res.data);
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
             })
         },
 
         //1.2 删除内容
         deleteRow(id) {
-            console.log(id);
-            let data = new FormData()
-            data.append('id', id)
-            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-            }).then(() => {
-                console.log("当前删除：" + id)
-                delTemplate({
-                    id: id
-                }).then(data => {
-                    console.log(data);
-                    if (data.code = 200) {
-                        this.$message({
-                            message: '删除成功',
-                            type: 'success'
-                        })
-                        this.getData()
-                    } else if (data.code == 0) {
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                    }
+            this.$store.dispatch('genre/delTemplate',{ id: id }).then(res=> {
+                this.$message({
+                    message: '删除成功',
+                    type:'success'
                 })
-
-            }).catch(() => {
+                this.getData()
+              }).catch(() => {
                 this.$message({
-                    type: 'warning',
-                    message: '已取消删除'
-                });
-            });
+                  type: 'error',
+                  message: '网络错误，请重试！'
+                })
+              })
         },
         //1.3 列表内容分页
         //直接跳转
@@ -500,15 +513,38 @@ export default {
         },
         // 1.5 搜索按钮
         goSearch() {
-            getTemplateList({
+            const data = {
                 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
+                template_class_id: this.templateStyle ?? '', //皮肤风格id
+                template_name: this.templateName ?? '', //皮肤名称
+            }
+            this.$store.dispatch('genre/getTemplateList', data).then(res => {
+                this.tableData = res.data.data
+                this.tableData.forEach(item => {
+                    item.tags =item.template_keyword;
+                    if (typeof item.template_keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.template_keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.template_keyword = keywordArray.join(' | ');
+                            } else {
+                                item.template_keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.total
+                this.templateLoading = false
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
             })
         },
         //1.6 重置按钮
@@ -526,13 +562,14 @@ export default {
             this.dialogName = '编辑'
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
+            // console.log("************", val);
 
             //数据回显
             this.ruleForm.templateStyle = val.template_class_id
             this.ruleForm.templateName = val.template_name
             this.img_arr = JSON.parse(val.template_img)
-
+            this.tags = val.template_keyword ? val.template_keyword.split("|") : []
+            this.ruleForm.templateId = val.template_id
             this.homeImg = ''
             this.logoUrl_home = ''
             this.classifyImg = ''
@@ -553,7 +590,7 @@ export default {
                     this.logoUrl_home = item.url
                     this.homeImg = item.url
                 }
-                if (item.name == '分类页') {
+                if (item.name == '频道页') {
                     this.logoUrl_class = item.url
                     this.classifyImg = item.url
                 }
@@ -585,6 +622,7 @@ export default {
             this.dialogName = "添加"
 
             //添加时清空回显回来的数据
+            this.tags = []
             this.ruleForm.templateStyle = ''
             this.ruleForm.templateName = ''
             this.ruleForm.templateImg = []
@@ -603,6 +641,9 @@ export default {
             this.logoUrl_sList = ''
             this.sDetailImg = ''
             this.logoUrl_sDetail = ''
+            this.ruleForm.templateKeyword = []
+            this.ruleForm.templateId = ''
+
         },
 
         // 弹出层相关方法 ---------------------------------------------------->
@@ -614,7 +655,7 @@ export default {
                 this.home_obj.url = this.homeImg
                 this.img_arr.push(this.home_obj)
             }
-            //分类页
+            //频道页
             if (this.logoUrl_class) {
                 this.class_obj.url = this.classifyImg
                 this.img_arr.push(this.class_obj)
@@ -657,15 +698,16 @@ export default {
             }
             const cleanArray = cleanObProp(this.img_arr);
             this.ruleForm.templateImg = JSON.stringify(cleanArray);
-            console.log(this.ruleForm.templateImg);
+            // console.log(this.ruleForm.templateImg);
 
             if (this.dialogName == "添加") {
                 addTemplate({
-                    template_name: this.ruleForm.templateName, //模板名称
-                    template_img: this.ruleForm.templateImg, // 模板图片
-                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                    template_name: this.ruleForm.templateName, //皮肤名称
+                    template_img: this.ruleForm.templateImg, // 皮肤图片
+                    template_class_id: this.ruleForm.templateStyle, //皮肤风格id
+                    template_keyword: this.ruleForm.templateKeyword, //皮肤关键词
+                    template_id: this.ruleForm.templateId, //皮肤编号
                 }).then(data => {
-                    console.log(data);
                     if (data.code == 200) {
                         this.$message({
                             message: '添加成功',
@@ -690,30 +732,30 @@ export default {
                     }
                 })
             }
-
             if (this.dialogName == "编辑") {
-                updateTemplate({
+                const data = {
                     id: this.activeid, //活动id
-                    template_name: this.ruleForm.templateName, //模板名称
-                    template_img: this.ruleForm.templateImg, // 模板图片
-                    template_class_id: this.ruleForm.templateStyle, //模板风格id
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                    template_name: this.ruleForm.templateName, //皮肤名称
+                    template_img: this.ruleForm.templateImg, // 皮肤图片
+                    template_class_id: this.ruleForm.templateStyle, //皮肤风格id
+                    template_keyword: this.ruleForm.templateKeyword, //皮肤关键词
+                    template_id: this.ruleForm.templateId, //皮肤编号
+                }
+                this.$store.dispatch('genre/updateTemplate', data).then(res => {
+                    if (res.code == 200) {
                         this.$message({
                             message: '编辑成功',
-                            type: 'success'
+                            type:'success'
                         })
                         this.dialogTableVisible = false
-                    }
-                    if (data.code == 0) {
+                        this.getData()
+                    }else{
                         this.$message({
-                            message: data.message,
+                            message: res.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
                     }
-                    this.getData()
+                    
                 })
             }
 
@@ -744,7 +786,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_home = res.data.imgUrl;//显示缩略图
                 this.homeImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -775,7 +816,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_class = res.data.imgUrl;//显示缩略图
                 this.classifyImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -806,7 +846,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_list = res.data.imgUrl;//显示缩略图
                 this.listImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -837,7 +876,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_detail = res.data.imgUrl;//显示缩略图
                 this.detailImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -868,7 +906,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_search = res.data.imgUrl;//显示缩略图
                 this.searchImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -899,7 +936,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_sList = res.data.imgUrl;//显示缩略图
                 this.sListImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -930,7 +966,6 @@ export default {
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
                 this.logoUrl_sDetail = res.data.imgUrl;//显示缩略图
                 this.sDetailImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
             }).catch(() => {
                 this.$message({
                     type: 'info',
@@ -969,12 +1004,18 @@ export default {
             // 删除图片
             this.logoUrl_sDetail = ''; // 清空图片 URL
         },
+        updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            
+            this.tags = newTags;
+            this.ruleForm.templateKeyword = newTags;
+          },
         // 3.7 弹出层相关方法 end ------------------------------------------------------------>
 
     },
     mounted() {
         this.getData()
-        this.getStyleList() //获取模板风格
+        this.getStyleList() //获取皮肤风格
     },
 }
 </script>

src/views/componentGallery/style.vue

@@ -207,8 +207,8 @@ export default {
         getStyleList() {
             const data = {
                 name: this.name ?? '',
-                page: 1,
-                pageSize: 10,
+                page: this.page,
+                pageSize: this.pageSize,
 
             }
             this.$store.dispatch('genre/getTemplateClassList',data).then(res=> {
@@ -274,6 +274,23 @@ export default {
             // console.log(data)
             this.$store.dispatch('genre/getTemplateClassList',data).then(res=> {
                 this.tableData =  res.data.rows; //给与内容
+                this.tableData.forEach(item => {
+                    item.tags =item.keyword;
+                    if (typeof item.keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.keyword = keywordArray.join(' | ');
+                            } else {
+                                item.keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
                 this.total = res.data.count; //给与总条数
               }).catch(() => {
                 this.$message({