kis-el-plus v1.0.5

kis-el-plus

Introduce

kis-el-plus Keep It Simple for Element Plus This package privides:

• Some components which base on the Element plus
• A directive v-auth
• A global attribute $api for HTTP request
• A global attribute $hint for friendly tips
• A global attribute $m with some methods

Using

1. Installation

npm install kis-el-plus

2. In main.js

import {kisElplus} from "kis-el-plus"
app.use(kisElplus,{
    baseUrl:"/api",  //axios.default.baseURL
    apiContext : require.context("@/api", false, /\.js$/), //http api
    apiResponseErrorInterceptor : function(err){
        //axios response error interceptor will be called when the response is failed;
    },
    apiRequestInterceptor: function(config){
        //axios request interceptor
    }
});

3. Main Components Using

ks-table-loader

<template>
     <ks-table-loader
         pageable
         multiSelect
         :columns="ui.columns"
         :buttons="ui.buttons"
         :data="tableData"
         :privileges="$store.getters.privileges"
         @edit="doEdit"
         @delete="doDelete"
         :query-condition="qryCondition"
         @currentPageChanged="doQuery"
         @multi-select="multiSelect">
     </ks-table-loader>
 </template>
 <script>
     export default {
         setup(props, context){
         const tableData = ref([]);
         const ui = reactive({
             columns: [
                 {
                     prop: 'p1',
                     label: 'Label1',
                     width: 150,
                 },
                 {
                     prop: 'p2',
                     label: 'Label2',
                 },
             ],
             buttons: [
                 {
                     type: "success",
                     label: "Edit",
                     event: "edit",
                     code: 1001
                 },
                 {
                     type: "danger",
                     label: "Delete",
                     event: "delete",
                     code: 1002
                 }
             ],
         });
         const qryCondition = reactive({
             pageNo: 1,
             pageSize: 10,
             totalCount:0,
             findContent: ''
         });
         const multiSelect = function(selection){
         };
         return{
             ui,
             qryCondition,
             doQuery,
             doEdit,
             doDelete,
             multiSelect,
             tableData
         }
     },
 </script>

• Attributes

  Attirbute	Description	default
  queryCondition	query condition，an Object width pageNo,pageSize,totalCount
  data	Table data,See the data attribute of el-table
  columns	table columns
  privileges	privides list
  buttons	action buttons that will be diaplayed on the action column
  maxHeight	See the max-height attribute of el-table
  height	See the height attribute of el-table
  actionColumnWidth	the action column width
  pageable	Whether paging	false
  highlightCurrentRow	See the highlight-current-row attribute of el-table
  multiSelect	whether support multiple select	false
  refName	the ref name of table	null
  rowClassName	See the attribue row-class-name of el-talbe

  columns: define the array of columns,the element is an object with attribues:

  • prop：See the prop attribute of el-talbe table-column attributes
  • label：See the lable attribute of el-talbe table-column attributes
  • width: See the width attribute of el-talbe table-column attributes
  • headerAlign: See the header-align attribute of el-talbe table-column attributes
  • align：See the align attribute of el-talbe table-column attributes
  • formatter：a function that format the output
  • slot：define the named slot column，and the name of slot is same with prop, slot attribute includes index and row
  • image diaplay an image

  buttons:

  • type：See the type attribute of el-button
  • label：define the label of button
  • code： define the function code of button
  • event：define the click event name
  • width：define the width of button

• Events

  Event Name	Description	Parameters
  currentPageChanged	See the evet current-change of el-table
  multiSelect	See the event selection-change of el-table
  rowDoubleClick	See the event row-dblclick of el-table
  selfdefine events	the events that defined by the buttons attribute	index, row

  ks-form-loader

  <template>
      <ks-dialog :title="title" v-model:visible="visible" :ok="saveOk" :cancel="doCancel">
          <ks-form-loader
              ref="editForm" 
              :ui="ui.form" 
              :model="formData">
          </ks-form-loader>
      </ks-dialog>
  </template>
  <script>
      export default {
          setup(props, context) {
              const ui = reactive({
                  form:[
                      {
                          label: "Lable1",
                          type: "input",
                          model: "ipAddress",
                          rules: [{ required: true, message: "null" }],
                      },
                      {
                          label: "Label2",
                          type: "input",
                          model: "serverName",
                      },
                      {
                          label: "Label3",
                          type: "input",
                          model: "description",
                      },
                  ]
              });
              const formData = reactive(props.data);
              const editForm = ref(null)
              const saveOk = function () {
                  editForm.value.validate(()=>{
                      ...
                  });
              };
              const doCancel = function(){
                  context.emit("update:visible",false);
              }
              return {
                  ui,
                  editForm,
                  formData,
                  saveOk,
                  doCancel,
              };
          },
      };
  </script>
  <style>
  </style>

• Attributes |Attirbute|Description|default| |---|---|---| |inline|See the inline attribute of el-form|false| |labelWidth|See the label-width attribute of el-form|| |model|See the model attribute of el-form|| |ui|array used to define the form||

ui: define the array of form item,the element is an object with attribues:

• label：See the label attribute of el-form form item Attributes
• model：binding value
• clearable：whether to show clear button
• password：whether to show toggleable password input,default false
• multilines：whether to enter multiple lines of text information,only for input
• placeholder：placeholder
• disabled：whether to be disabled
• maxlength：the max length,only for input
• rules：Validation rules
• source：only be used when the type is one of "radio","checkbox" and "select". e.g. {valueField: "id",labelField: "label",data: {id:1,label:"tt"},{id:2,label:"mm"}}
• autosize：See the autosize attribute of el-input
• type： |value|description| |---|---| |"input"|el-input| |"date"|el-date-picker| |"datetime"|el-date-picker| |"switch"|el-switch| |"daterange"|el-date-picker| |"radio"|el-radio-group| |"checkbox"|el-checkbox-group| |"inputnumber"|el-input-number| |"select"|el-select| |"upload"|ks-upload| |"rate"|el-rate| |"slot"|slot name is setted the value of model attribute|

ks-toolbar

     <ks-toolbar>
             <el-button type="primary"
                 size="small"
                 @click="doNew">New</el-button>
             <el-button type="success"
                 size="small"
                 @click="doNew">Edit</el-button>
     </ks-toolbar>

• Attributes |Attirbute|Description|default| |---|---|---| |justify-content|Alignment style,[start |end|center]|start|

ks-timer

<ks-timer @task="doTimer" :interval="1000"></ks-timer>

• Attributes | Attribute | Description | default | | --------- | --------------------- | ------- | | interval | the interval of Timer | 1000ms |

• Event

  Event	Description
  task	scheduled task is to be executed by the timer

ks-uploader

<ks-upload url="/file/upload" :maxsize="20" @success="doImportSuccess">
	<el-button type="warning" size="small">上传</el-button>
</ks-upload>

• Attributes | Attribute | Description | Default | | --------- | ----------------------------------- | ------- | | url | upload url | | | maxsize | max size of the file to be uploaded | 10M |

• Slots

  Name	Description
  default	customize default content

• Events

  Event	Description
  success	hook function when uploaded successfully.

4. Directives

v-auth

 <el-button type="primary"
            size="small"
            v-auth:[$store.getters.privileges]="$gl.au_wm_add"
            @click="doNewMask">新建</el-button>

​ The directive argument is an array of permission codes. And the directive value is the permission code that is related to the DOM elements.

5. Global \$api

9de6146cbeb13cac0e711261d775a79ecda43e40 2ccfd36cb880518e7ca0aff6b62192600ce42093

In main.js：

import {kisElplus} from "kis-el-plus"
app.use(kisElplus,{
    baseUrl:"/api",
    apiContext : require.context("@/api", false, /\.js$/)
});

• Set axios baseURL with the options baseUrl
• Using the function request.context to set the option apiContext. The first parameter is the directory of API js files. The API files will be delegated by the global \$api . The file name will be one of attributes of the object \$api.
• The API js files should import http module(provides methods : get,post,delete,post,postFormData) from this package. And API function should be defined like:

    function(data){
        return http.post(url,data);  //return a promise
    }

e.g.

sec.js

import {http} from "kis-el-plus"
export default {
    login(data){
        return http.post("/login",data);
    },
}

caller.js

    setup(props,context) {
        const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();
        global.$api.sec.login({username:"aaa",password:"11111"}).then(
        (data) => {
            //success
        },
        (err)=>{
            //failed
        }  
    );
    }
    

6. Global \$hint

7. Global \$m