cnhis-design-vue 0.3.8-beta → 3.0.0

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "0.3.8-beta",
+  "version": "3.0.0",
   "main": "es/index.js",
+  "module": "es/index.js",
   "scripts": {
     "dev": "vite --host --port 3200",
     "build:docs": "vite build",
     "build:es": "npm run build:packges",
     "build:packges": "rollup -c build/config.component.ts",
     "build:packges:dts": "rollup -c build/config.component.dts.ts",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "release": "standard-version"
   },
   "peerDependencies": {
-    "naive-ui": "^2.28.1",
     "@vicons/ionicons5": "^0.12.0",
     "axios": "^0.26.1",
+    "naive-ui": "^2.28.1",
     "qs": "^6.10.3"
   },
   "dependencies": {
@@ -31,6 +33,7 @@
     "xe-utils": "^3.5.4"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
@@ -44,6 +47,7 @@
     "eslint-plugin-vue": "^8.5.0",
     "less": "^4.1.2",
     "rollup": "^2.70.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-external-globals": "^0.6.1",
     "rollup-plugin-jsx": "^1.0.3",
@@ -52,6 +56,7 @@
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-plugin-vue-jsx-compat": "0.0.6",
+    "standard-version": "^9.3.2",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",
     "vue-tsc": "^0.29.8"

package/packages/big-table/index.ts

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

package/packages/big-table/src/BigTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="big-table"
+    class="big-table custom-big-table"
     :class="{
       mt: state.visibleCheckAllWrap || state.visibleTreeCheck || state.hasRefresh,
       'expand-padding': !props.isNestTable,
@@ -155,7 +155,7 @@
 </template>
 
 <script lang="tsx">
-import create from '@/core/create';
+import create from '@/core/create.js';
 export default create({
   name: "BigTable"
 })
@@ -171,11 +171,12 @@ import { useFormat } from "./hooks/useFormat";
 import { useTableParse } from "./hooks/useTableParse";
 import { useBatchEditing } from "./hooks/useBatchEditing";
 import { useNestTable } from "./hooks/useNestTable";
+import { useEdit } from './hooks/useEdit';
 import { SettingsSharp, SyncOutline, CopyOutline, CaretDown, CaretForward } from "@vicons/ionicons5";
 import NoData from "./components/NoData.vue";
 import TextOverTooltip from "./components/TextOverTooltip.vue";
-// import SvgIcon from '@/component/svg/index.vue';
-import SvgIcon from "./components/SvgIcon.vue";
+import SvgIcon from '@/component/svg/index.vue';
+// import SvgIcon from "./components/SvgIcon.vue";
 // import EditForm from './components/edit-form/EditForm.vue';
 import EditSelectTable from './components/edit-form/edit-select-table.vue'
 import EditInput from './components/edit-form/edit-input.vue'
@@ -200,8 +201,8 @@ import {
   NEmpty
 } from "naive-ui";
 import { useMessage } from 'naive-ui'
-import CGrid from '~/grid';
-import vexutils from '@/utils/vexutils';
+import CGrid from '~/grid/index.ts';
+import vexutils from '@/utils/vexutils.js';
 import {
   getEvaluate,
   getMapVal,
@@ -275,6 +276,7 @@ const {
   recordClickBtnInfo,
   getInlineOpreateRow
 }: any = useBatchEditing(props, state, emit, xGrid);
+const { initEditTable, activeMethod, deleteRow, onClickSelectTable } = useEdit(props, state, emit, xGrid)
 
 const { 
   isAboutNestTable,
@@ -436,7 +438,6 @@ const loadData = async (data: any) => {
   state.originFormatList = formatList;
 
   setGroupTitleToFristColumnFieldData(formatList);
-  console.log("formatList--------------", formatList);
   state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
 
   // 非子列表触发
@@ -458,8 +459,9 @@ const loadData = async (data: any) => {
   // 暂时 不知道是否影响其它????
   // 还是用loadData较好，树表展开需要在更新数据后保留上一次的状态
   // table.clearSort(); // <-- table.loadData 不会清空sort选项，导致sortChange重复触发
-  console.log("table--------------", formatList);
   await table.loadData(formatList);
+  initEditTable()
+
 
   table.setCurrentRow({});
   setCurrentPageRowChecked();
@@ -523,7 +525,8 @@ const formatColumns = (map: any) => {
   if (isEdit) {
     state.editConfig = Object.assign(state.editConfig, editConfig, {
       mode: 'cell', 
-      autoClear: true
+      autoClear: true,
+      activeMethod
     })
   }
   if (selectType) {
@@ -574,7 +577,7 @@ const formatColumns = (map: any) => {
       slots: {
         header: () => {
           return [
-            tableNoSetting.value ? null : <NIcon size="14" color="#0e7a0d" component={SettingsSharp} onClick={() => showDrawer()} />
+            tableNoSetting.value ? null : <NIcon size="14" color="#777" component={SettingsSharp} onClick={() => showDrawer()} />
           ];
         },
       },
@@ -649,11 +652,22 @@ const formatColumns = (map: any) => {
       //     return formatter(params, item);
       //   },
       // },
-      slots: isEdit ? {
-          edit: (params: any) => formatterEdit(params, item)
-        } : {
-          default: (params: any) => formatter(params, item)
+      slots: {
+        edit: (params: any) => {
+          if (isEdit && item.isEdit && item.columnName !== 'operatorColumn') {
+            return formatterEdit(params, item)
+          } else {
+            return <span>{params.row[item.columnName]}</span>
+          }
         },
+        default: (params: any) => {
+          if(!isEdit || item.columnName === 'operatorColumn' || !item.isEdit) {
+            return formatter(params, item)
+          } else {
+            return <span>{params.row[item.columnName]}</span>
+          }
+        }
+      },
       editRender: isEdit ? {} : generateEditRender(item)
     });
 
@@ -703,19 +717,35 @@ const formatterEdit = (params: any, col: any) => {
       row,
       col
     }
-    return <EditSelectTable {...propsData} v-model={[row[col.columnName], 'value']} />
+    return <EditSelectTable {...propsData} v-model={[row[col.columnName], 'value']} onClickSelectTable={onClickSelectTable} />
   }
   if (formType === 'input') {
     return <EditInput v-model={[row[col.columnName], 'value']} />
   }
   if (formType === 'select') {
     const propsData = {
-      col
+      col,
+      row
     } 
-    return <EditSelect {...propsData} v-model={[row[col.columnName], 'value']} />
+    return <EditSelect {...propsData} v-model={[row[col.columnName], 'value']} onSetOptions={(options: any[]) => row[`${col.columnName}_options`] = options} />
   }
 }
-
+const getEditBtn = (row: any, col: any) => {
+  return col.tileBtnList.map((btn: any) => {
+    if (btn.settingObj[0].trigger_type === 'DELETE') {
+      return <NPopconfirm
+        onPositiveClick={() => deleteRow(row)}
+      >
+        {{
+          trigger: () => <NButton color={btn.settingObj[0].color || '#999'} text>{btn.name}</NButton>,
+          default: () => '是否确认删除？'
+        }}
+      </NPopconfirm>
+    } else {
+      return null
+    }
+  })
+}
 // 表格渲染逻辑
 const formatter = (params: any, col: any) => {
   let { row, column, $rowIndex } = params;
@@ -797,8 +827,11 @@ const formatter = (params: any, col: any) => {
   if (attrType === "QR_CODE") {
     return getOrCode(row, own, attrType);
   }
-
   if (column.property === "operatorColumn") {
+    if (props.columnConfig.isEdit && !row.initRow) {
+      return getEditBtn(row, col)
+    }
+
     if (state.showButtonTop != 0 || props.isBatchEditing) return;
     const inlineBtnList = generateInlineBtnList(row, $rowIndex);
     const tileBtnList = getTileBtnList(row, $rowIndex);
@@ -1455,27 +1488,14 @@ const setCheckedMehod = (setChecked: any, row: any) => {
   }
   updateAddCheckedRows(row);
 }
-// 
-const getFormType = (field: string) => {
-  const obj = props.columnConfig.fieldList.find((v: any) => v.columnName === field)
-  return obj ? obj.formType || '' : ''
-}
 //行点击
 const handlerClickRow = (data: any) => {
-  console.log("data.", data);
+  // console.log("data.", data);
   if (isScanMultiTable.value || props.isInlineOperating) return false;
   if (vexutils.has(data?.row, GROUP_TITLE_KEY)) return false;
   if (state.isTriggerSelectionChange && state.isTree == 0) return false;
   let table = xGrid.value;
 
-  const formType = getFormType(data.column.field)
-  console.log('formType---', formType)
-  if (formType === 'selectTable') {
-    // table.clearActived().then(() => {
-      table.setActiveCell(data.row, data.column.field)
-    // })
-  }
-
   // 嵌套表与主表click切换时需要清除上次的选中
   isAboutNestTable.value && emit('resetNestLastClickTable', table);
 
@@ -2554,288 +2574,11 @@ const clearChecked = () => {
   state.treeTableLength = 0;
 }
 defineExpose({
-  loadColumnAndData,
-  getCheckboxRecords,
-  clearChecked,
-  setCurrentRow,
-  loadColumn,
-  removeInsert,
+  formatData,
   xGrid
 })
 
 </script>
-<style lang="less" scoped>
-.big-table {
-  position: relative;
-
-  &:deep(.img-wrap) {
-    padding: 2px 0;
-    line-height: 1;
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    img {
-      max-height: 100%;
-      object-fit: contain;
-      cursor: pointer;
-    }
-    &.img-circle {
-      img {
-        width: 28px;
-        border-radius: 50%;
-        object-fit: contain;
-      }
-    }
-  }
-  .bigTable-qr-span {
-    position: relative;
-    display: inline-block;
-    height: 100%;
-    .bigTable-qr-img {
-      max-height: 96%;
-    }
-    > span {
-      position: absolute;
-      top: 0;
-      left: 0;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      color: #fff;
-      display: none;
-      cursor: pointer;
-    }
-    &:hover {
-      > span {
-        display: inline-flex;
-      }
-    }
-  }
-
-  /* 行内表单样式 */
-  &:deep(.base-form) {
-    overflow: hidden !important;
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-  &:deep(.base-form-content) {
-    width: 100%;
-  }
-  &:deep(textarea) {
-    height: 32px;
-    margin-bottom: 0;
-    resize: none;
-  }
-  &:deep(.formItem-select-multiple) {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    line-height: 40px;
-  }
-  /* 行内表单样式 */
-
-  &.mt {
-    margin-top: 26px;
-    height: calc(100% - 78px) !important;
-  }
-
-  &.expand-padding {
-    &:deep(.vxe-table .vxe-body--expanded-cell) {
-      padding-left: 66px !important;
-      padding-right: 66px !important;
-    }
-  }
-
-  th.vxe-header--column {
-    cursor: pointer;
-  }
-  .row-btn {
-    margin-right: 10px;
-  }
-  &:deep(.vxe-table) {
-    transform: translateZ(0);
-    .vxe-table--empty-content {
-      width: 100%;
-      height: 100%;
-      > div {
-        width: 100%;
-        height: 100%;
-        .no-data-tip {
-          display: inline-flex;
-        }
-      }
-    }
-    .col--checkbox,
-    .col--seq {
-      .vxe-cell {
-        padding: 0;
-        .vxe-checkbox--label {
-          padding-left: 0;
-        }
-      }
-    }
-    .vxe-cell .vxe-tree-cell {
-      height: 100%;
-    }
-
-    .scan-multi-delete {
-      color: #F06F64;
-    }
-
-    .vxe-table--header {
-      background-color: #f2f2f2;
-      .vxe-header--column .vxe-cell--title {
-        height: 100%;
-        line-height: unset;
-        width: 100%;
-      }
-    }
-    .vxe-table--footer-wrapper.body--wrapper,
-    .vxe-table--body-wrapper {
-      &::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-        background-color: #f2f2f2;
-      }
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: #b2b2b2;
-      }
-    }
-    .vxe-footer--row .vxe-footer--column {
-      > .vxe-cell .vxe-cell--item {
-        height: 30px;
-        line-height: 30px;
-      }
-    }
-    .vxe-cell--checkbox.is--disabled {
-      .vxe-checkbox--icon {
-        display: none;
-      }
-    }
-  }
-  &:deep(.filter-box) {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    .text-over-tooltip-components {
-      max-width: calc(100% - 20px);
-    }
-    .vxe-filter--btn {
-      border-top-color: #c0c4cc;
-      border-right-color: #c0c4cc;
-    }
-    .vxe-filter--btn.active {
-      border-top-color: #35393c;
-      border-right-color: #35393c;
-    }
-    .vxe-filter--btn.checked {
-      border-top-color: #5585f5;
-      border-right-color: #5585f5;
-    }
-  }
-  &:deep(.disabled-checked-tips) {
-    position: absolute;
-    left: 6px;
-    top: 50%;
-    bottom: 0;
-    right: 0;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin-top: -8px;
-    overflow: hidden;
-    border-radius: 50%;
-    border: 2px solid #ff1818;
-    background: #fff;
-    &::after {
-      position: absolute;
-      content: '';
-      width: 16px;
-      height: 2px;
-      background-color: #ff1818;
-      transform: rotate(45deg);
-      transform-origin: 0 2px;
-      left: 0;
-      top: 0;
-    }
-  }
-}
-
-.refresh {
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  box-shadow: 0px 2px 4px 0px rgba(108, 108, 108, 0.13);
-  color: #5585f5;
-  font-size: 12px;
-  height: 27px;
-
-  position: absolute;
-  right: 0;
-  top: 6px;
-  z-index: 1;
-
-  padding-left: 14px;
-  padding-right: 14px;
-  border-top-left-radius: 14px;
-  border-bottom-left-radius: 14px;
-
-  cursor: pointer;
-}
-.refresh-row {
-  margin-left: 3px;
-  margin-bottom: 0;
-}
-
-.check-wrap {
-  background: #ffffe9;
-  display: block;
-  width: 100%;
-  line-height: 26px;
-  display: flex;
-  justify-content: center;
-
-  position: absolute;
-  margin-top: -26px;
-
-  .check-wrap-title,
-  .check-wrap-btn {
-    color: #000000;
-    font-size: 12px;
-    margin-bottom: 0px;
-    cursor: pointer;
-  }
-
-  .check-wrap-btn {
-    color: #5585f5;
-  }
-}
-
-.percent-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  .percent-value {
-    line-height: 1;
-    margin-bottom: -4px;
-    margin-top: 4px;
-  }
-}
-.domPropsInnerHTML-span {
-  height: 100%;
-  &:deep(img) {
-    display: inline-block;
-    height: var(--tableImageHeight);
-    width: var(--tableImageWidth);
-  }
-}
-</style>
-
+<style lang="less" src="./assets/style/table-base.less"></style>
 <style lang="less" src="./assets/style/table-global.less">
 </style>