boss/pages/main/index/cps_manage.vue

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane name="tag">
        <span slot="label"><i class="el-icon-document-remove"></i> 标签</span>
        <!--        头部操作模块 start -->
        <div style="width:200px;margin:0 15px;float:left;">
        <el-input v-model="tagName" placeholder="搜索标签" @keyup.enter.native="searchTag"></el-input>
        </div>
        <div style="width:200px;margin:0 15px;float:left;">
          <el-select v-model="category" clearable placeholder="全部领域">
            <el-option
              v-for="item in categoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="width:100px;margin:0 15px;float:left;">
          <el-button type="primary" @click="searchTag">搜索</el-button>
        </div>
        <div style="margin:0 15px;float:right;">
          <el-button type="primary" @click="addTag"><i class="el-icon-plus"></i>新增标签</el-button>
        </div>
        <div style="clear: both;"></div>
<!--        头部操作模块 end -->
<!--        新增标签弹出层 start -->
        <el-dialog
          title="新增标签"
          :visible.sync="tagDialogVisible"
          width="30%">
          <el-form ref="form" :model="tagForm" label-width="100px">
            <el-form-item>
              <p slot="label">标签名<span style="color:red;">*</span></p>
              <el-input v-model="tagForm.name"></el-input>
            </el-form-item>
            <el-form-item label="标签别名">
              <el-select class="tag_aa"
                v-model="tagForm.aliases"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择标签别名" style="width: 100%;">
                <el-option
                  v-for="item in tagRelationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权重值">
              <el-input v-model="tagForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="关联子标签">
              <el-select v-model="tagForm.subtags" remote multiple filterable :multiple-limit=5 reserve-keyword placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in tagOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addTagSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
          title="修改标签"
          :visible.sync="editTagDialogVisible"
          width="30%">
          <el-form ref="form" :model="tagForm" label-width="100px">
            <el-form-item>
              <p slot="label">标签名<span style="color:red;">*</span></p>
              <el-input v-model="tagForm.name" v-bind:readonly="isReadOnly"></el-input>
            </el-form-item>
            <el-form-item label="标签别名">
              <el-select class="tag_aa"
                         v-model="tagForm.aliases"
                         multiple
                         filterable
                         allow-create
                         default-first-option
                         placeholder="请选择标签别名" style="width: 100%;">
                <el-option
                  v-for="item in tagRelationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权重值">
              <el-input v-model="tagForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="关联子标签">
              <el-select v-model="tagForm.subtags" remote multiple filterable :multiple-limit=5 reserve-keyword placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in tagOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editTagSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
<!--        新增标签弹出层 end -->
<!--        标签表格数据 start -->
        <el-table
          :data="tagData">
          <el-table-column
            prop="name"
            label="标签名"
            width="180">
          </el-table-column>
          <el-table-column
            label="别名"
            width="280">
            <template slot-scope="scope">
              <template v-if="scope.row['aliases'] != null">
                <template v-for="item in scope.row['aliases']">
                  <span style="margin-right: 8px">{{item}}</span>
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="weight"
            label="权重"
            width="180">
          </el-table-column>
          <el-table-column
            label="关联子标签">
                <template slot-scope="scope">
                  <div v-if="scope.row['subtags'] && scope.row['subtags'].length">
                    <el-tag v-for="(tagid, idx) in scope.row['subtags']" v-if="idx < 8">{{tag_map[tagid]}}</el-tag>
                    <p>总共有{{scope.row['subtags'].length}}个</p>
                  </div>
                </template>
          </el-table-column>
          <el-table-column
            label="关联领域">
            <template slot-scope="scope">
              {{scope.row['catIds'] && scope.row['catIds'].length ? scope.row['catIds'].map(id => cat_map[id]).join(', ') : '-'}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
            <el-button
              type="text"
              @click="editTag(scope.row)"
            ><i class="el-icon-edit"></i></el-button>
            <el-button
              type="text"
              @click="delTag(scope.row['id'])"
            ><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        标签表格数据 end -->
      </el-tab-pane>
      <el-tab-pane name="category">
        <span slot="label"><i class="el-icon-box"></i> 领域</span>
        <!--        头部操作模块 start -->
        <div style="width:200px;margin:0 15px;float:left;">
          <el-input v-model="categoryName" placeholder="搜索领域" @keyup.enter.native="searchCat"></el-input>
        </div>
        <div style="width:250px;margin:0 15px;float:left;line-height: 40px;">
          <el-checkbox v-model="categoryChecked1">仅技术领域</el-checkbox>
          <el-checkbox v-model="categoryChecked2">仅行业领域</el-checkbox>
        </div>
        <div style="width:100px;margin:0 15px;float:left;">
          <el-button type="primary" @click="searchCat">搜索</el-button>
        </div>
        <div style="margin:0 15px;float:right;">
          <el-button type="primary" @click="addCategoryInit"><i class="el-icon-plus"></i>新增领域</el-button>
        </div>
        <div style="clear: both;"></div>
        <!--        头部操作模块 end -->
        <!--        领域表格数据 start -->

        <el-table
          :data="categoryData">
            <el-table-column
              prop="name"
              label="领域名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="weight"
              label="权重"
              width="180">
            </el-table-column>
            <el-table-column
              label="技术领域"
              width="180">
              <template slot-scope="scope">
                <template v-if="scope.row['isTechnical'] == true">
                  <p>是</p>
                </template>
                <template v-else>
                  <p>否</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="行业领域">
              <template slot-scope="scope">
                <template v-if="scope.row['isIndustrial'] == true">
                  <p>是</p>
                </template>
                <template v-else>
                  <p>否</p>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              label="关联标签">
              <template slot-scope="scope">
                <div v-if="scope.row['tags'] && scope.row['tags'].length">
                  <el-tag v-for="(tagid, idx) in scope.row['tags']" v-if="idx < 8">{{tag_map[tagid]}}</el-tag>
                  <p>总共有{{scope.row['tags'].length}}个</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="editCat(scope.row)"
                ><i class="el-icon-edit"></i></el-button>
                <el-button
                  type="text"
                  @click="delCat(scope.row['id'])"
                ><i class="el-icon-delete"></i></el-button>
              </template>
            </el-table-column>
        </el-table>
        <!--        领域表格数据 end -->
        <!--        新增领域弹出层 start -->
        <el-dialog
          title="新增领域"
          :visible.sync="categoryDialogVisible"
          width="30%">
          <el-form ref="form" :model="catForm" label-width="100px">
            <el-form-item>
              <p slot="label">领域名<span style="color:red;">*</span></p>
              <el-input v-model="catForm.name"></el-input>
            </el-form-item>
            <el-form-item label="权重值">
              <el-input v-model="catForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="领域归属">
              <el-checkbox v-model="catForm.isTechnical">仅技术领域</el-checkbox>
              <el-checkbox v-model="catForm.isIndustrial">仅行业领域</el-checkbox>
            </el-form-item>
            <el-form-item label="关联标签">
              <el-select v-model="catForm.tags" multiple filterable  placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in tagOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addCategory">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog
          title="编辑领域"
          :visible.sync="editCategoryDialogVisible"
          width="1300px">
          <el-form ref="form" :model="catForm" label-width="100px">
            <el-form-item>
              <p slot="label">领域名<span style="color:red;">*</span></p>
              <el-input v-model="catForm.name"></el-input>
            </el-form-item>
            <el-form-item label="权重值">
              <el-input v-model="catForm.weight"></el-input>
            </el-form-item>
            <el-form-item label="领域归属">
              <el-checkbox v-model="catForm.isTechnical">技术领域</el-checkbox>
              <el-checkbox v-model="catForm.isIndustrial">行业领域</el-checkbox>
            </el-form-item>
            <el-form-item label="关联标签">
              <el-select v-model="catForm.tags" multiple filterable  placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in tagOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editCategory">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增领域弹出层 end -->
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute;right:30px;top:20px;">
      <el-link type="primary" @click="syncDictionary"><i class="el-icon-refresh"></i> 同步CPS词典</el-link>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // activeName: 'tag',
        activeName: 'category',
        isReadOnly: true,
        tagData: [],//标签数据
        tagOption: [],//标签数据池
        tag_map: {},
        categoryData: [],//领域数据
        cat_map: {},
        tagName: '', //标签名称
        categoryOptions: [],//领域选项
        category:'',//领域选项值
        categoryName: '',//领域名称
        tagDialogVisible: false,//新增标签弹出层
        categoryDialogVisible: false,//新增领域弹出层
        editTagDialogVisible: false,//修改标签弹出层
        editCategoryDialogVisible: false,//修改领域弹出层
        tagForm: {weight:30},
        temp_data: {},
        catForm: {weight:50},
        form: {},
        categoryChecked1: false,
        categoryChecked2: false,
        tagRelationOptions: [],
        categoryRelationOptions: [],
      };
    },
    created: function () {
      this.getTableData()
        .catch(e => {
          this.$message({
            type: "error",
            message: e.message
          })
        });
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        let tag_res = await this.$post("/api/admin/CpsManage/listTags", {});
        if(tag_res.status == 1){
          let map_i = {};
          this.tagData = tag_res.data;
          this.tagOption = tag_res.data;
          for(let t = 0; t < this.tagData.length; t++){
            map_i[this.tagData[t].id] = this.tagData[t].name;
          }
          this.tag_map = map_i;
        }

        let cat_res = await this.$post("/api/admin/CpsManage/listCategories", {});
        if(cat_res.status == 1){
          let map_ii = {};
          if(cat_res.data){
            this.categoryData = cat_res.data;
            this.categoryOptions = cat_res.data;
            for(let c = 0; c < this.categoryData.length; c++){
              map_ii[this.categoryData[c].id] = this.categoryData[c].name;
            }
            this.cat_map = map_ii;
          }
        }
      },
      //同步
      async syncDictionary(){
        let res = await this.$post("/api/admin/CpsManage/syncDictionary", {});
        if(res.status == 1){
          this.$message({
            type: "success",
            message: "同步成功!"
          });
        }
      },
      //标签搜索
      async searchTag(){
        this.tagData = this.tagOption.filter(this.searchTagRes);
      },
      searchTagRes(item){
        let q = this.tagName.toLowerCase();
        let cat_id = this.category;
        let res_i = true, res_ii = true;
        if(q){
          let name = item.name.toLowerCase();
          res_i = (name.search(q) > -1);
        }
        if(cat_id){
          res_ii = (item.catIds && item.catIds.indexOf(cat_id) > -1);
        }
        return (res_i && res_ii);
      },
      handleClick(tab, event) {
      },
      //领域搜索
      async searchCat(){
        this.categoryData = this.categoryOptions.filter(this.search);
      },
      search(item){
        let q = this.categoryName.toLowerCase();
        let res_i = true, res_ii = true, res_iii = true;
        if(q){
          let name = item.name.toLowerCase();
          res_i = (name.search(q) > -1);
        }
        if(this.categoryChecked1){
          res_ii = (item.isTechnical === true);
        }
        if(this.categoryChecked2){
          res_iii = (item.isIndustrial === true);
        }
        return (res_i && res_ii && res_iii);
      },
      editTag(rowInfo){
        this.editTagDialogVisible = true;
        this.temp_data = rowInfo;
        let info_str = JSON.stringify(rowInfo);
        this.tagForm = JSON.parse(info_str);
      },
      editTagSub(){
        let data = {
          id: this.tagForm.id,
          weight: this.tagForm.weight,
          aliases: this.tagForm.aliases,
          subtags: this.tagForm.subtags,
        };
        let res = this.$post("/api/admin/CpsManage/UpdateTag", data).then(res => {
          if (res.status === 1) {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.temp_data.weight = data.weight;
            this.temp_data.aliases = data.aliases;
            this.temp_data.subtags = data.subtags;
          }else{
            this.$message({
              type: "error",
              message: "修改失败!"
            });
          }
          this.tagForm = {};
          this.editTagDialogVisible = false;
        });
      },
      addTag(){
        this.tagDialogVisible= true;
        this.tagForm.weight=30;
      },
      addTagSub(){
        let data = {
          name: this.tagForm.name,
          weight: this.tagForm.weight,
          aliases: this.tagForm.aliases,
          subtags: this.tagForm.subtags,
        };
        let res = this.$post("/api/admin/CpsManage/CreateTag", data).then(res => {
          if (res.status === 1) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.tagForm = {};
            this.tagDialogVisible = false;
            this.tagOption.unshift(res.data);
            this.tagData = this.tagOption;
          }else{
            this.$message({
              type: "error",
              message: "新增失败!"
            });
            this.tagForm = {};
            this.tagDialogVisible = false;
          }
        });
      },
      delTag(id){
        this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          };
          let res = this.$post("/api/admin/CpsManage/DeleteTag", data).then(res => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              for(let i = 0; i < this.tagData.length; i++) {
                if (this.tagOption[i]['id'] == id) {
                  this.tagOption.splice(i, 1);
                  continue;
                }
              }
              this.tagData = this.tagOption;
            }else{
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        }).catch(() => {

        });
      },
      addCategoryInit(){
        this.categoryDialogVisible = true;
        this.catForm.weight = 50;
      },
      addCategory(){
        let data = {
          name: this.catForm.name,
          weight: this.catForm.weight,
          tags: this.catForm.tags,
          isTechnical: this.catForm.isTechnical,
          isIndustrial: this.catForm.isIndustrial
        };

        let res = this.$post("/api/admin/CpsManage/CreateCategory", data).then(res => {
          if (res.status === 1) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.catForm = {};
            this.categoryDialogVisible = false;
            this.categoryOptions.unshift(res.data);
          }else{
            this.$message({
              type: "error",
              message: "新增失败!"
            });
            this.catForm = {};
            this.categoryDialogVisible = false;
          }
        });
      },
      editCat(rowInfo){
        this.editCategoryDialogVisible = true;
        this.temp_data = rowInfo;
        let info_str = JSON.stringify(rowInfo);
        this.catForm = JSON.parse(info_str);
      },
      editCategory(){

        let data = {
          id: this.catForm.id,
          name: this.catForm.name,
          weight: this.catForm.weight,
          tags: this.catForm.tags,
          isTechnical: this.catForm.isTechnical,
          isIndustrial: this.catForm.isIndustrial
        };
        let res = this.$post("/api/admin/CpsManage/UpdateCategory", data).then(res => {
          if (res.status === 1) {
            this.$message({
              type: "success",
              message: "编辑成功!"
            });
            this.temp_data.name = data.name;
            this.temp_data.weight = data.weight;
            this.temp_data.tags = data.tags;
            this.temp_data.isTechnical =  data.isTechnical;
            this.temp_data.isIndustrial = data.isIndustrial;
            this.catForm = {};
            this.editCategoryDialogVisible = false;
          }else{
            this.$message({
              type: "error",
              message: "编辑失败!"
            });
            this.catForm = {};
            this.editCategoryDialogVisible = false;
          }
        });
      }
      ,delCat(id){
        this.$confirm('此操作将永久删除该领域, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          };
          let res = this.$post("/api/admin/CpsManage/DeleteCategory", data).then(res => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              for(let i = 0; i < this.categoryData.length; i++){
                if(this.categoryData[i]['id'] == id){
                  this.categoryData.splice(i, 1);
                  continue;
                }
              }
            }else{
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        }).catch(() => {

        });
      }
    }
  };
  </script>