ai-meeting/src/modules/meeting-detail/TopTools.vue

<template>
  <div class="top-tools">
    <div class="left-tools">
      <img src="../../assets/image/home/home.png" class="img-home" @click="backHome" />
      <div class="title" v-if="!show_edit" @click="toEdit">{{ current_name }}</div>
      <div class="title" v-else>
        <a-input ref="inputRef" v-model="current_name" @blur="saveName"></a-input>
      </div>
      <div class="sub-title" v-if="updated_at">最近保存{{ updated_at }}</div>
    </div>
    <div class="right-tools">
      <SearchAndUpload></SearchAndUpload>
    </div>
    <ModalCloseRecord
      :visible.async="show_close_record"
      @ok="handlerOk"
      @cancel="show_close_record = false"
    ></ModalCloseRecord>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import SearchAndUpload from './top-tools/SearchAndUpload.vue';
import ModalCloseRecord from './top-tools/ModalCloseRecord.vue';
import { bus_change_page, bus_stop_record } from '../../base/event-bus.js';
import { updateMeetingDetail } from '../../apis/home.js';
import { useMeetingStore } from '../../base/store/use-meeting.js';

const useMeeting = useMeetingStore();

const current_name = ref(useMeeting.current_meeting_data.name);

const show_edit = ref(false);
const inputRef = ref(null);
const updated_at = ref(useMeeting.current_meeting_data.updated_at);
const show_close_record = ref(false);

const toEdit = () => {
  show_edit.value = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};

const backHome = () => {
  if (useMeeting.meet_type == 'startMeet') {
    console.log('startMeet');
    show_close_record.value = true;
  } else {
    handlerOk();
  }

  // TODO:加提示
};
const handlerOk = () => {
  console.log('handlerOk');
  // 初始化数据后回到首页
  useMeeting.initMeetingData();
  bus_stop_record.emit();
  bus_change_page.emit('home');
};
const saveName = (e) => {
  // TODO：更新名称

  const meeting_id = useMeeting.meet_id;
  const data = {
    name: e.target.value,
    description: ''
  };
  updateMeetingDetail(meeting_id, data).then((res) => {
    show_edit.value = false;
  });
};
</script>
<style scoped lang="css">
.top-tools {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  font-size: 18px;
}
.left-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.title {
  font-weight: bold;
}
.sub-title {
  font-size: 12px;
  color: var(--text-save-time-color);
  margin-top: 10px;
}
.img-home {
  width: 24px;
  cursor: pointer;
}
:deep(.arco-input) {
  font-weight: bold;
}
</style>