深层表格封装

<!--
 * @Description: 特征使用设置
 * @Author: jmguo2
 * @Date: 2023-10-12 11:28:59
 * @LastEditors: jmguo2
 * @LastEditTime: 2023-10-18 10:46:34
-->
<template>
  <div>
    <!-- <el-button @click="handleClickTest">加一</el-button> -->
    <tab-table :tab-config="areaData" ref="tabRef" @tab-click="handleTabClick" @row-click="handleRowClick"
      :is-show-right-extend="true">
      <template #header>
        <el-button @click="openDialog">添加</el-button>
      </template>
    </tab-table>

    <el-dialog v-model="isShowAddDialog" title="弹窗">
      <tab-table :tab-config="configData" ref="tabDialogRef" @tab-click="handleTabClick" class="table-content">
        <template #tzlbId="scope">
          <span>{{ scope.scope.scope.tzId === 1? '加分': '优先' }}</span>
        </template>
      </tab-table>
      <template #footer>
        <div class="footer-contaienr">
          <el-button>取消</el-button>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import tabTable from '@/components/tabTable/Index.vue';
import { areaConfig, config } from './tableConfig'
import { getFeatureList, getAllFeatureList, getAllFeatureSchoolList } from '@/api/FeatureUseSettingController';
import { IAddFeature, FEATURE_TYPE } from './type.d'
import { addFeature } from '@/api/FeatureUseSettingController';

// table configData
const areaData = ref(areaConfig);
const configData = ref(config)

const tabRef = ref({} as any);
const tabDialogRef = ref({} as any);

const isShowAddDialog = ref(false);
let currentTab = ''

const fileType = {
  xqid: 0,
  tddid: 0
}

const handleTabClick = (activeTab: string) => {
  console.log('tab', activeTab);
  currentTab = activeTab;

}

const handleRowClick = (rowObj: { row: any, selectedList: any[] }) => {
  console.log('点击了', rowObj);
}

const openDialog = async () => {
  isShowAddDialog.value = true;
  // 等待dialog渲染完成
  await nextTick();
  tabDialogRef.value.setActiveTab('list');
}

const handleSubmit = async() => {
  const tableIndex = currentTab === FEATURE_TYPE.FEATURE? 0: 1
  const list = tabDialogRef.value.getSelectedList(0);
  const params: IAddFeature = {
    gzdyIds: [],
    tddid: 0,
    tzFw: 0,
    tzFz: '',
    tzLx: 0,
    xqid: 0
  }
  params.gzdyIds = list.map((item: any) => item.tzId);
  params.tzFw = 1;
  params.tzFz = '20';
  params.tzLx = 1;
  await addFeature(params);
  
}

onMounted(() => {
  // 默认进入全局特征页面
  tabRef.value.setActiveTab('global');
  getTableList()
  getFeatureDialogList();
})

const getTableList = async () => {
  await getFeatureList(fileType)
}

const getFeatureDialogList = async () => {
  const { data } = await getAllFeatureList();
  configData.value[0].tableData = data;
}

const handleClickTest = () => {
  // config.value[0].tableData[0].type2++;
}


</script>

<style scoped lang="scss">
.footer-contaienr {
  display: flex;
  justify-content: center;
  // width: 100%;
}

.table-content {
  max-height: 500px;
  overflow: scroll;
}
</style>

<!--
 * @Description: 带tab的表格
 * @Author: jmguo2
 * @Date: 2023-10-13 13:50:21
 * @LastEditors: jmguo2
 * @LastEditTime: 2023-10-18 10:43:34
-->

<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 头部拓展区 -->
      <slot name="header"></slot>
      <!-- 头部拓展区 -->
      <el-tab-pane v-for="(pane, index) in props.tabConfig" :key="index" :label="pane.label" :name="pane.name">

        <common-table :config="pane" class="table-container" ref="tableRef">
          <template v-for="(item, index) in getTabConfig(pane)" :key="index" #[item!]="scope">
            <slot :name="item" :scope="scope"></slot>
          </template>
        </common-table>


      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { COLUMN_TYPES, IConfig, ITableConfig } from './type.d';
import commonTable from '../commonTable/Index.vue'
import { computed } from 'vue';

const emit = defineEmits(['tabClick', 'rowClick'])


const props = defineProps<{
  tabConfig: IConfig[]
}>()

const activeTab = ref('')
const tableRef = ref({} as any);
const selectedList = ref([] as any)

const setActiveTab = (value: string) => {
  activeTab.value = value;
}

// const extendList = computed(() => {
//   const list = [];
//   props.tabConfig.map((tab) => {
//     if(tab.tableConfig)
//   })
// })

const getTabConfig = (pane: IConfig) => {
  const list = pane.tableConfig.map((table) => {
    if(table.type === COLUMN_TYPES.EXTENDS) {
      return table.prop
    }
  });
  return list
}

const getSelectedList = (index: number) => {

  return tableRef.value[index].getSelectedList();
}

const handleTabClick = () => {
  // 切换后清除已选列表
  tableRef.value[0].clearSelection()
  emit('tabClick', activeTab.value);
}


defineExpose({
  setActiveTab,
  getSelectedList
})

</script>

<style scoped lang="scss"></style>

<!--
 * @Description: 
 * @Author: jmguo2
 * @Date: 2023-10-16 15:08:28
 * @LastEditors: jmguo2
 * @LastEditTime: 2023-10-18 09:47:02
-->
<template>
  <div class="table-container">
    <el-table border :data="props.config.tableData" @row-click="handleRowClick" ref="tableRef" show-overflow-tooltip>
      <template v-for="(column, index) in props.config.tableConfig" :key="index">
        <!-- 多选列表 -->
        <el-table-column v-if="column.type === COLUMN_TYPES.SELECTION" type="selection"
          ref="selectionRef"></el-table-column>
        <!-- 多选列表 -->

        <!-- 序号列 -->
        <el-table-column v-else-if="column.type === COLUMN_TYPES.INDEX" type="index" label="序号"
          width="60"></el-table-column>
        <!-- 序号列 -->

        <!-- 扩展列表 -->
        <el-table-column v-else-if="column.type === COLUMN_TYPES.EXTENDS" :label="column.label" :prop="column.prop">
          <template #default="scope">
            <slot :name="column.prop" :scope="scope.row"></slot>
          </template>
        </el-table-column>
        <!-- 扩展列表 -->

        <!-- 普通列表 -->
        <el-table-column v-else :label="column.label" :prop="column.prop"></el-table-column>
        <!-- 普通列表 -->
      </template>

    </el-table>
    <!-- 右侧扩展区 -->
    <div class="right-extend">
      <slot name="right"></slot>
      <div v-if="props.config.isShowRightExtend" class="selected-container">
        <div class="tag-container">
          <el-tag v-for="(selectItem, index) in selectedList" :key="index" closable @close="handleCloseTag(selectItem)"
            class="tag">
            {{ selectItem[props.config.tagName!] }}
          </el-tag>
        </div>
      </div>
    </div>
    <!-- 右侧扩展区 -->
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { COLUMN_TYPES, ICommonTableConfig } from '@/components/tabTable/type.d';

const emit = defineEmits(['tabClick', 'rowClick'])


const props = defineProps<{
  config: ICommonTableConfig
}>()
const selectionRef = ref({} as any);
const tableRef = ref({} as any);

const selectedList = ref([] as any);

const handleRowClick = async (row: any) => {
  const ref = selectionRef.value;
  const rowObj = {
    row,
    selectedList: undefined
  }
  await nextTick();
  if (ref) {
    // 有多选框才去处理
    tableRef.value.toggleRowSelection(row);
    selectedList.value = tableRef.value.getSelectionRows()
    rowObj.selectedList = selectedList.value;
  }
  emit('rowClick', rowObj);
}

const getSelectedList = () => {

  selectedList.value = tableRef.value.getSelectionRows()

  return selectedList.value;
}

const handleCloseTag = (row: any) => {
  tableRef.value.toggleRowSelection(row);
  getSelectedList();
}

const clearSelection = () => {
  tableRef.value.clearSelection()
}

defineExpose({
  getSelectedList,
  handleCloseTag,
  clearSelection
})
</script>

<style scoped lang="scss">
.table-container {
  display: flex;
}

.selected-container {
  width: 230px;
  height: 100%;
  margin-left: 24px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 12px;

  .tag-container {
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

.table-container {
  flex: 2;
}

.tag {
  // width: 100px;
  // max-width: 100px;
  // overflow: hidden;
}

:deep(.el-tag__content) {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}</style>