export excel 14041207

package.json

@@ -3,9 +3,9 @@
   "version": "5.0.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "node ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
-    "build": "vue-cli-service build",
+    "build": "node ./node_modules/@vue/cli-service/bin/vue-cli-service.js build",
-    "lint": "vue-cli-service lint"
+    "lint": "node ./node_modules/@vue/cli-service/bin/vue-cli-service.js lint"
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.2",
@@ -13,14 +13,13 @@
     "ag-grid-vue": "^21.0.1",
     "algoliasearch": "^3.33.0",
     "ant-design-vue": "^1.7.2",
-    "apexcharts": "^3.6.12",
+    "apexcharts": "^3.54.1",
     "auth0-js": "^9.10.4",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.19.0",
     "chart.js": "^2.8.0",
     "core-js": "2.6.5",
     "echarts": "^4.2.1",
-    "eslint": "^7.14.0",
     "eslint-loader": "^2.2.1",
     "file-saver": "2.0.1",
     "firebase": "^7.13.2",
@@ -36,7 +35,7 @@
     "prismjs": "^1.16.0",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.10",
-    "vue-acl": "4.0.7",
+    "vue-acl": "^4.1.10",
     "vue-apexcharts": "^1.3.5",
     "vue-awesome-swiper": "^3.1.3",
     "vue-backtotop": "^1.6.1",
@@ -53,7 +52,6 @@
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-persian-datetime-picker": "^2.10.2",
     "vue-prism-component": "^1.1.1",
-    "vue-property-decorator": "^8.1.1",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.6",
     "vue-select": "^3.1.0",
@@ -77,11 +75,13 @@
     "@vue/cli-plugin-babel": "^3.7.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
     "@vue/cli-service": "^3.7.0",
-    "node-sass": "^4.12.0",
+    "eslint": "^6.8.0",
+    "node-sass": "^4.14.1",
     "purgecss": "^1.3.0",
     "sass-loader": "^7.1.0",
     "script-loader": "0.7.2",
     "tailwindcss": "^1.0.1",
+    "vue-property-decorator": "^7.2.0",
     "vue-template-compiler": "^2.6.10"
   },
   "description": "## Project setup ``` npm install ```",

src/components/new-x-table/XTable.vue

@@ -22,6 +22,9 @@
                   </div>
                 </div>
               </AButton>
+              <AButton v-if="showExport" class="mr-2" type="primary" @click="$emit('export')">
+                {{ exportLabel }}
+              </AButton>
             </div>
             <div class="filter-backdrop p-4" v-if="visibleDownload">
               <feather-icon icon="XIcon" @click="toggleVisibleDownload"
@@ -200,6 +203,14 @@ export default {
   props: {
     model: {
       type: XTbl.default
+    },
+    showExport: {
+      type: Boolean,
+      default: false
+    },
+    exportLabel: {
+      type: String,
+      default: 'خروجی اکسل'
     }
   },
   data() {

src/views/personel/Personel.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <x-table ref="personelTbl" class="mt-4"
-             :model="cols">
+             :model="cols"
+             :show-export="true"
+             @export="exportExcel">
       <template slot="operator" slot-scope="text,record">
         <div class="flex">
           <a-button class="ml-2" type="primary" @click="showPersonal(text.record)">
@@ -1241,6 +1243,8 @@
 import cols from './personelTbl';
 import XTable from "@/components/new-x-table/XTable";
 import axios from "@/axios";
+import { export_json_to_excel } from "@/vendor/Export2Excel";
+import moment from 'moment-jalaali';
 /*import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
 import themeConfig from '@/../themeConfig.js'
 import SingleUploadInput from '@/components/SingleUploadInput'*/
@@ -1334,7 +1338,102 @@ export default {
     }
   },
   methods: {
+    formatJdate(val) {
+      if (val) {
+        return moment(val).format('jYYYY/jMM/jDD');
+      }
+      return '';
+    },
+    async exportExcel() {
+      const table = this.$refs.personelTbl;
+      if (!table || !table.model) {
+        this.$message && this.$message.warning('جدول در دسترس نیست.');
+        return;
+      }
 
+      const query = table.query || {};
+      const total = query.total || 0;
+      if (total === 0) {
+        this.$message && this.$message.warning('رکوردی برای خروجی اکسل وجود ندارد.');
+        return;
+      }
+
+      const visibleCols = table.visibleCols || [];
+      const filters = (query.filters || []).filter(
+        (item) => item.value || ['null', 'nn'].includes(item.op) || item.value === 0
+      );
+      const body = {
+        ...query,
+        limit: total,
+        page: 1,
+        filters,
+        select: visibleCols.map((i) => i.key),
+        titles: visibleCols.reduce((acc, i) => {
+          acc[i.key] = i.title;
+          return acc;
+        }, {}),
+        report_title: table.model.title
+      };
+
+      let rows = [];
+      try {
+        const { data } = await axios.post(table.model.url, body);
+        rows = data.rows || [];
+      } catch (e) {
+        this.$message && this.$message.error('خطا در دریافت اطلاعات.');
+        return;
+      }
+
+      if (!rows.length) {
+        this.$message && this.$message.warning('رکوردی برای خروجی اکسل وجود ندارد.');
+        return;
+      }
+
+      const header = [
+        'نام و نام خانوادگی',
+        'نام پدر',
+        'شماره شناسنامه',
+        'کد ملی',
+        'تاریخ تولد',
+        'محل تولد',
+        'محل صدور',
+        'وضعیت تاهل',
+        'تعداد فرزندان',
+        'وضعیت نظام وظیفه',
+        'تحصیلات',
+        'تاریخ ثبت نام',
+        'شماره همراه',
+        'آدرس'
+      ];
+
+      const data = rows.map((r) => {
+        const p = r.proposal || {};
+        const birthDate = p.birth_date || r.birth_date;
+        const createdAt = r.created_at;
+        return [
+          r.name || '',
+          p.father_name || '',
+          p.iden_id || '',
+          r.ncode || '',
+          this.formatJdate(birthDate),
+          p.birth_place || '',
+          p.iden_place || '',
+          p.marriage_sts_str || '',
+          (p.count_child !== undefined && p.count_child !== null ? p.count_child : ''),
+          p.military_sts_str || '',
+          r.last_education_str || '',
+          this.formatJdate(createdAt),
+          p.mobile || '',
+          p.address || ''
+        ];
+      });
+
+      export_json_to_excel({
+        header,
+        data,
+        filename: 'personnel'
+      });
+    },
     async deletePersonnel(id) {
       try {
         this.showLoading = true