warning-component v1.2.23

一、组件说明

组件名称：调度任务集成组件

本组件为调度任务中定时规则和消息配置的集成组件，为支持低代码平台的定时调用机器人，提供可集成的前端组件。目前定时规则已集成内部多语，消息配置集成选人组件（ac-selector）。

Demo 访问地址：http://warning-component-demo.test.app.yyuap.com

二、安装与使用

1、安装

ynpm i -S warning-component@1.1.12

注意：调度任务集成组件内部依赖以下依赖包，需要在内网环境下进行安装

"@mdf/baseui": "2.5.18",
"@mdf/inputmultilang": "^1.1.42-lang",
"ac-lang-cn": "^1.0.8",

2、使用

import React, { Component } from 'react';
// 非 mdf工程引入方式
import WarningComponent from 'warning-component';
import 'warning-component/dist/main.css';

// mdf 工程引入方式
 import WarningComponent from 'warning-component/dist-mdf/main';
 import 'warning-component/dist-mdf/main.css';

import moment from 'moment';
moment.locale('zh-cn');  //日期面板显示中文
window.$$msdomain = ''; // 前端上下文（专属化环境生效）
// moment.locale('en');//英文
class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   timezone: 'UTC+08:00', // 时区格式
   timezonePK: 'cc4ee641-7d33-4133-8857-30468220cde8', // 时区pk
   taskDetailDataTaskTime: [],// 任务定时规则
   taskUserList: [],// 当前已选消息接收人
   taskNameList:{"zh_CN": "", "en_US": "", "zh_TW": ""},// 任务名称
   sendflag: 0,// 发送时机
   rulesForTasktimeTips: '',//必填提示语
   tableDataForTaskway: {},//任务定时规则
   userlistAllData: [],//所有消息接收人
   taskDetailData: [],//任务详情
   mode:'daily',// 选人组件环境模式，默认值daily
  }
 }
/**
 * 获取当前选中row的信息
 * @param {Array} selectedList 选中行信息
 * @param {Object} record 选中行信息
 * @param {Number} index 选中行行数
 * @param {Array} newData 选中行信息
 */
getSelectedDataForTimerules = (selectedList, record, index, newData) => {
  console.log(selectedList, record, index, newData)
}
/**
* 新增定时规则点击确定后的回调
* @param {Object} value 新增定时规则数据
*/
tasktimeCallback = (value) => {
  console.log(value)
}
/**
* 删除定时规则
* @param {String} oper 默认值为 'delete'
* @param {Number} index 删除行索引
*/
onDeleteTimeRules = (oper, index) => {
  console.log(oper, index)
}
/**
* 编辑定时规则
* @param {String} oper 默认值为 'edit'
* @param {Object} data 编辑行数据
* @param {Number} index 编辑行索引
*/
onEditTimerules = (oper, data, index) => {
  console.log(oper, data, index)
}
/**
* 选人组件:消息设置-设置-确定后的回调函数，获取消息接收人
* @param {Number} sendflag 发送时机 0-都不发送 1-失败发送 2-成功失败都发送
* @param {Array} taskUserList 消息设置选中行信息
*/
taskuserListCallback = (sendflag, taskUserList) => {
  console.log(sendflag, taskUserList)
}
/**
* 选人组件:获取消息设置后的所有状态信息
* @param {Object} TaskUserState 消息设置点击确定后所有state信息
*/
getTaskUserState = (TaskUserState) => {
  console.log(TaskUserState)
}
/**
* 选人组件：删除接收人
* @param {Object} record 选中行信息
* @param {Number} index 选中行行数
*/
deleteUserSelected = (record, index) => {
  console.log(record, index)
}
/**
  * 任务名称输入框 onChange 函数
  * @param {String} taskNameValue 任务名称
  * @param {Object} taskNameList  多语言任务名称
  */
handleInputChange = (taskNameValue,taskNameList) => {
    console.log(taskNameValue,taskNameList)
}
 /**
  * 任务名称点击确定后的回调函数
  * @param {Object} taskNameList 多语言任务名称
  */
handleOnOk = (taskNameList) => {
   console.log(taskNameList)
}
render () {
  const {
    taskDetailDataTaskTime,
    tableDataForTaskway,
    rulesForTasktimeTips,
    userlistAllData,
    taskUserList,
    taskNameList,
    taskDetailData,
    timezone,
    sendflag,
    mode,
    timezonePK } = this.state
  return (
    <WarningComponent
      className={'demo'}
      taskDetailDataTaskTime={taskDetailDataTaskTime}
      taskUserList={taskUserList}
      taskNameList={taskNameList}
      sendflag={sendflag}
      rulesForTasktimeTips={rulesForTasktimeTips}
      tableDataForTaskway={tableDataForTaskway}
      userlistAllData={userlistAllData}
      taskDetailData={taskDetailData}
      timezone={timezone}
      timezonePK={timezonePK}
	  mode={mode}
      getSelectedDataForTimerules={this.getSelectedDataForTimerules}
      tasktimeCallback={this.tasktimeCallback}
      onDeleteTimeRules={this.onDeleteTimeRules}
      onEditTimerules={this.onEditTimerules}
      taskuserListCallback={this.taskuserListCallback}
      getTaskUserState={this.getTaskUserState}
      deleteUserSelected={this.deleteUserSelected}
      handleInputChange={this.handleInputChange}
      handleOnOk={this.handleOnOk}
    />)
}
}
export default App;

3.本地 mock 选人组件数据

方法1：修改 request 请求头，远程 Mock 数据

• 设置 credentials 为 omit (默认为inclue)，允许跨域；

option = {
    method: 'GET',
    // *GET, POST, PUT, DELETE, etc.
    cache: 'default',
    // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'omit',
    // include, same-origin, *omit
    headers: {
      'content-type': 'application/json',
      'withCredentials': true,
      // 'Access-Control-Allow-Origin':'*'
    },
    mode: 'cors' // no-cors, cors, *same-origin
  };

• 修改远程接口地址（已在远程设置好该接口）

// 修改 node_modules/ac-selector/build/Selector.js 下的接口路径
this.setState({
  // prefixUrl: 'https://u8cmsg-daily.yyuap.com/message-platform-web'
  prefixUrl:'https://mock.yonyoucloud.com/mock/11030/message-platform-web'
});

方法2：EasyMock-Mock Server 插件本地 Mock 数据

• vscode 下载插件 EasyMock - Mock server

• 按 F1(or Fn+F1)，run easymock,启动 EasyMock ,本地创建 mock/example.js文件；

/message-platform-web/user/staff/search

• example.js 创建本地访问的 api 接口 和 response 的数据；

• 本地访问 api 接口测试数据，可以加上参数

  // 修改 node_modules/ac-selector/build/Selector.js 下的接口路径
  this.setState({
   // prefixUrl: 'https://u8cmsg-daily.yyuap.com/message-platform-web'
   prefixUrl:'http://127.0.0.1:9999/message-platform-web'
  });

三、参数说明

备注：多语访问在url 后拼接对应 locale 值即可 ，例如 url/?locale=zh_CN , zh_TW, en_US；

mode 提供了选人组件针对不同环境的 url 配置，不同的 mode 值对应不同环境的请求，默认值为daily, 专属化环境需要配置全局前端上下文 window.$$msdomain，目前提供的 mode 值有 'dev' ， 'daily' ， 'pre' ， 'diwork' ， 'diwork-prod' ， 'iterate' ， 'premises' 。

switch (mode) {
case 'dev':
  this.setState({
    prefixUrl: 'http://iuap-message-platform-web.test.app.yyuap.com/message-platform-web'
  });
  break;
case 'daily':
  this.setState({
    prefixUrl: 'https://u8cmsg-daily.yyuap.com/message-platform-web'
  });
  break;
case 'pre':
  this.setState({
    prefixUrl: 'https://msg-y3me-pre.diwork.com/message-platform-web'
  });
  break;
case 'diwork':
  this.setState({
    prefixUrl: 'https://msg-y3me-daily.yyuap.com/message-platform-web'
  });
  break;
case 'diwork-prod':
  this.setState({
    prefixUrl: 'https://message-yonsuite.diwork.com/message-platform-web'
  });
  break;
case 'iterate':
  this.setState({
    prefixUrl: 'http://iuap-message-platform-web.iteration.app.yyuap.com/message-platform-web'
  });
  break;
case 'premises':
  this.setState({
    prefixUrl: window.$$msdomain + '/message-platform-web'
  });
  break;
default:
  this.setState({
    prefixUrl: 'https://u8cmsg-daily.yyuap.com/message-platform-web'
  });
  break;
}
} // 进入modal首先加载用户列表

提供的函数：

/**
 * 01.获取当前选中row的信息
 * @param {Array} selectedList 选中行信息
 * @param {Object} record 选中行信息
 * @param {Number} index 选中行行数
 * @param {Array} newData 选中行信息
 */
getSelectedDataForTimerules = (selectedList, record, index, newData) => {
    console.log(selectedList, record, index, newData)
}
/**
* 02.新增定时规则点击确定后的回调
* @param {Object} value 新增定时规则数据
*/
tasktimeCallback = (value) => {
console.log(value)
}
/**
* 03.删除定时规则
* @param {String} oper 默认值为 'delete'
* @param {Number} index 删除行索引
*/
onDeleteTimeRules = (oper, index) => {
    console.log(oper, index)
}
/**
* 04.编辑定时规则
* @param {String} oper 默认值为 'edit'
* @param {Object} data 编辑行数据
* @param {Number} index 编辑行索引
*/
onEditTimerules = (oper, data, index) => {
    console.log(oper, data, index)
}

/**
*05. 选人组件:消息设置-设置-确定后的回调函数，获取消息接收人
* @param {Number} sendflag 发送时机 0-都不发送 1-失败发送 2-成功失败都发送
* @param {Array} taskUserList 消息设置选中行信息
*/
taskuserListCallback = (sendflag, taskUserList) => {
    console.log(sendflag, taskUserList)
}

/**
* 06.选人组件:获取消息设置后的所有状态信息
* @param {Object} TaskUserState 消息设置点击确定后所有state信息
*/
getTaskUserState = (TaskUserState) => {
    console.log(TaskUserState)
}
/**
* 07.选人组件：删除接收人
* @param {Object} record 选中行信息
* @param {Number} index 选中行行数
*/
deleteUserSelected = (record, index) => {
    console.log(record, index)
}
/**
  * 08.任务名称输入框 onChange 函数
  * @param {String} taskNameValue 任务名称
  * @param {Object} taskNameList  多语言任务名称
  */
handleInputChange = (taskNameValue,taskNameList) => {
    console.log(taskNameValue,taskNameList)
}
 /**
  *  09.任务名称点击确定后的回调函数
  * @param {Object} taskNameList 多语言任务名称
  */
handleOnOk = (taskNameList) => {
   console.log(taskNameList)
}

四、数据格式

1、定时规则默认数据

//定时规则默认值
timeDataDefault: {
    starttime: null,            //开始时间
    endtime: null,              //结束时间
    modetype: 0,                //执行周期 天0/周1/月2/季3/年4
    modevaule: '1',             //周1-7/月1-31/天''；选中周一、周二，传值为1;2;月传值为：10；季度1:10/1:l(later);年04-19
    weekValue: '1',             //每周存值
    monthValue: '1',            //每月存值
    monthDayType: '0',          //每月指定0，最后一天1
    quarterType: '1',           //季度存值1,2,3,4
    quarterDayType: '0',        //季度指定指定0，最后一天1
    quarterDayValue: '1',       //每季度指定第几天存值
    yearDayValue: '',           //每年日期存值
    duramode: 0,                //执行方式 一次0/1
    duravalue: '08:00',         //执行方式值
    onceduraValue: '08:00',     //执行一次时间临时存值
    cycleduraValue: '5',        //周期执行间隔临时存值
    periodmode: 1,              //单位 0小时/1分钟
    periodstart: '08:00',       //周期执行每天开始时间
    periodend: '17:00',         //周期执行每天结束时间
  }

2.选人组件返回数据

//Get请求接口: https://u8cmsg-daily.yyuap.com/message-platform-web/user/staff/search
{
    "status": 1,
    "data": {
      "totalPages": 1,
      "currentPage": 1,
      "pageSize": 10,
      "values": [
        {
          "userid": "9e06e79f-c2bb-4e36-8e93-7d02e6127551",
          "username": "kjnm2",
          "mobile": "15533366222",
          "email": ""
        },
        {
          "userid": "201a2fa2-c0a6-45c4-93d9-54dfd4e6650a",
          "username": "kjnm1",
          "mobile": "15533366221",
          "email": ""
        },
        {
          "userid": "19757d5a-84f1-48b6-8498-363529c5cb4d",
          "username": "aasaa",
          "mobile": "15533344772",
          "email": ""
        },
        {
          "userid": "1c6886c8-f6f4-49ad-893f-2c498f775d74",
          "username": "19903488888",
          "mobile": "19903488888",
          "email": ""
        }
      ]
    }
}

五、界面截图

1、定时规则

2、消息配置

六、待完善

• 集成组件涉及到的时区接口待完善
• 集成组件的参数配置还待完善
• 消息配置-消息接收人接口待完善
• 组件目前体积太大，需要缩减体积
• 支持本地和远程Mock数据，完善 demo
• 精简脚手架 dependencies 依赖包
• 提供可配置的 url ，解决选人组件不同环境的请求

七、版本说明

• 1.0.0 调度任务定时与消息配置集成组件
• 1.0.1 更新 readme.md 图片显示
• 1.0.2 更新package.json 依赖配置项
• 1.0.2-beta 更新package.json 依赖配置项
• 1.0.3-alpha 添加配置参数及函数，去掉 tinper.css
• 1.0.3-beta 修改readme.md 图片 URL
• 1.0.3-snapshot 精简 js 和 css 代码
• 1.0.4-alpha 本地mock消息设置返回数据，优化消息设置代码
• 1.0.4-beta 缩减 main.js 产出的体积；
• 1.0.4-snapshot 删减 main.css 中的全局样式
• 1.0.4 去掉外层包裹的 container div;
• 1.0.5-alpha 修改产出机制，缩减 dist 目录文件大小
• 1.0.5-beta 增加消息设置相关的函数，以及本地 mock 数据方法
• 1.0.5-snapshot 修复外部函数传参问题
• 1.0.5 默认时区显示、取消行内编辑和删除按钮的默认事件和冒泡
• 1.0.6 处理 ac-lang-cn 依赖包 npm install 安装报错问题
• 1.0.7 处理 ac-format 依赖包 npm install 安装报错问题
• 1.0.8 修改时区显示格式和默认开始之间不为 null
• 1.0.9 支持定时规则批量删除、更新选人组件 Mock 数据
• 1.1.0 增加 demo 地址、支持远程 Mock 选人组件数据
• 1.1.1 修改 demo 访问地址，完善选人组件数据
• 1.1.2 升级选人组件至2.2.35, 提供可配置的 mode ，请求不同环境的 url
• 1.1.3 增加任务名称多语言输入框，集成多语资源；
• 1.1.4 增加外部传入的taskDetailDataTaskTime,taskUserList, taskNameList
• 1.1.5 增加外部初入的发送时机参数 sendflag
• 1.1.6 修复弹出模态框时发送时机参数 sendflag 参数未生效
• 1.1.7 新增定时规则后，默认选中该定时规则
• 1.1.8 修复依赖 @mdf/baseui @mdf/metaui-web 版本
• 1.1.9 锁定 @mdf/baseui @mdf/metaui-web 版本
• 1.1.10 优化多语资源针对mdf进行打包产出
• 1.1.11 修复发送时机sendflag bug
• 1.1.12 组件兼容 mdf，样式隔离
• 1.1.13 选人组件版本升级至2.2.44

八、关键词

调度任务 定时规则 消息配置 定时选择