ss-oa-manage-web/src/views/OKR/Meeting/index.vue

<template>
  <div>
    <!-- 搜索条件：主题、会议状态、会议时间（时间段）、选择OKR节点 -->
    <el-form :model="searchForm" inline label-width="0">
      <el-form-item>
        <el-input v-model="searchForm.subject" placeholder="会议主题" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.status" placeholder="会议状态" style="width: 150px">
          <el-option label="未开始" :value="1" />
          <el-option label="已结束" :value="2" />
          <el-option label="已取消" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          start-placeholder="会议时间"
          end-placeholder="会议时间"
        />
      </el-form-item>
      <el-form-item>
        <el-tree-select
          v-model="searchForm.nodeId"
          :data="peroidList"
          :props="defaultProps"
          :render-after-expand="false"
          :default-expand-all="false"
          check-strictly
          placeholder="选择OKR节点"
          style="width: 300px"
          @change="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handleAdd">预约会议</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableList" v-loading="loading" border stripe>
      <el-table-column prop="subject" label="会议主题" />
      <el-table-column prop="startDate" label="会议时间" />
      <el-table-column prop="address" label="会议地点" />
      <el-table-column prop="expectEndDate" label="预计结束时间" />
      <el-table-column prop="expectUsers" label="预约参会人员" />
      <el-table-column prop="actualUsers" label="实际参会人员" />
      <el-table-column prop="okrNodeName" label="关联OKR节点" />
      <el-table-column prop="status" label="会议状态">
        <template #default="{ row }">
          <el-tag v-if="row.status === '未开始'" type="info" size="small">
            {{ row.status }}
          </el-tag>
          <el-tag v-else-if="row.status === '已结束'" type="success" size="small">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="{ row }">
          <template v-if="row.status == '未开始'">
            <el-button type="primary" style="padding: 0" text @click="handleEdit(row.id)">
              修改
            </el-button>
            <el-button type="danger" text style="padding: 0" @click="handleCancel(row)">
              取消
            </el-button>
          </template>
          <el-button v-else type="primary" style="padding: 0" text @click="handleDetail(row.id)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="searchForm.pageSize"
      v-model:page="searchForm.pageNo"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Meeting">
import { listToTree } from '@/utils/tree'
// import { formatDate } from '@/utils/formatTime'
import { getAllNodeTree } from '@/api/okr/okr'

const defaultProps = {
  value: 'nodeId',
  label: 'nodeName',
  children: 'children'
}
const message = useMessage()

const searchForm = ref({
  subject: '',
  status: 1,
  dateRange: [],
  nodeId: undefined,
  pageNo: 1,
  pageSize: 50
})
const total = ref(0)

onMounted(() => {
  getOptions()
  handleSearch()
})

const peroidList = ref([])
function getOptions() {
  // 模拟获取OKR节点数据
  getAllNodeTree().then((resp) => {
    peroidList.value = listToTree(resp?.tree || [], {
      id: 'nodeId',
      pid: 'parentId',
      children: 'children'
    })
  })
}

const loading = ref(false)
const tableList = ref([])
const handleSearch = () => {
  searchForm.value.pageNo = 1
  getList()
}

function getList() {
  loading.value = true
  // 模拟异步请求
  setTimeout(() => {
    // 假设请求成功，更新数据
    tableList.value = [
      {
        id: 1,
        subject: 'OKR会议',
        startDate: '2023-10-01 10:00',
        address: '会议室A',
        expectEndDate: '2023-10-01 11:00',
        expectUsers: '张三, 李四',
        actualUsers: '张三, 李四, 王五',
        okrNodeName: 'OKR节点1',
        status: '未开始'
      },
      {
        id: 2,
        subject: '项目复盘会议',
        startDate: '2023-10-02 14:00',
        address: '会议室B',
        expectEndDate: '2023-10-02 15:00',
        expectUsers: '赵六, 钱七',
        actualUsers: '赵六, 钱七, 孙八',
        okrNodeName: 'OKR节点2',
        status: '已结束'
      }
    ]
    total.value = tableList.value.length
    loading.value = false
  }, 1000)
}

const router = useRouter()

const handleAdd = () => {
  router.push({ name: 'MeetingInfo', params: { id: 0 } })
}

const handleEdit = (id) => {
  router.push({
    name: `MeetingInfo`,
    params: {
      id
    }
  })
}

const handleDetail = (id) => {
  router.push({
    name: `MeetingInfo`,
    params: {
      id
    },
    query: {
      isDetail: 1
    }
  })
}

const handleCancel = async (row) => {
  try {
    await message.confirm('是否确认取消该会议？')
    // 模拟取消会议操作
    setTimeout(() => {
      console.log(row)

      message.success('会议已取消')
      // 重新获取列表
      getList()
    }, 500)
  } catch (error) {
    console.log('取消操作被用户拒绝', error)
  }
}
</script>

<style lang="scss" scoped></style>