# npm-kis-elplus

**Repository Path**: lisrlee/npm-kis-elplus

## Basic Information

- **Project Name**: npm-kis-elplus
- **Description**: Keep it simple for using elementplus
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-19
- **Last Updated**: 2026-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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**
``` javascript
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
   ``` vue
   <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
  ``` vue
  <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
   ``` vue
        <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,&#91;start	&#124;end&#124;center&#93;|start|

#### ks-timer

``` vue
<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

``` vue
<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

``` vue
 <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：

``` javascript
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:
``` javascript
    function(data){
        return http.post(url,data);  //return a promise
    }
```

**e.g.** 

sec.js

``` javascript
import {http} from "kis-el-plus"
export default {
    login(data){
        return http.post("/login",data);
    },
}
```
caller.js
```javascript
    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|