logpm_page/src/components/tablecmt/tablecmt.vue

<template>
  <div class="maboxhi">
    <el-table
      :data="tableData"
      style="width: 100%"
      :show-summary="shownm"
      :summary-method="getSummaries"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      border
      height="100%"
      :row-class-name="tableRowClassName"
      ref="selecttable"
    >
      <el-table-column
        :type="column.type == 0 ? 'selection' : ''"
        :min-width="column.width"
        v-for="(column, index) in newcolumnList"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :fixed="column.fixed"
        :sortable="column.sortable"
        :selectable="isselectfun"
        v-show="column.head"
      >
        <!-- <template #header>
        <el-text class="mx-1">{{ column.label }}</el-text>
      </template> -->
        <el-table-column
          :min-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: auto"
              :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: auto"
              :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-text
              style=""
              class="mx-2 tabculconte colors"
              v-if="column.type == 9"
              @click="godowns(scope.row[column.downprop])"
              >{{ scope.row[column.prop] }}</el-text
            >
            <el-input
              @blur="handleNumberRange(column, scope.row)"
              v-if="column.type == 10"
              v-model="scope.row[column.prop]"
              type="number"
              :min="0"
            ></el-input>
            <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>
          <div style="display: inline-block">
            <div class="tilbox">
              <el-text class="mx-1 tabtitles">{{ column.label }}</el-text>
              <el-icon
                v-if="column.type == 1 || column.type == 2 || column.type == 3"
                @click.stop="copyalls(column)"
                ><DocumentCopy
              /></el-icon>
            </div>
          </div>
          <!-- <el-input
          v-if="column.type == 2"
          v-model="column.values"
          clearable
          size="10"
          placeholder="Type to search"
        /> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watchEffect, getCurrentInstance, onMounted } from 'vue';
import type { PropType } from 'vue';
const { proxy } = getCurrentInstance() as any;
const selecttable = ref(null);
/**
 * 对应通知事件
 * 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:下载附件
   * 10.输入框的表格内容
   */
  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;
  /** 输入框内容需要小于的对应字段
   */
  lessThanNum?: 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,
  },
  //回显勾选的数据列表
  checkselect: {
    type: Array as PropType<TableDataType[]>,
    required: false,
  },
  //是否可选择的函数
  isselectfun: {
    type: Function as PropType<(row: TableDataType) => boolean>,
    required: false,
    default: null,
  },
});
let selectarr = ref([]);
const tableRowClassName = ({ row, rowIndex }: { row: TableDataType; rowIndex: number }) => {
  let sfcheck = false;
  selectarr.value.map(item => {
    if (item == row) {
      sfcheck = true;
    }
  });
  if (sfcheck) {
    return 'table-SelectedRow-bgcolor';
  }
  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);
    }
  });
});
onMounted(() => {
  if (props.checkselect) {
    props.checkselect.map(item => {
      if (props.isselectfun) {
        if (props.isselectfun(item)) {
          selecttable.value.toggleRowSelection(item, true);
        }
      } else {
        selecttable.value.toggleRowSelection(item, true);
      }
    });
  }
});
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 copyalls(column: TableColumnType) {
  let text = '';
  props.tableData.map((item, index) => {
    if (index < props.tableData.length - 1) {
      if (item[column.prop]) {
        text += `${item[column.prop]}\n`;
      }
    } else {
      if (item[column.prop]) {
        text += `${item[column.prop]}`;
      } else {
      }
    }
  });
  copyContent(text);
}
function handleNumberRange(column: TableColumnType, row: TableDataType) {
  row[column.prop] = row[column.prop].replace(/[^\.\d]/g, ''); //替换掉与数字无关的字符（中英文与符号都会被替换掉，只留下数字，此时值类型为字符串）
  if (row[column.prop]) {
    //如果替换后还有值
    row[column.prop] = parseInt(row[column.prop]); //把字符型转成整数型
  }
  if (column.lessThanNum) {
    if (row[column.prop] > row[column.lessThanNum]) {
      row[column.prop] = row[column.lessThanNum];
      proxy.$message({
        type: 'error',
        message: '数量不能大于可用数量',
      });
    }
  }
  console.log(column, row);
}
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;
    }
  });
});
// 复制文本内容
function copyContent(content: string) {
  // 复制结果
  let copyResult = true;
  // 设置想要复制的文本内容
  const text = content || '让我们一起快乐的敲代码吧~';
  // 判断是否支持clipboard方式
  if (!!window.navigator.clipboard) {
    // 利用clipboard将文本写入剪贴板（这是一个异步promise）
    window.navigator.clipboard
      .writeText(text)
      .then(res => {
        proxy.$message({
          type: 'success',
          message: '复制成功',
        });
        // 返回复制操作的最终结果
        return copyResult;
      })
      .catch(err => {
        copyResult = false;
        console.log('复制失败', err);
        proxy.$message({
          type: 'error',
          message: '复制失败',
        });
        // 返回复制操作的最终结果
        return copyResult;
      });
  } else {
    // 不支持clipboard方式 则采用document.execCommand()方式
    // 创建一个input元素
    let inputDom = document.createElement('textarea');
    // 设置为只读 防止移动端手机上弹出软键盘
    inputDom.setAttribute('readonly', 'readonly');
    // 给input元素赋值
    inputDom.value = text;
    // 将创建的input添加到body
    document.body.appendChild(inputDom);
    // 选中input元素的内容
    inputDom.select();
    // 执行浏览器复制命令
    // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
    // Input要在正常的编辑状态下原生复制方法才会生效
    const result = document.execCommand('copy');
    // 判断是否复制成功
    if (result) {
      proxy.$message({
        type: 'success',
        message: '复制成功',
      });
    } else {
      console.log('复制失败');
      proxy.$message({
        type: 'error',
        message: '复制失败',
      });
      copyResult = false;
    }
    // 复制操作后再将构造的标签 移除
    document.body.removeChild(inputDom);
    // 返回复制操作的最终结果
    return copyResult;
  }
}
</script>
<style lang="scss">
// :root{
//   --el-checkbox-checked-bg-color:'#D3832A';
//   --el-checkbox-checked-input-border-color:'#D3832A';
// }

.el-table {
  //悬停
  --el-table-row-hover-bg-color: #d3832a;
}

// .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);
// }
.maboxhi {
  width: 100%;
  height: calc(100vh - 350px);
  // flex:1;
  // min-height: 100%;
}
.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;
  margin-right: 5px !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-popper.is-pure.is-light.el-dropdown__popper .el-text {
  color: #d3832a !important;
  margin-right: 10px !important;
  cursor: pointer;
  font-size: 12px !important;
  &:nth-last-child(1) {
    margin-right: 0px !important;
  }
}
.el-table .el-input__inner {
  height: 23px !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;
}
.table-SelectedRow-bgcolor {
  > td {
    background-color: #f7e8d7 !important;
  }
}
.colors {
  color: #409eff !important;
  cursor: pointer !important;
}
.el-table .cell {
  line-height: 22px !important;
}
.el-table .el-input__inner {
  font-size: 12px !important;
}
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
  background-color: #d3d8e1 !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  height: 23px !important;
}
.copys {
  display: inline-block;
  margin-left: 5px;
  padding-top: 5px;
  margin-right: 5px;
}
.tilbox {
  display: flex;
  align-items: center;
}
</style>