LittleBeePlatform/src/views/Manage/SettleRequestManage/index.vue

<template>
  <div class="main">
    <!-- 标题 -->
    <div class="cardTitle">申请入驻管理</div>
    <!-- 搜索 -->
    <div class="search-box">
      <a-space size="large">
        <a-input placeholder="请输入申请人/公司名" />
        <a-select style="width: 200px" placeholder="选择状态" />
        <a-button type="primary">查 询</a-button>
        <a-button>重 置</a-button>
      </a-space>
    </div>
    <!-- 表格 -->
    <div id="commonTable">
      <div style="margin-bottom: 16px">
        <a-button type="primary" :disabled="!hasSelected" :loading="loading">
          批量操作
        </a-button>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `已选择 ${selectedRowKeys.length} 条` }}
          </template>
        </span>
      </div>
      <a-table
        :scroll="{ x: 1300 }"
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <!-- 操作 -->
        <span slot="action" slot-scope="scope">
          <a @click="detail(scope)">详情</a>
        </span>
        <span slot="formatter" slot-scope="scope">{{
          scope === 1 ? "可" : ""
        }}</span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
	data() {
		return {
			// 搜索项
			searchForm: {
				name: "",
				code: "",
			},
			//   列
			columns: [
				{
					title: "Name",
					dataIndex: "name",
					width: "200",
				},
				{
					title: "Gender",
					dataIndex: "gender",
					width: "200",
				},
				{
					title: "Gender1",
					dataIndex: "gender1",
					width: "200",
				},
				{
					title: "Gender2",
					dataIndex: "gender2",
					width: "200",
				},
				{
					title: "Gender3",
					dataIndex: "gender3",
					width: "200",
				},
				{
					title: "Gender4",
					dataIndex: "gender4",
					width: "200",
				},
				{
					title: "Gender5",
					dataIndex: "gender5",
					width: "200",
				},
				{
					title: "Gender6",
					dataIndex: "gender6",
					width: "200",
				},
				{
					title: "status",
					dataIndex: "status",
					scopedSlots: { customRender: "formatter" },
					width: "200",
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "80",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
			],
			//   数据
			tableData: [
				{
					name: "11",
					id: 1,
					status: 1,
				},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
			],
			//   分页
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
			},
			loading: false,
			selectedRowKeys: [],
		};
	},
	mounted(){},
	computed: {
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
	methods: {
		detail(data){
			console.log(data);
			this.$router.push({name:'settle_detail'})
		},
		onSelectChange(selectedRowKeys) {
			console.log("selectedRowKeys changed: ", selectedRowKeys);
			this.selectedRowKeys = selectedRowKeys;
		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
	},
};
</script>

<style lang="less" scoped>
</style>>