cnhis-design-vue 2.1.56 → 2.1.58

package/packages/form-table/src/components/table-component/table-month-picker/table-month-picker.vue

@@ -1,55 +1,55 @@
-<template>
-  <a-date-picker
-    mode="month"
-    format="YYYY-MM"
-    v-if="!isDetail || row[item.val_key]"
-    v-model="row[item.val_key]"
-    :ref="'monthPicker-' + item.val_key"
-    :placeholder="item.placeholder || ''"
-    :allowClear="item.is_empty == 0"
-    :disabled="item.is_edit == 0 || isDetail"
-    :disabledDate="current => disabledDatePicker(current, item)"
-    class="table-month-picker"
-    :class="{ 'table-month-picker-error': hasErr }"
-    @blur="handleTableBlur"
-  />
-</template>
-<script>
-import itemDefault from "../mixins/item-default";
-import dateType from "../mixins/dateType";
-import { DatePicker } from 'ant-design-vue';
-export default {
-  name: "tableMonthPicker",
-  components: {
-    [DatePicker.MonthPicker.name]: DatePicker.MonthPicker
-  },
-  props: {
-    item: Object
-  },
-  mixins: [itemDefault, dateType],
-  data() {
-    return {
-      open: false
-    };
-  },
-
-  computed: {},
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.table-month-picker {
-  width: 100%;
-}
-.table-month-picker-error {
-  /deep/ .ant-input {
-    border-color: red !important;
-  }
-}
-</style>
+<template>
+  <a-date-picker
+    mode="month"
+    format="YYYY-MM"
+    v-if="!isDetail || row[item.val_key]"
+    v-model="row[item.val_key]"
+    :ref="'monthPicker-' + item.val_key"
+    :placeholder="item.placeholder || ''"
+    :allowClear="item.is_empty == 0"
+    :disabled="item.is_edit == 0 || isDetail"
+    :disabledDate="current => disabledDatePicker(current, item)"
+    class="table-month-picker"
+    :class="{ 'table-month-picker-error': hasErr }"
+    @blur="handleTableBlur"
+  />
+</template>
+<script>
+import itemDefault from "../mixins/item-default";
+import dateType from "../mixins/dateType";
+import { DatePicker } from 'ant-design-vue';
+export default {
+  name: "tableMonthPicker",
+  components: {
+    [DatePicker.MonthPicker.name]: DatePicker.MonthPicker
+  },
+  props: {
+    item: Object
+  },
+  mixins: [itemDefault, dateType],
+  data() {
+    return {
+      open: false
+    };
+  },
+
+  computed: {},
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.table-month-picker {
+  width: 100%;
+}
+.table-month-picker-error {
+  /deep/ .ant-input {
+    border-color: red !important;
+  }
+}
+</style>

package/packages/form-table/src/components/table-component/table-search/table-search.vue

@@ -1,128 +1,174 @@
-<template>
-  <div class="select-content">
-    <a-select
-      v-if="!isDetail || row[item.val_key]"
-      v-model="row[item.val_key]"
-      :ref="'search-' + item.val_key"
-      :dropdownMatchSelectWidth="false"
-      class="tableItem-select table-search"
-      :placeholder="item.placeholder || $t('1.1.6.12')"
-      :autoFocus="false"
-      :defaultActiveFirstOption="true"
-      :allowClear="item.is_empty == 0"
-      :disabled="item.is_edit == 0 || isDetail"
-      :filterOption="false"
-      :showSearch="true"
-      @search="handleMultipleSearch($event, item)"
-      @dropdownVisibleChange="handlerDropdownVisibleChange($event, item)"
-      dropdownClassName="table-default-select"
-      :notFoundContent="fetching ? `...` : $t('1.1.6.11')"
-      optionLabelProp="label"
-      :dropdownStyle="{
-        maxWidth: optionsMaxWidth
-      }"
-      :class="{ 'table-search-error': hasErr }"
-    >
-      <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
-      <!-- :placeholder="item.placeholder || $t('1.1.6.12')" -->
-      <a-select-option
-        v-for="(v, k) in curOptions"
-        :key="k"
-        :value="`${v[item.wordbook.value_key]}>>>${v['myUniqueKey']}`"
-        :label="hanlderGetSearchLabel(item, v)"
-        :disabled="k === 0 && item.wordbook.render_key && item.wordbook.render_key.length > 1"
-      >
-        <div
-          :class="{
-            'title-line': k === 0 && item.wordbook.render_key && item.wordbook.render_key.length > 1
-          }"
-          style="display: flex;justify-content: space-around;"
-          v-if="v['showLabel']"
-        >
-          <span
-            style="flex: 1;"
-            v-for="(v1, k1) in v['showLabel'].split('≌')"
-            :key="k1"
-            class="select-content-item"
-            >{{ v1 }}</span
-          >
-        </div>
-        <span v-else>{{ v[item.wordbook.value_key] }}</span>
-      </a-select-option>
-      <div slot="dropdownRender" :class="`search-menu-${item.val_key}`" slot-scope="menu">
-        <a-spin :spinning="fetching" :tip="`${$t('1.1.7.14')}...`">
-          <v-nodes :vnodes="menu" />
-          <div
-            v-if="showSearchEmpty"
-            class="formItem-select-empty"
-            @mousedown="e => e.preventDefault()"
-          >
-            暂无搜索内容
-          </div>
-          <slot v-if="curOptions && curOptions.length">
-            <select-pages
-              v-if="!isnoPages"
-              :searchPageConfig="searchPageConfig"
-              :handleSearchChangePage="handleSearchChangePage"
-            />
-          </slot>
-        </a-spin>
-      </div>
-    </a-select>
-  </div>
-</template>
-<script>
-import itemDefault from "../mixins/item-default";
-import search from "../mixins/search";
-import selectPages from '@/component/select-pages';
-import { Select, Spin } from 'ant-design-vue';
-export default {
-  name: "tableSearch",
-  components: {
-    selectPages,
-    [Select.name]: Select,
-		[Select.Option.name]: Select.Option,
-    [Spin.name]: Spin
-  },
-  props: {
-    item: Object
-  },
-  mixins: [itemDefault, search],
-  data() {
-    return {
-      open: false
-    };
-  },
-
-  computed: {},
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-/deep/ .formItem-select-empty {
-  color: rgba(46, 46, 46, 0.4);
-  padding: 30px 0;
-  text-align: center;
-}
-</style>
-<style lang="less">
-.table-default-select {
-  .title-line {
-    font-weight: 700;
-    color: #000;
-    font-size: 14px;
-  }
-  .select-content-item {
-    padding: 0 5px;
-  }
-  .ant-select-dropdown-menu-item-selected {
-    color: #5585f5;
-  }
-}
-</style>
+<template>
+  <div class="select-content">
+    <a-select
+      v-if="!isDetail || row[item.val_key]"
+      v-model="row[item.val_key]"
+      :ref="'search-' + item.val_key"
+      :dropdownMatchSelectWidth="true"
+      class="tableItem-select table-search"
+      :placeholder="item.placeholder || $t('1.1.6.12')"
+      :autoFocus="false"
+      :defaultActiveFirstOption="true"
+      :allowClear="item.is_empty == 0"
+      :disabled="item.is_edit == 0 || isDetail"
+      :filterOption="false"
+      :showSearch="true"
+      @search="handleMultipleSearch($event, item)"
+      @dropdownVisibleChange="handlerDropdownVisibleChange($event, item)"
+      dropdownClassName="table-default-select"
+      :notFoundContent="fetching ? `...` : $t('1.1.6.11')"
+      optionLabelProp="label"
+      :dropdownStyle="{
+        maxWidth: optionsMaxWidth,
+        background: 'transparent',
+        'box-shadow': 'none'
+      }"
+      :class="{ 'table-search-error': hasErr }"
+    >
+      <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
+      <!-- :placeholder="item.placeholder || $t('1.1.6.12')" -->
+      <!-- <a-select-option
+        v-for="(v, k) in curOptions"
+        :key="k"
+        :value="`${v[item.wordbook.value_key]}>>>${v['myUniqueKey']}`"
+        :label="hanlderGetSearchLabel(item, v)"
+        :disabled="k === 0 && item.wordbook.render_key && item.wordbook.render_key.length > 1"
+      >
+        <div
+          :class="{
+            'title-line': k === 0 && item.wordbook.render_key && item.wordbook.render_key.length > 1
+          }"
+          style="display: flex;justify-content: space-around;"
+          v-if="v['showLabel']"
+        >
+          <span
+            style="flex: 1;"
+            v-for="(v1, k1) in v['showLabel'].split('≌')"
+            :key="k1"
+            class="select-content-item"
+            >{{ v1 }}</span
+          >
+        </div>
+        <span v-else>{{ v[item.wordbook.value_key] }}</span>
+      </a-select-option> -->
+      <a-select-option
+        v-for="(v, k) in curOptions"
+        :key="k"
+        :value="`${v[item.wordbook.value_key]}>>>${v['myUniqueKey']}`"
+        :label="hanlderGetSearchLabel(item, v)"
+        :disabled="k === 0 && item.wordbook.render_key && item.wordbook.render_key.length > 1"
+      ></a-select-option>
+      <c-scale-container 
+        slot="dropdownRender" 
+        :class="`search-menu-${item.val_key}`" 
+        slot-scope="menu" 
+        style="background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 15%);"
+        @mousedown.native="e => e.preventDefault()"
+        :minW="165"
+        :minH="45"
+        :defaultMaxH="300"
+      >
+        <a-spin
+          v-if="fetching"
+          class="loading-wrapper"
+          :spinning="fetching"
+          :tip="`${$t('1.1.7.14')}...`"
+        />
+        <div
+          v-else
+          style="display: flex; flex-direction: column; max-height: inherit; height: 100%;"
+        >
+          <!-- <v-nodes :vnodes="menu" /> -->
+          <SelectOptions
+            style="flex: 1; overflow: hidden;"
+            :rows="optionRows"
+            :freeAddItem="freeAddItem"
+            :fields="fieldListConfig"
+            :wordbook="item.wordbook"
+            :context="menu && menu.context"
+          />
+          <!-- <div
+            v-if="showSearchEmpty"
+            class="formItem-select-empty"
+            @mousedown="e => e.preventDefault()"
+          >
+            暂无搜索内容
+          </div> -->
+          <slot v-if="curOptions && curOptions.length">
+            <select-pages
+              v-if="!isnoPages"
+              style="flex-shrink: 0;"
+              :searchPageConfig="searchPageConfig"
+              :handleSearchChangePage="handleSearchChangePage"
+            />
+          </slot>
+        </div>
+      </c-scale-container>
+    </a-select>
+  </div>
+</template>
+<script>
+import itemDefault from "../mixins/item-default";
+import search from "../mixins/search";
+import selectPages from '@/component/select-pages';
+import { Select, Spin } from 'ant-design-vue';
+import SelectOptions from '@/component/select-options';
+export default {
+  name: "tableSearch",
+  components: {
+    selectPages,
+    [Select.name]: Select,
+		[Select.Option.name]: Select.Option,
+    [Spin.name]: Spin,
+    SelectOptions
+  },
+  props: {
+    item: Object
+  },
+  mixins: [itemDefault, search],
+  data() {
+    return {
+      open: false
+    };
+  },
+
+  computed: {},
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+/deep/ .formItem-select-empty {
+  color: rgba(46, 46, 46, 0.4);
+  padding: 30px 0;
+  text-align: center;
+}
+.loading-wrapper {
+  height: 100%;
+  min-height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+</style>
+<style lang="less">
+.table-default-select {
+  .title-line {
+    font-weight: 700;
+    color: #000;
+    font-size: 14px;
+  }
+  .select-content-item {
+    padding: 0 5px;
+  }
+  .ant-select-dropdown-menu-item-selected {
+    color: #5585f5;
+  }
+}
+</style>