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.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>
            </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="id" label="编号" width="50"></el-table-column>
            <el-table-column prop="website_name" label="网站名称"></el-table-column>
            <el-table-column prop="template_name" label="风格名称" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.template_name==''">无</div>
                <div v-else>{{scope.row.template_name}}</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>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)" v-if="scope.row.status==1"><i class="el-icon-edit-outline"></i>编辑</div>
                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0"><i class="el-icon-brush"></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 './components/tableTitle';
//引入公用样式
import '@/styles/global.less';
//步骤条
import step from './components/step';

export default {
  components: {
    tableTitle,//表格标题
    step//步骤条
  },
  data() {
    return {
      //1.列表和分页相关 start ------------------------------------------------------------>
      templateStepTitle:"仅需四步，即可完成模板创建",
      tableDivTitle:"模板列表",
      useTemplateName:"已选择风格",
      windowStatus:false,//弹出框
      tableData:[
        {id:1,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:2,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:3,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:4,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:1},
        {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:1},
        {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:1},
        {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:1},
        {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:1},
        {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:1}
      ],//内容
      getApiData:{  
        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('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.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 列表内容分页
    //直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.5 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //列表和分页相关 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>