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>
  
  

• 使用案例

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