cnhis-design-vue 0.3.6-beta → 0.3.7-beta

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

@@ -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";
@@ -177,6 +177,9 @@ 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 +194,10 @@ import {
   NSwitch,
   NPopover,
   NDropdown,
-  NPopconfirm
+  NPopconfirm,
+  NSelect,
+  NPagination,
+  NEmpty
 } from "naive-ui";
 import { useMessage } from 'naive-ui'
 import CGrid from '~/grid';
@@ -351,6 +357,7 @@ const treeConfig = computed(() => {
   }
   return result;
 });
+
 const hideAllWrap = (e: any) => {
   const path = e.path || (e.composedPath && e.composedPath());
   const noWrap = (className: string) => {
@@ -373,7 +380,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 +419,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,7 +429,7 @@ 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);
@@ -437,6 +444,14 @@ const loadData = async (data: any) => {
     await handleFormTheUniqueKey();
   }
 
+  formatList = formatList.map((v: any) => {
+    return {
+      ...v,
+      selectTableShow: false,
+      selectTableDisable: false
+    }
+  })
+
   // reloadData 替换 loadData 保存setting之后需要表格重新reload
   // loadData 加载数据
   // reloadData 加载数据并清除所有状态
@@ -504,7 +519,13 @@ 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
+    })
+  }
   if (selectType) {
     // 有设置 selectType 强制可选。
     isBatchSelect = 1;
@@ -623,12 +644,17 @@ 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);
+      //   },
+      // },
+      slots: isEdit ? {
+          edit: (params: any) => formatterEdit(params, item)
+        } : {
+          default: (params: any) => formatter(params, item)
         },
-      },
-      editRender: generateEditRender(item),
+      editRender: isEdit ? {} : generateEditRender(item)
     });
 
     if (filterField && !props.isNestTable && !isScanMultiTable) {
@@ -669,6 +695,27 @@ 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']} />
+  }
+  if (formType === 'input') {
+    return <EditInput v-model={[row[col.columnName], 'value']} />
+  }
+  if (formType === 'select') {
+    const propsData = {
+      col
+    } 
+    return <EditSelect {...propsData} v-model={[row[col.columnName], 'value']} />
+  }
+}
+
 // 表格渲染逻辑
 const formatter = (params: any, col: any) => {
   let { row, column, $rowIndex } = params;
@@ -761,7 +808,7 @@ const formatter = (params: any, col: any) => {
         {tileBtnList}
         {foldBtnList}
         {inlineBtnList}
-      </span>,
+      </span>
     ];
   }
 
@@ -1408,13 +1455,27 @@ 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");
+  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);
 
@@ -1974,7 +2035,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 +2071,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 +2110,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 {
@@ -2498,14 +2559,15 @@ defineExpose({
   clearChecked,
   setCurrentRow,
   loadColumn,
-  removeInsert
+  removeInsert,
+  xGrid
 })
 
 </script>
-<style lang="less" scoped>
-@import "./assets/style/table-base.less";
+<style lang="less" scoped src="./assets/style/table-base.less">
+// @import "./assets/style/table-base.less";
 </style>
 
-<style lang="less">
-@import "./assets/style/table-global.less";
+<style lang="less" src="./assets/style/table-global.less">
+// @import "./assets/style/table-global.less";
 </style>

package/packages/big-table/src/assets/style/table-base.less

@@ -272,4 +272,10 @@ body {
     height: var(--tableImageHeight);
     width: var(--tableImageWidth);
   }
+}
+
+.select-table {
+  :deep(.n-base-select-menu__empty) {
+    display: none;
+  }
 }

package/packages/big-table/src/assets/style/table-global.less

@@ -164,4 +164,12 @@
     width: 25px;
     height: 20px;
   }
-}
+}
+
+.big-table {
+  .form-select-table {
+    .n-base-select-menu__empty {
+      display: none;
+    }
+  }
+}

package/packages/big-table/src/bigTableProps.ts

@@ -120,6 +120,11 @@ const bigTableProps = {
   // 曾经的mapActions
   resetInlineBatchEdit: Function,
   resetBatchEditRowStatus: Function,
+
+  querySelectTableList: {
+    type: Function,
+    default: () => Promise.resolve({ rows: [], pageCount: 0 })
+  }
 };
 
 export default bigTableProps;

package/packages/big-table/src/bigTableState.ts

@@ -57,6 +57,7 @@ const bigTableState = {
   fieldLength: 0,
   originFormatList: [],
   isSaveForm: false,
+  editConfig: { trigger: 'manual', mode: 'cell', autoClear: false, showIcon: false }
 };
 
 export default bigTableState;

package/packages/big-table/src/components/edit-form/edit-input.vue

@@ -0,0 +1,19 @@
+<script lang="tsx">
+import { defineComponent, ref, reactive } from 'vue'
+import { NInput } from 'naive-ui'
+
+export default defineComponent({
+  name: 'EditInput',
+  inheritAttrs: false,
+  components: {
+    NInput
+  },
+  setup (props, { attrs, slots, emit }) {
+    
+    return () => [
+      <NInput {...attrs} />
+    ]
+  }
+})
+</script>
+<style lang="less" scoped></style>

package/packages/big-table/src/components/edit-form/edit-select-table.vue

@@ -0,0 +1,127 @@
+<script lang="tsx">
+import { defineComponent, ref, reactive } from 'vue'
+import { NSelect, NPagination, NEmpty, NSpin, NSpace } from 'naive-ui'
+import CGrid from '~/grid'
+import vexutils from '@/utils/vexutils'
+
+export default defineComponent({
+  name: 'EditSelectTable',
+  inheritAttrs: false,
+  components: {
+    NSelect,
+    CGrid,
+    NPagination,
+    NEmpty,
+    NSpin,
+    NSpace
+  },
+  props: {
+    row: {
+      type: Object,
+      default: {}
+    },
+    col: {
+      type: Object,
+      default: {}
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:value'],
+  setup (props, { attrs, slots, emit }) {
+    const state = reactive({
+      value: props.value,
+      row: JSON.parse(JSON.stringify(props.row)),
+      page: 1,
+      pageCount: 0,
+      keyword: '',
+      data: [],
+      columns: JSON.parse(JSON.stringify(props.col.tableColumn)),
+      loading: false,
+      show: true
+    })
+
+    const selectTableFocus = () => {
+      state.show = true
+      state.page = 1
+      state.keyword = ''
+      state.pageCount = 0
+      querySelectTableList()
+    }
+    const querySelectTableList = async () => {
+      state.loading = true
+      const obj = {
+        page: state.page,
+        keyword: state.keyword
+      }
+      const { data, pageCount } = await props.col.querySelectTableList(obj)
+      state.data = data
+      state.pageCount = pageCount
+      state.loading = false
+    }
+    let selectTableSearch = (value: string) => {
+      console.log('keyword', value)
+      state.keyword = value
+      querySelectTableList()
+    }
+    selectTableSearch = vexutils.debounce(selectTableSearch, 800)
+    const getSelectTableGrid = () => {
+      const config = {
+        border: 'outer',
+        resizable: true,
+        autoResize: true,
+        showOverflow: true,
+        showHeaderOverflow: true,
+        highlightHoverRow: true,
+        highlightCurrentRow: true,
+        maxHeight: '500',
+        align: 'center',
+        columns: state.columns,
+        data: state.data
+      }
+      return <CGrid {...config} onCellClick={(data: any) => onCellClick(data)}>{{
+        empty: () => <NEmpty description="无数据" />
+      }}</CGrid>
+    }
+    const onCellClick = (data: any) => {
+      emit('update:value', data.row?.[props.col.columnName]);
+      state.show = false
+    }
+    const getPagination = () => {
+      const pagination = () => {
+        return <NPagination
+          v-model={[state.page, 'page']} 
+          pageCount={state.pageCount}
+          onUpdatePage={(page: number) => querySelectTableList()}
+        />
+      }
+      return <NSpace justify="space-between" align="center" style="margin-top: 5px">{[`共${state.pageCount}条`, pagination()]}</NSpace>
+    }
+    
+    return () => [
+      <NSelect
+        class="form-select-table"
+        options={[]}
+        consistentMenuWidth={false}
+        clearable
+        filterable
+        to={false}
+        show={state.show}
+        loading={state.loading}
+        onFocus={selectTableFocus}
+        onBlur={() => state.show = false}
+        onSearch={selectTableSearch}
+      >{{
+        action: () => state.loading ? <NSpace justify="center"><NSpin class="spin" size="small" /></NSpace> : [getSelectTableGrid(), state.pageCount ? getPagination() : null]
+      }}</NSelect>
+    ]
+  }
+})
+</script>
+<style lang="less" scoped>
+.spin {
+  margin: 80px auto;
+}
+</style>

package/packages/big-table/src/components/edit-form/edit-select.vue

@@ -0,0 +1,36 @@
+<script lang="tsx">
+import { defineComponent, ref, reactive } from 'vue'
+import { NSelect } from 'naive-ui'
+
+export default defineComponent({
+  name: 'EditSelect',
+  inheritAttrs: false,
+  components: {
+    NSelect
+  },
+  props: {
+    col: {
+      type: Object,
+      default: {}
+    }
+  },
+  setup (props, { attrs, slots, emit }) {
+    const state = reactive({
+      options: JSON.parse(JSON.stringify(props.col.options || []))
+    })
+    
+    return () => [
+      <NSelect
+        {...attrs} 
+        options={state.options}
+        consistentMenuWidth={false}
+        clearable
+        filterable
+        to={false}
+        placeholder="请选择"
+      />
+    ]
+  }
+})
+</script>
+<style lang="less" scoped></style>