1313 lines
52 KiB
Vue
1313 lines
52 KiB
Vue
<template>
|
||
<section class="localResident">
|
||
<ai-detail>
|
||
<ai-title slot="title" :title="pageTitle" isShowBack @onBackClick="back" isShowBottomBorder>
|
||
<template v-if="showDetail" #rightBtn>
|
||
<el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
|
||
</el-button>
|
||
<el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="$permissions('app_appresident_del')">
|
||
删除人员
|
||
</el-button>
|
||
</template>
|
||
</ai-title>
|
||
<template #content>
|
||
<el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
|
||
label-position="right" size="small">
|
||
<el-tabs tab-position="left" v-if="showDetail">
|
||
<el-tab-pane label="基本信息">
|
||
<ai-edit-card title="基本信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template #edit>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="姓名：" prop="name">
|
||
<el-input
|
||
v-model="baseInfo.name"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入姓名"
|
||
maxlength="20"
|
||
show-word-limit
|
||
:disabled="!!showDetail"
|
||
/>
|
||
<!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="身份证号：" prop="idNumber">
|
||
<el-input
|
||
v-model="baseInfo.idNumber"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入身份证号"
|
||
:maxlength="18"
|
||
@input="idChange"
|
||
:disabled="!!showDetail"
|
||
/>
|
||
<!-- <p v-else>
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
|
||
</p>-->
|
||
</el-form-item>
|
||
<el-form-item label="性别：" prop="sex">
|
||
<el-select v-model="baseInfo.sex"
|
||
placeholder="请选择"
|
||
disabled
|
||
clearable>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('sex')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>
|
||
{{dict.getLabel('sex',baseInfo.sex)||'-'}}
|
||
</p>-->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="个人照片：" prop="photo">
|
||
<ai-avatar :instance="instance" v-model="baseInfo.photo"/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="出生日期：">
|
||
<el-date-picker
|
||
disabled
|
||
:editable="false"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"
|
||
v-model="baseInfo.birthday"
|
||
type="date"
|
||
|
||
placeholder="选择日期"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="文化程度：" prop="education">
|
||
<el-select
|
||
v-model="baseInfo.education"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('education')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="政治面貌：" prop="politicsStatus">
|
||
<el-select
|
||
v-model="baseInfo.politicsStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('politicsStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="职业：" prop="job">
|
||
<el-select
|
||
v-model="baseInfo.job"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('job')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="宗教信仰：" prop="faithType">
|
||
<el-select
|
||
v-model="baseInfo.faithType"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('faithType')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="年龄：" prop="age">
|
||
<el-input
|
||
disabled
|
||
v-model="baseInfo.age"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入年龄"
|
||
type="number"
|
||
@mousewheel.native.prevent
|
||
></el-input>
|
||
<!-- <p v-else>{{baseInfo.age}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="民族：" prop="nation">
|
||
<el-select
|
||
v-model="baseInfo.nation"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('nation')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="婚姻状况：" prop="maritalStatus">
|
||
<el-select
|
||
v-model="baseInfo.maritalStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('maritalStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="兵役状况：" prop="militaryStatus">
|
||
<el-select
|
||
v-model="baseInfo.militaryStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('militaryStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="areaList">
|
||
<el-form-item label="籍贯：" prop=" birthplaceAreaId">
|
||
<ai-area-select
|
||
clearable
|
||
always-show
|
||
:instance="instance"
|
||
v-model="baseInfo.birthplaceAreaId"
|
||
:areaLevel="3"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
<template>
|
||
<el-row type="flex">
|
||
<div class="detail-info fill">
|
||
<h3 class="name">{{ baseInfo.name || '-' }}</h3>
|
||
<div class="detail-left fill">
|
||
<div class="info">
|
||
<span class="label">性别：</span>
|
||
<span class="value">{{ dict.getLabel('sex', baseInfo.sex) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">出生日期：</span>
|
||
<span class="value" v-text="baseInfo.birthday||'-'"/>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">籍贯：</span>
|
||
<span class="value">{{ baseInfo.birthplaceAreaName || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">文化程度：</span>
|
||
<span class="value">{{ dict.getLabel('education', baseInfo.education) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">政治面貌：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('politicsStatus', baseInfo.politicsStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">宗教信仰：</span>
|
||
<span class="value">{{ dict.getLabel('faithType', baseInfo.faithType) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-right fill">
|
||
<div class="info">
|
||
<span class="label">身份证号：</span>
|
||
<span class="value">
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"></ai-id>
|
||
</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">年龄：</span>
|
||
<span class="value">{{ baseInfo.age }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">民族：</span>
|
||
<span class="value">{{ dict.getLabel('nation', baseInfo.nation) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">婚姻状况：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('maritalStatus', baseInfo.maritalStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">兵役状况：</span>
|
||
<span
|
||
class="value"
|
||
>{{ dict.getLabel('militaryStatus', baseInfo.militaryStatus) || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">职业：</span>
|
||
<span class="value">{{ dict.getLabel('job', baseInfo.job) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ai-avatar v-model="baseInfo.photo" :editable="false"/>
|
||
</el-row>
|
||
</template>
|
||
</ai-edit-card>
|
||
<ai-edit-card title="联络信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template #edit>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="联系方式：" prop="phone">
|
||
<el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
|
||
show-word-limit/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="现住址：" prop="currentAreaId">
|
||
<ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
|
||
v-model="baseInfo.currentAreaId"
|
||
:valueLevel="4"/>
|
||
<el-form-item>
|
||
<el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
|
||
clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</template>
|
||
<template>
|
||
<div class="info" style="margin-bottom:8px">
|
||
<span class="label">联系方式：</span>
|
||
<span class="value">{{ baseInfo.phone || '-' }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">现住址：</span>
|
||
<span class="value">{{ [baseInfo.currentAreaName, baseInfo.currentAddress].join("") || "-" }}</span>
|
||
</div>
|
||
</template>
|
||
</ai-edit-card>
|
||
<ai-edit-card title="户籍信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template #edit>
|
||
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="是否户主：" prop="householdName">
|
||
<el-select v-model="baseInfo.householdName" placeholder="请选择"
|
||
@change="householdRelationChange" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdName')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
|
||
<el-select v-model="baseInfo.householdRelation" placeholder="请选择" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdRelation')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
|
||
<el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
|
||
clearable/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="户籍地：" prop="householdAreaId">
|
||
<ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
|
||
<el-form-item v-if="baseInfo.householdAreaId">
|
||
<el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
|
||
clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</template>
|
||
<template>
|
||
<div class="detail-info">
|
||
<div class="detail-left fill">
|
||
<div class="info">
|
||
<span class="label">是否户主：</span>
|
||
<span class="value">{{ dict.getLabel('householdName', baseInfo.householdName) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info fill" v-if="baseInfo.householdName==0">
|
||
<span class="label">与户主关系：</span>
|
||
<span class="value">{{
|
||
dict.getLabel('householdRelation', baseInfo.householdRelation) || '-'
|
||
}}</span>
|
||
</div>
|
||
<div class="info fill" v-if="baseInfo.householdName==0">
|
||
<span class="label">户主身份证号：</span>
|
||
<span class="value">
|
||
<ai-id mode="show" v-model="baseInfo.householdIdNumber" right-btn></ai-id>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-info-p info">
|
||
<span class="label">户籍地：</span>
|
||
<span class="value">
|
||
{{ baseInfo.householdAreaName + (baseInfo.householdAddress ? baseInfo.householdAddress : "") }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</ai-edit-card>
|
||
<ai-card title="家庭成员">
|
||
<div slot="content">
|
||
<el-table
|
||
border
|
||
ref="multipleTable"
|
||
:data="family"
|
||
style="margin-top:8px;"
|
||
|
||
header-cell-class-name="table-header"
|
||
tooltip-effect="light"
|
||
row-class-name="table-row"
|
||
cell-class-name="table-cell"
|
||
>
|
||
<el-table-column align="center" prop="name" label="与户主关系">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.householdRelation ? dict.getLabel('householdRelation', scope.row.householdRelation) : "户主"
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="idNumber" label="性别" align="center" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<span>{{ parseInt(scope.row.idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="age" label="年龄" align="center" show-overflow-tooltip></el-table-column>
|
||
<el-table-column
|
||
prop="idNumber"
|
||
label="身份证号"
|
||
align="center"
|
||
width="200"
|
||
show-overflow-tooltip>
|
||
<template slot-scope="{row}">
|
||
<ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<el-button icon="iconfont iconShow" title="查看详情" class="dict-list-operation"
|
||
@click="showFamily(scope.row)" type="text"/>
|
||
</template>
|
||
</el-table-column>
|
||
<div slot="empty" class="no-data" style="height:160px;"/>
|
||
</el-table>
|
||
</div>
|
||
</ai-card>
|
||
<ai-edit-card title="标签信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template #edit>
|
||
<el-form-item label-width="0">
|
||
<el-checkbox label="1">标签1</el-checkbox>
|
||
</el-form-item>
|
||
</template>
|
||
<template>
|
||
<el-tag effect="dark">标签二</el-tag>
|
||
</template>
|
||
</ai-edit-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="资产信息" lazy>
|
||
<ai-edit-card title="车辆信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template>
|
||
<el-form-item label-width="0">
|
||
<span v-for="car in baseInfo.cars" :key="car.id" v-text="car.license"/>
|
||
<ai-empty v-if="baseInfo.cars.length==0"/>
|
||
</el-form-item>
|
||
</template>
|
||
<template #edit>
|
||
<el-form-item label-width="0" prop="cars">
|
||
<el-input v-for="(car,i) in baseInfo.cars" :key="car.id" v-model="car.license" clearable
|
||
placeholder="请输入车牌号">
|
||
<el-button slot="append" type="text" @click="baseInfo.cars.splice(i,1)">删除</el-button>
|
||
</el-input>
|
||
<el-button type="text" @click="baseInfo.cars.push({})">新增车辆</el-button>
|
||
</el-form-item>
|
||
</template>
|
||
</ai-edit-card>
|
||
<ai-edit-card title="房屋信息" :show-btn="permissions('app_appresident_edit')"
|
||
@save="saveFrom" @cancel="getDetail(baseInfo.id)">
|
||
<template>
|
||
<el-form-item label-width="0">
|
||
<span v-for="house in baseInfo.houseList" :key="house.id"
|
||
v-text="[house.areaName,house.address].join('')"/>
|
||
<ai-empty v-if="baseInfo.houseList.length==0"/>
|
||
</el-form-item>
|
||
</template>
|
||
<template #edit>
|
||
<div v-for="house in baseInfo.houseList" :key="house.id">
|
||
<ai-area-get v-model="house.areaId" :instance="instance"/>
|
||
<el-input v-model="house.address" clearable placeholder="请输入详情地址" size="small"/>
|
||
</div>
|
||
<el-button type="text" @click="baseInfo.houseList.push({})">新增房屋</el-button>
|
||
</template>
|
||
</ai-edit-card>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="特殊人群" lazy v-if="hasSpecial">
|
||
<ai-card v-for="(item, index) in baseInfo.tsrqInfos" :key="index" :title="item.applicationName">
|
||
<ai-wrapper
|
||
slot="content"
|
||
label-width="120px">
|
||
<ai-info-item
|
||
v-for="(filed, i) in item.tableInfos"
|
||
:label="filed.fieldName"
|
||
:key="i"
|
||
:isLine="filed.grid === '1'">
|
||
<ai-file-list :fileList="formData[item.fieldDbName]" v-if="item.type == 'upload'"
|
||
:fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
|
||
<div v-else>{{ filed.fieldValue || '-' }}</div>
|
||
</ai-info-item>
|
||
</ai-wrapper>
|
||
</ai-card>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<template v-else>
|
||
<ai-card title="基本信息">
|
||
<template #content>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="姓名：" prop="name">
|
||
<el-input
|
||
v-model="baseInfo.name"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入姓名"
|
||
maxlength="20"
|
||
show-word-limit
|
||
:disabled="!!showDetail"
|
||
/>
|
||
<!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="身份证号：" prop="idNumber">
|
||
<el-input
|
||
v-model="baseInfo.idNumber"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入身份证号"
|
||
:maxlength="18"
|
||
@input="idChange"
|
||
:disabled="!!showDetail"
|
||
/>
|
||
<!-- <p v-else>
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
|
||
</p>-->
|
||
</el-form-item>
|
||
<el-form-item label="性别：" prop="sex">
|
||
<el-select v-model="baseInfo.sex"
|
||
placeholder="请选择"
|
||
disabled
|
||
clearable>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('sex')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>
|
||
{{dict.getLabel('sex',baseInfo.sex)||'-'}}
|
||
</p>-->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="个人照片：" prop="photo">
|
||
<ai-avatar :instance="instance" v-model="baseInfo.photo"/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="出生日期：">
|
||
<el-date-picker
|
||
disabled
|
||
:editable="false"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd"
|
||
v-model="baseInfo.birthday"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="文化程度：" prop="education">
|
||
<el-select
|
||
v-model="baseInfo.education"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('education')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="政治面貌：" prop="politicsStatus">
|
||
<el-select
|
||
v-model="baseInfo.politicsStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('politicsStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="职业：" prop="job">
|
||
<el-select
|
||
v-model="baseInfo.job"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('job')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="宗教信仰：" prop="faithType">
|
||
<el-select
|
||
v-model="baseInfo.faithType"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('faithType')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="年龄：" prop="age">
|
||
<el-input
|
||
disabled
|
||
v-model="baseInfo.age"
|
||
autocomplete="off"
|
||
size="small"
|
||
placeholder="请输入年龄"
|
||
type="number"
|
||
@mousewheel.native.prevent
|
||
></el-input>
|
||
<!-- <p v-else>{{baseInfo.age}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="民族：" prop="nation">
|
||
<el-select
|
||
v-model="baseInfo.nation"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('nation')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="婚姻状况：" prop="maritalStatus">
|
||
<el-select
|
||
v-model="baseInfo.maritalStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('maritalStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
<el-form-item label="兵役状况：" prop="militaryStatus">
|
||
<el-select
|
||
v-model="baseInfo.militaryStatus"
|
||
placeholder="请选择"
|
||
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item,i) in dict.getDict('militaryStatus')"
|
||
:label="item.dictName"
|
||
:key="i"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="areaList">
|
||
<el-form-item label="籍贯：" prop=" birthplaceAreaId">
|
||
<ai-area-select
|
||
clearable
|
||
always-show
|
||
:instance="instance"
|
||
v-model="baseInfo.birthplaceAreaId"
|
||
:areaLevel="3"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="联络信息">
|
||
<template #content>
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="联系方式：" prop="phone">
|
||
<el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" :maxlength="11"
|
||
show-word-limit/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="现住址：" prop="currentAreaId">
|
||
<ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel"
|
||
v-model="baseInfo.currentAreaId"
|
||
:valueLevel="4"/>
|
||
<el-form-item>
|
||
<el-input v-model="baseInfo.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit
|
||
clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="户籍信息">
|
||
<template #content>
|
||
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="是否户主：" prop="householdName">
|
||
<el-select v-model="baseInfo.householdName" placeholder="请选择"
|
||
@change="householdRelationChange" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdName')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
|
||
<el-select v-model="baseInfo.householdRelation" placeholder="请选择" clearable>
|
||
<el-option v-for="(item,i) in dict.getDict('householdRelation')"
|
||
:label="item.dictName" :key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
|
||
<el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18"
|
||
clearable/>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="户籍地：" prop="householdAreaId">
|
||
<ai-area-select clearable always-show :instance="instance" v-model="baseInfo.householdAreaId"/>
|
||
<el-form-item v-if="baseInfo.householdAreaId">
|
||
<el-input v-model="baseInfo.householdAddress" placeholder="详细地址" maxlength="30" show-word-limit
|
||
clearable/>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
</el-form>
|
||
</template>
|
||
<template v-if="!showDetail" #footer>
|
||
<el-button @click="back">取消</el-button>
|
||
<el-button type="primary" @click="saveFrom()">保存</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
<el-dialog class="deleteStyle" :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
|
||
<el-row type="flex" justify="space-between">
|
||
<ul>
|
||
<li>
|
||
<span>姓名：</span>
|
||
<p>{{ familyInfo.name }}</p>
|
||
</li>
|
||
<li>
|
||
<span>身份证号：</span>
|
||
<p>
|
||
<ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"></ai-id>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<span>性别：</span>
|
||
<p>{{ dict.getLabel('sex', familyInfo.sex) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>年龄：</span>
|
||
<p>{{ familyInfo.age }}</p>
|
||
</li>
|
||
<li>
|
||
<span>联系方式：</span>
|
||
<p>{{ familyInfo.phone }}</p>
|
||
</li>
|
||
<li>
|
||
<span>民族：</span>
|
||
<p>{{ dict.getLabel('nation', familyInfo.nation) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>籍贯：</span>
|
||
<p>{{ familyInfo.birthplaceAreaName }}</p>
|
||
</li>
|
||
<li>
|
||
<span>文化程度：</span>
|
||
<p>{{ dict.getLabel('education', familyInfo.education) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>婚姻状况：</span>
|
||
<p>{{ dict.getLabel('maritalStatus', familyInfo.maritalStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>政治面貌：</span>
|
||
<p>{{ dict.getLabel('politicsStatus', familyInfo.politicsStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>兵役状况：</span>
|
||
<p>{{ dict.getLabel('militaryStatus', familyInfo.militaryStatus) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>宗教信仰：</span>
|
||
<p>{{ dict.getLabel('faithType', familyInfo.faithType) }}</p>
|
||
</li>
|
||
<li>
|
||
<span>职业：</span>
|
||
<p>{{ dict.getLabel('job', familyInfo.job) }}</p>
|
||
</li>
|
||
<li style="width:100%;">
|
||
<span>现住址：</span>
|
||
<p>{{ familyInfo.currentAreaName + familyInfo.currentAddress }}</p>
|
||
</li>
|
||
</ul>
|
||
<div class="img_block">
|
||
<ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
|
||
</div>
|
||
</el-row>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button style="width:92px" size="small" @click="familyDialog = false">关闭
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="档案注销"
|
||
class="deleteStyle"
|
||
:visible.sync="writeoffDialog"
|
||
width="700px" top="25vh"
|
||
@close="familyInit()"
|
||
:close-on-click-modal="false">
|
||
<el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
|
||
<el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
|
||
<el-form-item label="身份证号：">
|
||
<ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
|
||
</el-form-item>
|
||
<el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
|
||
:rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
|
||
<el-select v-model="writeInfo.logoutReason" placeholder="请选择">
|
||
<el-option v-for="(item,i) in dict.getDict('logoutReason')"
|
||
:label="item.dictName"
|
||
:key="i" :value="item.dictValue"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
|
||
<el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" style="text-align: center;">
|
||
<el-button
|
||
style="width:92px"
|
||
size="small"
|
||
class="delete-btn"
|
||
@click="writeoffDialog=false,$refs.writeInfo.resetFields();"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
style="width:92px"
|
||
size="small"
|
||
type="primary"
|
||
@click="submitForm('writeInfo')"
|
||
>确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
import AiEditCard from "./components/AiEditCard";
|
||
|
||
export default {
|
||
name: "localResident",
|
||
components: {AiEditCard},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
active: String
|
||
},
|
||
data() {
|
||
let IdNumberPass = (rule, value, callback) => {
|
||
if (value) {
|
||
if (this.idCardNoUtil.checkIdCardNo(value)) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("身份证号格式错误"));
|
||
}
|
||
} else {
|
||
callback(new Error("请输入身份证号"));
|
||
}
|
||
};
|
||
return {
|
||
buildingCascader: true,
|
||
houseCascader: true,
|
||
navId: 0,
|
||
baseInfo: {
|
||
registerStatus: "",
|
||
tips: [],
|
||
age: "",
|
||
birthplaceAreaId: "",
|
||
currentAddress: "",
|
||
currentAreaId: "",
|
||
education: "",
|
||
faithType: "",
|
||
fileStatus: "",
|
||
householdAddress: "",
|
||
householdAreaId: "",
|
||
householdIdNumber: "",
|
||
householdName: "",
|
||
householdRelation: "",
|
||
id: "",
|
||
idNumber: "",
|
||
job: "",
|
||
logoutDescription: "",
|
||
logoutReason: "",
|
||
logoutTime: "",
|
||
logoutUserId: "",
|
||
maritalStatus: "",
|
||
militaryStatus: "",
|
||
name: "",
|
||
nation: "",
|
||
phone: "",
|
||
photo: "",
|
||
politicsStatus: "",
|
||
sex: "",
|
||
tsrqInfos: []
|
||
},
|
||
family: [],
|
||
familyDialog: false,
|
||
familyInfo: {},
|
||
writeoffDialog: false,
|
||
writeInfo: {
|
||
id: "",
|
||
logoutReason: "",
|
||
logoutDescription: "",
|
||
fileStatus: "1"
|
||
},
|
||
rules: {
|
||
name: [{required: true, message: "请输入姓名", trigger: "blur"}],
|
||
idNumber: [
|
||
{required: true, validator: IdNumberPass, trigger: "blur"}
|
||
],
|
||
sex: [{required: true, message: "请选择性别", trigger: "blur"}],
|
||
currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
|
||
{
|
||
validator: (r, v, cb) => {
|
||
if (/.+0{3}$/.test(v)) {
|
||
cb("现住址必须选到村级")
|
||
} else cb()
|
||
}, trigger: "blur"
|
||
}],
|
||
currentAddress: [{message: "请选择现住址详细地址", required: true}],
|
||
householdAreaId: [
|
||
{
|
||
validator: (r, v, cb) => {
|
||
if (/.+0{3}$/.test(v) && v) {
|
||
cb("户籍地必须选到村级")
|
||
} else cb()
|
||
}, trigger: "blur"
|
||
}
|
||
],
|
||
householdName: [
|
||
{required: true, message: "请选择是否户主", trigger: "change"}
|
||
],
|
||
householdRelation: [
|
||
{required: true, message: "请选择与户主关系", trigger: "change"}
|
||
],
|
||
householdIdNumber: [
|
||
{required: true, validator: IdNumberPass, trigger: "blur"}
|
||
],
|
||
householdAddress: [
|
||
{required: true, message: "请选择户籍地详细地址", trigger: "blur"}
|
||
]
|
||
},
|
||
imgUrl: "",
|
||
fileList: [],
|
||
disabledLevel: 0
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
showDetail() {
|
||
return !!this.$route.query?.id
|
||
},
|
||
pageTitle() {
|
||
return this.showDetail ? '本地居民信息' : '添加本地居民'
|
||
},
|
||
hasSpecial() {
|
||
//是否有特殊人员信息
|
||
return this.baseInfo.tsrqInfos?.length > 0
|
||
}
|
||
},
|
||
methods: {
|
||
back() {
|
||
this.$router.push({query: {}})
|
||
},
|
||
householdRelationChange() {
|
||
this.baseInfo.householdIdNumber = "";
|
||
this.baseInfo.householdRelation = "";
|
||
},
|
||
saveFrom(cb) {
|
||
this.$refs.ruleForm.validate(v => {
|
||
if (v) {
|
||
this.saveFromFn().then(() => {
|
||
if (cb) {
|
||
cb()
|
||
this.getDetail()
|
||
} else {
|
||
this.back()
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
submitForm(formName) {
|
||
this.writeInfo.id = this.baseInfo.id;
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
this.instance.post(`/app/appresident/addOrUpdate`, {
|
||
...this.writeInfo
|
||
}).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success("注销成功");
|
||
this.writeoffDialog = false;
|
||
this.$router.push({query: {}});
|
||
}
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
familyInit() {
|
||
Object.keys(this.writeInfo).forEach(e => {
|
||
this.writeInfo[e] = "";
|
||
});
|
||
this.$refs.writeInfo.resetFields();
|
||
},
|
||
saveFromFn() {
|
||
let {currentHouseList, householdHouseList, tips} = this.baseInfo
|
||
return this.instance.post(`/app/appresident/addOrUpdate`, {
|
||
residentType: this.$route.query.type,
|
||
...this.baseInfo,
|
||
currentHouseList: currentHouseList?.join("|"),
|
||
householdHouseList: householdHouseList?.join("|"),
|
||
tips: tips?.join("|")
|
||
}).then(res => {
|
||
if (res?.code == 0) {
|
||
this.$message.success("保存成功");
|
||
}
|
||
})
|
||
},
|
||
getDetail() {
|
||
let {id} = this.$route.query
|
||
this.instance.post(`/app/appresident/detail`, null, {
|
||
params: {id}
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
let {currentHouseList, householdHouseList, tips} = res.data.resident
|
||
this.baseInfo = {
|
||
cars: [],
|
||
houseList: [],
|
||
...res.data.resident,
|
||
currentHouseList: currentHouseList?.split("|"),
|
||
householdHouseList: householdHouseList?.split("|"),
|
||
tips: tips ? tips.split("|") : [],
|
||
};
|
||
this.family = res.data.family;
|
||
this.IdCard(this.baseInfo.idNumber);
|
||
}
|
||
});
|
||
},
|
||
showFamily(row) {
|
||
this.familyInfo = row;
|
||
if (this.familyInfo.photo) {
|
||
this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
|
||
} else {
|
||
this.familyInfo.imgUrl = "";
|
||
}
|
||
this.familyDialog = true;
|
||
},
|
||
beforeWriteOff() {
|
||
this.writeoffDialog = true;
|
||
},
|
||
handleDelete() {
|
||
this.$confirm("删掉档案后，\n" +
|
||
`<span class="username">${this.baseInfo.name}</span>` +
|
||
" 的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
|
||
title: "档案删除"
|
||
}).then(() => {
|
||
this.instance.post(`/app/appresident/delete?ids=${this.baseInfo.id}`).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success("删除成功");
|
||
this.$router.push({query: {}});
|
||
}
|
||
});
|
||
}).catch(() => 0)
|
||
},
|
||
idChange(val) {
|
||
if (val.length == 18) {
|
||
this.IdCard(val);
|
||
}
|
||
},
|
||
IdCard(UUserCard) {
|
||
if (UUserCard) {
|
||
this.baseInfo.age = this.$calcAge(UUserCard)
|
||
let {birthday, sex} = this.idCardNoUtil.getIdCardInfo(UUserCard)
|
||
this.baseInfo.sex = sex
|
||
this.baseInfo.birthday = birthday
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
|
||
if (!this.showDetail) {
|
||
// this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
|
||
this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
|
||
this.$nextTick(() => this.$refs.ruleForm?.resetFields())
|
||
} else {
|
||
this.getDetail(this.$route.query.id);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.localResident {
|
||
height: 100%;
|
||
font-size: 14px;
|
||
|
||
::v-deep.el-tabs__content {
|
||
max-height: calc(100vh - 136px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
|
||
.el-form-item {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.el-cascader, .el-select, .el-date-editor {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-form-item__error {
|
||
position: static;
|
||
}
|
||
|
||
::v-deep .content-right {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding-bottom: 80px;
|
||
|
||
.ailist-title {
|
||
padding: 0;
|
||
}
|
||
|
||
.above {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.left {
|
||
width: 380px;
|
||
float: left;
|
||
}
|
||
|
||
.right {
|
||
width: 380px;
|
||
float: left;
|
||
|
||
.pictrue {
|
||
display: flex;
|
||
height: 120px;
|
||
|
||
img {
|
||
width: 104px;
|
||
height: 120px;
|
||
border-radius: 2px;
|
||
border: solid 1px #d0d4dc;
|
||
}
|
||
|
||
.upload-demo {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.el-button {
|
||
width: 104px;
|
||
height: 32px;
|
||
background-color: #ffffff;
|
||
border-radius: 2px;
|
||
border: solid 1px #8899bb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 32px;
|
||
width: 50%;
|
||
|
||
span {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
p {
|
||
margin: 0
|
||
}
|
||
}
|
||
}
|
||
|
||
.img_block {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.detail-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
h3 {
|
||
width: 100%;
|
||
flex-shrink: 0
|
||
}
|
||
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1.4;
|
||
margin-bottom: 16px;
|
||
|
||
.label {
|
||
flex-shrink: 0;
|
||
width: 100px;
|
||
margin-right: 40px;
|
||
text-align: right;
|
||
color: #888;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.value {
|
||
color: #222;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.fill {
|
||
flex: 1;
|
||
min-width: 50%;
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
|
||
.el-checkbox {
|
||
margin: 0 !important;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
::v-deep .el-checkbox__label {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
</style>
|