feat: 档案表单

This commit is contained in:
wanglei
2024-06-25 10:06:32 +08:00
parent 927a091075
commit ebf726afd5
2 changed files with 193 additions and 171 deletions

View File

@@ -15,28 +15,33 @@
size="small" maxlength="20" size="small" maxlength="20"
show-word-limit></el-input> show-word-limit></el-input>
</el-form-item> </el-form-item>
<el-form-item label="身份证号:" style="width: 100%;" prop="idcard"> <el-form-item label="身份证号:" style="width: 100%;" prop="idNumber">
<el-input v-model="form.name" placeholder="请输入身份证号" autocomplete="off" <el-input v-model="form.idNumber" placeholder="请输入身份证号" autocomplete="off"
size="small" maxlength="18" size="small" maxlength="18" @change="idChange"
show-word-limit></el-input> show-word-limit></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-row type="flex"> <el-row type="flex">
<el-form-item label="性别:" style="width: 100%;" prop="name"> <el-form-item label="性别:" style="width: 100%;" prop="sex">
<el-select placeholder="性别" size="small" style="width: 100%;"></el-select> <ai-select
v-model="form.sex"
style="width: 100%;"
placeholder="性别"
:selectList="$dict.getDict('sex')">
</ai-select>
</el-form-item> </el-form-item>
<el-form-item label="联系电话:" style="width: 100%;" prop="idcard"> <el-form-item label="联系电话:" v-model="form.phone" style="width: 100%;" prop="phone">
<el-input v-model="form.name" placeholder="请输入联系电话" autocomplete="off" <el-input v-model="form.name" placeholder="请输入联系电话" autocomplete="off"
size="small" maxlength="18" size="small" maxlength="18"
show-word-limit></el-input> show-word-limit></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-row type="flex"> <el-row type="flex">
<el-form-item label="出生日期:" style="width: 100%;" prop="name"> <el-form-item label="出生日期:" style="width: 100%;" prop="birthday">
<el-date-picker value-format="yyyy-MM-dd" size="small" placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker> <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday" placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="年龄:" style="width: 100%;" prop="idcard"> <el-form-item label="年龄:" style="width: 100%;" prop="age">
<el-input v-model="form.name" placeholder="请输入年龄" disabled autocomplete="off" size="small"></el-input> <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off" size="small"></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
</template> </template>
@@ -45,16 +50,16 @@
<template #content> <template #content>
<el-row type="flex"> <el-row type="flex">
<div class="flex-colum"> <div class="flex-colum">
<el-form-item label="门店名称:" style="width: 100%;" prop="name"> <el-form-item label="门店名称:" style="width: 100%;" prop="shopName">
<el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off" <el-input v-model="form.shopName" placeholder="请输入姓名" autocomplete="off"
size="small" maxlength="20" size="small" maxlength="20"
show-word-limit></el-input> show-word-limit></el-input>
</el-form-item> </el-form-item>
<el-form-item label="经营类型:" style="width: 100%;" prop="name"> <el-form-item label="经营类型:" style="width: 100%;" prop="operatorType">
<el-select placeholder="请选择经营范围" size="small" style="width: 100%;"></el-select> <el-select placeholder="请选择经营范围" v-model="form.operatorType" size="small" style="width: 100%;"></el-select>
</el-form-item> </el-form-item>
<el-form-item label="所属片区:" style="width: 100%;" prop="name"> <el-form-item label="所属片区:" style="width: 100%;" prop="girdName">
<el-select placeholder="请选择所属片区" size="small" style="width: 100%;"></el-select> <el-select placeholder="请选择所属片区" size="small" v-model="form.girdCode" style="width: 100%;"></el-select>
</el-form-item> </el-form-item>
</div> </div>
@@ -62,7 +67,7 @@
<ai-uploader <ai-uploader
:instance="instance" :instance="instance"
isShowTip isShowTip
v-model="form.thumbUrl" v-model="form.fileUrl"
:limit="1" :limit="1"
:cropOps="cropOps" :cropOps="cropOps"
is-crop> is-crop>
@@ -73,24 +78,24 @@
</ai-uploader> </ai-uploader>
</el-form-item> </el-form-item>
</el-row> </el-row>
<el-form-item label="社会信用代码:" style="width: 100%;" prop="name"> <el-form-item label="社会信用代码:" style="width: 100%;" prop="creditCode">
<el-input v-model="form.code" placeholder="请输入社会统一信用代码" size="small"></el-input> <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="门店住址:" style="width: 100%;" prop="name"> <el-form-item label="门店住址:" style="width: 100%;" prop="addressCode">
<ai-area-select :instance="instance" clearable v-model="form.areaId" always-show @name="v=>form.areaName=v"/> <ai-area-select :instance="instance" clearable v-model="form.addressCode" always-show @name="v=>form.areaName=v"/>
</el-form-item> </el-form-item>
<el-form-item label="" style="width:100%"> <el-form-item label="" style="width:100%" prop="address">
<el-input <el-input
size="small" size="small"
placeholder="请输入详细地址" placeholder="请输入详细地址"
clearable clearable
v-model="form.householdAddress" v-model="form.address"
maxlength="50" maxlength="50"
show-word-limit show-word-limit
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="门店描述:" style="width: 100%"> <el-form-item label="门店描述:" style="width: 100%" prop="description">
<el-input v-model="form.desc" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input> <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
</el-form-item> </el-form-item>
</template> </template>
</ai-card> </ai-card>
@@ -104,6 +109,8 @@
</template> </template>
<script> <script>
import {ID} from "dui/lib/js/utils";
export default { export default {
name: 'Add', name: 'Add',
@@ -115,13 +122,42 @@ export default {
data() { data() {
return { return {
form: {}, form: {
rules: {} name:'',
idNumber:'',
sex:'',
phone:'',
birthday:'',
age:'',
},
rules: {
name:[{ required: true, message: '请输入经营者姓名', trigger: 'blur' }],
idNumber:[{ required: true, message: '请输入身份证号', trigger: 'blur' }],
}
} }
}, },
created () {
this.$dict.load('sex')
},
methods: { methods: {
idChange(val){
if (val.length == 18) {
this.IdCard(val);
}
},
IdCard(UUserCard) {
if (UUserCard) {
const idCard = new ID(UUserCard)
this.form.age = idCard.age
this.form.birthday = idCard.birthday
}
},
handleSave(){ handleSave(){
}, },

View File

@@ -1,125 +1,129 @@
<template> <template>
<ai-list class="app-archives-list"> <div>
<template slot="title"> <ai-list class="app-archives-list">
<ai-title title="门店档案" isShowBottomBorder> <template slot="title">
</ai-title> <ai-title title="门店档案" isShowBottomBorder></ai-title>
</template> </template>
<template slot="content"> <template slot="content">
<ai-search-bar class="search-bar"> <ai-search-bar class="search-bar">
<template #left> <template #left>
<el-input placeholder="请输入门店名称" size="small" clearable></el-input> <el-input placeholder="请输入门店名称" v-model="search.shopName" size="small" clearable></el-input>
<ai-select <ai-select
v-model="search.applyItemId" v-model="search.shopName"
@change="(search.current = 1), getList()" @change="(search.current = 1), getList()"
placeholder="是否户主" placeholder="是否户主"
:selectList="dictList"> :selectList="$dict.getDict('yesOrNo')">
</ai-select> </ai-select>
<ai-select <ai-select
v-model="search.applyItemId" v-model="search.storeLevel"
@change="(search.current = 1), getList()" @change="(search.current = 1), getList()"
placeholder="门店等级" placeholder="门店等级"
:selectList="dictList"> :selectList="$dict.getDict('storeLevel')">
</ai-select> </ai-select>
<ai-search label="录入时间"> <ai-search label="录入时间">
<el-date-picker <el-date-picker
v-model="search.createTimeStart" v-model="search.createTime"
type="date" type="date"
size="small"
value-format="yyyy-MM-dd"
placeholder="选择开始日期"
@change="search.current = 1, getList()">
</el-date-picker>
<el-date-picker
v-model="search.createTimeEnd"
type="date"
size="small"
value-format="yyyy-MM-dd"
placeholder="选择结束日期"
@change="search.current = 1, getList()">
</el-date-picker>
</ai-search>
<ai-select
v-model="search.operatorType"
@change="(search.current = 1), getList()"
placeholder="经营类型"
:selectList="$dict.getDict('operatorType')">
</ai-select>
<ai-select
v-model="search.status"
@change="(search.current = 1), getList()"
placeholder="所属片区"
:selectList="$dict.getDict('appIntegralApplyEventStatus')">
</ai-select>
</template>
<template #right>
<el-input
v-model="search.createUserName"
class="search-input"
size="small" size="small"
value-format="yyyy-MM-dd" v-throttle="() => {search.current = 1, getList()}"
placeholder="选择开始日期" placeholder="请输入身份证、姓名、联系电话"
@change="search.current = 1, getList()"> clearable
</el-date-picker> @clear="search.current = 1, search.createUserName = '', getList()"
<el-date-picker suffix-icon="iconfont iconSearch">
v-model="search.createTimeEnd" </el-input>
type="date"
size="small"
value-format="yyyy-MM-dd"
placeholder="选择结束日期"
@change="search.current = 1, getList()">
</el-date-picker>
</ai-search>
<ai-select
v-model="search.status"
@change="(search.current = 1), getList()"
placeholder="经营类型"
:selectList="$dict.getDict('appIntegralApplyEventStatus')">
</ai-select>
<ai-select
v-model="search.status"
@change="(search.current = 1), getList()"
placeholder="所属片区"
:selectList="$dict.getDict('appIntegralApplyEventStatus')">
</ai-select>
</template>
<template #right>
<el-input
v-model="search.createUserName"
class="search-input"
size="small"
v-throttle="() => {search.current = 1, getList()}"
placeholder="请输入身份证、姓名、联系电话"
clearable
@clear="search.current = 1, search.createUserName = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-search-bar class="search-bar">
<template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
<el-button icon="iconfont iconDelete" @click="handleDelBatch">删除</el-button>
</template>
<template #right>
<ai-import :instance="instance" :dict="dict" type="appintegraluser" name="门店档案"
@success="getList()">
<el-button icon="iconfont iconImport">导入</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appintegraluser/girdIntegralExport" :params="search" fileName="门店档案"
:disabled="tableData.length == 0">
</ai-download>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column
label="门店照片"
slot="pic"
align="left">
<template v-slot="{ row }">
<img :src="row.picUrl" alt="" v-viewer>
</template> </template>
</el-table-column> </ai-search-bar>
<ai-search-bar class="search-bar">
<template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
<el-button icon="iconfont iconDelete" @click="handleDelBatch">删除</el-button>
</template>
<template #right>
<ai-import :instance="instance" :dict="dict" type="appintegraluser" name="门店档案"
@success="getList()">
<el-button icon="iconfont iconImport">导入</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appintegraluser/girdIntegralExport" :params="search" fileName="门店档案"
:disabled="tableData.length == 0">
</ai-download>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column
label="门店照片"
slot="pic"
align="left">
<template v-slot="{ row }">
<img :src="row.picUrl" alt="" v-viewer>
</template>
</el-table-column>
<el-table-column label="门店评分" slot="mark" align="center"> <el-table-column label="门店评分" slot="mark" align="center">
<template v-slot="{row}"> <template v-slot="{row}">
<el-rate :value="4" show-score text-color="#ff9900" disabled></el-rate> <el-rate :value="4" show-score text-color="#ff9900" disabled></el-rate>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column slot="options" width="180px" fixed="right" label="操作" align="center"> <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div class="table-options"> <div class="table-options">
<el-button type="text" @click="toDetail(row)">查看</el-button> <el-button type="text" @click="toDetail(row)">查看</el-button>
<el-button type="text" @click="handleEdit(row)">修改</el-button> <el-button type="text" @click="handleEdit(row)">修改</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button> <el-button type="text" @click="handleDelete(row)">删除</el-button>
<el-button type="text" >生成二维码</el-button> <el-button type="text" @click="generateQr(row)">生成二维码</el-button>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</ai-table> </ai-table>
</template> </template>
</ai-list> </ai-list>
<ai-dialog title="二维码"
:visible.sync="dialog"
:destroyOnClose="true"
width="720px"></ai-dialog>
</div>
</template> </template>
<script> <script>
import { MessageBox } from 'element-ui' import { MessageBox } from 'element-ui'
import { mapState } from 'vuex'
export default { export default {
name: 'List', name: 'List',
@@ -133,7 +137,6 @@ export default {
search: { search: {
current: 1, current: 1,
size: 10, size: 10,
areaId: '',
applyItemId: '', applyItemId: '',
girdId: '', girdId: '',
createTimeStart: '', createTimeStart: '',
@@ -146,31 +149,23 @@ export default {
colConfigs: [ colConfigs: [
{type: "selection"}, {type: "selection"},
{ slot: 'pic', align: 'center' }, { slot: 'pic', align: 'center' },
{ prop: 'integralUserName', label: '门店名称', align: 'center' }, { prop: 'shopName', label: '门店名称', align: 'center' },
{ prop: 'areaName', label: '经营者姓名', align: 'center' }, { prop: 'name', label: '经营者姓名', align: 'center' },
{ prop: 'girdName', label: '联系电话', align: 'center' }, { prop: 'phone', label: '联系电话', align: 'center' },
{ prop: 'createTime', label: '录入时间', align: 'center' }, { prop: 'createTime', label: '录入时间', align: 'center' },
{ prop: 'status', label: '门店地址', align: 'center'}, { prop: 'address', label: '门店地址', align: 'center'},
{ prop: 'auditUserName', label: '经营类型', align: 'center' }, { prop: 'operatorTypes', label: '经营类型', align: 'center' },
{slot:'mark',align: 'center'} {slot:'mark',align: 'center'}
], ],
tableData: [], tableData: [],
dateList: [] dateList: [],
} dialog:false
},
computed: {
...mapState(['user']),
hideLevel () {
return this.user.info.areaList?.length || 0
} }
}, },
created () { created () {
this.search.areaId = this.user.info.areaId this.$dict.load('yesOrNo','storeLevel','operatorType').then(() => {
this.$dict.load('appIntegralApplyEventStatus', 'appIntegralApplyEventPushStatus').then(() => {
this.getList() this.getList()
this.getRulesList()
}) })
}, },
@@ -186,19 +181,6 @@ export default {
}, },
getRulesList () {
this.instance.post(`/app/appintegralrule/listByAppletFD?current=1&size=3000`).then((res) => {
if (res.code === 0) {
this.dictList = res.data.records.map(v => {
return {
dictName: v.ruleName,
dictValue: v.id
}
})
}
})
},
onGridChange (e) { onGridChange (e) {
if (e.length) { if (e.length) {
this.search.girdId = e[0].id this.search.girdId = e[0].id
@@ -209,7 +191,7 @@ export default {
}, },
getList () { getList () {
this.instance.post(`/app/appintegraluserapply/list`, null, { this.instance.post(`/app/appshoparchives/list`, null, {
params: { params: {
...this.search ...this.search
} }
@@ -290,6 +272,10 @@ export default {
}) })
}, },
generateQr(row){
this.dialog = true
},
toAdd(id) { toAdd(id) {
this.$emit('change', { this.$emit('change', {
type: 'Add', type: 'Add',