SearchForm & Table

请求

    getProductCodeList() {
        this.getBaseList
        ('erp/service?src=fbxOnline&action=getFbxProductList',
        '产品代码','productCodeList')
    },
    getBaseList(url,name,listName){
        this.axios
        .get(`${url}`)
        .then((res) => {
         console.log(`------------获取 ${name}-------------`);
          console.log(res.data.data);
          if (res.data.isSuccess) {
            this[listName] =
              (res.data.data && res.data.data.length && res.data.data) ||
              this.$message.info(`${name} 没有相关数据`);
          } else {
            this.$message.info(res.data.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },

//新 兼容get post
     getList(isQuery) {
      if (isQuery) {
        this.requestParams.curPage = 1;
      }
      this.getBaseList(
        {
          methods: "post",
          params: {
            chargeType: this.requestParams.chargeType,
            pageNum: this.requestParams.curPage,
            pageSize: this.requestParams.pageSize,
            sectionName: this.requestParams.sectionName,
          },
        },
        "/carrier/chargeSection/getCarrierChargeSectionList",
        "获取线路商计费模板列表",
        "list"
      );
    },
    getBaseList(methods, url, name, listName) {
      this.axios[methods.methods](
        `${url}`,
        methods.params ? methods.params : ""
      )
        .then((res) => {
          console.log(`------------获取 ${name}-------------`);
          console.log(res.data.data);
          if (res.data.code == 200) {
            this[listName] =
              (res.data.data &&
                res.data.data.list.length &&
                res.data.data.list) ||
              this.$message.info(`${name} 没有相关数据`);
            this.requestParams.total = res.data.data.total;
          } else {
            this.$message.info(res.data.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },

vue

SearchForm

组件源码

<template>
  <div>
    <div :style="searchFromParams.outSideStyle">
      <div
        v-for="(item, index) in searchFromParams.mainSearchList"
        :key="index"
      >
        <div
          v-if="item.type === 'cascader'"
          :style="{
              margin:item.margin ? item.margin : '',
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.spanName
          }}</span>
          <el-cascader
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
             clearable
            :placeholder="
              item.placeholder ? item.placeholder : `请选择${item.Name}`"
             v-model="requestParams[item.modelObj.value]"
            :size="item.size ? item.size : ''"
            :options="item.options()"
            :props="item.props"
            @change="item.event.change($event, item.needAutoQuery)"
          >
          <!-- cascader没有clear事件 -->
          </el-cascader>
        </div>
        <div
          v-if="item.type === 'select'"
          :style="{
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.spanName
          }}</span>
          <el-select
              :filterable="searchFromParams.call(item.event.filter)
                ? true
                : false"
            :filter-method="searchFromParams.call(item.event.filter)
                ? item.event.filter
                : null"
                 @focus="searchFromParams.call(item.event.focus)
                ? item.event.focus()
                : null"
            :style="{ margin: item.margin, width: item.inputWidth }"
            size="mini"
            
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            clearable
            v-model="requestParams[item.modelObj.value]"
            @change="item.event.changeProduct($event, item.needAutoQuery)"
          >
            <el-option
              v-for="option in item.list()"
              :key="option[item.selectValue ? item.selectValue : 'value']"
              :label="option[item.selectLabel ? item.selectLabel : 'label']"
              :value="option[item.selectValue ? item.selectValue : 'value']"
            ></el-option>
          </el-select>
        </div>
        <div v-if="item.type === 'input'">
          <el-input
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            :style="{
              width: item.inputWidth,
              margin: item.margin ? item.margin : '',
            }"
           
            clearable
            v-model="requestParams[item.modelObj.value]"
            :size="item.size ? item.size : ''"
            :placeholder="
              item.placeholder ? item.placeholder : `请输入${item.Name}`
            "
          >
            <template slot="prepend">{{ item.Name }}</template></el-input
          >
        </div>
        <div
          v-if="item.type === 'date-picke'"
          :style="{
            width: item.divWidth ? item.divWidth : '250px',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'space-between',
          }"
        >
          <span :style="{ width: item.spanWidth ? item.spanWidth : '80px' }">{{
            item.name
          }}</span>
          <el-date-picker
            :style="{
              margin: item.margin ? item.margin : '',
              width: item.inputWidth,
            }"
            @clear="
              searchFromParams.call(item.event.clear)
                ? item.event.clear($event)
                : null
            "
            clearable
            @change="
              searchFromParams.call(item.event.change)
                ? item.event.change($event)
                : null
            "
            :size="item.size ? item.size : ''"
            v-model="requestParams[item.modelObj.value]"
            align="right"
            type="date"
            :placeholder="
              item.placeholder ? item.placeholder : `请输入${item.name}`
            "
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
      </div>
      
      <slot name="btnLeft"></slot>
    </div>
    <div style="margin-top: 20px">
      <slot name="btn"></slot>

    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    searchFromParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    requestParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

使用

      <ErpSearchForm
          @getList="getList"
          @openAddDialog="openAddDialog"
          :requestParams="requestParams"
          :searchFromParams="searchFromParams"
        ></ErpSearchForm>
        
        import JiuyuSearchForm from "./jack-components/jiuyu-search-form";

参数

      requestParams: {
         state: null, 
        // base
        pageSize: 20,
        curPage: 1,
        pageSize: 10,
        total: 0,
      },
      searchFromParams: {
        call: (param) => {
          return Object.prototype.toString.call(param) === "[object Function]";
        },
        outSideStyle: {
           // 整个查询整体宽度
          width: "60%",
          display: "flex",
          // 是否换行
          "flex-wrap": "wrap",
          "align-items": "center",
          "pdding-bottom": "20px",
        },
        mainSearchList: [
  
          {
            type: "date-picke",
            size: "mini",
            divWidth: "",
            spanWidth: "110px",
            needAutoQuery: false,
            name: "有效时间",
            modelObj: {
              objName: "requestParams",
              value: "effectivestarttime",
            },
            placeholder: "",

            event: {
              change: (i, autoQuery) => {
                this.requestParams.effectivestarttime = i;
                // autoQuery true的话就change后马上请求
                autoQuery && this.getList();
              },
              clear: () => {
                console.log(123);
                this.getList();
              },
            },
            margin: "0px 10px",
          },
        ],
      },

组件

cascader

          {
            type: "cascader",
            size: "mini",
            spanName: "省市区",
            spanWidth: "60px",
            placeholder: "提货区域",
            divWidth: "",
            needAutoQuery: false,
            props: {
              label: "namec",
              value: "id",
              children: "children",
            },
            modelObj: {
              objName: "requestParams",
              value: "pickUpAddrListIds",
            },
            options: () => {
              return this.pickUpAddrList;
            },
            event: {
              change: (e, autoQuery) => {
              
              },
              clear: (i) => {
                //  cascader没有clear事件
              },
            },
            margin: "10px 20px 10px 0px ",
          },

select

   {
            type: "select",
            divWidth: "",
            needAutoQuery: false,
            selectLabel: "code",
            selectValue: "code",
            spanName: "产品代码",
            spanWidth: "80px",
            modelObj: {
              objName: "requestParams",
              value: "code",
            },
            list: () => {
              return this.productCodeList;
            },
            event: {
              focus: (val) => {
                
              },
              filter: (val) => {
                
              },
              changeProduct: (i, autoQuery) => {},
              clear: (i) => {
                this.getList(1);
              },
            },
            margin: "10px 10px",
          },

input

     {
            type: "input",
            size: "mini",
            inputWidth: "250px",
            needAutoQuery: false,
            Name: "产品名称",
            placeholder: "",
            modelObj: {
              objName: "requestParams",
              value: "name",
            },
            event: {
              clear: (i) => {
                this.getList(1);
              },
            },
            margin: "0 10px 0 0",
          },

date-picke

          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            pickerSetTime: true,
            spanWidth: "90px",
            needAutoQuery: false,
            require: true,
            clearable: true,
            name: "有效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveStartTime",
            },
            placeholder: "",

            event: {
              change: (i, autoQuery) => {},
              clear: () => {
                // console.log(123);
                this.getList();
              },
            },
            margin: "0px 10px",
          },

          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            spanWidth: "100px",
            needAutoQuery: false,
            pickerSetTime: true,
            require: true,
            clearable: true,
            name: "失效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveEndTime",
            },
            placeholder: "",
            event: {
              change: (i, autoQuery) => {
                if (!this.addObject.effectiveStartTime) {
                  this.$message.info("请先选择有效时间");
                  this.addObject.effectiveEndTime = "";
                }
                if (this.addObject.effectiveStartTime < i) {
                } else {
                  this.addObject.effectiveEndTime = "";
                  this.$message.info("失效必须大于有效时间");
                }
              },
              clear: () => {
                this.getList();
              },
            },
            margin: "0px 10px",
          },

Table

组件源码

<!--  -->
<template>
  <div class="">
    <div :style="{'min-width': tabelParams.tabelStyle.minWidth?tabelParams.tabelStyle.minWidth:'',
    'margin':tabelParams.tabelStyle.margin?tabelParams.tabelStyle.margin:''}">
      <el-table
        align="center"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        size="mini"
        highlight-current-row
        :data="tabelParams.datas.tableData()"
        style="width: 100%"
        border
        @row-click="rowClick"
      >
        <el-table-column
          v-for="(item, index) in tabelParams.datas.innerData()"
          :key="index"
          :width="item.width ? item.width : ''"
          :type="item.type ? item.type : ''"
          min-width="130"
          align="center"
          prop="code"
          :label="item.name ? item.name : ''"
        >
          <template slot-scope="scope">
            <!-- 只为序列才显示 -->
            <span v-if="item.type == 'index'" style="margin-left: 10px">{{
              scope.$index + 1
            }}</span>
            <!-- 内容 -->
            <!-- 状态 字段处理 判断是否state，是就渲染 不执行下面代码 -->
            <div
              v-else-if="item.value == 'state' || item.value == 'status'"
              style="margin-left: 10px"
            >
              <span v-if="scope.row[item.value] == 1">草稿</span>
              <span v-if="scope.row[item.value] == 2">发布</span>
              <span v-if="scope.row[item.value] == 3">作废</span>
            </div>
            <!-- 默认展示 -->
            <span v-else style="margin-left: 10px">{{
              (scope.row[item.value] == null ? '-': false) ||
              (scope.row[item.value] ? scope.row[item.value] : "-")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="!tabelParams.hideOperate"
          :width="tabelParams.operateWidth ? tabelParams.operateWidth:'120px'"
          fixed="right"
          align="center"
          label="操作"
        >
        
          <template slot-scope="scope">
                <slot :row="scope.row"></slot>
          </template>
          
        </el-table-column>
      </el-table>
    </div>
    <div class="block" v-if="!requestParams.hidePage">
      <!-- 分页 -->
      <el-pagination
        style="text-align: right"
        @size-change="tabelParams.event.sizeChange"
        @current-change="tabelParams.event.currentChange"
        :current-page="requestParams.curPage"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="requestParams.total"
      ></el-pagination>
    </div>
  
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    innerData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    requestParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabelParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  //  @row-click="tabelParams.call(tabelParams.tableEvent.rowClick)
  //             ? tabelParams.tableEvent.rowClick
  //             : null"

  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    rowClick(item) {
      if (
        Object.prototype.toString.call(this.tabelParams.tableEvent.rowClick) ===
        "[object Function]"
      ) {
        this.tabelParams.tableEvent.rowClick(item);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

使用

      <!-- 表格 -->
      <JiuyuTable :tabelParams="tabelParams" :requestParams="requestParams">
        <!-- 状态 -->
        <template v-slot="row">
          <el-button size="mini" @click="detail(row)">查看</el-button>
          <el-button size="mini" @click="detail(row)">修改</el-button>
          <el-button size="mini" @click="detail(row)">提交</el-button>
        </template>
      </JiuyuTable>

import JiuyuTable from "./jack-components/jiuyu-table";

参数

      requestParams: {
         state: null, 
        // base
        pageSize: 20,
        curPage: 1,
        pageSize: 10,
        total: 0,
      },
 tabelParams: {
        tabelStyle: {
          margin: "10px 0",
          "min-width": "980px",
        },
        hideOperate: false,
        operateWidth:'220px',
        size: "mini",
        datas: {
          tableData: () => {
            return this.list;
          },
          // 表头数据
          innerData: () => {
            return [
              // 需要序号就添加 type
              { name: "序号", value: "", type: "index", width: "60" },
              { name: "产品代码", value: "code" },
              { name: "状态", value: "state" }, //需要特殊处理
              //  <template slot-scope="scope">
              //     <span v-if="scope.row.state == 1">草稿</span>
              //     <span v-if="scope.row.state == 2">发布</span>
              //     <span v-if="scope.row.state == 3">作废</span>
              //   </template>
            ];
          },
        },
        event: {
          sizeChange: (val) => {
            // console.log(this);
            this.requestParams.pageSize = val;
            this.getList();
          },
          currentChange: (val) => {
            this.requestParams.curPage = val;
            this.getList();
          },
        },
        tableEvent: {
          
        },
      },