erp-el-element/commontable/options.vue

<template>
  <div class="home">
    <el-form
      label-position="right"
      label-width="90px"
      :inline="true"
      style="display: flex; flex-wrap: wrap"
    >
      <el-form-item>
        <div class="myinput">
          <div class="flex">
            <div class="flex-left">
              <!-- 分类，需要合并的 -->
              <!-- <div class="hbbox" v-show="packupFlag">
                            <div v-for="(item, index) in hboptions" :key="index" class="box">
                                <el-select v-model="model[item.enName]" :placeholder="item.placeholder" class="option"
                                    :style="hboptionWidth" @change="change(item.lable)" :clearable="item.clearable"
                                    :filterable="item.filterable" :size="item.size">
                                    <el-option v-for="item in item.options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <div class="center" v-show="index != hboptions.length - 1">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                            </div>
                        </div> -->
              <!-- 机器分类更多弹出框 -->
              <div class="machinemore" v-if="hboptions.length">
                <el-popover
                  placement="bottom"
                  :offset="120"
                  width="450"
                  v-model="machinevisible"
                  trigger="manual"
                  popper-class="machinebox"
                >
                  <el-form
                    label-position="top"
                    label-width="90px"
                    :inline="true"
                  >
                    <el-row :gutter="10">
                      <el-col
                        :span="12"
                        v-for="(item, index) in hboptions"
                        :key="index"
                      >
                        <el-form-item
                          :label="item.lable"
                          :prop="item.prop"
                          v-show="item.show !== false"
                        >
                          <el-select
                            v-model="model[item.enName]"
                            :placeholder="item.placeholder"
                            @change="
                              change(item.lable, model[item.enName], item)
                            "
                            :clearable="item.clearable"
                            :filterable="item.filterable"
                            :size="item.size"
                            v-loading="item.loading"
                            @clear="clearhboptions(item.lable)"
                          >
                            <el-option
                              v-for="item in item.options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                  <div class="btnbox1">
                    <el-button size="mini" plain @click="machinecancel"
                      >取消</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      plain
                      @click="machinesearch"
                      >查询</el-button
                    >
                  </div>
                  <el-input
                    readonly
                    slot="reference"
                    v-model="machineval"
                    placeholder="请选择分类/品牌/型号"
                    size="small"
                    clearable
                    @focus="machineFocus"
                    @change="machinechange"
                    @clear="machineclear"
                  ></el-input>
                </el-popover>
              </div>
              <!-- 动态加载的分类 -->
              <div v-if="false">
                <el-cascader
                  :props="cascaderProps"
                  ref="cascaderHandle"
                  v-model="cascaderFrom"
                  @expand-change="handleExpandChange"
                  @visible-change="(v) => visibleChange(v, 'cascaderHandle')"
                  @change="cascaderchange"
                  clearable
                  filterable
                  :collapse-tags="true"
                  size="small"
                  placeholder="请选择分类/品牌/型号"
                  class="dynamicLoading"
                ></el-cascader>
              </div>
              <!-- 带弹窗 -->
              <div class="popover" v-if="tankuangVisible">
                <div class="item">
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    class="dateselect"
                    size="small"
                    @change="imeiselectchange"
                  >
                    <el-option
                      v-for="item in popoveroptions"
                      :key="item.enName"
                      :label="item.lable"
                      :value="item.enName"
                    >
                    </el-option>
                  </el-select>
                  <el-popover
                    placement="bottom"
                    trigger="manual"
                    ref="popover"
                    popper-class="popperOptions"
                    v-model="imeipopover"
                  >
                    <el-input
                      v-model="textarea"
                      type="textarea"
                      :rows="12"
                      placeholder="一行一项，最多支持200行"
                      resize="none"
                      @input="imeichange(textarea)"
                    />
                    <el-divider class="divider"></el-divider>
                    <div class="btnbox">
                      <div>
                        <el-button size="mini" @click="imeiclose"
                          >关闭</el-button
                        >
                      </div>
                      <div>
                        <el-button size="mini" @click="cleartext"
                          >清空</el-button
                        >
                        <el-button
                          size="mini"
                          type="primary"
                          plain
                          @click="search"
                          >查询</el-button
                        >
                      </div>
                    </div>
                    <el-input
                      slot="reference"
                      v-model="imeisn"
                      size="small"
                      class="ipt2"
                      placeholder="请输入内容"
                      @input="imeichange"
                      :disabled="isinput"
                    >
                      <i
                        slot="suffix"
                        class="iconfont iconicon-piliangcaozuo imeiicondefault"
                        :class="imeipopover ? 'imeiiconActive' : 'imeiicon'"
                        style="font-size: 12px; margin-top: 4px"
                        @click.prevent="imeiiconClick"
                      ></i>
                    </el-input>
                  </el-popover>
                </div>
              </div>

              <!-- 日期 -->
              <div class="dateinput">
                <div class="item">
                  <el-select
                    v-model="dateval"
                    placeholder="请选择"
                    class="dateselect"
                    size="small"
                    @change="dateselectchange"
                  >
                    <el-option
                      v-for="item in dateoptions"
                      :key="item.enName"
                      :label="item.lable"
                      :value="item.enName"
                      v-show="item.show"
                    >
                    </el-option>
                  </el-select>
                  <el-date-picker
                    class="datepicker"
                    v-model="datevalue"
                    value-format="timestamp"
                    :picker-options="pickerOptions"
                    size="small"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    @change="datechange"
                  >
                  </el-date-picker>
                </div>
              </div>
              <!-- 下拉项不需要合并的 -->
              <!-- <div
              :is="item.type"
              v-show="packupFlag"
              v-for="(item, index) in selectoptions"
              :key="index"
              v-model="model[item.enName]"
              :placeholder="item.placeholder"
              class="option"
              :style="optionWidth"
              :clearable="item.clearable"
              :filterable="item.filterable"
              :size="item.size"
              :multiple="item.multiple"
              @change="change(item.lable)"
              collapse-tags
            >
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </div> -->
            </div>
            <!-- 按钮 -->
            <div class="searchbtnbox">
              <el-button
                type="primary"
                size="small"
                @click="search"
                class="btn searchbtn"
                >查询</el-button
              >
              <el-button size="small" @click="resetfrom" class="btn restbtn"
                >重置</el-button
              >
              <el-popover
                popper-class="machinebox"
                placement="bottom"
                width="450"
                trigger="manual"
                ref="popover"
                v-model="morepopover"
                v-if="morepopoverFlag"
              >
                <!-- 下拉项不需要合并的 -->
                <el-form label-position="top" label-width="90px" :inline="true">
                  <el-row :gutter="10">
                    <el-col
                      :span="12"
                      v-for="(item, index) in selectoptions"
                      :key="index"
                    >
                      <el-form-item
                        :label="item.lable"
                        :prop="item.prop"
                        v-show="item.show && !item.Composite"
                      >
                        <div
                          :is="item.type"
                          v-model="model[item.enName]"
                          :placeholder="item.placeholder"
                          class="option"
                          :style="optionWidth"
                          :clearable="item.clearable"
                          :filterable="item.filterable"
                          :size="item.size"
                          :multiple="item.multiple"
                          @change="change(item.lable, model[item.enName], item)"
                          collapse-tags
                        >
                          <el-option
                            v-for="item in item.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </div>
                      </el-form-item>
                      <el-form-item
                        v-if="item.show && item.Composite"
                        :label="item.lable"
                        :prop="item.prop"
                      >
                        <Composite
                          :key="componentKey"
                          :data="item.options"
                          :default="item.default"
                          :content="item.placeholder"
                          :enName="item.enName"
                          @CompositeVal="CompositeVal"
                        ></Composite>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="morebtnbox">
                  <el-button size="mini" plain @click="moreclear"
                    >取消</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="moresearch"
                    >查询</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="small"
                  @click="morescreen"
                  class="btn morebtn"
                  >更多筛选</el-button
                >
              </el-popover>
              <!-- <el-button size="small" @click="packup" class="btn packup">{{
                packupFlag ? "收起筛选" : "高级筛选"
              }}</el-button> -->
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Composite from "./../CommonInput/Composite.vue";
import {
  cate_brand_list_in_stock,
  res_advanced_search,
} from "./../api/InventoryManagement";

export default {
  name: "erpOptions",
  components: { Composite },
  props: {
    data: {
      default: () => {
        return [];
      },
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //合并的下拉框样式
    hboptionWidth: {
      default: () => {
        return {
          width: "150px",
          marginLeft: "10px",
        };
      },
    },
    optionWidth: {
      default: () => {
        return {
          minWidth: "150px",
          marginLeft: "10px",
          marginBottom: "10px",
        };
      },
    },
    iptWidth: {
      type: Number,
      default: 830,
    },
    model: {
      default: () => {
        return "";
      },
    },
    //是否显示更多筛选
    morepopoverFlag: {
      default: () => true,
    },
    //是否显示带弹框项
    tankuangVisible:{
      default:()=> true
    }
  },
  watch: {
    data(newval, old) {
      console.log(newval, "zi------------------------", newval);
    },
  },
  computed: {
    //合并的input盒子总宽度
    styleIptWidth() {
      return {
        "--myinput-width": this.iptWidth + "px",
      };
    },
    //分类-需要合并的
    hboptions() {
      let arr = [];
      let flagarr = this.flagArr;
      arr = this.data.filter((item) => {
        return flagarr.includes(item.lable);
      });
      console.log(arr, "arr-----------");
      return arr;
    },
    //普通input
    inputoptions() {
      let arr = [];
      let flagarr = this.flagArr;
      arr = this.data.filter((item) => {
        return (
          !flagarr.includes(item.lable) &&
          item.type == "el-input" &&
          !item.ispopover
        );
      });
      console.log(arr, "arr-----------");
      return arr;
    },
    //日期
    dateoptions() {
      let arr = [];
      arr = this.data.filter((item) => {
        return item.format == "timestamp" && item.show == true;
      });
      arr.findIndex((item) => item.enName == this.dateval) == -1
        ? this.$set(this, "dateval", arr[0].enName)
        : "";
      console.log(arr, "arr-----------日期");
      return arr;
    },
    //带弹出框
    popoveroptions() {
      let arr = [];
      arr = this.data.filter((item) => {
        return item.ispopover == true;
      });
      console.log(arr, "arr-----------");
      return arr;
    },
    // 下拉项不需要合并
    selectoptions() {
      let arr = [];
      let flagarr = this.flagArr;
      arr = this.data.filter((item) => {
        return (
          !flagarr.includes(item.lable) &&
          item.format != "timestamp" &&
          !item.ispopover
        );
      });
      console.log(arr, "arr-----------");
      return arr;
    },
  },
  data() {
    return {
      flagArr: ["分类", "品牌", "型号", "颜色", "容量"], //需要合并的数据
      value: "imei", //imei||sn的下拉项
      datevalue: "", //时间v-model
      imeisn: "", //质检码||sn
      textarea: "", //文本域v-model
      dateval: "time", //日期下拉项
      packupFlag: false, //收起
      cascaderFrom: [],
      cascaderProps: {
        multiple: false,
        checkStrictly: true,
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
      colorList: [],
      imeipopover: false, //带弹窗的imei输入框
      machineval: "", //机器分类更多弹出框-input回显文本
      machinevisible: false, //机器分类更多弹出框
      machinevals: {
        fenlei: "",
        pinpai: "",
        xinghao: "",
        yanse: "",
        rongliang: "",
      },
      componentKey: "",
      morepopover: false, //更多筛选
      isinput: false, //是否可以输入
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() >
            new Date(new Date().toLocaleDateString()).getTime() +
              24 * 60 * 60 * 1000 -
              1
          );
        },
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              const end =
                new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1;
              const time = new Date();
              time.setDate(1);
              time.setHours(0);
              time.setSeconds(0);
              time.setMinutes(0);
              var start = time.getTime();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  methods: {
    // 获取机器类型
    lazyLoad(node, resolve) {
      const { level } = node;
      if (!node.data) {
        cate_brand_list_in_stock().then((res) => {
          const nodes = Array.from(res.datas).map((res) => {
            return {
              label: res.label,
              value: res.value,
              leaf: false,
              type: "shouji",
            };
          });
          resolve(nodes);
        });
      } else if (node.data.type == "shouji") {
        cate_brand_list_in_stock({ cate_id: node.data.value }).then((res) => {
          const nodes = Array.from(res.datas).map((item) => ({
            value: item.value,
            label: item.label,
            leaf: false,
            type: "pinpai",
          }));
          console.log("请求");
          resolve(nodes);
        });
      } else if (node.data.type == "pinpai") {
        cate_brand_list_in_stock({
          cate_id: node.path[0],
          brand_id: node.path[1],
        }).then((res) => {
          const nodes = Array.from(res.datas).map((item) => ({
            value: item.value,
            label: item.label,
            leaf: true,
            type: "xinghao",
          }));
          resolve(nodes);
        });
      }
      // else if (node.data.type == 'xinghao') {
      //     cate_brand_list_in_stock({ cate_id: node.path[0], brand_id: node.path[1], model_id: node.path[2] }).then((res) => {
      //         if (res.datas.length != 0) {
      //             const nodes = Array.from(res.datas.rom_list).map(item => ({
      //                 value: item.value,
      //                 label: item.label,
      //                 leaf: level >= 4,
      //                 type: 'rom'
      //             }))
      //             this.colorList = res.datas.color_list
      //             resolve(nodes);
      //         } else {
      //             resolve();
      //         }
      //     })
      // }
      // else if (node.data.type == 'rom') {
      //     const nodes = this.colorList.map(item => ({
      //         value: item.value,
      //         label: item.label,
      //         leaf: level >= 4
      //     }))
      //     resolve(nodes);
      // }
      else {
        resolve();
      }
    },
    handleExpandChange(e) {
      console.log(e);
      // this.cascaderFrom.push(e)
    },
    cleartext() {
      this.isinput = false;
      this.textarea = "";
      this.imeisn = "";
      this.$emit("imeichange", this.value, "");
      this.$emit("cleartext");
    },
    //点击imei关闭
    imeiclose() {
      this.imeipopover = false;
    },
    //点击imei小图标
    imeiiconClick() {
      this.imeipopover = !this.imeipopover;
    },
    imeichange() {
      const rep = /[^\s]+/g;
      let imeisn = "";
      this.textarea ? (this.isinput = true) : (this.isinput = false);
      if (this.textarea) {
        this.imeisn = "";
        imeisn = this._.words(this.textarea, rep).join();
      } else {
        this.textarea = "";
        imeisn = this.imeisn;
      }
      this.$emit("imeichange", this.value, imeisn);
      this.$forceUpdate();
      // console.log("zi-------------------", imeisn);
    },
    //下拉项change
    change(label, model, itm) {
      // console.log(label, model,"99999");
      if (this.flagArr.includes(label)) {
        let result = "";
        this.hboptions.forEach((item) => {
          if (item.lable == label) {
            result = item.options.find((item_) => item_.value == model);
          }
        });
        //分类,品牌,型号,颜色,容量
        switch (label) {
          case "分类":
            if (result && result.label) {
              this.machinevals.fenlei = result.label;
              this.machinevals.pinpai = "";
              this.machinevals.xinghao = "";
              this.machinevals.yanse = "";
              this.machinevals.rongliang = "";
            }
            break;
          case "品牌":
            if (result && result.label) {
              this.machinevals.pinpai = result.label;
              this.machinevals.xinghao = "";
              this.machinevals.yanse = "";
              this.machinevals.rongliang = "";
            }
            break;
          case "型号":
            if (result && result.label) {
              this.machinevals.xinghao = result.label;
              this.machinevals.yanse = "";
              this.machinevals.rongliang = "";
            }
            break;
          case "颜色":
            if (result && result.label) this.machinevals.yanse = result.label;
            break;
          case "容量":
            if (result && result.label)
              this.machinevals.rongliang = result.label;
            break;
          default:
            break;
        }
        this.machineval = [
          this.machinevals.fenlei,
          this.machinevals.pinpai,
          this.machinevals.xinghao,
          this.machinevals.yanse,
          this.machinevals.rongliang,
        ]
          .filter((item) => item != "")
          .join("/");
      }
      this.$emit("change", label, model, itm);
    },
    clearhboptions(label) {
      if (this.flagArr.includes(label)) {
        switch (label) {
          case "分类":
            this.machinevals.fenlei = "";
            this.machinevals.pinpai = "";
            this.machinevals.xinghao = "";
            this.machinevals.yanse = "";
            this.machinevals.rongliang = "";
            break;
          case "品牌":
            this.machinevals.pinpai = "";
            this.machinevals.xinghao = "";
            this.machinevals.yanse = "";
            this.machinevals.rongliang = "";
            break;
          case "型号":
            this.machinevals.xinghao = "";
            this.machinevals.yanse = "";
            this.machinevals.rongliang = "";
            break;
          case "颜色":
            this.machinevals.yanse = "";
            break;
          case "容量":
            this.machinevals.rongliang = "";
            break;
          default:
            break;
        }
        this.machineval = [
          this.machinevals.fenlei,
          this.machinevals.pinpai,
          this.machinevals.xinghao,
          this.machinevals.yanse,
          this.machinevals.rongliang,
        ]
          .filter((item) => item != "")
          .join("/");
        console.log(this.machineval, " this.machineval");
      }
    },
    // 查询
    search(val) {
      this.imeipopover = false;
      this.$emit("search");
    },
    //重置
    resetfrom() {
      this.isinput = false;
      this.textarea = "";
      this.imeisn = "";
      this.datevalue = "";
      this.machineval = ""; //机器分类更多弹出框-input回显文本
      this.$emit("resetfrom");
      this.$emit("search");
      this.componentKey += 1;
      //  console.log( this.$children," this.$children");
    },
    //更多筛选
    morescreen() {
      this.morepopover = !this.morepopover;
    },
    //收起
    packup() {
      this.packupFlag = !this.packupFlag;
    },
    //imei下拉change
    imeiselectchange(e) {
      this.imeisn = "";
      this.textarea = "";
      this.textarea ? (this.isinput = true) : (this.isinput = false);
      this.$emit("imeichange", this.value, this.imeisn);
      console.log(e, "imei下拉----------");
    },
    //日期下拉change
    dateselectchange(e) {
      // console.log(e, "日期下拉----------111", this.datevalue);
      this.datevalue = [];
      this.$emit("datevalue", e, this.datevalue);
    },
    //日期change
    datechange(e) {
      this.$emit("datevalue", this.dateval, e);
      // console.log(e, "日期change---------", this.dateval);
    },
    /**
     * 修改默认日期
     * @param {String} e 
     * @param {Array} time 
     */
    changeDefaultDate(e,time){
      this.dateval = e;
      this.datechange(time)
    },
    //动态加载分类-change
    cascaderchange(e) {
      console.log(e, "e------------", e.length, this.cascaderFrom);
      // 选中节点后，关闭下拉
      // this.$refs.cascaderHandle.dropDownVisible = false;
    },
    //动态加载input加自定义内容
    visibleChange(visible, refName) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-template-menu__list"
          )
        ) {
          const el = document.createElement("div");
          el.className = "el-template-menu__list";
          el.style =
            "border-top:1px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px";
          el.innerHTML = `<div class="" style="display:flex;justify-content: flex-end;padding:8px;">
                                        <button id="btn1" class="el-button  btn restbtn el-button--default el-button--small">取消</button>
                                        <button id="btn2" class="el-button btn searchbtn el-button--primary el-button--small">确定</button>
                                    </div>`;
          popper.appendChild(el);
          document.getElementById("btn1").onclick = (e) => {
            console.log(e);
            ref.toggleDropDownVisible(false);
          };
          document.getElementById("btn2").onclick = (e) => {
            console.log(e);
            ref.toggleDropDownVisible(false);
          };
        }
      }
    },
    //机器分类更多弹出框
    machineFocus() {
      this.machinevisible = true;
    },
    //机器分类更多弹出框-查询
    machinesearch() {
      console.log(this.model);
      this.machinevisible = false;
      this.$emit("search");
    },
    //机器分类更多弹出框-change
    machinechange(e) {
      console.log(e, "e------------------change");
    },
    //机器分类更多弹出框-清除
    machineclear() {
      this.machinevals.fenlei = "";
      this.machinevals.pinpai = "";
      this.machinevals.xinghao = "";
      this.machinevals.yanse = "";
      this.machinevals.rongliang = "";
      this.$emit("machineclear");
      console.log("e------------------清除");
    },
    //机器分类更多弹出框取消
    machinecancel() {
      this.machinevisible = false;
    },
    //更多筛选-取消
    moreclear() {
      this.morepopover = false;
    },
    //更多筛选-查询
    moresearch(val) {
      this.morepopover = false;
      this.$emit("search", val);
    },
    CompositeVal(val) {
      this.$emit("CompositeVal", val);
    },
  },
  deactivated() {
    this.imeipopover = false;
    this.morepopover = false;
    this.machinevisible = false;
  },
};
</script>

<style lang="scss">
.popperOptions {
  min-width: 200px !important;
  padding: 0px !important;
}

.machinebox {
  display: flex;
  flex-wrap: wrap;

  .machine {
    margin-bottom: 5px;
  }

  .btnbox1 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss" scoped>
.divider {
  margin: 0;
}

.btnbox {
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-form-item {
  width: 100%;
  margin-bottom: 0;
  margin-right: 0;
}
.el-form {
  width: 100%;
  line-height: 0px;
}
.home {
  display: flex;
  padding: 15px 20px;
  box-sizing: border-box;
  background: #fff;
}

::v-deep .el-form-item__content {
  width: 100%;
  line-height: 32px;
}

.myinput {
  .flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .flex-left {
      display: flex;
    }
    .hbbox {
      display: flex;
      border: 1px solid #ccc;
      border-radius: 4px;
      height: 34px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .dynamicLoading {
      margin-left: 10px;

      ::v-deep .el-input.el-input--small.el-input--suffix {
        .el-input__inner[style="height: 34px;"] {
          height: 32px !important;
        }
      }
    }

    .box {
      display: flex;
      align-items: center;

      .option {
        width: 100px;

        ::v-deep .el-input__inner {
          border: none;
        }
      }
    }

    .machinemore {
      // padding-left: 10px;
    }
  }
}
.dateselect {
  max-width: 135px;
}
.popover {
  display: flex;
  margin: 0 10px;
  .ipt2 {
    .imeiicondefault {
      padding: 5px;
      border-radius: 4px;
      background: #f0f2f5;
      cursor: pointer;
    }

    .imeiiconActive {
      color: #409eff;
      background: #e9f1fc;
    }
  }
}
.item {
  width: 100%;
  display: flex;
  span {
    width: calc(100% - 135px);
    display: inline-block;
    font-size: 12px;
    color: #606266;
  }
}
::v-deep .el-textarea__inner {
  border: none;
}

::v-deep .popover {
  .dateselect {
    .el-input__inner {
      position: relative;
      border-radius: 4px 0 0 4px;
      z-index: 1;
    }
  }
  .ipt2 {
    margin-left: -1px;
  }
  .el-input__inner {
    border-radius: 0 4px 4px 0;
  }
  .el-input__inner:hover {
    position: relative;
    z-index: 1;
  }
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    position: relative;
    z-index: 1;
  }
  .el-input__suffix {
    z-index: 1;
  }
}
::v-deep .dateinput {
  display: flex;
  .el-select .el-input__inner {
    min-width: 135px;
    position: relative;
    border-radius: 4px 0 0 4px;
    z-index: 1;
  }
  .el-input__suffix {
    z-index: 1;
  }
  .el-input__inner:hover,
  .el-select:hover .el-input__inner {
    position: relative;
    z-index: 1;
  }
  .el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    position: relative;
    z-index: 1;
  }
  .el-range-editor.el-input__inner {
    width: 100%;
    max-width: 240px;
    border-radius: 0px 4px 4px 0px;
    margin-left: -1px;
  }
}
.searchbtnbox {
  padding-left: 10px;
  .btn {
    height: 32px;
  }

  .morebtn {
    margin: 0 10px;
  }
}
.machinebox {
  .el-form-item {
    margin-right: 0px !important;
  }

  .el-input {
    margin: 0px !important;
  }
  .el-select {
    width: 100%;
    margin: 0px !important;
  }
}
::v-deep .el-form-item__label {
  padding: 0 !important;
}
.morebtnbox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
::v-deep .Merchant {
  // .el-form-item__content {
  //   width: 192px;
  //   margin-left: 10px;
  // }
}
// ::v-deep .el-input__inner,.el-input{
//   min-width: 230px;
//   max-width: 230px;
// }
.el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>