# 后台管理模板

**Repository Path**: axibade/backstage_management_mi

## Basic Information

- **Project Name**: 后台管理模板
- **Description**: 次项目是基于vue+element-ui 的一套后台管理系统集成方案模板，主要目的还是达到前端页面配置化。后期我还会一直更新此套模板...优化以及维护
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2019-03-18
- **Last Updated**: 2022-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin-template

这是一个机遇vueadmin 改造的后台管理系统  ui库用到了elementui
我基于其ui库进行了二次封装做到配置化
所有的组件放在components文件夹下



# 例子  比如你需要用到表格  你只需要将下面参数绑定在封装表格上 列的宽，样式，字体颜色，转换，事件等等都是配置化     
#  <testBaseTable :tableSetting="tableSetting" @handleCommon="handleCommon" @initDataParams="initDataParams" ref="basetable"></testBaseTable>
#   tableSetting: {
        //表格请求接口函数
        tabelApiFn: getSbList,
        //过滤表单 查询参数
        filetrOptions: [
          {
            ref:'nameInput',
           componentName: "nameInput", //组件名，
            paramsName: "name", //查询参数
            placeholder: "请输入名字"
          },
          {
            ref:'sexInput',
            componentName: "sexInput",
            paramsName: "sex",
            placeholder: "请输入性别"
          },
          {
            ref:"statusSelect",
            componentName: "statusSelect", //组件名，
            paramsName: "status", //查询参数
            placeholder: ""
          },
          {
            ref:"typeSelect",
            componentName: "typeSelect", //组件名，
            paramsName: "type", //查询参数
            placeholder: "请选择类型"
          },
          {
            ref:"startTime",
            componentName: "startTime",
            paramsName: "startTime"
          },
          {
            componentName: "endTime",
            paramsName: "endTime"
          }
        ],
        tabletype: "selection", //表格类型 多选
        options: [
          //表格头配置  prop  label  width  align  html  color icon sortable
          {
            prop: "lastActivityTime",
            label: "带宽度--带颜色-带点击事件",
            width: 250,
            color: "red",
            handleName: "handleDetailById" //表格有的某一项可能也有点击事件
          },
          {
            prop: "locationId",
            label: "带排序",
            color: "green",
            sortable: true,
            width: 200
          },
          {
            prop: "locationValue",
            label: "地址",
            // sortable: "custom",
            width: 200
          },
          {
            prop: "online",
            label: "带小图标",
            icon: "icon-shangpin",                 
            width: 200
          },
          {
            prop: "termCode",
            label: "设备编码"
          },
          {
            prop: "termId",
            label: "设备id"
          },
          {
            prop: "termName",
            label: "设备名字"
          },
          {
            prop: "online",
            width: 200,
            label: "状态是否在线--带类型转换",
            html: row => {
              return SatusFilter(row.online); //后台返回的数据有时候是数字需要转换为中文
            }
          }
        ],
        //表格按钮配置 text size handleName:事件名  type icon show
        btns: [
          {
            text: "详情",
            size: "small",
            handleName: "handleOne",
            show: row => {
              return row.online == 2;
            }
          },
          {
            text: "删除",
            size: "small",
            type: "danger",
            handleName: "handleTwo"
          }
        ],
        btnsIcon: [
          // {
          //   text:'详情',
          //   icon:'icon-detail',
          //   handleName:'handleOne',
          //   show: row => {
          //     return row.online == 2;
          //   }
          // },
          // {
          //   text:'删除',
          //   icon:'icon-shanchu',
          //   handleName:'handleTwo',
          // }
        ]
      }

# 更新表单  如果你想用表单 你只需要引入组件 <commform :form="form" @handleSub="handleSub" />
# form: {
        isHandle: true,       //是否显示底部按钮
        labelWidth: "100px",  //表单lable宽度
        size: "small",       //表格尺寸
        bindModle: {          //需要提交的参数
          name: "",
          sex: null,
          desc: "",
          love: [],
          date: "",
          time: "",
          datetime: "",
          switch: true
        },
        formList: [            //表单项
          {
            type: "input",
            label: "姓名",
            prop: "name",
            width: "220px",
            size: "small",
            rules: [{ required: true, message: "请输入", trigger: "blur" }]   //验证
          },
          {
            type: "select",
            label: "性别",
            prop: "sex",
            width: "220px",
            size: "small",
            rules: [{ required: true, message: "请选择", trigger: "blur" }],
            change:(v)=>{            //事件  场景：有时候会根据一个选项查出后面的下拉的值 
              console.log(v)
              this.getDataBy(v)
            },
            options: [
              {
                label: "男",
                value: 0
              },
              {
                label: "女",
                value: 1
              }
            ]
          },
          {
            type: "radio",
            label: "性别2",
            prop: "sex",
            width: "",
            size: "small",
            radios: [
              {
                value: 1,
                label: "男"
              },
              {
                value: 0,
                label: "女"
              }
            ]
          },
          {
            type: "checkbox",
            label: "爱好",
            prop: "love",
            width: "",
            size: "small",
            checkboxs: [
              {
                value: 1,
                label: "游泳"
              },
              {
                value: 2,
                label: "唱歌"
              },
              {
                value: 3,
                label: "跑步"
              }
            ]
          },
          {
            type: "date",
            label: "日期",
            prop: "date",
            width: "",
            size: "small",
            valueFormat: "yyyy-MM-dd"
          },
          {
            type: "time",
            label: "时间",
            prop: "time",
            width: "",
            size: "small",
            valueFormat: "HH:mm:ss"
          },
          {
            type: "dateTime",
            label: "日期时间",
            prop: "datetime",
            width: "",
            size: "small",
            valueFormat: "yyyy-MM-dd HH:mm:ss"
          },
          {
            type: "switch",
            label: "开关",
            prop: "switch",
            width: ""
          }
        ]
      },