bl-common-vue3 3.8.80 → 3.8.82

package/package.json

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

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" />
@@ -884,18 +884,20 @@
       <template #bodyCell="{ text, record, index, column }">
         <template v-if="column && column?.key">
           <template v-if="column?.columnType === 'security'">
-            <span>
-              {{ getSecurityDisplayValue(record, column) }}
-            </span>
-            <a-button
-              type="link"
-              size="small"
-              style="padding: 0 4px"
-              v-if="shouldShowSecurityRowBtn(record, column)"
-              @click.stop="toggleSecurityValue(record, column)">
-              <EyeInvisibleOutlined v-if="isSecurityRowOn(record, column)" />
-              <EyeOutlined v-else />
-            </a-button>
+            <div style="display: flex; align-items: center; gap: 4px">
+              <span>
+                {{ getSecurityDisplayValue(record, column) }}
+              </span>
+              <a-button
+                type="link"
+                size="small"
+                style="padding: 0 4px"
+                v-if="shouldShowSecurityRowBtn(record, column)"
+                @click.stop="toggleSecurityValue(record, column)">
+                <EyeInvisibleOutlined v-if="isSecurityRowOn(record, column)" />
+                <EyeOutlined v-else />
+              </a-button>
+            </div>
           </template>
 
           <template v-else-if="column?.type">
@@ -4156,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>