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

|method|Parameters|description| |---|---|---| |confirm|param:{title,yesAction,noAction}|yesAction will be called while user click yes button and noAction will be called while click no button| |alert|(msg,action)|action will be called while user click the ok button| |delete|(yesAction,msg)|yesAction will be called while user click the ok button| |success|(msg)|default "success"| |error|(msg)|default "failed"| |msg|(msg)||

7. Global $m

|Method|Parameters|description| |---|---|---| |formatDate|(value)|Returns a formatted string like "yyyy-MM-dd"| |formatDateTime|(value)|Returns a formatted string like "yyyy-MM-dd hh:mm:ss"| |isEmpty|(object)|Check whether the given object is undefined or null or an empty string| |isRef|(object)|Check whether the given object is undefined or null| |isPromise|(object)|Check whether the given object is Promise| |isFunction|(object)|Check whether the given object is Function| |isObject|(object)|Check whether the given object is Object| |isArray|(object)|Check whether the given object is Array|