content.json

{"meta":{"title":"puhui-componets","subtitle":null,"description":null,"author":"tangj","url":"princessJoanna.github.io.git","root":"/"},"pages":[{"title":"计划","date":"2019-07-08T06:09:17.000Z","updated":"2019-07-08T06:49:01.411Z","comments":true,"path":"plan.html","permalink":"princessJoanna.github.io.git/plan.html","excerpt":"","text":"1、云scm业务代码优化，精简之前的业务逻辑2、搭建前端私有NPM库，独立维护前端组件库，提高组件可读性和扩展性，编写组件使用文档3、云批注架构代码优化和重构，用taro组件重构（好处，taro基于react的框架，统一技术架构，taro框架可以跨平台，通过工具可以在各种平台使用）"}],"posts":[{"title":"TabsEdit","slug":"tags/TabsEdit","date":"2019-07-19T06:09:17.000Z","updated":"2019-07-19T06:43:49.558Z","comments":true,"path":"2019/07/19/tags/TabsEdit/","link":"","permalink":"princessJoanna.github.io.git/2019/07/19/tags/TabsEdit/","excerpt":"","text":"该组件是点击新开tab的列表页面组件，多用于单据类页面（销售订单，采购订单…） ```import React, { Component } from ‘react’import { Form} from ‘antd’import BtnGroup from ‘@/components/BtnGroup’import TabsEdit from ‘@/components/TabsEdit’import SearchForm from ‘./SearchForm’;import AdvancedSearch from ‘@/components/AdvancedSearch’class Orders extends Component { static title = ‘订单’; constructor(props) { super(props) this.state = { } this.columns = [ { title: ‘序号’, dataIndex: ‘index’, editable: true, width:60, fixed: ‘left’, }… ] } // 组件挂载后 componentDidMount() { } urls = { update: ‘/api/com/scm/updateSaleOrder’, delete: ‘/api/com/scm/deleteSaleOrder’, query: ‘/api/com/scm/querySaleOrder’, fuzzyQuery: ‘/api/com/scm/querySaleOrder’, } render() { return <AdvancedSearch form={this.props.form} quickQuery={(values) => { this.tableRef.fuzzyQuery({billNo:values.fuzzyName,pageNum: 1}) }} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} advancedQuery={(values) => { this.tableRef.query(values) }} > <BtnGroup btnList={[‘add’, ‘del’, ‘allDel’]} addCallback={() => { this.tableRef.add() }} allDelCallback={() => { this.tableRef.allDelete() }} delCallback={() => { this.tableRef.delete() }} > <TabsEdit urls={this.urls} //请求接口参数 columns={this.columns} // 自定义接口参数 wrappedComponentRef={(tableRef) => this.tableRef = tableRef} parentPage={{ parentName:'SaleOrder', //当前页面的code title:'销售订单', //当前页面的标题 pageName:'SaleOrderDetails'，//新开页面，详情页面的code pageTitleKey:'billNo', //如果订单编号需要调取接口，需要定义订单编号的key }} /> </div> }}// eslint-disable-next-line no-class-assignOrders = Form.create()(Orders)export default Orders```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"SpecialSelect","slug":"tags/SpecialSelect","date":"2019-07-19T06:09:17.000Z","updated":"2019-07-19T07:11:53.588Z","comments":true,"path":"2019/07/19/tags/SpecialSelect/","link":"","permalink":"princessJoanna.github.io.git/2019/07/19/tags/SpecialSelect/","excerpt":"","text":"该组件是自定义选择组件功能等同于Select ``` import SpecialSelect from '@/components/SpecialSelect' <SpecialSelect initValue={{initData:Molds,selectKey:'molds',initLabel:'模具'}} key='molds' form={this.props.form} />```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"Order","slug":"tags/Order","date":"2019-07-19T06:09:17.000Z","updated":"2019-07-19T07:08:14.240Z","comments":true,"path":"2019/07/19/tags/Order/","link":"","permalink":"princessJoanna.github.io.git/2019/07/19/tags/Order/","excerpt":"","text":"该组件是点击新开tab的列表详情页面，多用于单据类页面（销售订单，采购订单…） ```import Order from ‘@/components/TabsEdit/Order’import TableHead form ‘./TableHead’ <Order urls={this.urls} columns={this.columns} TableHead={TableHead} // 详情页面表头组件 wrappedComponentRef={(tableRef) => this.tableRef = tableRef} />```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"AdvanceDSearch","slug":"tags/AdvanceDeSearch","date":"2019-07-08T06:09:17.000Z","updated":"2019-07-19T05:45:10.953Z","comments":true,"path":"2019/07/08/tags/AdvanceDeSearch/","link":"","permalink":"princessJoanna.github.io.git/2019/07/08/tags/AdvanceDeSearch/","excerpt":"","text":"使用场景，列表页面带查询的表头，（人员、销售订单、销售发货单、采购订单等搜索模块）/** 高级搜索组件 */“` javascriptimport AdvancedSearch from ‘@/components/AdvancedSearch’ <AdvancedSearch form={this.props.form} quickQuery={(values) => { this.tableRef.fuzzyQuery(values) }} advancedQuery={(values) =>{ this.tableRef.query(values) }} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelAlign="right" > <!--按钮组，可选--> <BtnGroup addCallback={() => { this.tableRef.add() }} delCallback={() => { this.tableRef.delete() }} allDelCallback={() => { this.tableRef.allDelete() }} /> <!--按钮组，可选--> <!--自定义搜索内容，页面传入--> { advancedSearchContent(this.props) } <!--自定义搜索内容，页面传入--> </AdvancedSearch>“`","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"DrawerEditable","slug":"tags/DrawerEditable","date":"2019-07-08T06:09:17.000Z","updated":"2019-07-19T05:45:09.656Z","comments":true,"path":"2019/07/08/tags/DrawerEditable/","link":"","permalink":"princessJoanna.github.io.git/2019/07/08/tags/DrawerEditable/","excerpt":"","text":"改组件使用场景，是带表身的订单的整单编辑，点击当前单元格可以编辑，失去焦点只读，记录每一行的新增，删除或者修改属性，行号有业务规则，数据库里有的行号不能编辑，行号不能重复。使用该组件的模块有检验项目右侧抽屉表身销售订单详情表身 import DrawerEditable from '@/components/Editable/DrawerEditable' <DrawerEditable readonly={readonly.readOnly} //只读属性 dataSource={datalist} //列表数据源 drawerListChange={(data) => { // 表格数据改变回调函数 }} scroll={{x: 1000}} //超过多上滚动 columns={columns} // 列名 /> ```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"Editable","slug":"tags/Editable","date":"2019-07-08T06:09:17.000Z","updated":"2019-07-19T05:45:09.657Z","comments":true,"path":"2019/07/08/tags/Editable/","link":"","permalink":"princessJoanna.github.io.git/2019/07/08/tags/Editable/","excerpt":"","text":"该组件是所有基础表格的组件，交互有当前表格的行编辑，右侧抽屉交互的页面当前行编辑 右侧抽屉编辑 基础表格组件，当前整行编辑 /** * 客户类别 **/ import React, { Component } from 'react' import BtnGroup from '@/components/BtnGroup' // 按钮组 import Editable from '@/components/Editable' // 基础表格组件 class CustomeType extends Component { static title = '客户类别' constructor(props) { super(props) this.state = { } } // 当前页面自定义列属性 columns = [{ title: '序号', dataIndex: 'index', width: '80px', }, { title: '客户类别编码', dataIndex: 'customerTypeCode', editable: true, width: '300px', maxLength: 16, }, { title: '客户类别名称', dataIndex: 'customerTypeName', editable: true, maxLength: 32, }] // 接口定义，新增，修改，删除，查询和复制的key，必须是insert,update,delete,query,copy urls = { insert: '/api/com/scm/insertComCustomerType', update: '/api/com/scm/updateComCustomerType', delete: '/api/com/scm/deleteComCustomerType', query: '/api/com/scm/queryComCustomerType', copy: '/api/com/scm/copyUnitGroup', } render() { return ( <div> <BtnGroup addCallback={() => { this.tableRef.add() }} allDelCallback={() => { this.tableRef.allDelete() }} delCallback={() => { this.tableRef.delete() }} ></BtnGroup> <Editable columns={this.columns} showPagination={false} urls={this.urls} wrappedComponentRef={(tableRef) => this.tableRef = tableRef} /> </div> ) } } export default CustomeType 右侧抽屉交互类型的页面，Editable组件引入方式一样，例外需要传入自定义的抽屉组件 /** * 人员 **/ import React, { Component } from 'react' import { Form } from 'antd' import BtnGroup from '@/components/BtnGroup' // 按钮组 import Editable from '@/components/Editable' //基础表格组件 import Edit from './Edit'; // 自定义抽屉组件 import SearchForm from './SearchForm'; //自定义搜索框 import AdvancedSearch from '@/components/AdvancedSearch' //高级组件公共属性 class Custome extends Component { static title = '人员'; constructor(props) { super(props) this.state = { } this.columns = [ { title: '序号', dataIndex: 'index', editable: true, width:60, fixed: 'left', }, { title: "人员编号", dataIndex: "personCode", editable: true, }, { title: "人员名称", dataIndex: "personName", editable: true, }, { title: "部门编码", dataIndex: "bm_number", editable: true, }, { title: "部门", dataIndex: "deptCode", editable: true, }, { title: "产线卡号", dataIndex: "cardNo", editable: true, }, { title: "身份证", dataIndex: "identityCard", editable: true, }, { title: "电话", dataIndex: "phoneNo", editable: true, }, { title: "初始密码", dataIndex: "password", editable: true, }, { title: "邮箱", dataIndex: "email", editable: true, }, { title: "住址", dataIndex: "homeAddress", editable: true, } ] } // 组件挂载后 componentDidMount() { } urls = { insert: '/api/com/scmPerson/insertScmPerson', update: '/api/com/scmPerson/updateScmPerson', delete: '/api/com/scmPerson/deleteScmPerson', query: '/api/com/scmPerson/queryScmPerson', copy: '/api/com/scmPerson/copyScmPerson', fuzzyQuery: '/api/com/scmPerson/fuzzyScmPerson', } search(values) { this.tableRef.query(values) } // 抽屉传入方法 drawerContent = (props, params = {},editType) => { return ( <Edit params={params} {...props} editType={editType} /> ) } render() { return <div> <AdvancedSearch form={this.props.form} quickQuery={(values) => { this.tableRef.fuzzyQuery(values) }} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} advancedQuery={(values) => { this.tableRef.query(values) }} > <BtnGroup addCallback={() => { this.tableRef.add() }} allDelCallback={() => { this.tableRef.allDelete() }} delCallback={() => { this.tableRef.delete() }} > </BtnGroup> <SearchForm form={this.props.form} /> </AdvancedSearch> <Editable columns={this.columns} drawerContent={this.drawerContent} drawerTtile="人员详情" operation={{ fixed: 'right' }} scroll={{ x: 2000 }} urls={this.urls} wrappedComponentRef={(tableRef) => this.tableRef = tableRef} /> </div> } } // eslint-disable-next-line no-class-assign Custome = Form.create()(Custome) export default Custome ```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"FuzzySelect","slug":"tags/FuzzySelect","date":"2019-07-08T06:09:17.000Z","updated":"2019-07-19T06:03:49.701Z","comments":true,"path":"2019/07/08/tags/FuzzySelect/","link":"","permalink":"princessJoanna.github.io.git/2019/07/08/tags/FuzzySelect/","excerpt":"","text":"该组件是下拉模糊匹配组件 ``` import FuzzySelect from ‘@/components/FuzzySelect’ <FuzzySelect labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} initValues={{ //初始值选项，可选 idValue: queryDetails.deptId, //初始化传入值Id codeValue: queryDetails.deptCode, //初始化传入值Code nameValue: queryDetails.deptName //初始化传入Name }} rules={[{ //校验，可选 required: true, message: '请输选择部门' }]} {...readonly} // 是否可编辑，可选 aliasMaps={{ idAlias: 'deptId', codeAlias: 'deptCode', nameAlias: 'deptName' }} // 对应的key，必传 form={this.props.form} label="部门名称" url="/api/com/scmDept/fuzzyScmDept" // 模糊匹配的接口必传 />```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"怎么使用hexo，github搭建个人博客","slug":"hexoAndGithub","date":"2017-07-08T06:09:17.000Z","updated":"2019-07-19T06:01:45.383Z","comments":true,"path":"2017/07/08/hexoAndGithub/","link":"","permalink":"princessJoanna.github.io.git/2017/07/08/hexoAndGithub/","excerpt":"","text":"1、安装Nodejs npm 2、安装hexonpm install hexo-cli -g 3、 初始化、安装依赖hexo init folder(文件夹)cd folder（文件夹）npm install 4、修改主题hexo主题选择可以参考地址 https://www.zhihu.com/question/24422335选择你喜欢的主题克隆到themes文件下面修改_config.yml 将theme: 换成你克隆下来的主题文件名 5、github新建工程工程名必须为 githupname.github.io 的格式 6、配置_config.yml将配置文件修改成如下格式title: 点滴author: Joannadeploy:type: gitrepository: https://github.com/princessJoanna/princessJoanna.github.io.gitbranch: master（注意：deploy: 后面要有空格） 7、生成静态页面hexo generate 8、本地启动启动本地服务，进行文章预览调试，命令：hexo server 浏览器输入http://localhost:4000 9、然后执行命令：hexo deploy然后再浏览器中输入http://princessJoanna.github.io/就行了","categories":[],"tags":[]},{"title":"RangePicker","slug":"tags/RangePicker","date":"2017-07-08T06:09:17.000Z","updated":"2019-07-19T06:14:49.164Z","comments":true,"path":"2017/07/08/tags/RangePicker/","link":"","permalink":"princessJoanna.github.io.git/2017/07/08/tags/RangePicker/","excerpt":"","text":"使用场景，开始时间和结束时间，显示时，转化成时间格式，保存后转化成字符串格式。判断开始时间不能大于结束时间 ```import RangePicker from ‘@/components/RangePicker’ <RangePicker defaultValues={{ startValue: queryDetails.entryDate, startKey: 'entryDate', endValue: queryDetails.dimissionDate, endKey: 'dimissionDate', placeholderStart: '入职时间', placeholderEnd: '离职时间', width:'100%' }} {...readonly} form={this.props.form} />```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"BtnGroup","slug":"tags/BtnGroup","date":"2017-07-08T06:09:17.000Z","updated":"2019-07-19T06:23:30.414Z","comments":true,"path":"2017/07/08/tags/BtnGroup/","link":"","permalink":"princessJoanna.github.io.git/2017/07/08/tags/BtnGroup/","excerpt":"","text":"表格页面列表按钮组件 ```import BtnGroup from ‘@/components/BtnGroup’ <BtnGroup addCallback={() => { //回调 }} allDelCallback={() => { }} delCallback={() => { }} > </BtnGroup>```script","categories":[],"tags":[{"name":"组件","slug":"组件","permalink":"princessJoanna.github.io.git/tags/组件/"}]},{"title":"h5video","slug":"H5Video","date":"2017-07-08T06:09:17.000Z","updated":"2019-07-19T06:01:45.383Z","comments":true,"path":"2017/07/08/H5Video/","link":"","permalink":"princessJoanna.github.io.git/2017/07/08/H5Video/","excerpt":"","text":"临近放假遇到一个活动页面，需求简洁明确：1、视频播放 2、播放到某时间出现按钮点击点转 貌似很简单的功能，用的h5的video，很快做完了。就是，发布到测试，自己手机上测完没毛病。 然后在微信中，发现被禁止自动播放，于是乎加了一段微信的代码、、、sctriptdocument.addEventListener(“WeixinJSBridgeReady”, function onBridgeReady() { myPlayer.play();}、、、在自己手机上测试看起来很好的样子，播放到某一进度，加个浮层，点击跳转页面. 然而，在安卓机上，却有两个顽固不化的问题。第一，自动播放被禁止第二，点击播放后安卓手机视频自动全屏了。也就是浮层没有办法盖在视频上面。 网上看了很多人遇到同类的问题，但是并没有看到比较好的解决方案。折腾了很久，又请教了比较资深的大牛，说是这个功能实现不了。但是东西要交付，只能硬着头皮做。因为需要比较急，然后我决定不用视频，用动画来做视频效果，做了一个简单的demo，发现累的够呛，毕竟视频时间比较长。然后又采用了帧动画，简单来说就是用定时器切换图片。再加音频，这个时候又遇到音频不能自动播放的问题…于是又加了一段代码```javascriptfunction audioAutoPlay(id) { audio = document.getElementById(id), play = function () { audio.play(); document.removeEventListener("touchstart", play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { play(); }, false); document.addEventListener("touchstart", play, false);}```javascript 音频的问题解决了，但是又发现掉帧的问题，想了下应该是图片加载需要时间，然后所以导致图片没加载出来已经切换到下一帧，所以出现掉帧。于是加了一段图片预加载的代码javascriptjavascriptfunction getImg() {var arr = [];for (var i = 0; i < 2334; i++) {var img = ‘http://…..’ + i + ‘.jpg’;arr.push(img);}return arr}function preloadImg(srcArr) {if (srcArr instanceof Array) {for (var i = 1; i < srcArr.length; i++) {var oImg = new Image();oImg.src = srcArr[i];} }}```javascript看起来好像已经解决了掉帧的问题，拿自己的手机测试下，貌似没有问题。然后拿安卓机一看，居然会出现卡顿，甚至跳到某一帧卡住不动。时而好时而卡…突然间有点绝望…经历了N多次修改，最后还是改回了用video,最终解决了安卓机自动全屏不能放按钮问题，就是增加了两个属性 x5-video-player-type=”h5” x5-video-player-fullscreen=”true” ,要去掉IOS自带的进度条，还要加属性 webkit-playsinline=”true” playsinline=”true” ,但是增加了属性之后，安卓机上面的控制菜单样式靠近头部，按钮又很小，体验很不好，此时加了一个自定义按钮，设置了样式。将控制菜单隐藏","categories":[],"tags":[]}]}