1、视图模板

  1. <template>
  2.   <div class="container">
  3.     <a-card class="form-search" :bordered="false" :style="{ marginBottom: '20px' }">
  4.       <a-form layout="inline" :form="form" @submit="handleSubmit">
  5.         <a-row class="form-row" :gutter="16">
  6.           <a-form-item label="项目名称">
  7.             <a-input v-model="formData.name" maxlength="100" placeholder="项目名称" :allowClear="true"></a-input>
  8.           </a-form-item>
  9.           <a-form-item label="项目状态">
  10.             <a-select default-value="" v-model="formData.status" style="width:80px;">
  11.               <a-select-option value="">
  12.                 全部
  13.               </a-select-option>
  14.               <a-select-option value="doing">
  15.                 进行中
  16.               </a-select-option>
  17.               <a-select-option value="wait">
  18.                 已延期
  19.               </a-select-option>
  20.               <a-select-option value="done">
  21.                 已完成
  22.               </a-select-option>
  23.             </a-select>
  24.           </a-form-item>
  25.           <a-form-item>
  26.             <a-button type="primary" html-type="submit">
  27.               查询
  28.             </a-button>
  29.           </a-form-item>
  30.         </a-row>
  31.       </a-form>
  32.     </a-card>
  34.     <a-card class="datatable" :bordered="false">
  35.       <a-table
  36.         :columns="columns"
  37.         :rowKey="row => row.id"
  38.         :data-source="data"
  39.         :pagination="pagination"
  40.         :loading="loading"
  41.         @change="handleTableChange">
  42.         <span slot="action" slot-scope="record">
  43.           <a-button class="btn-action" type="link" @click="detal(record)">详情</a-button>
  44.           <!--
  45.           <a-divider type="vertical" />
  46.           <a-button class="btn-action" type="link" @click="clickTask(record)">任务统计</a-button>
  47.           <a-divider type="vertical" />
  48.           <a-button class="btn-action" type="link" @click="clickBug(record)">BUG统计</a-button>
  49.            -->
  50.         </span>
  51.       </a-table>
  52.     </a-card>
  53.   </div>
  54. </template>

2、JS脚本

  1. <script>
  2. import { findPage } from '@/api/project'
  4. function renderStatus (text, record, index) {
  5.   if(text == 'doing') {
  6.     return '进行中'
  7.   } else if (text == 'done') {
  8.     return '已完成'
  9.   } else if (text == 'wait') {
  10.     return '已延期'
  11.   }
  12. }
  14. function renderProjectType (text, record, index) {
  15.   if(text == 'sprint') {
  16.     return '短期项目'
  17.   } else if (text == 'waterfall') {
  18.     return '长期项目'
  19.   } else {
  20.     return '维护项目'
  21.   }
  22. }
  24. function formatDate (text, record, index) {
  25.   return text ? text.substr(0, 10) : text;
  26. }
  28. // 表格字段属性
  29. const columns = [
  30.   {
  31.     title: 'ID', // 表头文字
  32.     dataIndex: 'id', // 字段索引，列数据在数据项中对应的key
  33.     key: 'id' // Vue需要的 key，如果已经设置了唯一的dataIndex，可以忽略这个属性
  34.   },
  35.   {
  36.     title: '项目名称',
  37.     dataIndex: 'name',
  38.     key: 'name'
  39.   },
  40.   {
  41.     title: '项目代号',
  42.     dataIndex: 'code',
  43.     key: 'code'
  44.   },
  45.   {
  46.     title: '项目类型',
  47.     dataIndex: 'type',
  48.     key: 'type',
  49.     customRender: renderProjectType
  50.   },
  51.   {
  52.     title: '开始时间',
  53.     key: 'begin',
  54.     dataIndex: 'begin',
  55.     customRender: formatDate
  56.   },
  57.   {
  58.     title: '结束日期',
  59.     key: 'end',
  60.     dataIndex: 'end',
  61.     customRender: formatDate
  62.   },
  63.   {
  64.     title: '项目状态',
  65.     key: 'status',
  66.     dataIndex: 'status',
  67.     customRender: renderStatus
  68.   },
  69.   {
  70.     title: '操作',
  71.     key: 'action',
  72.     scopedSlots: { customRender: 'action' }
  73.   }
  74. ];
  76. export default {
  77.   name: 'Project',
  78.   data () {
  79.     return {
  80.       formData: {
  81.         name: '',
  82.         owner: '',
  83.         status: ''
  84.       },
  85.       form: this.$form.createForm(this),
  86.       pagination: {
  87.         pageSize: 20,
  88.         current: 1
  89.       },
  90.       loading: false,
  91.       columns,
  92.       data: []
  93.     }
  94.   },
  95.   mounted () {
  96.     this.fetch(this.formData)
  97.   },
  98.   methods: {
  99.     handleSubmit (e) {
  100.       e.preventDefault()
  101.       this.pagination.current = 1
  102.       this.pagination.pageNo = 1
  103.       this.fetch(this.formData)
  104.     },
  105.     fetch (param = {}) {
  106.       this.loading = true;
  107.       const postData = { pageNo: this.pagination.current, ...param, ...this.pagination }
  108.       console.log('postData:', postData);
  110.       findPage(postData).then(res => {
  111.         const pagination = { ...this.pagination };
  112.         // pagination.total = data.totalCount;
  113.         pagination.total = res.data.total;
  114.         this.loading = false;
  115.         this.data = res.data.data;
  116.         this.pagination = pagination;
  117.       });
  118.     },
  119.     detal (row) {
  120.       console.log('row', row)
  121.       this.$router.push({
  122.         name: 'detail',
  123.         params: { projectId: row.id }
  124.       })
  125.     },
  126.     handleTableChange (pagination, filters, sorter) {
  127.       console.log(pagination);
  128.       const pager = { ...this.pagination };
  129.       pager.current = pagination.current;
  130.       this.pagination = pager;
  132.       this.fetch({
  133.         results: pagination.pageSize,
  134.         page: pagination.current,
  135.         sortField: sorter.field,
  136.         sortOrder: sorter.order,
  137.         ...filters,
  138.       });
  139.     }
  140.   }
  141. }
  142. </script>

3、CSS样式

  1. <style lang="less" scoped>
  2. .btn-action {
  3.   padding: 0;
  4. }
  5. </style>