mooho-base-admin-plus 0.1.0

package/src/components/view/modal-table.vue

@@ -0,0 +1,471 @@
+<template>
+  <Modal
+    ref="modal"
+    v-model="opened"
+    scrollable
+    :mask-closable="maskClosable == null ? layout.maskClosable : maskClosable"
+    :draggable="draggable == null ? layout.draggable : draggable"
+    :sticky="true"
+    :reset-drag-position="true"
+    :width="tableView.width || screenWidth"
+    :before-close="beforeClose"
+    :footer-hide="!footerEnable"
+    @on-visible-change="onVisibleChange"
+  >
+    <template #header>
+      <div>
+        <!--
+          @slot 页头
+        -->
+        <slot name="header">
+          <span class="title">{{ tableView.name }}</span>
+          <span class="description">{{ tableView.description }}</span>
+        </slot>
+      </div>
+    </template>
+    <div class="ivu-ml-8 ivu-mr-8">
+      <view-table
+        ref="table"
+        :view-code="viewCode"
+        :static="this.static"
+        :filter="tableFilter"
+        :setting-enable="settingEnable"
+        :select-enable="selectEnable"
+        :autoLoad="false"
+        :tree-enable="treeEnable"
+        :tree-load="treeLoad"
+        :has-children="hasChildren"
+        :create-enable="createEnable"
+        :edit-enable="editEnable"
+        :remove-enable="removeEnable"
+        :draggable="draggable"
+        :filter-enable="filterEnable"
+        :page-enable="pageEnable"
+        :embedded="embedded"
+        :on-search="onSearch"
+        :summary-method="summaryMethod"
+        :page-size-opts="pageSizeOpts"
+        @create="create"
+        @edit="edit"
+        @on-ready="onReady"
+        @on-load-data="onLoadData"
+        @after-init="afterInit"
+        @on-drag-drop="dragDrop"
+      >
+        <template #top>
+          <!--
+              @slot 顶部
+          -->
+          <slot name="top"></slot>
+        </template>
+        <template #filter="{ filter }">
+          <!--
+              @slot 筛选栏
+              @binding {object} table 表格对象
+              @binding {object} filter 筛选对象
+          -->
+          <slot name="filter" :table="$refs.table" :filter="filter" :param="param"></slot>
+        </template>
+        <template #customFilter>
+          <!--
+              @slot 自定义筛选栏
+          -->
+          <slot name="customFilter"></slot>
+        </template>
+        <template #filterCommand>
+          <!--
+              @slot 筛选栏按钮
+          -->
+          <slot name="filterCommand"></slot>
+        </template>
+        <template #commandBefore="{ row, index }">
+          <!--
+              @slot 工具栏（编辑按钮前）
+              @binding {object} row 行对象
+              @binding {int} index 行序号
+          -->
+          <slot name="commandBefore" :row="row" :index="index"></slot>
+        </template>
+        <template #command="{ row, index }">
+          <!--
+              @slot 工具栏
+              @binding {object} row 行对象
+              @binding {int} index 行序号
+          -->
+          <slot name="command" :row="row" :index="index"></slot>
+        </template>
+        <template #column="{ row, index, column, code }">
+          <!--
+              @slot 自定义列
+              @binding {object} row 行对象
+              @binding {int} index 行序号
+              @binding {object} column 列对象
+              @binding {string} code 列代码
+          -->
+          <slot name="column" :row="row" :index="index" :column="column" :code="code"></slot>
+        </template>
+        <template #filterColumn="{ filter, column }">
+          <!--
+              @slot 筛选栏自定义列
+              @binding {object} filter 筛选条件对象
+              @binding {object} column 列对象
+              @binding {string} code 列代码
+          -->
+          <slot name="filterColumn" :filter="filter" :column="column" :code="column.code"></slot>
+        </template>
+      </view-table>
+    </div>
+    <template #footer>
+      <div>
+        <!--
+          @slot 页脚
+        -->
+        <slot name="footer"></slot>
+      </div>
+    </template>
+  </Modal>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+
+  /**
+   * @displayName modal-table 表格对话框
+   */
+  export default {
+    mixins: [mixinPage],
+    components: {},
+    data() {
+      return {
+        opened: false,
+        tableView: {},
+        param: {},
+        tableFilter: {}
+      };
+    },
+    created() {},
+    props: {
+      /**
+       * 视图代码
+       */
+      viewCode: {
+        type: String
+      },
+      /**
+       * 是否静态数据
+       */
+      static: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 筛选
+       */
+      filter: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      /**
+       * 显示底栏
+       */
+      footerEnable: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 自动加载
+       */
+      autoLoad: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 是否允许点击遮罩层关闭
+       */
+      maskClosable: {
+        type: Boolean,
+        default: null
+      },
+      /**
+       * 是否允许拖动
+       */
+      draggable: {
+        type: Boolean,
+        default: null
+      },
+      /**
+       * 是否允许配置界面
+       */
+      settingEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 是否允许选择
+       */
+      selectEnable: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 是否允许树展开
+       */
+      treeEnable: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 树展开字段
+       */
+      treeColumn: {
+        type: String
+      },
+      /**
+       * 树展开动作
+       */
+      treeLoad: {
+        type: Function
+      },
+      /**
+       * 树包含子项
+       */
+      hasChildren: {
+        type: Function
+      },
+      /**
+       * 允许创建
+       */
+      createEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 允许编辑
+       */
+      editEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 允许删除
+       */
+      removeEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 允许筛选栏
+       */
+      filterEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 允许分页
+       */
+      pageEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 是否内嵌表格
+       */
+      embedded: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 查询方法
+       */
+      onSearch: {
+        type: Function
+      },
+      /**
+       * 合计方法
+       */
+      summaryMethod: {
+        type: Function
+      },
+      /**
+       * 每页条数切换的配置
+       */
+      pageSizeOpts: {
+        type: Array
+      },
+      /**
+       * 关闭前方法
+       */
+      beforeClose: {
+        type: Function
+      }
+    },
+    computed: {
+      data() {
+        return this.$refs.table.data;
+      },
+      table() {
+        return this.$refs.table;
+      },
+      screenWidth() {
+        return document.body.clientWidth * 0.8;
+      }
+    },
+    methods: {
+      /**
+       * 初始化
+       *
+       * @param {string} viewCode 视图代码
+       * @param {function} callback 完成后回调方法
+       * @param {function} onFail 失败后回调方法
+       * @public
+       */
+      async init(viewCode, callback, onFail) {
+        await this.$refs.table.init(viewCode, callback, onFail);
+      },
+      /**
+       * 打开
+       *
+       * @param {object} param 参数
+       * @public
+       */
+      open(param) {
+        for (let key in this.param) {
+          delete this.tableFilter[key];
+        }
+
+        this.param = param;
+
+        for (let key in this.param) {
+          this.tableFilter[key] = this.param[key];
+        }
+
+        setTimeout(() => {
+          this.$refs.table.loadData();
+
+          setTimeout(() => {
+            this.opened = true;
+          });
+        });
+      },
+      /**
+       * 关闭
+       *
+       * @public
+       */
+      async close() {
+        this.opened = false;
+      },
+      /**
+       * 验证
+       *
+       * @public
+       */
+      validate() {
+        return this.$refs.table.validate();
+      },
+      /**
+       * 加载数据
+       *
+       * @param {object} staticData 静态数据
+       * @public
+       */
+      loadData(staticData) {
+        this.$refs.table.loadData(staticData);
+      },
+      /**
+       * 获取选中项
+       *
+       * @public
+       */
+      getSelected() {
+        return this.$refs.table.getSelected();
+      },
+      /**
+       * 设置选中项
+       *
+       * @param {array} selected 选中项集合
+       * @public
+       */
+      setSelected(selected) {
+        this.$refs.table.setSelected(selected);
+      },
+      /**
+       * 获取数据
+       *
+       * @public
+       */
+      getData() {
+        return this.$refs.table.getData();
+      },
+      /**
+       * 获取默认值
+       *
+       * @public
+       */
+      getDefaultData() {
+        return this.$refs.table.getDefaultData();
+      },
+      onReady(tableView) {
+        this.tableView = tableView;
+      },
+      onVisibleChange(show) {
+        // 关闭时清空数据
+        if (!show) {
+          if (this.$refs.table.isStatic) {
+            this.$refs.table.loadData([]);
+          }
+          /**
+           * 关闭事件
+           */
+          this.$emit('on-close');
+        }
+      },
+      onLoadData() {
+        /**
+         * 数据加载事件
+         */
+        this.$emit('on-load-data');
+      },
+      // 创建新项
+      create() {
+        /**
+         * 新建事件
+         * @property {object} param 参数
+         */
+        this.$emit('create', this.param);
+      },
+      // 编辑项
+      edit(args) {
+        /**
+         * 编辑事件
+         * @property {object} args { row 行对象, index 行序号 }
+         */
+        this.$emit('edit', args);
+      },
+      // 删除项
+      remove(row) {
+        this.$refs.table.remove(row);
+      },
+      // 完成初始化
+      afterInit() {
+        /**
+         * 初始化完成事件
+         */
+        this.$emit('after-init');
+      },
+      // 清空全部选中项
+      selectAllCancel() {
+        this.setSelected([]);
+      },
+      // 拖拽完成
+      dragDrop(args) {
+        /**
+         * 拖动完成事件
+         * @property {object} args { index1 来源行序号, index2 目标行序号 }
+         */
+        this.$emit('on-drag-drop', args);
+      }
+    }
+  };
+</script>