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

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,131 @@
+<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', 'clickSelectTable'],
+  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) => {
+      state.keyword = value
+      querySelectTableList()
+    }
+    selectTableSearch = vexutils.debounce(selectTableSearch, 800)
+    // 初始化搜索
+    selectTableSearch('')
+    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) => {
+      const { row } = data
+      // emit('update:value', data.row?.[props.col.columnName])
+      emit('clickSelectTable', row)
+      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"
+        placeholder='请选择'
+        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,57 @@
+<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: () => {}
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['setOptions'],
+  setup (props, { attrs, slots, emit }) {
+    
+    const state = reactive({
+      options: [] as any
+    })
+    const setOptions = async () => {
+      if (props.col.options) {
+        state.options = JSON.parse(JSON.stringify(props.col.options))
+      } else {
+        // 此处需要缓存第一次请求到的options,不需要每次都请求,
+        // 此处的row参数应当是selectTable的row
+        const optionsName = `${props.col.columnName}_options`
+        state.options = props.row[optionsName] || await props.col.queryOptions(props.row.row)
+        if (!props.row[optionsName]) {
+          emit('setOptions', state.options)
+        }
+      }
+    }
+
+    setOptions()
+
+    return () => [
+      <NSelect
+        {...attrs} 
+        options={state.options}
+        consistentMenuWidth={false}
+        clearable
+        filterable
+        to={false}
+        placeholder="请选择"
+      />
+    ]
+  }
+})
+</script>
+<style lang="less" scoped></style>

package/packages/big-table/src/hooks/useEdit.ts

@@ -0,0 +1,73 @@
+import { computed, ref, reactive, watch, onMounted } from 'vue'
+
+export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
+  const initEditTable = async () => {
+    const { isEdit, fieldList } = props.columnConfig
+    if (!isEdit) return
+    const hasSelectTable = fieldList.find((v: any) => v.formType === 'selectTable')
+    if (!hasSelectTable) return
+    const record: any = {
+      initRow: true
+    }
+    props.columnConfig.fieldList.forEach((col: any) => {
+      if (col.columnName !== 'operatorColumn') {
+        record[col.columnName] = undefined
+      }
+    })
+    await xGrid.value.insertAt(record, -1)
+  }
+
+  const deleteRow = (row: any) => {
+    xGrid.value.remove(row)
+  }
+
+  const activeMethod = ({ row, rowIndex, column, columnIndex }: { row: any, rowIndex: number, column: any, columnIndex: number }) => {
+    const { isEdit, fieldList } = props.columnConfig
+    // console.log('activeMethod->', row, column)
+    if (isEdit) {
+      const selectTableObj = fieldList.find((v: any) => v.formType === 'selectTable')
+      const isEditCol = fieldList.find((v: any) => v.columnName === column.field)?.isEdit || false
+      if (selectTableObj) {
+        // const isOtherEditCol = Object.keys(row).some(v => v !== selectTableObj.columnName && v !== 'checked' && !!row[v])
+        if (isEditCol && ((column.field === selectTableObj.columnName && !row[column.field]) || (column.field !== selectTableObj.columnName && !row.initRow))) {
+          return true
+        } else {
+          return false
+        }
+      } else {
+        if (isEditCol) {
+          return true
+        } else {
+          return false
+        }
+      }
+    } else {
+      return false
+    }
+  }
+  
+  const onClickSelectTable = async (row: any) => {
+    const record: any = {
+      initRow: false,
+      row: JSON.parse(JSON.stringify(row))
+    }
+    props.columnConfig.fieldList.forEach((col: any) => {
+      if (col.columnName !== 'operatorColumn') {
+        record[col.columnName] = undefined
+        if (Object.keys(row).includes(col.columnName)) {
+          record[col.columnName] = row[col.columnName]
+        }
+      }
+    })
+    const getInsertRecords = xGrid.value.getInsertRecords()
+    await xGrid.value.insertAt(record, getInsertRecords.at(-1))
+    xGrid.value.clearActived()
+  }
+  
+  return {
+    initEditTable,
+    activeMethod,
+    deleteRow,
+    onClickSelectTable
+  }
+}

package/packages/big-table/src/hooks/useTableParse.ts

@@ -90,8 +90,8 @@ export const useTableParse = (formatData: Function) => {
       return "";
     }
 
-    const { mergedFeildExpression } = field.settingObj;
-    if (mergedFeildExpression) {
+    if (field.settingObj?.mergedFeildExpression) {
+      const { mergedFeildExpression } = field.settingObj
       const passList: any = [];
 
       // 合并字段

package/packages/button-print/index.ts

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

package/packages/drag-layout/index.ts

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

package/packages/grid/index.ts

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