more

明梦爽

2022-01-25 546c0df2c7d278cb2a3e6fa6fc2ff730d410fdbd

 src/components/Administrator/Main.vue

@@ -7,6 +7,7 @@
        :options="options"
        clearable
        filterable
        :getCheckedNodes="true"
        @change="handleChange">
      </el-cascader>
    </div>
@@ -19,19 +20,23 @@
          </el-col>
          <el-col :span="10">
            <!-- 新闻搜索 -->
            <el-input clearable @clear="qingKong()" placeholder="请输入所要查询的新闻标题" v-model="fuzzyForm.fuzzytitle" class="input-with-select">
              <el-button class="btn" slot="append" icon="el-icon-search" @click="fuzzyList(fuzzyForm.fuzzytitle)"></el-button>
            <el-input clearable placeholder="请输入所要查询的新闻标题" v-model="search" class="input-with-select">
            </el-input>
          </el-col>
        </el-row>
        <!-- 新闻表格区域 -->
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
        <el-table 
          :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
          border 
          style="width: 100%" 
          :header-cell-style="{textAlign: 'center'}" 
          :cell-style="{ textAlign: 'center' }"
        >
          <!-- :header-cell-style="{textAlign: 'center'}"设置头部居中： -->
          <!-- :cell-style="{ textAlign: 'center' }"设置整个表格内容水平居中： -->
          <!-- 问题：怎么获取数组中每个对象的key值（每条新闻的id）?
               解决：通过作用域插槽 slot-scope 获取每个对象 -->
          <el-table-column type="index"></el-table-column>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ (currentPage-1)*pageSize+scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="日期" width="" >
          </el-table-column>
          <el-table-column prop="title" label="新闻标题" width="">
@@ -55,7 +60,6 @@
          <!-- 获取新闻列表分页 -->
          <div>
            <el-pagination
              v-show="getShow"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
@@ -63,19 +67,6 @@
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 模糊新闻列表分页 -->
          <div>
            <el-pagination
              v-show="fuzzyShow"
              @size-change="handleSizeChangefuzzy"
              @current-change="handleCurrentChangefuzzy"
              :current-page="fuzzyForm.fuzzycurrent"
              :page-sizes="[6,12, 18,]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fuzzyForm.fuzzytotal">
            </el-pagination>
          </div>
        </div>
@@ -95,8 +86,13 @@
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="发布日期:">
            <!-- <el-input v-model="editForm.releaseTime"></el-input> -->
            <el-date-picker v-model="editForm.releaseTime" type="date" placeholder="请选择发布日期"></el-date-picker>
            <el-date-picker 
              v-model="editForm.releaseTime" 
              type="date" 
              placeholder="请选择发布日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
@@ -113,16 +109,20 @@
export default {
  data() {
    return {
      fuzzyShow:false,  //模糊查询分页的显示(布尔值)
      search:'',
      getShow:true, //获取分页的显示(布尔值)
      gettable:true,  //获取表格的显示
      visible: false,
      editDialogVisible:false,  //控制修改对话框的布尔值
      editForm:{},  //查询到的新闻对象，目前仅供修改使用
      newsCategoryId:1, //先存一个小标题id
      tableData:[],   //新闻列表对象
      fuzzytableData:[],  //模糊查询列表对象
      pageSize:6,     //每页条数
      currentPage:1,  //当前页
      total:0,        //新闻总条数
      fuzzyShow:false,  //模糊查询分页的显示(布尔值)
      fuzzytable:false, //模糊查询表格的显示
      fuzzyForm:{ fuzzytitle:'',fuzzytotal:0,fuzzycurrent:1,fuzzysize:6 },  //模糊查询列表对象
      value: [],
      options: [{
@@ -139,6 +139,10 @@
        {
          value:44,
          label: '学院动态',
        },
        {
          value:45,
          label: '轮播图',
        }],
      },{
          value: 22,
@@ -223,6 +227,7 @@
    handleChange(value) {
      // console.log(value);
      // console.log(value[1]);
      this.currentPage = 1;
      this.newsCategoryId = value[1]; //将得到的小标题id存放起来
      this.query(this.newsCategoryId);
    },
@@ -278,6 +283,8 @@
      }
      this.fuzzyShow = true //模糊分页显示
      this.getShow = false  //获取分页隐藏
      this.gettable = false
      this.fuzzytable = true
      const data = {
        current: this.fuzzyForm.fuzzycurrent,
        size: this.fuzzyForm.fuzzysize,
@@ -288,7 +295,7 @@
        if (res.code !== 200) {
          return this.$message.error('查询新闻列表失败')
        }else{
          this.tableData = res.data.records
          this.fuzzytableData = res.data.records
          this.fuzzyForm.fuzzytotal = res.data.total
        }
      }).catch(err => {
@@ -298,9 +305,12 @@
    //清空查询列表内容
    qingKong(){
      this.tableData = []
      this.fuzzytableData = []
      this.fuzzyForm.fuzzytotal = 0
      this.fuzzyShow = false
      this.getShow = true
      this.fuzzytable = false
      this.gettable = true
    },
    //根据id删除新闻
    async deleteNews(id){
@@ -358,6 +368,20 @@
    },
    //去往添加编辑页面
    goEdit(id){
      let title = '';
      console.log(this.value);
      if (this.value.length = 2) {
        let t = this.value[0];
        let i = this.value[1];
        this.options.forEach( item => {
          if(item.value == t){
            title += item.label+'/'
            item.children.forEach( e => {
              if(e.value == i) title += e.label;
            })
          }
        })
      }
      if (this.newsCategoryId==27&&this.total==1||this.newsCategoryId==28&&this.total==1||this.newsCategoryId==29&&this.total==1||
      this.newsCategoryId==30&&this.total==1||this.newsCategoryId==31&&this.total==1) {
        this.$message.error('该新闻标题下只能存在一篇新闻')
@@ -366,11 +390,15 @@
      this.newsCategoryId==38||this.newsCategoryId==39||this.newsCategoryId==40||
      this.newsCategoryId==41||this.newsCategoryId==42||this.newsCategoryId==43||
      this.newsCategoryId==44){
        this.$router.push({path:'/administrator/edit',query:{id:id}})
        this.$router.push({path:'/administrator/edit',query:{id:id,title:title}})
        console.log(this.newsCategoryId);
      }else if(this.newsCategoryId==45){
        this.$router.push({path:'/administrator/editlunbo',query:{id:id,title:title}})
        // console.log(this.newsCategoryId);
      }else{
        this.$message.error('请先选择新闻标题')
      } 
 
    }
  },
}