cnhis-design-vue 3.0.9 → 3.1.2

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

@@ -1,6 +1,7 @@
 <script lang="tsx">
 import { defineComponent, ref, reactive } from 'vue'
 import { NSelect } from 'naive-ui'
+import vexutils from '@/utils/vexutils.js'
 
 export default defineComponent({
   name: 'EditSelect',
@@ -26,8 +27,12 @@ export default defineComponent({
   setup (props, { attrs, slots, emit }) {
     
     const state = reactive({
-      options: [] as any
+      options: [] as any,
+      loading: false,
+      keyword: '',
+      config: {} as any
     })
+
     const setOptions = async () => {
       if (props.col.options) {
         state.options = JSON.parse(JSON.stringify(props.col.options))
@@ -35,29 +40,52 @@ export default defineComponent({
         // 此处需要缓存第一次请求到的options,不需要每次都请求,
         // 此处的row参数应当是selectTable的row
         const optionsName = `${props.col.columnName}_options`
-        state.options = props.row[optionsName] || await props.col.queryOptions()
-        if (!props.row[optionsName]) {
-          emit('setOptions', state.options)
+        const obj = {
+          keyword: state.keyword,
+          row: props.row, 
+          column: props.col, 
+          index: props.index
         }
+        // state.options = props.row[optionsName] || await props.col.queryOptions(obj)
+        state.options = await props.col.queryOptions(obj)
+        state.loading = false
+        // if (!props.row[optionsName]) {
+          emit('setOptions', state.options)
+        // }
       }
     }
-
-    setOptions()
-
+    
+    let selectSearch = (value: string) => {
+      state.keyword = value
+      state.loading = true
+      setOptions()
+    }
+    selectSearch = vexutils.debounce(selectSearch, 800)
     const onUpdateValue = (value: any[] | string | number | null) => {
       emit('formChange', { value, row: props.row, column: props.col, index: props.index })
     }
 
-    console.log(attrs) 
+    const init = () => {
+      if (props.col.options) {
+        setOptions()
+      } else {
+        state.config.remote = true
+        state.config.onSearch = selectSearch
+        // 初始化搜索
+        selectSearch('')    
+      }
+    }
+    init()
     return () => [
       <NSelect
         {...attrs} 
+        {...state.config}
         options={state.options}
         consistentMenuWidth={false}
         clearable
         filterable
-        to={false}
         placeholder="请选择"
+        loading={state.loading}
         onUpdateValue={onUpdateValue}
       />
     ]

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

@@ -110,12 +110,11 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
         return params.row[item.formatMap.label]
       }
       if (item.options) {
-        return item.options.find((v: any) => v.value == value)?.label || ''
+        return item.options.find((v: any) => v.value == value)?.label || value || ''
       }
       if (item.queryOptions) {
-        return (params.row[`${item.columnName}_options`]?.find((v: any) => v.value === value)?.label) || ''
+        return (params.row[`${item.columnName}_options`]?.find((v: any) => v.value === value)?.label) || value || ''
       }
-      return value
     } 
     return value
   }

package/packages/button-print/src/ButtonPrint.vue

@@ -1,45 +1,46 @@
 <template>
-  <span @click="handleClickWrap">
-    <NDropdown
-      placement="bottom-start"
-      :show="state.visible"
-      @clickoutside="handleClickOutside"
-      :options="options"
-      @select="handleSelect"
+  <n-dropdown
+    class="rowFoldHideBtnList-dropdown"
+    placement="bottom-start"
+    trigger="click"
+    :show="state.visible"
+    @clickoutside="handleClickOutside"
+    :options="options"
+    @select="handleSelect"
+    :render-label="renderLabel"
+  >
+    <slot
+      name="button" 
+      :handleClickPrintBtn="handleClickBtn"
+      :printSpinning="state.spinning" 
+      :printbtnText="btnText"
+      :printVisible="state.visible"
     >
-      <slot
-        name="button" 
-        :handleClickPrintBtn="handleClickBtn"
-        :printSpinning="state.spinning" 
-        :printbtnText="btnText"
-        :printVisible="state.visible"
-      >
-        <NButton class="dropdown-button" style="margin: 0 8px 8px 0" @click.stop="handleClickBtn">
-          <NIcon v-if="state.spinning" :component="Reload" style="line-height: 10px" />
-          {{ btnText }}
-          <NIcon :component="ChevronDown" />
-        </NButton>
-      </slot>
-    </NDropdown>
+      <n-button class="dropdown-button" style="margin: 0 8px 8px 0" @click.stop="handleClickBtn">
+        <!-- <n-spin v-show="state.spinning" size="small"></n-spin> -->
+        {{ btnText }}
+        <n-icon :component="ChevronDown" />
+      </n-button>
+    </slot>
+  </n-dropdown>
 
-    <IdentityVerification
-      v-model="state.identityVerification.visible"
-      v-bind="$attrs"
-      @success="verifiySuccess"
-    ></IdentityVerification>
-  </span>
+  <IdentityVerification
+    v-model="state.identityVerification.visible"
+    v-bind="$attrs"
+    @success="verifiySuccess"
+  ></IdentityVerification>
 </template>
 
-<script lang="ts">
+<script lang="tsx">
 import create from '@/core/create.js';
 export default create({
   name: "ButtonPrint"
 })
 </script>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
-import { NDropdown, NButton, NIcon } from 'naive-ui'
+import { NDropdown, NButton, NIcon, NSpin } from 'naive-ui'
 import { ChevronDown, Reload } from "@vicons/ionicons5";
 import { useMessage } from 'naive-ui'
 import type { DropdownOption } from 'naive-ui'
@@ -51,7 +52,6 @@ import moment from 'moment';
 (window as any).$message = useMessage()
 let printInstance: any = null;
 
-// 在.vue文件中使用导入的interface会报错，提示要使用字面量类型，当前在github上vue的issue已经有这个问题了，目前还没解决
 interface Props {
   btnText?: string
   printText?: string
@@ -65,6 +65,8 @@ interface Props {
   queryTemplateParams?: Function
   strategy?: string
   printParams?: any[]
+  clickPrevFn?: Function,
+  noDataMsg?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   params: () => ([]),
@@ -78,8 +80,10 @@ const props = withDefaults(defineProps<Props>(), {
   queryPrintFormatByNumber: () => Promise.resolve({}),
   queryTemplateParams: () => Promise.resolve({}),
   strategy: 'MULTI',
+  clickPrevFn: () => Promise.resolve(true),
+  noDataMsg: '请选中需要打印的数据'
 });
-const emit = defineEmits(['success', 'error']);
+const emit = defineEmits(['success', 'error', 'clickoutside']);
 
 const state = reactive({
   spinning: false,
@@ -117,6 +121,9 @@ const currentFormatItem = computed(() => {
 })
 const formatTitle = computed(() => (currentFormatItem.value as any).name || '格式选择')
 
+const renderLabel = (option: DropdownOption) => {
+  return <span class={{'active': option.key === state.currentFormatId}}>{option.label}</span>
+}
 const getTemplateIdByFormatId = (id: string | number) => {
   let find: any = state.formatList.find((item: any) => item.id === id);
   return find.templateId;
@@ -266,21 +273,13 @@ const handleSelect = (key: string) => {
       break;
     default:
       state.currentFormatId = key;
+      state.visible = false
       break;
   }
 }
 const handleClickOutside = () => {
   state.visible = false;
-}
-const handleClickWrap = () => {
-  setTimeout(() => {
-    state.visible = true;
-  }, 0);
-}
-const setTimeoutSpin = () => {
-  (state as any).spinTimer = setTimeout(() => {
-    state.spinning = true;
-  }, 1500);
+  emit('clickoutside')
 }
 const instantiatePrintSDK = () => {
   if (printInstance) return false;
@@ -314,15 +313,9 @@ const formatFormatList = (list: any[]): any => {
 
   return formatList;
 }
-const setLoaded = () => {
-  state.spinning = false;
-  if (!state.spinTimer) return false;
-  clearTimeout(state.spinTimer);
-  state.spinTimer = null;
-}
 const requestError = () => {
   state.isInited = false;
-  setLoaded();
+  state.spinning = false;
   setTimeout(() => {
     state.visible = false;
   }, 0);
@@ -376,6 +369,7 @@ const initCRM = async (formatListResult: any) => {
   state.formatList = formatListResult ? formatFormatList(formatListResult.obj) : [];
   console.log('formatListResult', formatListResult)
   state.currentFormatId = getDefaultFormatId(state.formatList, 'defaultFlag');
+  setOptions()
 
   if (!state.currentFormatId) {
     (window as any).$message.error('获取打印格式失败，请联系管理员！');
@@ -392,24 +386,29 @@ const initCRM = async (formatListResult: any) => {
   } else {
     return requestError();
   }
-
   state.printParams = formatParams(state.templateParams, props.params);
 }
 const init = async () => {
   if (state.isInited) return true;
   state.isInited = true;
 
-  setTimeoutSpin();
+  state.spinning = true;
 
   instantiatePrintSDK();
   const formatListResult = await props.queryPrintFormatByNumber()
   await initCRM(formatListResult);
 
-  setLoaded();
+  state.spinning = false;
 
   return true;
 }
 const handleClickBtn = async () => {
+  const status = await props.clickPrevFn()
+  if (!status) return
+  if (!props.params?.length) {
+    (window as any).$message.warning(props.noDataMsg)
+    return
+  }
   if (!state.visible) {
     let result = await init();
     if (!result) return false;
@@ -473,3 +472,10 @@ watch(() => props.params,
   margin-bottom: 8px;
 }
 </style>
+<style lang="less">
+  .rowFoldHideBtnList-dropdown {
+    .n-dropdown-menu-wrapper span.active {
+      color: #5585f5;
+    }
+  }
+</style>

package/packages/button-print/src/components/IdentityVerification.vue

@@ -6,11 +6,11 @@
     :show="modelValue"
     :close-on-esc="false"
     :show-icon="false"
-    :style="{ width: style.width, maxHeight: style.height, overflowY: 'auto' }"
-    @after-leave="handleClickClose"
+    :style="{ width: style.width, overflowY: 'auto' }"
+    @close="handleClickClose"
   >
     <div class="content">
-      <NForm class="login-form" ref="formRef" :model="form" :rules="rules">
+      <NForm class="login-form-button-print" ref="formRef" :model="form" :rules="rules">
         <NFormItem path="account">
           <NInput v-model:value="form.account" placeholder="请输入账号" />
         </NFormItem>
@@ -61,7 +61,7 @@ const rules: FormRules = {
 }
 const style = {
   width: '416px',
-  height: '328px'
+  // height: '328px'
 }
 const formRef = ref<FormInst | null>(null)
 
@@ -99,22 +99,23 @@ watch(() => props.modelValue,
     
 </script>
 <style lang="less" scoped>
-.login-form {
-  padding-top: 15px;
-  &:deep(.n-input) {
-    height: 50px;
-    font-size: 14px;
-    color: #757575;
-    border-radius: 6px;
-  }
-}
 .login-form-button {
   width: 100%;
   height: 50px;
-  background: #2d7aff;
   border-radius: 24px;
-  border-color: #2d7aff !important;
   font-size: 16px;
   color: #ffffff;
 }
 </style>
+<style lang="less">
+.login-form-button-print {
+  padding-top: 15px;
+  .n-input {
+    height: 50px;
+    line-height: 50px;
+    font-size: 14px;
+    color: #757575;
+    border-radius: 6px;
+  }
+}
+</style>