logpm_page/src/components/tablecmt/tablecmt.vue

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :show-summary="shownm"
    :summary-method="getSummaries"
    v-loading="loading"
    @selection-change="handleSelectionChange"
    border
    height="500"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      :type="column.type == 0 ? 'selection' : ''"
      :width="column.width"
      v-for="(column,index) in newcolumnList"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :fixed="column.fixed"
      :sortable="column.sortable"
      v-show="column.head"
    >
      <!-- <template #header>
        <el-text class="mx-1">{{ column.label }}</el-text>
      </template> -->
      <el-table-column
        :width="column.width"
        :prop="column.prop"
        :label="column.label"
        v-if="column.type != 0"
        flexible
        show-overflow-tooltip
      >
        <template #header>
          <!-- <el-text class="mx-1">{{ column.label }}</el-text> -->
          <el-input
            v-if="column.type == 2"
            v-model="column.values"
            clearable
            :placeholder="`请输入${column.label}`"
            @change="inputchange($event,column)"
            @blur="inputchange($event,column)"
            @clear="inputclear($event,column)"
          />
          <el-select
            v-if="column.type == 3"
            v-model="column.values"
            class="m-2 selectbr"
            clearable
            :placeholder="`请选择${column.label}`"
            @change="selectchange($event,column)"
            @clear="selectclear($event,column)"
          >
            <el-option
              v-for="item in column.checkarr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="column.values"
            v-if="column.type == 4"
            type="date"
            clearable
            style="width: 150px;"
            :placeholder="`请选择${column.label}`"
            @change="timechange($event,column)"
            @clear="timeclear($event,column)"
          />
          <el-date-picker
            v-model="column.values"
            v-if="column.type == 5"
            type="datetime"
            clearable
            style="width: 190px;"
            :placeholder="`请选择${column.label}`"
            format="YYYY/MM/DD HH:mm:ss"
            @change="timechange($event,column)"
            @clear="timeclear($event,column)"
          />
        </template>

        <template #default="scope">
          <el-text class="mx-2 tabculconte" v-if="(Number(column.type)<6&&Number(column.type)>0)">{{ scope.row[column.prop] }}</el-text>
          <el-tooltip placement="top" v-if="column.type == 9">
            <template #content>{{ scope.row[column.prop] }}</template>
            <div style="color: #409EFF;cursor: pointer;" @click="godowns(scope.row[column.downprop])" class="on">{{ scope.row[column.prop] }}</div>
          </el-tooltip>
          <div class="slotbuts" v-if="column.type == 6">
            <slot v-if="column.type == 6" :scope="scope">
            </slot>
          </div>
          <el-image preview-teleported v-if="column.type==7" style="width: 60px; height: 60px;margin-left: 10px;" :initial-index="index" :z-index="100" v-for="(item,index) in scope.row[column.prop].split(',')" :src="item" :preview-src-list="scope.row[column.prop].split(',')"/>
          <!-- <el-tooltip placement="top" v-if="(Number(column.type)<6&&Number(column.type)>0)&&!column.isextrahide">
            <template #content>{{ scope.row[column.prop] }}</template>
            <div class="on tabculconte">{{ scope.row[column.prop] }}</div>
          </el-tooltip> -->
          <!-- <slot v-if="column.type == 7" name="test" :testdata="scope"></slot> -->
          <!-- <el-button
            v-if="column.type == 6"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            v-if="column.type == 6"
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          > -->
        </template>
      </el-table-column>

      <template #header>
        <el-text class="mx-1 tabtitles">{{ column.label }}</el-text>
        <!-- <el-input
          v-if="column.type == 2"
          v-model="column.values"
          clearable
          size="10"
          placeholder="Type to search"
        /> -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { computed, ref,watchEffect } from 'vue';
import type { PropType } from 'vue';

/**
   * 对应通知事件
   * inputTxt:输入框输入的确认事件
   * timeCheck:时间选择器选择事件
   * selectCheck:下拉框选中事件
   * selection:勾选框事件
   */

interface TableColumnType {
  /** 表格列的key */
  prop: string;
  /** 表格列的名字 */
  label: string;
  /**
   * 对应列表头的类型
   * 0:直接显示为单选，prop，label，全部传空
   * 1:普通表格，正常显示
   * 2:带输入框表格
   * 3:带下拉框表格
   * 4:带日期选择器列
   * 5:带日期时间选择器
   * 6:操作栏，prop，label，全部传空
   * 7:图片
   * 8:带背景的文字
   * 9:下载附件
   */
  type: number | string;
  /** 用于接受表头的值 */
  values: number | string;
  /** 表头宽度 number string undefined */
  width: number | string | undefined;
  /** 下拉框可选项 */
  checkarr?: {
    value: string | number;
    label: string | number;
  }[];
  /** 是否固定表头
   * true false
   * left right
   */
  fixed: boolean | string;
  /** 是否统计
   * true false 或者直接不写该参数
   */
  isshowSummary?: boolean;
  /** 是否排序
   * true false 或者直接不写该参数
   */
  sortable?:boolean;
  /** 是否显示列
   * true false 或者直接不写该参数
   */
  head?:boolean;
  /** 是否文字超出隐藏
   * 默认超出隐藏
   * true是不隐藏
   * false 隐藏
   */
  isextrahide?:boolean;
  /** 下载文件的url的key
   */
  downprop?:string
}
interface TableDataType {
  [key: string]: any;
}
let props = defineProps({
  columnList: {
    type: Array as PropType<TableColumnType[]>,
    required: true,
  },
  tableData: {
    type: Array as PropType<TableDataType[]>,
    required: true,
  },
  loading:{
    type: Boolean as PropType<boolean>,
    required: true,
  }
});
let selectarr=ref([])
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: TableDataType
  rowIndex: number
})  => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
let emit =defineEmits(['inputTxt','timeCheck','selectCheck','selection'])
let newcolumnList=ref<TableColumnType[]>([])
watchEffect(()=>{
  newcolumnList.value=[]
  props.columnList.map(item=>{
    if(!item.head){
      newcolumnList.value.push(item)
    }
  })
})
function godowns(url){
  let a = document.createElement('a');//创建一个a标签用来跳转
a.href = url; //myurl 是后端返回的下载地址
// a.target = '_blank';
a.download = "xixi.zip";//设置下载文件的文件名和文件格式
document.body.appendChild(a);//将标签DOM，放置页面
a.click();
window.URL.revokeObjectURL(url);//释放 url 对象内存
document.body.removeChild(a);
}
let shownm = ref(false);
function handleEdit(index: number, row: TableDataType) {
  console.log(index, row);
}
function inputchange(value,column:TableColumnType){
  if(typeof value =='string'){
    console.log(value,column)
    emit('inputTxt',value,column)
  }
}
function selectchange(value,column:TableColumnType){
  console.log(value,column)
  emit('selectCheck',value,column)
}
function timechange(value,column:TableColumnType){
  console.log(value,column)
  emit('timeCheck',value,column)
}
const handleSelectionChange=(param:TableDataType[])=>{
  // console.log(param)
  selectarr.value=param
  emit('selection',param)
}
function inputclear(value,column:TableColumnType){
  console.log('',column)
  emit('inputTxt','',column)
}
function selectclear(value,column:TableColumnType){
  console.log('',column)
  emit('selectCheck','',column)
}
function timeclear(value,column:TableColumnType){
  console.log('',column)
  emit('timeCheck','',column)
}
function handleDelete(index: number, row: TableDataType) {
  console.log(index, row);
}
const getSummaries = (param: any) => {
  const { columns, data } = param;
  let newarr = [];
  let tji = 0;
  console.log(columns, data);
  columns.map((item, index) => {
    if (index == 0) {
      newarr[index] = '总计';
      return;
    }
    tji = 0;
    if (props.columnList[index]?.isshowSummary) {
      data.map(ite => {
        tji += Number(ite[props.columnList[index]?.prop]||0);
      });
      newarr[index] = tji;
      // shownm.value=true
    } else {
      newarr[index] = null;
    }
  });
  // console.log(columns)
  console.log(newarr);
  return newarr;
};
watchEffect(()=>{
  props.columnList.map(item => {
  if (item.isshowSummary) {
    shownm.value = true;
  }
});
})

</script>
<style lang="scss">
// :root{
//   --el-checkbox-checked-bg-color:'#D3832A';
//   --el-checkbox-checked-input-border-color:'#D3832A';
// }


.el-table {
  //悬停
  --el-table-row-hover-background-color: #f0f9eb !important;
  //选中
  --el-table-current-row-background-color: #f0f9eb !important;
}

// .el-table .warning-row {
//   --el-table-tr-bg-color: var(--el-color-warning-light-9);
// }
// .el-table .success-row {
//   --el-table-tr-bg-color: var(--el-color-success-light-9);
// }

.on{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px !important;
}
.selectbr{
  border: none !important;
  font-size: 12px !important;
}
.tabtitles{
  color: #092C4D !important;
  font-size: 12px !important;
}
.el-table .ascending .sort-caret.ascending{
  border-bottom-color: #D3832A !important;
  font-size: 12px !important;
}
.el-table .descending .sort-caret.descending{
  border-top-color: #D3832A !important;
  font-size: 12px !important;
}
.tabculconte{
  color: #333333 !important;
  font-size: 12px !important;
}
.slotbuts{
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
}
.slotbuts .el-text{
  color: #D3832A !important;
  margin-right: 10px !important;
  cursor: pointer;
  font-size: 12px !important;
  &:nth-last-child(1){
    margin-right: 0px !important;
  }
}
// .el-checkbox__input.is-checked .el-checkbox__inner{
//   background-color: #D3832A !important;
//   border-color: #D3832A !important;
// }
// .is .el-checkbox__input.is-checked .el-checkbox__inner{
//   background-color: #D3832A !important;
//   border-color: #D3832A !important;
// }
// .is-checked .el-checkbox__inner:hover{
//   border-color: #D3832A !important;
// }
// .el-checkbox__input.is-indeterminate .el-checkbox__inner{
//   background-color: #D3832A !important;
//   border-color: #D3832A !important;
// }
.el-table .el-table__cell{
  padding: 0px !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: #D3832A!important;
      background-color: #D3832A!important;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color:  #D3832A!important;
    }
    //修改选中后文本的颜色
    .el-checkbox__input.is-checked+.el-checkbox__label{
    color:#D3832A!important;
}
.el-checkbox__inner:hover{
  border-color: #D3832A!important;
  font-size: 12px !important;
}
</style>