antd测试平台开发(三)

Xiaoshuang_Cao

已于 2022-04-28 00:02:21 修改

阅读量474

点赞数

文章标签： vue

于 2022-04-19 22:57:52 首次发布

本文链接：https://blog.csdn.net/qq_41969287/article/details/124238738

版权

构建历史页

一、新建页面

新建src/pages/build_history文件夹，文件夹有如下文件：
build_history.vue 页面
index.js

1、新建src/pages/build_history/build_history.vue

有默认的模版组件库

2、新建src/pages/build_history/index.js

import build_history from "@/pages/build_history/build_history";
export default build_history

二. 配置目录(非动态路由)

在src/router/config.js添加二级菜单；
页面所有父级路由的组件必须配置为视图组件，否则页面的内容可能不会显示。目前有 PageView、 TabsView 和 BlankView 可选
TabsView ：多页签视图，包含了 AdminLayout 布局、多页签头和路由视图内容区
PageView ：页面视图，包含了 PageLayout 布局和路由视图内容区
BlankView ：空白视图，仅包含一个路由视图内容区

          component: PageView,
          children: [
            {
              path: 'history',
              name: '构建历史',
              meta: {
                invisible: true,  //是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由
                icon: 'dashboard',
                page: {
                  title: '自定义标题', //路由元数据 meta 中定义 page.title 属性实现自定义页面标题
                  breadcrumb: ['首页', 'Dashboard', '自定义'] //路由元数据 meta 中定义 page.breadcrumb 属性实现自定义面包屑
                }
              },
              component: () => import('@/pages/build_history'),
            }]

icon参考如下链接(对应组件库的type属性)：

https://www.antdv.com/components/icon-cn/

三. 编写build_history.vue内容

以table插槽为例

1、template层

插槽 slot 的值和dataIndex对应

<template slot="operation" slot-scope="record">
  <a-tooltip  title="详情" >
    <a-icon type="eye" @click="onDetail(record)" />
  </a-tooltip>
</template>

2、script层

在cloumns 中添加 scopedSlots

  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }, //值跟dataIndex对应，支持操作列插槽
    width: 160
  },

四. 在services中实现请求

在 Vue Antd Admin 中，服务端交互流程如下：

组件内调用 service 服务 API
service 服务 API 封装请求数据，通过 request.js 发送请求
组件获取 service 返回的数据，更新视图数据或触发其它行为

1、新建文件src/services/build_history.js

import {request ,METHOD} from "@/utils/request";

/**
 * 获取Jenkins建构历史数据
 * @param url 执行人
 * @param params 参数
 * @returns {Promise<AxiosResponse<T>>}
 */
export async function get_build_history_data(url, params) {
    return request(url, METHOD.GET, params)
}

export default {
    get_build_history_data
}

2、在src/services/index.js引用

import userService from './user'
import dataSource from './dataSource'
import postman_send from "@/services/postman";
import get_build_history_data from "@/services/build_history";

export {
  userService,
  dataSource,
  postman_send,
  get_build_history_data,
}

3、在src/pages/build_history/build_history.vue中引用并调用

<template>
  <div>
    <a-card title="构建历史" style="width: 100%">
      <a-form
          :model="formState"
          name="horizontal_login"
          layout="inline"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="执行人"
            name="executor"
            :rules="[{ required: true, message: 'Please input your executor!' }]"
        >
          <a-select v-model="UserType" style="width:150px" allowClear>
            <a-select-option :value="item.id" v-for="(item, i) in UserArr" :key="i">
              {{ item.name }}
            </a-select-option>
          </a-select>

        </a-form-item>

        <a-form-item name="range-time-picker" label="执行时间" v-bind="rangeConfig">
          <a-range-picker
              v-model="formState['range-time-picker']"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>

        <a-form-item>
          <a-button  type="primary" html-type="submit" @click="onSelectData" >查询</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-table sticky :columns="columns" :data-source="data" :scroll="{ x: 1500 }" rowKey="id"> // 这里的rowKey不需要冒号
        <template slot="operation" slot-scope="record">
          <a-tooltip  title="详情" >
            <a-icon type="eye" @click="onDetail(record)" />
          </a-tooltip>
        </template>
        <template #summary>
          <a-table-summary :fixed="fixedTop ? 'top' : 'bottom'">
            <a-table-summary-row>
              <a-table-summary-cell :index="0" :col-span="2">
                <a-switch
                    v-model="fixedTop"
                    checked-children="Fixed Top"
                    un-checked-children="Fixed Top"
                ></a-switch>
              </a-table-summary-cell>
              <a-table-summary-cell :index="2" :col-span="8">Scroll Context</a-table-summary-cell>
              <a-table-summary-cell :index="10">Fix Right</a-table-summary-cell>
            </a-table-summary-row>
          </a-table-summary>
        </template>
      </a-table>
  </div>
</template>

<script >
import { get_build_history_data, get_build_history_detail} from "@/services/build_history";
import { getUserList } from '@/services/postman';


//表头数据,title 为表头的标题 dataIndex为列数据在数据项中对应的 key
const columns = [
  {
    title : '构建id',
    dataIndex: 'id',
  },
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '执行人',
    dataIndex: 'executor',
  },
  {
    title: '总数',
    dataIndex: 'total',
    sorter: (a, b) => a.total - b.total,
    defaultSortOrder: 'descend',
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '成功',
    dataIndex: 'success',
  },
  {
    title: '失败',
    dataIndex: 'fail',
  },
  {
    title: '出错',
    dataIndex: 'error',
  },
  {
    title: '跳过',
    dataIndex: 'skip',
  },
  {
    title: '开始时间',
    dataIndex: 'start_time',
    sorter: (a, b) => Date.parse(a.start_time) - Date.parse(b.start_time), //支持排序
    defaultSortOrder: 'descend',
    sortDirections: ['ascend', 'descend']
  },
  {
    title: '任务状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }, //值跟dataIndex对应，支持操作列插槽
    width: 160
  },
];

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const rangeConfig = {
  rules: [{ required: true, message: 'Please select time!' }],
};

export default {
  name: 'build_history',
  data() {
    return {
      api_str: "http://localhost:7777/auth/get_jenkins_data",
      api_detail:"http://localhost:7777/auth/get_jenkins_detail",
      loading: false,
      columns: columns,
      data: [], //存储表格数据
      contents:[],
      formItemLayout: formItemLayout,
      rangeConfig: rangeConfig,
      formState: {
        executor: '',
        executor_time: [],
      },
      form: this.$form.createForm(this, {name: 'history'}),
      UserArr:[],
      UserType:'',
      visible:false,
    };
  },
  mounted() {
    getUserList().then(res => {
      this.UserArr = res.data.data         //跟后端接口response对齐
      console.log('搜索条件',this.UserArr);
    })
  },
  methods: {
    onSelectData() {
      this.loading = true;
      const executor = this.UserType
      const start_time = this.formState['range-time-picker'][0]      //1、获取表单执行开始时间
      const end_time = this.formState['range-time-picker'][1]        //6、获取表单执行结束时间
      console.log(executor,start_time,end_time);
      get_build_history_data(this.api_str, {executor, start_time, end_time})
          .then((result) => {
            this.loading = false;
            this.data = result.data.data;   //跟后端接口response对齐
          })
          .catch((err) => {
            this.data = err;
          });

    },
    reset() {
      this.UserType = ''                         //清空执行人
      this.formState['range-time-picker'] = []   //清空执行时间
      this.data = []                             //清空搜索结果
    },
    onFinish(val) {
      console.log('endValue', val);
    },
    onFinishFailed(val) {
      console.log('endValue', val);
    },
    onDetail(record) {
      this.visible = true
      get_build_history_detail(this.api_detail, {record})
          .then((result) => {
            this.loading = false;
            this.contents = result.data.data;   //跟后端接口response对齐
            console.log('ondetail ', this.contents);
          })
          .catch((err) => {
            this.contents = err;
          });
    },
  }
};


</script>

<style>
#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
  border: 1px dashed #434343;
  background: rgba(255, 255, 255, 0.04);
}
</style>