hyyfClient/src/components/bioSafety/QueryConditions.vue

<!--
 * @Author: your name
 * @Date: 2021-09-18 10:40:12
 * @LastEditTime: 2021-12-27 18:16:01
 * @LastEditors: Please set LastEditors
 * @Description: 查询条件组件
 * @FilePath: \hyyfClient\src\components\bioSafety\QueryConditions.vue
-->
<template>
  <div class="query-conditions">
    <!-- 标题  -->
    <div class="header">
      <div class="left">
        <svg
          t="1631933864759"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2456"
          width="22"
        >
          <path
            d="M908.01726 958.059428c-10.45791 0-20.988969-3.181243-30.10259-9.661849-1.28353-0.913181-2.559665-1.904509-3.903953-3.032344-1.103452-0.926572-2.3592-2.032822-3.949122-3.483238-2.290247-2.086186-5.416727-5.012801-9.561118-8.945935-7.259678-6.891528-17.807926-17.040447-31.352143-30.16195-22.664234-21.957713-54.141892-52.652701-93.557768-91.231545-38.567451-37.748806-77.366346-75.833785-103.500427-101.507778-47.976472 33.203488-119.532357 68.915475-205.342977 68.915475-48.764138 0-96.103042-9.456389-140.699006-28.108542-43.08219-18.018384-81.772158-43.810496-114.994034-76.661623-33.257851-32.886103-59.379541-71.205123-77.63996-113.894979-18.931964-44.258193-28.531256-91.248933-28.531256-139.665507s9.599292-95.406115 28.531256-139.665507c18.260419-42.689856 44.382109-81.009875 77.640959-113.894779 33.221876-32.850128 71.911644-58.64344 114.993834-76.661623 44.595964-18.652154 91.933869-28.108542 140.699206-28.108542s96.103042 9.457588 140.699006 28.108542c43.08219 18.018184 81.772158 43.810496 114.992835 76.661623 33.257851 32.885104 59.379341 71.205123 77.63996 113.894779 18.932164 44.259392 28.531256 91.250132 28.531256 139.665507 0 79.223486-28.180494 155.447607-80.261383 219.23316 26.086713 25.282658 63.012877 61.094378 99.684014 96.731216 39.474436 38.364189 70.938903 69.027399 93.516596 91.142206 13.472266 13.193455 23.919782 23.479881 31.053945 30.576869 4.021074 3.999888 7.018841 7.011846 9.164187 9.209956 5.674952 5.815057 17.481947 17.914454 17.649634 38.753525l0.173682 21.502621-15.218482 15.220081C934.396175 952.954089 921.264279 958.059428 908.01726 958.059428zM426.747361 165.008916c-142.825764 0-259.022982 114.666256-259.022982 255.609697s116.197218 255.609697 259.022982 255.609697c76.88827 0 140.284687-43.093583 172.900773-70.593937l1.615705-1.506978c54.494453-50.839731 84.506704-116.010945 84.506704-183.508781C685.770344 279.675172 569.573125 165.008916 426.747361 165.008916z"
            p-id="2457"
            fill="#bfbfbf"
          ></path>
        </svg>
        <span>筛选查询</span>
      </div>

      <!--  收起筛选 + 按钮 -->
      <div class="right">
        <div class="collapse">
          <svg
            t="1631934898695"
            class="icon"
            viewBox="0 0 1536 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4286"
            width="18"
          >
            <path
              d="M967.338667 722.602667a128 128 0 0 1-154.282667 11.434666l-15.36-11.434666-482.645333-426.666667A128 128 0 0 1 469.504 92.501333L484.693333 104.106667 882.688 455.68 1280.512 104.106667a128 128 0 0 1 167.253333-2.218667l13.482667 13.312c42.666667 48.128 42.325333 119.466667 2.048 167.082667l-13.141333 13.653333-482.816 426.666667z"
              p-id="4287"
              fill="#bfbfbf"
            ></path>
          </svg>
          <span>收起筛选</span>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="query-form">
      <el-form :inline="true" size="small">
        <el-row>
          <template v-for="item in formItems">
            <el-col :span="4" :key="item.label">
              <el-form-item :label="item.label">
                <template v-if="item.type === 'input'">
                  <el-input
                    style="width: 150px;"
                    :placeholder="item.placeholder"
                    v-model="formData[`${item.field}`]"
                    clearable
                  >
                  </el-input>
                </template>

                <template v-else-if="item.type === 'select'">
                  <el-select
                    style="width: 150px;"
                    :placeholder="item.placeholder"
                    v-model="formData[`${item.field}`]"
                    clearable
                  >
                    <el-option
                      v-for="option in item.options"
                      :key="option.value"
                      :value="option.value"
                      :label="option.label"
                    >
                    </el-option>
                  </el-select>
                </template>

                <template v-else-if="item.type === 'datepicker'">
                  <el-date-picker
                    v-model="formData[`${item.field}`]"
                    :start-placeholder="item.placeholder[0]"
                    :end-placeholder="item.placeholder[1]"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    clearable
                    class="date-picker-reset"
                    ref="123"
                  >
                  </el-date-picker>
                </template>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="3">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="handleClick"
                style="margin-left: 30px"
              >
                查询结果
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    formItems: {
      type: Array,
      default: () => [],
    },
    propFormData: {
      type: Object,
      default: () => {},
    },
    defaultEmit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    handleClick() {
      this.$emit("getQueryParams", this.formData);
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.propFormData.time) {
        this.formData.time = this.propFormData.time;
        if (this.defaultEmit) {
          this.$emit("getQueryParams", this.formData);
        }
      }
    });
  },
  watch: {
    propFormData: {
      handler(newValue) {
        this.formData = { ...newValue };
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.query-conditions {
  border: 1px solid rgba(228, 228, 228, 1);
}

/* 标题栏 */
.header {
  background-color: #f3f3f3;
  color: #bcbcbc;
  font-size: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(228, 228, 228, 1);
}
/* 左边 */
.header > .left {
  position: relative;
  display: inline-block;
}
.header > .left > svg {
  position: absolute;
  padding-left: 4px;
}
.header > .left > span {
  margin-left: 25px;
}
/* 右边 */
.header > .right {
  float: right;
}
.header > .right > .collapse {
  margin-right: 10px;
}
.header > .right > .collapse > svg {
  position: relative;
  top: 4px;
  margin-right: 2px;
}

/* form */
.query-form {
  padding: 20px 22px 5px;
  position: relative;
}

.date-picker-reset {
  position: absolute;
  width: 230px;
}
</style>