vue3公共组件queryForm和queryFormItem封装

• queryForm，这里主要包括两个部分，queryForm和FormItem组成，可以快速的搭建出查询表单

<template>
  <div>
    <div class="query-form">
      <el-form :inline="true" :model="queryModel" ref="queryForm">
        <template v-for="(item, index) in form" :key="index">
          <FormItem :item="item" v-bind="item" v-model="queryModel[item.model]" />
        </template>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>

/**
 * form = [
 * {
 *   type: "input",
 *   model: "userId",
 *   label: "用户ID",
 *   placeholder: "请输入用户ID"
 * }
 * ]
 */
import FormItem from "./FormItem.vue"
import {getCurrentInstance, reactive} from "vue"

export default {
  name: 'QueryForm',
  props: ["modelValue", "form"],
  emits: ["update:modelValue", "update:handleQuery"],
  components: {FormItem},
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    const queryModel = reactive({
      ...props.modelValue
    })
    const handleReset = () => {
      proxy.$refs.queryForm.resetFields()
    }
    const handleQuery = () => {
      context.emit("update:modelValue", {...queryModel})
      context.emit("update:handleQuery", {...queryModel})
    }
    return {
      handleQuery,
      handleReset,
      queryModel
    }
  }
}
</script>
<style lang='scss' scoped>

</style>

• queryFormItem

<template>
  <el-form-item :prop="item.model">
    <el-input v-if="item.type === 'input'" v-bind="$attrs"></el-input>
    <el-select v-else-if="item.type === 'select'" v-bind="$attrs">
      <el-option v-for="option in item.options"
        :key="option.value"
        v-bind="option"
      />
    </el-select>
  </el-form-item>
</template>
<script>
export default {
  name: 'FormItem',
  props: ["item"],
  data(){
    return {

    }
  }
}
</script>
<style lang='scss' scoped>

</style>

• 使用案例

<template>
  <div class="user-manage">
    <!--    <h3>用户管理</h3>-->
    <div class="query-form">
      <query-form
          :form="form" v-model="user" @update:handleQuery="handleQuery" @reset="handleReset('form')"
      ></query-form>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {getCurrentInstance, onMounted, reactive, ref, toRaw} from 'vue';
import api from '../api/index.js';
import QueryForm from '../../packages/QueryForm/QueryForm.vue';

const {proxy, ctx} = getCurrentInstance(); // ctx调用全局会有问题, 通过proxy来调用全局方法属性

// 初始化用户表单对象
const user = ref({
  // userId: '',
  // userName: '',
  // state: 1
});
const form = [
  {
    type: 'input',
    label: '用户Id',
    model: 'userId',
    placeholder: '请输入用户Id',
  },
  {
    type: 'input',
    label: '用户名称',
    model: 'userName',
    placeholder: '请输入用户名称',
  },
  {
    type: 'select',
    label: '状态',
    model: 'state',
    placeholder: '请选择状态',
    options: [
      {
        value: 0,
        label: '所有',
      },
      {
        value: 1,
        label: '在职',
      },
      {
        value: 2,
        label: '离职',
      },
      {
        value: 3,
        label: '试用期',
      }
    ]
  }
];

// 初始化接口调用
onMounted(() => {
  getUserList();
  getDeptList();
  getRoleList();
});
// 获取用户表格数据
const getUserList = async () => {
  let params = {...user.value, ...pager};
  try {
    const {list, page} = await api.getUserList(params);
    userList.value = list;
    pager.total = page.total;
  } catch (e) {
    console.log(e);
  }
};


// 查询事件，获取用户列表
const handleQuery = (values) => {
  console.log('values', values, user.value);
  getUserList();
};

// 重置查询表单
const handleReset = (form) => {
  proxy.$refs[form].resetFields();
};
// 新增用户
const userForm = reactive({
  state: 3
});
// 弹框显示
// 定义表单校验规则

const deptList = ref([]);
// 所有的角色列表
const roleList = ref([]);
// 获取所有的部门
const getDeptList = async () => {
  let list = await proxy.$api.getDeptList();
  deptList.value = list;
};

// 角色列表查询
const getRoleList = async () => {
  let list = await proxy.$api.getRoleList();
  roleList.value = list;
};


</script>

<style>

</style>