admin_home/src/views/template/templateList.vue

<template>
  <div class="mainBox">
    <!--搜索功能 start------------------------------------------------------------>
    <div class="layerBox_search">
      <div class="layerBoxLine">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">网站名称：</div>
              <el-input v-model="getApiData.website_name" placeholder="请输入网站名称"></el-input>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">应用状态：</div>
              <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>
          <el-col :span="8">
            <div class="searchBtnBox">
              <el-button>重置</el-button>
              <el-button type="primary" @click="getData('search')">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--搜索功能 end------------------------------------------------------------>
    <!--表格内容 start------------------------------------------------------------>
    <div class="layerBox">
      <tableTitle :name="tableDivTitle"/>
      <el-row>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <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="name" label="风格名称" width="100">
              <template slot-scope="scope">
                <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="status" label="状态" width="100">
              <template slot-scope="scope">
                <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.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>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
    </div>
    <div class="alignBox">
      <el-row>
        <el-col :span="24">
          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//表格标题
import tableTitle from './public/tableTitle';
//引入公用样式
import '@/styles/global.less';
//步骤条
import step from './public/step';

export default {
  components: {
    tableTitle,//表格标题
    step//步骤条
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      templateStepTitle:"仅需四步，即可完成模板创建",
      tableDivTitle:"模板列表",
      useTemplateName:"已选择风格",
      windowStatus:false,//弹出框
      tableData:[],//内容
      getApiData:{
        website_name:"",
        status:"",
        page:1,//当前是第几页
        pageSize:10,//一共多少条
      },
      allCount:20,//总条数
      //分页相关 end ------------------------------------------------------------>
    }
  },
  methods: {
    //0.全局操作 start ------------------------------------------------------------>
    //上一步  
    goBase(){
      this.$router.push({
        path: '/templateBase',
        query: {
          id: this.editId
        }
      });
    },
    //下一步
    goCreat(id){
      let data = {
        id:id
      }
      this.$router.push({
        path: '/templateCreat',
        query: {
          id: this.editId
        }
      });
    },
    //0.全局操作 end ------------------------------------------------------------>

    //1.请求数据 start ------------------------------------------------------------>
    //1.1 开始请求列表信息方法
    getData(){
      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; //给与总条数
        }
      })
    },
    //1.2 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.3 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //列表和分页相关 end ------------------------------------------------------------>

    //2.跳转操作 start ------------------------------------------------------------>
    //构建网站
    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(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();
  }
}
</script>

<style scoped lang="less">
  .searchBtnBox {
    padding-top: 26px;
    text-align: right;
  }
  .paginationBox {
    padding: 20px 0 0 0;
    text-align: center;
  }
  .btnBox {
    padding:0 0 40px 0;
    text-align: center;
  }
</style>