开发者社区> 镜像站> NPM> warning-component
warning-component
warning-component
Last updated 2 months ago by jerrychane .
Original npm · Tarball · package.json
$ cnpm install warning-component 
SYNC missed versions from official npm registry.

一、组件说明

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

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

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

二、安装与使用

1、安装
npm i -S warning-component@1.1.8

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

 "@mdf/baseui": "^2.5.18",
"@mdf/inputmultilang": "^1.1.42-lang",
"@mdf/metaui-web": "^2.9.168",
"ac-lang-cn": "^1.0.8",
2、使用
import React, { Component } from 'react';
import WarningComponent from 'warning-component';
import 'warning-component/dist/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'
});

三、参数说明

参数 类型 说明 示例值 必需
timezone String 时区格式 'UTC+08:00'
timezonePK String 时区pk 'cc4ee641-7d33-4133-8857-30468220cde8'
mode String 选人组件类型 'daily','dev','pre','diwork' ...
token String token ''
serviceCode String serviceCode 'warning_service_u8c'
className String 组件最外层包裹class 'demo'
taskDetailDataTaskTime Array 任务定时规则 [{ "starttime":1600053851991, "endtime":1600313064000, "modetype":4, "modefrequency":1, "modevaule":"04-11", "duramode":0, "duravalue":"08:00", "periodmode":"0", "periodstart":"",
"periodend":"", "timezoneCode":"cc4ee641-7d33-4133-8857-30468220cde8", "timezone":"UTC+08:00",
"key":0 }]
tableDataForTaskway Object 任务定时规则 ...
rulesForTasktimeTips String 必填提示语 ...
userlistAllData Array 所有消息接收人 ...
taskUserList Array 当前已选消息接收人 [{"uname":"阿斯顿23","ucode":"未知邮箱","key":0,"userid":"0678157a-1f89-4612-95c1-173ab25ada00"}]
taskNameList Array 任务名称 {"zh_CN": "张三", "en_US": "zhang", "zh_TW": "張三"}
sendflag Number 发送时机 ...
TaskUserState Object 消息设置所有state信息 ...
locale String 多语言 zh_CN , zh_TW, en_US

备注:多语访问在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、消息配置

消息配置

六、待完善

  • [x] 集成组件涉及到的时区接口待完善
  • [x] 集成组件的参数配置还待完善
  • [x] 消息配置-消息接收人接口待完善
  • [x] 组件目前体积太大,需要缩减体积
  • [x] 支持本地和远程Mock数据,完善 demo
  • [ ] 精简脚手架 dependencies 依赖包
  • [x] 提供可配置的 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 版本

八、关键词

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

Current Tags

  • 1.1.8                                ...           latest (2 months ago)

29 Versions

  • 1.1.8                                ...           2 months ago
  • 1.1.7                                ...           2 months ago
  • 1.1.6                                ...           3 months ago
  • 1.1.5                                ...           3 months ago
  • 1.1.4                                ...           3 months ago
  • 1.1.3                                ...           4 months ago
  • 1.1.2                                ...           4 months ago
  • 1.1.1                                ...           4 months ago
  • 1.1.0                                ...           4 months ago
  • 1.0.9                                ...           4 months ago
  • 1.0.8                                ...           5 months ago
  • 1.0.7                                ...           5 months ago
  • 1.0.6                                ...           5 months ago
  • 1.0.5                                ...           5 months ago
  • 1.0.5-snapshot                                ...           5 months ago
  • 1.0.5-beta                                ...           5 months ago
  • 1.0.5-alpha                                ...           5 months ago
  • 1.0.4                                ...           5 months ago
  • 1.0.4-snapshot                                ...           5 months ago
  • 1.0.4-beta                                ...           5 months ago
  • 1.0.4-alpha                                ...           5 months ago
  • 1.0.3-snapshot                                ...           5 months ago
  • 1.0.3-beta                                ...           5 months ago
  • 1.0.3-alpha                                ...           5 months ago
  • 1.0.2-beta                                ...           5 months ago
  • 1.0.2                                ...           5 months ago
  • 1.0.1-beta                                ...           5 months ago
  • 1.0.1                                ...           5 months ago
  • 1.0.0                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (51)
Dev Dependencies (60)
Dependents (0)
None