0.0.10

完成网站管理99%的功能

src/api/pool.js

@@ -27,38 +27,56 @@ export function getwebsiteColumn(params) {
   })
 }
 
-// 获取网站导航列表
-export function getNavList(data) {
+//查询城市列表
+export function getcityList(params) {
   return request({
-    url: '',
-    method: '',
-    data
+    url: '/public/getDistrictList',
+    method: 'get',
+    params
   })
 }
 
-// 获取关联导航池列表
-export function getNavPoolContactList(data) {
+//上传文件
+export function uploadFile(data) {
   return request({
-    url: '',
-    method: '',
+    url: '/public/uploadFile',
+    method: 'post',
     data
   })
 }
 
-// 获取导航池列表
-export function getNavPoolList(data) {
+//获取模板列表
+export function getTemplate(params) {
+  return request({
+    url: '/website/getTemplate',
+    method: 'get',
+    params
+  })
+}
+
+//添加网站
+export function addWebsite(data) {
   return request({
-    url: '',
-    method: '',
+    url: '/website/addWebsite',
+    method: 'post',
     data
   })
 }
 
-// 获取资讯列表
-export function getNewsList(data) {
+//获取网站详情
+export function getWebsiteInfo(params) {
   return request({
-    url: '',
-    method: '',
+    url: '/website/getWebsiteInfo',
+    method: 'get',
+    params
+  })
+}
+
+//编辑网站
+export function updateWebsite(data) {
+  return request({
+    url: '/website/updateWebsite',
+    method: 'post',
     data
   })
 }

src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Vue Element Admin',
+  title: '政讯通运营管理平台',
 
   /**
    * @type {boolean} true | false

src/store/modules/pool.js

@@ -1,4 +1,4 @@
-import { getWebList,deleteWebList,getwebsiteColumn} from '@/api/pool'
+import { getWebList,deleteWebList,getwebsiteColumn,getcityList,uploadFile,getTemplate,addWebsite,getWebsiteInfo,updateWebsite} from '@/api/pool'
 
 const state = {
 
@@ -38,8 +38,69 @@ const actions = {
         reject(error)
       })
     })
+  },
+  //获取城市列表
+  getcityList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getcityList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //上传文件
+  uploadFile({commit},data) {
+    return new Promise((resolve, reject) => {
+      uploadFile(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取模板列表
+  getTemplate({commit},data) {
+    return new Promise((resolve, reject) => {
+      getTemplate(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加网站
+  addWebsite({commit},data) {
+    return new Promise((resolve, reject) => {
+      addWebsite(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加网站
+  getWebsiteInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改网站
+  updateWebsite({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateWebsite(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 
+
 }
 
 

src/views/website/WebsiteList.vue

@@ -1,43 +1,38 @@
 <template>
   <div class="mainBox">
-    <!--表单头部 start-->
+    <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
       <el-row>
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">网站名称：</div>
-            <el-input placeholder="请输入网站名称" autocomplete="off"/>
+            <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.keyword"/>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">上级网系：</div>
-            <el-select v-model="form.city" placeholder="请选择上级网系">
-              <el-option label="上海" value="shanghai"></el-option>
-              <el-option label="北京" value="beijing"></el-option>
-            </el-select>
+            <el-cascader v-model="getApiData.website_column_id" :props="{checkStrictly:true}" :options="website_column_arr" clearable></el-cascader>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">网站城市：</div>
-            <el-select v-model="form.city" placeholder="请选择城市">
-              <el-option label="上海" value="shanghai"></el-option>
-              <el-option label="北京" value="beijing"></el-option>
-            </el-select>
+            <el-cascader :key="searchCascaderKey" v-model="getApiData.city_id" placeholder="选择您要绑定的城市" :props="SearchCityData" filterable clearable></el-cascader>
           </div>
         </el-col>
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <el-button>重置</el-button>
-      <el-button type="primary" style="margin-right:20px">搜索</el-button>
+      <el-button @click="clearSearchList">重置</el-button>
+      <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
       <el-button type="success" icon="el-icon-circle-plus-outline" @click="addData">添加网站</el-button>
     </div>
-    <!--表单头部 end-->
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
     <div class="layerBox">
       <el-row>
-        <!--表格 start-->
         <template>
           <el-table :data="tableData" style="width: 100%">
             <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
@@ -50,15 +45,15 @@
             <el-table-column fixed="right" label="操作" width="120">
               <template slot-scope="scope">
                 <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
-                <el-button @click.native.prevent="editData(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
+                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
               </template>
             </el-table-column>
           </el-table>
         </template>
-        <!--表格 end-->
       </el-row>
     </div>
-    <!--分页 start-->
+
+    <!--分页 start------------------------------------------------------------>
     <div class="layerBox alignBox">
       <el-row>
         <el-col :span="24">
@@ -66,82 +61,107 @@
         </el-col>
       </el-row>
     </div>
-    <!--分页 end-->
+    <!--分页 end------------------------------------------------------------>
+    <!--表格 end------------------------------------------------------------>
 
-    <!--弹出框-->
+
+    <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
     <el-dialog title="添加网站" :visible.sync="windowStatus">
-      <!--选择模板弹出框-->
-      <el-dialog width="30%" title="请选择模板" :visible.sync="innerVisible" append-to-body>
-        <div class="webSite">
-          默认模板
+      <!--弹出框2：内部模板弹出框 start------------------------------------------------------------>
+      <el-dialog width="32%" title="请选择模板" :visible.sync="innerVisible" append-to-body>
+        <div class="templateListBox">
+          <div v-for="item in TemplateList" class="templateList" @click="useThatTemplate(item.id,item.template_name)">
+            <img :src="item.template_img" class="templateImg">
+            <div>{{item.template_name}}</div>
+          </div>
+        </div>
+        <div class="pageNumBox">
+          <el-pagination @size-change="handleTemplateSize" @current-change="handleChangeCurrent" :page-size="10" layout="total, prev, pager, next, jumper" :total="TemplateallCount"></el-pagination>
         </div>
         <div class="webSiteBtn">
           <el-button type="primary" @click="innerVisible = false">确 定</el-button>
         </div>
       </el-dialog>
-      <el-form :model="form">
-        <el-form-item label="网站名称：" :label-width="formLabelWidth">
+      <!--弹出框2：内部模板弹出框 end------------------------------------------------------------>
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <el-form-item label="网站名称：" :label-width="formLabelWidth" prop="website_name">
           <el-input v-model="form.website_name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="网站地址1：" :label-width="formLabelWidth">
+        <el-form-item label="网站地址1：" :label-width="formLabelWidth" prop="website_url[0].url">
           <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url" autocomplete="off"></el-input>
-            <el-button type="success" icon="el-icon-plus" circle size="mini"></el-button>
+            <el-input v-model="form.website_url[0].url" autocomplete="off"></el-input>
+            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(1)" class="formLabeladdIcon"></el-button>
           </div>
         </el-form-item>
-        <el-form-item label="网站地址2：" :label-width="formLabelWidth">
+        <el-form-item label="网站地址2：" :label-width="formLabelWidth" v-if="form.website_url[1].show==true">
           <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url" autocomplete="off"></el-input>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
+            <el-input v-model="form.website_url[1].url" autocomplete="off"></el-input>
+            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(2)" class="formLabeladdIcon"></el-button>
+            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(1)" class="formLabelDelIcon"></el-button>
           </div>
         </el-form-item>
-        <el-form-item label="网站地址3：" :label-width="formLabelWidth">
+        <el-form-item label="网站地址3：" :label-width="formLabelWidth" v-if="form.website_url[2].show==true">
           <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url" autocomplete="off"></el-input>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
+            <el-input v-model="form.website_url[2].url" autocomplete="off"></el-input>
+            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(3)" class="formLabeladdIcon"></el-button>
+            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(2)" class="formLabelDelIcon"></el-button>
           </div>
         </el-form-item>
-        <el-form-item label="网站地址4：" :label-width="formLabelWidth">
+        <el-form-item label="网站地址4：" :label-width="formLabelWidth" v-if="form.website_url[3].show==true">
           <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url" autocomplete="off"></el-input>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
+            <el-input v-model="form.website_url[3].url" autocomplete="off"></el-input>
+            <el-button type="success" icon="el-icon-plus" circle size="mini" @click="addUrlInput(4)" class="formLabeladdIcon"></el-button>
+            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(3)" class="formLabelDelIcon"></el-button>
           </div>
         </el-form-item>
-        <el-form-item label="网站地址5：" :label-width="formLabelWidth">
+        <el-form-item label="网站地址5：" :label-width="formLabelWidth" v-if="form.website_url[4].show==true">
           <div class="formLabelFloatBox">
-            <el-input v-model="form.website_url" autocomplete="off"></el-input>
-            <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
+            <el-input v-model="form.website_url[4].url" autocomplete="off"></el-input>
+            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(4)" class="formLabelDelIcon"></el-button>
           </div>
         </el-form-item>
         <el-form-item label="上级网系：" :label-width="formLabelWidth">
-          <el-select v-model="form.website_column_arr_id" placeholder="请选择活动区域">
-            <el-option v-for="item in website_column_arr" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
+          <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr" @change="AppointWebsiteColumn"></el-cascader>
         </el-form-item>
         <el-form-item label="城市：" :label-width="formLabelWidth">
-          <el-cascader :props="props"></el-cascader>
+          <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择您要绑定的城市" :props="cityData" filterable clearable></el-cascader>
         </el-form-item>
-        <el-form-item label="网站标题：" :label-width="formLabelWidth">
-          <el-input v-model="form.website_name" autocomplete="off"></el-input>
+        <el-form-item label="网站logo：" :label-width="formLabelWidth">
+          <div class="uploaderBox">
+            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+              <img v-if="logoUrl" :src="logoUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </div>
         </el-form-item>
-        <el-form-item label="网站关键词：" :label-width="formLabelWidth">
-          <el-input v-model="form.website_name" autocomplete="off"></el-input>
+        <el-form-item label="网站标题：" :label-width="formLabelWidth" prop="title">
+          <!-- <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
+            <i class="el-icon-question"></i>
+          </el-tooltip> -->
+          <el-input v-model="form.title" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="网站关键词：" :label-width="formLabelWidth">
-          <el-input type="textarea" v-model="form.website_name"></el-input>
+        <el-form-item label="网站关键词：" :label-width="formLabelWidth" prop="keywords">
+          <el-input v-model="form.keywords" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="网站描述：" :label-width="formLabelWidth" prop="description">
+          <el-input type="textarea" v-model="form.description"></el-input>
         </el-form-item>
         <div class="webSiteTemplate">
           <div class="webSiteTitle">模板：</div>
-          <el-button type="text" @click="innerVisible = true">选择模板</el-button>
+          <el-button type="text" @click="getTemplateList">选择模板</el-button>
+          <div class="webSiteTemplateName">{{TemplateName}}</div>
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
-          <el-button @click="windowStatus = false">取 消</el-button>
-          <el-button type="primary" @click="windowStatus = false">确 定</el-button>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="warning" @click="editToServe" v-if="editBtn==true">修改</el-button>
+          <el-button type="primary" @click="addToServe" v-else>提交</el-button>
         </div>
       </div>
     </el-dialog>
+    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
+
   </div>
 </template>
 
@@ -150,42 +170,179 @@ import getLocationNameById from '@/utils/citytocode';
 
 export default {
   data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateWebsiteUrl = (rule,value,callback) => {
+      if (!value || value.trim() === "") {
+        callback(new Error('至少要填写一个网站地址！'));
+      } else {
+        callback();
+      }
+    }
+
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
     return {
-      //确定的
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableData:[],//内容
+      editId:0,//要修改的网站id
       getApiData:{
+        keyword:"",//网站名称查询
+        website_column_id:[],//使用网系id查询
+        city_id:[],//使用城市id查询
         page:1,//当前是第几页
-        size:10,//一共多少条
+        pageSize:10,//一共多少条
       },
-      tableData:[],//内容
       allCount:0,//总条数
-      //是否显示弹出窗口
-      windowStatus:false, //外层
-      innerVisible:false, //内层
-      formLabelWidth: '120px',//弹窗框长度
-      //不确定的
-      website_column_arr:[],//网系列表
-      form: {
-        website_name: '',//网站名称
-        website_url:'',//网站地址
-        website_column_arr_id:"",//上级网系
-      },
+      //分页相关 end ------------------------------------------------------------>
 
+      //2.弹出框设置 start ------------------------------------------------------------>
+      windowStatus:false, //显示第一层弹窗
+      innerVisible:false, //显示第二层弹窗
+      formLabelWidth: '120px',//表单的长度
+      editBtn:false,//当显示编辑按钮的时候，就不显示提交
+      //弹出框设置 start ------------------------------------------------------------>
 
-      //筛选选择的内容
-      filterData:{
-        city:""
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
+      form: {
+        website_name: '',//需要提交的网站名称
+        website_url:[//需要绑定的网站地址
+          {url:"",show:true},
+          {url:"",show:false},
+          {url:"",show:false},
+          {url:"",show:false},
+          {url:"",show:false}
+        ],
+        website_column_arr_id:[],//需要提交的上级网系 数组
+        city_arr_id:[0],//需要提交的城市id
+        logo:"",//logo地址 提交文件换取地址
+        title:"",//需要提交的网站标题
+        keywords:"",//需要提交的网站标题
+        description:"",//需要提交的网站描述
+        template_id:""//选择的网站皮肤
+      },
+      //3.2 表单验证规则
+      formRules: {
+        //网站名称不能为空
+        website_name:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //网站地址不能为空
+        'website_url[0].url': [
+          {required: true, message:'至少要填写一个网站地址！',trigger:'blur'},
+          {validator: this.validateWebsiteUrl,trigger:'blur'}
+        ],
+        //网站标题，关键词，描述不能为空
+        title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
+        description:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //3.3 通过api获的的数据 弹窗
+      website_column_arr:[],//api获得的网系列表
+      searchCascaderKey:0,//搜索栏用的key
+      cascaderKey:0,//弹窗用的key
+      cityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/getcityList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //搜索列
+      SearchCityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/getcityList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
       },
-      cityList:[
-        {label:'上海',value:'shanghai'},
-        {label:'北京',value:'beijing'}
-      ],
+      //3.4 上传logo图片
+      logoUrl:'',
+      //3.5 模板列表
+      TemplateList:[],
+      getTemplateData:{
+        template_class_id:1,//模板类型，暂时为1
+        page:1,//当前是第几页
+        pageSize:9,//请求多少条
+      },
+      TemplateallCount:0,//总条数
+      TemplateName:"未选择模板.."//选择的模板名称
+      //弹出框中的表单设置 end ------------------------------------------------------------>
     }
   },
   methods: {
-    //开始请求列表信息
-    getData(){
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(type){
+      //搜索条件
+      if(this.getApiData.website_column_id.length>0){
+        //网系只提交最后一个
+        this.getApiData.website_column_id = this.getApiData.website_column_id[this.getApiData.website_column_id.length - 1];
+      }else{
+        this.getApiData.website_column_id = "";
+      }
+      if(this.getApiData.city_id.length>0){
+        //城市id只提交最后一个
+        this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
+      }else{
+        this.getApiData.city_id = "";
+      }
+      //如果是搜索，重新加载第一页
+      if(type=="search"){
+        this.getApiData.page = 1;
+      }
+      //console.log(this.getApiData)
       this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
-        this.tableData = res.data.rows; //给与内容
+        let newData = [];
+        for(let item of res.data.rows){
+          if(item.city_name==null){item.city_name="--"}
+          newData.push(item)
+        }
+        this.tableData = newData; //给与内容
         this.allCount = res.data.count; //给与总条数
       }).catch(() => {
         this.$message({
@@ -194,17 +351,7 @@ export default {
         });
       })
     },
-    //直接跳转
-    handleSizeChange(val) {
-      this.getApiData.page = val;
-      this.getData();
-    },
-    //点击分页
-    handleCurrentChange(val) {
-      this.getApiData.page = val;
-      this.getData();
-    },
-    //删除内容
+    //1.2 删除内容
     deleteData(id){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
         confirmButtonText: '确定',
@@ -231,55 +378,343 @@ export default {
         });
       });
     },
-    //打开弹出框
+    //1.3 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList(){
+      this.tableData = [];
+      this.getApiData.keyword = "";
+      this.getApiData.website_column_id = [];
+      this.getApiData.city_id = [];
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
     openWindow() {
+      this.clearToServe();
       this.windowStatus = true;
     },
-    //关闭弹出框
+    //2.2 关闭弹出框
     closeWindow(){
       this.windowStatus = false;
+      this.clearToServe();
     },
-    //获得所有网系
+    //弹出框设置 end ------------------------------------------------------------>
+
+    //3.添加新网站 start ------------------------------------------------------------>
+    //3.1 获得所有网系
     getwebsiteColumn(){
+      let that = this;
       this.$store.dispatch('pool/getwebsiteColumn').then(res=> {
-        //console.log(res)
-        //先保存网系
-        //格式化一下
-        let arrData=[];
-        for(let item of res.data[0].children){
-          let newData = {};
-          newData.label = item.column_name;
-          newData.value = item.id;
-          arrData.push(newData);
-        }
+        let arrData = this.transformData(res.data)
         this.website_column_arr = arrData;
-        console.log(this.website_column_arr)
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
       })
     },
-    //添加内容
+    transformData(arrData) {
+      let that = this;
+      return arrData.map(item => {
+        // 创建一个新的对象，替换键名
+        let newItem = {
+          label: item.column_name,
+          value: item.id,
+          // 保留其他不需要改动的字段
+          pid: item.pid,
+          sort: item.sort,
+          remark: item.remark,
+          column_arr_id: item.column_arr_id,
+          updated_at: item.updated_at,
+          created_at: item.created_at,
+        };
+
+        // 如果有 children，则递归处理 children 数组
+        if (item.children && item.children.length > 0) {
+          newItem.children = that.transformData(item.children);
+        }
+
+        return newItem;
+      });
+    },
+    //3.2 当网系发生变化的时候
+    AppointWebsiteColumn(value){
+      console.log(value);
+    },
+    //3.2 开始添加内容
     addData(){
       //先获取所有网系
       this.getwebsiteColumn()
       //显示网系到弹出窗口
       this.openWindow()
+      //显示提交按钮
+      this.editBtn = false;
+      //清除错误状态
+      this.$refs.form.clearValidate();
+    },
+    //3.3 添加一条网站地址
+    addUrlInput(key){
+      this.form.website_url[key].show=true;
+    },
+    //3.4 删除一条网站地址
+    deleteUrlInput(key){
+      this.form.website_url[key].show=false;
+      this.form.website_url[key].url="";
     },
-    //获取详情
-    getDataMain(){
+    //3.5 上传图片操作
+    beforeAvatarUpload(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 = res.data.imgUrl;//显示缩略图
+        this.form.logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //3.6 提交表单
+    addToServe(){
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //提交之前把域名列表转换成数组
+          let webSiteArray = [];
+          for(let item of this.form.website_url){
+            if(item.url!=""){
+              webSiteArray.push(item.url)
+            }
+          }
+          //循环完毕 重置提交的url
+          this.form.website_url = webSiteArray;
+          //console.log(webSiteArray)
+          //提交表单
+          this.$store.dispatch('pool/addWebsite',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加网站！'
+            });
+            //清空并退出
+            this.closeWindow();
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+
+      })
+    },
+    //3.7 清空提交窗口
+    clearToServe(){
+      //重置窗口
+      this.form.website_name = "";
+      this.form.website_column_arr_id = "";
+      this.form.website_url = [
+        {url:"",show:true},
+        {url:"",show:false},
+        {url:"",show:false},
+        {url:"",show:false},
+        {url:"",show:false}
+      ];
+      this.form.city_arr_id = [0];
+      this.form.logo = "";
+      this.form.title = "";
+      this.form.keywords = "";
+      this.form.description = "";
+      this.form.template_id = "";
+      //还原logo缩略图
+      this.logoUrl = "";
+      //还原模板
+      this.TemplateList = [];
+      this.getTemplateData.page = 1;
+      this.TemplateallCount = 0;
     },
-    //编辑内容
-    editData(id){
+    //添加新网站 end ------------------------------------------------------------>
+
+    //4.选择模板 start ------------------------------------------------------------>
+    //4.1 获取模板列表
+    getTemplateList(){
+      //先打开弹出框
+      this.innerVisible = true;
+      //获取模板列表
+      this.$store.dispatch('pool/getTemplate',this.getTemplateData).then(res=> {
+        //直接给与数据
+        //this.TemplateList = res.data.rows;
+        //格式化 目前缩略图给了两张，我只展示其中一张
+        let data = res.data.rows;
+        for(let item of data){
+          //item.template_img
+          let imgSrc = item.template_img.replace(/^{|}$/g, '').split(',').map(item => item.replace(/"/g, ''));
+          item.template_img = imgSrc[0];
+        }
+        this.TemplateList = data;
+        //给与总条数
+        this.TemplateallCount = res.data.count;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //4.2 选择一个模板
+    useThatTemplate(id,template_name){
+      console.log(template_name)
+      //关闭弹出框
+      this.innerVisible = false;
+      //显示用户选择的名称
+      this.TemplateName = template_name;
+      //记录选择的模板id
+      this.form.template_id = id;
+    },
+    //4.1 模板列表分页
+    //直接跳转
+    handleTemplateSize(val) {
+      this.getTemplateData.page = val;
+      this.getTemplateList();
+    },
+    //4.2 点击分页
+    handleChangeCurrent(val) {
+      this.getTemplateData.page = val;
+      this.getTemplateList();
+    },
+    //选择模板 end ------------------------------------------------------------>
+
+    //5.编辑旧网站 start ------------------------------------------------------------>
+    //5.1获取详情
+    getDataMain(id){
+      //先清空窗口
+      this.clearToServe()
       //打开输入窗口
       this.openWindow();
+      //添加修改id
+      this.editId = id;
+
+      //获取网站详情
+      this.$store.dispatch('pool/getWebsiteInfo',{id:id}).then(res=> {
+        //清除错误状态
+        this.$refs.form.clearValidate();
+        console.log(res)
+        //回显网站名称
+        this.form.website_name = res.data.website_name;
+        //回显星系
+        this.form.website_column_arr_id = res.data.website_column_arr_id;
+        //回显logo
+        this.form.logo = res.data.logo;
+        this.logoUrl = res.data.logo;
+        //回显url
+        let that = this;
+        if(res.data.website_url==null){
+          //为null什么都不执行
+        }else{
+          for(let index in res.data.website_url){
+            this.form.website_url[index].url = res.data.website_url[index];
+            this.form.website_url[index].show = true;
+          }
+        }
+        //回显id
+        //存放城市id
+        this.form.city_arr_id = res.data.city_arr_id;
+        //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
+        this.cascaderKey += 1;
+        this.loadCascaderPath(this.form.city_arr_id);
+        //回显网站标题，描述，关键词
+        this.form.title = res.data.title;
+        this.form.keywords = res.data.keywords;
+        this.form.description = res.data.description;
+        //回显模板信息
+        this.form.template_id = res.data.template_id;
+        this.TemplateName = res.data.template_name;
+      })
+
+      this.editBtn = true;//显示编辑按钮
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/getcityList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 这里假设4层结构，设置叶子节点标记
+            }));
+            // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
+            if (level === path.length - 1) {
+              this.form.city_arr_id = path;
+            }
+          });
+      }
     },
+    //5.2修改表单
+    editToServe(){
+      //提交之前把域名列表转换成数组
+      let webSiteArray = [];
+      for(let item of this.form.website_url){
+        if(item.url!=""){
+          webSiteArray.push(item.url)
+        }
+      }
+      //循环完毕 重置提交的url
+      this.form.website_url = webSiteArray;
+      this.form.id = this.editId;
+      //提交表单
+      this.$store.dispatch('pool/updateWebsite',this.form).then(res=> {
+        //汇报结果
+        this.$message({
+          type: 'success',
+          message: '已成功修改网站信息！'
+        });
+        //清空并退出
+        this.closeWindow();
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //编辑旧网站 end ------------------------------------------------------------>
   },
   mounted(){
+    //1.获得初始数据
     this.getData();
+    //2.获取所有网系
+    this.getwebsiteColumn();
     //本地转换id为文字
     //console.log(getLocationNameById("110000"))
   }
@@ -287,6 +722,7 @@ export default {
 </script>
 
 <style scoped lang="less">
+  /*1.页面布局 start------------------------------------------------------------>*/
   .layerBox_search {
     margin:30px 30px 10px 30px;
     background: #fff;
@@ -317,7 +753,9 @@ export default {
   .alignBox {
     text-align:center
   }
-  /*未测试的样式*/
+  /*页面布局 end------------------------------------------------------------>*/
+
+  /*2.弹窗框 start------------------------------------------------------------>*/
   .webSite {
     background:#f0f2f5;
     width:200px;
@@ -342,10 +780,74 @@ export default {
   }
   .formLabelFloatBox {
     position: relative;
-    button {
+    .formLabeladdIcon {
+      position: absolute;
+      right:35px;
+      top:5px;
+    }
+    .formLabelDelIcon {
       position: absolute;
       right:5px;
       top:5px;
     }
   }
+  .templateListBox {
+    box-sizing: border-box;
+    width: 100%;
+    display:flex;
+    flex-wrap:wrap;
+    .templateList {
+      margin-right:10px;
+      text-align: center;
+      font-size:12px;
+      margin-bottom: 10px;
+      border:1px solid #fff;
+      padding: 5px;
+      &:hover {
+        border:1px solid #1890ff;
+        cursor: pointer;
+      }
+      box-sizing: border-box;
+      .templateImg {
+        width: 100px;
+        height:65px;
+      }
+    }
+  }
+  .pageNumBox {
+    text-align: center;
+    padding-top:20px;
+  }
+  .webSiteTemplateName {
+    margin-left: 10px;
+    line-height: 36px;
+  }
+  //文件上传
+  .uploaderBox {
+    .avatar-uploader{
+      width: 60px;
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader {
+      border-color: #409EFF;
+    }
+  }
+  .avatar-uploader-icon {
+    font-size: 20px;
+    color: #8c939d;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+  }
+  .avatar {
+    width: 60px;
+    height: 60px;
+    display: block;
+  }
+  /*弹窗框 end------------------------------------------------------------>*/
 </style>