global-web/src/views/saleCode/salesOrder/components/ViewHistoryVersionModal.vue

<template>
  <a-modal
    title="历史版本查看(view historical version)"
    width="75%"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @cancel="handleCancel">
      <template #footer>
        <a-button  @click="handleCancel" >关闭(close)</a-button>
      </template>
      <div>
        <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
            <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
            <template #message>
                <template v-if="selectedRowKeys.length > 0">
                <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
                <a-divider type="vertical" />
                <a @click="selectedRowKeys = []">清空</a>
                </template>
                <template v-else>
                <span>未选中任何数据</span>
                </template>
            </template>
            </a-alert>
            <a-table
                :columns="columns"
                :row-key="record => record.id"
                :data-source="dataSource"
                bordered
                size="small"
                @change="handleTableChange"
                :pagination="pagination"
                :scroll="{ x: 1300, y: 300 }"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            >
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'operation'">
                        <span>
                            <a @click="viewDetail(record)">查看(view)</a>
                        </span>
                    </template>
                </template>
            </a-table>
        </a-card>
      </div>
      <SaleOrderFormModal  ref="SaleOrderFormModalRef"></SaleOrderFormModal>
  </a-modal>
</template>
<script lang="ts" setup>
  import {ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { message } from 'ant-design-vue';
  import { filterObj } from '/@/utils/common/compUtils';
  import SaleOrderFormModal from './SaleOrderFormModal.vue';
  const emit = defineEmits([ 'selectProduct']); //定义emit
  var visible = ref(false)
  var SaleOrderFormModalRef = ref()
  const columns = [
      {
          title: '版本号(version)',
          dataIndex: 'version',
          key: 'version',
          align:"center"
      },
      {
          title: '创建时间(create time)',
          dataIndex: 'createTime',
          key: 'createTime',
          align:"center"
      },
      {
          title: '创建人(create by)',
          dataIndex: 'createBy',
          key: 'price',
          align:"createBy",
          width:200
      },
      {
          title: '修改时间(updateTime)',
          dataIndex: 'updateTime',
          key: 'updateTime',
          align:"center"
      },
      {
          title: '修改人(updateBy)',
          dataIndex: 'updateBy',
          key: 'updateBy',
          align:"center"
      },
      {
            title: '操作(operation)',
            key: 'operation',
            dataIndex: 'operation',
            align:"center",
            fixed: 'right',
      },
  ];
  const dataSource =ref([]);
  let selectedRowKeys = ref([]);
  let selectedRows = ref([]);
  var Father = ref({})
  let pagination = ref({
    current: 1,
    pageSize: 10,
    total: '', // 假设总共有100条数据
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total, range) => {
        return range[0] + "-" + range[1] + " 共" + total + "条"
    },
    size:'small'
  });
  function loadData(){
        let params = getQueryParams();
        defHttp
        .get({ url: '/saleCode/saleOrderHis/list',params}, { isTransformResponse: false })
        .then((res) => {
            if (res.success) {
                dataSource.value = res.result.records;
                pagination.value.total = res.result.total;
                pagination.value.current = res.result.current;
                pagination.value.pageSize = res.result.size;                
            } else {
                message.error(res.message);
            }
        })
        .finally(() => {
            // loading.value = false;
        });
  }
  function getQueryParams(){
        let params = {}
        params.pageNo = pagination.value.current;
        params.hisId = Father.value.id;
        params.pageSize = pagination.value.pageSize;
        return filterObj(params);
  }

  function handleTableChange(paginations, filters, sorter){
      pagination.value.total = paginations.total;
      pagination.value.current = paginations.current;
      pagination.value.pageSize = paginations.pageSize;
      loadData()
  };
  function onSelectChange(keys,rows){
      selectedRowKeys.value = keys
      selectedRows.value = rows
  }
  function handleCancel(){
    visible.value = false
    selectedRowKeys.value = []
    selectedRows.value=[]
  }
  function getTable(record){
      visible.value = true
      Father.value = record
      loadData()
  }
  function viewDetail(record){
    SaleOrderFormModalRef.value.getVersionDetail(record)
  }
  defineExpose({
    getTable
  });
</script>
<style scoped lang="less">
/deep/.ant-form-item{
  margin-bottom: 8px !important;
}
// /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
//     padding: 8px !important;
// }

</style>