封装后台管理中的查询模块

最新推荐文章于 2024-11-11 19:29:13 发布

江湖卐悠悠

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量109

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_49548375/article/details/129405720

版权

封装查询模块 (vue) react同理

<template>
  <div class="queryFormClass">
    <el-card shadow="hover" v-if="formRolue && form">
      <div class="h1Header">
        查询条件
      </div>
      <el-row class="row-bg" :gutter="10">
        <div v-for="item in formRolue" :key="item.name">
          <el-col :span="6" v-if="item.type === 'input'">
            <el-button type="text" disabled>
              {{ item.label }}
            </el-button>
            <el-input size="small" class="queryForm" placeholder="请输入内容" v-model="form[item.name]" clearable />
          </el-col>

          <el-col :span="6" v-if="item.type === 'select'">
            <el-button type="text" disabled>
              {{ item.label }}
            </el-button>
            <el-select
              size="small"
              :multiple="item.mode ? true : false"
              class="queryForm"
              v-model="form[item.name]"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="select in item.options"
                :key="select.value"
                :label="select.label"
                :value="select.value"
              />
            </el-select>
          </el-col>

          <el-col :span="6" v-if="item.type === 'rangePicker'">
            <el-button type="text" disabled>
              {{ item.label }}
            </el-button>
            <el-date-picker
              class="queryForm"
              size="small"
              v-model="form[item.name]"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-col>
        </div>

        <el-col :span="6">
          <el-button size="small" type="primary" @click="queryFunc">
            查询
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "QueryForm",

  props: {
    form: {
      type: Object,
      default: () => {},
      require: true
    },
    formRolue: {
      type: Array,
      default: () => [],
      require: true
    }
  },
  data() {
    return {};
  },

  methods: {
    queryFunc() {
      this.$emit("onFormQuery", this.form);
    }
  }
};
</script>
<style scoped lang="scss">
.queryFormClass {
  .el-card {
    margin-bottom: 20px;
  }
  .h1Header {
    font-size: 20px;
    font-weight: 700;
  }
  .row-bg {
    padding: 10px 0;
    .queryForm {
      width: 72%;
    }
    .el-col {
      border-radius: 2px;
      padding-bottom: 10px;
    }
    button {
      width: 70px;
    }
  }
}
</style>

用法案例

1.引入注册使用不要我逼逼耐耐了吧
2.onFormQuery子传父也不用我多说了吧
3.数据统一放入js 中养成模块化管理

  <QueryForm
      :form-rolue="formRolue"
      :form="form"
      @onFormQuery="onFormQuery"
    />

import { formRolue, form } from "./data.js";
//  js
import cookie from "cookie";
export const form = {
  factory_name: "", // 边工厂名
  admin: cookie.parse(document.cookie)["x-staff-name"], // 负责人
  status: 0, // 状态
  time: "", // 更新时间
  input_struct: "", // 输入结构体
  output_struct: "", // 输出结构体
};

export const formRolue = [
  {
    type: "input",
    name: "factory_name",
    label: "边工厂名",
  },
  {
    type: "input",
    name: "admin",
    label: "负责人",
  },
  {
    type: "select",
    name: "status",
    label: "状态",
    options: [
      {
        value: -1,
        label: "失效",
      },
      {
        value: 0,
        label: "有效",
      },
      {
        value: 1,
        label: "创建成功",
      },
    ],
  },
  {
    type: "input",
    name: "input_struct",
    label: "输入结构体",
  },
  {
    type: "input",
    name: "output_struct",
    label: "输出结构体",
  },
  {
    type: "rangePicker",
    name: "time",
    label: "更新时间",
  },
];