风格管理-添加、编辑、删除、搜索风格管理

src/api/genre.js

@@ -0,0 +1,106 @@
+import request from '@/utils/request'
+
+//获取岗位信息
+export function getTemplateClassList(params) {
+    return request({
+        url: '/public/getTemplateClassList',
+        method: 'get',
+        params
+    })
+}
+//获取工作性质
+export function addTemplateClass(data) {
+    return request({
+        url: '/public/addTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//获取工作年限
+export function upTemplateClass(data) {
+    return request({
+        url: '/public/upTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//获取学历文凭
+export function delTemplateClass(data) {
+    return request({
+        url: '/public/delTemplateClass',
+        method: 'post',
+        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) {
+    return request({
+        url: `/public/getCompanySize`,
+        method: 'get',
+        params
+    })
+}
+//获得公司性质
+export function getCompanyNature(params) {
+    return request({
+        url: `/public/getCompanyNature`,
+        method: 'get',
+        params
+    })
+}
+//获得公司行业
+export function getIndustry(params) {
+    return request({
+        url: `/website/getIndustry`,
+        method: 'get',
+        params
+    })
+}
+//获得招聘岗位名称
+export function getPositionList(params) {
+    return request({
+        url: `/website/getPositionList`,
+        method: 'get',
+        params
+    })
+}
+//获得所在省
+export function getJobRecruitingArea(params) {
+    return request({
+        url: `/website/getJobRecruitingArea`,
+        method: 'get',
+        params
+    })
+}
+//获得职位机会列表
+export function getRecruitingList(params) {
+    return request({
+        url: `/website/getRecruitingList`,
+        method: 'get',
+        params
+    })
+}
+//获得我的沟通列表
+export function getJobResumeList(data) {
+        return request({
+            url: `/website/getJobResumeList`,
+            method: 'post',
+            data
+        })
+    }

src/store/modules/genre.js

@@ -0,0 +1,57 @@
+import { getTemplateClassList,addTemplateClass,upTemplateClass,delTemplateClass,
+ } from '@/api/genre'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    getTemplateClassList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClassList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    addTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/views/componentGallery/imgList.vue

@@ -341,8 +341,6 @@ export default {
                 pageSize: 10, //每页条数
             }
             this.$store.dispatch('module/getStaticResourceList',data).then(res=> {
-            // console.log("*******************",this.page);
-            console.log("*******************",res.data.row);
             this.tableData =  res.data.row; //给与内容
             this.total = res.data.count; //给与总条数
             }).catch(() => {
@@ -427,7 +425,6 @@ export default {
                 console.log("添加", data);
                 // 直接传递 data 作为参数，而不是 {data}
                 this.$store.dispatch('module/addStaticResource', data).then(res => {
-                    console.log("66666666666666666",res.data);
                     if (res.code === 200) {
                         this.$message({
                             message: '添加成功',

src/views/componentGallery/style.vue

@@ -7,7 +7,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">风格名称</div>
-                        <el-input v-model="templateName" clearable placeholder="请输入风格名称"></el-input>
+                        <el-input v-model="name" clearable placeholder="请输入风格名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -24,20 +24,20 @@
             <button class="btn" @click="addWebsite">添加风格</button>
             <el-row>
                 <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 class="my-table" :data="tableData">
+                        <el-table-column fixed prop="id" label="编号">
                         </el-table-column>
-                        <el-table-column prop="template_class_name" label="风格名称" width="">
+                        <el-table-column prop="name" label="风格名称" width="">
                         </el-table-column>
-                        <el-table-column prop="template_keyword" label="风格关键词" width="">
+                        <el-table-column prop="keyword" label="风格关键词" width="">
                         </el-table-column>
                         <el-table-column prop="template_count" label="皮肤总量" width="">
                         </el-table-column>
                         <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="200">
+                        <el-table-column fixed="right" label="操作">
                             <template slot-scope="scope">
-                                <div class="listBtnBox">
+                                <div class="listBtnBox" v-if="scope.row.type === 0">
                                     <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
                                         <i class="el-icon-delete"></i>
                                         删除
@@ -72,11 +72,19 @@
             :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="templateName">
-                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格名称"></el-input>
+                    <el-form-item label="风格名称:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="请输入风格名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="风格关键词:" prop="templateName">
-                        <el-input v-model="ruleForm.templateName" placeholder="请输入风格关键词"></el-input>
+                   <el-form-item label="风格关键词：" prop="keyword" 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>
                 </div>
                 <div class="dialogBtn">
@@ -92,13 +100,14 @@
 <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) => {
@@ -108,19 +117,25 @@ export default {
                 callback()
             }
         }
+        const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
         return {
             // 1.1  初始化数据 ---------------------------------
             tableDivTitle: "风格列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
             templateLoading: true,//页面加载中
-
+            tags: [],//标签数组
             tableData: [],//表格数据
 
 
             //1.2 搜索框相关 ----------------------------------
-            templateStyle: '',//模板风格
-            templateName: '',//模板名称
+            name: '',///风格名称
 
 
             // 1.3 分页相关 -----------------------------------
@@ -132,83 +147,19 @@ export default {
             // logoUrl: '',
             hovering: false, // 鼠标悬浮状态 悬浮时显示删除
 
-            //首页图片
-            homeImg: '',
-            logoUrl_home: '',
-            home_obj: {
-                url: '',
-                name: '首页',
-                value: '1',
-            },
-            //分类页图片
-            classifyImg: '',
-            logoUrl_class: '',
-            class_obj: {
-                url: '',
-                name: '分类页',
-                value: '2',
-            },
-            //列表页图片
-            listImg: '',
-            logoUrl_list: '',
-            list_obj: {
-                url: '',
-                name: '列表页',
-                value: '3',
-            },
-            //详情页图片
-            detailImg: '',
-            logoUrl_detail: '',
-            detail_obj: {
-                url: '',
-                name: '详情页',
-                value: '4',
-            },
-            //搜索页图片
-            searchImg: '',
-            logoUrl_search: '',
-            search_obj: {
-                url: '',
-                name: '搜索页',
-                value: '5',
-            },
-            //特殊列表页图片
-            sListImg: '',
-            logoUrl_sList: '',
-            sList_obj: {
-                url: '',
-                name: '特殊列表页',
-                value: '6',
-            },
-            //特殊详情页图片
-            sDetailImg: '',
-            logoUrl_sDetail: '',
-            sDetail_obj: {
-                url: '',
-                name: '特殊详情页',
-                value: '7',
-            },
-            //图片json
-            img_arr: [],
-
             value: '',
-            options: [],
 
             //活动id
             activeid: "",
 
-            formLabelWidth: '', //广告示例图相关
-
             // 弹框相关 -------------------------------------------
             ruleForm: {
-                templateStyle: '', //模板风格
-                templateName: '', //模板名称
-                templateImg: [], //模板图片
+                keyword: '', //风格关键词
+                name: '', //风格名称
             },
             rules: {
-                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
+                name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             }
         }
     },
@@ -216,77 +167,84 @@ 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.$store.dispatch('genre/getTemplateClassList',{page: this.page,pageSize: this.pageSize}).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.tableData = data.data.data
-                    this.total = data.data.total
-                })
-            }
+                });
+                this.total = res.data.count; // 给与总条数
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
         },
         
-        //获取模板风格
+        //获取风格列表
         getStyleList() {
-            getTemplateClass({
-                page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log('模板风格列表', data);
-                this.options = data.data
-            })
+            const data = {
+                name: this.name ?? '',
+                page: 1,
+                pageSize: 10,
+
+            }
+            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 = keywordArray;
+                                item.keyword = keywordArray.join(' | ');
+                            } else {
+                                item.keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.count; // 给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                });
+              })
         },
 
-        //1.2 删除内容
+        //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/delTemplateClass',{ id: id }).then(res=> {
+                this.$message({
+                    message: '删除成功',
+                    type:'success'
                 })
-
-            }).catch(() => {
+                this.getData()
+              }).catch(() => {
                 this.$message({
-                    type: 'warning',
-                    message: '已取消删除'
-                });
-            });
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                })
+              })
         },
         //1.3 列表内容分页
         //直接跳转
@@ -301,21 +259,25 @@ export default {
         },
         // 1.5 搜索按钮
         goSearch() {
-            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
-            })
+            const data = {
+                name: this.name ?? '',
+                page: 1,
+                pageSize: 10,
+            }
+            // console.log(data)
+            this.$store.dispatch('genre/getTemplateClassList',data).then(res=> {
+                this.tableData =  res.data.rows; //给与内容
+                this.total = res.data.count; //给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'error',
+                  message: '网络错误，请重试！'
+                });
+              })
         },
         //1.6 重置按钮
         goReset() {
-            this.templateStyle = ""
-            this.templateName = ""
+            this.name = ""
             this.page=1
             this.pageSize=10
             this.getData()
@@ -327,58 +289,14 @@ export default {
             this.dialogName = '编辑'
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
+            
 
             //数据回显
-            this.ruleForm.templateStyle = val.template_class_id
-            this.ruleForm.templateName = val.template_name
-            this.img_arr = JSON.parse(val.template_img)
-
-            this.homeImg = ''
-            this.logoUrl_home = ''
-            this.classifyImg = ''
-            this.logoUrl_class = ''
-            this.listImg = ''
-            this.logoUrl_list = ''
-            this.detailImg = ''
-            this.logoUrl_detail = ''
-            this.searchImg = ''
-            this.logoUrl_search = ''
-            this.sListImg = ''
-            this.logoUrl_sList = ''
-            this.sDetailImg = ''
-            this.logoUrl_sDetail = ''
-
-            for (let item of this.img_arr) {
-                if (item.name == '首页') {
-                    this.logoUrl_home = item.url
-                    this.homeImg = item.url
-                }
-                if (item.name == '分类页') {
-                    this.logoUrl_class = item.url
-                    this.classifyImg = item.url
-                }
-                if (item.name == '列表页') {
-                    this.logoUrl_list = item.url
-                    this.listImg = item.url
-                }
-                if (item.name == '详情页') {
-                    this.logoUrl_detail = item.url
-                    this.detailImg = item.url
-                }
-                if (item.name == '搜索页') {
-                    this.logoUrl_search = item.url
-                    this.searchImg = item.url
-                }
-                if (item.name == '特殊列表页') {
-                    this.logoUrl_sList = item.url
-                    this.sListImg = item.url
-                }
-                if (item.name == '特殊详情页') {
-                    this.logoUrl_sDetail = item.url
-                    this.sDetailImg = item.url
-                }
-            }
+            this.ruleForm.name = val.name            
+            this.ruleForm.keyword = val.keyword;
+            this.tags = val.keyword ? val.keyword.split("|") : [];
+            // console.log(typeof(this.ruleForm.keyword))
+            // console.log(this.ruleForm.keyword)        
         },
         //1.8 添加
         addWebsite() {
@@ -386,135 +304,47 @@ export default {
             this.dialogName = "添加"
 
             //添加时清空回显回来的数据
-            this.ruleForm.templateStyle = ''
-            this.ruleForm.templateName = ''
-            this.ruleForm.templateImg = []
-            this.img_arr = []
-            this.homeImg = ''
-            this.logoUrl_home = ''
-            this.classifyImg = ''
-            this.logoUrl_class = ''
-            this.listImg = ''
-            this.logoUrl_list = ''
-            this.detailImg = ''
-            this.logoUrl_detail = ''
-            this.searchImg = ''
-            this.logoUrl_search = ''
-            this.sListImg = ''
-            this.logoUrl_sList = ''
-            this.sDetailImg = ''
-            this.logoUrl_sDetail = ''
+            this.ruleForm.keyword = ''
+            this.tags = []
+            this.ruleForm.name = ''
         },
 
         // 弹出层相关方法 ---------------------------------------------------->
         // 1.9 提交表单
         submitForm() {
-            this.img_arr = []
-            //首页
-            if (this.logoUrl_home) {
-                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)
-            }
-            //列表页
-            if (this.logoUrl_list) {
-                this.list_obj.url = this.listImg
-                this.img_arr.push(this.list_obj)
-            }
-            //详情页
-            if (this.logoUrl_detail) {
-                this.detail_obj.url = this.detailImg
-                this.img_arr.push(this.detail_obj)
-            }
-            //搜索页
-            if (this.logoUrl_search) {
-                this.search_obj.url = this.searchImg
-                this.img_arr.push(this.search_obj)
-            }
-            //特殊列表页
-            if (this.logoUrl_sList) {
-                this.sList_obj.url = this.sListImg
-                this.img_arr.push(this.sList_obj)
-            }
-            //特殊详情页
-            if (this.logoUrl_sDetail) {
-                this.sDetail_obj.url = this.sDetailImg
-                this.img_arr.push(this.sDetail_obj)
-            }
-            function cleanObProp(arr) {
-                return arr.map(item => {
-                    const newItem = {};
-                    for (const key in item) {
-                        if (key !== '__ob__') {
-                            newItem[key] = item[key];
-                        }
-                    }
-                    return newItem;
-                });
-            }
-            const cleanArray = cleanObProp(this.img_arr);
-            this.ruleForm.templateImg = JSON.stringify(cleanArray);
-            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
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                this.$store.dispatch('genre/addTemplateClass',this.ruleForm).then(res=> {
+                    if (res.code == 200) {
                         this.$message({
                             message: '添加成功',
-                            type: 'success'
+                            type:'success'
                         })
                         this.dialogTableVisible = false
                         this.getData()
-                    } else if (data.code == 0) {
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                        this.dialogTableVisible = true
-                        return
-                    } else {
+                    }else{
                         this.$message({
-                            message: data.message,
+                            message: res.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
-                        return
                     }
                 })
             }
 
             if (this.dialogName == "编辑") {
-                updateTemplate({
-                    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) {
+                this.$store.dispatch('genre/upTemplateClass',{id: this.activeid,name: this.ruleForm.name,keyword: this.ruleForm.keyword}).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()
                 })
             }
 
@@ -524,258 +354,20 @@ export default {
             this.dialogTableVisible = false
         },
 
-        //3.6 上传图片操作
-        beforeAvatarUpload_home(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_classify(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_list(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_detail(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_search(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_sList(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_sDetail(file) {
-            const isJPG = file.type === 'image/jpeg';
-            const isPNG = file.type === 'image/png';
-            const isLt2M = file.size / 1024 / 1024 < 2;
-
-            if (!isJPG && !isPNG) {
-                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
-                return false;
-            }
-            if (!isLt2M) {
-                this.$message.error('上传图片大小不能超过 2MB!');
-                return false;
-            }
-
-            const formData = new FormData();
-            formData.append('file', file);
-
-            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',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        handleDelete_home() {
-            // 删除图片
-            this.logoUrl_home = ''; // 清空图片 URL
-        },
-        handleDelete_class() {
-            // 删除图片
-            this.logoUrl_class = ''; // 清空图片 URL
-        },
-        handleDelete_list() {
-            // 删除图片
-            this.logoUrl_list = ''; // 清空图片 URL
-        },
-        handleDelete_detail() {
-            // 删除图片
-            this.logoUrl_detail = ''; // 清空图片 URL
-        },
-        handleDelete_search() {
-            // 删除图片
-            this.logoUrl_search = ''; // 清空图片 URL
-        },
-        handleDelete_sList() {
-            // 删除图片
-            this.logoUrl_sList = ''; // 清空图片 URL
-        },
-        handleDelete_sDetail() {
-            // 删除图片
-            this.logoUrl_sDetail = ''; // 清空图片 URL
-        },
+        
+        updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            
+            this.tags = newTags;
+            this.ruleForm.keyword = newTags;
+          },
+        
         // 3.7 弹出层相关方法 end ------------------------------------------------------------>
 
     },
     mounted() {
         this.getData()
-        this.getStyleList() //获取模板风格
+        this.getStyleList() //获取风格
     },
 }
 </script>