ylyx-cli 1.0.0

package/templates/vue-app/files/src/components/Breadcrumb/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noredirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp';
+
+export default {
+  data() {
+    return {
+      levelList: null,
+    };
+  },
+  watch: {
+    $route(route) {
+      // if you go to the redirect page, do not update the breadcrumbs
+      if (route.path.startsWith('/redirect/')) {
+        return;
+      }
+      this.getBreadcrumb();
+    },
+  },
+  created() {
+    this.getBreadcrumb();
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
+      const first = matched[0];
+
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+      // }
+
+      this.levelList = matched.filter(
+        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
+    },
+    isDashboard(route) {
+      const name = route && route.name;
+      if (!name) {
+        return false;
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase();
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route;
+      var toPath = pathToRegexp.compile(path);
+      return toPath(params);
+    },
+    handleLink(item) {
+      const { redirect, path } = item;
+      if (redirect) {
+        this.$router.push(redirect);
+        return;
+      }
+      this.$router.push(this.pathCompile(path));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

package/templates/vue-app/files/src/components/Crud/CRUD.operation.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="crud-opts">
+    <span class="crud-opts-left">
+      <!--左侧插槽-->
+      <slot name="left" />
+      <el-button
+        v-if="crud.optShow.add"
+        v-permission="permission.add"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="crud.toAdd">
+        新增
+      </el-button>
+      <el-button
+        v-if="crud.optShow.edit"
+        v-permission="permission.edit"
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-edit"
+        :disabled="crud.selections.length !== 1"
+        @click="crud.toEdit(crud.selections[0])">
+        修改
+      </el-button>
+      <el-button
+        v-if="crud.optShow.del"
+        slot="reference"
+        v-permission="permission.del"
+        class="filter-item"
+        type="danger"
+        icon="el-icon-delete"
+        size="mini"
+        :loading="crud.delAllLoading"
+        :disabled="crud.selections.length === 0"
+        @click="toDelete(crud.selections)">
+        删除
+      </el-button>
+      <el-button
+        v-if="crud.optShow.download"
+        :loading="crud.downloadLoading"
+        :disabled="!crud.data.length"
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-download"
+        @click="crud.doExport"
+        >导出</el-button
+      >
+      <!--右侧-->
+      <slot name="right" />
+    </span>
+    <el-button-group class="crud-opts-right" v-if="crud.optShow.group">
+      <el-button size="mini" plain type="info" icon="el-icon-search" @click="toggleSearch()" />
+      <el-button size="mini" icon="el-icon-refresh" @click="crud.refresh()" />
+      <el-popover placement="bottom-end" width="150" trigger="click">
+        <el-button slot="reference" size="mini" icon="el-icon-s-grid">
+          <i class="fa fa-caret-down" aria-hidden="true" />
+        </el-button>
+        <el-checkbox
+          v-model="allColumnsSelected"
+          :indeterminate="allColumnsSelectedIndeterminate"
+          @change="handleCheckAllChange">
+          全选
+        </el-checkbox>
+        <el-checkbox
+          v-for="item in tableColumns"
+          :key="item.property"
+          v-model="item.visible"
+          @change="handleCheckedTableColumnsChange(item)">
+          {{ item.label }}
+        </el-checkbox>
+      </el-popover>
+    </el-button-group>
+  </div>
+</template>
+<script>
+import CRUD, { crud } from '@crud/crud';
+
+function sortWithRef(src, ref) {
+  const result = Object.assign([], ref);
+  let cursor = -1;
+  src.forEach(e => {
+    const idx = result.indexOf(e);
+    if (idx === -1) {
+      cursor += 1;
+      result.splice(cursor, 0, e);
+    } else {
+      cursor = idx;
+    }
+  });
+  return result;
+}
+
+export default {
+  mixins: [crud()],
+  props: {
+    permission: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    hiddenColumns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    ignoreColumns: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      tableColumns: [],
+      allColumnsSelected: true,
+      allColumnsSelectedIndeterminate: false,
+      tableUnwatcher: null,
+      // 忽略下次表格列变动
+      ignoreNextTableColumnsChange: false,
+    };
+  },
+  watch: {
+    'crud.props.table'() {
+      this.updateTableColumns();
+      this.tableColumns.forEach(column => {
+        if (this.hiddenColumns.indexOf(column.property) !== -1) {
+          column.visible = false;
+          this.updateColumnVisible(column);
+        }
+      });
+    },
+    'crud.props.table.store.states.columns'() {
+      this.updateTableColumns();
+    },
+  },
+  created() {
+    this.crud.updateProp('searchToggle', true);
+  },
+  methods: {
+    updateTableColumns() {
+      const table = this.crud.getTable();
+      if (!table) {
+        this.tableColumns = [];
+        return;
+      }
+      let cols = null;
+      const columnFilter = e =>
+        e && e.type === 'default' && e.property && this.ignoreColumns.indexOf(e.property) === -1;
+      const refCols = table.columns.filter(columnFilter);
+      if (this.ignoreNextTableColumnsChange) {
+        this.ignoreNextTableColumnsChange = false;
+        return;
+      }
+      this.ignoreNextTableColumnsChange = false;
+      const columns = [];
+      const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter);
+      cols = sortWithRef(fullTableColumns, refCols);
+      cols.forEach(config => {
+        const column = {
+          property: config.property,
+          label: config.label,
+          visible: refCols.indexOf(config) !== -1,
+        };
+        columns.push(column);
+      });
+      this.tableColumns = columns;
+    },
+    toDelete(datas) {
+      this.$confirm(`确认删除选中的${datas.length}条数据?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.crud.delAllLoading = true;
+          this.crud.doDelete(datas);
+        })
+        .catch(() => {});
+    },
+    handleCheckAllChange(val) {
+      if (val === false) {
+        this.allColumnsSelected = true;
+        return;
+      }
+      this.tableColumns.forEach(column => {
+        if (!column.visible) {
+          column.visible = true;
+          this.updateColumnVisible(column);
+        }
+      });
+      this.allColumnsSelected = val;
+      this.allColumnsSelectedIndeterminate = false;
+    },
+    handleCheckedTableColumnsChange(item) {
+      let totalCount = 0;
+      let selectedCount = 0;
+      this.tableColumns.forEach(column => {
+        ++totalCount;
+        selectedCount += column.visible ? 1 : 0;
+      });
+      if (selectedCount === 0) {
+        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING);
+        this.$nextTick(function () {
+          item.visible = true;
+        });
+        return;
+      }
+      this.allColumnsSelected = selectedCount === totalCount;
+      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0;
+      this.updateColumnVisible(item);
+    },
+    updateColumnVisible(item) {
+      const table = this.crud.props.table;
+      const vm = table.$children.find(e => e.prop === item.property);
+      const columnConfig = vm.columnConfig;
+      if (item.visible) {
+        // 找出合适的插入点
+        const columnIndex = this.tableColumns.indexOf(item);
+        vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null);
+      } else {
+        vm.owner.store.commit('removeColumn', columnConfig, null);
+      }
+      this.ignoreNextTableColumnsChange = true;
+    },
+    toggleSearch() {
+      this.crud.props.searchToggle = !this.crud.props.searchToggle;
+    },
+  },
+};
+</script>
+
+<style>
+.crud-opts {
+  padding: 4px 0;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+}
+.crud-opts .crud-opts-right {
+  margin-left: auto;
+}
+</style>

package/templates/vue-app/files/src/components/Crud/Pagination.vue

@@ -0,0 +1,20 @@
+<!--分页-->
+<template>
+  <el-pagination
+    background
+    :page-size.sync="page.size"
+    :page-sizes="page.sizes"
+    :total="page.total"
+    :current-page.sync="page.page"
+    style="margin-top: 8px; text-align: right"
+    layout="total, sizes, prev, pager, next"
+    @size-change="crud.sizeChangeHandler($event)"
+    @current-change="crud.pageChangeHandler" />
+</template>
+<script>
+import { pagination } from '@crud/crud';
+export default {
+  mixins: [pagination()],
+  created() {},
+};
+</script>

package/templates/vue-app/files/src/components/Crud/RR.operation.vue

@@ -0,0 +1,39 @@
+<!--搜索与重置-->
+<template>
+  <span>
+    <el-button class="filter-item filter-item-btn" size="mini" @click="crud.toQuery"
+      >查询</el-button
+    >
+    <el-button
+      v-if="crud.optShow.reset"
+      class="filter-item filter-item-btn"
+      size="mini"
+      @click="crud.resetQuery()"
+      >重置</el-button
+    >
+  </span>
+</template>
+<script>
+import { crud } from '@crud/crud';
+export default {
+  mixins: [crud()],
+  props: {
+    itemClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+<style scoped>
+::v-deep .el-button.filter-item {
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+/*统一样式*/
+.filter-item-btn {
+  color: #1890ff !important;
+  border: 1px solid #1890ff !important;
+}
+</style>

package/templates/vue-app/files/src/components/Crud/UD.operation.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <!-- permission.edit -->
+    <el-button
+      v-permission="['admin', 'dict:edit']"
+      :loading="crud.status.cu === 2"
+      :disabled="disabledEdit"
+      size="mini"
+      type="primary"
+      icon="el-icon-edit"
+      @click="crud.toEdit(data)"></el-button>
+    <!-- permission.del -->
+    <el-popover
+      v-model="pop"
+      v-permission="['admin', 'dict:del']"
+      placement="top"
+      width="180"
+      trigger="manual"
+      @show="onPopoverShow"
+      @hide="onPopoverHide">
+      <p>{{ msg }}</p>
+      <div style="text-align: right; margin: 0">
+        <el-button size="mini" type="text" @click="doCancel">取消</el-button>
+        <el-button
+          :loading="crud.dataStatus[crud.getDataId(data)].delete === 2"
+          type="primary"
+          size="mini"
+          @click="crud.doDelete(data)"
+          >确定</el-button
+        >
+      </div>
+      <el-button
+        slot="reference"
+        :disabled="disabledDle"
+        type="danger"
+        icon="el-icon-delete"
+        size="mini"
+        @click="toDelete"></el-button>
+    </el-popover>
+  </div>
+</template>
+<script>
+import CRUD, { crud } from '@crud/crud';
+export default {
+  mixins: [crud()],
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    // permission: {
+    //   type: Object,
+    //   required: true
+    // },
+    disabledEdit: {
+      type: Boolean,
+      default: false,
+    },
+    disabledDle: {
+      type: Boolean,
+      default: false,
+    },
+    msg: {
+      type: String,
+      default: '确定删除本条数据吗？',
+    },
+  },
+  data() {
+    return {
+      pop: false,
+    };
+  },
+  mounted() {
+    // this.permission = {
+    //   add:["admin"],
+    //   del:["admin"],
+    //   edit:["admin"],
+    // }
+  },
+  methods: {
+    doCancel() {
+      this.pop = false;
+      this.crud.cancelDelete(this.data);
+    },
+    toDelete() {
+      this.pop = true;
+    },
+    [CRUD.HOOK.afterDelete](crud, data) {
+      if (data === this.data) {
+        this.pop = false;
+      }
+    },
+    onPopoverShow() {
+      setTimeout(() => {
+        document.addEventListener('click', this.handleDocumentClick);
+      }, 0);
+    },
+    onPopoverHide() {
+      document.removeEventListener('click', this.handleDocumentClick);
+    },
+    handleDocumentClick(event) {
+      this.pop = false;
+    },
+  },
+};
+</script>