完成基本信息添加页面

完成基本信息添加页面

.env.fengrui

@@ -2,4 +2,4 @@
 ENV = 'fengrui'
 
 # base api
-VUE_APP_BASE_API = 'http://192.168.1.115:9501'
+VUE_APP_BASE_API = 'http://192.168.1.113:9501'

src/api/template.js

@@ -1,4 +1,77 @@
 import request from '@/utils/request'
 
-//mock
+//1.自助建站 start ------------------------------------->
 
+//1.1 搜索网站
+export function getWebsiteintel(data) {
+  return request({
+    url: '/website/getWebsiteintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+export function addWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 获取网站基本信息
+export function getWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 修改网站基本信息
+export function upWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/upWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 获取所有风格
+export function getAllTemplateClass(data) {
+  return request({
+    url: '/website/getAllTemplateClass',
+    method: 'post',
+    data
+  })
+}
+
+//1.6 搜索并获取所有网站模板
+export function getWebsiteTemplateList(data) {
+  return request({
+    url: '/website/getWebsiteTemplateList',
+    method: 'post',
+    data
+  })
+}
+
+//1.7 保存用户选择的模板
+export function addWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.8 获取用户选择的模板
+export function getWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//自助建站 end ------------------------------------->

src/store/modules/template.js

@@ -1,5 +1,8 @@
-import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
-  selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//cms中的接口 用于模板中的职能，导航池
+import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//自助建站的接口 用于添加基本信息
+import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
+  getWebsiteTemplateclassintel} from '@/api/template'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -1269,7 +1272,7 @@ const mutations = {
 }
 
 const actions = {
-  //1.站点数据 start------------------------------------------------------------>
+  //1.显示画板组件数据 start------------------------------------------------------------>
   //获取网站基本信息
   getSiteInfo({commit},data){
     return new Promise((resolve, reject) => {
@@ -1334,7 +1337,90 @@ const actions = {
       })
     })
   },
-  //1.站点数据 end------------------------------------------------------------>
+  //1.显示画板组件数据 end------------------------------------------------------------>
+  
+  //2.构建网站json start------------------------------------------------------------>
+  //搜索网站
+  getWebsiteintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+  addWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取网站基本信息
+  getWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改网站基本信息
+  upWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      upWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取所有风格
+  getAllTemplateClass({commit},data){
+    return new Promise((resolve, reject) => {
+      getAllTemplateClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //搜索并获取所有网站模板
+  getWebsiteTemplateList({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //保存用户选择的模板
+  addWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取用户选择的模板
+  getWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.构建网站json end------------------------------------------------------------>
 }
 
 export default {

src/views/template/templateBase.vue

@@ -10,11 +10,12 @@
         <div class="formDiv">
           <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-checkbox-group v-model="form.template_base_type">
+              <el-checkbox-group v-model="form.page_type">
                 <el-checkbox label="1" disabled>首页</el-checkbox>
                 <el-checkbox label="2">分类页</el-checkbox>
                 <el-checkbox label="3">列表页</el-checkbox>
                 <el-checkbox label="4">详情页</el-checkbox>
+                <el-checkbox label="5">搜索页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -22,13 +23,13 @@
             <div class="formLabelFloatBox">
               <div class="labelTitleStyle">
                 单页模板类型：
-                <el-tooltip class="item" effect="dark" content="说明文字" placement="top">
+                <el-tooltip class="item" effect="dark" content="该类型仅供底部导航栏使用" placement="top">
                   <i class="el-icon-question"></i>
                 </el-tooltip>
               </div>
-              <el-checkbox-group v-model="form.template_special_type">
-                <el-checkbox label="1">自定义列表页</el-checkbox>
-                <el-checkbox label="2" disabled>自定义详情页</el-checkbox>
+              <el-checkbox-group v-model="form.page_type">
+                <el-checkbox label="6">自定义列表页</el-checkbox>
+                <el-checkbox label="7" disabled>自定义详情页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -37,40 +38,36 @@
       <div class="layerBox">
         <tableTitle :name="templateInfoTitle"/>
         <div class="formDiv">
-          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.contact_number" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_address" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
           <el-form-item label="项目LOGO：" class="custom-align-right">
             <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="projectLogoUpload">
                 <!-- 预览图片 -->
-                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
-                <!-- 上传图标 -->
-                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
                 <div v-else class="chooseImgDiv">
                   <div>
                     <img src="@/assets/public/upload/noImage.png">
@@ -80,25 +77,21 @@
               </el-upload>
             </div>
           </el-form-item>
-          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_name" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司LOGO：" class="custom-align-right">
             <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="companyLogoUpload">
                 <!-- 预览图片 -->
-                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
-                <!-- 上传图标 -->
-                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
                 <div v-else class="chooseImgDiv">
                   <div>
                     <img src="@/assets/public/upload/noImage.png">
@@ -108,34 +101,44 @@
               </el-upload>
             </div>
           </el-form-item>
-          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_name" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number" placeholder="请输入.."></el-input>
             </div>  
           </el-form-item>
-          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."></el-input>
+            </div>  
+          </el-form-item>
+          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.record_number" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号1：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号2：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="通联QQ号：" :label-width="formLabelWidth" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.communications" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
         </div>
@@ -143,7 +146,8 @@
     </el-form>
     <div class="bottomBtnBox">
       <el-button type="info" @click="goToWebsite">返回</el-button>
-      <el-button type="primary" @click="goToStyle">下一步</el-button>
+      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</el-button>
+      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
   </div>
 </template>
@@ -163,13 +167,6 @@ export default {
   },
   data() {
     // 配置验证规则：用于表单验证
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('密码不能低于6位！'))
-      } else {
-        callback()
-      }
-    }
     const validateEmpty = (rule,value,callback) => {
       if (value.length == 0) {
         callback(new Error('该项不能为空！'))
@@ -184,14 +181,43 @@ export default {
       formLabelWidth:"120px",
       editId:"",
       form:{
-        template_base_type:["1"],//常规类型
-        template_special_type:["2"],//特殊类型
-        website_statement:"",//网站声明
-        project_img_src:"",
+        website_id:"",//网站id
+        page_type:["1","7"],//页面类型
+        statement:"",//网站声明
+        organizer:"",//主办单位
+        copyright_information:"",//版权信息
+        contact_number:"",//联系电话
+        company_address:"",//公司地址
+        project_logo:"",//项目logo
+        project_name:"",//项目名称
+        project_url:"",//项目网址
+        company_logo:"",//公司logo
+        company_name:"",//公司名称
+        company_url:"",//公司网址
+        icp_number:"",//网站备案号
+        icp_number_url:"",//网站备案号链接
+        record_number:"",//网安备案号
+        record_number_url:"",//网安备案号链接
+        customer_service_qq:"",//客服qq客服
+        communications:"",//通联qq客服
       },
+      project_logo_src:"",//项目logo缩略图
+      company_logo_src:"",//公司logo缩略图
       //配置from表单验证规则
       loginRules: { 
-        website_statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       }
     };
   },
@@ -200,11 +226,17 @@ export default {
     //上一步
     goToWebsite(){
       this.$router.push({
-        path: '/webSite'
+        path: '/templateList'
       });
     },
     //下一步
     goToStyle(){
+      //先判断表达能否提交
+      this.$refs.form.validate(valid => {
+        if (valid) {
+
+        }
+      })
       this.$router.push({
         path: '/templateStyle',
         query: {
@@ -215,82 +247,153 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
 
     //1.提交表单 start ------------------------------------------------------------>
-    //提交表单
+    //1.1提交表单
     addData(){
-      console.log(this.form);
-      //1.先验证用户是否已经存在
-      this.$store.dispatch('template/addBasic',this.form).then(res=>{
-        if(res.code==200){
-          this.$message.success('基本信息添加成功！请选择模板风格');
-          //进入下一步
-          this.goToStyle();
+      this.form.website_id = this.$route.query.website_id;
+      //console.log(this.form);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('template/addWebsiteTemplateintel',this.form).then(res=>{
+            if(res.code==200){
+              this.$message.success('网站基本信息保存成功！');
+              //跳转到风格选择页面
+              this.$router.push({
+                path: '/templateStyle',
+                query: {
+                  website_id: this.$route.query.website_id,
+                }
+              });
+            }else{
+              this.$message.error(res.message);
+            }
+          })
         }
-      }).catch(error=>{
-        this.$message.error('网络错误，请重试！');
       })
     },
-    //提交表单 start ------------------------------------------------------------>
-
-    //2.编辑表单 start ------------------------------------------------------------>
-    //获得用户信息
-    getUserInfo(){
-      this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
-        console.log(res);
-        //回显数据
-        this.form.type_id = res.data.type_id;
-        this.form.user_name = res.data.user_name;
-        this.form.role_id = res.data.role_id;
-        this.form.real_name = res.data.real_name;
-        this.form.mobile = res.data.mobile;
-        this.form.gender = res.data.gender + "";
-
-      }).catch(error=>{
+    //1.2上传项目logo
+    projectLogoUpload(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.project_logo_src = res.data.imgUrl;//显示缩略图
+        this.form.project_logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
+      // 阻止默认的上传行为
+      return false;
     },
-    //修改用户
-    editData(){
-      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          this.form.id = this.editId;
-          delete this.form.password;
-          delete this.form.confirm_password;
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
-            console.log(res);
-            this.$message({
-              type: 'success',
-              message: '用户添加成功！'
-            });
-            this.goList();
-          })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
-        }
-      }).catch(error=>{
+    //1.3上传公司logo
+    companyLogoUpload(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.company_logo_src = res.data.imgUrl;//显示缩略图
+        this.form.company_logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
+      // 阻止默认的上传行为
+      return false;
     },
-    //编辑表单 end ------------------------------------------------------------>
+    //提交表单 start ------------------------------------------------------------>
+
+    //2.编辑表单 start ------------------------------------------------------------>
+    //2.1回显数据
+    getWebsiteBase(website_id){
+      this.$store.dispatch('template/getWebsiteTemplateintel',{website_id:website_id}).then(res=>{
+        if(res.code==200){
+          this.form.website_id = res.data.website_id;//网站id
+          this.form.page_type = res.data.page_type;//页面类型
+          this.form.statement = res.data.statement;//网站声明
+          this.form.organizer = res.data.organizer;//主办单位
+          this.form.copyright_information = res.data.copyright_information;//版权信息
+          this.form.contact_number = res.data.contact_number;//联系电话
+          this.form.company_address = res.data.company_address;//公司地址
+          this.form.project_logo = res.data.project_logo;//项目logo
+          this.project_logo_src = res.data.project_logo;//项目logo缩略图
+          this.form.project_name = res.data.project_name;//项目名称
+          this.form.project_url = res.data.project_url;//项目网址
+          this.form.company_logo = res.data.company_logo;//公司logo
+          this.company_logo_src = res.data.company_logo;//公司logo缩略图
+          this.form.company_name = res.data.company_name;//公司名称
+          this.form.company_url = res.data.company_url;//公司网址
+          this.form.icp_number = res.data.icp_number;//网站备案号
+          this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
+          this.form.record_number = res.data.record_number;//网安备案号
+          this.form.record_number_url = res.data.record_number_url;//网安备案号链接
+          this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
+          this.form.communications = res.data.communications;//通联qq客服
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+    },
+    //2.2提交编辑的数据
+    editData(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('template/upWebsiteTemplateintel',this.form).then(res=>{
+            if(res.code==200){
+              this.$message.success('网站基本信息编辑成功！');
+              this.$router.push({
+                path: '/templateStyle',
+                query: {
+                  website_id: this.$route.query.website_id,
+                  step:this.$route.query.step
+                }
+              });
+            }else{
+              this.$message.error(res.message);
+            }
+          })
+        }
+      })
+    },
+    //2.编辑表单 end ------------------------------------------------------------>
 
   },
   mounted(){
     //1.展示步骤
     this.$store.commit('template/showStepStatus');
     //2.判断是新建还是回显
-    if(this.$route.query.id!=undefined){
-      this.editId = this.$route.query.id;
+    if(this.$route.query.step!=undefined){
       console.log("编辑模板！")
+      if(this.$route.query.website_id){
+        this.getWebsiteBase(this.$route.query.website_id);
+      }else{
+        this.$message.error("无法编辑，缺少关键参数！");
+      }
     }else{
       console.log("添加模板基本信息！")
     }

src/views/template/templateList.vue

@@ -13,10 +13,10 @@
           <el-col :span="8">
             <div class="searchBox">
               <div class="searchTitle">应用状态：</div>
-              <el-select v-model="getApiData.website_status" placeholder="请选择应用状态..">
-                <el-option label="全部" value="2"></el-option>
-                <el-option label="已应用" value="1"></el-option>
-                <el-option label="未应用" value="0"></el-option>
+              <el-select v-model="getApiData.status" placeholder="请选择应用状态..">
+                <el-option label="未构建" value="0"></el-option>
+                <el-option label="未应用" value="1"></el-option>
+                <el-option label="已应用" value="2"></el-option>
               </el-select>
             </div>
           </el-col>
@@ -36,29 +36,44 @@
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
-            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column fixed prop="website_id" label="网站id" width="80"></el-table-column>
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
-            <el-table-column prop="template_name" label="风格名称" width="100">
+            <el-table-column prop="name" label="风格名称" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.template_name==''"></div>
-                <div v-else>{{scope.row.template_name}}</div>
+                <div v-if="scope.row.name==''||scope.row.name==null">未选择</div>
+                <div v-else>{{scope.row.name}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="page_type" label="模板页面">
+              <template slot-scope="scope">
+                <div v-if="scope.row.page_type==''||scope.row.page_type==null">未选择</div>
+                <div v-else>{{scope.row.page_type}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="created_at" label="创建时间">
+              <template slot-scope="scope">
+                <div v-if="scope.row.created_at==''||scope.row.created_at==null">未创建</div>
+                <div v-else>{{scope.row.created_at}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="updated_at" label="更新时间">
+              <template slot-scope="scope">
+                <div v-if="scope.row.updated_at==''||scope.row.updated_at==null">未更新</div>
+                <div v-else>{{scope.row.updated_at}}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="template_page" label="模板页面"></el-table-column>
-            <el-table-column prop="created_at" label="创建时间"></el-table-column>
-            <el-table-column prop="updated_at" label="更新时间"></el-table-column>
             <el-table-column prop="status" label="状态" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.status==0">未构建</div>
-                <div v-if="scope.row.status==1">未应用</div>
-                <div v-if="scope.row.status==2">已应用</div>
+                <div v-if="scope.row.template_status==0">未构建</div>
+                <div v-if="scope.row.template_status==1">未应用</div>
+                <div v-if="scope.row.template_status==2">已应用</div>
               </template>
             </el-table-column>
             <el-table-column fixed="right" label="操作" header-align="center" width="180">
               <template slot-scope="scope">
                 <div class="listBtnBox">
-                  <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==2"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listSaveBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0||scope.row.status==1"><i class="el-icon-brush"></i>构建</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.website_id,scope.row.action_id)" v-if="scope.row.action_id!=null"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listSaveBtn" @click="creatWebsite(scope.row.website_id)" v-else><i class="el-icon-brush"></i>构建</div>
                   <div class="listMainBtn"><i class="el-icon-link"></i>应用</div>
                 </div>
               </template>
@@ -97,19 +112,10 @@ export default {
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
       windowStatus:false,//弹出框
-      tableData:[
-        {id:11,website_name:"中国三农市场网",template_name:"",template_page:"",created_at:"",updated_at:"",status:0},
-        {id:11,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:11,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:11,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
-        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2}
-      ],//内容
-      getApiData:{  
+      tableData:[],//内容
+      getApiData:{
+        website_name:"",
+        status:"",
         page:1,//当前是第几页
         pageSize:10,//一共多少条
       },
@@ -145,66 +151,109 @@ export default {
     //1.请求数据 start ------------------------------------------------------------>
     //1.1 开始请求列表信息方法
     getData(){
-      this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
-        let newData = [];
-        for(let item of res.data.rows){
-          if(item.city_name==null){item.city_name="--"}
-          newData.push(item)
+      this.$store.dispatch('template/getWebsiteintel',this.getApiData).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+          this.tableData = [];
+          this.page = 1;
+          this.allCount = 0;
+        }else{
+          let newData = [];
+          for (let item of res.data.rows) {
+            if (item.page_type != null) {
+              for (let idx = 0; idx < item.page_type.length; idx++) {
+                if (item.page_type[idx] == "1") {item.page_type[idx] = "首页"}
+                if (item.page_type[idx] == "2") {item.page_type[idx] = "分类页"}
+                if (item.page_type[idx] == "3") {item.page_type[idx] = "列表页"}
+                if (item.page_type[idx] == "4") {item.page_type[idx] = "详情页"}
+                if (item.page_type[idx] == "5") {item.page_type[idx] = "搜索页"}
+                if (item.page_type[idx] == "6") {item.page_type[idx] = "自定义列表页"}
+                if (item.page_type[idx] == "7") {item.page_type[idx] = "自定义详情页"}
+              }
+              // 将数组转换为字符串，并去掉两端的 [ 和 ]
+              item.page_type = item.page_type.join(", ");
+            }
+            newData.push(item);
+          }
+          this.tableData = newData; //给与内容
+          this.allCount = res.data.count; //给与总条数
         }
-        this.tableData = newData; //给与内容
-        this.allCount = res.data.count; //给与总条数
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-    },
-    
-    //选择风格
-    useIt(id){
-      console.log(id)
-      this.tableData.forEach(item=>{
-        item.status = 0;
       })
-      this.tableData.find(item=>item.id==id).status = 1;
     },
-
-    //1.4 列表内容分页
+    //1.2 列表内容分页
     //直接跳转
     handleSizeChange(val) {
       this.getApiData.page = val;
       this.getData();
     },
-    //1.5 点击分页
+    //1.3 点击分页
     handleCurrentChange(val) {
       this.getApiData.page = val;
       this.getData();
     },
     //列表和分页相关 end ------------------------------------------------------------>
 
+    //2.跳转操作 start ------------------------------------------------------------>
     //构建网站
-    creatWebsite(id){
-      this.$router.push({
-        path: '/templateBase',
-        query: {
-          id: id
+    creatWebsite(website_id){
+      this.$store.dispatch('template/addWebsiteTemplateintel',{website_id:website_id}).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          //可以进入下一步，带着website_id过去
+          this.$router.push({
+            path: '/templateBase',
+            query: {
+              website_id: website_id
+            }
+          });
         }
-      });
+      })
     },
-
     //编辑网站
-    getDataMain(id){
-      this.$router.push({
-        path: '/templateCreat',
-        query: {
-          id: id
-        }
-      });
+    getDataMain(website_id,step){
+      //根据步骤跳转到相应的页面
+      if(step==1){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step==1){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step==2){
+        this.$router.push({
+          path: '/templateStyle',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step>2){
+        this.$router.push({
+          path: '/templateCreat',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
     }
+    //2.跳转操作 end ------------------------------------------------------------>
   },
   mounted(){
-    //this.getData();
+    this.getData();
   }
 }
 </script>

src/views/template/templateStyle.vue

@@ -12,20 +12,17 @@
             <div class="searchBox">
               <div class="searchTitle">模板风格</div>
               <el-select v-model="getApiData.islink" placeholder="请选择..">
-                <el-option label="全部" value="0"></el-option>
-                <el-option label="简约" value="1"></el-option>
-                <el-option label="商务" value="2"></el-option>
-                <el-option label="科技" value="3"></el-option>
-                <el-option label="金融" value="4"></el-option>
-                <el-option label="教育" value="5"></el-option>
-                <el-option label="医疗" value="6"></el-option>
-                <el-option label="政府" value="7"></el-option>
+                <el-option
+                  v-for="item in allClass"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
               </el-select>
             </div>
           </el-col>
           <el-col :span="16">
             <div class="searchBtnBox">
-              <el-button @click="clearSearchList">重置</el-button>
               <el-button type="primary" @click="getData('search')">搜索</el-button>
             </div>
           </el-col>
@@ -38,9 +35,9 @@
       <tableTitle :name="tableDivTitle"/>
       <div class="templateStyleBox">
         <div class="templateStyleItem" v-for="(item,index) in tableData" :key="index">
-          <div :class="['templateStyleItemBox',{active:item.status === 1}]" @click="useIt(item.id)">
-            <img :src="item.img">
-            <div class="templateStyleItemTitle">{{item.title}}</div>
+          <div :class="['templateStyleItemBox',{active:item.status === 1}]" @click="useIt(item)">
+            <img :src="item.template_img[0].url">
+            <div class="templateStyleItemTitle">{{item.template_name}}</div>
           </div>
         </div>
       </div>
@@ -51,28 +48,10 @@
     <div class="layerBox">
       <tableTitle :name="useTemplateName"/>
       <div class="thumbnailBox">
-        <div class="thumbnailItem" @click="showImg">
+        <div class="thumbnailItem" @click="showImg(item.url)" v-for="item in userData">
           <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">首页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">分类页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">列表页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">详情页</div>
+            <img :src="item.url">
+            <div class="thumbnailItemTitle">{{item.name}}</div>
           </div>
         </div>
       </div>
@@ -80,19 +59,17 @@
     <!--步骤按钮 start------------------------------------------------------------>
     <div class="btnBox">
       <el-button type="info" @click="goBase">上一步</el-button>
-      <el-button type="primary" @click="goCreat">下一步</el-button>
+      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</el-button>
+      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
     <!--步骤按钮 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
 
-
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
-      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
-        <div class="imgZoomBox">
-          <img src="@/assets/template/style1.png">
-        </div>
-      </el-form>
+      <div class="imgZoomBox">
+        <img :src="classPic">
+      </div>
       <div slot="footer" class="dialog-footer">
         <div>
           <el-button @click="windowStatus=false">关闭</el-button>
@@ -122,21 +99,18 @@ export default {
       templateStepTitle:"仅需四步，即可完成模板创建",
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
+      allClass:[],//所有风格
       windowStatus:false,//弹出框
-      tableData:[
-        {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
-        {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
-        {id:3,img:require("@/assets/template/style3.png"),title:"逆转裁判",status:0},
-        {id:4,img:require("@/assets/template/style4.png"),title:"寒战",status:0},
-        {id:5,img:require("@/assets/template/style5.png"),title:"冲锋车",status:0},
-        {id:6,img:require("@/assets/template/style6.png"),title:"无间道",status:0},
-        {id:7,img:require("@/assets/template/style7.png"),title:"机动部队",status:0},
-        {id:8,img:require("@/assets/template/style8.png"),title:"枪火",status:0},
-      ],//内容
-      editId:0,//要修改的网站id
-      getApiData:{
-        
+      classPic:"",//放大缩略图
+      tableData:[],//内容
+      getApiData:{//搜索功能
+        website_id:"",
+        template_class_id:"",
+        page:1,
+        pageSize:10
       },
+      //用户选择的页面模板
+      userData:[],
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
     }
@@ -145,78 +119,79 @@ export default {
     //0.全局操作 start ------------------------------------------------------------>
     //上一步  
     goBase(){
-      this.$router.push({
-        path: '/templateBase',
-        query: {
-          id: this.editId
-        }
-      });
+      //先判断当前的url里面是否存在website_id和step
+      if(this.$route.query.step!=undefined&&this.$route.query.website_id!=undefined){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: this.$route.query.website_id,
+            step:this.$route.query.step
+          }
+        });
+      }else{
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: this.$route.query.website_id
+          }
+        });
+      }
     },
     //下一步
-    goCreat(id){
-      let data = {
-        id:id
-      }
+    goCreat(){
       this.$router.push({
         path: '/templateCreat',
         query: {
-          id: this.editId
+          website_id: this.$route.query.website_id
         }
       });
     },
     //放大缩略图
     showImg(img){
       this.windowStatus = true;
+      this.classPic = img;
     },
     //0.全局操作 end ------------------------------------------------------------>
 
-    //1.1 开始请求列表信息方法
-    getData(type){
-      if(type=="search"){
-        this.getApiData.page = 1;
-      }
-      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
-        //格式化：islink=0为不使用外面 islink=1为使用外链
-        //status=1为显示 status=2为不显示
-        let data = [];
-        for(let item of res.data.rows){
-          // if(item.status==0){item.status="隐藏"}
-          // if(item.status==1){item.status="显示"}
-          // if(item.status==404){item.status="已删除"}
-          if(item.islink==0){item.islink="否"}
-          if(item.islink==1){item.islink="是"}
-          data.push(item)
+    //1.风格列表 start ------------------------------------------------------------>
+    //1.1 获得所有风格
+    getAllClass(type){
+      this.$store.dispatch('template/getAllTemplateClass',this.getApiData).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data){
+            let data = {};
+            data.value = item.id
+            data.label = item.name
+            this.allClass.push(data)
+          }
         }
-        this.tableData = res.data.rows; //给与内容
-        this.allCount = res.data.count; //给与总条数
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
       })
     },
-    
-    //选择风格
-    useIt(id){
-      console.log(id)
-      this.tableData.forEach(item=>{
-        item.status = 0;
+    //1.2 获得所有模板
+    getData(type){
+      this.$store.dispatch('template/getWebsiteTemplateList',this.getApiData).then(res=> {
+        if(res.code != 200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data.rows){
+            item.status = 0;
+          }
+          console.log(res.data.rows)
+          //展示数据
+          this.tableData = res.data.rows;
+          //总条数
+          this.allCount = res.data.count;
+        }
       })
-      this.tableData.find(item=>item.id==id).status = 1;
     },
-
-
-
-
-
-
-
-
-
-
-
-
+    //1.3 选中一个模板
+    useIt(item){
+      console.log(item)
+      item.status = 1;
+      this.userData = item.template_img;
+    },
 
     //1.4 列表内容分页
     //直接跳转
@@ -229,11 +204,25 @@ export default {
       this.getApiData.page = val;
       this.getData();
     },
-    //列表和分页相关 end ------------------------------------------------------------>
+
+    addData(){
+
+    },
+    editData(){
+
+    }
+
+    //1.风格列表 end ------------------------------------------------------------>
   },
   mounted(){
-    if(this.$route.query.id!=undefined){
-      this.editId = this.$route.query.id;
+    //给与网站id
+    this.getApiData.website_id = this.$route.query.website_id;
+    //获取所有风格
+    this.getAllClass();
+    //获取所有模板
+    this.getData();
+
+    if(this.$route.query.step!=undefined){
       console.log("编辑风格！")
     }else{
       console.log("选择风格！")