vue2_ts_components v1.2.1

使用说明

使用背景

vue2_ts_component 基于vue2.x 完成搭建。

使用建议为：项目为vue2版本 ，支持国际化 。

组件主要为系统管理产品提供较快封装组件，通过配置项免去手写页面。

涉及的自定义配置组件，内部均有默认配置，你可以先观察默认情况是否满足你的预期，再进行修改，这将减少你不必要的配置

开始

安装

npm i vue2_ts_components

配置使用

import 'vue2_ts_components/dist/app.css';
import vue2TSComponent from 'vue2_ts_components';

/**
   如果你需要使用ts约束分页、各类配置
   你可以引入以下ts
**/
import 'vue2_ts_components/src/ts/comm.ts';


Vue.use(vue2TSComponent);



const data = new Vue({
  render: h => h(App),
}).$mount('#app')

国际化问题

项目封装的组件已经完成了国际化中文 and 英文展示，通过localStroge.getItem('lang')来区分当前环境中英文

其中CN 代表中文， EN 代表 英文

有时候我们环境localStroge.getItem('lang') 已经用于其它变量，为此，你可以在Vue.use(Vue2_ts_components,{lang: 'currentLang'}) 通过use方法，传递属性为lang的自定义取localStroge的字段。

如

Vue.use(Vue2_ts_components,{lang: '__current__lang'})

此时，内部组件将通过 stroge中的__current__lang 来判定当前使用环境

可用模块

为方便你对组件配置项类型、可选参数方便观看，提供了组件内部的公共TS文件，你可以引入node_modules里面的ts声明文件，来帮助你快速的使用组件

import {
	IPagination,
	ISearch,
	ITableConfig,
	ITableColumnConfig,
	IOptions,
	IFormSearch,
	IHandle,
	IResponse
} from 'vue2_ts_components/src/ts/comm';

可用组件列表

表格(已集成分页)

使用

支持element-ui Table上所有属性和方法

当组件配置与element-ui table上的属性共同存在时，组件配置项优先于table上的属性

TableComponent内部已设定高频使用表格的配置配置参数，你可以先不传tableConfig配置，来观察是否满足你的预期，如果不满足再进行自定义配置，这将提高你的开发效果

<TableComponent
      :tableData="tableData"
      :tableColumnConfig="tableColumnConfig"
      @getSelectRow="getSelectRow"
    >
        <!-- 表格头部操作栏  slotName不可变 -->
        <template #batchHandle="{data}">
            <el-button type="danger" @click="deleteItem(data)">批量删除</el-button>
       <!-- <el-button type="danger" @click="deleteItem(data)">新增</el-button>
            <el-button type="danger" @click="deleteItem(data)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(data)">其它</el-button> -->
        </template>
        
        <!-- 自定义时间  -->
         <template #date="{data}">
           <p @click="showData(data)">{{data.date.replaceAll('-','/')}}</p>
        </template>
        
        <!-- 操作栏按钮slot  -->
        <template #handle="data">
            <el-button type="danger" @click="deleteItem(data)">删除</el-button>
        </template>
        
  </TableComponent>
  <script>
  tableConfig = {
      indexWidth: 120
  };
  tableColumnConfig = [
    {
       title: '标题',
       key: 'title'
    },
     {
       title: '日期',
       key: 'date'
    },
  ];
</script>

预览

tableConfig 配置项

tableColumnConfig配置项

tableAttributes 可配置element-ui table自带属性，优秀级低级当前组件属性和方法

详细参考Element-ui https://element.eleme.io/#/zh-CN/component/table ¶Table Attributess配置参数

<TableComponent :tableAttributes="{size: 'mini'}"></<TableComponent>

tableEvents 可配置element-ui table自带方法，优秀级低级当前组件属性和方法

<TableComponent 
        :tableEvents="{
                      select: (selection, row)=>{},
                      selection-change:(selection)=>{}}"
>
</<TableComponent>

loading 表格加载动画

<TableComponent :loading="loadingStatus"></<TableComponent>

paginationData 表格分页自定义配置参数

此外配置具体参数与【分页封装】配置项完全相同，请参数上面分页封装，如果需要隐藏分页可通过config.showPagination = false完成

搜索栏

使用

<FormGroup
      :formConfig="formConfig"
      ref="formItemGroup"
      @getFormData="getFormData"
    >
      <template #default="scope">
        <div class="handle-btn">
          <el-button
            size="small"
            icon="el-icon-refresh-left"
            type="default"
            @click="scope.reset"
            >{{ $t("重置") }}</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="scope.search"
            >{{ $t("查询") }}</el-button
          >
        </div>
      </template>
    </FormGroup>

详细事例

  formConfig: IFormSearch[] = [
    {
      label: '公司',
      key: "company",
      type: "selectRemoteMethod",
      span: 6,
      multiple: true,
      collapseTags: true,
      loadApi: async (params) => {
        const data = await axios.post(url) || []
        return data;
      },
    },
    {
      label: '学校',
      key: "school",
      type: "radio",
      span: 6,
      multiple: true,
      collapseTags: true,
      value: 1,
      loadApi: [
          {label: '重庆大学', value: 1},
          {label: '北京大学', value: 2}
      ],
       onChange: ({formData, formList, index, e}: any, that: any)=>{
    	   that.formData['curShool'] = e;	
      }
    },
    {
        label: '当前学校',
        key: 'curSchool',
        type: 'input',
        span: 6,
        // 自定义element原生控制
        elementAttributes:{
            "show-password": true
        }
    }
        
   ];

预览

formConfig[] 配置

金额输入框

使用

与普通输入框相同，在此增加千分位展示

<MoneyInput v-model="money"></MoneyInput>

参数配置

与element-ui Input框完全相同

标题

使用

<TableTitle title="查询条件" themeColor="orange"></TableTitle>

预览

远程单选多选搜索

使用

   <RemoteMethodSelect
              v-model="name"
              :loadApi="getNameFunction"
              @getFullData="getFullData"
   ></RemoteMethodSelect>
<script>
  new Vue({
      methods:{
          /**
            * params为远程搜索输入关键字
            * @pamra { object } params;
          **/
          async getNameFunction(params){
              const result =  axios.get(url,pamras);
              /** 请返回一个带有label  and value 两个字段的数据  **/
              return result.map(item=>({
                  label: item.text,
                  value: item.id
              }));
          }
      }
  })
</script>

分页封装

使用

 <PaginationComponent :config="config" @getPaginationData="getPaginationData">
 </PaginationComponent>

预览

上传文件

使用

<UploadGroup
          :fn="uploadFile"
          :title="上传导入"
          :callBack="uploadFileResponse"
        ></UploadGroup>

<script>
 // 封装的ajax
 const custormAxios = (file,onUploadProgress){
        return  axios.create({
   			 baseURL: '/', // 如果url不是绝对路径，那么会将baseURL和url拼接作为请求的接口地址,用来区分不同环境，
    		 timeout: 60000, // 请求超时时间
   			 responseType: 'json', // 表示服务器响应的数据类型
    		 onUploadProgress: function (progressEvent) {
      			// 对原生进度事件的处理
      		    onUploadProgress ? onUploadProgress(progressEvent): ()=>{}
    		},
        }
    

new Vue({
    methods:{
        uploadFile(files,onUploadProgress){
           // 调用自己的ajax，onUploadProgress请在ajax中的上传进度事件中调用
            custormAxios(file,onUploadProgress)
        },
        uploadFileResponse(responseData){
            // 接口响应回来的数据
        }
    }
})
</script>

预览

其它问题

Q：两个及以上的搜索框依赖于同一个数据？

现有如下配置，公司1、公司2共同使用后台同一个接口，如果直接配置，会出现页面调用两次http://xxx.com/list

  formConfig: IFormSearch[] = [
    {
      label: 公司1,
      key: "company",
      type: "selectRemoteMethod",
      span: 6,
      multiple: true,
      collapseTags: true,
      loadApi: async (params) => {
        const data = await axios.post('http://xxx.com/list') || []
        return data;
      },
    },
    {
      label: 公司2,
      key: "company",
      type: "selectRemoteMethod",
      span: 6,
      multiple: true,
      collapseTags: true,
      loadApi: async (params) => {
        const data = await axios.post('http://xxx.com/list') || []
        return data;
      },
    }
   ]

为避免这种情况，你可以调用代码如下

  formConfig: IFormSearch[] = [
    {
      label: 公司1,
      key: "company",
      type: "selectRemoteMethod",
      span: 6,
      multiple: true,
      collapseTags: true,
      loadApi: async (params) => {
        const data = await this.getList();
        return data;
      },
    },
    {
      label: 公司2,
      key: "company",
      type: "selectRemoteMethod",
      span: 6,
      multiple: true,
      collapseTags: true,
      loadApi: async (params) => {
        const data = await this.getList();
        return data;
      },
    }
   ]
  // data中定义存放变量
  companyList: any = [];

  public async getList(){
      // 已经存在,直接返回数据
      if(this.companyList){
          return this.companyList
      }
      // 不存在，请求接口
      const data  = await axios.post('http://xx.com/list');
      this.companyList = data;
      return data;
  }

其它异常

由于工作原因测试不足，可能存在异常情况，如某些功能异常

如果你已经使用了这套组件遇到了问题，可通过QQ: 1045749725与我联系，我将尽量解决你的问题和补充所需功能