vue-fanscc-table v0.1.4

vue_component

后台管理系统里面table表格跟查询条件的公共组件

github地址 链接

项目链接 链接

组件使用

npm install vue-fanscc-table -S-d

main.js

import vueFansckyTable from "vue-fanscc-table";
import "vue-fanscc-table/lib/vue-fanscc-table.css";
Vue.use(vueFansckyTable);
// 组件内使用
<template>
  <div class="remittanceInformation">
    <searchDom
      :search-from="searchFrom"
      v-model="valueClone"
      style="margin-top:20px;"
    >
      <el-button type="primary" @click="search()">查询</el-button>
    </searchDom>
    <div></div>
    <tableDom
      :realTableColumns="realTableColumns"
      ref="tableCommon"
      path="/account"
      @childmethods_out="childmethods_out"
    ></tableDom>
  </div>
</template>

<script>
import { layout } from "./ckytext.js";

export default {
  name: "userManagement",
  data() {
    return {
      valueClone: {},
      searchFrom: layout.searchFrom,
      realTableColumns: layout.realTableColumns
    };
  },
  methods: {
    childmethods_out() {},
    search() {
      this.$refs.tableCommon.pageIndex = 1;
      this.$refs.tableCommon.init(this.valueClone);
    }
  }
};
</script>

searchDom搜索公共组件

用于配置table上的查询条件的公用组件

使用方法

 <searchDom
      v-model="valueClone"
      :search-from="searchFrom"
      staticParams={id: 1}
      methodRequest="get"
      labelWidth="110px"
      path="/select"
      style="margin-top:20px;"
    >
    // 自定义查询框,没自定义的时候template内容可以去掉
      <template slot="selfdingyi" slot-scope="scope">
        <el-form-item
          :label="scope.data.title + '：'"
          :label-width="scope.data.labelWidth"
        >
          <el-input
            style="width: 200px"
            v-model="valueClone[scope.data.name]"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </template>
      <el-button type="primary" icon="el-icon-search" @click="search">
        搜索
      </el-button>
    </searchDom>

searchDom Attributes

searchFrom Attributes

配置的一段json来实现不同的json渲染出不同的组件例子如下：

 // 搜索的样式
  searchFrom: [
    {
      inputModel: "fsInput", 
      title: "用户名",        
      name: "username", 
      placeholder: "精准查询"  
    },
    {
      inputModel: "fsSelect",
      title: "退换货类型",
      placeholder: "请选择",
      name: "orderType",
      value: "0",
      staticArr: [
        { label: "退货", value: "0" },
        { label: "换货", value: "1" }
      ],
      defaultArr: true
    },
    {
      inputModel: "fsSelect",
      title: "退货",
      placeholder: "请选择",
      name: "orderStatusList1",
      mapName: "退货",
      paramsMaping: {
        label: "desc",
        value: "type"
      }
    },
    {
      inputModel: "fsSelect",
      title: "退换货状态",
      placeholder: "请选择",
      multiple: true,
      name: "orderStatusList",
      value: [],
      mapName: "退换货状态",
      paramsMaping: {
        label: "desc",
        value: "type"
      }
    },
     {
      inputModel: "fsSelect",
      title: "省",
      placeholder: "请选择",
      multiple: true,
      name: "provide",
      mapName: "省",
      sublevel: "city",
      paramsMaping: {
        label: "desc",
        value: "type"
      }
    },
    {
      inputModel: "fsSelect",
      title: "市",
      placeholder: "请选择",
      name: "city",
      mapName: "市",
      parent: "provide",
      path: "/getCity",
      paramsMaping: {
        label: "desc",
        value: "type"
      }
    },
    {
      title: "自定义的查询",
      name: 'selfValue',
      type: "slot",
      slotName: "selfdingyi",
    },
    {
      inputModel: "fsTime",
      title: "开始时间",
      name: "stratTimeValue"
    },
    {
      inputModel: "fsDoubleTime",
      title: "申请退换时间",
      name: "retrunTimeValue",
      value: ["", ""],
      labelWidth: "120px"
    },
    {
      inputModel: "fsmultiTime",
      title: "认领时间",
      name: "claimTime",
      placeholder: "请选择",
      lastFirstToToday: true
    }
  ],

通用参数

input输入框自身参数配置

无

select下拉框自身参数配置

fsTime时间自身参数配置

fsDoubleTime区间时间参数配置

fsmultiTime组合时间区间参数配置

自定义查询参数配置

注意：

• 此组件依赖element-ui,跟axios
• 下拉框判断请求成功与否需要后台返回success字段true成功false失败，返回的下拉框数组参数需要在model里面 获取下拉框的请求如下：

.then(res => {
  if (res.success) {
    if (this.mapData) {
      this.dealData(res.model[this.mapData]);
    } else if (res.code === undefined) {
      this.dealData(res);
    } else {
      this.dealData(res.model);
    }
  }
});

dealData方法无需理会,我们需要的参数需要在res.model里面

查询组件searchDom展示

table表格分页公用组件

用于配置table显示与查询,分页公共组件

使用方法

  <!-- 表格 -->
  <tableDom
    ref="tableCommon"
    path="/mock_autoTreasure"
    :value-clone="valueClone"
    totalPath="/totalPath"
    :totalRowMap="{money: moneyTotal}"
    totalFormatterType ="thousandMark"
    :paginationShow="true"
    request_method="post"
    :table_control="true"
    :real-table-columns="realTableColumns"
    @childmethods_out="childmethods_out"
  />

tableDom Attributes

realTableColumns Js数组

 // 表格样式
  realTableColumns: [
    // 配置表格
    {
      title: "#",
      width: "55",
      ishidden: true,
      type: "selection"
    },
    {
      title: "序号",
      width: "55",
      ishidden: true,
      type: "index"
    },
    {
      name: "orgName",
      title: "用户编号",
      iconName: "el-icon-question",
      tooltipContent: "你好,这是详细的描述"
    },
    {
      name: "provinceName",
      type: "dialog",
      isShowClick: function(row) {
        if (row.status) return true;
      },
      title: "用户名"
    },
    {
      name: "contactMobile",
      title: "电话号",
      type: "tooltip",
      width: "80"
    },
    {
      name: "balance",
      type: "formatter",
      formatterType: function(row) {
        if (row.balance === "0") {
          return "启用";
        } else {
          return "停用";
        }
      },
      title: "状态"
    },
    {
      name: "money",
      title: "金额",
      type: "formatter"
    },
    {
      name: "orgId2BalanceUpdateTimeStrMap",
      title: "时间",
      type: "multColumns",
      slotName: [
        { label: "创建人", name: "created" },
        { label: "时间", name: "orgId2BalanceUpdateTimeStrMap" }
      ]
    },
    {
      name: "active",
      title: "操作",
      width: "180",
      fixed: "right",
      type: "button",
      buttons: [
        // 配置操作栏
        {
          name: "编辑",
          event: {
            type: "routerMethod",
            params: ["status", "orgName"],
            url: "/edit"
          }
        },
        {
          name: "删除",
          typeIcon: "danger",
          isShow: function(index, row) {
            if (row.status === 1) {
              return true;
            } else {
              return false;
            }
          },
          event: {
            type: "delete",
            params: ["status", "orgName"],
            request_method: "post",
            url: "/mock_autoTreasure"
          }
        }
      ]
    }
  ]

通用参数

type=button时配置操作栏buttons对象参数配置

Table Methods

参数	说明	类型	可选值	默认值
childmethods_out	接受表格里面除了delete删除跟routerMethod路由跳转外,所有按钮广播事件	String	Function(button, val) {} button对应的button操作栏里面的配置属性,val为当前点击的行的数据	-

注意：

• 此组件依赖element-ui,跟axios
• 列表请求成功与否需要后台返回success字段true成功false失败，返回的列表数组参数需要在model.list或者model.model里面 获取列表的请求如下：

.then(res => {
  if (res.success) {
    if (this.fliterData && typeof this.fliterData === "function") {
      this.realTableData = this.fliterData(res.model.list);
    } else {
      this.realTableData = res.model.list || res.model.model || [];
    }
    this.total = res.model.total;
    this.$nextTick(() => {
      this.$refs.tableDom.doLayout();
    });
  } 
})

表格展示

项目链接 链接