vue2企业级项目（八）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2企业级项目（八）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue2企业级项目（八）

组件封装（二）

4、`searchForm`

创建components/searchForm/index.js

import 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-button
                  type="primary"
                  icon="el-icon-search"
                  loading={this.searchLoading}
                  onClick={this.triggerSearch}
                >
                  搜索
                </el-button>
                <el-button
                  icon="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.js

import XSearchTable from "./index.vue";
export default XSearchTable;

创建components/searchTable/index.vue

<template>
  <div class="x-search-table">
    <x-search-form
      v-bind="searchConfig"
      :columns="searchFields"
      @search="handleSearch"
      ref="search"
    ></x-search-form>
    <div class="x-search-table-box">
      <x-table
        v-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.js

import XSearchTable from "./index.vue";
export default XSearchTable;

创建components/dialogForm/index.vue

<template>
  <x-dialog
    submitText="提交"
    :submitLoading="true"
    :title="title"
    v-bind="dialogConfig"
    ref="dialog"
  >
    <x-form
      labelWidth="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>

使用案例文章来源地址https://www.toymoban.com/news/detail-621101.html

<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>

到了这里，关于vue2企业级项目（八）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！