eta_front/src/views/semantics_manage/semanticsPage.vue

<template>
  <!-- 文档管理 -->
  <div class="document-file-page-wrap">
    <!-- 目录栏 -->
    <div class="catalog-wrap page-block-wrap catalog-block" id="left">
      <div class="btn-box">
        <el-button v-permission="permissionBtn.semanticPermission.saPage_save"
            type="primary" @click="toPage('addFile')">添加文档对比</el-button>
        <!-- <el-button type="primary" plain @click="toPage('tag')">标签管理</el-button> -->
      </div>
      <div class="select-wrap">
        <el-select
          filterable remote
          placeholder="请输入文件名称"
          v-model="searchTitle"
          :remote-method="searchHandle"
          clearable
          value-key="SaCompareId"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-option
            v-for="item in searchOptions"
            :key="item.SaCompareId"
            :label="item.Title"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="catalog-list-wrap">
        <div class="catalog-list">
          <el-tree
              ref="catalogTree"
              class="catalog-tree other-tree"
              empty-text="暂无分类"
              :data="listData"
              node-key="nodeKeyId"
              :expand-on-click-node="true"
              :default-expanded-keys="expandKeys"
              draggable
              :allow-drag="checkAllowDrag"
              :allow-drop="checkAllowDrop"
              @node-drop="handleDropOver"
              @node-expand="handleNodeExpand"
              @node-collapse="handleNodeCollapse"
              @current-change="(data,node)=>{nodeChange(data,node)}"
            >
              <span class="custom-tree-node" slot-scope="{ data,node }"
              >
                <span class="tree-label">{{ data.label }}</span>
                <span style="display: flex; align-items: center"
                  v-if="data.nodeKeyId===selectNodeKey"
                >
                  <img
                    :src="require('@/assets/img/set_m/edit.png')"
                    alt="" v-if="node.level!==2&&isShowTreeBtn(node.level,'edit')"
                    style="width: 14px; height: 14px; margin-right: 5px"
                    @click.stop="clickNodeHandle('edit', data)"
                  />
                  <img
                    :src="require('@/assets/img/set_m/del.png')"
                    alt="" v-if="isShowTreeBtn(node.level,'delete')"
                    style="width: 14px; height: 14px; margin-right: 5px"
                    @click.stop="clickNodeHandle('del', data)"
                  />
                </span>
              </span>
          </el-tree>
        </div>
      </div>
      <div class="catalog-tool">
        <div class="add-catalog" @click="isModifyClassifyShow=true" v-if="isShowTreeBtn(1,'edit')">
          <img
            src="~@/assets/img/set_m/add_ico.png"
            alt=""
            style="width: 16px; height: 16px; margin-right: 6px"
          />
          <span>添加分类</span>
        </div>
        <span class="total-text" v-if="selectNode&&model==='list'">共{{catalogList.length}}个文档</span>
      </div>
      <span class="move-btn resize" v-drag id="resize"></span>
    </div>
    <div class="detail-wrap page-block-wrap catalog-block" id="right">
      <!-- 列表栏 -->
      <div class="detail-list overflow-hide-scrollbar" v-if="model==='list'">
          <!-- 选择一级分类不再展示列表 -->
        <!-- <draggable
            class="drag-cont"
            v-model="catalogList"
            animation="300"
            @start="dragStartHandler"
            @update="dragenter"
            @end="moveListItem"
            :disabled="true"
            >
            <div class="list-item" 
              v-for="item in catalogList" :key="item.nodeKeyId"
              @click="changeModel('file',item)"
              >
              <div class="item-title">
                <span>{{item.label}}</span>
                <img
                  src="~@/assets/img/data_m/move_ico.png"
                  style="width: 14px; height: 14px; margin-right: 8px"
                />
              </div>
              <div style="height:1px;background:#ECECEC;margin:0 -10px;"></div>
              <div class="item-image" :style="`background-image:url(${item.ResultImg?item.ResultImg:require('@/assets/img/document_m/default-img.png')})`"></div>
              <div style="height:1px;background:#ECECEC;margin:0 -10px;"></div>
              <div class="item-info">
                <span style="font-size:14px;">创建时间：{{item.CreateTime}}</span>
                <span>{{item.SysAdminName}}</span>
              </div>
            </div>
          </draggable> -->
          <div class="empty" v-if="catalogList.length===0">
            <tableNoData text="暂无数据"/>
          </div>
      </div>
      <!-- 文件详情 -->
      <div class="detail-file" v-else>
        <div class="file-info">
          <ul>
            <li>{{semanticInfo.Title}}</li>
            <li style="margin-left:auto;">作者：{{semanticInfo.SysAdminName}}</li>
            <li>创建时间：{{semanticInfo.CreateTime}}</li>
          </ul>
          <div class="pic-wrap">
            <img class="pic" id="copy-img" :src="semanticInfo.ResultImg" v-if="semanticInfo.ResultImg">
            <div class="empty" v-if="!semanticInfo.ResultImg">
              <img src="~@/assets/img/document_m/default-img.png" style="
                display: block;
                width: 120px;
                height: 120px;
                margin: 5% auto 10px;
              "/>
              暂无图片信息
            </div>
          </div>
        </div>
        <div class="opt-box">
          <div style="margin-bottom:28px">操作</div>
          <div 
            class="opt-item" 
            v-permission="permissionBtn.semanticPermission.saPage_save" 
            @click="handleEdit('file',selectNode)"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <g opacity="0.9">
                <path d="M14.1321 4.95049L10.8888 1.70711L11.5959 1L14.8393 4.24338L14.1321 4.95049Z" fill="#409EFF"/>
                <path d="M5.97196 13.1108L2.359 13.8334C2.14909 13.8754 1.96401 13.6903 2.00599 13.4804L2.72858 9.86742L10.0262 2.56982L13.2696 5.8132L5.97196 13.1108ZM11.8554 5.8132L10.0262 3.98403L3.64979 10.3604L3.19249 12.6469L5.47895 12.1896L11.8554 5.8132Z" fill="#409EFF"/>
                <path d="M15 11H11V12H15V11Z" fill="#409EFF"/>
                <path d="M15 13H8.5V14H15V13Z" fill="#409EFF"/>
              </g>
            </svg>
            <span>编辑</span>
          </div>
          <div class="opt-item" 
            v-permission="permissionBtn.semanticPermission.saPage_download" 
            @click="handleDownLoadImg">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M12.2636 5.81387L8.5 9.57746L8.49998 0.5L7.49998 0.500002L7.5 9.57746L3.73641 5.81387L3.02931 6.52098L7.64645 11.1381C7.84171 11.3334 8.15829 11.3334 8.35355 11.1381L12.9707 6.52098L12.2636 5.81387Z" fill="#409EFF"/>
              <path d="M2 11V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V11H13V13H3V11H2Z" fill="#409EFF"/>
            </svg>
            <span>下载</span>
          </div>
          <div class="opt-item" 
            v-permission="permissionBtn.semanticPermission.saPage_copyOffice" 
            @click="handleCopyImg">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3.99995 1.92191C3.99995 1.33727 4.52001 1 4.9953 1H9.36584C9.63437 1 9.89162 1.108 10.0797 1.29969L13.7139 5.00415C13.8972 5.19093 13.9999 5.44209 14.0001 5.70375L14.0046 12.0777C14.0046 12.6624 13.4846 13 13.0093 13H4.99995C4.52472 13 4.00474 12.6628 4.00461 12.0783L3.99995 1.92191ZM4.99999 2L5.00457 12H13.0046L13.0003 6.01275H9.00004V2H4.99999ZM10 2.64645V5.01275H12.3215L10 2.64645Z" fill="#409EFF"/>
              <path d="M2 5.00001V14.0128C2 14.565 2.44772 15.0128 3 15.0128H11V14.0128L3 14.0128V5.00001H2Z" fill="#409EFF"/>
            </svg>
            <span>复制到Office</span>
          </div>
          <div class="opt-item" 
            v-permission="permissionBtn.semanticPermission.saPage_copyWeixin"
            @click="handleCopyImg">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <mask id="mask0_803_18530" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                <rect width="16" height="16" fill="#D9D9D9"/>
              </mask>
              <g mask="url(#mask0_803_18530)">
                <path d="M15 9.6018C15 8.57143 14.5605 7.6063 13.7597 6.88639C13.0456 6.24297 12.1201 5.86727 11.1292 5.80877C10.9116 4.74691 10.2946 3.78178 9.38605 3.08661C8.47117 2.3847 7.30697 2 6.10896 2C4.75883 2 3.48687 2.47694 2.52551 3.34083C1.54301 4.22722 1 5.41057 1 6.67492C1 7.32733 1.14368 7.95951 1.42892 8.55343C1.67612 9.07087 2.02052 9.53881 2.45155 9.94151L2.10081 12.018C2.07123 12.198 2.13251 12.3825 2.26351 12.4994C2.35014 12.5782 2.46212 12.6187 2.57199 12.6187C2.62692 12.6187 2.68186 12.6097 2.73468 12.5872L5.93993 11.3476C6.3287 11.3386 6.70057 11.3093 7.05131 11.2576C7.22246 11.6445 7.45699 11.9865 7.7549 12.2745C8.4923 12.9899 9.58044 13.3678 10.9918 13.3993C11.0003 13.3993 11.0066 13.3993 11.013 13.4016L13.3583 13.9865C13.3942 13.9955 13.4301 14 13.466 14C13.5801 14 13.6921 13.9573 13.7809 13.874C13.8971 13.766 13.9562 13.6063 13.9436 13.4443L13.8379 12.2407C14.5795 11.5388 15 10.5872 15 9.6018ZM5.85119 10.3622L5.77301 10.3645L3.15726 11.3768L3.39813 9.95726C3.44039 9.70754 3.35164 9.45332 3.16994 9.29359C2.37338 8.59618 1.9339 7.66704 1.9339 6.67942C1.9339 4.64792 3.80803 2.99213 6.11319 2.99213C8.08029 2.99213 9.75581 4.18448 10.1868 5.85602C9.35436 5.982 8.58527 6.33746 7.97042 6.89089C7.17175 7.6108 6.73015 8.57593 6.73015 9.6063C6.73015 9.84702 6.74706 10.081 6.78086 10.3037C6.48506 10.3352 6.17446 10.3577 5.85119 10.3622ZM13.0899 11.622C12.9505 11.739 12.8787 11.9213 12.8956 12.108L12.9632 12.8751L11.2306 12.4454C11.1609 12.4229 11.089 12.4139 11.0172 12.4139C8.82191 12.3667 7.65982 11.3926 7.65982 9.6018C7.65982 8.05174 9.0987 6.78965 10.8672 6.78965C12.6357 6.78965 14.0703 8.05174 14.0703 9.6018C14.0703 10.369 13.7217 11.0866 13.0899 11.622ZM3.74887 5.88976C3.74887 6.06876 3.81565 6.24043 3.93452 6.367C4.0534 6.49357 4.21462 6.56468 4.38273 6.56468C4.55085 6.56468 4.71207 6.49357 4.83095 6.367C4.94982 6.24043 5.0166 6.06876 5.0166 5.88976C5.0166 5.71077 4.94982 5.5391 4.83095 5.41253C4.71207 5.28596 4.55085 5.21485 4.38273 5.21485C4.21462 5.21485 4.0534 5.28596 3.93452 5.41253C3.81565 5.5391 3.74887 5.71077 3.74887 5.88976ZM7.10836 5.95726C7.10836 6.13625 7.17514 6.30792 7.29402 6.43449C7.41289 6.56106 7.57411 6.63217 7.74223 6.63217C7.91034 6.63217 8.07157 6.56106 8.19044 6.43449C8.30931 6.30792 8.37609 6.13625 8.37609 5.95726C8.37609 5.77826 8.30931 5.60659 8.19044 5.48002C8.07157 5.35345 7.91034 5.28234 7.74223 5.28234C7.57411 5.28234 7.41289 5.35345 7.29402 5.48002C7.17514 5.60659 7.10836 5.77826 7.10836 5.95726ZM8.92544 9.12936C8.92544 9.27853 8.9811 9.42158 9.08016 9.52706C9.17922 9.63253 9.31357 9.69179 9.45367 9.69179C9.59376 9.69179 9.72812 9.63253 9.82718 9.52706C9.92624 9.42158 9.98189 9.27853 9.98189 9.12936C9.98189 8.98019 9.92624 8.83714 9.82718 8.73166C9.72812 8.62619 9.59376 8.56693 9.45367 8.56693C9.31357 8.56693 9.17922 8.62619 9.08016 8.73166C8.9811 8.83714 8.92544 8.98019 8.92544 9.12936ZM11.2919 9.12936C11.2919 9.27853 11.3475 9.42158 11.4466 9.52706C11.5457 9.63253 11.68 9.69179 11.8201 9.69179C11.9602 9.69179 12.0946 9.63253 12.1936 9.52706C12.2927 9.42158 12.3483 9.27853 12.3483 9.12936C12.3483 8.98019 12.2927 8.83714 12.1936 8.73166C12.0946 8.62619 11.9602 8.56693 11.8201 8.56693C11.68 8.56693 11.5457 8.62619 11.4466 8.73166C11.3475 8.83714 11.2919 8.98019 11.2919 9.12936Z" fill="#409EFF"/>
              </g>
            </svg>
            <span>复制到微信</span>
          </div>
          <!-- <li>
              <span @click="handleDownLoadImg" style="cursor: pointer;color:#409eff;margin-right:10px">下载</span>
              <span @click="handleCopyImg" style="cursor: pointer;color:#409eff;margin-right:10px">复制到微信</span>
              <span @click="handleCopyImg" style="cursor: pointer;color:#409eff">复制到Office</span>
            </li>
            <li style="min-width: auto;"><el-button v-permission="permissionBtn.semanticPermission.saPage_save"
                type="primary" @click="handleEdit('file',selectNode)">编辑</el-button></li> -->
        </div>
      </div>
    </div>
    <!-- 添加/编辑分类弹窗 -->
     <el-dialog
      :title="classifyForm.classify_id?'编辑分类':'添加分类'"
      :visible.sync="isModifyClassifyShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isModifyClassifyShow=false"
      width="589px"
      v-dialogDrag
      center
    >
      <div class="dialog-container">
        <el-form
          ref="formRef"
          label-position="left"
          hide-required-asterisk
          label-width="80px"
          :model="classifyForm"
          :rules="classifyFormRules"
        >
          <el-form-item label="分类名称" prop="classify_name">
            <el-input
              v-model="classifyForm.classify_name"
              style="width: 80%"
              placeholder="请输入分类名称"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="foot-container">
        <el-button @click="isModifyClassifyShow=false">取 消</el-button>
        <el-button type="primary" @click="modifyClassify">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* js */
import catalogMixin from "./mixins/catalogMixin";
import { formatArr } from './utils/index';
/* components */
//import draggable from 'vuedraggable';
/* api */
import {semanticInterface} from '@/api/modules/semanticsApi.js';
export default {
  mixins:[catalogMixin],
  components:{/*draggable*/},
  data() {
    return {
      classifyForm:{},//分类信息
      classifyFormRules:{
        classify_name:[{ required: true, message: "分类名称不能为空"}],
      },//分类校验规则
      isModifyClassifyShow:false,//控制分类显示弹窗
      semanticInfo:{},//语义分析详情
    };
  },
  watch:{
    searchTitle(newVal){
      const {SaCompareId,ClassifyId} = newVal
      if(SaCompareId&&ClassifyId){
        this.handleNodeExpand({nodeKeyId:ClassifyId+''})
        this.nodeChange({SaCompareId,nodeKeyId:`children_${SaCompareId}`},{level:2})
        this.searchOptions = []
      }
    }
  },
  methods: {
    // 下载图片
    handleDownLoadImg(){
      let img=new Image()
      img.setAttribute('crossOrigin', 'anonymous');
      img.src=this.semanticInfo.ResultImg
      img.onload=()=>{
          let canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          let context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          let dataURL = canvas.toDataURL("image/png", 1);
          const a=document.createElement('a')
          a.setAttribute("download",this.semanticInfo.Title)
          a.style.display = "none"
          a.href=dataURL
          document.body.appendChild(a);
          a.click()
      }
    },
    //复制图片
    handleCopyImg(){
      let img=new Image()
      img.setAttribute('crossOrigin', 'anonymous');
      img.src=this.semanticInfo.ResultImg
      img.onload=()=>{
          let canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          let context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          
          if(window.ClipboardItem) {
            canvas.toBlob(async (blob) => {
              const data = [new ClipboardItem({ [blob.type]: blob })]; 
              await navigator.clipboard.write(data).then(
                () => {
                this.$message.success('复制成功！')
                },
                () => {
                  this.$message.warning('复制失败,稍后再试')
                }
              );
            });
          }else {
            this.$message.warning('浏览器暂不支持')
          }

      }
    },


    //搜索语义分析
    searchHandle(keyword){
      semanticInterface.getSemanticList({
        PageSize:1000,
        CurrentIndex:1,
        Keyword:keyword
      }).then(res=>{
        if(res.Ret!==200) return 
        this.searchOptions = res.Data.List||[]
      })
    },
    //获取分类列表
    async getListData(){
      await semanticInterface.getClassifyList().then(res=>{
        if(res.Ret!==200) return 
        this.listData = formatArr(res.Data||[],'SaCompareClassifyId','SaCompareId')
      })
    },
    //获取语义分析详情
    getDetail(data){
      //不用请求接口，展示信息和图片即可
      //console.log('selectNode',this.selectNode)
      this.semanticInfo = _.cloneDeep(this.selectNode)
    },
    //新增/编辑分类
    async modifyClassify(){
      let res = null
      let flag = false
      const {classify_id,classify_name} = this.classifyForm
      this.$refs.formRef.validate((valid) => {
        flag = valid
      })
      if(!flag) return
      if(classify_id){
        res = await semanticInterface.editClassify({
          SaCompareClassifyId:Number(classify_id),
          ClassifyName:classify_name,
        })
      }else{
        res = await semanticInterface.addNewClassify({
          ClassifyName:classify_name,
        })
      }
      if(res.Ret!==200) return
      this.$message.success(`${classify_id?'编辑':'新增'}成功`)
      await this.getListData()
      if(classify_id){
        const catalog = this.listData.find(item=>{return item.nodeKeyId===classify_id})
        catalog&&this.nodeChange(catalog,{level:1})
      }
      this.clearForm()
    },
    //删除分类
    async deleteClassify(data){
      await semanticInterface.deleteClassify({
        SaCompareClassifyId:Number(data.SaCompareClassifyId)
      }).then(res=>{
        if(res.Ret!==200) return 
        this.$message.success('删除成功')
        this.clearForm()
      })
    },
    //删除语义分析
    async deleteDocument(data){
      await semanticInterface.deleteSemantic({
        SaCompareId:Number(data.SaCompareId)
      }).then(async res=>{
        if(res.Ret!==200) return
        this.$message.success('删除成功')
        this.chooseDataClassify(data)
      })
    },
    //切换页面
    toPage(pageName,params){
      const routerPathMap = {
        'addFile':'/addSemantics',
        'editFile':'/editSemantics',
        'tag':'/tagPage'
      }

      /* this.$router.push({
        path:routerPathMap[pageName],
        query:params||{}
      }) */
      //新增一页打开
      let {href} = this.$router.resolve({
        path:routerPathMap[pageName],
        query:params||{}
      })
      window.open(href,'_blank')
    },
    //移动语义分析
    moveCompare(moveParams){
        semanticInterface.moveCompare(moveParams).then(async res=>{
            if(res.Ret!==200) return 
            await this.getListData()
            this.handleNodeExpand({
                nodeKeyId: moveParams.SaCompareClassifyId
            })
            this.nodeChange({
                SaCompareId:moveParams.SaCompareId,
                nodeKeyId:`children_${moveParams.SaCompareId}`},
                {
                    level:2
                })
        })
    },
    //根据层级判断是否展示编辑/删除按钮
    isShowTreeBtn(level,btnType){
        return level===1
            ?this.permissionBtn.isShowBtn('semanticPermission',`saPage_classifyOpt_${btnType}`)
            :this.permissionBtn.isShowBtn('semanticPermission',`saPage_${btnType==='edit'?'save':btnType}`)
    }
  },
};
</script>

<style lang="scss">
@import "./css/catalogTree.scss";
</style>

<style scoped lang="scss">
@import "./css/basePage.scss";
@import "./css/catalogPage.scss";
.document-file-page-wrap{
  display: flex;
  width: 100%;
  .detail-file{
    display: flex;
    flex-direction: row;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: hidden;
    .file-info{
      padding:20px 30px;
      flex:1;
      display: flex;
      flex-direction: column;
      height: 100%;
      ul{
        flex: none;
        margin-right: 0;
        justify-content: space-between;
        align-items: center;
        li{
          &:last-child{
            margin-right: 0;
            text-align: right;
          }
        }
      }
      .pic-wrap{
        flex: 1;
        margin-top:20px;
        width:100%;
        color: #999999;
        position: relative;
        overflow: hidden;
        .pic{
          width:100%;
          height: 100%;
        }
      }
    }
    .opt-box{
      padding: 20px 30px;
      height: 100%;
      flex-shrink: 0;
      width: 200px;
      border-left: 1px solid #DCDFE6;
      background-color: #fff;
      .opt-item{
        display: flex;
        align-items: center;
        color: #409EFF;
        margin-bottom: 20px;
        cursor: pointer;
        svg{
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
    }
  }
  .dialog-container{
    padding: 0 35px;
  }  
}
</style>