pms-vue.git - Gitblit

<template>
  <div>
    <!-- 列表页面 -->
 
    <div class="page-container" v-if="showEdit == 0">
      <!-- 查询条件 -->
      <div class="search-section">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="queryForm.keyword" placeholder="标题/内容" clearable />
          </el-form-item>
          <el-form-item label="日期范围" prop="daily_date" style="width: 400px">
            <el-date-picker
              v-model="queryForm.date_range"
              type="datetimerange"
              range-separator="到"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
 
          <el-form-item label="类型">
            <el-select v-model="queryForm.meeting_type" placeholder="请选择会议类型" clearable filterable>
              <el-option v-for="item in meetingTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
 
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="add">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <!-- <div class="table-section" > -->
      <el-table :data="tableData" v-loading="loading" style="width: 100%" fit :row-class-name="rowClassName">
        <el-table-column type="index" :index="indexMethod" label="序号" fixed="left" width="60px"></el-table-column>
 
        <el-table-column prop="meeting_date" label="日期" min-width="120px">
          <template #default="scope">
            {{ formatDate(scope.row.meeting_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="meeting_title" label="会议标题"></el-table-column>
        <el-table-column prop="meeting_type_name" label="会议类型"></el-table-column>
        <!-- <el-table-column prop="meeting_type" label="类型">
          <template #default="scope">
            {{ getSysDictName(scope.row.meeting_type, meetingTypeList) }}
          </template>
 
        </el-table-column> -->
        <!-- <el-table-column prop="user_dolist" label="参会人员">
          <template #default="scope">
            <el-tag v-for="user in scope.row.user_dolist" :key="user.id" type="primary">
              {{ user.nickname }}
            </el-tag>
          </template>
        </el-table-column> -->
 
        <el-table-column prop="meeting_user_names" label="参会人员"></el-table-column>
        <el-table-column label="操作栏" fixed="right" width="220px">
          <template #default="scope">
            <el-link class="operationBtn" type="primary" @click="handleDetail(scope.row)">详情</el-link>
            <el-link
              :disabled="scope.row.is_commit == 1"
              class="operationBtn"
              type="primary"
              @click="handleEdit(scope.row)"
              >编辑</el-link
            >
            <el-link
              :disabled="scope.row.is_commit == 1"
              class="operationBtn"
              type="primary"
              @click="handleDelete(scope.row)"
              >删除</el-link
            >
            <el-link
              :disabled="scope.row.is_commit == 1"
              class="operationBtn"
              type="primary"
              @click="handleCommit(scope.row)"
              >提交</el-link
            >
          </template>
        </el-table-column>
      </el-table>
 
      <div class="demo-pagination-block">
        <!-- <div class="demonstration">All combined</div> -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
 
      <!-- </div> -->
    </div>
 
    <!-- 编辑页面 -->
 
    <meeting-add v-if="showEdit == 1" @editClose="editClose" :editId="editDiaryId" :key="editDiaryId"></meeting-add>
    <meeting-detail
      v-if="showEdit == 2"
      @editClose="editClose"
      :editId="editDiaryId"
      :key="editDiaryId"
    ></meeting-detail>
  </div>
</template>
 
<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import ProjectInfo from '@/model/projectInfo'
import ProjectDaily from '@/model/projectDaily'
import SysDictItemModel from '@/model/sysDictItem'
import Meeting from '@/model/meeting'
import { debounce } from 'lodash'
import { getQueryParamsFromHash } from '@/utils/urlParams'
import MeetingAdd from './meeting-add'
import MeetingDetail from './meeting-detail'
 
export default {
  components: {
    MeetingAdd,
    MeetingDetail,
  },
 
  setup() {
    // 防抖函数，避免动态表格数据变化时产生的抖动
    const resizeObserver = window.ResizeObserver
 
    window.ResizeObserver = class extends resizeObserver {
      constructor(callback) {
        const debouncedCallback = debounce(callback, 100)
        super(debouncedCallback)
      }
    }
 
    const uniKey = ref(0)
    const editDiaryId = ref('')
    const showEdit = ref(0)
    const loading = ref(false)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalSize = ref(100)
 
    const meetingTypeList = ref([])
 
    const projectInfoArr = ref([])
    const userList = ref([])
 
    const dialogConfirm = ref(false)
    const formLabelWidth = '140px'
 
    const queryForm = reactive({
      date_range: [],
      keyword: '',
      meeting_type: '',
      page: 1,
      count: 10,
    })
 
    const resultPage = ref({})
 
    const tableData = ref([])
 
    onMounted(() => {
      // 获取路
      const urlParams = getQueryParamsFromHash()
      if (urlParams.id) {
        handleDetail(urlParams)
      }
 
      // 列出所有项目信息
      getMeetingPage()
      loadDictDitems()
    })
 
    const listAssign = (a, b) => Object.keys(a).forEach(key => {
      a[key] = b[key] || a[key]
    })
 
    const getMeetingPage = async () => {
      try {
        queryForm.page = currentPage.value
        queryForm.count = pageSize.value
 
        loading.value = true
 
        const params = {
          keyword: queryForm.keyword,
          meeting_type: queryForm.meeting_type,
          page: queryForm.page,
          count: queryForm.count,
          start_time: queryForm.date_range[0],
          end_time: queryForm.date_range[1],
        }
        resultPage.value = await Meeting.getMeetingPage(params)
        tableData.value = resultPage.value.items
 
        totalSize.value = resultPage.value.total
 
        currentPage.value = resultPage.value.page
        pageSize.value = resultPage.value.count
 
        loading.value = false
      } catch (error) {
        loading.value = false
        if (error.code === 10020) {
          tableData.value = []
        }
      }
    }
 
    const search = () => {
      getMeetingPage()
    }
 
    // 根据字典类型查询字典
    const loadDictDitems = async () => {
      projectInfoArr.value = await ProjectInfo.getProjectInfoList('')
      // 获取会议类型字典
      meetingTypeList.value = await SysDictItemModel.getSysDictItemListByType('meeting_type')
      // 获取所有用户信息
      userList.value = await ProjectDaily.getAllUsers()
    }
 
    const handleDetail = row => {
      // 详情操作
      uniKey.value++
      editDiaryId.value = row.id
      showEdit.value = 2
    }
 
    const handleEdit = row => {
      // 编辑操作
      uniKey.value++
      editDiaryId.value = row.id
      showEdit.value = 1
    }
 
    const handleDelete = row => {
      // 删除操作
      ElMessageBox.confirm('此操作将永久删除该日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await Meeting.deleteMeeting(row.id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            getMeetingPage()
            ElMessage.success(`${res.message}`)
          }
        })
        .catch(() => {
          // 用户点击取消按钮时执行的操作
          // 可以选择不做任何事情，也可以显示取消消息
          // ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
        })
    }
 
    const handleSizeChange = val => {
      pageSize.value = val
      getMeetingPage()
    }
 
    const handleCurrentChange = val => {
      currentPage.value = val
      getMeetingPage()
    }
 
    const indexMethod = index => (currentPage.value - 1) * pageSize.value + index + 1
 
    // 子控部分
 
    const add = () => {
      showEdit.value = 1
      editDiaryId.value = ''
    }
 
    const editClose = () => {
      showEdit.value = 0
      getMeetingPage()
    }
 
    const formatDate = date_str => {
      if (date_str) {
        return date_str.match(/\d{4}-\d{2}-\d{2}/)[0] // 获取年月日部分
      }
      return date_str
    }
 
    /**
     * 日志颜色区分
     */
    const rowClassName = ({ row }) => {
      if (row.supplementary_flag === 1) {
        return 'supplementary-row'
      }
      return 'no-supplementary-row'
    }
 
    /**
     * 获取字典名称
     */
    const getSysDictName = (value, data) => {
      const tmp = data.find(tmp => tmp.value == value)
      if (tmp) {
        return tmp.label
      }
      return ''
    }
 
    // 提交
    const handleCommit = async row => {
      // 查看实际工时是否小6小时
      const mess = '此操作将提交该日志, 是否继续?'
      ElMessageBox.confirm(mess, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await Meeting.commitMeeting(row.id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            getMeetingPage()
            ElMessage.success(`${res.message}`)
          }
        })
        .catch(() => {
          // 用户点击取消按钮时执行的操作
          // 可以选择不做任何事情，也可以显示取消消息
          // ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
        })
    }
 
    return {
      loading,
 
      projectInfoArr,
      meetingTypeList,
      userList,
 
      queryForm,
      tableData,
      search,
      handleEdit,
      handleDelete,
      handleDetail,
 
      indexMethod,
      currentPage,
      pageSize,
      totalSize,
 
      handleSizeChange,
      handleCurrentChange,
 
      // 日志部分
      editDiaryId,
      editClose,
      add,
      showEdit,
      formatDate,
 
      // 日志的确认
      rowClassName,
 
      dialogConfirm,
      formLabelWidth,
 
      getSysDictName,
      uniKey,
 
      // 日志提交
      handleCommit,
    }
  },
}
 
function getDefaultDate() {
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  const now = `${year}-${month}-${day}`
  return now
}
</script>
 
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
 
.page-container {
  padding: 10px;
}
 
.search-section {
  margin-bottom: 10px;
  padding: 20px;
  /* background-color: #f5f5f5; */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.table-section {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.demo-pagination-block {
  margin-top: 10px;
}
 
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
 
<style>
.supplementary-row {
  background-color: rgb(215, 218, 50) !important;
  width: 100%;
}
 
.no-supplementary-row {
  background-color: #f8f9fa !important;
}
</style>
 
<style scoped>
.search-section .el-form-item {
  width: 220px;
}
 
.operationBtn {
  margin-left: 5px;
}
</style>