cnhis-design-vue 2.1.57 → 2.1.59

package/packages/table-filter/src/components/search-filter/SearchFilter.vue

@@ -1,278 +1,278 @@
-
-<template>
-  <div class="search">
-    <a-modal
-      :visible="addVisible"
-      :maskClosable="false"
-      :width="modalWidth"
-      @ok="saveAdd"
-      @cancel="cancelSaveAdd"
-      :bodyStyle="bodyStyle"
-      class="modal-wrap standard-modal standard-modal-white"
-      :class="{ 'modal-screen': isChangeWindow }"
-      :closable="false"
-      centered
-    >
-      <template slot="title" v-drag-move>
-        <div>
-          <a-icon type="setting" />
-          <!-- $t("1.1.2.2") | 设置分类 -->
-          {{ modalTitle || '设置分类' }}
-        </div>
-        <div class="svg-wrap">
-          <svg-icon
-            @click="changeModalWindow"
-            :icon-class="
-              isChangeWindow
-                ? 'xitongtubiaodaohangtubiaozuixiaohua'
-                : 'xitongtubiaodaohangtubiaozuidahua'
-            "
-          ></svg-icon>
-          <svg-icon
-            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
-            @click="cancelSaveAdd"
-          ></svg-icon>
-        </div>
-      </template>
-      <SearchCondition v-bind="$attrs" v-on="$listeners" ref="conditionRef"></SearchCondition>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import {Modal,Icon} from 'ant-design-vue'
-import SearchCondition from "../search-condition/SearchCondition.vue";
-export default {
-  name: "SearchFilter",
-  props: {
-    visible: Boolean,
-    modalTitle: {
-      default: ""
-    }
-  },
-  data() {
-    return {
-      addVisible: this.visible,
-      isChangeWindow: false,
-      modalWidth: "860px",
-      bodyStyle: {
-        maxHeight: "496px",
-        overflowY: "auto"
-      },
-      filterTimer: null
-    };
-  },
-  computed: {},
-  // created() {
-  //   this.init();
-  // },
-  components: {
-    SearchCondition,
-    AModal:Modal,
-    [Icon.name]:Icon
-  },
-  watch: {
-    visible(value) {
-      this.addVisible = value;
-      if (value) {
-        this.init();
-      }
-    }
-  },
-  methods: {
-    init() {
-      this.clearTimer()
-      this.filterTimer = setTimeout(() => {
-        this.handleInitConditions();
-      }, 30)
-    },
-    clearTimer() {
-      if(this.filterTimer) clearTimeout(this.filterTimer)
-    },
-    handleInitConditions() {
-      this.$refs.conditionRef.handleInitConditions();
-    },
-    // 保存列表搜索分类
-    saveAdd() {
-      this.$refs.conditionRef.saveAdd();
-    },
-    getConditions() {},
-
-    cancelSaveAdd() {
-      this.addVisible = false;
-      this.$emit("cancelSaveAdd");
-      this.resetChangeWindow();
-      this.clearConditions();
-    },
-    clearConditions() {
-      this.$refs.conditionRef.cancelSaveAdd();
-    },
-    resetChangeWindow() {
-      this.modalWidth = "860px";
-      this.bodyStyle = {
-        maxHeight: "496px",
-        overflowY: "auto"
-      };
-      this.isChangeWindow = false;
-    },
-    changeModalWindow() {
-      this.isChangeWindow = !this.isChangeWindow;
-      let docHeight = document.body.clientHeight;
-      if (this.modalWidth === "860px") {
-        this.modalWidth = "100%";
-        this.bodyStyle.maxHeight = `${docHeight - 108}px`;
-        this.bodyStyle.height = `${docHeight - 108}px`;
-      } else {
-        this.modalWidth = "860px";
-        this.bodyStyle.maxHeight = "496px";
-        this.bodyStyle.height = "";
-      }
-    }
-  },
-  destroyed() {
-    this.clearTimer();
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.inner-content {
-  color: #000;
-  & > p > span {
-    cursor: pointer;
-  }
-  .item-name {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-    margin-bottom: 10px;
-    .label {
-      width: 120px;
-      text-align: right;
-    }
-  }
-  .parent-names {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    line-height: 32px;
-    .label {
-      display: inline-block;
-      height: 32px;
-      line-height: 32px;
-      margin-bottom: 10px;
-      width: 120px;
-      text-align: right;
-    }
-    /deep/ .ant-btn-dashed {
-      border-color: #a6a6a6;
-      color: #a6a6a6;
-    }
-
-    .edit-tag {
-      position: relative;
-      margin-right: 10px;
-      margin-bottom: 10px;
-      /deep/ .anticon-close {
-        position: absolute;
-        right: 5px;
-        line-height: 36px;
-        color: #2d7aff;
-      }
-      /deep/ .ant-input-disabled {
-        color: #2d7aff;
-        background-color: rgba(45, 122, 255, 0.1);
-        opacity: 1;
-        border-color: #2d7aff;
-        cursor: pointer;
-      }
-      /deep/.ant-input-group-addon,
-      /deep/.ant-input:not(:hover),
-      /deep/.ant-input-number:not(:hover) {
-        border-color: #2d7aff !important;
-      }
-      &.edit-tag-select {
-        /deep/ .ant-input-disabled {
-          color: #fff;
-          background-color: #2d7aff;
-        }
-        /deep/ .anticon-close {
-          color: #fff;
-        }
-      }
-    }
-    /deep/ .ant-btn {
-      margin-bottom: 10px;
-    }
-  }
-  .item-list {
-    padding-top: 12px;
-    margin-top: 16px;
-    margin-bottom: 6px;
-    border-top: 1px solid #e6e6e6;
-    li {
-      margin-bottom: 10px;
-    }
-    .form-item {
-      width: 120px;
-      margin-right: 10px;
-    }
-    .form-action {
-      font-size: 16px;
-      float: right;
-      margin-top: 6px;
-      cursor: pointer;
-    }
-    .date-item {
-      display: inline-block;
-    }
-    .birthday-item {
-      > div {
-        display: inline-block;
-        margin-top: 5px;
-        p {
-          display: inline-block;
-          margin: 0 10px 0 15px;
-        }
-        > span {
-          margin-top: 5px;
-        }
-      }
-      .age-wrap {
-        display: inline-block;
-      }
-    }
-    .relation-item {
-      display: inline-block;
-      .relation-width {
-        width: 150px;
-        margin-right: 10px;
-      }
-      .relation-btn {
-        cursor: pointer;
-      }
-    }
-    .range-container {
-      display: inline-block;
-      width: 442px;
-      /* line-height: 1.5; */
-      vertical-align: bottom;
-    }
-    .item-error {
-      color: red;
-      display: inline-block;
-    }
-  }
-  .index-span {
-    width: 30px;
-    display: inline-block;
-  }
-}
-.blue {
-  color: #2d7aff;
-  margin-right: 8px;
-}
-.red {
-  color: #e02020;
-}
-</style>
+
+<template>
+  <div class="search">
+    <a-modal
+      :visible="addVisible"
+      :maskClosable="false"
+      :width="modalWidth"
+      @ok="saveAdd"
+      @cancel="cancelSaveAdd"
+      :bodyStyle="bodyStyle"
+      class="modal-wrap standard-modal standard-modal-white"
+      :class="{ 'modal-screen': isChangeWindow }"
+      :closable="false"
+      centered
+    >
+      <template slot="title" v-drag-move>
+        <div>
+          <a-icon type="setting" />
+          <!-- $t("1.1.2.2") | 设置分类 -->
+          {{ modalTitle || '设置分类' }}
+        </div>
+        <div class="svg-wrap">
+          <svg-icon
+            @click="changeModalWindow"
+            :icon-class="
+              isChangeWindow
+                ? 'xitongtubiaodaohangtubiaozuixiaohua'
+                : 'xitongtubiaodaohangtubiaozuidahua'
+            "
+          ></svg-icon>
+          <svg-icon
+            :icon-class="'xitongtubiaodaohangtubiaoguanbi'"
+            @click="cancelSaveAdd"
+          ></svg-icon>
+        </div>
+      </template>
+      <SearchCondition v-bind="$attrs" v-on="$listeners" ref="conditionRef"></SearchCondition>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import {Modal,Icon} from 'ant-design-vue'
+import SearchCondition from "../search-condition/SearchCondition.vue";
+export default {
+  name: "SearchFilter",
+  props: {
+    visible: Boolean,
+    modalTitle: {
+      default: ""
+    }
+  },
+  data() {
+    return {
+      addVisible: this.visible,
+      isChangeWindow: false,
+      modalWidth: "860px",
+      bodyStyle: {
+        maxHeight: "496px",
+        overflowY: "auto"
+      },
+      filterTimer: null
+    };
+  },
+  computed: {},
+  // created() {
+  //   this.init();
+  // },
+  components: {
+    SearchCondition,
+    AModal:Modal,
+    [Icon.name]:Icon
+  },
+  watch: {
+    visible(value) {
+      this.addVisible = value;
+      if (value) {
+        this.init();
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.clearTimer()
+      this.filterTimer = setTimeout(() => {
+        this.handleInitConditions();
+      }, 30)
+    },
+    clearTimer() {
+      if(this.filterTimer) clearTimeout(this.filterTimer)
+    },
+    handleInitConditions() {
+      this.$refs.conditionRef.handleInitConditions();
+    },
+    // 保存列表搜索分类
+    saveAdd() {
+      this.$refs.conditionRef.saveAdd();
+    },
+    getConditions() {},
+
+    cancelSaveAdd() {
+      this.addVisible = false;
+      this.$emit("cancelSaveAdd");
+      this.resetChangeWindow();
+      this.clearConditions();
+    },
+    clearConditions() {
+      this.$refs.conditionRef.cancelSaveAdd();
+    },
+    resetChangeWindow() {
+      this.modalWidth = "860px";
+      this.bodyStyle = {
+        maxHeight: "496px",
+        overflowY: "auto"
+      };
+      this.isChangeWindow = false;
+    },
+    changeModalWindow() {
+      this.isChangeWindow = !this.isChangeWindow;
+      let docHeight = document.body.clientHeight;
+      if (this.modalWidth === "860px") {
+        this.modalWidth = "100%";
+        this.bodyStyle.maxHeight = `${docHeight - 108}px`;
+        this.bodyStyle.height = `${docHeight - 108}px`;
+      } else {
+        this.modalWidth = "860px";
+        this.bodyStyle.maxHeight = "496px";
+        this.bodyStyle.height = "";
+      }
+    }
+  },
+  destroyed() {
+    this.clearTimer();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.inner-content {
+  color: #000;
+  & > p > span {
+    cursor: pointer;
+  }
+  .item-name {
+    display: flex;
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 10px;
+    .label {
+      width: 120px;
+      text-align: right;
+    }
+  }
+  .parent-names {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    line-height: 32px;
+    .label {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      margin-bottom: 10px;
+      width: 120px;
+      text-align: right;
+    }
+    /deep/ .ant-btn-dashed {
+      border-color: #a6a6a6;
+      color: #a6a6a6;
+    }
+
+    .edit-tag {
+      position: relative;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      /deep/ .anticon-close {
+        position: absolute;
+        right: 5px;
+        line-height: 36px;
+        color: #2d7aff;
+      }
+      /deep/ .ant-input-disabled {
+        color: #2d7aff;
+        background-color: rgba(45, 122, 255, 0.1);
+        opacity: 1;
+        border-color: #2d7aff;
+        cursor: pointer;
+      }
+      /deep/.ant-input-group-addon,
+      /deep/.ant-input:not(:hover),
+      /deep/.ant-input-number:not(:hover) {
+        border-color: #2d7aff !important;
+      }
+      &.edit-tag-select {
+        /deep/ .ant-input-disabled {
+          color: #fff;
+          background-color: #2d7aff;
+        }
+        /deep/ .anticon-close {
+          color: #fff;
+        }
+      }
+    }
+    /deep/ .ant-btn {
+      margin-bottom: 10px;
+    }
+  }
+  .item-list {
+    padding-top: 12px;
+    margin-top: 16px;
+    margin-bottom: 6px;
+    border-top: 1px solid #e6e6e6;
+    li {
+      margin-bottom: 10px;
+    }
+    .form-item {
+      width: 120px;
+      margin-right: 10px;
+    }
+    .form-action {
+      font-size: 16px;
+      float: right;
+      margin-top: 6px;
+      cursor: pointer;
+    }
+    .date-item {
+      display: inline-block;
+    }
+    .birthday-item {
+      > div {
+        display: inline-block;
+        margin-top: 5px;
+        p {
+          display: inline-block;
+          margin: 0 10px 0 15px;
+        }
+        > span {
+          margin-top: 5px;
+        }
+      }
+      .age-wrap {
+        display: inline-block;
+      }
+    }
+    .relation-item {
+      display: inline-block;
+      .relation-width {
+        width: 150px;
+        margin-right: 10px;
+      }
+      .relation-btn {
+        cursor: pointer;
+      }
+    }
+    .range-container {
+      display: inline-block;
+      width: 442px;
+      /* line-height: 1.5; */
+      vertical-align: bottom;
+    }
+    .item-error {
+      color: red;
+      display: inline-block;
+    }
+  }
+  .index-span {
+    width: 30px;
+    display: inline-block;
+  }
+}
+.blue {
+  color: #2d7aff;
+  margin-right: 8px;
+}
+.red {
+  color: #e02020;
+}
+</style>