bl-common-vue3 3.8.131 → 3.8.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.131",
+  "version": "3.8.133",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/components/CustomTable/index.vue

@@ -760,11 +760,11 @@
                 </a-button>
               </template>
 
-              <a-dropdown v-if="hasMoreAction">
+              <a-dropdown v-if="hasMoreAction" v-model:visible="moreActionVisible">
                 <template #overlay>
                   <a-menu>
                     <a-menu-item key="into" v-if="!excludeImport">
-                      <a-button type="text" @click.stop="handleImport">
+                      <a-button type="text" @click.stop="handleMoreAction(handleImport, $event)">
                         <template #icon>
                           <bl-icon type="daoru" />
                         </template>
@@ -772,7 +772,7 @@
                       </a-button>
                     </a-menu-item>
                     <a-menu-item key="derive" v-if="!excludeExport">
-                      <a-button type="text" @click.stop="handleExport">
+                      <a-button type="text" @click.stop="handleMoreAction(handleExport, $event)">
                         <template #icon>
                           <bl-icon type="daochu" />
                         </template>
@@ -782,7 +782,7 @@
                     <a-menu-item
                       v-if="showDictSetting && dictMenuAlias"
                       key="dictionary"
-                      @click.stop="handleDictionarySetting">
+                      @click.stop="handleMoreAction(handleDictionarySetting, $event)">
                       <a-button type="text">
                         <template #icon>
                           <bl-icon type="cidian" />
@@ -794,7 +794,7 @@
                     <a-menu-item
                       v-if="ApprovalProcessSettings && approvalList.length > 0"
                       key="Approval_process"
-                      @click.stop="handleApprovalProcess">
+                      @click.stop="handleMoreAction(handleApprovalProcess, $event)">
                       <a-button type="text">
                         <template #icon>
                           <bl-icon type="shenpiliucheng" />
@@ -806,7 +806,7 @@
                     <a-menu-item
                       v-if="showExpandFields"
                       key="expandFields"
-                      @click.stop="handleExpandFieldsSetting">
+                      @click.stop="handleMoreAction(handleExpandFieldsSetting, $event)">
                       <a-button type="text">
                         <template #icon>
                           <bl-icon type="tuozhanziduan" />
@@ -815,7 +815,7 @@
                       </a-button>
                     </a-menu-item>
                     <a-menu-item key="setting" v-if="tableId">
-                      <a-button type="text" @click.stop="handleColumnSetting">
+                      <a-button type="text" @click.stop="handleMoreAction(handleColumnSetting, $event)">
                         <template #icon>
                           <bl-icon type="lieshezhi" />
                         </template>
@@ -823,7 +823,7 @@
                       </a-button>
                     </a-menu-item>
                     <a-menu-item key="setting" v-if="dataMigration">
-                      <a-button type="text" @click.stop="handledataMigration">
+                      <a-button type="text" @click.stop="handleMoreAction(handledataMigration, $event)">
                         <template #icon>
                           <bl-icon type="shujuqianyi" />
                         </template>
@@ -844,7 +844,7 @@
                           </template>
                           <template v-for="(child) in item.children" :key="child.key">
                             <a-menu-item v-if="child?.show ?? true" :key="child.key">
-                              <a-button v-bind="{ ...(child?.props || {}), }" @click.stop="child?.onClick">
+                              <a-button v-bind="{ ...(child?.props || {}), }" @click.stop="handleMoreAction(child?.onClick, $event)">
                                 <template #icon v-if="buttonIconSlots.indexOf(`${child.key}`) > -1">
                                   <slot :name="`buttonIcon-${child.key}`"></slot>
                                 </template>
@@ -856,7 +856,7 @@
                       </template>
                       <template v-if="((item?.show ?? true) && !item?.children?.length)">
                         <a-menu-item :key="item.key">
-                          <a-button v-bind="{ ...(item?.props || {}), }" @click.stop="item?.onClick">
+                          <a-button v-bind="{ ...(item?.props || {}), }" @click.stop="handleMoreAction(item?.onClick, $event)">
                             <template
                               #icon
                               v-if="buttonIconSlots.indexOf(`${item.key}`) > -1">
@@ -1342,7 +1342,7 @@
       :url="requestInfo?.serviceUrl"
       :service="requestInfo?.service"
       :method="requestInfo?.serviceType"
-      :params="listParams"
+      :params="exportParams"
       :limit="exportLimit"
       :columnstitle="exportColumnsTitle"
       :merge_options="exportMergeOptions"
@@ -1878,6 +1878,7 @@ export default defineComponent({
   },
   setup(props, { slots, expose, emit, attrs }) {
     const state = reactive({
+      moreActionVisible: false,
       localLoading: false,
       selectedRowKeys: [],
       selectedRows: [],
@@ -1891,6 +1892,7 @@ export default defineComponent({
       dictMenuAlias: "", // 后端返回的字典标识
       isExport: false,
       listParams: {},
+      exportParams: {},
       exportResultData: [], // 导出结果处理
       importVisible: false,
       tableScrollHeight: 0,
@@ -2439,7 +2441,8 @@ export default defineComponent({
       let columnIndexObj = {};
       let haveSlot = false;
       cloneDeep(realColumns.value).forEach((columnItem, index) => {
-        // 从后往前处理
+        // 不导出的展示列可能没有 dataIndex，也可能返回 VNode，不能参与数据转换。
+        if (columnItem.exportHidden) return;
         let virtualDataIndex = replaceObjDataIndex(columnItem.dataIndex);
         if (columnItem.columnType) {
           columnIndexObj[virtualDataIndex] = {
@@ -2487,20 +2490,21 @@ export default defineComponent({
           localRowSelection.value?.selectedRowKeys
         );
       }
+      // 导出组件会更新分页并追加选中条件，使用快照避免污染列表的后续查询。
+      state.exportParams = cloneDeep(state.listParams);
+      state.exportParams.filters = (state.exportParams.filters || []).filter(
+        (item) => item.field !== "ids"
+      );
       if (localRowSelection.value?.selectedRowKeys.length > 0) {
-        state.listParams.filters.push({
+        state.exportParams.filters.push({
           field: "ids",
           type: "custom",
-          value: localRowSelection.value?.selectedRowKeys,
+          value: [...localRowSelection.value.selectedRowKeys],
         });
-      } else {
-        state.listParams.filters = state.listParams.filters.filter(
-          (item) => item.field != "ids"
-        );
       }
       if (props.customExport) {
         /* 自定义导出 */
-        props.customExport(state.listParams);
+        props.customExport(state.exportParams);
       } else {
         /* 默认导出 */
         state.isExport = true;
@@ -2814,6 +2818,12 @@ export default defineComponent({
       };
     });
 
+    // 菜单按钮使用 stop 阻止冒泡，需要主动收起，避免弹层打开后菜单仍遮挡操作。
+    const handleMoreAction = (callback, event) => {
+      state.moreActionVisible = false;
+      return callback?.(event);
+    };
+
     // 刷新表格数据
     const refresh = (isInit = false) => {
       state.hasDictionary = false;
@@ -2821,6 +2831,14 @@ export default defineComponent({
       loadData(isInit);
     };
 
+    // 业务端异步取得完整列定义后更新表头，保留当前筛选、分页和勾选状态。
+    const setColumns = async (columns) => {
+      state.defaultColumns = cloneDeep(columns || []);
+      state.initColumns = cloneDeep(state.defaultColumns);
+      await getLocalColumns();
+      createColumnSlots();
+    };
+
     const actionBtnShow = computed(
       () =>
         ({ item, text, record, index, column }) =>
@@ -4111,6 +4129,7 @@ export default defineComponent({
     expose({
       refresh,
       loadData,
+      setColumns,
       setExportData,
       getFilterList,
       clearData,
@@ -4370,6 +4389,7 @@ export default defineComponent({
       columnsProcess,
       getDateValueFormat,
       handleOperationClick,
+      handleMoreAction,
       refresh,
       roomClick,
       toOwnerDetail,

package/src/components/ExtraFieldsItem/date.js

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+export const EXTRA_DATE_FORMATS = Object.freeze({
+  1: 'YYYY-MM-DD',
+  2: 'YYYY-MM-DD HH:mm',
+  3: 'HH:mm',
+});
+
+// 兼容历史秒级值及日期类型调整；展示和再次保存均统一为分钟精度。
+export const formatExtraDate = (value, dateType) => {
+  if (value == null || value === '') return value;
+  const format = EXTRA_DATE_FORMATS[dateType];
+  if (!format) return value;
+  const parsed = dayjs(value, ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD', 'HH:mm', 'HH:mm:ss'], true);
+  return parsed.isValid() ? parsed.format(format) : value;
+};

package/src/components/ExtraFieldsItem/index.vue

@@ -65,10 +65,10 @@
           <a-date-picker v-model:value="value" :disabled="disabled" style="width: 100%" @change="changediv" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
         </div>
         <div v-if="data?.date_type == 2">
-          <a-date-picker show-time v-model:value="value" :disabled="disabled" style="width: 100%" @change="changediv" format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DD HH:mm" />
+          <a-date-picker :show-time="{ format: 'HH:mm', showSecond: false }" v-model:value="value" :disabled="disabled" style="width: 100%" @change="changediv" format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DD HH:mm" />
         </div>
         <div v-if="data?.date_type == 3">
-          <a-time-picker v-model:value="value" style="width: 100%" :disabled="disabled" @change="changediv" format="HH:mm" valueFormat="HH:mm" />
+          <a-time-picker :show-second="false" v-model:value="value" style="width: 100%" :disabled="disabled" @change="changediv" format="HH:mm" valueFormat="HH:mm" />
         </div>
       </div>
       <!--  下拉单选  -->
@@ -78,6 +78,7 @@
           v-model:value="value"
           style="width: 100%"
           :options="data?.option_value"
+          :allowClear="!data?.fill"
           @change="changediv"
           :disabled="disabled"
         ></a-select>
@@ -90,6 +91,7 @@
           v-model:value="value"
           style="width: 100%"
           :options="data?.option_value"
+          :allowClear="!data?.fill"
           @change="changediv"
           :disabled="disabled"
         ></a-select>
@@ -137,7 +139,7 @@
             :before-upload="beforeUpload"
             :accept="accept"
         >
-          <a-button v-if="value.length < data?.option_max">
+          <a-button v-if="!data?.option_max || value.length < data?.option_max">
             <UploadOutlined />
             {{ t('ExtraFieldsItem.index.831918-0') }}
           </a-button>
@@ -170,7 +172,8 @@
       </div>
       <!--  数字  -->
       <div v-if="data?.fields_type == 'number'">
-        {{data?.value || '--'}}
+        <!-- 数字 0 是有效字段值，只有未填写时才显示占位符。 -->
+        {{data?.value === '' ? '--' : (data?.value ?? '--')}}
       </div>
       <!--  单选  -->
       <div v-if="data?.fields_type == 'radio'">
@@ -196,7 +199,7 @@
       </div>
       <!--  日期时间  -->
       <div v-if="data?.fields_type == 'date'">
-        {{data?.value || '--'}}
+        {{formatExtraDate(data?.value, data?.date_type) || '--'}}
       </div>
       <!--  下拉单选  -->
       <div v-if="data?.fields_type == 'select_single'">
@@ -257,10 +260,11 @@
 </template>
 
 <script>
-import { cloneDeep } from "lodash";
+import { cloneDeep } from "lodash";
 import {
   defineComponent,
   reactive,
+  onUnmounted,
   ref,
   toRefs,
 } from "vue";
@@ -268,9 +272,11 @@ import {  message } from "ant-design-vue";
 import {PlusOutlined,DownloadOutlined,UploadOutlined,DeleteOutlined} from "@ant-design/icons-vue";
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
+import { formatExtraDate } from './date';
 
 export default defineComponent({
   name: "ExtraFieldsItem",
+  emits: ["close", "uploading"],
   components: {PlusOutlined , DownloadOutlined , UploadOutlined , DeleteOutlined},
   props: {
     Objectdata: {
@@ -306,6 +312,7 @@ export default defineComponent({
     }
 
     const handleInventoryUploadChange = (info) => {
+      emit('uploading', info.fileList.some((file) => file.status === 'uploading'));
       let resFileList = [...info.fileList];
       if (resFileList?.length) {
         resFileList.map((file, index) => {
@@ -359,19 +366,16 @@ export default defineComponent({
     // 上传视频
     const fileListVideo = ref([]);
     const handleChange = (info) => {
-      let resFileList = [...info.fileList];
-      let result = resFileList.slice(-1);
-      result = result[0];
-      if (result && result.response) {
+      emit('uploading', info.fileList.some((file) => file.status === 'uploading'));
+      // 连续选择附件会并行上传，应处理本次变化的文件，并保留其他未完成任务。
+      const result = info.file;
+      if (result?.status === 'done' && result.response) {
         if (result.response.code == 1000) {
-          let list = {}
-          list.fileUrl = result.response?.data?.fileUrl
-          list.name = resFileList.slice(-1)[0].name
-          state.value.push(list)
-          fileListVideo.value = []
+          state.value.push({fileUrl: result.response.data?.fileUrl, name: result.name});
         } else {
           message.warning(result.response.msg);
         }
+        fileListVideo.value = info.fileList.filter((file) => file.uid !== result.uid);
       }
       changediv()
     };
@@ -398,16 +402,18 @@ export default defineComponent({
           changediv()
         }
         if(state.data.fields_type == 'radio'){
-          state.value = state.data.value || ''
+          state.value = state.data.value ?? ''
         }
         if(state.data.fields_type == 'multiple_choice'){
-          state.value = state.data.value || ''
+          state.value = state.data.value || []
         }
         if(state.data.fields_type == 'date'){
-          state.value = state.data.value || ''
+          state.value = formatExtraDate(state.data.value, state.data.date_type) || ''
+          // 历史秒值同步到表单模型，保证未操作日期控件时再次保存也使用分钟精度。
+          if (state.data.value && state.value !== state.data.value) changediv()
         }
         if(state.data.fields_type == 'select_single'){
-          state.value = state.data.value || null
+          state.value = state.data.value ?? null
         }
         if(state.data.fields_type == 'select_multiple'){
           state.value = state.data.value || []
@@ -440,12 +446,15 @@ export default defineComponent({
 
     loadLanguageAsync(utils.getLang());
 
-    window.addEventListener('setBLLang', (event) => {
-      const newLang = event.newValue; // 获取新的语言值
-      loadLanguageAsync(newLang);
-    });
+    // 列表单元格会频繁卸载，必须同步释放语言事件监听。
+    const handleLanguageChange = (event) => {
+      loadLanguageAsync(event.newValue);
+    };
+    window.addEventListener('setBLLang', handleLanguageChange);
+    onUnmounted(() => window.removeEventListener('setBLLang', handleLanguageChange));
 
     return {
+      formatExtraDate,
       t,
       ...toRefs(state),
       init,

package/src/components/PublicExtensionField/components/ExtraFieldPreview.vue

@@ -0,0 +1,86 @@
+<template>
+  <aside class="extra-field-preview">
+    <div class="preview-heading"><span class="live-dot"></span>{{ t('PublicExtensionField.previewTitle') }}</div>
+    <div class="preview-card">
+      <div class="preview-section">{{ t('PublicExtensionField.previewSection') }}</div>
+      <label class="preview-label"><span v-if="field.fill" class="required-mark">*</span>{{ field.fields_name || t('PublicExtensionField.unnamed') }}</label>
+      <a-input v-if="field.fields_type === 'single_text'" v-model:value="value" :placeholder="placeholder" :maxlength="maxLength" />
+      <a-textarea v-else-if="field.fields_type === 'multiple_text'" v-model:value="value" :placeholder="placeholder" :maxlength="maxLength" :rows="3" />
+      <a-input-number v-else-if="field.fields_type === 'number'" v-model:value="value" :placeholder="placeholder" :min="minValue" :max="maxValue" class="preview-control" />
+      <a-radio-group v-else-if="field.fields_type === 'radio'" v-model:value="value" :options="options" />
+      <a-checkbox-group v-else-if="field.fields_type === 'multiple_choice'" v-model:value="value" :options="options" />
+      <a-select v-else-if="field.fields_type === 'select_single' || field.fields_type === 'select_multiple'"
+        v-model:value="value" :mode="field.fields_type === 'select_multiple' ? 'multiple' : undefined"
+        :options="options" :placeholder="t('common.please.choose')" :allowClear="!field.fill" class="preview-control" />
+      <template v-else-if="field.fields_type === 'date'">
+        <a-time-picker v-if="field.date_type == 3" v-model:value="value" format="HH:mm" value-format="HH:mm" :show-second="false" class="preview-control" />
+        <a-date-picker v-else v-model:value="value" :format="dateFormat" :value-format="dateFormat"
+          :show-time="field.date_type == 2 ? { format: 'HH:mm', showSecond: false } : false" class="preview-control" />
+      </template>
+      <!-- 维护预览不上传文件，避免试填配置时产生业务附件。 -->
+      <div v-else-if="field.fields_type === 'image' || field.fields_type === 'attachment'" class="upload-preview">
+        <PictureOutlined v-if="field.fields_type === 'image'" /><UploadOutlined v-else />
+        <div>{{ t(field.fields_type === 'image' ? 'ExtraFieldsItem.index.243488-0' : 'ExtraFieldsItem.index.831918-0') }}</div>
+      </div>
+    </div>
+    <p class="preview-description">{{ t('PublicExtensionField.previewHint') }}</p>
+    <div class="preview-note">{{ t(field.fill ? 'PublicExtensionField.requiredHint' : 'PublicExtensionField.optionalHint') }}</div>
+  </aside>
+</template>
+
+<script>
+import { computed, defineComponent, ref, watch } from 'vue';
+import { Input, InputNumber, Radio, Checkbox, Select, DatePicker, TimePicker } from 'ant-design-vue';
+import { PictureOutlined, UploadOutlined } from '@ant-design/icons-vue';
+import { t } from '../../../locale';
+import { EXTRA_DATE_FORMATS } from '../../ExtraFieldsItem/date';
+
+export default defineComponent({
+  name: 'ExtraFieldPreview',
+  components: {
+    'a-input': Input, 'a-textarea': Input.TextArea, 'a-input-number': InputNumber,
+    'a-radio-group': Radio.Group, 'a-checkbox-group': Checkbox.Group,
+    'a-select': Select, 'a-date-picker': DatePicker, 'a-time-picker': TimePicker,
+    PictureOutlined, UploadOutlined,
+  },
+  props: { field: { type: Object, required: true } },
+  setup(props) {
+    const value = ref();
+    const options = computed(() => (props.field.option_value || []).filter((item) => item.label));
+    const placeholder = computed(() => props.field.placeholder || t('common.please.enter'));
+    const dateFormat = computed(() => EXTRA_DATE_FORMATS[props.field.date_type] || EXTRA_DATE_FORMATS[1]);
+    const toLimit = (limit) => limit === '' || limit == null ? undefined : Number(limit);
+    const minValue = computed(() => toLimit(props.field.min_length));
+    const maxValue = computed(() => toLimit(props.field.max_length));
+    const maxLength = computed(() => maxValue.value > 0 ? maxValue.value : undefined);
+    watch(() => [props.field.fields_type, props.field.date_type, props.field.default_value], () => {
+      if (['single_text', 'multiple_text', 'number'].includes(props.field.fields_type)) {
+        value.value = props.field.default_value ?? '';
+      } else {
+        value.value = ['select_multiple', 'multiple_choice'].includes(props.field.fields_type) ? [] : undefined;
+      }
+    }, { immediate: true });
+    watch(() => [props.field.fill, options.value], () => {
+      if (props.field.fields_type === 'select_single' && props.field.fill && options.value.length === 1) {
+        value.value = options.value[0].value;
+      }
+    }, { immediate: true, deep: true });
+    return { t, value, options, placeholder, dateFormat, minValue, maxValue, maxLength };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.extra-field-preview { padding: 24px; background: #f7f9fc; border-left: 1px solid #edf0f4; }
+.preview-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #758499; font-size: 12px; }
+.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #52b89a; }
+.preview-card { padding: 20px 18px 24px; border: 1px solid #e4eaf2; border-radius: 6px; background: #fff; }
+.preview-section { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #edf0f4; color: #718095; font-size: 13px; }
+.preview-label { display: block; margin-bottom: 10px; overflow-wrap: anywhere; }
+.required-mark { margin-right: 4px; color: #ff4d4f; }
+.preview-control { width: 100%; }
+.preview-description { margin: 16px 0; color: #8b97a8; line-height: 1.8; font-size: 12px; }
+.preview-note { padding: 9px 12px; border-radius: 4px; background: #edf3fb; color: #6584a9; font-size: 12px; }
+.upload-preview { padding: 24px 10px; text-align: center; border: 1px dashed #cfd9e6; border-radius: 4px; color: #8295ae; }
+@media (max-width: 767px) { .extra-field-preview { border-left: 0; border-top: 1px solid #edf0f4; } }
+</style>