vue2企业级项目（八）
vue2企业级项目（八）
组件封装（二）
4、searchForm
-
创建
components/searchForm/index.jsimport XSearchForm from "./index.vue"; export default XSearchForm; -
使用案例
<template><div class="wrap"><h3>基础搜索</h3><div class="box"><x-search-form :columns="columns1" @search="handleSearch"></x-search-form></div><h3>自动布局</h3><div class="box"><x-search-form:columns="columns2"@search="handleSearch":lineNum="4"></x-search-form></div><h3>自定义搜索按钮</h3><div class="box"><x-search-form:columns="columns3":hasSearch="false"@search="handleSearch"ref="search"></x-search-form></div></div> </template><script> export default {name: "Page7",data() {return {searchLoading: false,resetLoading: false,columns1: [{ type: "input", label: "姓名", prop: "name" },{ type: "input", label: "年龄", prop: "age" },{type: "select",label: "性别",prop: "sex",options: [{ label: "男", value: "1" },{ label: "女", value: "0" },],},],columns2: [{ type: "input", label: "姓名1", prop: "name1" },{ type: "input", label: "姓名2", prop: "name2" },{ type: "input", label: "姓名3", prop: "name3" },{ type: "input", label: "姓名4", prop: "name4" },{ type: "input", label: "姓名5", prop: "name5" },],columns3: [{ type: "input", label: "姓名", prop: "name" },{span: 16,align: "right",render: () => {return (<div><el-button type="success" icon="el-icon-upload">导入</el-button><el-button type="warning" icon="el-icon-download">导出</el-button><el-buttontype="primary"icon="el-icon-search"loading={this.searchLoading}onClick={this.triggerSearch}>搜索</el-button><el-buttonicon="el-icon-refresh"loading={this.resetLoading}onClick={this.triggerReset}>重置</el-button></div>);},},],};},mounted() {},methods: {handleSearch(searchForm, callback) {if (searchForm) {console.log(searchForm);this.$message.success("搜索成功");} else {this.$message.success("重置成功");}setTimeout(() => {callback();this.searchLoading = false;this.resetLoading = false;}, 1000);},triggerSearch() {this.searchLoading = true;this.$refs.search.triggerSearch();},triggerReset() {this.resetLoading = true;this.$refs.search.triggerReset();},}, }; </script><style lang="less" scoped> .wrap {width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column; }.box {width: 800px;height: 200px;padding: 10px;margin-bottom: 20px;background: #1f03034d; } </style>
5、searchTable
-
创建
components/searchTable/index.jsimport XSearchTable from "./index.vue"; export default XSearchTable; -
创建
components/searchTable/index.vue<template><div class="x-search-table"><x-search-formv-bind="searchConfig":columns="searchFields"@search="handleSearch"ref="search"></x-search-form><div class="x-search-table-box"><x-tablev-bind="tableConfig":columns="tableFields":api="api":tableData="data"ref="table"></x-table></div></div> </template><script> /*** @param { Array } columns: 配置* @param { Array } data: 数据* @param { Function } api: 接口* @param { Object } searchForm: search的配置* @param { Object } tableForm: table的配置** @event { Function } getSearchForm: 获取搜索值* @event { Function } setSearchForm: 获取搜索值* @event { function } toggleSelection：设置默认多选* @event { function } setCurrent: 设置单选* @event { function } clearFilter：清空筛选项* @event { function } getSelection: 获取选中结果* @event { function } getTableData: 获取表格值*/export default {name: "XSearchTable",props: {columns: {type: Array,default: () => [],},data: {type: Array,default: () => [],},api: {type: Function,default: null,},searchConfig: {type: Object,default: () => ({}),},tableConfig: {type: Object,default: () => ({}),},},data() {return {searchFields: [],tableFields: [],searchForm: null,};},watch: {columns: {immediate: true,deep: true,handler() {this.handleFields();},},},methods: {handleFields() {this.searchFields = this.columns.map((item) => {let searchItem = { ...item, ...item.search };delete searchItem.form;delete searchItem.table;delete searchItem.search;delete searchItem.dialog;return searchItem;});this.tableFields = this.columns.map((item) => {let tableItem = { ...item, ...item.table };delete tableItem.form;delete tableItem.table;delete tableItem.search;delete tableItem.dialog;return tableItem;});},handleSearch(searchForm, callback) {this.searchForm = searchForm;this.$refs.table.setTableData(searchForm).then(callback);},getSearchForm() {return this.$refs.search.getSearchForm();},setSearchForm(form) {this.$refs.search.setSearchForm(form);},toggleSelection(rows) {this.$refs.table.toggleSelection(rows);},setCurrent(row) {this.$refs.table.setCurrent(row);},clearFilter() {this.$refs.table.clearFilter();},getSelection() {return this.$refs.table.getSelection();},getTableData() {return this.$refs.table.getTableData();},}, }; </script><style lang="less" scoped> .x-search-table {width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column;.x-search-table-box {width: 100%;flex: 1;} } </style> -
使用案例
<template><div class="wrap"><!-- 基础搜索 --><h3>基础搜索</h3><div class="box"><x-search-table :columns="columns" :data="data"></x-search-table></div><!-- 接口搜索 --><h3>接口搜索</h3><div class="box"><x-search-table :columns="columns2" :api="getList"></x-search-table></div></div> </template><script> import { getList } from "@/api/mock.js";export default {name: "Page8",data() {return {columns: [{ type: "input", label: "姓名", prop: "name" },{ type: "input", label: "年龄", prop: "age" },{type: "select",label: "性别",prop: "sex",options: [{ label: "男", value: "1" },{ label: "女", value: "0" },],},{type: "input",label: "地址",prop: "address",search: { isShow: false },},],data: [],columns2: [{ type: "input", label: "姓名", prop: "name" },{ type: "input", label: "年龄", prop: "age" },{type: "select",label: "性别",prop: "sex",options: [{ label: "男", value: "1" },{ label: "女", value: "0" },],},{ label: "日期", prop: "date", props: { valueFormat: "yyyy-MM-DD" } },{type: "input",label: "地址",prop: "address",search: { isShow: false },},],};},created() {this.init();},methods: {getList: getList,init() {let list = new Array(99).fill({});list = list.map((item, index) => {return {name: index > 20 ? `张三${index}` : "张三",age: index.toString(),sex: (index % 2).toString(),address: `北京市朝阳区${index}号`,};});this.data = list;},}, }; </script><style lang="less" scoped> .wrap {width: 100%;height: 100%;display: flex;align-items: center;flex-direction: column; }.box {width: 800px;height: 700px;padding: 10px;margin-bottom: 20px;background: #1f03034d; } </style>
6、dialogForm
-
创建
components/dialogForm/index.jsimport XSearchTable from "./index.vue"; export default XSearchTable; -
创建
components/dialogForm/index.vue<template><x-dialogsubmitText="提交":submitLoading="true":title="title"v-bind="dialogConfig"ref="dialog"><x-formlabelWidth="100px"v-bind="formConfig":columns="formFields":defaultValue="defaultForm":ctrl="false"ref="form"></x-form></x-dialog> </template><script> /*** @param { Array } columns: 配置* @param { String } defaultTitle: 默认标题* @param { String } addTitle: 新增标题* @param { String } editTitle: 编辑标题* @param { Boolean } saveAdd: 是否暂存新增的内容* @param { Object } dialogConfig: dialog的配置* @param { Object } formConfig: form的配置** @event { Function } open: 打开dialogform* @event { Function } triggerSubmit: 手动触发表单校验，校验通过后关闭dialog* @evnet { Function } triggerReset: 手动触发表单重置，完成后关闭dialog**/export default {name: "XDialogForm",props: {columns: {type: Array,default: () => [],},defaultTitle: {type: String,default: "弹框",},addTitle: {type: String,default: "新增",},editTitle: {type: String,default: "编辑",},saveAdd: {type: Boolean,default: false,},dialogConfig: {type: Object,default: () => ({}),},formConfig: {type: Object,default: () => ({}),},},data() {return {title: "",formFields: [],defaultForm: {},handleResolve: null,handleReject: null,handleCallback: null,};},watch: {columns: {immediate: true,deep: true,handler() {this.init();},},},methods: {init() {this.formFields = this.columns.map((item) => {const formItem = { ...item, ...item.dialog };delete formItem.form;delete formItem.table;delete formItem.search;delete formItem.dialog;return formItem;});this.formFields = this.formFields.filter((item) => item.isShow !== false);},open(form) {if (!this.saveAdd || form) {this.defaultForm = form || {};}if (form) this.title = this.editTitle || this.defaultTitle;else this.title = this.addTitle || this.defaultTitle;this.$refs.dialog.open().then((callback) => {this.handleCallback = callback;this.triggerSubmit();}).catch(this.triggerReset.bind(this));return new Promise((resolve, reject) => {this.handleResolve = resolve;this.handleReject = reject;});},triggerSubmit() {this.$refs.form.submit().then(({ form, valid }) => {console.log(form, valid);if (valid) {this.handleResolve(form);this.handleCallback();this.closeBefore();} else {this.handleCallback(false);}}).finally(() => {this.handleCallback = null;});},triggerReset() {if (this.addTitle && this.title === this.addTitle) {this.close();return true;}this.closeBefore();},closeBefore() {this.defaultForm = {};this.$refs.form.reset().then(() => {this.handleReject();this.close();});},close() {this.title = "";this.handleResolve = null;this.handleReject = null;this.handleCallback = null;},}, }; </script> -
使用案例
<template><div><el-button type="primary" @click="openDialog()">新增</el-button><el-button type="primary" @click="openDialog(data)">编辑</el-button><x-dialog-form :columns="columns" ref="dialogForm"></x-dialog-form></div> </template><script> export default {name: "Page9",data() {return {columns: [{ type: "input", label: "用户", prop: "name", required: true },{ type: "input", label: "年龄", prop: "age" },{type: "radio",label: "性别",prop: "sex",options: [{ label: "男", value: "1" },{ label: "女", value: "0" },],},],data: {name: "张三",age: "20",sex: "1",},};},methods: {openDialog(data) {this.$refs.dialogForm.open(data).then((form) => {console.log(form, "------编辑后的值");}).catch(() => {console.log("-----------取消");});},}, }; </script>