@qqt-product/system 0.0.2 → 0.0.16

package/src/lib/components/QcustomConfigEdit/component/AddDictCodeModal.vue

@@ -1,140 +1,140 @@
-<template>
-  <div>
-    <vxe-modal title="数据字典" width="760" v-model="visible" :confirmLoading="confirmLoading" type="confirm" show-footer @confirm="selectedOk" @cancel="close">
-      <a-radio-group v-model="inputType" button-style="solid" style="margin-bottom: 12px" @change="hanldeRadioChange">
-        <a-radio-button value="sysDictCode"> 系统字典 </a-radio-button>
-        <a-radio-button value="dictCode"> 企业字典 </a-radio-button>
-        <a-radio-button value="manual"> 手动输入 </a-radio-button>
-      </a-radio-group>
-      <div v-if="inputType === 'manual'">
-        <a-input v-model="dataSource" placeholder="请输入数据源地址或字典编码" />
-      </div>
-      <div v-else>
-        <a-spin :spinning="loading">
-          <a-input-search placeholder="请输入关键字" style="margin-bottom: 8px" v-model="keyWord" @search="onSearch" enterButton />
-          <vxe-grid
-            border
-            resizable
-            show-overflow
-            highlight-hover-row
-            max-height="320"
-            row-id="id"
-            size="mini"
-            :loading="loading"
-            ref="selectGrid"
-            :seq-config="{ startIndex: ((tablePage.currentPage as number) - 1) * (tablePage.pageSize as number) }"
-            :data="tableData"
-            :pager-config="tablePage"
-            :radio-config="{ highlight: true, reserve: true, trigger: 'row' }"
-            :columns="columns"
-            @page-change="handlePageChange"
-          >
-          </vxe-grid>
-        </a-spin>
-      </div>
-    </vxe-modal>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { HttpClient, INJECT_HTTP, MapObjectNoneType } from '../../../utils/global.types'
-import { message } from '@qqt-product/ui'
-import type { VxeGridPropTypes, VxeTableDefines } from 'vxe-table'
-export default defineComponent({
-  name: 'AddDictCodeModal',
-  inject: [INJECT_HTTP],
-  data() {
-    return {
-      visible: false,
-      loading: false,
-      confirmLoading: false,
-      inputType: 'sysDictCode',
-      dataSource: '',
-      keyWord: '',
-      columns: [
-        { type: 'radio', width: 40 },
-        { type: 'seq', title: '序号', width: 60 },
-        { field: 'dictCode', title: '字典编码' },
-        { field: 'dictName', title: '字典名称' },
-        { field: 'description', title: '字典描述' },
-      ] as VxeTableDefines.ColumnOptions[],
-      url: '',
-      queryParams: {},
-      tableData: [],
-      tablePage: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 20,
-        align: 'left',
-        pageSizes: [20, 50, 100, 200, 500],
-        layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'PageCount', 'Total'],
-        perfect: true,
-      } as VxeGridPropTypes.PagerConfig,
-    }
-  },
-  methods: {
-    hanldeRadioChange(e: MapObjectNoneType) {
-      let value = e.target.value || ''
-      let arr = ['dictCode', 'sysDictCode']
-      if (arr.includes(value)) {
-        this.loadData()
-      }
-    },
-    loadData() {
-      this.loading = true
-      let params = { pageSize: this.tablePage.pageSize, pageNo: this.tablePage.currentPage, keyWord: this.keyWord }
-      const url = this.inputType === 'sysDictCode' ? '/base/dict/listSys' : '/base/dict/list'
-      let http = this.http as HttpClient
-      http
-        .get({ url, params })
-        .then((res) => {
-          if (res.success) {
-            let list = res.result.records || []
-            this.tableData = list
-            this.tablePage.total = res.result.total
-            let selectGrid = this.$refs.selectGrid as MapObjectNoneType
-            if (this.$refs.selectGrid && selectGrid.clearRadioReserve) {
-              selectGrid.clearRadioReserve()
-            }
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-    open() {
-      // 清空默认值
-      this.dataSource = ''
-      this.keyWord = ''
-      this.loadData()
-      this.visible = true
-    },
-    close() {
-      this.visible = false
-    },
-    selectedOk() {
-      let selectedData = {}
-      if (this.inputType == 'manual' && this.dataSource) {
-        selectedData = { dictCode: this.dataSource }
-      } else {
-        if (this.$refs.selectGrid) selectedData = (this.$refs.selectGrid as MapObjectNoneType).getRadioRecord()
-      }
-      if (selectedData) {
-        this.visible = false
-        this.$emit('ok', selectedData)
-      } else {
-        message.warning('请选择数据')
-      }
-    },
-    handlePageChange({ currentPage, pageSize }: MapObjectNoneType) {
-      this.tablePage.currentPage = currentPage
-      this.tablePage.pageSize = pageSize
-      this.loadData()
-    },
-    onSearch(keyWord: string) {
-      this.keyWord = keyWord
-      this.loadData()
-    },
-  },
-})
-</script>
+<template>
+  <div>
+    <vxe-modal title="数据字典" width="760" v-model="visible" :confirmLoading="confirmLoading" type="confirm" show-footer @confirm="selectedOk" @cancel="close">
+      <a-radio-group v-model="inputType" button-style="solid" style="margin-bottom: 12px" @change="hanldeRadioChange">
+        <a-radio-button value="sysDictCode"> 系统字典 </a-radio-button>
+        <a-radio-button value="dictCode"> 企业字典 </a-radio-button>
+        <a-radio-button value="manual"> 手动输入 </a-radio-button>
+      </a-radio-group>
+      <div v-if="inputType === 'manual'">
+        <a-input v-model="dataSource" placeholder="请输入数据源地址或字典编码" />
+      </div>
+      <div v-else>
+        <a-spin :spinning="loading">
+          <a-input-search placeholder="请输入关键字" style="margin-bottom: 8px" v-model="keyWord" @search="onSearch" enterButton />
+          <vxe-grid
+            border
+            resizable
+            show-overflow
+            highlight-hover-row
+            max-height="320"
+            row-id="id"
+            size="mini"
+            :loading="loading"
+            ref="selectGrid"
+            :seq-config="{ startIndex: ((tablePage.currentPage as number) - 1) * (tablePage.pageSize as number) }"
+            :data="tableData"
+            :pager-config="tablePage"
+            :radio-config="{ highlight: true, reserve: true, trigger: 'row' }"
+            :columns="columns"
+            @page-change="handlePageChange"
+          >
+          </vxe-grid>
+        </a-spin>
+      </div>
+    </vxe-modal>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { HttpClient, INJECT_HTTP, MapObjectNoneType } from '../../../utils/global.types'
+import { message } from '@qqt-product/ui'
+import type { VxeGridPropTypes, VxeTableDefines } from 'vxe-table'
+export default defineComponent({
+  name: 'AddDictCodeModal',
+  inject: [INJECT_HTTP],
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      confirmLoading: false,
+      inputType: 'sysDictCode',
+      dataSource: '',
+      keyWord: '',
+      columns: [
+        { type: 'radio', width: 40 },
+        { type: 'seq', title: '序号', width: 60 },
+        { field: 'dictCode', title: '字典编码' },
+        { field: 'dictName', title: '字典名称' },
+        { field: 'description', title: '字典描述' },
+      ] as VxeTableDefines.ColumnOptions[],
+      url: '',
+      queryParams: {},
+      tableData: [],
+      tablePage: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 20,
+        align: 'left',
+        pageSizes: [20, 50, 100, 200, 500],
+        layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'PageCount', 'Total'],
+        perfect: true,
+      } as VxeGridPropTypes.PagerConfig,
+    }
+  },
+  methods: {
+    hanldeRadioChange(e: MapObjectNoneType) {
+      let value = e.target.value || ''
+      let arr = ['dictCode', 'sysDictCode']
+      if (arr.includes(value)) {
+        this.loadData()
+      }
+    },
+    loadData() {
+      this.loading = true
+      let params = { pageSize: this.tablePage.pageSize, pageNo: this.tablePage.currentPage, keyWord: this.keyWord }
+      const url = this.inputType === 'sysDictCode' ? '/base/dict/listSys' : '/base/dict/list'
+      let http = this.http as HttpClient
+      http
+        .get({ url, params })
+        .then((res) => {
+          if (res.success) {
+            let list = res.result.records || []
+            this.tableData = list
+            this.tablePage.total = res.result.total
+            let selectGrid = this.$refs.selectGrid as MapObjectNoneType
+            if (this.$refs.selectGrid && selectGrid.clearRadioReserve) {
+              selectGrid.clearRadioReserve()
+            }
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    open() {
+      // 清空默认值
+      this.dataSource = ''
+      this.keyWord = ''
+      this.loadData()
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    selectedOk() {
+      let selectedData = {}
+      if (this.inputType == 'manual' && this.dataSource) {
+        selectedData = { dictCode: this.dataSource }
+      } else {
+        if (this.$refs.selectGrid) selectedData = (this.$refs.selectGrid as MapObjectNoneType).getRadioRecord()
+      }
+      if (selectedData) {
+        this.visible = false
+        this.$emit('ok', selectedData)
+      } else {
+        message.warning('请选择数据')
+      }
+    },
+    handlePageChange({ currentPage, pageSize }: MapObjectNoneType) {
+      this.tablePage.currentPage = currentPage
+      this.tablePage.pageSize = pageSize
+      this.loadData()
+    },
+    onSearch(keyWord: string) {
+      this.keyWord = keyWord
+      this.loadData()
+    },
+  },
+})
+</script>

package/src/lib/components/QcustomConfigEdit/component/regexComponent.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, watch, ref } from 'vue'
 import { regExpOptions } from '../../../../lib/utils/regexp'
 
 interface rexgArryTs {
@@ -9,13 +9,9 @@ interface rexgArryTs {
 
 export default defineComponent({
   name: 'regexComponent',
-  emits: ['updateInfo', 'change'],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  emits: ['updateInfo', 'change', 'update:modelValue'],
   props: {
-    value: {
+    modelValue: {
       type: String || Number,
       default: '',
     },
@@ -30,31 +26,35 @@ export default defineComponent({
       default: '',
     },
   },
-  data() {
-    return {
-      dataFormatOptions: ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss'],
-      realVue: '',
-    }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(val) {
-        this.realVue = val
+  setup(props, ctx) {
+    const realVal = ref('')
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        realVal.value = val
       },
-    },
-  },
-  methods: {
-    selectChange(val: string | number) {
+      {
+        immediate: true,
+      },
+    )
+
+    const selectChange = (val: string | number) => {
       if (val) {
         const { msg = '' } = regExpOptions.find((n) => n.value === val) as rexgArryTs
-        this.$emit('updateInfo', { msg }) // 正则验证提示语
-        this.$emit('change', val)
+        ctx.emit('updateInfo', { msg }) // 正则验证提示语
+        ctx.emit('update:modelValue', val)
+        ctx.emit('change', val)
       } else {
-        this.$emit('updateInfo', { msg: '' }) // 正则验证提示语
-        this.$emit('change', '')
+        ctx.emit('updateInfo', { msg: '' }) // 正则验证提示语
+        ctx.emit('update:modelValue', '')
+        ctx.emit('change', '')
       }
-    },
+    }
+    return {
+      realVal,
+      selectChange,
+    }
   },
   render() {
     const opts = regExpOptions.map((n) => <a-select-option value={n.value}>{n.label}</a-select-option>)
@@ -62,7 +62,7 @@ export default defineComponent({
       allowClear: true,
     }
     const $EL = (
-      <a-select style={{ width: '100%' }} vModel={this.realVue} onChange={this.selectChange} {...{ props }}>
+      <a-select style={{ width: '100%' }} v-model={[this.realVal, 'value']} onChange={this.selectChange} {...props}>
         {opts}
       </a-select>
     )