zenglf
2023-09-28 8e75a78f55d60565eb48b25eafd4eb07939ce2cc
src/views/system/modules/QuartzJobListModal.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,423 @@
<template>
  <a-modal :title="title" width="100%" :visible="visible" :maskClosable="false" @ok="handleOk" @cancel="handleCancel"
           cancelText="关闭">
    <a-card :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="6">
              <a-form-item label="任务名称">
                <a-input placeholder="请输入任务名称" v-model="queryParam.jobName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="时间">
                <a-range-picker show-time @change="dateParamChange" :disabledDate="disabledDate" format="YYYY-MM-DD HH:mm:ss" v-model="dates"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
            <a-col :md="2" :sm="2">
              <a-button type="primary" icon="download" @click="handleExportXls('执行日志导出')">导出</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
      <div class="table-operator">
        <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="index" :scroll="{  y: 400 }" :columns="columns"
                 :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                 @change="handleTableChange">
          <!-- çŠ¶æ€æ¸²æŸ“æ¨¡æ¿ -->
          <template slot="customRenderStatus" slot-scope="isSuccess">
            <a-tag v-if="isSuccess==0" color="green">成功</a-tag>
            <a-tag v-if="isSuccess==-1" color="red">失败</a-tag>
          </template>
          <span slot="action" slot-scope="text, record">
             <a v-if="record.isSuccess == -1" @click="executeImmediately(record)">查看详情</a>
        </span>
        </a-table>
      </div>
      <!-- table区域-end -->
      <quartz-job-details ref="modalForm"></quartz-job-details>
    </a-card>
  </a-modal>
</template>
<script>
  import { filterObj } from '@/utils/util';
  import {
    ajaxGetSelectItems
  } from '@/api/api'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    deleteAction,
    requestPut,
    getAction,
    downFile,
    postAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import JDate from '@/components/jeecg/JDate'
  import moment from 'moment'
  import QuartzJobDetails from './QuartzJobDetails'
  export default {
    name: 'QuartzJobListModal',
    // mixins: [JeecgListMixin],
    components: {
      JDictSelectTag,
      JEllipsis,
      JInput,
      Tooltip,
      JDate,
      QuartzJobDetails
    },
    props: {
      status: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        title:'',
        visible:false,
        /* æŸ¥è¯¢æ¡ä»¶-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* æ•°æ®æº */
        dataSource:[],
        /* åˆ†é¡µå‚æ•° */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " å…±" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* æŽ’序参数 */
        isorter:{
          column: 'createTime',
          order: 'desc',
        },
        /* ç­›é€‰å‚æ•° */
        filters: {},
        /* table加载状态 */
        loading:false,
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        /* æŸ¥è¯¢æŠ˜å  */
        toggleSearchStatus:false,
        /* é«˜çº§æŸ¥è¯¢æ¡ä»¶ç”Ÿæ•ˆçŠ¶æ€ */
        superQueryFlag:false,
        /* é«˜çº§æŸ¥è¯¢æ¡ä»¶ */
        superQueryParams: '',
        /** é«˜çº§æŸ¥è¯¢æ‹¼æŽ¥æ–¹å¼ */
        superQueryMatchType: 'and',
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          // {
          //   title: '任务名称',
          //   align: 'center',
          //   dataIndex: 'jobClassName',
          // },
          // {
          //   title: 'cron表达式',
          //   align: 'center',
          //   dataIndex: 'cronExpression',
          // },
          {
            title: '任务名称',
            align: 'center',
            dataIndex: 'jobName'
          },
          {
            title: '参数',
            align: 'center',
            dataIndex: 'parameter'
          },
          {
            title: '报错信息',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          },
          {
            title: '成功标志',
            align: 'center',
            dataIndex: 'isSuccess',
            scopedSlots: { customRender: 'customRenderStatus' },
            filterMultiple: false,
            filters: [
              { text: '成功', value: '0' },
              { text: '失败', value: '-1' },
            ]
          },
          {
            title: '执行时间(毫秒)',
            align: 'center',
            dataIndex: 'executionTime',
            customRender:(t,r,index) =>{
              var milliseconds = parseInt(t)
                let hours = Math.floor(milliseconds / 3600000);
                milliseconds = milliseconds % 3600000;
                let minutes = Math.floor(milliseconds / 60000);
                milliseconds = milliseconds % 60000;
                let seconds = Math.floor(milliseconds / 1000);
                milliseconds = milliseconds % 1000;
                if(hours == 0){
                  if(minutes == 0){
                    if(seconds == 0) {
                      return `${milliseconds}毫秒`
                    }else{
                      return `${seconds}秒 ${milliseconds}毫秒`
                    }
                  }else{
                    return `${minutes}分钟 ${seconds}秒 ${milliseconds}毫秒`;
                  }
                }else{
                  return `${hours}小时 ${minutes}分钟 ${seconds}秒 ${milliseconds}毫秒`;
                }
            }
          },
          {
            title: '任务执行时间',
            align: 'center',
            dataIndex: 'createTime'
          },
        ],
        sectionPData: [],
        sectionData: [],
        url: {
          list: '/sys/quartzLog/list',
          exportXlsUrl:'/sys/quartzLog/exportXls'
        },
        value:undefined,
        valueProduct:undefined,
        dates: [],
      }
    },
    created() {
    },
    watch: {
    },
    methods: {
      searchReset() {
        let id =  this.queryParam.jobId
        this.queryParam = {}
        this.dates = []
        this.queryParam.jobId = id
        this.loadData(1);
      },
      executeImmediately:function (record) {
        this.$refs.modalForm.showDetails(record);
        this.$refs.modalForm.title = "报错信息";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleExportXls(fileName){
        if(!fileName || typeof fileName != "string"){
          fileName = "导出文件"
        }
        let param = this.getQueryParams();
        if(this.selectedRowKeys && this.selectedRowKeys.length>0){
          param['selections'] = this.selectedRowKeys.join(",")
        }
        console.log("导出参数",param)
        downFile(this.url.exportXlsUrl,param).then((data)=>{
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
          }else{
            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
      disabledDate(current) {
        return current && current > moment().subtract('days', 1);
      },
      dateParamChange(v1, v2) {
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
      },
      handleTableChange(pagination, filters, sorter) {
        // this.onClearSelected()
        //分页、排序、筛选变化时触发
        //TODO ç­›é€‰
        console.log(pagination)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      openPage(record) {
        // console.log(record)
        this.visible = true
        this.dataSource = [];
        this.queryParam = {
          jobId: record.id
        };
        this.loadData();
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.jobId = this.queryParam.jobId;
        param.startTime = this.queryParam.startTime;
        param.endTime =  this.queryParam.endTime;
        //获取用户定制的参数属性
        // if (this.getCustomQueryParams) {
        //   param = this.getCustomQueryParams(param);
        //   if(!param){
        //     return false;
        //   }
        // }
        return filterObj(param);
      },
      getQueryField() {
        //TODO å­—段权限控制
        var str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        if(!params){
          return false;
        }
        this.loading = true;
        // params.id = this.queryParam.id
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for:适配不分页的数据列表------------
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for:适配不分页的数据列表------------
          }else{
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
        })
      },
      modalFormOk(val) {
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—è¡¨
        this.loadData();
        this.selectedRowKeys = [val.id];
      },
      searchQuery() {
        this.loadData();
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleCancel() {
        this.close()
      },
      handleOk() {
        this.close()
      },
    },
  }
</script>
<style>
  @import '~@assets/less/common.less';
  .frozenRowClass {
    color: #c9c9c9;
  }
  .success {
    color: green;
  }
  .error {
    color: red;
  }
</style>