|
@@ -84,14 +84,15 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="ProTable">
|
|
<script setup lang="ts" name="ProTable">
|
|
-import { ref, provide, onMounted, unref, computed, reactive, PropType, watch, shallowRef } from "vue";
|
|
|
|
-import { ElTable } from 'element-plus';
|
|
|
|
|
|
+import { ref, provide, onMounted, unref, computed, reactive, PropType, watch, shallowRef } from 'vue';
|
|
|
|
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus';
|
|
import { useSelection } from '@/hooks/useSelection';
|
|
import { useSelection } from '@/hooks/useSelection';
|
|
import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
|
|
import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
|
|
import PaginationEl from './components/Pagination.vue';
|
|
import PaginationEl from './components/Pagination.vue';
|
|
import ColSetting from './components/ColSetting.vue';
|
|
import ColSetting from './components/ColSetting.vue';
|
|
import TableColumn from './components/TableColumn.vue';
|
|
import TableColumn from './components/TableColumn.vue';
|
|
import { handleProp } from '@/utils/tools';
|
|
import { handleProp } from '@/utils/tools';
|
|
|
|
+import { deleteCommon } from '@/api/auxiliary/advice';
|
|
|
|
|
|
// 接受父组件参数,配置默认值
|
|
// 接受父组件参数,配置默认值
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
@@ -203,9 +204,7 @@ const { selectionChange, selectedList, selectedListIds, isSelected } = useSelect
|
|
const clearSelection = () => tableRef.value!.clearSelection();
|
|
const clearSelection = () => tableRef.value!.clearSelection();
|
|
|
|
|
|
// 初始化表格数据 && 拖拽排序
|
|
// 初始化表格数据 && 拖拽排序
|
|
-onMounted(() => {
|
|
|
|
- getSelectColumns();
|
|
|
|
-});
|
|
|
|
|
|
+onMounted(() => {});
|
|
|
|
|
|
// 处理表格数据
|
|
// 处理表格数据
|
|
const processTableData = computed(() => {
|
|
const processTableData = computed(() => {
|
|
@@ -260,15 +259,11 @@ const searchColumns = computed(() => {
|
|
});
|
|
});
|
|
|
|
|
|
// 设置 搜索表单默认排序 && 搜索表单项的默认值
|
|
// 设置 搜索表单默认排序 && 搜索表单项的默认值
|
|
-searchColumns.value?.forEach((column, index) => {
|
|
|
|
- column.search!.order = column.search?.order ?? index + 2;
|
|
|
|
- const key = column.search?.key ?? handleProp(column.prop!);
|
|
|
|
- const defaultValue = column.search?.defaultValue;
|
|
|
|
-});
|
|
|
|
|
|
+searchColumns.value?.forEach((column, index) => {});
|
|
|
|
|
|
// 列设置 ==> 需要过滤掉不需要设置的列
|
|
// 列设置 ==> 需要过滤掉不需要设置的列
|
|
const colRef = ref();
|
|
const colRef = ref();
|
|
-const colSetting = tableColumns!.filter((item) => {
|
|
|
|
|
|
+const colSetting: any = tableColumns!.filter((item) => {
|
|
const { type, prop, isShow } = item;
|
|
const { type, prop, isShow } = item;
|
|
return !columnTypes.includes(type!) && prop !== 'operation' && isShow;
|
|
return !columnTypes.includes(type!) && prop !== 'operation' && isShow;
|
|
});
|
|
});
|
|
@@ -279,47 +274,50 @@ const onRefresh = () => {
|
|
clearSelection();
|
|
clearSelection();
|
|
emit('updateTable');
|
|
emit('updateTable');
|
|
};
|
|
};
|
|
-const filterColumns = ref([]);
|
|
|
|
-const filterColumnsProp = ref([]);
|
|
|
|
-// 获取需要显示的列
|
|
|
|
-const getSelectColumns = () => {
|
|
|
|
- const flatColumns = flatColumnsFunc(tableColumns);
|
|
|
|
- filterColumns.value = flatColumns.filter((item) => item.isShow && item.prop !== 'operation' && item.prop);
|
|
|
|
- filterColumnsProp.value = filterColumns.value.map((item) => item.prop);
|
|
|
|
-};
|
|
|
|
// 更新列设置
|
|
// 更新列设置
|
|
-const exportNewColumns = ref([]);
|
|
|
|
-const exportNewColumnsProp = ref([]);
|
|
|
|
const updateColSetting = (test: ColumnProps[]) => {
|
|
const updateColSetting = (test: ColumnProps[]) => {
|
|
// 平铺数组后获取isShow为true的对象
|
|
// 平铺数组后获取isShow为true的对象
|
|
- const flatColumns = flatColumnsFunc(test);
|
|
|
|
- exportNewColumns.value = flatColumns.filter((item) => item.isShow);
|
|
|
|
|
|
+ const flatColumnsArr = flatColumnsFunc(test);
|
|
|
|
+ const exportNewColumns = flatColumnsArr.filter((item) => item.isShow);
|
|
// 获取prop
|
|
// 获取prop
|
|
- const newColumnsProp = exportNewColumns.value.map((item) => item.prop);
|
|
|
|
-
|
|
|
|
- emit('updateColSetting', exportNewColumns.value, newColumnsProp);
|
|
|
|
|
|
+ const newColumnsProp = exportNewColumns.map((item) => item.prop);
|
|
|
|
+ emit('updateColSetting', exportNewColumns, newColumnsProp);
|
|
};
|
|
};
|
|
-watch(
|
|
|
|
- () => exportNewColumns.value,
|
|
|
|
- (val: any) => {
|
|
|
|
- console.log(val,'2121')
|
|
|
|
- if(val.length){
|
|
|
|
- exportNewColumnsProp.value = val.map((item: any) => item.prop);
|
|
|
|
- }else{
|
|
|
|
- exportNewColumns.value = flatColumnsFunc(colSetting);
|
|
|
|
- exportNewColumnsProp.value = exportNewColumns.value.map((item: any) => item.prop);
|
|
|
|
- }
|
|
|
|
- console.log(exportNewColumns.value, 'test');
|
|
|
|
- },
|
|
|
|
- { immediate: true,deep:true }
|
|
|
|
-);
|
|
|
|
// 导出当前页
|
|
// 导出当前页
|
|
const exportCurrent = () => {
|
|
const exportCurrent = () => {
|
|
- emit('exportCurrent');
|
|
|
|
|
|
+ const flatColSetting = flatColumnsFunc(colSetting);
|
|
|
|
+ const exportNewColumns = flatColSetting.filter((item: any) => item.isShow);
|
|
|
|
+ const exportNewColumnsProp = exportNewColumns.map((item: any) => item.prop);
|
|
|
|
+ ElMessageBox.confirm(`您确定要导出当前页数据,是否继续?`, '提示', {
|
|
|
|
+ confirmButtonText: '确认',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ draggable: true,
|
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
|
+ autofocus: false,
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ emit('exportCurrent', exportNewColumns, exportNewColumnsProp);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {});
|
|
};
|
|
};
|
|
// 导出全部
|
|
// 导出全部
|
|
const exportAll = () => {
|
|
const exportAll = () => {
|
|
- emit('exportAll');
|
|
|
|
|
|
+ const flatColSetting = flatColumnsFunc(colSetting);
|
|
|
|
+ const exportNewColumns = flatColSetting.filter((item: any) => item.isShow);
|
|
|
|
+ const exportNewColumnsProp = exportNewColumns.map((item: any) => item.prop);
|
|
|
|
+ ElMessageBox.confirm(`您确定要导出全部数据,是否继续?`, '提示', {
|
|
|
|
+ confirmButtonText: '确认',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ draggable: true,
|
|
|
|
+ cancelButtonClass: 'default-button',
|
|
|
|
+ autofocus: false,
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ emit('exportAll', exportNewColumns, exportNewColumnsProp);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {});
|
|
};
|
|
};
|
|
watch(
|
|
watch(
|
|
// 监听table数据改变后重置选择
|
|
// 监听table数据改变后重置选择
|
|
@@ -338,9 +336,6 @@ defineExpose({
|
|
isSelected,
|
|
isSelected,
|
|
selectedList,
|
|
selectedList,
|
|
selectedListIds,
|
|
selectedListIds,
|
|
- filterColumns,
|
|
|
|
- filterColumnsProp,
|
|
|
|
- exportNewColumns:shallowRef(exportNewColumns.value)
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|