smartsearch/vue/src/views/wellinfo/table.ts

import type {TableColumnsType} from "ant-design-vue";
import dayjs from "dayjs";
import type {GetComponentProps} from "ant-design-vue/lib/vc-table/interface";
import {reactive, ref} from "vue";

const state = reactive({
  dragIndex: 0
});
const dragStart = (e) => {
  e.stopPropagation();
  state.dragIndex = parseInt(e.srcElement.attributes["colstart"].value);
}

const groupList = ['oil_prod_mon', 'oil_prod_year', 'oil', 'gas_prod_mon', 'gas_prod_year', 'gas', 'water_prod_mon', 'water_prod_year', 'water'];
const dragEnter = (e) => {
  e.preventDefault();
  console.log(e.srcElement.attributes["colstart"].value);
  let index = parseInt(e.srcElement.attributes["colstart"].value);
  if (state.dragIndex != -1 && state.dragIndex != index) {

    let newItems = [...filterColumns.value];
    //鼠标开始拖动的列
    const dragItem = filterColumns.value[state.dragIndex];
    const dragKey = dragItem.key == undefined ? "" : dragItem.key.toString();
    //当前要移动的列
    const moveItem = filterColumns.value[index];
    const moveKey = moveItem.key == undefined ? "" : moveItem.key.toString();

    if (state.dragIndex < index) {//右移
      let moveList = groupList;
      if (!groupList.includes(moveKey)) {
        moveList = [moveKey];
      } else {
        let star = groupList.indexOf(moveKey);
        moveList = groupList.slice(star, star + 3);
      }
      let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
      newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
      newItems.splice(state.dragIndex, 0, ...group);
      //如果起始为块则需要减两列
      //如果放下为块则要加两列
      if (!groupList.includes(dragKey)&&!groupList.includes(moveKey)){
        index = state.dragIndex+ 1;
      }
      if (groupList.includes(dragKey)) {
        index = index - 2;
      }
      if (groupList.includes(moveKey)) {
        index = index + 2;
      }
    } else {//=左移

      let moveList = groupList;
      if (!groupList.includes(dragKey)) {
        moveList = [dragKey];
      } else {
        let star = groupList.indexOf(dragKey);
        moveList = groupList.slice(star, star + 3);
      }
      let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
      newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
      newItems.splice(index, 0, ...group);
      filterColumns.value = newItems;
    }
    filterColumns.value = newItems;
    state.dragIndex = index;
  }
};
const onHeaderCell= () => {
  return {
    draggable: true,
    onDragstart: dragStart,
    onDragenter: dragEnter
  }
}
const oilHeader = () => {
  return {
    style: {'border-top': '2px solid red'},
  }
}
const oilDragHeader:GetComponentProps<any> = () => {
  return {...oilHeader(),...onHeaderCell()}
}

const gasHeader = () => {
  return {
    style: {'border-top': '2px solid #009900'},
  }
}
const gasDragHeader:GetComponentProps<any> = () => {
  return {...gasHeader(),...onHeaderCell()}
}
const waterHeader = () => {
  return {
    style: {'border-top': '2px solid #4472C4'},
  }
}
const waterDragHeader:GetComponentProps<any> = () => {
  return {...waterHeader(),...onHeaderCell()}
}
export const getTdColor = (water_cut) => {
  if (water_cut == null || water_cut <= 2) {
    return "";
  } else if (water_cut > 2 && water_cut <= 40) {
    return "color_level2";
  } else if (water_cut > 40 && water_cut <= 8) {
    return "color_level3";
  } else {
    return "color_level4";
  }
}
export const filterColumns = ref<TableColumnsType>([]);

export const formState = reactive({
  page: 1,
  rows: 10,
  total: 0,
  ref_date: new Date(), //重置查询条件使用
  well_common_name: '',
  well_id: '',
  well_type: '',
  spud_date_begin: '',
  spud_date_end: '',
  completion_date_begin: '',
  completion_date_end: '',
  oil_prod_begin_date_begin: '',
  oil_prod_begin_date_end: '',
  oil_prod_recent_date_begin: '',
  oil_prod_recent_date_end: '',
  org_id_a1: '',
  project_id: ''
});
export const columns: TableColumnsType = [
  {
    title: '序号',
    width: 60,
    dataIndex: 'index',
    key: 'index',
    align: "center", fixed: 'left',
    customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
  },
  {
    title: '井名',
    dataIndex: 'well_common_name',
    key: 'well_common_name',
    width: 120,
    fixed: 'left'
  },
  {title: '采油厂机构', dataIndex: 'org_name_a1', key: 'org_name_a1', width: 120, customHeaderCell: onHeaderCell},
  {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120, customHeaderCell: onHeaderCell},
  {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120, customHeaderCell: onHeaderCell},
  {
    title: '开钻日期',
    dataIndex: 'spud_date',
    key: 'spud_date',
    width: 120,
    customHeaderCell: onHeaderCell,
    customRender: ({record}) =>
      record.spud_date == null ? "" : (dayjs(record.spud_date).format('YYYY-MM-DD'))
  },
  {
    title: '完钻日期',
    dataIndex: 'end_drilling_date',
    key: 'end_drilling_date',
    width: 120,
    customHeaderCell: onHeaderCell,
    customRender: ({record}) =>
      record.end_drilling_date == null ? "" : (dayjs(record.end_drilling_date).format('YYYY-MM-DD'))
  },
  {
    title: '完井日期',
    dataIndex: 'completion_date',
    key: 'completion_date',
    width: 120,
    customHeaderCell: onHeaderCell,
    customRender: ({record}) =>
      record.end_drilling_date == null ? "" : (dayjs(record.completion_date).format('YYYY-MM-DD'))
  },
  {
    title: '开始采油日期',
    dataIndex: 'oil_prod_begin_date',
    key: 'oil_prod_begin_date', width: 120, customHeaderCell: onHeaderCell,
    customRender: ({record}) =>
      record.oil_prod_begin_date == null ? "" : (dayjs(record.oil_prod_begin_date).format('YYYY-MM-DD'))
  },
  {
    title: '最近采油日期',
    dataIndex: 'oil_prod_recent_date',
    key: 'oil_prod_recent_date', width: 120, customHeaderCell: onHeaderCell,
    customRender: ({record}) =>
      record.oil_prod_recent_date == null ? "" : (dayjs(record.oil_prod_recent_date).format('YYYY-MM-DD'))
  },
  {title: '状态', dataIndex: 'current_state_name', key: 'current_state', width: 120, customHeaderCell: onHeaderCell},
  {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120, customHeaderCell: onHeaderCell},
  {
    title: '含水率',
    dataIndex: 'water_cut',
    key: 'water_cut',
    width: 60,
    align: 'center',
    customHeaderCell: onHeaderCell,
    customCell: (record) => {
      return {class: getTdColor(record.water_cut)};
    }
  },
  {
    title: '最近月产油量(t)',
    dataIndex: 'oil_prod_mon',
    key: 'oil_prod_mon',
    width: 120,
    customHeaderCell: oilDragHeader
  },
  {
    title: '累产油量(10kt)',
    dataIndex: 'oil_prod_year',
    key: 'oil_prod_year',
    width: 120,
    customHeaderCell: oilHeader
  },
  {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
  {
    title: '最近月产气量(10^4m³)',
    dataIndex: 'gas_prod_mon',
    key: 'gas_prod_mon',
    width: 170,
    customHeaderCell: gasDragHeader
  },
  {
    title: '累产气量(10^8m³)',
    dataIndex: 'gas_prod_year',
    key: 'gas_prod_year',
    width: 150,
    customHeaderCell: gasHeader
  },
  {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 100, customHeaderCell: gasHeader},
  {
    title: '最近注水量(t)',
    dataIndex: 'water_prod_mon',
    key: 'water_prod_mon',
    width: 110,
    customHeaderCell:waterDragHeader
  },
  {
    title: '累注水量(10kt)',
    dataIndex: 'water_prod_year',
    key: 'water_prod_year',
    width: 150,
    customHeaderCell: waterHeader
  },
  {title: '累注水量趋势', dataIndex: 'water', key: 'water', width: 100, customHeaderCell: waterHeader},
  {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
];