welfare-admin/src/views/project/ProjectList.vue

<template>
  <div>
    <a-space direction="vertical" style="width: 100%">
      <a-space direction="horizontal">
        项目名:
        <a-input v-model="queryParam.projectName" style="width: 100%" />
        项目状态:
        <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" style="width: 120px">
          <a-select-option value="null">全部</a-select-option>
          <a-select-option value="1">运行中</a-select-option>
          <a-select-option value="2">已结束</a-select-option>
          <a-select-option value="3">未发布</a-select-option>
        </a-select>
        开始时间:
        <a-date-picker
          v-model="queryParam.startDate"
          style="width: 100%"
          placeholder="请输入开始时间"
          valueFormat="YYYY-MM-DD HH:mm:ss"
        />
        结束时间:
        <a-date-picker
          v-model="queryParam.endDate"
          style="width: 100%"
          placeholder="请输入结束时间"
          valueFormat="YYYY-MM-DD HH:mm:ss"
        />
        培训方式:
        <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" style="width: 120px">
          <a-select-option value="null">全部</a-select-option>
          <a-select-option value="1">培训</a-select-option>
          <a-select-option value="2">考试</a-select-option>
          <a-select-option value="3">培训-练习</a-select-option>
          <a-select-option value="4">培训-练习-考试</a-select-option>
        </a-select>

        <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
        <a-button icon="redo" @click="() => (queryParam = {})">重置</a-button>
      </a-space>

      <a-space class="table-operator" direction="horizontal">
        <a-button v-if="hasPerm('project:add')" type="primary" icon="plus" @click="$refs.projectStepForm.add()">新增项目</a-button>
      </a-space>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-if="hasPerm('project:edit')" href="javascript:;" @click="$refs.projectStepForm.edit(record)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
              <a v-if="hasPerm('project:del')" href="javascript:;">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleDetail(record)">详情</a>
            <a-divider type="vertical" />
          </template>
        </span>
      </s-table>
      <project-step-form ref="projectStepForm"></project-step-form>
    </a-space>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getProjectList } from '@/api/project/project'
import projectStepForm from './ProjectStepForm'

export default {
  components: {
    STable,
    projectStepForm,
  },
  data() {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
        {
          title: '时间',
          dataIndex: 'startDate',
          key: 'startDate',
          customRender: (text, record, index) => {
            return record.startDate + ' - ' + record.endDate
          },
        },
        { title: '人数', key: 'personNum', dataIndex: 'personNum', customRender: (text) => text + '人' },
        { title: '项目类型', dataIndex: 'projectType', key: 'projectType' },
        {
          title: '项目状态',
          dataIndex: 'status',
          customRender: (text, record, index) => {
            //项目状态 1-未发布 2-未开始 3-进行中  4-已完成  5-已中止
            if (text == 1) {
              return '未发布'
            }
            if (text == 2) {
              return '未开始'
            }
            if (text == 3) {
              return '进行中'
            }
            if (text == 4) {
              return '已完成'
            }
            if (text == 5) {
              return '已中止'
            }
          },
        },
        { title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
        { title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
        {
          title: '操作',
          width: 200,
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
    }
  },
  created() {},
  methods: {
    // 增
    handledCreate() {
      return this.$router.push(
        // {name: 'ProjectForm'}
        { path: 'project/project/add' }
      )
    },
  }    
}
// @白鸣 发展党员哪个审批信息管理 是哪一级审核才显示，还是审核这一级的上级也能看到
</script>