search-mis_1.1 v1.0.4

search-mis_1.1

为了开发的便捷，其搜索条件的多样性，特模仿华为云的搜索组件，进行开发

• 注释：此组件是结合element-ui结合开发的

安装 && 引入

安装

npm install search-mis_1.1 -S

全局注册

import search from "search-mis_1.1";
import "search-mis_1.1/search_mis.css";

局部引入

<template>
  <search ref="sechs" :dats="data" @handlesousuos="handlesousuos" @handlechildren="handlechildren" @handlechildOne="handlechildOne"></search>
</template>

<script>
import search from 'search-mis_1.1';
import 'search-mis_1.1/search_mis.css'
export default {
  components: {
    examples
  },
  data:{
    data:[
        {
    value: "statue",
    title: "支付状态",
    kiklis: '0',
    children: [
      { value: 0, title: "未支付" },
      { value: 1, title: "已支付" },
    ],
    switch: true,
    change: 'handlechildren', //当其他搜索条件需要动态数据时如statue2，父组件可自定义方法进行通信如:'handlechildren'
    changetitle:'statue2', //需要进行交互的如statue2
  },
  {
    value: "statue2",
    title: "支付状态2",
    kiklis: '0',
    children: [

    ],
    switch: true,
    changeOne:'handlechildOne', //当前搜索条件需要动态数据时使用，如handlechildOne方法函数进行通信
  },
  {
    value: 'state',
    title: '状态',
    kettipe: true, //多项选择
    kiklis: '0', //0为下拉,1位输入框
    switch: true, //是否开启搜索条件
    cannotDelete: false, //必填搜索条件（其后端搜索条件必传项，除分页以外的数据，可开启）
    keys: "ok", //cannotDelete为true时必传，除时间组件外
    children: [{
      value: 'ok',
      title: '成功',
      checkAll: false,//下拉搜索且多条件搜索
    }, {
      value: 'error',
      title: '失败',
      checkAll: false
    }, {
      value: 'erops',
      title: '未知',
      checkAll: false
    }]
  },
  {
    value: "paySn",
    title: "单号",
    kiklis: '1', //0位下拉，获取value值,1为输入框,获取输入信息
    tesvalue: true, //默认搜索条件(用户直接在输入框输入回车后直接搜索)
    switch: true,//是否开启搜索条件
  },
  {
    title: "创建时间",
    value: "createTimeStr", //出时间字段不为搜索条件字段
    kiklis: "2", //0为下拉,1位输入框，2为时间框
    switch: true, //是否开启搜索条件
    kettipe: false, //多项选择
    cannotDelete: false, //必填搜索条件
    children: [ //时间数量可为1或者2
      {
        title: "开始时间",
        value: '',//当cannotDelete为true时不能为空
        name: "starttime", //开始时间搜索字段
        types: "yyyy-MM-dd HH:mm:ss",//时间格式yyyy-MM-dd HH:mm:ss（注：YYYY/MM/DD大小写更具前端版本而定）
        disabledBooler: true, //时间禁用
        disabledDate: "", //禁用范围 如1
        dataType:true,//日期类型为datetime开启true否则false或者不传（默认false）
      },
      {
        title: "结束时间",
        value: '',
        name: "endtime", //结束时间搜索字段
        types: "yyyy-MM-dd HH:mm:ss", //时间格式yyyy-MM-dd HH:mm:ss（注：YYYY/MM/DD大小写更具前端版本而定）
        disabledBooler: true, //时间禁用
        disabledDate: "", //禁用范围
        dataType:true,//日期类型为datetime开启true否则false或者不传（默认false）
      },
    ],
  },
    ]
  },
  methods:{
    handlesousuos:function(row){
      //row为您传入后端的条件数据(除分页以外的数据)
    },
    handlechildren:function(row){
        //row为上一个数据，含有您可能会用到的字段
    this.$refs.sechs.chouend({
    val:您的动态数据,
    titval:item.title
     });
    },
    handlechildOne:function(){
      row.children = '您的动态数据';
    }
  }
}



//this.$refs.sechs.switchos(); //搜索重置
</script>