el-search-input v1.0.21

基于element-ui二次开发表单组件

• 组件调用
• store嵌入
• i18n使用

component

组件调用

<template>
  <search-input v-model="searchCriteria" type="DATE_SECTION" :config.sync="config" @change="dataselect"/>
</template>

<script>
import { searchDimension } from '@/apis/commot'

export default {
  name: "App",
  data() {
    return {
      selectlistData: {},
      type: 'DATE_SECTION',   // 组件类型
      config: {
        dataType:"datetime",
        dimensionId:'DIM202103000062',
        displayName:"GL日期",           // 标题
        extDictMap:null,
        fieldName:"gl_date",            // 状态获取的字段
        initValue:null,
        axios: searchDimension,         // 响应接口
        //   function searchDimension(params) {
        //     return axios({
        //         url: 'fields/searchDimension',
        //         method: 'get',
        //         params
        //     })
        //   }
        linkFilterInfoMap:null,
        reportId:"RPT202103000036",     // 接口响应id
        searchInputType:"DATE_SECTION",
      },
    };
  },
  methods: {
    dataselect(val) {
      console.log(val)
    }
  }
};
</script>

stroe

store嵌入使用

import search from 'el-search-input/store'
export default new Vuex.Store({
  state: {},
  modules: {
    search
  },
  mutations: {}
}

i18n

vue-i18n使用

// main
import SearchInput from 'el-search-input'
import i18n from "./i18n.js";

Vue.use(SearchInput, i18n)

// i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import zh from 'el-search-input/i18n/zh-CN'
import en from 'el-search-input/i18n/en'

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': {
      ...zh
    },
    'en': {
      ...en
    }
  }
});