cnhis-design-vue 3.1.0 → 3.1.3

package/packages/field-set/index.ts

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

package/packages/field-set/src/FieldSet.vue

@@ -1,471 +0,0 @@
-<template>
-  <div ref="settingView" class="setting-view">
-    <n-spin :show="state.spinning" tip="..." style="width: 100%; height: 100%">
-      <div class="fields-set-content">
-        <div class="fields-table">
-          <div class="setting-title" :class="{ 'seting-title-api': !state.isCustomSearch }">
-            <span class="width-show" style="width: 4%"></span>
-            <!-- 字段名称 -->
-            <span class="width-large">所有字段</span>
-            <!-- 显示 -->
-            <span class="width-show">
-              <n-checkbox
-                v-if="showCheckBox('isShow')"
-                :checked="calculateCheck('isShow')"
-                @update:checked="handleAllCheck($event, 'isShow')"
-              />
-              显示
-            </span>
-            <!-- 排序 -->
-            <span class="width-show">
-              <n-checkbox
-                v-if="showCheckBox('isSort')"
-                :checked="calculateCheck('isSort')"
-                @update:checked="handleAllCheck($event, 'isSort')"
-              />
-              排序
-            </span>
-            <!-- 固定 -->
-            <span class="width-showed">固定</span>
-            <slot>
-              <!-- 自定义标题 -->
-              <span class="width-word">自定义标题</span>
-            </slot>
-            <!-- 列宽 -->
-            <span class="width-showed">列宽</span>
-          </div>
-          <div ref="setShow" class="set-show" :class="{ 'set-show-api': !state.isCustomSearch }">
-            <draggable :list="state.fields" animation="150" item-key="sid" tag="ul">
-              <template #item="{ element }">
-                <li
-                  class="left-style"
-                  :style="leftStyle(element)"
-                  @click="handleFieldClick(element)"
-                >
-                  <span class="width-show drag-icon-wrap">
-                    <n-tooltip trigger="hover">
-                      <template #trigger>
-                        <span
-                          class="iconfont icon-a-menzhenyishengzhanxitongtubiaotuozhuai"
-                          style="color: #000"
-                        />
-                      </template>
-                      <!-- <c-icon type="pause" :rotate="90" /> -->
-                      <span>拖拽调整顺序</span>
-                    </n-tooltip>
-                  </span>
-                  <!-- 字段名称 -->
-                  <span class="width-large title-item" :class="{ blue: element.extraField }">
-                    <span style="width: 14px; margin-right: 6px"></span>
-                    <span>
-                      {{ element.title }}
-                    </span>
-                  </span>
-                  <!-- 显示 -->
-                  <span class="width-show">
-                    <n-checkbox
-                      v-show="element.sid != '0001'"
-                      :default-checked="element.isShow == '1'"
-                      :checked="element.isShow == '1' ? true : false"
-                      @update:checked="onChangeShow($event, element)"
-                    ></n-checkbox>
-                  </span>
-                  <!-- 排序 -->
-                  <span class="width-show">
-                    <n-checkbox
-                      v-show="element.sid != '0001'"
-                      :default-checked="element.isSort == '1'"
-                      :disabled="element.notParticipatingSort == 1"
-                      :checked="!!element.isSort"
-                      @update:checked="onChangeSort($event, element)"
-                    ></n-checkbox>
-                  </span>
-
-                  <!-- 固定 -->
-                  <span class="width-showed">
-                    <select v-model="element.isFixed" class="is-sort-style">
-                      <option :value="0">不固定</option>
-                      <option :value="1">左固定</option>
-                      <option :value="2">右固定</option>
-                    </select>
-                  </span>
-                  <slot>
-                    <!-- 自定义标题 -->
-                    <span class="width-word">
-                      <input
-                        v-show="element.sid != '0001'"
-                        v-model="element.alias"
-                        class="alias-style"
-                      />
-                    </span>
-                  </slot>
-
-                  <!-- 列宽 -->
-                  <span class="width-showed">
-                    <input v-model="element.colWidth" class="alias-style col-width-style" />
-                  </span>
-                </li>
-              </template>
-            </draggable>
-          </div>
-        </div>
-        <div v-if="props.footerFlag" class="check-options">
-          <div class="btn-operate">
-            <n-button style="margin-right: 8px" @click="onCancle">取消</n-button>
-            <n-button type="primary" @click="handleFieldSave">保存</n-button>
-          </div>
-        </div>
-      </div>
-    </n-spin>
-  </div>
-</template>
-
-<script lang="ts">
-import create from '@/core/create.js';
-export default create({
-  name: "FieldSet"
-})
-</script>
-<script lang="ts" setup>
-import { reactive, onMounted, computed, ref, toRefs } from "vue";
-import draggable from "vuedraggable";
-import { NButton, NCheckbox, NSpin, NTooltip } from "naive-ui";
-
-type Ifields = {
-  sid: string;
-  columnName: string; // 字段名
-  isShow: number; // 是否显示
-  isSort: number; // 是否能排序
-  title: string; // 别名
-  alias: string; // 别名
-  isFixed: number; // 固定位置
-  colWidth: number; // 列宽
-  [key: string]: any;
-};
-
-type ItableFields = {
-  id: string;
-  field: string;
-  visible: boolean;
-  sequence: number;
-  sortable: boolean;
-  title: string;
-  fixed: string;
-  minWidth: number;
-}[];
-
-type Iprops = {
-  fields: any[];
-  menuSource: string;
-  drawerDirection: string;
-  footerFlag: Boolean;
-};
-
-type Istate = {
-  spinning: boolean;
-  isCustomSearch: boolean;
-  clickItem: {
-    [key: string]: any;
-  };
-  fields: Ifields[];
-};
-
-const emit = defineEmits(["onSave", "onClose"]);
-
-const settingView = ref<HTMLInputElement | null>(null);
-
-const props: Iprops = defineProps({
-  fields: {
-    type: Array,
-    default: function () {
-      return [];
-    },
-  },
-  menuSource: {
-    type: String,
-    default: "",
-  },
-  drawerDirection: {
-    type: String,
-    default: "right",
-  },
-  footerFlag: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const state: Istate = reactive({
-  spinning: false,
-  isCustomSearch: true,
-  clickItem: {},
-  fields: props.fields,
-});
-
-onMounted(() => {
-  hideTab();
-});
-
-const leftStyle = (ele: Ifields) => {
-  return {
-    background: state.clickItem.sid === ele.sid ? "#f2f2f2" : undefined,
-  };
-};
-
-const isMiddleAndAdmin = computed(() => props.menuSource == "middle");
-
-const showCheckBox = (key: string) => {
-  return state.fields.some((i: Ifields) => Object.prototype.hasOwnProperty.call(i, key));
-};
-
-const hideTab = () => {
-  if (isMiddleAndAdmin.value) return;
-
-  if (props.drawerDirection === "right") {
-    // settingView.value?.style.setProperty('margin', '-16px 0px 0');
-    settingView.value?.style.setProperty("margin", "auto");
-  } else {
-    settingView.value?.style.setProperty("margin", "auto");
-  }
-};
-const handleFieldSave = () => {
-  let tableFields: ItableFields = [];
-  // let tableView = {};
-  if (state.fields.length > 0) {
-    state.fields.forEach((item: Ifields, i: number) => {
-      tableFields.push({
-        id: item.sid, // 字段id
-        field: item.columnName, // 字段名
-        visible: item.isShow == 1, // 是否显示
-        sequence: i, // 顺序位置
-        sortable: item.isSort == 1, // 是否能排序
-        title: item.alias || item.title, // 别名
-        fixed: item.isFixed ? (item.isFixed == 1 ? "left" : "right") : "", // 固定位置
-        minWidth: item.colWidth, // 列宽
-      });
-    });
-  }
-  // tableView = Object.assign({ pageSize: this.pageSize }, this.tableView);
-  console.log("tableFields", tableFields);
-  emit("onSave", { tableFields });
-};
-const onCancle = () => {
-  emit("onClose");
-};
-const onChangeShow = (e: boolean, ele: Ifields) => {
-  if (e == true) {
-    ele.isShow = 1;
-  } else {
-    ele.isShow = 0;
-  }
-};
-const onChangeSort = (e: boolean, ele: Ifields) => {
-  if (e == true) {
-    ele.isSort = 1;
-  } else {
-    ele.isSort = 0;
-  }
-};
-const onButtonChecked = (e: boolean, itemButton: Ifields) => {
-  if (e == true) {
-    itemButton.isShow = 1;
-  } else {
-    itemButton.isShow = 0;
-  }
-};
-const calculateCheck = (key: string) => {
-  if (!state.fields.length) return false;
-  return state.fields.every((i: Ifields) => {
-    if (!Object.prototype.hasOwnProperty.call(i, key)) return true;
-    return i[key];
-  });
-};
-const handleAllCheck = (e: boolean, key: string) => {
-  const value = e ? 1 : 0;
-  const data = state.fields.map((i: Ifields) => {
-    if (Object.prototype.hasOwnProperty.call(i, key)) {
-      i[key] = value;
-    }
-    return i;
-  });
-  state.fields = data;
-};
-const handleFieldClick = (item: Ifields) => {
-  state.clickItem = item;
-};
-</script>
-<style scoped lang="less">
-ul {
-  margin: 0;
-  padding: 0;
-}
-
-.fields-set-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  .fields-table {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-}
-
-.setting-view {
-  height: 100%;
-  position: relative;
-  :deep(.n-spin-container) {
-    width: 100%;
-    height: 100%;
-  }
-  :deep(.n-spin-content) {
-    height: 100%;
-  }
-  .setting-title {
-    background: #f2f2f4;
-    border: 1px solid #f2f2f2;
-    height: 52px;
-    line-height: 52px;
-    span {
-      display: inline-block;
-    }
-    &.seting-title-api {
-      .width-large {
-        width: 15%;
-      }
-    }
-  }
-  .set-show {
-    min-height: 100px;
-    overflow-y: auto;
-    &.set-show-api {
-      .width-large {
-        width: 15%;
-      }
-    }
-
-    .left-style.sortable-chosen {
-      background: #fafafa;
-      box-shadow: 0px 0px 10px 0px #d5d5d5;
-    }
-
-    li {
-      padding: 5px 0;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid #e8e8e8;
-      height: 52px;
-      line-height: 52px;
-    }
-    .alias-style {
-      outline: none;
-      border-radius: 4px 4px 4px 4px;
-      border: solid 1px #d5d5d5;
-      height: 32px;
-      text-indent: 16px;
-      color: #38454f;
-      width: 100%;
-    }
-    .is-sort-style {
-      outline: none;
-      border-radius: 4px 4px 4px 4px;
-      border: solid 1px #d5d5d5;
-      height: 32px;
-      text-indent: 6px;
-      color: #38454f;
-      width: 87px;
-      margin-right: 5px;
-      &:disabled {
-        cursor: not-allowed;
-        background: #f5f5f5;
-      }
-    }
-    .col-width-style {
-      width: 70px;
-    }
-    .title-item {
-      display: inline-flex;
-      justify-content: flex-start;
-      align-items: center;
-      text-align: left;
-      > span {
-        display: inline-block;
-        max-width: calc(100% - 20px);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  .alias-style {
-    outline: none;
-    border-radius: 4px 4px 4px 4px;
-    border: solid 1px rgba(212, 222, 229, 1);
-    height: 32px;
-    text-indent: 16px;
-    color: #38454f;
-  }
-  .btn-operate {
-    border-top: 1px solid #d5d5d5;
-    padding: 12px 0 12px;
-  }
-
-  .width-show {
-    display: inline-block;
-    width: 10%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .drag-icon-wrap {
-    width: 5% !important;
-    cursor: pointer;
-    text-align: center;
-  }
-  .width-showed {
-    display: inline-block;
-    width: 15%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    select {
-      width: 90% !important;
-    }
-  }
-  .width-word {
-    display: inline-block;
-    width: 20%;
-    line-height: 52px;
-    overflow: hidden;
-    white-space: nowrap;
-    input {
-      width: 90% !important;
-    }
-  }
-  .width-large {
-    display: inline-block;
-    width: 20%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-</style>
-<style>
-.popver-content {
-  height: 400px;
-  overflow: hidden;
-  overflow-y: auto;
-}
-.popver-ul {
-  margin-bottom: 10px;
-}
-.ul-title {
-  font-size: 14px;
-  font-weight: 400;
-  color: rgba(145, 159, 190, 1);
-  line-height: 20px;
-}
-</style>

package/packages/grid/index.ts

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

package/packages/grid/src/Grid.tsx

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

package/packages/grid/src/hooks.ts

@@ -1,167 +0,0 @@
-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[]) => {
-      return xGrid.value && xGrid.value[name](...args)
-    }
-  })
-
-  return { 
-    xGrid,
-    ...funcs
-  }
-}