admin_home/src/views/website/categoryList.vue

<template>
  <div class="mainBox">
    <!--搜索功能 start------------------------------------------------------------>
    <div class="layerBox_search">
      <el-row>
        <el-col :span="8">
          <div class="searchBox">
            <div class="searchTitle">栏目名称：</div>
            <el-input v-model="getApiData.name" placeholder="请输入栏目名称" :clearable="true" @clear="onInputClear" />
            <!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="layerBoxNoBg">
      <div>
        <el-button type="primary" @click="addCategoryList()">添加栏目名称</el-button>
      </div>
      <div>
        <el-button @click="clearSearchList">重置</el-button>
        <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</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" :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
            <el-table-column prop="name" label="栏目名称">
              <template slot-scope="scope">
                <span :class="{ highlight: isHighlight(scope.row, search) }" v-if="scope.row.pid == 0">{{ scope.row.name
                }}</span>
                <span :class="{ highlight: isHighlight(scope.row, search) }" v-else>____{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否外链" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.is_url ? '是' : "否" }}
                </div>
              </template>
            </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="230" header-align="center">
              <template slot-scope="scope">
                <div class="listBtnBox">
                  <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i
                      class="el-icon-delete"></i>删除</div>
                  <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i
                      class="el-icon-edit-outline"></i>编辑</div>
                  <div class="listMainBtn" @click="addCategoryList(scope.row)"><i class="el-icon-document-add"></i>添加
                  </div>
                </div>
                <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">删除</el-button>
                <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
              </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="editId ? '编辑栏目名称' : '添加栏目名称'" :visible.sync="windowStatus" :close-on-click-modal="false"
      @close="clearToServe(2)">
      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
        <div class="formDiv">
          <el-form-item label="栏目名称：" :label-width="formLabelWidth" prop="name" class="custom-align-right">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入栏目名称"
              :disabled="editId ? true : false"></el-input>
            <el-checkbox v-model="show_url" @change="ifUrl">引用外链</el-checkbox>
          </el-form-item>
          <div v-if="show_url == 1">
            <el-form-item label="外链地址：" :label-width="formLabelWidth" prop="web_url" class="custom-align-right">
              <el-input v-model="form.web_url" autocomplete="off" placeholder="请输入外链地址"></el-input>
            </el-form-item>
            <el-form-item label="栏目标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
              <el-input v-model="form.seo_title" autocomplete="off" placeholder="请输入栏目标题"></el-input>
            </el-form-item>
            <el-form-item label="栏目关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
              <!-- <el-input v-model="form.seo_keywords" autocomplete="off" placeholder="请输入栏目关键词"></el-input> -->
              <inputTag :initialTags="tags" @tags-updated="updateTags" />
            </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" placeholder="请输入栏目描述"></el-input>
            </el-form-item>
            <!-- <el-form-item label="排序：" :label-width="formLabelWidth" class="custom-align-right">
              <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
            </el-form-item> -->
          </div>
          <div v-if="show_url == 0">
            <!-- <el-form-item label="关联职能部门：" :label-width="formLabelWidth" prop="department_arr_id" class="custom-align-right"> -->
            <!-- <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader> -->
            <!-- <el-cascader :key="departmentKey" :props="{value:'id',label:'name',children:'children'}" :options="allDepartment" v-model="form.department_arr_id" :show-all-levels="false" filterable />
            </el-form-item> -->
            <!-- <el-form-item label="关联行政区划：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
              <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
            </el-form-item> -->
            <el-form-item label="父级栏目：" :label-width="formLabelWidth" class="custom-align-right">
              <el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级栏目" :props="parentData"
                filterable clearable></el-cascader>
            </el-form-item>
            <el-form-item label="栏目类型：" :label-width="formLabelWidth" prop="type" class="custom-align-right">
              <template #label>
                <span class="askBox">
                  栏目类型：
                  <el-tooltip class="item" effect="dark" content=" 选择类型提交后不可更改，请谨慎考虑后提交！" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </template>

              <el-radio-group v-model="form.type" size="small" :disabled="editId ? true : false">
                <el-radio-button label="1">资讯</el-radio-button>
                <el-radio-button label="2">商品</el-radio-button>
                <el-radio-button label="3">书刊音响</el-radio-button>
                <el-radio-button label="4">招聘</el-radio-button>
                <el-radio-button label="5">求职</el-radio-button>
              </el-radio-group>
              <!-- 选择类型提交后不可更改，请谨慎考虑后提交！ 提示词 -->
              <div style="color: brown;">
                选择类型提交后不可更改，请谨慎考虑后提交!
              </div>


            </el-form-item>
            <el-form-item label="栏目标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
              <template #label>
                <span class="askBox">
                  栏目标题：
                  <el-tooltip class="item" effect="dark" content="栏目标题，如：三农市场网_农资产品商城_网站列表_全国信息一体化网络平台_项目大全。"
                    placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </template>
              <el-input v-model="form.seo_title" autocomplete="off" placeholder="请输入栏目标题"></el-input>
            </el-form-item>
            <el-form-item label="栏目关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
              <template #label>
                <span class="askBox">
                  栏目关键词：
                  <el-tooltip class="item" effect="dark" content="栏目关键词，如：三农市场网、农资产品商城、全国三农、信息一体化。" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </template>
              <!-- <el-input v-model="form.seo_keywords" autocomplete="off" placeholder="请输入栏目关键词"></el-input> -->
              <inputTag :initialTags="tags" @tags-updated="updateTags" />
            </el-form-item>
            <el-form-item label="栏目描述：" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
              <template #label>
                <span class="askBox">
                  栏目描述：
                  <el-tooltip class="item" effect="dark" content="栏目描述，如：中国三农市场网，农资产品商城属市场类频道，共有5个栏目。" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </template>
              <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"
                placeholder="请输入栏目描述"></el-input>
            </el-form-item>
            <!-- <el-form-item label="排序：" :label-width="formLabelWidth" class="custom-align-right">
              <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
            </el-form-item> -->
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeWindow">取 消</el-button>
        <el-button type="primary" @click="editToServe" v-if="editBtn == true">确定</el-button>
        <el-button type="primary" @click="addToServe" v-else>提交</el-button>
      </div>
    </el-dialog>
    <!--弹出框 end------------------------------------------------------------>

  </div>
</template>

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

export default {
  components: {
    tableTitle,//表格标题
    InputTag
  },
  data() {

    //0.全局操作 start ------------------------------------------------------------>
    //表单验证
    const validateEmpty = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    // const validateDepartment = (rule,value,callback) => {
    //   if (value.length === 0) {
    //       callback(new Error('请选择职能部门！'))
    //   } else {
    //       callback()
    //   }
    // }
    // const validateCity = (rule,value,callback) => {
    //   if (value.length === 0) {
    //       callback(new Error('请选择行政区划！'))
    //   } else {
    //       callback()
    //   }
    // }
    const validatePid = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择父级栏目！'))
      } else {
        callback()
      }
    }
    let self = this;
    //0.全局操作 end ------------------------------------------------------------>
    return {
      isExpandAll: false,
      search: '',
      tags: [],
      //1.列表和分页相关 start ------------------------------------------------------------>
      tableDivTitle: "栏目名称列表",
      tableData: [],//内容
      allCount: 0,//总条数
      editId: 0,//要修改的网站id
      getApiData: {
        name: "",//栏目池名称查询
        // department_id:[],//行政职能部门id
        // city_id:[],//行政区划
        page: 1,//当前是第几页
        pageSize: 10,//一共多少条
      },
      allDepartment: [],//所有职能
      //列表和分页相关 end ------------------------------------------------------------>

      //2.搜索相关 start ------------------------------------------------------------>
      //行政职能部门
      searchDepartmentKey: 0, //列表缓存key
      // 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)
      //       }
      //     })
      //   }
      // },
      //获取城市列表
      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 ------------------------------------------------------------>
      windowStatus: false, //显示弹出框
      formLabelWidth: '140px',
      show_url: false, //是否显示外链输入框
      editBtn: false,//当显示编辑按钮的时候，就不显示提交
      //弹出框设置 end ------------------------------------------------------------>

      //4.弹出框中的表单设置 start ------------------------------------------------------------>
      //4.1表单收集的数据
      form: {
        name: '',//栏目池名称
        is_url: 0,//是否为外链，0=否 1=是
        web_url: "",//外链地址
        // department_arr_id:[],//职能部门
        // city_arr_id:[],//行政区划
        sort: 0,//排序
        //pid:2,
        seo_title: "",//标题
        seo_keywords: "",//关键词
        seo_description: "",//描述
        type: 1,//栏目类型
        pid_arr: []//父级栏目
      },
      //4.2表单验证规则
      formRules: {
        //网站名称不能为空
        name: [{ required: true, trigger: 'blur', validator: validateEmpty }],//栏目池名称不能为空
        web_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],//外链地址不能为空
        // department_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择职能部门！',validator:validateDepartment}],
        // city_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择行政区划！',validator:validateCity}],
        // pid_arr: [{type:'array',required:true,trigger:'change',message:'请选择父级栏目！',validator:validatePid}],
        seo_title: [{ required: true, trigger: 'blur', validator: validateEmpty }],//标题不能为空
        seo_keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],//关键词不能为空
        seo_description: [{ required: true, trigger: 'blur', validator: validateEmpty }],//描述不能为空
      },
      //获取城市列表
      cascaderKey: 0,//弹窗用的key
      cityData: {
        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)
            }
          })
        }
      },
      //获取职能部门
      departmentKey: 0,//弹窗用的key
      // departmentData: {
      //   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)
      //       }
      //     })
      //   }
      // },
      parentKey: 0,//获取父级栏目
      parentData: {
        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/categoryList', 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 ------------------------------------------------------------>
    }
  },
  methods: {
    onInputClear() {
      this.isExpandAll = false;
      this.getData();
    },

    //1.列表和分页相关 start ------------------------------------------------------------>
    //1.1 开始请求列表信息方法
    getData(type) {
      if (type == 'search') {
        this.getApiData.page = 1
        this.isExpandAll = true;
      } else {
        this.isExpandAll = false;
      }
      //搜索条件
      // if(this.getApiData.department_id.length>0){
      //   //网系只提交最后一个
      //   this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
      // }
      // if(this.getApiData.city_id.length>0){
      //   //城市id只提交最后一个
      //   this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
      // }
      //如果是搜索，重新加载第一页

      this.$store.dispatch('pool/getCategoryList', this.getApiData).then(res => {
        // console.log("=============:",res.data)
        this.tableData = res.data.rows; //��与内容
        this.allCount = res.data.total
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '网络错误，请重试！'
        });
      })
    },
    //1.2 删除内容
    deleteData(id) {
      this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("当前删除：" + id)
        this.$store.dispatch('pool/delCategory', { id: id }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else if (res.code == 0) {
            this.$message({
              type: 'warning',
              message: res.message
            });
          }
          this.getData();
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '网络错误，请重试！'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //1.3 直接跳转
    handleSizeChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.4 点击分页
    handleCurrentChange(val) {
      this.getApiData.page = val;
      this.getData();
    },
    //1.5 重置按钮
    clearSearchList() {
      this.isExpandAll = false;
      this.tableData = [];
      this.getApiData.name = "";
      // this.getApiData.department_id = [];
      // this.getApiData.city_id = [];
      this.getApiData.page = 1;
      this.getApiData.pageSize = 10;
      this.getData();
    },
    //1.6 获取所有职能
    getAllDepartment() {
      this.$store.dispatch('cms/getAllDepartment').then(res => {
        // console.log(res)
        this.allDepartment = res.data;
      })
    },
    //列表和分页相关 end ------------------------------------------------------------>

    //2.弹出框设置 start ------------------------------------------------------------>
    //2.1 打开弹出框
    openWindow() {
      //this.clearToServe();
      this.windowStatus = true;
    },
    //2.1.1 添加栏目池
    addCategoryList(row) {
      this.form.pid_arr = [];
      this.show_url = false;
      // this.form.is_url = 0;
      this.editId = 0;
      this.editBtn = false;
      this.tags = []
      if (row) {
        if (row.pid == 0) {
          this.form.pid_arr.push(row.id)
        } else {
          let pidArr = [];
          // console.log("fuck:",row.pid_arr);
          pidArr = JSON.parse(row.pid_arr)
          pidArr.push(row.id)
          this.form.pid_arr = pidArr
          // console.log('追加id：',this.form.pid_arr)
        }
      }
      // console.log("=========:", this.form.pid_arr)
      this.openWindow();
    },
    //2.2 关闭弹出框
    closeWindow() {
      this.windowStatus = false;
      this.clearToServe(2);
    },
    //2.3 清理弹出框
    clearToServe(type) {
      if (type == 1) { //type1 使用了外部链接
        // this.form.department_arr_id = [];
        // this.form.city_arr_id = [];
        this.form.pid_arr = [];
        this.form.type = 1;
      }
      if (type == 2) { //type2 全部清理
        this.form.name = "";
        this.form.is_url = 0;
        this.form.web_url = "";
        // this.form.department_arr_id = [];
        // this.form.city_arr_id = [];
        this.form.sort = 0;
        this.form.seo_title = "";
        this.form.seo_keywords = "";
        this.form.seo_description = "";
        this.form.pid_arr = [];
        this.form.type = 1;
        //存在验证的时候再清理
        if (this.$refs.form && this.$refs.form.fields.some(field => field.validateState === 'error')) {
          this.$refs.form.clearValidate();
        }
      }
    },
    //弹出框设置 end ------------------------------------------------------------>

    //3.添加栏目池 start ------------------------------------------------------------>
    ifUrl(value) {
      console.log(value)
      if (value == true) {
        this.form.is_url = 1
      } else {
        this.form.is_url = 0
      }
      this.$refs.form.clearValidate();
    },
    addToServe() {
      //先判断是否使用了外链
      if (this.show_url == true) {
        this.clearToServe(1)
      }
      //判断有没有添加父级栏目
      if (this.form.pid_arr.length == 0) {
        this.form.pid_arr = [0];
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$store.dispatch('pool/addCategory', this.form).then(res => {
            //汇报结果
            this.$message({
              type: 'success',
              message: '已成功添加栏目池！'
            });
            //清空并退出
            this.closeWindow();
            this.getData();
          }).catch(() => {
            this.$message({
              type: 'warning',
              message: '网络错误，请重试！'
            });
          })
        }
      })

    },
    //添加栏目池 end ------------------------------------------------------------>

    //编辑栏目池 start ------------------------------------------------------------>
    getDataMain(id) {
      //先清空窗口
      this.clearToServe(2)
      //打开输入窗口
      this.openWindow();
      //添加修改id
      this.editId = id;

      //获取网站详情
      this.$store.dispatch('pool/getCategoryInfo', { id: id }).then(res => {
        //清除错误状态
        //this.$refs.form.clearValidate();
        // console.log(res)
        //回显栏目池名称
        this.form.name = res.data.name;

        //回显示是否使用外链
        if (res.data.is_url == 1) {
          this.show_url = true;
        } else if (res.data.is_url == 0 || res.data.is_url == null) {
          this.show_url = false;
        }
        // console.log(res.data.is_url)
        this.form.is_url = res.data.is_url;

        //回显外链
        this.form.web_url = res.data.web_url;

        //回显行政区划
        // this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
        // //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
        // this.cascaderKey += 1;
        // this.loadCascaderPath(this.form.city_arr_id,"xzqh");

        //回显父级栏目
        this.form.pid_arr = JSON.parse(res.data.pid_arr);
        this.parentKey += 1;
        // this.loadCascaderPath(this.form.pid_arr,"fjdh");

        //回显职能部门
        // this.form.department_arr_id = JSON.parse(res.data.department_arr_id);
        // this.departmentKey += 1;
        // this.loadCascaderPath(this.form.department_arr_id,"znbm");

        //回显栏目池标题，描述，关键词
        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.type = res.data.type;

        //回显排序
        this.form.sort = res.data.sort;

      })
      this.editBtn = true;//显示编辑按钮
    },
    //回显行政区划
    // async loadCascaderPath(path,type) {
    //   for (let i = 0; i < path.length; i++) {
    //     const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
    //     const level = i; // 当前层级的索引
    //     await this.$store.dispatch('pool/getcityList', { pid: parentId })
    //       .then((res) => {
    //         const nodes = res.data.map(item => ({
    //           value: item.id,
    //           label: item.name,
    //           leaf: level >= 3, // 这里假设4层结构，设置叶子节点标记
    //         }));
    //         // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
    //         if (level === path.length - 1) {
    //           if(type=="xzqh"){this.form.city_arr_id = path;}
    //           if(type=="fjdh"){this.form.pid_arr = path;}
    //           if(type=="znbm"){this.form.department_arr_id = path;}
    //         }
    //       });
    //   }
    // },
    //修改表单
    editToServe() {
      //防止提交[1,1]这种重复的数据
      // if (this.form.department_arr_id.length > 1) {
      //   const lastIndex = this.form.department_arr_id.length - 1;
      //   if (this.form.department_arr_id[lastIndex] === this.form.department_arr_id[lastIndex - 1]) {
      //     this.form.department_arr_id.pop(); // Remove the last element if it's the same as the previous one
      //   }
      // }
      this.form.id = this.editId;
      this.$refs.form.validate(valid => {
        if (valid) {
          //提交表单
          this.$store.dispatch('pool/updateCategory', this.form).then(res => {
            //汇报结果
            this.$message({
              type: 'success',
              message: '已成功修改栏目池信息！'
            });
            //清空并退出
            this.closeWindow();
            this.getData();
          }).catch(() => {
            this.$message({
              type: 'warning',
              message: '网络错误，请重试！'
            });
          })
        }
      })

    },
    //关键词
    updateTags(newTags) {
      // this.foem.seo_keywords = newTags;
      this.tags = newTags;
      this.form.seo_keywords = newTags.join(',');
    },
    isHighlight(row, search) {
      if (!search) return false;
      const lowerSearch = search.toLowerCase();
      return row.name.toLowerCase().includes(lowerSearch);
    },
    //编辑栏目池 end ------------------------------------------------------------>
  },
  mounted() {
    //1.获得初始数据
    this.getData();
    //2.获取所有网系
    //this.getwebsiteColumn();
    //本地转换id为文字
    //console.log(getLocationNameById("110000"))
    this.getAllDepartment();
  }
}
</script>

<style scoped lang="less">
::v-deep .highlight {
  background-color: yellow;
}

//表单微调 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;
  /* 设置标签文字右对齐 */
}

.collector {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 20px;
  width: 76px;
  height: 36px;
  line-height: 36px;
  position: relative;

  .collectorIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../assets/advertise/Graph.png");
    vertical-align: middle;
    margin-right: 6px;
  }

  .collectorIcon1 {
    position: absolute;
    top: 12px;
    left: 8px;
  }
}


.collector {
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  color: #519C66;
  background-color: rgba(81, 156, 102, 0.16);

  >i {
    padding-right: 8px;
  }
}

//表单微调 end------------------------------------------------------------>*/</style>