From c97fa6d2d5fabf1aa82066cb8427f9a7f14b9214 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 16 Jun 2020 19:55:17 +0800
Subject: [PATCH] feat: 新增Scheme组件

---
 packages/scheme/index.vue | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 239 insertions(+), 0 deletions(-)
 create mode 100644 packages/scheme/index.vue

diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
new file mode 100644
index 0000000..a9f3e86
--- /dev/null
+++ b/packages/scheme/index.vue
@@ -0,0 +1,239 @@
+<style lang="scss">
+.zee-scheme {
+  &__header {
+    margin-bottom: 10px;
+  }
+  &__filter {
+    border: 1px solid #ebeef5;
+    padding-top: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  &__action {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    line-height: 1;
+    justify-content: flex-start;
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  &__dialog-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+  }
+  &__footer {
+    margin-top: 10px;
+    text-align: right;
+  }
+}
+</style>
+
+<template>
+  <div class="zee-scheme">
+    <div v-if="$scopedSlots.header || $slots.header" class="zee-scheme__header">
+      <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
+    </div>
+    <div class="zee-scheme__filter">
+      <z-filter v-if="filter" :value="_filterModel" :list="list | noRulesFilter" :size="size" @input="onFilterInput"></z-filter>
+    </div>
+    <div v-if="action" class="zee-scheme__action">
+      <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
+      <template v-else>
+        <el-button :size="size" type="primary" @click="openNew">新增</el-button>
+        <slot name="button" :size="size" v-bind="_slotScope"></slot>
+      </template>
+    </div>
+    <div class="zee-scheme__table">
+      <z-table v-model="tableData" :list="list" :tableProps="{ border: true }" :size="size">
+        <template #column-end>
+          <el-table-column prop="$operation" label="操作" :width="140" fixed="right">
+            <template slot-scope="slotScope">
+              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope)"></el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </z-table>
+    </div>
+    <div class="zee-scheme__footer">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" destroy-on-close append-to-body :close-on-click-modal="false" @closed="onDialogClosed">
+      <div v-loading="dialogLoading">
+        <slot v-if="hadSlot('dialog-title')" slot="title" name="dialog-title" :dialogType="dialogType" v-bind="_slotScope"></slot>
+        <template v-if="dialogRender">
+          <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
+          <z-form v-else ref="form" :value="_formModel" :list="list" label-width="80px" :span="12" @input="onFormInput" @validate="onFormValidate"></z-form>
+          <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
+            <el-button :size="size" type="primary" @click="handleConfirm">确定</el-button>
+            <el-button :size="size" plain @click="closeDialog">取消</el-button>
+          </div>
+        </template>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from '../form/util';
+
+export default {
+  name: 'Scheme',
+  props: {
+    list: Array,
+    filter: {
+      type: Boolean,
+      default: true,
+    },
+    action: {
+      type: Boolean,
+      default: true,
+    },
+    size: {
+      type: String,
+      default: 'mini',
+    },
+    formModel: Object,
+    filterModel: Object,
+  },
+  data() {
+    return {
+      filterForm: {},
+      editForm: {},
+      dialogVisible: false,
+      dialogRender: true,
+      dialogType: 'none',
+      dialogLoading: false,
+      dialogTitle: '',
+      dialogCloseCallback: undefined,
+      currentPage: 1,
+      pageSize: 10,
+      total: 127,
+      pageSizes: [10, 20, 50],
+      tableData: [
+        { name: '张三', age: 16, driver: { name: '王五', bank: { name: '中国银行' } } },
+        { name: '李四', age: 24 },
+      ],
+    };
+  },
+  filters: {
+    noRulesFilter(val = []) {
+      let list = cloneDeep(val);
+      const clearRules = list => {
+        list.forEach(item => {
+          if (item.list) {
+            clearRules(item.list);
+          } else {
+            delete item.rules;
+          }
+        });
+      };
+      clearRules(list);
+      return list;
+    },
+  },
+  computed: {
+    _filterModel() {
+      return this.filterModel || this.filterForm || {};
+    },
+    _formModel() {
+      return this.formModel || this.editForm || {};
+    },
+    _slotScope() {
+      return {
+        openDialog: this.openDialog,
+        closeDialog: this.closeDialog,
+      };
+    },
+  },
+  methods: {
+    onFilterInput(val) {
+      this.filterForm = val || {};
+      this.$emit('update:filterModel', val || {});
+    },
+    onFormInput(val) {
+      this.editForm = val || {};
+      this.$emit('update:formModel', val || {});
+    },
+    onFormValidate(valid, model) {
+      if (valid) {
+        console.log(model);
+      }
+    },
+    // 表单按钮确定
+    handleConfirm() {
+      this.$refs.form && this.$refs.form.validate();
+    },
+    // 表单按钮取消
+    handleCancel() {
+      this.closeDialog();
+    },
+    // 查询是否有某个插槽
+    hadSlot(name) {
+      return !!this.$slots[name] || !!this.$scopedSlots[name];
+    },
+    // 打开新增弹出框
+    openNew() {
+      this.openDialog('new', '新增');
+    },
+    // 打开编辑弹出框
+    openEdit({ row }) {
+      this.dialogLoading = true;
+      setTimeout(() => {
+        this.editForm = { ...row };
+        this.dialogLoading = false;
+      }, 300);
+      this.openDialog('edit', '编辑');
+    },
+    // 打开弹出框
+    openDialog(type, title) {
+      this.dialogVisible = true;
+      this.dialogRender = true;
+      this.dialogType = type;
+      this.dialogTitle = title;
+      this.dialogCloseCallback = undefined;
+    },
+    // 关闭弹出框
+    closeDialog(callback) {
+      this.dialogVisible = false;
+      this.dialogCloseCallback = callback instanceof Event ? undefined : callback;
+    },
+    // 清空表单
+    clearEditForm() {
+      this.editForm = {};
+    },
+    // 弹出框关闭
+    onDialogClosed() {
+      this.clearEditForm();
+      this.dialogRender = false;
+      this.dialogType = 'none';
+      this.dialogCloseCallback && this.dialogCloseCallback();
+    },
+    // 分页-每页个数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+    },
+    // 分页-当前页数
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    },
+  },
+};
+</script>
--
libgit2 0.21.0