mdyxgjweb/src/template/normalTable/index.vue

// 单据中使用商品表
<template>
  <div
    :id="'normalTable' + app.name"
    class="normalTable"
    :style="fullscreen ? 'padding:15px' : ''"
  >
    <div v-if="props.tableName ? true : false">
      <div class="fl-l">
        <slot name="operation"></slot>
      </div>
      <a-space size="middle" class="fl-r mt-10">
        <setting-columns
          ref="setColumns"
          :columns="columns"
          :param="props.param"
          :tableName="props.tableName"
        ></setting-columns>
        <fullScreen :domId="'normalTable' + app.name"></fullScreen>
      </a-space>
    </div>
    <a-table
      :loading="loading"
      class="ant-table-striped ant-table-small"
      v-model:expandedRowKeys="expandedRowKeys"
      :row-selection="
        isSelect
          ? {
              type: props.filterMultiple ? 'radio' : 'checkbox',
              columnWidth: '10px',
              selectedRowKeys: selectedRowKeys,
              onSelectAll: onSelectAll,
              onChange: onSelectChange,
              fixed: true,
              onSelect: onSelect,
              hideSelectAll: false,
              preserveSelectedRowKeys: false,
            }
          : null
      "
      :rowKey="rowKey"
      :keep-selection="true"
      :columns="columns"
      :defaultExpandAllRows="defaultExpandAllRows"
      :data-source="data"
      :scroll="
        fullscreen ? { x: 'max-content', y: '86vh' } : { x: 'max-content' }
      "
      :pagination="{
        showSizeChanger: true,
        defaultPageSize: props.param.content.pageSize,
        total: total,
        current: props.param.content.pageNumber,
        showTotal: (total) => `共 ${total} 条`,
      }"
      @change="onChange"
      :size="size"
      :customRow="sequence ? customRow : noRequence"
      :bordered="!hideBorder"
      :row-class-name="(_record, index) => formatter(_record, index)"
    >
      <template #headerCell="{ column }">
        <div
          style="width: 100%"
          v-if="column.filter == 1 || column.filter == 2"
        >
          <!-- <a-input v-model:value="column.value" :placeholder="column.title" @change="setSearchParam(column.dataIndex,column.value)" @pressEnter="listData"></a-input> -->
          <a-input
            v-model:value="column.value"
            :placeholder="column.title"
            @change="setSearchParam(column.dataIndex, column.value)"
            @pressEnter="listData"
            :bordered="true"
          >
            <template v-if="column.sortable == 1" #suffix>
              <sort-ascending-outlined
                v-if="column.sort == 0"
                @click="setSort(column, 1)"
              />
              <sort-descending-outlined v-else @click="setSort(column, 0)" />
            </template>
          </a-input>
        </div>
        <span v-else style="display: inline-block; padding: 0">
          {{ column.title }}
          <template v-if="column.sortable == 1">
            <sort-ascending-outlined
              v-if="column.sort == 0"
              @click="setSort(column, 1)"
            />
            <sort-descending-outlined v-else @click="setSort(column, 0)" />
          </template>
        </span>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.fn">
          <div style="pointer-events: none">
            {{ column.fn(column.fn ? record : "") }}
          </div>
        </template>
        <slot name="tb_cell" :data="{ column, record }"></slot>
      </template>
      <template #footer v-if="Object.keys($slots).indexOf('footer') != -1">
        <slot name="footer"> </slot>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import {
  defineEmits,
  ref,
  defineProps,
  defineExpose,
  onMounted,
  onBeforeUnmount,
  computed,
  watch,
  onActivated,
  onDeactivated,
} from "vue";
import settingColumns from "@/components/tableConfiguration/settingColumns.vue";
import fullScreen from "@/components/tableConfiguration/fullScreen.vue";
import Api from "@/api/api";
import utils from "@/utils/utils";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useBaseStore } from "@/stores/modules/base";
import { useColumnsStore } from "@/stores/modules/columns";
import { useAuthStore } from "@/stores/modules/auth";
import {
  SortAscendingOutlined,
  SortDescendingOutlined,
  DownOutlined,
  SyncOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { template } from "@antv/g2plot/lib/utils";

const store = useAuthStore();
const colStore = useColumnsStore();
const base = useBaseStore();
let { app } = storeToRefs(store);
let { tableRecord, fullscreen } = storeToRefs(base);
let { selectedColumns } = storeToRefs(colStore);
const router = useRouter();
const props = defineProps({
  tableName: String,
  columns: Array,
  param: Object,
  hideBorder: Boolean,
  size: String,
  tableid: Number,
  rowKey: String,
  defaultExpandAllRows: {
    type: Boolean,
    default: () => false,
  },
  sequence: {
    type: Boolean,
    default: () => false,
  },
  filterMultiple: Boolean,
  noQuery: false,
  tableRowStyle: Function,
  isSelect: {
    type: Boolean,
    default: () => true,
  },
});
const formatter = (_record, index) => {
  if (props.tableRowStyle) return props.tableRowStyle(_record, index);
  if (index % 2 === 1) {
    return "table-striped";
  } else {
    return null;
  }
};
let expandedRowKeys = ref([])
const columns = ref(props.columns);
const data = ref([]);
const selectedRowKeys = ref([]);
const total = ref(0);
const emit = defineEmits(["onSelect", "listData", "emitParam"]);

const onSelectChange = (changableRowKeys, selectedRows) => {
  selectedRowKeys.value = changableRowKeys;
};
const onChange = (pagination, filters, sorter, { currentDataSource }) => {
  selectedRowKeys.value = tableRecord.value.map((e) => e[props.rowKey]);
  props.param.content.pageNumber = pagination.current;
  props.param.content.pageSize = pagination.pageSize;
  listData();
};
const loading = ref(false);
const listData = async (num, size) => {
  loading.value = true;
  props.param.content.tableid = props.tableid;
  emit("emitParam", props.param);
  const res = await Api.requested(props.param);
  data.value = res.data;
  total.value = res.total;
  loading.value = false;
  emit("listData", data.value, total.value);
};
const onSelect = async (record, selected, selectedRows, nativeEvent) => {
  if (!selected) {
    tableRecord.value = tableRecord.value.filter(
      (e) => e[props.rowKey] !== record[props.rowKey]
    );
  } else {
    tableRecord.value.push(record);
  }
  emit("onSelect", tableRecord.value);
};
const onSelectAll = (selected, selectedRows, changeRows) => {
  if (selected) {
    tableRecord.value = [...tableRecord.value, ...changeRows];
  } else {
    tableRecord.value = tableRecord.value.filter((itemA) => {
      return !changeRows.some((itemB) => itemB.itemid === itemA.itemid);
    });
  }
  emit("onSelect", tableRecord.value);
};
const reloadSelect = () => {
  selectedRowKeys.value = [];
  tableRecord.value = [];
  emit("onSelect", tableRecord.value);
};
const setSearchParam = (dataIndex, value) => {
  props.param.content.pageNumber = 1;
  props.param.content.where.tablefilter = props.param.content.where.tablefilter
    ? props.param.content.where.tablefilter
    : {};
  props.param.content.where.tablefilter[dataIndex] = value;
};
const setSort = (column, sort) => {
  props.param.content.simplesort = {};
  column.sort = props.param.content.simplesort[column.dataIndex] = sort;
  columns.value.forEach((e) => {
    if (e.dataIndex !== column.dataIndex) {
      e.sort = 0;
    }
  });
  listData();
};
let sourceObj = ref({});
let targetObj = ref({});
let noRequence = () => {};
let customRow = (record, index) => {
  return {
    style: {
      cursor: "move",
    },
    // 鼠标移入
    onMouseenter: (event) => {
      // 兼容IE
      var ev = event || window.event;
      ev.target.draggable = true;
    },
    // 开始拖拽
    onDragstart: (event) => {
      // 兼容IE
      var ev = event || window.event;
      // 阻止冒泡
      ev.stopPropagation();
      // 得到源目标数据
      sourceObj.value = record;
      setTimeout(() => {
        if (record.parentid == 0) expandedRowKeys.value = []
      },100)
      console.log(sourceObj,'源数据');
    },
    // 拖动元素经过的元素
    onDragover: (event) => {
      // 兼容 IE
      var ev = event || window.event;
      // 阻止默认行为
      let temp = record;
      if ((sourceObj.value.parentid!=0 && temp.parentid==0) || sourceObj.value.level != temp.level) return
      ev.preventDefault();
    },
    onDragEnd: (event) => {
    },
    // 鼠标松开
    onDrop: async (event) => {
      // 兼容IE
      var ev = event || window.event;
      // 阻止冒泡
      ev.stopPropagation();
      // 得到目标数据
      targetObj.value = record;
       event.preventDefault()
      let tempDta = []
      if (record.parentid != 0) {
        for (let index = 0; index < data.value.length; index++) {
          _findParentData(data.value[index],data.value)
        }
      } else {
        tempDta = data.value;
      }
      
      function _findParentData (data,all) {
        if (data[props.rowKey] == record[props.rowKey]) return tempDta = all
        if (data.children && data.children.length) {
          data.children.forEach(v => _findParentData(v,data.children))
        }
      }
      tempDta[targetObj.value.weight] = sourceObj.value;
      tempDta[sourceObj.value.weight] = targetObj.value;
      let source;
      let target;
      tempDta.forEach((item, index) => {
        item.weight = index;
        if (sourceObj.value[props.rowKey] == item[props.rowKey]) source = item;
        if (targetObj.value[props.rowKey] == item[props.rowKey]) target = item;
      });
      let res = await Api.requested({
        id: "20221201134901",
        content: {
          ownertable: props.rowKey.substring(0, props.rowKey.indexOf("id")),
          sequencesorts: [
            {
              ownerid: source[props.rowKey],
              sequence:
                props.param.content.pageSize *
                  (props.param.content.pageNumber - 1) +
                source.weight,
            },
            {
              ownerid: target[props.rowKey],
              sequence:
                props.param.content.pageSize *
                  (props.param.content.pageNumber - 1) +
                target.weight,
            },
          ],
        },
      });
    },
  };
};
const emitParam = (callback) => {
  callback(props.param);
};
onMounted(() => {
  props.tableName
    ? (columns.value = colStore.loadTableConfig(props.tableName))
    : (columns.value = props.columns);
  props.noQuery ? "" : listData();
});
onActivated(() => {});
onDeactivated(() => {
  reloadSelect();
});
watch(
  () => selectedColumns.value,
  (n, o) => {
    columns.value = colStore.loadTableConfig(props.tableName);
  }
);
/**
 * 开启缓存后需要拉取新数据
 */
defineExpose({
  data,
  listData,
  reloadSelect,
  emitParam,
  tableRecord,
  total,
});
</script>
<style>
</style>
<style scoped>
.ant-table-small :deep(.table-striped) td {
  background-color: #f8f9fd;
}
.ant-table-striped :deep td {
  font-size: 12px;
}
.normalTable {
  background: #fff;
}
.fl-l {
  float: left;
}
.fl-r {
  float: right;
}
.ant-table-small :deep(.table-striped-red) td {
  background: #f1f2f3;
  color: #d9363e;
}
.ant-table-small :deep(.table-striped-red) .ant-input-number-input,
.ant-table-small :deep(.table-striped-red) .ant-input {
  color: #d9363e !important;
}
</style>