feature:表格导出支持配置limit order和where条件 (#1665)

* feature:导出功能可携带条件

* feature:组件增加导出入参

* 带条件导出Excel功能

web/src/components/exportExcel/exportExcel.vue

@@ -11,6 +11,10 @@ const props = defineProps({
   templateId: {
     type: String,
     required: true
+  },
+  condition: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -22,7 +26,11 @@ const exportExcelFunc = async() => {
     return
   }
   const baseUrl = import.meta.env.VITE_BASE_API
-  const url = `${baseUrl}/sysExportTemplate/exportExcel?templateID=${props.templateId}`
+  const params = Object.entries(props.condition)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    .join('&')
+  const url = `${baseUrl}/sysExportTemplate/exportExcel?templateID=${props.templateId}${params ? '&' + params : ''}`
+
   window.open(url, '_blank')
 }
 </script>

web/src/view/superAdmin/api/api.vue

@@ -29,6 +29,7 @@
             v-model="searchInfo.method"
             clearable
             placeholder="请选择"
+            class="w-40"
           >
             <el-option
               v-for="item in methodOptions"
@@ -111,6 +112,11 @@
             >刷新缓存</el-button>
           </template>
         </el-popover>
+
+        <ExportExcel
+          template-id="apis"
+          :condition="searchInfo"
+        />
       </div>
       <el-table
         :data="tableData"
@@ -287,6 +293,7 @@ import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { VideoCameraFilled } from '@element-plus/icons-vue'
 import { toDoc } from '@/utils/doc'
+import ExportExcel from '@/components/exportExcel/exportExcel.vue'
 
 defineOptions({
   name: 'Api',

web/src/view/systemTools/exportTemplate/exportTemplate.vue

@@ -166,15 +166,6 @@
           min-width="120"
         >
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              class="table-button"
-              @click="getDetails(scope.row)"
-            >
-              <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>
-              查看详情
-            </el-button>
             <el-button
               type="primary"
               link
@@ -254,11 +245,70 @@
             <el-input
               v-model="formData.templateInfo"
               type="textarea"
-              :rows="16"
+              :rows="12"
               :clearable="true"
               :placeholder="templatePlaceholder"
             />
           </el-form-item>
+          <el-form-item
+            label="最大导出条数:"
+          >
+            <el-input-number
+              v-model="formData.limit"
+              :step="1"
+              :step-strictly="true"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item
+            label="排序条件:"
+          >
+            <el-input
+              v-model="formData.order"
+              placeholder="例:id desc"
+            />
+          </el-form-item>
+          <el-form-item
+            label="导出条件:"
+          >
+            <div
+              v-for="(condition,key) in formData.conditions"
+              :key="key"
+              class="flex gap-4 w-full mb-2"
+            >
+              <el-input
+                v-model="condition.from"
+                placeholder="需要从查询条件取的json key"
+              />
+              <el-input
+                v-model="condition.column"
+                placeholder="表对应的column"
+              />
+              <el-select
+                v-model="condition.operator"
+                placeholder="请选择查询条件"
+              >
+                <el-option
+                  v-for="item in typeSearchOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-button
+                type="danger"
+                icon="delete"
+                @click="() => formData.conditions.splice(key, 1)"
+              >删除</el-button>
+            </div>
+            <div class="flex justify-end w-full">
+              <el-button
+                type="primary"
+                icon="plus"
+                @click="addCondition"
+              >添加条件</el-button>
+            </div>
+          </el-form-item>
         </el-form>
       </el-scrollbar>
       <template #footer>
@@ -271,35 +321,6 @@
         </div>
       </template>
     </el-dialog>
-
-    <el-dialog
-      v-model="detailShow"
-      style="width: 800px"
-      lock-scroll
-      :before-close="closeDetailShow"
-      title="查看详情"
-      destroy-on-close
-    >
-      <el-scrollbar height="550px">
-        <el-descriptions
-          column="1"
-          border
-        >
-          <el-descriptions-item label="模板名称">
-            {{ formData.name }}
-          </el-descriptions-item>
-          <el-descriptions-item label="表名称">
-            {{ formData.tableName }}
-          </el-descriptions-item>
-          <el-descriptions-item label="模板标识">
-            {{ formData.templateID }}
-          </el-descriptions-item>
-          <el-descriptions-item label="模板信息">
-            {{ formData.templateInfo }}
-          </el-descriptions-item>
-        </el-descriptions>
-      </el-scrollbar>
-    </el-dialog>
   </div>
 </template>
 
@@ -329,7 +350,8 @@ const templatePlaceholder = `模板信息格式：key标识数据库column列名
   "table_name2":"第二列",
   "table_name3":"第三列",
   "table_name4":"第四列",
-}`
+}
+`
 
 // 自动化生成的字典（可能为空）以及字段
 const formData = ref({
@@ -337,8 +359,50 @@ const formData = ref({
   tableName: '',
   templateID: '',
   templateInfo: '',
+  limit: 0,
+  order: '',
+  conditions: [],
 })
 
+const typeSearchOptions = ref([
+  {
+    label: '=',
+    value: '='
+  },
+  {
+    label: '<>',
+    value: '<>'
+  },
+  {
+    label: '>',
+    value: '>'
+  },
+  {
+    label: '<',
+    value: '<'
+  },
+  {
+    label: 'LIKE',
+    value: 'LIKE'
+  },
+  {
+    label: 'BETWEEN',
+    value: 'BETWEEN'
+  },
+  {
+    label: 'NOT BETWEEN',
+    value: 'NOT BETWEEN'
+  }
+])
+
+const addCondition = () => {
+  formData.value.conditions.push({
+    from: '',
+    column: '',
+    operator: ''
+  })
+}
+
 // 验证规则
 const rule = reactive({
   name: [{
@@ -521,6 +585,9 @@ const updateSysExportTemplateFunc = async(row) => {
   type.value = 'update'
   if (res.code === 0) {
     formData.value = res.data.resysExportTemplate
+    if (!formData.value.conditions) {
+      formData.value.conditions = []
+    }
     dialogFormVisible.value = true
   }
 }
@@ -543,35 +610,6 @@ const deleteSysExportTemplateFunc = async(row) => {
 // 弹窗控制标记
 const dialogFormVisible = ref(false)
 
-// 查看详情控制标记
-const detailShow = ref(false)
-
-// 打开详情弹窗
-const openDetailShow = () => {
-  detailShow.value = true
-}
-
-// 打开详情
-const getDetails = async(row) => {
-  // 打开弹窗
-  const res = await findSysExportTemplate({ ID: row.ID })
-  if (res.code === 0) {
-    formData.value = res.data.resysExportTemplate
-    openDetailShow()
-  }
-}
-
-// 关闭详情弹窗
-const closeDetailShow = () => {
-  detailShow.value = false
-  formData.value = {
-    name: '',
-    tableName: '',
-    templateID: '',
-    templateInfo: '',
-  }
-}
-
 // 打开弹窗
 const openDialog = () => {
   type.value = 'create'
@@ -586,6 +624,9 @@ const closeDialog = () => {
     tableName: '',
     templateID: '',
     templateInfo: '',
+    limit: 0,
+    order: '',
+    conditions: [],
   }
 }
 // 弹窗确定
@@ -601,18 +642,30 @@ const enterDialog = async() => {
     return
   }
 
+  const reqData = JSON.parse(JSON.stringify(formData.value))
+  for (let i = 0; i < reqData.conditions.length; i++) {
+    if (!reqData.conditions[i].from || !reqData.conditions[i].column || !reqData.conditions[i].operator) {
+      ElMessage({
+        type: 'error',
+        message: '请填写完整的导出条件'
+      })
+      return
+    }
+    reqData.conditions[i].templateID = reqData.templateID
+  }
+
   elFormRef.value?.validate(async(valid) => {
     if (!valid) return
     let res
     switch (type.value) {
       case 'create':
-        res = await createSysExportTemplate(formData.value)
+        res = await createSysExportTemplate(reqData)
         break
       case 'update':
-        res = await updateSysExportTemplate(formData.value)
+        res = await updateSysExportTemplate(reqData)
         break
       default:
-        res = await createSysExportTemplate(formData.value)
+        res = await createSysExportTemplate(reqData)
         break
     }
     if (res.code === 0) {