cnhis-design-vue 0.3.6-beta → 0.3.9-beta

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "0.3.6-beta",
+  "version": "0.3.9-beta",
   "main": "es/index.js",
+  "module": "es/index.js",
   "scripts": {
     "dev": "vite --host --port 3200",
     "build:docs": "vite build",
@@ -36,6 +37,7 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@vitejs/plugin-vue": "^2.2.0",
     "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@vue/compiler-sfc": "^3.2.33",
     "autoprefixer": "^10.4.4",
     "cssnano": "^5.1.7",
     "eslint": "^8.10.0",
@@ -43,6 +45,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",

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,
@@ -87,7 +87,7 @@
       :scroll-x="{ enabled: false }"
       :scroll-y="{ gt: 50 }"
       :row-style="getRowStyle"
-      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
+      :edit-config="state.editConfig"
       :expand-config="{
         lazy: true,
         accordion: columnConfig && columnConfig.accordion,
@@ -162,7 +162,7 @@ export default create({
 </script>
 
 <script lang="tsx" setup>
-import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch, h, resolveComponent, onActivated, onUnmounted } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch, isReactive, shallowReactive, onActivated, onUnmounted } from "vue";
 import { useRoute } from 'vue-router';
 import bigTableState from "./bigTableState";
 import bigTableProps from "./bigTableProps";
@@ -171,12 +171,16 @@ 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 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'
+import EditSelect from './components/edit-form/edit-select.vue'
 import {
   NButton,
   NCheckbox,
@@ -191,7 +195,10 @@ import {
   NSwitch,
   NPopover,
   NDropdown,
-  NPopconfirm
+  NPopconfirm,
+  NSelect,
+  NPagination,
+  NEmpty
 } from "naive-ui";
 import { useMessage } from 'naive-ui'
 import CGrid from '~/grid';
@@ -269,6 +276,7 @@ const {
   recordClickBtnInfo,
   getInlineOpreateRow
 }: any = useBatchEditing(props, state, emit, xGrid);
+const { initEditTable, activeMethod, deleteRow, onClickSelectTable } = useEdit(props, state, emit, xGrid)
 
 const { 
   isAboutNestTable,
@@ -351,6 +359,7 @@ const treeConfig = computed(() => {
   }
   return result;
 });
+
 const hideAllWrap = (e: any) => {
   const path = e.path || (e.composedPath && e.composedPath());
   const noWrap = (className: string) => {
@@ -373,7 +382,8 @@ const unBindDocumentClick = () => {
 }
 onMounted(() => {
   bindDocumentClick();
-  state.tableHeight = handleTableHeight(state, props);
+  // state.tableHeight = handleTableHeight(state, props);
+  state.tableHeight = '520px'
 
   // // 子列表在mounted后初始化 直接watch无法触发
   if (!props.isNestTable) return;
@@ -411,7 +421,6 @@ const loadColumn = (config: any) => {
   // this.hasOnlyIcon = config.hasOnlyIcon;
   let columns = formatColumns(config);
   columns = handleGroupColums(columns, props);
-  console.log("columns--------------", columns);
   xGrid.value && xGrid.value.reloadColumn(columns);
 
   setGroupTreeExpand();
@@ -422,14 +431,13 @@ const loadData = async (data: any) => {
   state.isShowEmpty = !data?.length;
 
   const list = JSON.parse(JSON.stringify(data));
-  console.log("list--------------", list);
+  // console.log("list--------------", list);
   let table = xGrid.value;
   if (!table) return;
   let formatList = setChecklist(list);
   state.originFormatList = formatList;
 
   setGroupTitleToFristColumnFieldData(formatList);
-  console.log("formatList--------------", formatList);
   state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
 
   // 非子列表触发
@@ -437,14 +445,23 @@ const loadData = async (data: any) => {
     await handleFormTheUniqueKey();
   }
 
+  formatList = formatList.map((v: any) => {
+    return {
+      ...v,
+      selectTableShow: false,
+      selectTableDisable: false
+    }
+  })
+
   // reloadData 替换 loadData 保存setting之后需要表格重新reload
   // loadData 加载数据
   // reloadData 加载数据并清除所有状态
   // 暂时 不知道是否影响其它????
   // 还是用loadData较好，树表展开需要在更新数据后保留上一次的状态
   // table.clearSort(); // <-- table.loadData 不会清空sort选项，导致sortChange重复触发
-  console.log("table--------------", formatList);
   await table.loadData(formatList);
+  initEditTable()
+
 
   table.setCurrentRow({});
   setCurrentPageRowChecked();
@@ -504,7 +521,14 @@ const formatColumns = (map: any) => {
    */
   // 配置列表
   let { selectType } = getOtherConfigInit() || {};
-  let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable } = map;
+  let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable, isEdit = false, editConfig = {} } = map;
+  if (isEdit) {
+    state.editConfig = Object.assign(state.editConfig, editConfig, {
+      mode: 'cell', 
+      autoClear: true,
+      activeMethod
+    })
+  }
   if (selectType) {
     // 有设置 selectType 强制可选。
     isBatchSelect = 1;
@@ -553,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()} />
           ];
         },
       },
@@ -623,12 +647,28 @@ const formatColumns = (map: any) => {
       showOverflow: "title",
       treeNode: treeNode,
       type: type,
+      // slots: {
+      //   default: (params: any) => {
+      //     return formatter(params, item);
+      //   },
+      // },
       slots: {
-        default: (params: any) => {
-          return formatter(params, item);
+        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: generateEditRender(item),
+      editRender: isEdit ? {} : generateEditRender(item)
     });
 
     if (filterField && !props.isNestTable && !isScanMultiTable) {
@@ -669,6 +709,43 @@ const formatColumns = (map: any) => {
   state.columnLen = currentColumns.filter((item: any) => item.visible).length;
   return columns;
 };
+const formatterEdit = (params: any, col: any) => {
+  let { row, column, $rowIndex, rowIndex } = params
+  let formType = column.formType || col.formType
+  if (formType === 'selectTable') {
+    const propsData = {
+      row,
+      col
+    }
+    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,
+      row
+    } 
+    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;
@@ -750,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);
@@ -761,7 +841,7 @@ const formatter = (params: any, col: any) => {
         {tileBtnList}
         {foldBtnList}
         {inlineBtnList}
-      </span>,
+      </span>
     ];
   }
 
@@ -1410,11 +1490,12 @@ const setCheckedMehod = (setChecked: any, row: any) => {
 }
 //行点击
 const handlerClickRow = (data: any) => {
-  console.log("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;
+
   // 嵌套表与主表click切换时需要清除上次的选中
   isAboutNestTable.value && emit('resetNestLastClickTable', table);
 
@@ -1974,7 +2055,7 @@ const generateInlineBtnList = (row: any, index: any) => {
   ];
 };
 // 按钮 jsx
-const getTileBtnList = (row: any, index: any) => {
+const getTileBtnList = (row: any, index: number) => {
   return [
     (row.tileBtnList?.length &&
       row.tileBtnList.map((btn: any, j: any) => {
@@ -2010,7 +2091,7 @@ const getTileBtnList = (row: any, index: any) => {
   ];
 };
 // 按钮事件
-const clickBtn = (row: any, btn: any, index: any, e: any, j: any) => {
+const clickBtn = (row: any, btn: any, index: number, e: any, j: any) => {
   e.preventDefault();
   e.stopPropagation();
   recordClickBtnInfo(row, index);
@@ -2049,7 +2130,7 @@ const getBtnIcon = (btn: any, mr = "8px") => {
   return [icon];
 };
 // 按钮 jsx
-const getFoldBtnList = (row: any, index: any) => {
+const getFoldBtnList = (row: any, index: number) => {
   const getOptions = () => {
     return row.foldBtnList.map((b: any, j: any) => {
       return {
@@ -2493,19 +2574,11 @@ const clearChecked = () => {
   state.treeTableLength = 0;
 }
 defineExpose({
-  loadColumnAndData,
-  getCheckboxRecords,
-  clearChecked,
-  setCurrentRow,
-  loadColumn,
-  removeInsert
+  formatData,
+  xGrid
 })
 
 </script>
-<style lang="less" scoped>
-@import "./assets/style/table-base.less";
-</style>
-
-<style lang="less">
-@import "./assets/style/table-global.less";
+<style lang="less" src="./assets/style/table-base.less"></style>
+<style lang="less" src="./assets/style/table-global.less">
 </style>