update

src/store/api/exportConfig.js

@@ -17,6 +17,10 @@ export const ExportConfigStore = defineStore('exportConfig', () => {
     const res = await axios.$get(`${url}/${payload}`)
     return res
   }
+  const mission = async (payload) => {
+    const res = await axios.$post(`/asyncExport`, payload)
+    return res
+  }
   const query = async ({ skip = 0, limit = undefined, ...info } = {}) => {
     let cond = {}
     if (skip) cond.skip = skip
@@ -34,6 +38,7 @@ export const ExportConfigStore = defineStore('exportConfig', () => {
     update,
     dict,
     fetch,
+    mission,
     query,
     reExecute
   }

src/views/export/index.vue

@@ -1,13 +1,50 @@
 <template>
   <div class="main animate__animated animate__backInRight" v-loading="loading">
     <custom-search-bar :fields="fields.filter((f) => f.isSearch)" v-model="searchForm" @search="search" @reset="toReset"> </custom-search-bar>
-    <custom-table :data="list" :fields="fields" @query="search" :total="total" :opera="opera" @reExecute="reExecute" @download="download" height="75vh"> </custom-table>
+    <custom-button-bar :fields="btnField" @export="toExport"></custom-button-bar>
+    <custom-table :data="list" :fields="fields" @query="search" :total="total" :opera="opera" @reExecute="reExecute" @download="download" height="70vh"> </custom-table>
+    <el-dialog v-model="dialogShow" title="导出数据">
+      <el-steps :active="step" align-center style="margin: 10px 0">
+        <el-step title="选择数据类型" />
+        <el-step title="选择具体内容" />
+      </el-steps>
+      <template v-if="step === 1">
+        <el-radio-group v-model="selectTable" @change="toSelectTable">
+          <el-row>
+            <el-col :span="6" v-for="i in tableList">
+              <el-radio :value="i.table">{{ i.label }}</el-radio>
+            </el-col>
+          </el-row>
+        </el-radio-group>
+      </template>
+      <template v-else-if="step === 2">
+        <el-row>
+          <el-col :span="24" style="margin: 5px 0">
+            <el-button type="primary" @click="backStep">上一步</el-button>
+          </el-col>
+          <el-col :span="24" style="margin: 5px 0">
+            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAllProps">全选</el-checkbox>
+          </el-col>
+          <el-col :span="24" style="margin: 5px 0">
+            <el-checkbox-group v-model="propsCheck" @change="selectProps">
+              <el-checkbox v-for="i in propList" :label="i.column" :key="i.model">{{ i.zh }}</el-checkbox>
+            </el-checkbox-group>
+          </el-col>
+          <el-col :span="24" style="text-align: center; margin-top: 10px">
+            <el-button type="primary" size="mini" @click="toFile()">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ExportConfigStore } from '@/store/api/exportConfig'
 import { get } from 'lodash-es'
 import { onMounted } from 'vue'
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
 const { t } = useI18n()
 const store = ExportConfigStore()
 const dialogShow = ref(false)
@@ -17,7 +54,56 @@ const searchForm = ref({})
 const list = ref([])
 let skip = 0
 let limit = inject('limit')
-const tabs = ref('1')
+const btnField = ref([{ label: '导出数据', method: 'export' }])
+
+const tableList = ref([])
+const step = ref(1)
+const selectTable = ref()
+const toExport = async () => {
+  if (tableList.value.length <= 0) {
+    const result = await store.dict()
+    if ($checkRes(result)) {
+      const tl = get(result, 'data.tableList', [])
+      tableList.value = tl
+    }
+  }
+  step.value = 1
+  dialogShow.value = true
+}
+const propList = ref([])
+const toSelectTable = async (data) => {
+  const result = await store.fetch(data)
+  if ($checkRes(result)) {
+    const config = get(result, `data.config`, [])
+    propList.value = config
+  }
+  step.value = 2
+}
+const propsCheck = ref([])
+const checkAll = ref(false)
+const isIndeterminate = ref(false)
+const selectProps = (value) => {
+  propsCheck.value = value
+  let checkedCount = value.length
+  const isCheckAll = checkedCount === propList.value.length
+  checkAll.value = isCheckAll
+  if (value.length <= 0) isIndeterminate.value = false
+  else if (isCheckAll) isIndeterminate.value = false
+  else isIndeterminate.value = true
+}
+// 全选
+const selectAllProps = (val) => {
+  if (val) {
+    propsCheck.value = propList.value.map((i) => i.column)
+  } else {
+    propsCheck.value = []
+  }
+  isIndeterminate.value = false
+}
+const backStep = () => {
+  step.value = 1
+  selectTable.value = undefined
+}
 onMounted(async () => {
   loading.value = true
   await search({ skip, limit })
@@ -34,6 +120,31 @@ const search = async (query = { skip, limit }) => {
   }
 }
 
+// 导出数据
+const toFile = async () => {
+  if (propsCheck.value.length > 0) {
+    const reqData = { table: selectTable.value, config: propsCheck.value, user: user.value.id }
+    const res = await store.mission(reqData)
+    if ($checkRes(res)) {
+      ElMessage({ type: `success`, message: `数据正在导出,请进入 导出管理 中查看` })
+    }
+    toClose()
+  } else {
+    ElMessage({ type: `warning`, message: `请选择导出信息字段` })
+  }
+}
+const toClose = () => {
+  step.value = 1
+  propsCheck.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+  dialogShow.value = false
+  propList.value = []
+  dialogShow.value = false
+  selectTable.value = undefined
+  search({ skip, limit })
+}
+
 const total = ref(0)
 const fields = [
   { label: t('pages.export.user'), model: 'user_name' }, // , isSearch: true