admin_home/src/views/website/editNavigation.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 placeholder="请输入展示名称" autocomplete="off" v-model="getApiData.alias"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">栏目名称：</div>
              <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name"/>
            </div>
          </el-col>
           <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">行政职能部门：</div>
              <el-cascader :key="searchDepartmentKey" v-model="getApiData.department_id" placeholder="请选择行政职能部门" :props="searchDepartmentData" filterable clearable></el-cascader>
            </div>
          </el-col> 
        </el-row>
      </div> 
       <div class="layerBoxLineTwo">
        <el-row>
          <el-col :span="8">
            <div class="searchBox">
              <div class="searchTitle">行政区划：</div>
              <el-cascader :key="searchCascaderKey" v-model="getApiData.city_id" placeholder="选择导航池所属行政区划" :props="searchCityData" filterable clearable></el-cascader>
            </div>
          </el-col>
        </el-row>
      </div>
    </div> -->
    <!-- <div class="layerBoxNoBg">
      <div></div>
      <div>
         <el-button @click="clearSearchList">重置</el-button>
        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button> 
      </div>
    </div> -->
    <!--搜索功能 end------------------------------------------------------------>

    <!--表格内容 start------------------------------------------------------------>
    <div class="layerBox">
      <tableTitle :name="tableDivTitle"/>
      <el-row>
        <template>
          <el-table :data="tableData" style="width: 100%"  row-key="id"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column fixed prop="id" label="编号" width="180"></el-table-column>
            <el-table-column prop="name" label="栏目名称"></el-table-column>
            <el-table-column prop="alias" label="展示名称"></el-table-column>
            <el-table-column prop="sort" 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 fixed="right" label="操作" width="120" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listEditBtn" @click="editRow(scope.row.category_id)"><i class="el-icon-edit-outline"></i>编辑</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
    </div>

    <!--分页 start------------------------------------------------------------>
    <!-- <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> -->
    <!--分页 end------------------------------------------------------------>
    <!--表格内容 end------------------------------------------------------------>

    <!--弹出框start------------------------------------------------------------>
    <el-dialog title="编辑栏目" :visible.sync="windowStatus">
      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
        <div class="formDiv">
          <el-form-item label="展示名称：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
            <el-input v-model="form.alias" autocomplete="off"></el-input>
            <input type="hidden" v-model="form.seo_title">
          </el-form-item>
          <el-form-item label="展示标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input v-model="form.seo_title" autocomplete="off"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="展示关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
            <div class="formLabelFloatBox">
              <inputTag  :initialTags="tags" @tags-updated="updateTags"/> 
              <!-- <inputTag  :initialTags="form.seo_keywords" @tags-updated="updateTags"/> -->
              <!-- <el-input v-model="form.seo_keywords" autocomplete="off"></el-input> -->
            </div>
          </el-form-item>
          <el-form-item label="展示描述：" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
            <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"></el-input>
          </el-form-item>
          <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input v-model="form.sort" autocomplete="off" ></el-input>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="closeWindow">取 消</el-button>
          <el-button type="primary" @click="addToServe">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>


  </div>
</template>

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

import InputTag from '@/components/InputTag'
export default {
  components: {
    tableTitle,//表格标题
    InputTag
  },
  data() {
    //0.全局操作 start ------------------------------------------------------------>
    //表单验证
    const validateEmpty = (rule,value,callback) => {
      if (value.length == 0) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    let self = this;
    //0.全局操作 end ------------------------------------------------------------>

    return {
      tags: ['初始标签1', '初始标签2'],
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle:"栏目详情",
      tableData: [],//列表
      allCount:0,//总条数
      editId:0,//要修改的网站id
      getApiData:{
        website_id:0,//网站id
        name:"",//导航名称
        alias:"",//网站导航名称
        city_id:"",//行政区划
        department_id:"",//行政职能部门
        page:1,//当前是第几页
        pageSize:10,//一共多少条
      },
      website_column_arr:[],//获得的网系
      //分页相关 end ------------------------------------------------------------>

      //2.弹出框设置 start ------------------------------------------------------------>
      //是否显示弹出窗口
      windowStatus:false,
      formLabelWidth: '120px',
      //弹出框设置 end ------------------------------------------------------------>

      //3.搜索相关 start ------------------------------------------------------------>
      //3.1获得职能部门
      searchDepartmentKey:0,
      searchDepartmentData: {
        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/getDepartment',parames).then(res=> {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },
      //3.2获得行政区划
      searchCascaderKey:0, //列表缓存key
      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)
            }
          })
        }
      },
      //搜索相关 end ------------------------------------------------------------>

      //3.弹出框中的表单设置 start ------------------------------------------------------------>
      //3.1 表单收集的数据
      form: {
        website_id:0,//网站id
        category_id:0,//导航id
        alias:"",//导航名称
        seo_title:"",//导航seo名称
        seo_keywords:"",//导航关键词
        seo_description:"",//导航描述
        sort:0//排序
      },
      //3.2表单验证规则
      formRules: {
        //网站名称不能为空
        alias:[{required:true,trigger:'blur',validator:validateEmpty}],
        sort:[{required:true,trigger:'blur',validator:validateEmpty}],
        //网站标题，关键词，描述不能为空
        seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
        seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
        seo_description:[{required:true,trigger:'blur',validator:validateEmpty}],
      },
      //弹出框中的表单设置 end ------------------------------------------------------------>
    }
  },
  methods: {
    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 获取内容
    getData(){
      //行政职能部门提交最后一个
      if(this.getApiData.department_id.length>0){
        this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
      }
      //城市id提交最后一个
      if(this.getApiData.city_id.length>0){
        this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
      }
      this.$store.dispatch('pool/getWebsiteAllCategory',this.getApiData).then(res=> {
        let data = res.data;
        this.tableData = data;//放入数据
        // 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();
    // },
    //1.4 重置按钮
    clearSearchList(){
      this.tableData = [];
      this.getApiData.alias = "";
      this.getApiData.name = "";
      this.getApiData.department_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();
    },
    //2.3 清空提交窗口
    clearToServe(){
      //重置窗口
      this.editId = "";
      this.form.website_id = 0;
      this.form.category_id = 0;
      this.form.alias = "";
      this.form.seo_title = "";
      this.form.seo_keywords = "";
      this.form.seo_description = "";
    },
    //弹出框设置 end ------------------------------------------------------------>


    //4.编辑导航 start ------------------------------------------------------------>
    //回显数据
    editRow(id){
      this.openWindow();
      let data = {
        website_id:this.$route.query.website_id,
        category_id:id
      }
      this.$store.dispatch('pool/getWebsiteCategoryOnes',data).then(res=> {
        // console.log(res.data)
        this.form.website_id = this.$route.query.website_id;
        this.form.category_id = id;
        this.form.alias = res.data.alias;
        this.form.seo_title = res.data.seo_title;
        this.form.seo_keywords = res.data.seo_keywords;
        this.tags = res.data.seo_keywords?res.data.seo_keywords.split(','):[];
        this.form.seo_description = res.data.seo_description;
        this.form.sort = res.data.sort;
      })
    },
    //提交编辑的数据
    addToServe(){
      //把标题的值给与seo_title
      // this.form.seo_title = this.form.alias;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store.dispatch('pool/upWebsiteCategoryones',this.form).then(res=> {
            //汇报结果
            this.$message({
              type: 'success',
              message: '已成功修改导航信息！'
            });
            //清空并退出
            this.closeWindow();
            this.getData();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '网络错误，请重试！'
            });
          })
        }
      })
      this.getData();
    },
    //编辑导航 end ------------------------------------------------------------>
    updateTags(newTags) {
            // this.foem.seo_keywords = newTags;
            this.tags = newTags;
            this.form.seo_keywords = newTags.join(',');
    },
  },
  mounted(){
    //console.log(this.$route.query);
    //获取具体参数
    this.getApiData.website_id = this.$route.query.website_id;
    this.getApiData.page = this.$route.query.page;
    this.getApiData.pageSize = this.$route.query.pageSize;
    //获取页面列表
    this.getData();
  }
}
</script>

<style scoped lang="less">
//表单微调 start------------------------------------------------------------>*/
::v-deep .custom-form-item > .el-form-item__label {
  line-height: 140px !important;
}
::v-deep .custom-textarea .el-textarea__inner {
  resize: none; /* 禁止用���拖拽调整大小 */
}
::v-deep .custom-align-right .el-form-item__label {
  text-align: right; /* 设置标签文字右对齐 */
}
</style>