accout-vue3-ui/src/views/InvoiceSales/refund/components/capital-modal.vue

<script setup lang="ts">
import { ref, unref } from "vue";
import { ElTable } from "element-plus";
import { useAsync } from "/@/hooks";
import { httpTradeList } from "/@/api/InvoiceSales/refund";
import { CAPITAL_COLUMNS, tableColumns } from "/@/utils/details/tragelog";

const visible = ref(false);
const selectOrder = ref<Array<Record<string, string>>>([]);

const columns = CAPITAL_COLUMNS.filter(({ field }) => field !== "status");

const emit = defineEmits(["on-add-order"]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);

const { run, data, loading, pagination } = useAsync({
  initalData: [],
  isList: true,
  initalPagination: {
    currentPage: 1,
    pageSize: 15,
    total: 0
  }
});

const params = ref({
  tradNo: "",
  logNo: ""
});

const requestPaymentlist = () => {
  const { pageSize: size, currentPage: page } = pagination;
  run(httpTradeList({ status: "2", ...params.value, page, size }));
};

function handleConfirm() {
  visible.value = false;
  emit("on-add-order", unref(selectOrder.value[0]));
}

function handleSelectionChange(values) {
  if (values.length > 1) {
    const value = values.pop();
    tableRef.value.clearSelection();
    tableRef.value.toggleRowSelection(value, true);
    selectOrder.value = [value];
  } else {
    selectOrder.value = [values[0]];
  }
}

function onSearch(_isReset = false) {
  if (_isReset) {
    params.value = {
      tradNo: "",
      logNo: ""
    };
  }

  pagination.currentPage = 1;
  requestPaymentlist();
}

function handleSizeChange() {
  pagination.currentPage = 1;
  requestPaymentlist();
}

defineExpose({
  onDisplay: () => (visible.value = true)
});
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visible"
    title="资金认领"
    center
    @open="() => requestPaymentlist()"
  >
    <div flex mb-2>
      <div flex flex-1 gap="5" pr="20px">
        <el-input placeholder="资金编码" size="small" v-model="params.tradNo" />
        <el-input placeholder="认领编码" size="small" v-model="params.logNo" />
      </div>

      <div flex width="120px">
        <el-button size="small" type="primary" @click="() => onSearch()"
          >搜索</el-button
        >
        <el-button size="small" @click="() => onSearch(true)">重置</el-button>
      </div>
    </div>

    <el-table
      border
      ref="tableRef"
      :data="data"
      size="small"
      row-key="id"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      max-height="520px"
    >
      <el-table-column type="selection" align="center" width="40" />
      <el-table-column
        v-for="{ field, label, width } in tableColumns"
        :key="field"
        :prop="field"
        :label="label"
        :width="width"
        show-overflow-tooltip
      />
    </el-table>

    <div flex justify-between mt-2>
      <el-pagination
        :total="pagination.total"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        @current-change="requestPaymentlist"
        @size-change="handleSizeChange"
        layout="sizes, prev, pager, next"
        :page-sizes="[15, 50, 100]"
      />

      <el-button type="primary" size="small" @click="handleConfirm"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-table__header) {
  .el-checkbox {
    display: none;
  }
}
</style>