Webkf-core-global NPM

介绍

项目为Web项目资源池，基础开发框架为Vue2.X

更新到指定版本

npm install webkf-core-global@X.X.X

更新日志

1.4.3 增加$Filerequest
1.4.2 增加报错维护信息及功能调整
1.3.7 与主壳交互
1.3.6 打印预览维护说明
1.2.7 混入基类维护说明
1.2.6 表格是否分页为必填项
1.2.5 表格滚动条置底
1.2.2 增加全局按钮样式统一
1.1.9 增加自定义指令模块，增加dialog拖拽
1.1.8 无分页表格，表格重新渲染
1.1.7 行内修改
1.1.6 增加true，false 显示状态
1.1.5 增加单机回调，自定义列回调，表格默认全高度
1.1.4 表格使用demo
1.1.3 混入基类
1.1.2 增加充满样式
1.1.1 增加自适应flex、增加moment 时间格式化
1.1.0 安装使用-测试版

1.4.3 与主壳交互

增加$Filerequest

#在api/index中增加
export const fileRequest = Plugin.$Filerequest

export default {
  fileRequest
}

# 使用时
import { BaseUrl, fileRequest } from '../index'

export function test(data) {
  return fileRequest({
    url: baseUrl + '/test',
    method: 'post',
    data
  })
}

1.3.7 与主壳交互

增加报错维护信息及功能调整

子页面 如果提示403 或 401 将会回到登录页（开发模式不受影响，正式环境生效）  
如果服务器端发布，将会提示服务正在升级

1.3.9 与主壳交互

与主壳交互

# 先在main.js 中加入bus引用
Vue.prototype.$Bus = Plugin.$Bus
# 页面交互
// 传递数据例子
  const message = {
        bus: 'xhzq',
        type: 'Return',
        funName: 'GetRouter',
        result: { a: 1 }
      }
  # type 说明
  Return 返回带参数
  method 直接调用方法，不带参数
  
  created() {
    const _this = this
    this.$Bus.$on('postMessage', message => {
      if (message.type === 'Return') {
        _this[message.funName](message.result)
      } else if (message.type === 'method') {
       _this[message.funName]()
      }
    })
  },
  beforeDestroy() {
    this.$Bus.$off('postMessage')
  },
  methods: {
    // 获取当前页面全部配置
    GetRouter(data) {
      console.log(data)
    },
    GetRouter() {
        console.log('进入方法')
    },
    // 向主壳发送请求
    sendMessage() {
          const message = {
            bus: 'xhzq',
            type: 'method', // 交互类型
            funName: 'OpenLoading' // 调用主壳方法
          }
          this.$_SendMainPostMessage(message, '*')
    }
  }

1.3.6 打印预览维护说明

打印预览维护说明

打印预览使用方式： this.$_printMethod('Viewer', printTd,queryJson)

参数示例：
  queryJson: '{ "experimentNo": "07F3AFFB-534D-4109-B506-55683AFFEBA2" }'  //报表参数（必填）
  testPrintId: 'GZSY' //报表编码（必填）

1.2.6 混入基类维护说明

混入基类维护说明

# 混入基类维护说明
# PagingTableBase: 分页继承
# NoPagingTableBase: 不带分页继承
# PageBase: 所有页面继承

分页使用：     mixinType: ['PagingTableBase', 'PageBase'],
不分页使用：   mixinType: ['NoPagingTableBase' ,'PageBase'],

1.2.6 表格是否分页为必填项

表格是否分页为必填项

# 属性配置
 attributeConfig: {
   pageIndex: 1, // 当前页码
   pageSize: 10, // 单页显示数据（开启分页）
   isLoading: true, // 表格加载效果（菊花图）
   widthDrag: false, // 是否开启列宽拖动,
   showpagin: false // 是否带有分页条
 },

1.2.1增加全局按钮样式统一

按钮使用

# 按钮样式 tool_btn——fun
     <el-button class="tool_btn——fun" icon="el-icon-plus" @click="AddFun">添加</el-button>

1.1.9增加自定义指令模块,增加dialog拖拽

增加dialog拖拽

# 组件上增加
      <el-dialog  v-dialogDrag >
      </el-dialog>

1.1.8无分页表格，表格重新渲染

无分页表格

#列配置
attributeConfig: {
  pageIndex: 1, // 当前页码
  pageSize: 50, // 单页显示数据（开启分页）
  isLoading: true, // 表格加载效果（菊花图）
  widthDrag: false, // 是否开启列宽拖动,
  showpagin: true // 是否带有分页条
},

表格重新渲染

# 组件
  <tableCom
    :tableConfig="tableConfig"
    :attributeConfig="attributeConfig"
    ref="tableCom"
  ></tableCom>
# 方法实例
  resize() {
    this.$refs.tableCom.resizeTable()
  }

1.1.7行内修改

行内修改

#列配置
{
  field: 'userName',
  title: '姓名',
  width: 80,
  isResize: true,
  titleAlign: 'center',
  columnAlign: 'center',
  isEdit: true
}
# 表格回调
  <tableCom
    :tableConfig="tableConfig"
    :attributeConfig="attributeConfig"
    @cellEditDone = "cellEditDone"
  ></tableCom>
# 方法实例
cellEditDone(newValue, oldValue, rowIndex, rowData, field) {
      this.tableConfig.tableData[rowIndex][field] = newValue
    }

1.1.6增加true，false 显示状态

调用组件

#调用组件
 {
  field: 'adminFlag',
  title: '管理员',
  width: 50,
  isResize: true,
  titleAlign: 'center',
  columnAlign: 'center',
 # componentName: 'orNot'
},

1.1.5增加单机回调，自定义列回调，表格默认全高度

增加充满样式

#增加单机回调
@rowclick="EditFun"
 EditFun(rowIndex, rowData, column) {
  console.log(rowIndex, rowData, column)
 },

#自定义列回调
@customCompFunc="customCompFunc"
//params 为对象，里面分别放所需属性
 EditFun(params) {
  console.log(params)
 },

1.1.4 版本说明

主页面

<template>
  <div class="test fullDiv">
    <div class="tool_Row">
      <el-row>
        <el-button icon="el-icon-plus" @click="AddFun"></el-button>
        <el-button icon="el-icon-delete" @click="DeleteFun"></el-button>
      </el-row>
    </div>
    <div class="table_Content">
      <tableCom
        :tableConfig="tableConfig"
        :attributeConfig="attributeConfig"
        :AddClass = "SetCellClass"
        @ChangeTable="getTableData"
        @selectChange="selectChange"
        @dbclick="EditFun"
      ></tableCom>
    </div>
    <el-dialog
      :title="dialogConfig.stateType === 'Add' ? '添加' : '修改'"
      :visible.sync="dialogConfig.Visible"
      width="30%"
      :before-close="handleClose">
      <edit
        :stateType="dialogConfig.stateType"
        :rowData="dialogConfig.rowData"
        @SaveFun="SaveFun"
      ></edit>
    </el-dialog>
  </div>
</template>

<script>
  import api from '../api/SyU/SyUUserInfo'
  import edit from './edit'
  export default {
    mixinType: ['PagingTableBase', 'PageBase'],
    data() {
      return {
        // 单元格样式
        SetCellClass: function(rowIndex, columnName, rowData) {
          if (rowIndex < 5) {
            return 'column-cell-test'
          }
        },
        // 属性配置
        attributeConfig: {
          pageIndex: 1, // 当前页码
          pageSize: 50, // 单页显示数据（开启分页）
          isLoading: true, // 表格加载效果（菊花图）
          widthDrag: false // 是否开启列宽拖动,
        },
        // 表格配置
        tableConfig: {
          tableData: [], // 表格数据集
          columns: [
            {
              width: 60,
              titleAlign: 'center',
              columnAlign: 'center',
              type: 'selection',
              isFrozen: true
            },
            {
              title: '序号',
              width: 50,
              titleAlign: 'center',
              columnAlign: 'center',
              componentName: 'table-sequence',
              titleCellClassName: 'title-cell-test'
            },
            {
              field: 'userId',
              title: '用户id',
              width: 80,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center'
            },
            {
              field: 'userName',
              title: '姓名',
              width: 80,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center'
            },
            {
              field: 'qq',
              title: 'qq',
              width: 80,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center'
            },
            {
              field: 'weiXin',
              title: '微信',
              width: 80,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center'
            },
            {
              field: 'flag',
              title: '有效标志',
              width: 80,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center'
            },
            {
              field: 'createDate',
              title: '创建时间',
              width: 50,
              isResize: true,
              titleAlign: 'center',
              columnAlign: 'center',
              formatter: (rowData, rowIndex, pagingIndex, field) => {
                return this.$_dateFormat(rowData[field], 'YYYY-MM-DD HH:MM:SS')
              }
            }
          ] // 列配置
        },
        // 弹窗配置
        dialogConfig: {
          Visible: false,
          stateType: '',
          rowData: {
            userId: '',
            userName: '',
            qq: '',
            weiXin: '',
            defaultDeptId: 'DL_ZGSGLB',
            UserPassword: 'test'
          }
        }
      }
    },
    components: {
      edit
    },
    methods: {
      // 页面初始化之前（未生成DOM元素）
      PageLoad() {
        this.getTableData()
        this.copyData = this.$_CopyData(this.dialogConfig.rowData)
      },
      // 加载表格数据
      getTableData() {
        this.attributeConfig.isLoading = true
        // 如果有搜索，需要把PageIndex 改为1,
        const query = {
          pageIndex: this.attributeConfig.pageIndex,
          pageSize: this.attributeConfig.pageSize
        }
        api.GetListPageByWhere(query).then(res => {
          this.tableConfig.tableData = res.list
          this.tableConfig.total = res.total
          this.attributeConfig.isLoading = false
        })
      },
      selectChange(selection, rowData) {
        this.selection = selection
      },
      AddFun() {
        this.dialogConfig.rowData = this.$_CopyData(this.copyData)
        this.dialogConfig.Visible = true
        this.dialogConfig.stateType = 'Add'
      },
      EditFun(rowIndex, rowData, column) {
        this.dialogConfig.rowData = this.$_CopyData(rowData)
        this.dialogConfig.Visible = true
        this.dialogConfig.stateType = 'Edit'
      },
      DeleteFun() {
        this.$confirm('确认删除当前选中的数据？')
          .then(_ => {
            this.attributeConfig.isLoading = true
            api.DeleteList(this.selection).then(res => {
              this.$message({
                type: 'success ',
                message: `删除成功`
              })
              this.getTableData()
            })
          })
          .catch(_ => {})
      },
      SaveFun() {
        this.dialogConfig.Visible = false
        this.getTableData()
      }
    }
  }
</script>

<style lang="scss">
  .test {
    .tool_Row {
       height: 4rem;
      line-height: 4rem;
    }
    .table_Content {
      height: calc(100% - 5rem);
      .column-cell-test {
        background-color: #f60;
        color:#fff;
      }
      .title-cell-test {
        background-color: #187;
      }
    }
  }
</style>

修改页面

  <template>
    <div class="fullDiv">
    <el-form label-position="top" label-width="80px" :model="rowData">
      <el-form-item label="用户id">
        <el-input v-model="rowData.userId"></el-input>
      </el-form-item>
      <el-form-item label="角色名">
        <el-input v-model="rowData.userName"></el-input>
      </el-form-item>
      <el-form-item label="qq">
        <el-input v-model="rowData.qq"></el-input>
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="rowData.weiXin"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="dialogConfig.Visible = false">取 消</el-button>
          <el-button type="primary" @click="SaveData">确 定</el-button>
        </span>
    </div>
  </template>
  <script>
    import api from '../api/SyU/SyUUserInfo'
    export default {
      data() {
        return {
        }
      },
      props: {
        rowData: {
          type: Object
        },
        stateType: {
          type: String
        }
      },
      methods: {
        SaveData() {
          if (this.stateType === 'Add') {
            api.Insert(this.rowData).then(res => {
              this.$message({
                type: 'success ',
                message: `保存成功`
              })
              this.$emit('SaveFun')
            })
          } else if (this.stateType === 'Edit') {
            api.Update(this.rowData).then(res => {
              this.$message({
                type: 'success ',
                message: `保存成功`
              })
              this.$emit('SaveFun')
            })
          }
        }
      }
    }
  </script>

1.1.3 版本说明

混入基类

mixinType: ['PagingTableBase', 'PageBase']

1.1.2 版本说明

增加充满样式

.fullDiv {
  width: 100%;
  height: 100%;
}

1.1.1 版本说明

增加自适应flex

#自动引入flex 适应rem字体

增加moment插件

#时间格式化使用例子
{{test | dataFormat('YYYY-MM-DD HH-MM-SS')}}
#具体参数详见 moment网站

安装使用

# 指定npm服务器
npm set registry http://www.xhzq.com:4873
# 安装依赖包
npm i webkf-core-global
# 引用依赖包
import Plugin from 'webkf-core-global'
Vue.use(Plugin)
# 查看更新版本
npm view webkf-core-global versions
# 更新到指定版本
npm install webkf-core-global@X.X.X

axios babel-helper-vue-jsx-merge-props babel-polyfill css-loader deepmerge element-ui js-cookie moment node-sass normalize.css nprogress sass-loader svg-sprite-loader url-loader vue vue-easytable vue-style-loader

@infinitebrahmanuniverse/nolb-webk @everything-registry/sub-chunk-3128

1.6.0

3 years ago

1.5.8

3 years ago