baozhida_erp/src/views/project/MyProject.vue

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { GlobalStore } from '@/stores/index'
import { ref, nextTick } from 'vue'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { Edit, Delete, View } from '@element-plus/icons-vue'
import { Project_Del, Project_Project_User_list } from '@/api/project/index'
import ProjectForm from './ProjectForm.vue'

const TableRef = ref()
const globalStore = GlobalStore()
const User_tokey = globalStore.GET_User_tokey
const projctFormRef = ref<InstanceType<typeof ProjectForm> | null>(null)

const columns: ColumnProps[] = [
  { type: 'index', label: '序号' },
  { prop: 'T_name', label: '项目名称' },
  { prop: 'T_user_name', label: '项目负责人' },
  { prop: 'T_set_up_date', label: '立项日期' },
  { prop: 'T_end_date', label: '结束时间' },
  { prop: 'T_planning_cycle', label: '计划完成周期（工作日）', width: 125 },
  { prop: 'T_Perf', label: '绩效总金额' },
  { prop: 'T_State', label: '状态', name: 'T_State' },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
]
const DeleteProject = (Id: number) => {
  ElMessageBox.confirm('您确定要删除项目吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await Project_Del({ User_tokey, T_id: Id })
      if (res.Code === 200) {
        ElMessage.success('删除成功！')
        nextTick(() => {
          onUpdateTableList
        })
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}
const onUpdateTableList = () => TableRef.value?.getTableList()
const openProjectDrawer = (type: string, row?: any) => projctFormRef.value?.projectFromOpen(type, row)
</script>
<template>
  <div class="my-project">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Project_Project_User_list" :initParam="{ User_tokey }">
      <template #table-header>
        <el-row :gutter="20" class="w-100">
          <el-col :span="4"><h3 class="title">我的项目</h3></el-col>
          <el-col :span="4" :offset="16"
            ><el-button type="primary" @click="openProjectDrawer('new')">立项申请</el-button></el-col
          >
        </el-row>
      </template>
      <template #T_State="{ row }">
        <el-tag v-if="row.T_State === 4" effect="dark">已发绩效</el-tag>
        <el-tag v-else-if="row.T_State === 3" type="success" effect="dark">已完成</el-tag>
        <el-tag v-else-if="row.T_State === 2" type="warning" effect="dark">进行中</el-tag>
        <el-tag v-else type="danger" effect="dark">待审核</el-tag>
      </template>
      <template #right="{ row }">
        <el-button link type="success" size="small" :icon="View" @click="openProjectDrawer('view', row)"
          >详情</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          :icon="Edit"
          :disabled="[3, 4].includes(row.T_State)"
          @click="openProjectDrawer('edit', row)"
          >编辑</el-button
        >
        <el-button
          link
          type="danger"
          size="small"
          :icon="Delete"
          :disabled="[3, 4].includes(row.T_State)"
          @click="DeleteProject(row.Id)"
          >删除</el-button
        >
      </template>
    </TableBase>
    <ProjectForm ref="projctFormRef" projectName="myProject" @onTableList="onUpdateTableList" />
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';
.my-project {
  height: 100%;
  display: flex;
  overflow: hidden;
  @include f-direction;

  :deep(.table-header),
  :deep(.card) {
    margin: 0;
    border-radius: 8px;
  }
  :deep(.el-table .cell) {
    white-space: normal !important;
  }
}
</style>