@tripup-company/element-ui-extended 0.0.2 → 0.0.7

package/src/components/GenericTable/index.vue

@@ -1,67 +1,32 @@
 <template>
-  <div v-loading="loading" class="generic-table">
-    <slot>
-      <el-row v-if="showTopFilter" :gutter="20">
-        <generic-top-filter ref="genericTopFilter" />
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <generic-rows />
-          <el-row>
-            <el-col>
-              <generic-paginator />
-            </el-col>
-          </el-row>
-        </el-col>
-        <el-col :span="6">
-          <generic-filter ref="genericFilter" />
-        </el-col>
-      </el-row>
-    </slot>
+  <div>
+    <el-table :data="data" border @sort-change="sortChange">
+      <template v-for="field in fields">
+        <template v-if="field.callback">
+          <el-table-column :key="field.prop" v-slot="context" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom">
+            <el-link @click="field.callback(field.prop, context.$index, context.row)">
+              {{ typeof field.formatter === 'function' ? field.formatter(context.row) : context.row[field.prop] }}
+            </el-link>
+          </el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column :formatter="typeof field.formatter === 'function' ? field.formatter : null" :key="field.prop" :prop="field.prop" :label="field.label" :width="field.width ? field.width : null" sortable="custom" />
+        </template>
+      </template>
+    </el-table>
   </div>
 </template>
+
 <script>
-import GenericPaginator from "./GenericPaginator";
-import GenericFilter from "./GenericFilter";
-import GenericTopFilter from "./GenericTopFilter";
-import GenericRows from "./GenericRows";
-import MetaModel from "../../models/meta-model.ts";
-import ListQueryService from "../../services/list-query-service.ts";
-import FilterConverter from "./filter-convertor.ts";
+
 export default {
   name: "GenericTable",
-  components: {
-    GenericRows,
-    GenericFilter,
-    GenericPaginator,
-    GenericTopFilter,
-  },
-  provide() {
-    const data = {};
-    ["items", "fields", "filters", "loading", "meta"].forEach((key) => {
-      Object.defineProperty(data, key, {
-        enumerable: true,
-        get: () => this[key],
-      });
-    });
-    return {
-      data,
-      search: this.search,
-      actions: {
-        handleSizeChange: this.handleSizeChange,
-        handleCurrentChange: this.handleCurrentChange,
-        handleFilterChange: this.handleFilterChange,
-        handleApplyFilter: this.handleApplyFilter,
-        handleResetFilter: this.handleResetFilter,
-      },
-    };
-  },
   props: {
-    repository: {
+    data: {
       default() {
         return {};
       },
-      type: Object,
+      type: Array,
     },
     title: {
       default: "",
@@ -71,111 +36,16 @@ export default {
       default: () => [],
       type: Array,
     },
-    filters: {
-      default: () => [],
-      type: Array,
-    },
   },
   data: function () {
-    let search = {};
-    const filterConvertor = new FilterConverter();
-    const listQueryService = new ListQueryService(
-      this.$route.name,
-      this.$services.localStorage()
-    );
-    for (const column of this.filters) {
-      search[column.name] = {
-        operator: "",
-        value: "",
-        position: column.position ? column.position : null,
-      };
-    }
-    search = Object.assign(search, listQueryService.getListQuery().search);
     return {
       loading: false,
-      filter: {},
-      items: [],
-      search: search,
-      meta: new MetaModel(),
-      filterConvertor: filterConvertor,
-      listQueryService: listQueryService,
     };
   },
-  computed: {
-    showTopFilter() {
-      if (this.filters.filter((e) => e.position === "top").length > 0) {
-        return true;
-      }
-      return false;
-    },
-    queryFilter() {
-      const meta = this.listQueryService.getListQuery().meta;
-      const query = {
-        page: this.meta?.pagination?.current_page
-          ? this.meta.pagination.current_page
-          : meta.page,
-        limit: this.meta?.pagination?.per_page
-          ? this.meta.pagination.per_page
-          : meta.limit,
-      };
-      return { ...query, ...this.filter };
-    },
-  },
-  mounted() {
-    this.filter = this.$refs.genericFilter.getFilter();
-    this.fetch();
-  },
   methods: {
-    async fetch() {
-      this.loading = true;
-      try {
-        const response = await this.repository.all(this.queryFilter);
-        this.items = response.data;
-        this.meta = response.meta;
-      } catch (e) {
-        this.$message.error(e.message);
-      }
-      this.loading = false;
-    },
-
-    handleSizeChange(val) {
-      this.listQueryService.updateListQuery({ meta: { limit: val } });
-      this.meta.pagination.per_page = val;
-      this.fetch();
-    },
-    handleCurrentChange(val) {
-      this.listQueryService.updateListQuery({ meta: { page: val } });
-      this.meta.pagination.current_page = val;
-      this.fetch();
-    },
-    handleFilterChange(val) {
-      this.filter = val;
-      this.meta.pagination.current_page = 1;
-      this.fetch();
-    },
-    handleApplyFilter() {
-      this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange(this.filterConvertor.applyFilter(this.search));
-    },
-    handleResetFilter() {
-      console.log(this.search);
-      for (const column in this.search) {
-        if (this.search[column].position === "top") {
-          this.search[column] = Object.assign(this.search[column], {
-            value: "",
-          });
-        } else {
-          this.search[column] = Object.assign(this.search[column], {
-            operator: "",
-            value: "",
-          });
-        }
-      }
-      this.listQueryService.updateListQuery({ search: this.search });
-      this.handleFilterChange({});
-    },
-  },
+    sortChange(data) {
+      this.$emit('sort:change', data);
+    }
+  }
 };
 </script>
-
-<style scoped></style>

package/src/filters-top.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    name: 'first_name,last_name,email,phone,mobile,position,street,city,state,second_email,department',
+    label: 'Search',
+    type: 'string',
+    operator: 'like_fields',
+  },
+]

package/src/filters.js

@@ -0,0 +1,64 @@
+export default [
+  {
+    name: 'title',
+    label: 'Title',
+    type: 'string',
+  },
+  {
+    name: 'first_name',
+    label: 'First Name',
+    type: 'string',
+  },
+  {
+    name: 'last_name',
+    label: 'Last Name',
+    type: 'string',
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    type: 'string',
+  },
+  {
+    name: 'phone',
+    label: 'Phone',
+    type: 'string',
+  },
+  {
+    name: 'mobile',
+    label: 'Mobile',
+    type: 'string',
+  },
+  {
+    name: 'position',
+    label: 'Position',
+    type: 'string',
+  },
+  {
+    name: 'street',
+    label: 'Street',
+    type: 'string',
+  },
+  {
+    name: 'zip_code',
+    label: 'Zip Code',
+    type: 'string',
+  },
+  {
+    name: 'city',
+    label: 'City',
+    type: 'string',
+  },
+  {
+    name: 'state',
+    label: 'State',
+    type: 'string',
+  },
+
+  {
+    name: 'created_at',
+    label: 'Created at',
+    type: 'date',
+    operator: 'between_date',
+  },
+];

package/src/lang/en.js

@@ -0,0 +1,167 @@
+export default {
+  common: {
+    back: 'Back',
+    return: 'Return',
+  },
+  route: {
+    dashboard: 'Dashboard',
+    introduction: 'Introduction',
+    documentation: 'Documentation',
+    guide: 'Guide',
+    permission: 'Permission',
+    pagePermission: 'Page Permission',
+    directivePermission: 'Directive Permission',
+    icons: 'Icons',
+    components: 'Components',
+    componentIndex: 'Introduction',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'JSON Editor',
+    dndList: 'Dnd List',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Avatar Upload',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Mixin',
+    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag Kanban',
+    charts: 'Charts',
+    keyboardChart: 'Keyboard Chart',
+    lineChart: 'Line Chart',
+    mixChart: 'Mix Chart',
+    example: 'Example',
+    nested: 'Nested Routes',
+    menu1: 'Menu 1',
+    'menu1-1': 'Menu 1-1',
+    'menu1-2': 'Menu 1-2',
+    'menu1-2-1': 'Menu 1-2-1',
+    'menu1-2-2': 'Menu 1-2-2',
+    'menu1-3': 'Menu 1-3',
+    menu2: 'Menu 2',
+    Table: 'Table',
+    dynamicTable: 'Dynamic Table',
+    dragTable: 'Drag Table',
+    inlineEditTable: 'Inline Edit',
+    complexTable: 'Complex Table',
+    treeTable: 'Tree Table',
+    customTreeTable: 'Custom TreeTable',
+    tab: 'Tab',
+    form: 'Form',
+    createArticle: 'Create Article',
+    editArticle: 'Edit Article',
+    articleList: 'Article List',
+    errorPages: 'Error Pages',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Error Log',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    uploadExcel: 'Upload Excel',
+    zip: 'Zip',
+    exportZip: 'Export Zip',
+    theme: 'Theme',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n',
+    externalLink: 'External Link',
+  },
+  navbar: {
+    logOut: 'Log Out',
+    dashboard: 'Dashboard',
+    github: 'Github',
+    screenfull: 'Screenfull',
+    theme: 'Theme',
+    size: 'Global Size',
+  },
+  login: {
+    title: 'Laravel Vue Admin',
+    logIn: 'Log in',
+    username: 'Username',
+    email: 'Email',
+    password: 'Password',
+    any: 'any',
+    thirdparty: 'Or connect with',
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !',
+  },
+  documentation: {
+    documentation: 'Documentation',
+    github: 'Github Repository',
+    laravel: 'Laravel',
+  },
+  permission: {
+    roles: 'Your roles',
+    switchRoles: 'Switch roles',
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    pageDescription: 'This place is accessible for admin only. Switching to non-admin role will redirect to 404 page',
+  },
+  guide: {
+    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
+    button: 'Show Guide',
+  },
+  components: {
+    documentation: 'Documentation',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'When the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'The default order',
+    dragTips2: 'The after dragging order',
+    title: 'Title',
+    importance: 'Imp',
+    type: 'Type',
+    remark: 'Remark',
+    search: 'Search',
+    add: 'Add',
+    export: 'Export',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Date',
+    author: 'Author',
+    readings: 'Readings',
+    status: 'Status',
+    actions: 'Actions',
+    edit: 'Edit',
+    publish: 'Publish',
+    draft: 'Draft',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction',
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export Selected Items',
+    placeholder: 'Please enter the file name(default excel-list)',
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name(default file)',
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading pdf.',
+  },
+  theme: {
+    change: 'Change Theme',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.',
+  },
+  tagsView: {
+    refresh: 'Refresh',
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All',
+  },
+};

package/src/lang/index.js

@@ -0,0 +1,35 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import elementEnLocale from 'element-ui/lib/locale/lang/en'; // element-ui lang
+import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN';// element-ui lang
+import elementViLocale from 'element-ui/lib/locale/lang/vi';// element-ui lang
+import enLocale from './en';
+import zhLocale from './zh';
+import viLocale from './vi';
+
+Vue.use(VueI18n);
+
+const messages = {
+  en: {
+    ...enLocale,
+    ...elementEnLocale,
+  },
+  zh: {
+    ...zhLocale,
+    ...elementZhLocale,
+  },
+  vi: {
+    ...viLocale,
+    ...elementViLocale,
+  },
+};
+
+const i18n = new VueI18n({
+  // set locale
+  // options: en | zh | vi
+  locale: 'en',
+  // set locale messages
+  messages,
+});
+
+export default i18n;

package/src/lang/vi.js

@@ -0,0 +1,166 @@
+export default {
+  common: {
+    back: 'Quay lại',
+    return: 'Trở về',
+  },
+  route: {
+    dashboard: 'Dashboard',
+    introduction: 'Giới thiệu',
+    documentation: 'Tài liệu',
+    guide: 'Hướng dẫn',
+    permission: 'Quyền truy cập',
+    pagePermission: 'Trang giới hạn truy cập',
+    directivePermission: 'Thuộc tính truy cập',
+    icons: 'Ký hiệu',
+    components: 'Thành phần',
+    componentIndex: 'Giới thiệu',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'Soạn thảo JSON',
+    dndList: 'Danh sách Dnd',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Tải hình đại diện',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Mixin',
+    backToTop: 'BackToTop',
+    dragDialog: 'Drag Dialog',
+    dragSelect: 'Drag Select',
+    dragKanban: 'Drag Kanban',
+    charts: 'Biểu đồ',
+    keyboardChart: 'Biểu đồ bàn phím',
+    lineChart: 'Biểu đồ đường',
+    mixChart: 'Biểu đồ đa dạng',
+    example: 'Ví dụ',
+    nested: 'Danh mục con',
+    menu1: 'Danh mục 1',
+    'menu1-1': 'Danh mục 1-1',
+    'menu1-2': 'Danh mục 1-2',
+    'menu1-2-1': 'Danh mục 1-2-1',
+    'menu1-2-2': 'Danh mục 1-2-2',
+    'menu1-3': 'Danh mục 1-3',
+    menu2: 'Danh mục 2',
+    Table: 'Bảng',
+    dynamicTable: 'Bảng động',
+    dragTable: 'Bảng kéo thả',
+    inlineEditTable: 'Chỉnh sửa trực tiếp',
+    complexTable: 'Bảng phức tạp',
+    treeTable: 'Bảng dạng cây',
+    customTreeTable: 'Bảng dạng cây tùy biến',
+    tab: 'Tab',
+    form: 'Form',
+    createArticle: 'Viết bài',
+    editArticle: 'Chỉnh sửa',
+    articleList: 'Danh sách',
+    errorPages: 'Trang lỗi',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Lỗi',
+    excel: 'Excel',
+    exportExcel: 'Export Excel',
+    selectExcel: 'Export Selected',
+    uploadExcel: 'Upload Excel',
+    zip: 'Zip',
+    exportZip: 'Export Zip',
+    theme: 'Theme',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n',
+    externalLink: 'Liên kết ngoài',
+  },
+  navbar: {
+    logOut: 'Đăng xuất',
+    dashboard: 'Dashboard',
+    github: 'Github',
+    screenfull: 'Toàn màn hình',
+    theme: 'Theme',
+    size: 'Global Size',
+  },
+  login: {
+    title: 'Đăng nhập',
+    logIn: 'Đăng nhập',
+    username: 'Username',
+    email: 'Email',
+    password: 'Mật khẩu',
+    any: 'any',
+    thirdparty: 'Hoặc đăng nhập với',
+    thirdpartyTips: 'Không thể giả lập, xi vui lòng áp dụng tùy theo tình huống nghiệp vụ của bạn! ! !',
+  },
+  documentation: {
+    documentation: 'Tài liệu',
+    github: 'Github Repository',
+    laravel: 'Laravel',
+  },
+  permission: {
+    roles: 'Nhóm của bạn',
+    switchRoles: 'Đổi nhóm',
+    tips: 'Trong vài trường hợp sẽ không thích hợp để dùng v-permission, như là thành phần Tab hay el-table-column và các trường hợp render DOM không đồng bộ, khi đó chỉ có thể xử lý bằng tay với v-if.',
+  },
+  guide: {
+    description: 'Trang hướng dẫn sẽ có ích cho những người mới vào website lần đầu. Bạn có thể giới thiệu sơ lược các chức năng của website. Kiểm tra demo',
+    button: 'Hiện hướng dẫn',
+  },
+  components: {
+    documentation: 'Tài liệu',
+    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
+    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
+    stickyTips: 'When the page is scrolled to the preset position will be sticky on the top.',
+    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
+    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+  },
+  table: {
+    dynamicTips1: 'Fixed header, sorted by header order',
+    dynamicTips2: 'Not fixed header, sorted by click order',
+    dragTips1: 'The default order',
+    dragTips2: 'The after dragging order',
+    title: 'Tiêu đề',
+    importance: 'IMP',
+    type: 'Thể loại',
+    remark: 'Remark',
+    search: 'Tìm kiếm',
+    add: 'Thêm',
+    export: 'Export',
+    reviewer: 'reviewer',
+    id: 'ID',
+    date: 'Ngày',
+    author: 'Tác giả',
+    readings: 'Số lần đọc',
+    status: 'Status',
+    actions: 'Actions',
+    edit: 'Edit',
+    publish: 'Publish',
+    draft: 'Draft',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+  },
+  errorLog: {
+    tips: 'Please click the bug icon in the upper right corner',
+    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
+    documentation: 'Document introduction',
+  },
+  excel: {
+    export: 'Export',
+    selectedExport: 'Export Selected Items',
+    placeholder: 'Please enter the file name(default excel-list)',
+  },
+  zip: {
+    export: 'Export',
+    placeholder: 'Please enter the file name(default file)',
+  },
+  pdf: {
+    tips: 'Here we use window.print() to implement the feature of downloading pdf.',
+  },
+  theme: {
+    change: 'Change Theme',
+    documentation: 'Theme documentation',
+    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.',
+  },
+  tagsView: {
+    refresh: 'Refresh',
+    close: 'Close',
+    closeOthers: 'Close Others',
+    closeAll: 'Close All',
+  },
+};