frontelementpackage/README.md

vue2封装的elementUI 组件

<div align="center"><h1>
<br/>
🍰
<br />
frontelementpackage
<br /><br />
</h1>
<sup>
<br />
<br />
<a href="https://gitee.com/Electrolux/front-element-package"><img src="https://img.shields.io/static/v1?label=version&message=v1.2.11&color=blue" alt="npm package" /></a><a href=https://space.bilibili.com/286773126><img src="https://img.shields.io/static/v1?label=Bili&message=Electrolux&color=red" alt="temp" /></a>
<a href="https://gitee.com/Electrolux/front-element-package">   <img src="https://img.shields.io/static/v1?label=Author&message=Electrolux&color=yellow" alt="demos" /></a>
<a href="https://gitee.com/Electrolux/front-element-package">   <img src="https://img.shields.io/static/v1?label=Contribute&message=welcome&color=green" alt="demos" /></a>
<br />
</a>
<br />
Translations: <a href="">🇨🇳 汉语</a>
</sup>
</div>









# 1.使用说明



## 1.1.CommonForm

 <img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/form.png"/>


formlabel示例数据如下：

```js
this.formlabel=[
    {
        "model": "name",
        "label": "姓名",
        "type": "input"
    },
    {
        "model": "sex",
        "label": "性别",
        "type": "select",
        "opts": [
            {
                "label": "男",
                "value": 1
            },
            {
                "label": "女",
                "value": 0
            }
        ]
    },
    {
        "model": "birth",
        "label": "出生日期",
        "type": "date"
    },
    {
        "model": "addr",
        "label": "地址",
        "type": "input"
    }
]

this.form 表单元素示例
this.form={
    "name": "",
    "addr": "",
    "age": "",
    "birth": "",
    "sex": ""
}

incline ：true or false 是否放在一列上
```

父组件调用示例（common-form）是我们封装的方法

```
<el-dialog
    :title="operateType === 'add' ? '新增用户' : '更新用户'"
    :visible.sync="isShow"
>
    <common-form
    :formLabel="formLabel"
    :form="form"
    :inline="true"
    ref="form"
    ></common-form>
    
    <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
    </div>
</el-dialog>
```

## 1.2.CommonTable

 <img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/table.png"/>

引入示例：import CommonTable from 'frontelementpackage/src/CommonTable.vue'


tabledata示例

```
this.tabledata=[
    {
        "id": "46BeC977-dC5b-bB93-2510-9d4AE8CBFc3e",
        "name": "龚静",
        "addr": "宁夏回族自治区 吴忠市 青铜峡市",
        "age": 41,
        "birth": "2010-03-22",
        "sex": 0,
        "sexLabel": "女"
    }
]

this.tableLabel=
[
    {
        "prop": "name",
        "label": "姓名"
    },
    {
        "prop": "age",
        "label": "年龄"
    },
    {
        "prop": "sexLabel",
        "label": "性别"
    },
    {
        "prop": "birth",
        "label": "出生日期",
        "width": 200
    },
    {
        "prop": "addr",
        "label": "地址",
        "width": 320
    }
]

this.config={
    "page": 1,
    "total": 200,
    "loading": false
}
```

父组件调用示例如下

```
 <common-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      
      @changePage="getList()"
      @edit="editFirstLevel"
      @del="delFirstLevel"
    ></common-table>

父组件中
methods中 
editFirstLevel(row){
    console.log(row)//row 就是这一行的数据
}
delFirstLevel(row){
    console.log(row)//row 就是这一行的数据
}

```

## 1.3.CommonTag

 <img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/tag.png"/>
tags变量示例： name指的是router中定义路由的name， label是显示的文字
点击tag可以根据name跳转到指定的路由 

```
tags: 
[ 
    { name: "HelloWorld", label:"测试" }, 
    { name:"echart", label:"测试2" }, 
    { name: "aside_Test", label:"测试21" }, 
],
changeMenu(item) {
      this.$router.push({ name: item.name });
    },
```

注意在调用删除按钮的时候，由于vue子组件不能直接改变父组件的值，
因此我们对应emit的方法（deleteTag）在我们的父组件的method中需要进行method方法的定义
父组件实例如下

```
deleteTag(index){
      this.tags.splice(index,1)
      console.log(index)
    }
```

调用示例如下
<commontag :tags="tags" @deletetag="deleteTag"></commontag>

子组件方法

```
 handleClose(tag, index) {
      console.log(tag);
    //   console.log(index);
      // eslint-disable-next-line
     
      this.$emit('deletetag',index)
    }
```



## 1.4.CommonAside

如果要实现伸缩功能，事件总线中监听isCollapse这个变量并且赋值就可以了 //asyncMenu
解决了submenu收缩时的文字显示的问题。在收缩的状态把这玩意隐藏就好了

路由的格式

```js
asyncMenu() {
      return [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "/pc_home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "/pc_table",
        },
        {
          path: "/FirstLevel",
          name: "FirstLevel",
          label: "用户管理",
          icon: "FirstLevel",
          url: "/pc_table",
        },
        {
          label: "其他",
          icon: "location",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ];
    }
```

## 1.5.CommonHeader

基本内容都已经写好了


## 1.6.管理界面示例

参照pages/pc_vue_client.vue里面的东西

路由中

```js
{
        path: '/pc5',
        name: 'card1_pc5',
        component: pc5,
        meta:{title:"pc后台练习",role:'admin',img:''},
        children: [
            {
              path: '/pc_home',
              component:pc_home,
              meta:{title:'后台首页',isShowHead:false,isShowFoot:false,isShowBack:true}
            },
            {
                path: '/pc_table',
                component:pc_table,
                meta:{title:'后台增删改查',isShowHead:false,isShowFoot:false,isShowBack:true}
              }
        ]
    },
```

## 1.7.echart

父组件基本调用方法

```vue
<el-card style="height: 200px;width:300px">
  <!-- 柱状图 -->
  <!-- <div style="height:200px" ref="FirstLevelEcharts"></div> -->
  <echart :chartData="echartData.FirstLevel" style="height: 200px" isAxisChart="true" />
</el-card>
```

 <img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/饼状图.png"/>

 ```js
饼状图传入数据示例
{
    "series": [
        {
            "data": [
               
                {
                    "name": "魅族",
                    "value": 2200
                },
                {
                    "name": "三星",
                    "value": 4500
                }
            ],
            "type": "pie"
        }
    ]
}
 ```

<img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/柱状图.png"/>

```js
柱状图数据

{
    "xData": [
        "周一",
        "周二",
       
    ],
    "series": [
        {
            "name": "新增用户",
            "data": [
                5,
                10,
                
            ],
            "type": "bar"
        },
        {
            "name": "活跃用户",
            "data": [
                200,
                500,
                
            ],
            "type": "bar"
        }
    ]
}
```

<img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/折线图.png"/>

```js
折线图数据：

{
    "xData": [
        "20191001",
        "20191002",
        "20191003",
       
    ],
    "series": [
        {
            "name": "苹果",
            "data": [
                5920,
                4738,
                659,
                
            ],
            "type": "line"
        },
        {
            "name": "vivo",
            "data": [
                6564,
                7380,
                3745,
                
            ],
            "type": "line"
        },
        
       
    ]
}
```

## 1.8.表格权限示例



<img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/数据图.png">







### 8.1 首先是我封装了复选框组件



位置在于 '@/components/checkBox.vue'

调用实例

```vue
<template>
    <div class="">
        <p-el-checkbox
            v-model="result"
            resultType="Array"
            label="name"
            prop="id"
            :defaultCheck="defaultCheck"
            :checkboxList="checkboxList"
        />
    </div>
</template>

<script>
import Pelcheckbox from "https://cdn.jsdelivr.net/npm/frontelementpackage/p-el-checkbox.vue";
export default {
    components: {
        "p-el-checkbox": Pelcheckbox,
    },
    props: [],
    data() {
        return {
            defaultCheck: ["1", "3"],
            checkboxList: [
                { name: "小红", id: "1" },
                { name: "小明", id: "2" },
                { name: "小芳", id: "3" },
            ],
            result: {},
        };
    },
    mounted() {},
    watch: {
        result: function () {
            console.log("变化了：", this.result);
        },
    },
    methods: {},
};
</script>

<style lang='scss' scoped>
</style>

```

### 8.2 然后就可以直接用

```js
CommonTokenEdit.vue

tableData: [
{
    id: "1",
    tokenName: "数据库",
    describe: "与我相关",
    tokenInfo: ["1", "2"],
    },
    {
    id: "2",
    tokenName: "车库管理",

    describe: "与我相关",
    tokenInfo: ["1", "2", "3"],
    },
],
```





## 1.9.TableButtonFixed

<img src="https://cdn.jsdelivr.net/npm/frontelementpackage/pirture/tablefix.png"/>

```js
import CommonTable from "frontelementpackage/src/CommonTableButtonFixed.vue";

--1.表头：tableLabel: [
    {
        prop: "id",
        label: "id",
        minWidth:"20%"
        // position:"right"
    },
    {
        prop: "name",
        label: "名字",
        minWidth:"20%"
    },
    {
        prop: "phone",
        label: "电话",
        minWidth:"20%"
    },
    {
        prop: "number",
        label: "商铺号",
        minWidth:"20%"
    },
],
--2.button名称：tableButton: {
        width: 300,
            data: [
                {
                    name: "编辑",
                    type: "primary",
                    size: "small",
                },
                {
                    name: "编辑附件",
                    type: "info",
                    size: "small",
                },
                {
                    name: "删除",
                    type: "danger",
                    size: "small",
                },
            ],
    },
--3.数据：tableData: [{ id: 1, name: "小红", phone: "19120636444", number: "sad" }],
    
--4.调用起来
import CommonTable from "frontelementpackage/src/CommonTableButtonFixed.vue";
    <common-table
    :tableData="tableData"
    :tableDropdown="tableDropdown"
    :tableLabel="tableLabel"
    @edit="editFirstLevel"
    ></common-table>
    
    <common-table
        :tableData="tableData"
        :tableButton="tableButton"
        :tableLabel="tableLabel"
        @edit="editFirstLevel"
       
      ></common-table>
    
    
    
    
    
```

## 1.10.TableDropdown

```js
--1.表头 
tableLabel: [
    {
        prop: "name",
        label: "账户名字",
        width: 300,
    },
    {
        prop: "status",
        label: "状态",
        width: 200,
    },
],
--2.按钮：
tableDropdown: [
    { id: 1, name: "测试1" },
    { id: 2, name: "测试2" },
    { id: 3, name: "测试3" },
],
--3.数据：   
tableData: [
    {
        name: "测试",
        status: 1,
    },

],
    
    
--4.调用起来
import CommonTable from "frontelementpackage/src/CommonTableDropdown.vue";
 <common-table
 :tableData="tableData"
 :tableDropdown="tableDropdown"
 :tableLabel="tableLabel"
	@edit="editFirstLevel"
></common-table>
```









## 1.11 项目封装示例(TableButtonFixed)

```vue
<template>
  <div style="">
    <div class="commonInputTopBox">
      <pageHeader :pagename="'产品库'" />
    </div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="搜索车库">
        <el-input placeholder="车库名，车库id，或地址" v-model="query.keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="commonControl-body">
      <el-button type="primary" @click="addFormButton()">新增产品类型</el-button>
      <common-table
        :tableData="tableData"
        :tableButton="tableButton"
        :tableLabel="tableLabel"
        @edit="editFirstLevel"
      ></common-table>
      <div class="layoutBorder">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 点击事件触发 -->
    <el-dialog title="编辑产品" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="formEdit">
        <el-form-item label="产品id" label-width="120px">
          <el-input v-model="formEdit.id" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="产品系列" label-width="120px">
          <el-input v-model="formEdit.product_series" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品分类" label-width="120px">
          <el-select v-model="optionValue" placeholder="请选择">
            <el-option
              v-for="item in value"
              :key="item.id"
              :label="item.product_type_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名" label-width="120px">
          <el-input v-model="formEdit.product_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateFirstLevel()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增产品类型" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="formAdd">
        <el-form-item label="产品类型名字" label-width="120px">
          <el-input v-model="formAdd.product_type_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="createFirstLevel()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   product_get,
//   product_classify_create,
//   product_set,
//   product_edit,
//   product_classify_get
// } from "@/api/product.js";
import CommonTable from "frontelementpackage/src/CommonTableButtonFixed.vue";

export default {
  name: "start",
  data() {
    return {
      query: {
        querypage: 1, //获取页码
        pagesize: 10, //每页返回数量
        keyword: "", //搜索 可搜邮箱 用户名 手机号
      },
      //分页数据
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      tableData: [],
      dialogFormVisibleEdit: false,
      formEdit: { group_info: "" },
      dialogFormVisibleAdd: false,
      formAdd: {},
      tableLabel: [
        {
          prop: "id",
          label: "权限组名",
          minWidth:"20%"
          // position:"right"
        },
        {
          prop: "product_name",
          label: "说明",
          minWidth:"20%"
        },
        {
          prop: "product_type",
          label: "创造时间",
          minWidth:"20%"
        },
        
      ],
      tableButton: {
        width: 300,
        data: [
          {
            name: "编辑",
            type: "primary",
            size: "small",
          },
          {
            name: "编辑附件",
            type: "info",
            size: "small",
          },
          {
            name: "删除",
            type: "danger",
            size: "small",
          },
        ],
      },
      value: null,
      optionValue: null,
    };
  },
  components: {
    CommonTable,
  },
  created() {
    this.getFirstLevel();
    this.initOption();
  },
  methods: {
    initOption() {
      // product_classify_get({}).then((res) => {
      //   if (res.code == 200) {
      //     this.value = res.data;
      //   } else {
      //     this.$message.info(res.msg);
      //   }
      // });
    },
    editFirstLevel(row, methods) {
      if (methods == "编辑") {
        this.editUser(row);
      }
      if (methods == "编辑附件") {
        this.gotoUser(row);
      }
      if (methods == "删除") {
        this.delUser(row);
      }
    },
    gotoUser(row) {
      // this.formEdit = {
      //   group_id: row.id,
      //   group_name: row.group_name,
      //   group_info: row.group_info,
      // };
      // console.log(this.form,"ddd")
      // this.dialogFormVisibleEdit = true;
      row;
      // this.$router.push({ name: "productLibraryInfo", query:   row  });
    },
    editUser(row) {
      this.formEdit = row;
      // console.log(this.form,"ddd")
      this.dialogFormVisibleEdit = true;
      // row;
      // this.$router.push({ name: "productLibraryInfo", query: { id: row.id } });
    },
    delUser(row) {
      let ids = row.id;
      console.log({ group_id: ids });
      // this.$confirm("是否确定删除", "确认信息", {
      //   distinguishCancelAndClose: true,
      //   confirmButtonText: "删除",
      //   cancelButtonText: "放弃删除",
      // })
      //   .then(() => {
      //     product_set({
      //       product_id: ids, //产品ID
      //       is_delete: true,
      //     }).then((res) => {
      //       if (res.code == 200) {
      //         this.$message.success("成功删除");
      //         window.location.reload();
      //       } else {
      //         this.$message.info(res.msg);
      //       }
      //     });
      //   })
      //   .catch((action) => {
      //     this.$message({
      //       type: "info",
      //       message: action === "cancel" ? "放弃删除" : "停留在当前",
      //     });
      //   });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query = {
        querypage: this.currentPage,
        pagesize: this.pagesize,
        keyword: "",
      };
      //  console.log("当前页面显示xxx条", this.currentPage,"当前界面是xxx页",this.currentPage);
      // user_group_manage_index(this.query).then((res) => {
      //   console.log(this.tableData, "new");
      //   this.tableData = res.data.result;
      // });
    },
    handleSizeChange(val) {
      this.pagesize = val; //获取page-sizes里的每页显示几条数据的值，赋给我们自定义的每页显示数量的变量pageNum
      // console.log("当前页面显示xxx条", val,"当前界面是xxx页",this.currentPage);
      this.query = {
        querypage: this.currentPage,
        pagesize: this.pagesize,
        keyword: "",
      };
      console.log(this.query);
      // user_group_manage_index(this.query).then((res) => {
      //   console.log(this.tableData, "new");
      //   this.tableData = res.data.result;
      // });
    },

    createFirstLevel() {
      // product_classify_create(this.formAdd).then((res) => {
      //   if (res.code == 200) {
      //     this.$message.success("成功添加");
      //     window.location.reload();
      //   } else {
      //     this.$message.info(res.msg);
      //   }
      // });
      this.dialogFormVisibleAdd = false;
    },
    addFormButton() {
      this.dialogFormVisibleAdd = true;
    },
    updateFirstLevel() {
      // this.formEdit["product_id"] = this.formEdit["id"];
      // Reflect.deleteProperty(this.formEdit,"id")
      // this.formEdit["product_type"]=this.optionValue
      // console.log(this.formEdit);
      // product_edit(this.formEdit).then((res) => {
      //   if (res.code == 200) {
      //     this.$message.success("成功修改");
      //     this.getFirstLevel()
      //   } else {
      //     this.$message.info(res.msg);
      //   }
      // });
      this.dialogFormVisibleEdit = false;
    },
    getFirstLevel() {
      // product_get(this.query).then((res) => {
      //   console.log(this.tableData, "new");
      //   this.tableData = res.data.result;
      // });

    
      this.tableData = [{id:2,product_name:"测试",product_type:2,product_series:4}]
    },
  },
};
</script>

<style lang="scss" scoped></style>

```



## 更新日志
### ver 1.2.9  完善文档
### ver 1.2.6  CommonTableButtonFixed 增加min-width+大屏自适应 + 大列表会进行分块渲染

###  ver 1.2.0  CommonTableButtonFixed 增加table组件百分比


### ver 1.1.5  CommonTableButtonFixed 增加设备分类的处理   
### ver 1.1.5  增加CommonTableButtonFixed, 右侧按钮固定
### ver 1.1.5  CommonTableButtonAn  增加对positition的处理
### ver 1.1.4  CommonTableDropdown 增加对object的处理的  ”关联“  字段
### ver 1.1.3  CommonTableDropdown 增加对数组的处理

### ver 1.1.2 CommonTableButton获取器的添加,CommonTableDropdown组件的添加

### ver 1.1.0  CommonTableButton完全做好了



父组件
```
import CommonTable from "frontelementpackage/src/CommonTableButton.vue";
html 中
<common-table
        :tableData="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :tableLabel="tableLabel"
        :tableButton="tableButton"
        @edit="editFirstLevel"
        @del="delFirstLevel"
      ></common-table>
data中

tableButton: [
        {
          name: "11",
          type: "danger",
          size: "small",
        },
        {
          name: "15",
          type: "danger",
          size: "small",
        },
        {
          name: "11",
          type: "danger",
          size: "small",
        },
      ],


tableLabel: [
        {
          prop: "name",
          label: "账户名字",
          width: 200,
        },
        {
          prop: "email",
          label: "邮箱",
          width: 200,
        },
        {
          prop: "phone",
          label: "手机号",
          width: 200,
        },
        {
          prop: "garage_account_relevance_count",
          label: "子账户账号",
          reflect:0,
          width: 200,
        },
        {
          prop: "status",
          label: "状态",
          width: 200,
        },
      ],

tableData: [],

method中

editFirstLevel(row,methods) {
      console.log(row,methods)
    },
```









### ver 1.0.15 CommonTableButton 修复bug
### ver 1.0.14 CommonTableButton 修复一些bug
```
接着修复bug，父组件返回第一个值接受行数据，第二个值接受内容
```

### ver 1.0.13 CommonTableButton 修复一些bug
### ver 1.0.12 CommonTableButton 组件更新获取器方法
```
 tableLabel: [
        {
          prop: "name",
          label: "账户名字",
          width: 200,
        },]
```

### ver 1.0.11 CommonTableButton 组件更新

```
tabledata示例
this.tableButton=[{
    name:"",
    type:"primary",
    size:"small",

}]

this.tabledata=[
    {
        "id": "46BeC977-dC5b-bB93-2510-9d4AE8CBFc3e",
        "name": "龚静",
        "addr": "宁夏回族自治区 吴忠市 青铜峡市",
        "age": 41,
        "birth": "2010-03-22",
        "sex": 0,
        "sexLabel": "女"
    }
]

this.tableLabel=
[
    {
        "prop": "name",
        "label": "姓名"
    },
    {
        "prop": "age",
        "label": "年龄"
    },
    {
        "prop": "sexLabel",
        "label": "性别"
    },
    {
        "prop": "birth",
        "label": "出生日期",
        "width": 200
    },
    {
        "prop": "addr",
        "label": "地址",
        "width": 320
    }
]



父组件调用示例如下
 <common-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList()"
      @edit="editFirstLevel"
      @del="delFirstLevel"
    ></common-table>
```


### ver 1.0.10 table高度bug优化
### ver 1.0.9 table高度bug优化
### ver 1.0.8 代码细节优化
### ver 1.0.7 对commontable组件进行解耦





### elementui 引入

安装 npm install  element-ui@2.15.6   

项目引用示例：
frontelementpackage
引入import CommonTable from 'frontelementpackage/src/CommonTable.vue'


npm install 常见错误
1.less提示没有getoptions
解决方法：
npm install less-loader@6 --save-dev


<strong>main.js中</strong>

```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
<br><br>



<strong>这些组件都是直接复制到你的component文件夹下就好了</strong>