accout-vue3-ui/src/views/interest/companyAccount/components/company-modal.vue

<script setup lang="ts">
import { ElTable } from "element-plus";
import { reactive, ref, unref } from "vue";
import { useResponseHandle } from "/@/hooks/core/useAsync";
import { httpCompanyList } from "/@/api/interest/account";

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

const params = ref({
  name: ""
});

const loading = ref(false);
const visible = ref(false);

const emit = defineEmits(["choose"]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const responseHandle = useResponseHandle();

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

async function requestPaymentList() {
  const { pageSize: size, currentPage: page } = pagination;
  loading.value = true;
  const { code, message, data } = await httpCompanyList({
    ...params.value,
    size,
    page
  });

  responseHandle({
    code,
    message,
    handler: () => {
      pagination.total = data.count;
      paymentList.value = data.list;
    }
  });

  loading.value = false;
}

function handleConfirm() {
  visible.value = false;
  emit("choose", unref(selectOrder));
}

function handleSelectionChange(values) {
  selectOrder.value = values;
}

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

  pagination.currentPage = 1;
  requestPaymentList();
}

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

<template>
  <el-dialog
    v-model="visible"
    title="业务公司"
    center
    width="1040px"
    @open="() => requestPaymentList()"
    @close="() => (params.name = '')"
  >
    <div flex mb-2>
      <div flex flex-1 gap="5" pr="20px">
        <el-input placeholder="公司名称" size="small" v-model="params.name" />
      </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
      v-loading="loading"
      border
      ref="tableRef"
      :data="paymentList"
      size="small"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="公司编号" prop="companyNo" show-overflow-tooltip />
      <el-table-column label="公司名称" prop="name" show-overflow-tooltip />
      <!--<el-table-column label="公司类型" prop="nature" show-overflow-tooltip />-->
    </el-table>
    <div flex justify-between mt-2>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="requestPaymentList"
      />

      <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>