❤
npm
Sign UpSign In

frontelementpackage

1.2.12 • Public • Published


🍰
frontelementpackage



npm packagetemp demos demos

Translations: 🇨🇳 汉语

1.使用说明

1.1.CommonForm

formlabel示例数据如下：

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

引入示例：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

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">

子组件方法

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

1.4.CommonAside

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

路由的格式

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里面的东西

路由中

{
        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

父组件基本调用方法

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

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

柱状图数据

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

折线图数据：

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

1.8.表格权限示例

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

位置在于 '@/components/checkBox.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 然后就可以直接用

CommonTokenEdit.vue

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

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

1.9.TableButtonFixed

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

--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)

<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

main.js中

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



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

Readme

Keywords

Package Sidebar

Install

npm i frontelementpackage

Repository

gitee.com/Electrolux/front-element-package

Homepage

gitee.com/Electrolux/front-element-package

Weekly Downloads

9

Version

1.2.12

License

none

Unpacked Size

323 kB

Total Files

32

Last publish

Collaborators

  • electrolux_
Try on RunKit
Report malware