eta_front/src/views/semantics_manage/summery/components/promptClassifySection.vue

<template>
  <div class="prompt-classify-wrapper">
    <!-- 公共提示词 -->
    <div class="public-classify" v-if="publicPromptList.length">
      <h3 
        @click="isExpandPublic = !isExpandPublic" 
        class="classify-type"
      > 
        <!-- 公共提示词 -->{{$t('SemanticsManage.AiSummeryPage.public_prompt')}}
        <span><i :class="{'el-icon-arrow-down':!isExpandPublic,'el-icon-arrow-up':isExpandPublic}"></i></span>
      </h3>
    
      <div class="tree-wrap" v-show="isExpandPublic">
            <el-tree
                ref="catalogTree"
                class="target_tree"
                empty-text="暂无提示词"
                :props="defaultProp"
                :data="publicPromptList"
                node-key="nodeKeyId"
                :expand-on-click-node="false"
                @current-change="(data,node)=>{nodeChange(data,node)}"
                >
                <div class="custom-tree-node" slot-scope="{ data }">
                    <span class="tree-label">{{ data.label }}</span>
                </div>
            </el-tree>
        </div>
    </div>

    <!-- 我的提示词 -->
    <div class="classify">
          <h3 class="classify-type"><!-- 我的提示词 -->{{$t('SemanticsManage.AiSummeryPage.my_prompt')}}</h3>
          <template v-if="myPromptList.length">
            <draggable
              v-model="myPromptList"
              class="classify-ul"
              animation="300"
              tag="ul"
              @start="dragStart"
              @update="dragenter"
              @end="dragOver"
            >
              <li
                :class="[
                  'classify-item',
                  { 'act': item.AiPromptId=== selectId },
                ]"
                v-for="item in myPromptList"
                :key="item.AiPromptId"
                @click="chooseClassify(item)"
              >
                <div>
                  <img
                    src="~@/assets/img/data_m/move_ico.png"
                    alt=""
                    class="move"
                    style="width: 14px; height: 14px;margin-right: 5px;"
                  />
                  {{ item.Title }}
                </div>
                <div class="right-item-box">
                  <el-dropdown
                    style="margin-right: 10px" 
                    @command="handleCommand" 
                    trigger="click"
                  >
                    <span class="el-dropdown-link  el-dropdown-link-img">

                      <img src="~@/assets/img/chart_m/Group.png" v-if="item.IsShare === 0">
                      <img src="~@/assets/img/chart_m/User.png" v-else>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item 
                      :command="{key:'own',IsPublic:undefined,item}" 
                      :class="item.IsShare === 0 ? 'el-dropdown-menu-item-chat-act' : ''"
                      class="el-dropdown-menu-item-chat"
                      >
                      <img v-if="item.IsShare === 0" src="~@/assets/img/chart_m/Group_act.png">
                      <img v-else src="~@/assets/img/chart_m/Group.png">
                      <!-- 仅自己可见 -->{{$t('MyEtaPage.option_view_person')}}</el-dropdown-item>
                      <el-dropdown-item 
                      :command="{key:'public',IsPublic:undefined,item}" 
                      :class="item.IsShare === 1 ? 'el-dropdown-menu-item-chat-act' : ''"
                      class="el-dropdown-menu-item-chat"
                      >
                      <img v-if="item.IsShare === 1" src="~@/assets/img/chart_m/User_act.png">
                      <img v-else src="~@/assets/img/chart_m/User.png">
                      <!-- 所有人可见 -->{{$t('MyEtaPage.option_view_all')}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                  <el-dropdown @command="handleCommand" trigger="click">
                    <span class="el-dropdown-link"> 
                      <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
                          :command="{key:'del',IsPublic:undefined,item}"><!-- 删除 -->{{$t('Table.delete_btn')}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </li>
            </draggable>
          </template>

          <tableNoData text="暂无提示词" v-else size="mini"/>
        </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import { aiSummeryInterface } from '@/api/modules/semanticsApi';
export default {
  components: {  draggable },
  props: {
    publicList: {
      type: Array
    },
    myList: {
      type: Array
    }
  },
  data() {
    return {
      selectId: 0,
      defaultProp: {
        label: 'label',
        value: 'value',
        children: 'children'
      },
      publicPromptList: [],
      isExpandPublic: false,

      myPromptList: [],
      startIndex: 0,
      nextIndex: 0,
      preIndex: 0
    }
  },
  watch: {
    myList(nval) {
      this.myPromptList = nval
    },
    publicList(nval) {
      this.publicPromptList = nval
    }
  },
  methods:{
    handleCommand({key,IsPublic,item}) {

      key==='del' && this.delPrompt(item);

      ['own', 'public'].includes(key) && aiSummeryInterface.setPromptPublic({
        AiPromptId: this.selectId
      }).then(res => {
        if(res.Ret !== 200) return;
        this.$message.success(/* '设置成功' */this.$t('MsgPrompt.set_success_msg'));
        if(key === 'own'){
          item.IsShare=0
        }else{
          item.IsShare=1
        }
        this.$emit('getData')
      })
      
    },

    delPrompt(item) {
      this.$confirm('确认删除该提示词吗？', this.$t('Confirm.prompt'), {
				type: 'warning',
			}).then(async() => {
				
        const res = await aiSummeryInterface.promptDel({
          AiPromptId: item.AiPromptId
        })
        
        if(res.Ret !== 200) return 
        this.$message.success(res.Msg)
        this.myPromptList.splice(this.myPromptList.findIndex(_ =>_.AiPromptId===item.AiPromptId),1)

        this.selectId = 0;
        this.$emit('close')
			});
    },

    nodeChange(data,node) {
      if(data.AiPromptId) { //提示词
        this.selectId = 0;

        this.$emit('change',data)
      }
    },


    /* 切换分类 */
    chooseClassify(item) {
      const {AiPromptId } = item

      this.$refs.catalogTree&&this.$refs.catalogTree.setCurrentKey(null)
      this.selectId = AiPromptId;

      this.$emit('change',item)
    },

    /* 拖动开始 记录位置 */
    dragStart({ oldIndex }) {
      this.startIndex = this.myPromptList[oldIndex].AiPromptId;
    },

    /* 拖动结束 替换  */
    dragOver() {
      aiSummeryInterface.promptMove({
          AiPromptId:  this.startIndex,
          NextAiPromptId: this.nextIndex || 0,
          PrevAiPromptId:  this.preIndex || 0,
      }).then(res => {
        if(res.Ret !== 200) return;
        this.$message.success(res.Msg)
      })

    },

    /* 拖动时 获取移动后的上一个位置id 若移到第一位则取0 获取后一个id 若是最后一个取0*/
    dragenter({ newIndex }) {
      this.preIndex = newIndex > 0 ? this.myPromptList[newIndex - 1].AiPromptId: 0;
      this.nextIndex = newIndex ===  this.myPromptList.length - 1 ? 0 : this.myPromptList[newIndex + 1].AiPromptId

    },
  },
}
</script>
<style scoped lang='scss'>
.prompt-classify-wrapper {
  padding: 15px 0 30px;
  overflow: auto;
  position: relative;
  height: calc(100vh - 300px);

  .classify-item {
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.act {
      background: #e0eefd;
      color: #409eff;
    }
  }
  .classify-type {
    margin-bottom: 8px;
    padding-left: 15px;
  }
  .public-classify {
    margin-bottom: 20px;
    .tree-wrap{
        padding:15px;
    }
    .custom-tree-node {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      display: block;
      flex: 1;
    }
  }
  .right-item-box {
    display: flex;
    align-items: center;
  }
}
</style>