|
@@ -2,7 +2,7 @@
|
|
|
* @Author: fxs bjnsfxs@163.com
|
|
|
* @Date: 2024-08-20 18:16:18
|
|
|
* @LastEditors: fxs bjnsfxs@163.com
|
|
|
- * @LastEditTime: 2024-12-02
|
|
|
+ * @LastEditTime: 2024-12-03
|
|
|
* @Description:
|
|
|
*
|
|
|
-->
|
|
@@ -19,10 +19,10 @@ import { useRequest } from '@/hooks/useRequest.ts'
|
|
|
import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
|
|
|
|
|
|
import TableFilterForm from '../form/TableFilterForm/TableFilterForm.vue'
|
|
|
-import FilterPopover from '../toolsBtn/FilterPopover.vue'
|
|
|
-import RefreshBtn from '../toolsBtn/RefreshBtn.vue'
|
|
|
import TableFieldText from './TableFieldText.vue'
|
|
|
import axiosInstance from '@/utils/axios/axiosInstance.ts'
|
|
|
+import TableTools from './TableTools.vue'
|
|
|
+
|
|
|
type TableFilterFormRef = InstanceType<typeof TableFilterForm>
|
|
|
|
|
|
// 查询表单的Ref
|
|
@@ -33,20 +33,12 @@ const { analysisResCode } = useRequest()
|
|
|
// 节流的延迟时间
|
|
|
const throttleTime = 500
|
|
|
|
|
|
-// 表格工具图标大小
|
|
|
-const toolsIconSize = ref(25)
|
|
|
-
|
|
|
const props = withDefaults(defineProps<PropsParams>(), {
|
|
|
needRowindex: true,
|
|
|
needAverage: false,
|
|
|
- needLeftTools: false,
|
|
|
- needRightTools: false,
|
|
|
openFilterQuery: false,
|
|
|
openPageQuery: true,
|
|
|
openRemoteQuery: true,
|
|
|
- needUpload: false,
|
|
|
- needDownLoad: false,
|
|
|
-
|
|
|
loadingState: false
|
|
|
})
|
|
|
|
|
@@ -473,7 +465,6 @@ onMounted(() => {
|
|
|
<template>
|
|
|
<div class="tableContent">
|
|
|
<div class="filterBox" v-if="openFilterQuery && queryInfo">
|
|
|
- <!-- slot -->
|
|
|
<div class="filterHeader">
|
|
|
<span>查询条件</span>
|
|
|
</div>
|
|
@@ -488,48 +479,13 @@ onMounted(() => {
|
|
|
</div>
|
|
|
|
|
|
<div class="tableTools">
|
|
|
- <div class="leftTools">
|
|
|
- <div class="leftToolsGroup" v-if="needLeftTools" style="display: flex">
|
|
|
- <el-button class="leftToolBtn" color="#165dff" @click="emits('addNewItem')">
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- class="leftToolBtn"
|
|
|
- color="#626aef"
|
|
|
- @click="emits('upload', outGetTableData())"
|
|
|
- v-if="needUpload"
|
|
|
- >
|
|
|
- <el-icon>
|
|
|
- <Upload />
|
|
|
- </el-icon>
|
|
|
- 上传
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightTools" v-if="needRightTools">
|
|
|
- <el-button
|
|
|
- v-if="needDownload"
|
|
|
- color="#f0f1f3"
|
|
|
- size="default"
|
|
|
- class="rightToolsItem"
|
|
|
- @click="downLoadTable"
|
|
|
- >
|
|
|
- <el-icon>
|
|
|
- <Download />
|
|
|
- </el-icon>
|
|
|
- 下载
|
|
|
- </el-button>
|
|
|
-
|
|
|
- <RefreshBtn @refresh-table="throttleGetData" :icon-size="toolsIconSize"></RefreshBtn>
|
|
|
-
|
|
|
- <FilterPopover
|
|
|
- :table-fields-info="tableFieldsInfo"
|
|
|
- :icon-size="toolsIconSize"
|
|
|
- ></FilterPopover>
|
|
|
- </div>
|
|
|
+ <TableTools
|
|
|
+ :table-fields-info="props.tableFieldsInfo"
|
|
|
+ :tools-config="props.tools"
|
|
|
+ @add="emits('addNewItem')"
|
|
|
+ @download="downLoadTable"
|
|
|
+ @refresh="throttleGetData"
|
|
|
+ ></TableTools>
|
|
|
</div>
|
|
|
|
|
|
<div class="tableBox">
|
|
@@ -645,8 +601,6 @@ onMounted(() => {
|
|
|
.tableContent {
|
|
|
margin: 10px auto 20px;
|
|
|
width: 100%;
|
|
|
-
|
|
|
- /* height: 100%; */
|
|
|
box-shadow:
|
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.02),
|
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.02);
|
|
@@ -678,8 +632,6 @@ onMounted(() => {
|
|
|
color: black;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
- /* background-color: lightblue; */
|
|
|
- /* margin-bottom: 1%; */
|
|
|
}
|
|
|
|
|
|
.filterBody {
|
|
@@ -732,13 +684,6 @@ onMounted(() => {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
-.tableTools {
|
|
|
- width: 98%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 1% auto 0;
|
|
|
-}
|
|
|
-
|
|
|
.leftTools,
|
|
|
.rightTools {
|
|
|
width: 10%;
|
|
@@ -753,20 +698,14 @@ onMounted(() => {
|
|
|
|
|
|
.tableBox {
|
|
|
width: 98%;
|
|
|
- /* height: 98%; */
|
|
|
margin: 5px auto;
|
|
|
box-shadow:
|
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.02),
|
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.02);
|
|
|
- /* margin-top: 0.5%;
|
|
|
- margin-bottom: 2%; */
|
|
|
}
|
|
|
|
|
|
.tableBody {
|
|
|
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
|
- /* box-shadow:
|
|
|
- -4px -4px 8px 1px rgba(0, 0, 0, 0.02),
|
|
|
- -4px -4px 3px 1px rgba(0, 0, 0, 0.02); */
|
|
|
}
|
|
|
|
|
|
.userTablePaginationBox {
|