修改 customDrawer

wujingjing

2024-07-22 bc4ab46fb5c4cb4435efabfe4b316be4ace5b026

 src/components/drawer/CustomDrawer.vue

@@ -30,13 +30,13 @@
                  <el-input v-model="queryParams.sample_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                  </el-input>
               </div>
               <div class="mt20 w100 relative" v-show="customTagList.length > 0">
               <div class="mt20 w100 relative" v-show="state.customTagList.length > 0">
                  <div
                     class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
                     :class="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div
                        v-for="item in customTagList"
                        v-for="item in state.customTagList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeLabelName === item.section_id }"
                        @click="handleLabelClick(item)"
@@ -77,13 +77,13 @@
                  <el-input v-model="instructParams.template_title" placeholder="搜索更多" class="set-input" :prefix-icon="Search" clearable>
                  </el-input>
               </div>
               <div class="mt20 w100 relative" v-show="customOfficeList.length > 0">
               <div class="mt20 w100 relative" v-show="state.customOfficeList.length > 0">
                  <div
                     class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
                     :class="{ 'set-expand-active': state.isShowExpand }"
                  >
                     <div
                        v-for="item in customOfficeList"
                        v-for="item in state.customOfficeList"
                        :key="item.section_id"
                        :class="{ 'set-label-active': state.activeInstructName === item.section_id }"
                        @click="handleInstructClick(item)"
@@ -132,8 +132,9 @@
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat';
import { useSearch } from '/@/hooks/useSearch';
import { activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
import { activeRoomId, activeSampleId, sectionAList, setRoomConfig } from '/@/stores/chatRoom';
import { debounce } from '/@/utils/util';
import emitter from '/@/utils/mitt';
let state = reactive({
   tabNameList: [
      { ID: 1, Name: '提问示例' },
@@ -154,6 +155,8 @@
   listInstructLoading: false,
   listSampleExpand: false,
   listInstructExpand: false,
   customTagList: [],
   customOfficeList: [],
});
const instructContentList = ref([]); //指令列表
const exampleList = ref([]); //示例列表
@@ -161,20 +164,9 @@
const isShow = defineModel('isShow', {
   type: Boolean,
});
const props = defineProps({
   customTagList: {
      type: Array,
      default: () => [],
   },
   customOfficeList: {
      type: Array,
      default: () => [],
   },
});
let { customTagList, customOfficeList } = toRefs(props);

const emit = defineEmits(['updateChatInput']);
const rightBox = computed(() => (isShow.value ? 354 : 0));
onMounted(() => {});

//获取模版列表
const getSelectListSample = async () => {
@@ -306,6 +298,40 @@
   }
);
//#endregion

//#region ====================== 获取tag ======================

const tagListClick = (val) => {
   if (val.length > 0) {
      const selectTagList = [];
      const officeList = [];
      val.forEach((item) => {
         if (item.section_id != 'office_assistant') {
            selectTagList.push(item);
         } else {
            officeList.push(item);
         }
      });
      state.customTagList = selectTagList;
      state.customOfficeList = officeList;
   } else {
      state.customTagList = [];
      state.customOfficeList = [];
   }
};

watch(
   () => sectionAList.value,
   (val) => {
      tagListClick(val);
   },
   {
      immediate: true,
   }
);

//#endregion

defineExpose({ getTableData });
</script>
<style scoped lang="scss">