cnhis-design-vue 0.3.5-beta → 0.3.8-beta

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>