1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
| <template>
| <section>
| <the-member-info
| title="实名信息"
| :data="[
| '真实姓名：张三',
| '联系电话：19821231233',
| '证件类型：居民身份证',
| '证件码：566635477547575777773',
| '性别：男',
| '民族：汉',
| '出生日期：2003-12-12',
| '户口性质：农',
| '户籍地：A小区1栋2单元201',
| '所在单位：xx责任有限公司',
| '学历：本科',
| '婚姻状态：未婚'
| ]"
| />
| <the-member-info
| title="重点人员信息"
| :data="[
| '曾用名：张三',
| '绰号：小张',
| '体表标识：左眉毛有伤疤',
| '社保号码：--',
| '身高：189cm ',
| '民族：汉',
| '出生日期：2003-12-12',
| '体重：50KG',
| '户籍地：A小区1栋2单元201',
| '所在单位：xx责任有限公司',
| '学历：本科',
| '婚姻状态：未婚'
| ]"
| />
| <the-a-table
| :columns="columns"
| :data="data"
| :pagination="false"
| :checked-value="checkedValue"
| :col-open-show="true"
| :show-selection="false"
| @selTableCol="selTableCol"
| >
| <template #index="{ record, rowIndex, column }">
| {{ rowIndex + 1 }}
| </template>
| <template #action="{ record, rowIndex, column }">
| <a-button type="text" size="small">查看</a-button>
| <a-button type="text" size="small">管理</a-button>
| <a-button type="text" size="small">关闭</a-button>
| </template>
| </the-a-table>
| <div>
| <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
| </div>
| </section>
| </template>
|
| <script lang="ts" setup name="member-basic">
| const columns = [
| {
| title: "序号",
| key: "1",
| dataIndex: "index",
| width: 80
| },
| {
| title: "居住地址",
| dataIndex: "name",
| key: "2",
| width: 280
| },
| {
| title: "入住时间",
| dataIndex: "inTime",
| key: "3"
| },
| {
| title: "撤离时间",
| dataIndex: "outTime",
| key: "4"
| },
| {
| title: "撤离信息",
| dataIndex: "outInfo",
| key: "4"
| },
| {
| title: "居住状态",
| dataIndex: "status",
| key: "4"
| }
| ];
|
| const checkedValue = ref<string[]>(["序号", "居住地址", "入住时间", "撤离时间", "撤离信息", "居住状态"]);
| const data = [
| {
| index: "1",
| name: "@派出所@@小区3栋一单元",
| inTime: "2024.10.12 12:12",
| outTime: "-",
| outInfo: "--",
| status: "在住"
| },
| {
| index: "2",
| name: "@派出所@@小区3栋一单元",
| inTime: "2024.10.12 12:12",
| outTime: "-",
| outInfo: "--",
| status: "撤离"
| },
| {
| index: "3",
| name: "@派出所@@小区3栋一单元",
| inTime: "2024.10.12 12:12",
| outTime: "-",
| outInfo: "--",
| status: "撤离"
| },
| {
| index: "4",
| name: "@派出所@@小区3栋一单元",
| inTime: "2024.10.12 12:12",
| outTime: "-",
| outInfo: "--",
| status: "撤离"
| }
| ];
| const selTableCol = (val: any) => {
| checkedValue.value = val;
| console.log(val);
| };
| </script>
|
| <style lang="scss" scoped>
| section {
| padding: 10px;
| }
| </style>
|
|
