cnhis-design-vue 0.3.1-beta → 0.3.4-beta

package/packages/grid/index.ts

@@ -0,0 +1,17 @@
+import type { App } from "vue";
+
+// 导入组件
+import Grid, { VXETable } from "./src/Grid"
+
+type SFCWithInstall<T> = T & { install(app: App): void }; // vue 安装
+
+// 为组件提供 install 安装方法，供按需引入
+Grid.install = function(app: App) {
+  app.component(Grid.name, Grid);
+  app.use(VXETable);
+};
+
+const CGrid: SFCWithInstall<typeof Grid> = Grid; // 增加类型
+
+// 默认导出组件
+export default CGrid;

package/packages/grid/src/Grid.tsx

@@ -0,0 +1,22 @@
+import { defineComponent } from "vue"
+import 'xe-utils'
+import VXETable, { Grid } from 'vxe-table'
+import 'vxe-table/lib/style.css'
+import create from '@/core/create';
+import { useMethods } from './hooks'
+
+export { VXETable }
+
+export default defineComponent(create({
+  name: "Grid",
+  setup(props: any, { attrs, slots }: any) {
+    const renderVN = () => <Grid ref="xGrid" { ...attrs }>{slots}</Grid>
+    return {
+      ...useMethods(),
+      renderVN
+    }
+  },
+  render() {
+    return this.renderVN()
+  }
+}))

package/packages/grid/src/hooks.ts

@@ -0,0 +1,168 @@
+import { ref } from 'vue'
+import { VxeGridInstance } from 'vxe-table'
+// 操作
+export const useMethods = () => {
+  const xGrid = ref({} as VxeGridInstance)
+
+  const methodKeys: string[] = [
+    'loadData',
+    'reloadData',
+    'updateData',
+    'reloadRow',
+    'reloadExpandContent',
+    'reloadTreeChilds',
+    'loadColumn',
+    'reloadColumn',
+    'refreshColumn',
+    'createRow',
+    'createData',
+    'insert',
+    'insertAt',
+    'revertData',
+    'remove',
+    'removeCheckboxRow',
+    'removeRadioRow',
+    'removeCurrentRow',
+    'removeMergeCells',
+    'removeMergeFooterItems',
+    'getRowIndex',
+    'getVTRowIndex',
+    'getVMRowIndex',
+    'getRowNode',
+    'getColumns',
+    'getColid',
+    'getColumnById',
+    'getColumnByField',
+    'getTableColumn',
+    'getColumnIndex',
+    'getVMColumnIndex',
+    'getVTColumnIndex',
+    'getColumnNode',
+    'getSortColumns',
+    'getCheckedFilters',
+    'getTableData',
+    'getRowById',
+    'getRowid',
+    'getData',
+    'getRecordset',
+    'getInsertRecords',
+    'getRemoveRecords',
+    'getUpdateRecords',
+    'getMergeCells',
+    'getMergeFooterItems',
+    'getCurrentColumn',
+    'getCurrentRecord',
+    'getRadioRecord',
+    'getRadioReserveRecord',
+    'getCheckboxRecords',
+    'getCheckboxReserveRecords',
+    'getCheckboxIndeterminateRecords',
+    'getRowExpandRecords',
+    'getTreeExpandRecords',
+    'getActiveRecord',
+    'getSelectedCell',
+    'getScroll',
+    'isActiveByRow',
+    'isInsertByRow',
+    'isUpdateByRow',
+    'isAllCheckboxChecked',
+    'isAllCheckboxIndeterminate',
+    'isCheckedByCheckboxRow',
+    'isIndeterminateByCheckboxRow',
+    'isCheckedByRadioRow',
+    'isExpandByRow',
+    'isRowExpandLoaded',
+    'isTreeExpandByRow',
+    'isTreeExpandLoaded',
+    'isFilter',
+    'setFilter',
+    'setActiveRow',
+    'setActiveCell',
+    'setSelectCell',
+    'setMergeCells',
+    'setMergeFooterItems',
+    'setRowExpand',
+    'setAllRowExpand',
+    'setTreeExpand',
+    'setAllTreeExpand',
+    'setCurrentRow',
+    'setCurrentColumn',
+    'setRadioRow',
+    'setCheckboxRow',
+    'setAllCheckboxRow',
+    'toggleCheckboxRow',
+    'toggleAllCheckboxRow',
+    'toggleRowExpand',
+    'toggleTreeExpand',
+    'clearMergeCells',
+    'clearMergeFooterItems',
+    'clearCurrentRow',
+    'clearCurrentColumn',
+    'clearRadioRow',
+    'clearRadioReserve',
+    'clearCheckboxRow',
+    'clearCheckboxReserve',
+    'clearRowExpand',
+    'clearRowExpandLoaded',
+    'clearTreeExpand',
+    'clearTreeExpandLoaded',
+    'clearSort',
+    'clearFilter',
+    'clearSelected',
+    'clearActived',
+    'clearData',
+    'clearScroll',
+    'clearValidate',
+    'clearAll',
+    'resetColumn',
+    'closeFilter',
+    'closeTooltip',
+    'closeMenu',
+    'updateFooter',
+    'updateStatus',
+    'hideColumn',
+    'showColumn',
+    'scrollTo',
+    'scrollToRow',
+    'scrollToColumn',
+    'sort',
+    'isSort',
+    'recalculate',
+    'refreshScroll',
+    'validate',
+    'fullValidate',
+    'exportData',
+    'openExport',
+    'importData',
+    'openImport',
+    'print',
+    'openPrint',
+    'saveFile',
+    'readFile',
+    'openTooltip',
+    'connect',
+    'focus',
+    'blur',
+    'commitProxy',
+    'zoom',
+    'isMaximized',
+    'maximize',
+    'revert',
+    'getFormItems',
+    'getPendingRecords',
+    'getProxyInfo'
+  ];
+
+  const funcs: any = {}
+  methodKeys.forEach(name => {
+    funcs[name] = (...args: any[]) => {
+      const $xGrid: any = xGrid.value
+      return $xGrid && $xGrid[name](...args)
+    }
+  })
+
+  return { 
+    xGrid,
+    ...funcs
+  }
+}

package/packages/index.ts

@@ -0,0 +1,36 @@
+import type { App } from "vue";
+// 导入组件
+import { default as Grid } from './grid';
+import { default as BigTable } from './big-table';
+import { default as DragLayout } from './drag-layout';
+import { default as ButtonPrint } from './button-print';
+
+// 存储组件列表
+const components: any[] = [
+  Grid,
+  BigTable,
+  DragLayout,
+  ButtonPrint
+];
+
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function(app: App) {
+  // 遍历注册全局组件
+  components.forEach(component => {
+    component.install(app)
+  });
+};
+
+export {
+  Grid,
+  BigTable,
+  DragLayout,
+  ButtonPrint
+};
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下是具体的组件列表
+  ...components
+};

package/src/component/svg/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
+    <title v-if="title">{{ title }}</title>
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "SvgIcon"
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+// svg图标组件 使用方式
+// 将svg图片放入 /assets/icons/svg/图片名称.svg
+// vue页面中 <svg-icon icon-class="图片名称"></svg-icon>
+
+  const props = withDefaults(defineProps<{
+    iconClass: string
+    title: string
+    className?: string
+  }>(), {
+    iconClass: '',
+    title: '',
+    default: ''
+  })
+  
+  const iconName = computed(() => `#icon-${props.iconClass}`)
+
+  const svgClass = computed(() => {
+    if (props.className) {
+      return "svg-icon " + props.className;
+    } else {
+      return "svg-icon";
+    }
+  })
+   
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/src/core/create.ts

@@ -0,0 +1,5 @@
+import { KEY_COMPONENT_NAME } from '../global/variable';
+export default function(vm: any) {
+  vm.name = KEY_COMPONENT_NAME + (vm.name || '');
+  return vm;
+}

package/src/global/variable.ts

@@ -0,0 +1,2 @@
+export const KEY_COMPONENT_NAME = 'C';
+export const GROUP_TITLE_KEY = 'group-show-title';

package/src/utils/clickoutside.ts

@@ -0,0 +1,80 @@
+interface Binding {
+  expression: any,
+  value?: any
+}
+
+const nodeList: any[] = [];
+const ctx = '@@clickoutsideContext';
+
+let startClick: MouseEvent;
+let seed = 0;
+
+document.addEventListener('mousedown', e => (startClick = e), false);
+document.addEventListener(
+  'mouseup',
+  e => {
+    nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
+  },
+  false
+);
+
+function createDocumentHandler(el: any, binding: Binding, vnode: any) {
+  return function(mouseup: any = {}, mousedown: any = {}) {
+    if (
+      !vnode ||
+      !vnode.context ||
+      !mouseup.target ||
+      !mousedown.target ||
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target)))
+    )
+      return;
+
+    if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName]();
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
+    }
+  };
+}
+
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+export default {
+  mounted(el: any, binding: Binding, vnode: any) {
+    nodeList.push(el);
+    const id = seed++;
+    el[ctx] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+
+  update(el: any, binding: Binding, vnode: any) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+
+  unmounted(el: any) {
+    let len = nodeList.length;
+
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};

package/src/utils/crypto.js

@@ -0,0 +1,25 @@
+import CryptoJS from "crypto-js";
+
+// 加密
+function encrypt(word) {
+  const key = CryptoJS.enc.Utf8.parse("0D7FB71E8EC31E97");
+  const srcs = CryptoJS.enc.Utf8.parse(word);
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return encrypted.toString();
+}
+// 解密
+function decrypt(word) {
+  const key = CryptoJS.enc.Utf8.parse("0D7FB71E8EC31E97");
+  const decrypt = CryptoJS.AES.decrypt(word, key, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+}
+export default {
+  encrypt,
+  decrypt
+};