bl-common-vue3 3.8.81 → 3.8.83

package/package.json

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

package/src/components/ColumnSetting/index.vue

@@ -4,6 +4,7 @@
     :visible="visible"
     :destroyOnClose="true"
     :width="1200"
+    wrapClassName="column-setting-drawer-wrap"
     :body-style="{
       paddingBottom: '80px',
       boxSizing: 'border-box',
@@ -17,8 +18,8 @@
         <a-button type="primary" ghost @click="restoreDefault">{{ t('ColumnSetting.index.391089-1') }}</a-button>
       </a-space>
     </template>
-    <div class="setting-content">
-      <div class="fake-table">
+    <div class="setting-content beauty-scroller-bar">
+      <div class="fake-table" :style="{ minWidth: tableMinWidth }">
         <div class="fake-table-tr fake-table-title">
           <div class="draggable-icon-box"></div>
           <div class="column" :style="columnStyle('name')">{{ t('ColumnSetting.index.391089-2') }}</div>
@@ -260,6 +261,14 @@ export default defineComponent({
       loadLanguageAsync(newLang);
     });
 
+    const tableMinWidth = computed(() => {
+      let width = 900;
+      if (props.hasExportSetting) width += 100;
+      if (props.hasSearchSetting) width += 100;
+      if (props.hasCountsSetting) width += 100;
+      return `${width}px`;
+    });
+
     const columnStyle = computed(() => {
       return (field) => {
         let _style = {
@@ -287,6 +296,7 @@ export default defineComponent({
       handleClose,
       onSubmit,
       restoreDefault,
+      tableMinWidth,
       columnStyle,
       isSystemAdmin
     };
@@ -303,6 +313,11 @@ export default defineComponent({
 .fake-table {
   border: 1px solid #f0f0f0;
 }
+.setting-content {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+}
 .fake-table-title {
   background: #fafafa;
   position: sticky;
@@ -341,4 +356,66 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
 }
+
+:global(.column-setting-drawer-wrap .ant-drawer-content-wrapper) {
+  max-width: 100vw;
+}
+
+@media (max-width: 767px) {
+  :global(.column-setting-drawer-wrap .ant-drawer-body) {
+    padding: 12px 8px 72px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-header) {
+    padding: 12px;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-title) {
+    min-width: 0;
+  }
+
+  :global(.column-setting-drawer-wrap .ant-drawer-extra) {
+    margin-left: 8px;
+  }
+
+  .setting-content {
+    padding-bottom: 6px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fake-table-title {
+    top: -12px;
+  }
+
+  .fake-table-tr {
+    min-height: 42px;
+
+    .column {
+      padding: 0 8px;
+      white-space: nowrap;
+    }
+  }
+
+  .drawer-footer {
+    padding: 8px;
+    gap: 8px;
+    align-items: stretch;
+
+    > div {
+      min-width: 0;
+    }
+
+    .text-right {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    :deep(.ant-btn) {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+  }
+}
 </style>

package/src/components/CustomTable/index.vue

@@ -192,8 +192,8 @@
       <Form layout="vertical">
         <a-row :gutter="12">
           <a-col
-            :sm="24"
-            :xs="24"
+            :sm="12"
+            :xs="12"
             :md="filterColSpan"
             v-for="(filter, filterIndex) in filterList"
             :key="filterIndex">
@@ -638,9 +638,9 @@
                 @customRequest="handleCustomRequest" />
             </FormItem>
           </a-col>
-          <a-col :sm="24" :xs="24" :md="filterColSpan">
+          <a-col :sm="12" :xs="12" :md="filterColSpan">
             <FormItem label=" ">
-              <a-space>
+              <a-space class="filter-action-space">
                 <a-button type="primary" @click="handleSearch">
                   <template #icon>
                     <bl-icon type="sousuo" />
@@ -4158,6 +4158,46 @@ export default defineComponent({
   }
 }
 
+.filter-action-space {
+  width: 100%;
+}
+
+@media (max-width: 767px) {
+  .filter-warp {
+    padding: 8px;
+
+    :deep(.ant-form-item) {
+      margin-bottom: 10px;
+    }
+
+    :deep(.ant-form-item-label) {
+      padding-bottom: 4px;
+
+      > label {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .filter-action-space {
+    display: flex;
+
+    :deep(.ant-space-item) {
+      flex: 1;
+      min-width: 0;
+    }
+
+    :deep(.ant-btn) {
+      width: 100%;
+      padding-left: 6px;
+      padding-right: 6px;
+    }
+  }
+}
+
 .ellipsisClamp {
   max-width: 100%;
   display: -webkit-box;

package/src/components/DictionarySetting/components/AddDictionary.vue

@@ -3,6 +3,7 @@
     :width="720"
     :visible="visible"
     :title="title"
+    wrapClassName="add-dictionary-modal-wrap"
     @cancel="handleClose"
     @ok="handleSubmit"
     :ok-text="t('common.button.ok')"
@@ -13,7 +14,7 @@
           width: '140px',
         },}">
       <a-row :wrap="true" :gutter="12">
-        <a-col :span="12">
+        <a-col :span="12" :xs="24" :sm="12">
           <a-form-item :label="t('components.AddDictionary.031362-0')" v-bind="validateInfos.sort">
             <a-input-number
               v-model:value="formData.sort"
@@ -24,7 +25,7 @@
             />
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <a-col :span="24" :xs="24">
           <a-form-item :label="t('components.AddDictionary.031362-1')" v-bind="validateInfos.label">
             <a-input
               v-model:value="formData.label"
@@ -37,7 +38,7 @@
             </a-input>
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <a-col :span="24" :xs="24">
           <a-form-item :label="t('components.AddDictionary.031362-3')" v-bind="validateInfos.value">
             <a-input
               v-model:value="formData.value"
@@ -45,7 +46,7 @@
             />
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <a-col :span="24" :xs="24">
           <a-form-item :label="t('components.AddDictionary.031362-5')" v-bind="validateInfos.css_class">
             <a-input
               v-model:value="formData.css_class"
@@ -53,7 +54,7 @@
             />
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="12" :xs="24" :sm="12">
           <a-form-item :label="t('components.AddDictionary.031362-7')" v-bind="validateInfos.color_type">
             <a-select
               v-model:value="formData.color_type"
@@ -74,12 +75,12 @@
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span="12">
+        <a-col :span="12" :xs="24" :sm="12">
           <a-form-item :label="t('common.table.status')" v-bind="validateInfos.status">
             <a-radio-group v-model:value="formData.status" :options="statusOptions" />
           </a-form-item>
         </a-col>
-        <a-col :span="24">
+        <a-col :span="24" :xs="24">
           <a-form-item :label="t('common.form.remarks')" v-bind="validateInfos.remark">
             <a-textarea
               :placeholder="t('common.please.enter')"
@@ -352,4 +353,41 @@ export default defineComponent({
 :deep(.ant-alert-with-description.ant-alert-no-icon) {
   padding: 6px 10px;
 }
+
+:global(.add-dictionary-modal-wrap .ant-modal) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  :global(.add-dictionary-modal-wrap .ant-modal) {
+    top: 8px;
+    max-width: calc(100vw - 16px);
+    margin: 0 auto;
+    padding-bottom: 8px;
+  }
+
+  :global(.add-dictionary-modal-wrap .ant-modal-content) {
+    max-height: calc(100vh - 16px);
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.add-dictionary-modal-wrap .ant-modal-body) {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  :deep(.ant-form-item) {
+    margin-bottom: 14px;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex: 0 0 96px !important;
+  }
+
+  :deep(.ant-form-item-control) {
+    min-width: 0;
+  }
+}
 </style>

package/src/components/DictionarySetting/index.vue

@@ -3,6 +3,7 @@
     :width="1000"
     :visible="visible"
     :title="t('DictionarySetting.index.757488-0')"
+    wrapClassName="dictionary-setting-modal-wrap"
     @cancel="handleCancel"
     :destroyOnClose="true"
     :footer="null"
@@ -10,10 +11,10 @@
   >
     <a-spin :spinning="spinning">
       <div class="content-box">
-        <div style="background: #f0f2f5">
-          <a-row style="padding: 10px; background: #fff; margin-bottom: 4px">
-            <a-space>
-              <Input :placeholder="t('DictionarySetting.index.734314-0')" v-model:value="keyWord" style="width: 340px"></Input>
+        <div class="search-box">
+          <a-row class="search-row">
+            <a-space class="search-space" :wrap="true">
+              <Input class="search-input" :placeholder="t('DictionarySetting.index.734314-0')" v-model:value="keyWord"></Input>
               <a-button type="primary" @click="handleSearch">
                 <template #icon>
                   <bl-icon
@@ -356,9 +357,26 @@ export default defineComponent({
 <style lang="less" scoped>
 .content-box {
   height: 695px;
+  max-height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
 }
+
+.search-box {
+  background: #f0f2f5;
+}
+
+.search-row {
+  padding: 10px;
+  background: #fff;
+  margin-bottom: 4px;
+}
+
+.search-input {
+  width: 340px;
+  max-width: 100%;
+}
+
 .setting-box {
   width: 100%;
   flex: 1;
@@ -385,4 +403,76 @@ export default defineComponent({
   white-space: nowrap;
   word-break: break-all;
 }
+
+:global(.dictionary-setting-modal-wrap .ant-modal) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  :global(.dictionary-setting-modal-wrap) {
+    overflow: hidden;
+  }
+
+  :global(.dictionary-setting-modal-wrap .ant-modal) {
+    top: 8px;
+    max-width: calc(100vw - 16px);
+    margin: 0 auto;
+    padding-bottom: 8px;
+  }
+
+  :global(.dictionary-setting-modal-wrap .ant-modal-content) {
+    max-height: calc(100vh - 16px);
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.dictionary-setting-modal-wrap .ant-modal-body) {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .content-box {
+    height: calc(100vh - 72px);
+    max-height: calc(100vh - 72px);
+  }
+
+  .search-row {
+    padding: 8px;
+  }
+
+  .search-space {
+    width: 100%;
+
+    :deep(.ant-space-item) {
+      &:first-child {
+        width: 100%;
+      }
+    }
+  }
+
+  .search-input {
+    width: 100%;
+  }
+
+  .setting-box {
+    flex-direction: column;
+
+    .setting-name {
+      width: 100%;
+      height: auto;
+      max-height: 156px;
+      padding-right: 0;
+      overflow-y: auto;
+      border-right: 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .types-content {
+      flex: 1;
+      min-height: 0;
+      padding-bottom: 8px;
+    }
+  }
+}
 </style>