cnhis-design-vue 2.1.56 → 2.1.58

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

@@ -1,144 +1,191 @@
-<template>
-  <a-select
-    v-if="!isDetail || showCom"
-    v-model="row[item.val_key]"
-    ref="form_a_select"
-    :showArrow="true"
-    class="tableItem-select tableItem-select-multiple tableItem-search-more"
-    :dropdownMatchSelectWidth="false"
-    :dropdownClassName="
-      selectIsOpen
-        ? 'form-default-select tableItem-search-more-select'
-        : 'hide-select-drop tableItem-search-more-select'
-    "
-    :disabled="item.is_edit == 0 || isDetail"
-    :defaultActiveFirstOption="true"
-    mode="multiple"
-    labelInValue
-    :allowClear="item.is_empty == 0"
-    :placeholder="item.placeholder || $t('1.1.6.12')"
-    :filterOption="false"
-    :showSearch="selectIsOpen"
-    :maxTagTextLength="10"
-    @search="handleMultipleSearch($event, item)"
-    @dropdownVisibleChange="handlerDropdownVisibleChange($event, item)"
-    @select="multipleSelect($event, item)"
-    @deselect="multipleDeselect($event, item)"
-    @change="searchMoreOnChange($event, item)"
-    :notFoundContent="fetching ? `...` : $t('1.1.6.11')"
-    :dropdownStyle="{
-      maxWidth: optionsMaxWidth
-    }"
-    optionLabelProp="label"
-    :class="{ 'table-search-more-error': hasErr }"
-  >
-    <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
-    <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"
-    >
-      <!-- {{ v["showLabel"] || v[item.wordbook.value_key] }} -->
-      <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">{{
-          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" />
-        <slot v-if="curOptions && curOptions.length > 0 && !isnoPages">
-          <select-pages
-            v-if="!isnoPages"
-            :searchPageConfig="searchPageConfig"
-            :handleSearchChangePage="handleSearchChangePage"
-          />
-        </slot>
-      </a-spin>
-    </div>
-  </a-select>
-</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: "tableSearchMore",
-  components: {
-    selectPages,
-    [Select.name]: Select,
-		[Select.Option.name]: Select.Option,
-    [Spin.name]: Spin
-  },
-  props: {
-    item: Object
-  },
-  mixins: [itemDefault, search],
-  data() {
-    return {
-      open: false
-    };
-  },
-
-  computed: {
-    selectIsOpen() {
-      const { html_type, show_type } = this.item;
-      if (["SEARCH_MORE", "SEARCH"].includes(html_type)) {
-        return !["pop", "dialog"].includes(show_type);
-      }
-      return true;
-    },
-    showCom() {
-      let value = this.row[this.item.val_key];
-      return value?.length;
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.table-search-more-error {
-  /deep/ .ant-select-selection {
-    border-color: red !important;
-  }
-}
-.tableItem-select-multiple {
-  padding: 4px 0;
-  /deep/.ant-select-selection--multiple .ant-select-selection__clear,
-  /deep/.ant-select-selection--multiple .ant-select-arrow {
-    top: 50%;
-  }
-}
-</style>
-<style lang="less">
-.tableItem-search-more-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>
+  <a-select
+    v-if="!isDetail || showCom"
+    v-model="row[item.val_key]"
+    ref="form_a_select"
+    :showArrow="true"
+    class="tableItem-select tableItem-select-multiple tableItem-search-more"
+    :dropdownMatchSelectWidth="true"
+    :dropdownClassName="
+      selectIsOpen
+        ? 'form-default-select tableItem-search-more-select'
+        : 'hide-select-drop tableItem-search-more-select'
+    "
+    :disabled="item.is_edit == 0 || isDetail"
+    :defaultActiveFirstOption="true"
+    mode="multiple"
+    labelInValue
+    :allowClear="item.is_empty == 0"
+    :placeholder="item.placeholder || $t('1.1.6.12')"
+    :filterOption="false"
+    :showSearch="selectIsOpen"
+    :maxTagTextLength="10"
+    @search="handleMultipleSearch($event, item)"
+    @dropdownVisibleChange="handlerDropdownVisibleChange($event, item)"
+    @select="multipleSelect($event, item)"
+    @deselect="multipleDeselect($event, item)"
+    @change="searchMoreOnChange($event, item)"
+    :notFoundContent="fetching ? `...` : $t('1.1.6.11')"
+    :dropdownStyle="{
+      maxWidth: optionsMaxWidth,
+      background: 'transparent',
+      'box-shadow': 'none'
+    }"
+    optionLabelProp="label"
+    :class="{ 'table-search-more-error': hasErr }"
+  >
+    <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
+    <!-- <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"
+    >
+      {{ v["showLabel"] || v[item.wordbook.value_key] }}
+      <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">{{
+          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"
+          separate="-"
+        />
+        <slot v-if="curOptions && curOptions.length > 0 && !isnoPages">
+          <select-pages
+            v-if="!isnoPages"
+            style="flex-shrink: 0;"
+            :searchPageConfig="searchPageConfig"
+            :handleSearchChangePage="handleSearchChangePage"
+          />
+        </slot>
+      </div>
+    </c-scale-container>
+  </a-select>
+</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: "tableSearchMore",
+  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: {
+    selectIsOpen() {
+      const { html_type, show_type } = this.item;
+      if (["SEARCH_MORE", "SEARCH"].includes(html_type)) {
+        return !["pop", "dialog"].includes(show_type);
+      }
+      return true;
+    },
+    showCom() {
+      let value = this.row[this.item.val_key];
+      return value?.length;
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.table-search-more-error {
+  /deep/ .ant-select-selection {
+    border-color: red !important;
+  }
+}
+.tableItem-select-multiple {
+  padding: 4px 0;
+  /deep/.ant-select-selection--multiple .ant-select-selection__clear,
+  /deep/.ant-select-selection--multiple .ant-select-arrow {
+    top: 50%;
+  }
+}
+.loading-wrapper {
+  height: 100%;
+  min-height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+</style>
+<style lang="less">
+.tableItem-search-more-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>

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

@@ -1,64 +1,64 @@
-<template>
-  <a-select
-    v-if="!isDetail || row[item.val_key]"
-    v-model="row[item.val_key]"
-    class="tableItem-select table-select"
-    defaultActiveFirstOption
-    :ref="item.val_key"
-    :optionData="`${JSON.stringify(item.option)}`"
-    :allowClear="item.is_empty == 0"
-    :disabled="item.is_edit == 0 || isDetail"
-    :dropdownMatchSelectWidth="true"
-    :placeholder="item.placeholder || `${$t('1.1.6.7')}${item.name}` || ''"
-    :class="{ 'table-select-error': hasErr }"
-   
-    @blur="handleTableBlur"
-    @select="handleTableBlur"
-  >
-    <a-select-option
-      v-for="(v, y) in item.option"
-      :key="(y + 9).toString(36) + y"
-      :value="v.value"
-      >{{ v.text }}</a-select-option
-    >
-  </a-select>
-</template>
-<script>
-import itemDefault from "../mixins/item-default";
-import { Select } from 'ant-design-vue';
-export default {
-  name: "tableSelect",
-  components: {
-    [Select.name]: Select,
-		[Select.Option.name]: Select.Option
-  },
-  props: {
-    item: Object
-  },
-  mixins: [itemDefault],
-  data() {
-    return { open: false };
-  },
-
-  computed: {
-    select_mode() {
-      return String(this.item.multi_select) === "0" ? "multiple" : "default";
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {
-	},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.table-select-error {
-  /deep/.ant-select-selection {
-    border-color: red !important;
-  }
-}
-</style>
+<template>
+  <a-select
+    v-if="!isDetail || row[item.val_key]"
+    v-model="row[item.val_key]"
+    class="tableItem-select table-select"
+    defaultActiveFirstOption
+    :ref="item.val_key"
+    :optionData="`${JSON.stringify(item.option)}`"
+    :allowClear="item.is_empty == 0"
+    :disabled="item.is_edit == 0 || isDetail"
+    :dropdownMatchSelectWidth="true"
+    :placeholder="item.placeholder || `${$t('1.1.6.7')}${item.name}` || ''"
+    :class="{ 'table-select-error': hasErr }"
+   
+    @blur="handleTableBlur"
+    @select="handleTableBlur"
+  >
+    <a-select-option
+      v-for="(v, y) in item.option"
+      :key="(y + 9).toString(36) + y"
+      :value="v.value"
+      >{{ v.text }}</a-select-option
+    >
+  </a-select>
+</template>
+<script>
+import itemDefault from "../mixins/item-default";
+import { Select } from 'ant-design-vue';
+export default {
+  name: "tableSelect",
+  components: {
+    [Select.name]: Select,
+		[Select.Option.name]: Select.Option
+  },
+  props: {
+    item: Object
+  },
+  mixins: [itemDefault],
+  data() {
+    return { open: false };
+  },
+
+  computed: {
+    select_mode() {
+      return String(this.item.multi_select) === "0" ? "multiple" : "default";
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {
+	},
+  mounted() {},
+
+  // 方法
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.table-select-error {
+  /deep/.ant-select-selection {
+    border-color: red !important;
+  }
+}
+</style>

package/packages/form-table/src/components/table-component/table-select-multiple/table-select-multiple.vue

@@ -1,81 +1,81 @@
-<template>
-  <a-select
-    v-if="!isDetail || showCom"
-    v-model="row[item.val_key]"
-    mode="multiple"
-    :showArrow="true"
-    class="tableItem-select tableItem-select-multiple"
-    defaultActiveFirstOption
-    :ref="item.val_key"
-    :optionData="`${JSON.stringify(item.option)}`"
-    :allowClear="item.is_empty == 0"
-    :disabled="item.is_edit == 0 || isDetail"
-    :dropdownMatchSelectWidth="true"
-    :placeholder="item.placeholder || `${$t('1.1.6.7')}${item.name}` || ''"
-    :filterOption="filterOption"
-    :class="{ 'table-select-multiple-error': hasErr }"
-    @blur="handleTableBlur"
-  >
-    <a-select-option
-      v-for="(v, y) in item.option"
-      :key="(y + 9).toString(36) + y"
-      :value="v.value"
-      >{{ v.text }}</a-select-option
-    >
-  </a-select>
-</template>
-<script>
-import itemDefault from "../mixins/item-default";
-import { Select } from 'ant-design-vue';
-import vexutils from '@/utils/vexutils';
-export default {
-  name: "tableSelectMultiple",
-  components: {
-    [Select.name]: Select,
-		[Select.Option.name]: Select.Option
-  },
-  props: {
-    item: Object
-  },
-  mixins: [itemDefault],
-  data() {
-    return {
-      open: false
-    };
-  },
-
-  computed: {
-    showCom() {
-      let value = this.row[this.item.val_key];
-      return value?.length;
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {
-    filterOption(...args) {
-      return vexutils.filterOption.apply(this, args);
-    },
-  }
-};
-</script>
-<style lang="less" scoped>
-.table-select-multiple-error {
-  /deep/.ant-select-selection {
-    border-color: red !important;
-  }
-}
-.tableItem-multiple {
-  padding: 4px 0;
-}
-.tableItem-select-multiple {
-  /deep/ .ant-select-selection--multiple .ant-select-selection__clear,
-  /deep/ .ant-select-selection--multiple .ant-select-arrow {
-    top: 50%;
-  }
-}
-</style>
+<template>
+  <a-select
+    v-if="!isDetail || showCom"
+    v-model="row[item.val_key]"
+    mode="multiple"
+    :showArrow="true"
+    class="tableItem-select tableItem-select-multiple"
+    defaultActiveFirstOption
+    :ref="item.val_key"
+    :optionData="`${JSON.stringify(item.option)}`"
+    :allowClear="item.is_empty == 0"
+    :disabled="item.is_edit == 0 || isDetail"
+    :dropdownMatchSelectWidth="true"
+    :placeholder="item.placeholder || `${$t('1.1.6.7')}${item.name}` || ''"
+    :filterOption="filterOption"
+    :class="{ 'table-select-multiple-error': hasErr }"
+    @blur="handleTableBlur"
+  >
+    <a-select-option
+      v-for="(v, y) in item.option"
+      :key="(y + 9).toString(36) + y"
+      :value="v.value"
+      >{{ v.text }}</a-select-option
+    >
+  </a-select>
+</template>
+<script>
+import itemDefault from "../mixins/item-default";
+import { Select } from 'ant-design-vue';
+import vexutils from '@/utils/vexutils';
+export default {
+  name: "tableSelectMultiple",
+  components: {
+    [Select.name]: Select,
+		[Select.Option.name]: Select.Option
+  },
+  props: {
+    item: Object
+  },
+  mixins: [itemDefault],
+  data() {
+    return {
+      open: false
+    };
+  },
+
+  computed: {
+    showCom() {
+      let value = this.row[this.item.val_key];
+      return value?.length;
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {},
+
+  // 方法
+  methods: {
+    filterOption(...args) {
+      return vexutils.filterOption.apply(this, args);
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+.table-select-multiple-error {
+  /deep/.ant-select-selection {
+    border-color: red !important;
+  }
+}
+.tableItem-multiple {
+  padding: 4px 0;
+}
+.tableItem-select-multiple {
+  /deep/ .ant-select-selection--multiple .ant-select-selection__clear,
+  /deep/ .ant-select-selection--multiple .ant-select-arrow {
+    top: 50%;
+  }
+}
+</style>