You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1085 lines
34 KiB
1085 lines
34 KiB
<template>
|
|
<div style="padding: 0 20px">
|
|
<div ref="lxHeader">
|
|
<lx-header icon="md-apps" text="拜访记录管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<slot>
|
|
<div style="display: flex;align-items: center;" class="selector">
|
|
<!-- 模拟数据开关 -->
|
|
<div v-if="false" style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;">
|
|
<span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span>
|
|
<el-switch
|
|
v-model="useMockData"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
@change="getList">
|
|
</el-switch>
|
|
</div>
|
|
<div style="margin-right: 10px;">关键词</div>
|
|
|
|
<el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
|
|
style="width: 160px;margin-right: 10px;"></el-input>
|
|
<div style="margin-right: 10px;">状态</div>
|
|
<el-select v-model="select.audit_status" clearable placeholder="请选择">
|
|
<el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<div style="margin:0 10px;">起始时间</div>
|
|
<el-date-picker v-model="selectRange" @change="selectRanges" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
|
|
</el-button>
|
|
<template>
|
|
<el-popover placement="right" width="250" v-model="visible" trigger='click'>
|
|
<p style="margin-bottom:10px">选择访客类型:</p>
|
|
<div style="display: flex;align-items: center;">
|
|
<el-button size="mini" type="primary"
|
|
@click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 1">普通访客
|
|
</el-button>
|
|
<el-button type="primary" size="mini"
|
|
@click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 2">施工人员
|
|
</el-button>
|
|
<el-button type="primary" size="mini"
|
|
@click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 3">物流司机</el-button>
|
|
</div>
|
|
<el-button slot="reference" size="medium" type="primary" style="margin-left: 10px">新增</el-button>
|
|
</el-popover>
|
|
</template>
|
|
<el-button @click="downloadExel" slot="reference" size="medium" type="primary" style="margin-left: 10px">导出
|
|
</el-button>
|
|
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
|
|
<xy-table :table-item="table" :list="data" :total="total"
|
|
:auths="['detail','edit','delete']"
|
|
@pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
|
|
@pageIndexChange="e => {select.page = e;getList()}" @detail="viewDetail" @delete="deleteStudy" @editor="editorStudy">
|
|
</xy-table>
|
|
<addCommon ref="addCommon" @refresh="getList"></addCommon>
|
|
<!-- <addBuild ref="addBuild" @refresh="getList"></addBuild>
|
|
<addPark ref="addPark" @refresh="getList"></addPark> -->
|
|
|
|
<!-- 详情弹窗 -->
|
|
<el-dialog
|
|
title="拜访记录详情"
|
|
:visible.sync="detailVisible"
|
|
width="800px"
|
|
:close-on-click-modal="false">
|
|
<div class="detail-content" v-if="currentDetail">
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">姓名：</span>
|
|
<span class="detail-value">{{ currentDetail.name }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">访客类型：</span>
|
|
<span class="detail-value">{{ currentDetail.type_text }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">状态：</span>
|
|
<el-tag :type="getStatusType(currentDetail.audit_status)">{{ currentDetail.audit_status_text }}</el-tag>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">被访人：</span>
|
|
<span class="detail-value">{{ currentDetail.accept_admin ? currentDetail.accept_admin.name : '-' }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">证件类型：</span>
|
|
<span class="detail-value">{{ currentDetail.credent == 1 ? '身份证' : '护照' }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">证件号：</span>
|
|
<span class="detail-value">{{ currentDetail.idcard }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">手机号：</span>
|
|
<span class="detail-value">{{ currentDetail.mobile }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">预约时间：</span>
|
|
<span class="detail-value">{{ currentDetail.date }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="24">
|
|
<div class="detail-item">
|
|
<span class="detail-label">单位名称：</span>
|
|
<span class="detail-value">{{ currentDetail.company_name }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">开始时间：</span>
|
|
<span class="detail-value">{{ currentDetail.start_date }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">结束时间：</span>
|
|
<span class="detail-value">{{ currentDetail.end_date }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">入场时间：</span>
|
|
<span class="detail-value multi-line">{{ getGateTime(currentDetail, '进厂') || '-' }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">离场时间：</span>
|
|
<span class="detail-value multi-line">{{ getGateTime(currentDetail, '离厂') || '-' }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="24">
|
|
<div class="detail-item">
|
|
<span class="detail-label">是否随访：</span>
|
|
<span class="detail-value">
|
|
<el-tag :type="currentDetail.follw_people && currentDetail.follw_people.length > 0 ? 'success' : 'info'" size="small">
|
|
{{ currentDetail.follw_people && currentDetail.follw_people.length > 0 ? '是' : '否' }}
|
|
</el-tag>
|
|
<span v-if="currentDetail.follw_people && currentDetail.follw_people.length > 0" style="margin-left: 10px;">
|
|
随访人员：{{ currentDetail.follw_people.join('、') }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" class="detail-row">
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">创建时间：</span>
|
|
<span class="detail-value">{{ currentDetail.created_at }}</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="detail-item">
|
|
<span class="detail-label">创建人：</span>
|
|
<span class="detail-value">{{ currentDetail.admin ? currentDetail.admin.name : '-' }}</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 照片信息 -->
|
|
<el-row :gutter="20" class="detail-row" v-if="currentDetail.vehicle_images_detail && currentDetail.vehicle_images_detail.length > 0">
|
|
<el-col :span="24">
|
|
<div class="detail-item detail-photos">
|
|
<span class="detail-label">照片信息：</span>
|
|
<div class="detail-value">
|
|
<div class="photo-list">
|
|
<div class="photo-item" v-for="(photo, index) in currentDetail.vehicle_images_detail" :key="index">
|
|
<div class="photo-wrapper">
|
|
<el-image
|
|
:src="photo.url"
|
|
:preview-src-list="currentDetail.vehicle_images_detail.map(p => p.url)"
|
|
:initial-index="index"
|
|
fit="cover"
|
|
class="photo-image">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
<div class="photo-overlay">
|
|
<i class="el-icon-zoom-in"></i>
|
|
<span>点击预览</span>
|
|
</div>
|
|
</div>
|
|
<div class="photo-desc">{{ photo.original_name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="detailVisible = false">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getList,
|
|
destroy
|
|
} from '@/api/visit/record.js'
|
|
import addCommon from '@/views/visit/component/addCommon'
|
|
import {
|
|
download
|
|
} from '@/utils/downloadRequest'
|
|
import store from "@/store/modules/user.js"
|
|
export default {
|
|
components: {
|
|
addCommon
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
// 模拟数据开关（隐藏，默认使用真实数据）
|
|
useMockData: false,
|
|
// 详情弹窗控制
|
|
detailVisible: false,
|
|
currentDetail: null,
|
|
select: {
|
|
page: 1,
|
|
page_size: 10,
|
|
keyword: "",
|
|
audit_status: "",
|
|
my_accept_admin:'',
|
|
start_date: "",
|
|
end_date: "",
|
|
is_export: 0
|
|
},
|
|
selectRange: [],
|
|
statusList: [{
|
|
id: -1,
|
|
value: '待学习'
|
|
},
|
|
{
|
|
id: 0,
|
|
value: '待审核'
|
|
},
|
|
{
|
|
id: 1,
|
|
value: '通过(待进厂)'
|
|
},
|
|
{
|
|
id: 2,
|
|
value: '驳回'
|
|
},
|
|
{
|
|
id: 3,
|
|
value: '已进厂'
|
|
},
|
|
{
|
|
id: 4,
|
|
value: '已离厂'
|
|
},{
|
|
id: 5,
|
|
value: '已取消'
|
|
}
|
|
],
|
|
total: 0,
|
|
data: [],
|
|
// 模拟数据
|
|
mockData: [
|
|
{
|
|
id: 1,
|
|
name: '张三',
|
|
type: 1,
|
|
type_text: '普通访客',
|
|
audit_status: 3,
|
|
audit_status_text: '已进厂',
|
|
accept_admin: {
|
|
name: '李经理'
|
|
},
|
|
follw_people: ['随行人员1', '随行人员2'],
|
|
date: '2024-10-12',
|
|
credent: 1,
|
|
idcard: '110101199001011234',
|
|
mobile: '13800138001',
|
|
company_name: '北京科技有限公司',
|
|
start_date: '2024-10-12 09:00:00',
|
|
end_date: '2024-10-12 18:00:00',
|
|
gate_logs: [
|
|
{ remark: '进厂', created_at: '2024-10-12 09:15:00' },
|
|
{ remark: '离厂', created_at: '2024-10-12 17:30:00' }
|
|
],
|
|
created_at: '2024-10-11 15:30:00',
|
|
admin: {
|
|
name: '管理员A'
|
|
},
|
|
vehicle_images_detail: [
|
|
{
|
|
id: 1001,
|
|
url: 'https://picsum.photos/300/400?random=1',
|
|
original_name: '访客正面照.png',
|
|
extension: 'png',
|
|
size: 2544
|
|
},
|
|
{
|
|
id: 1002,
|
|
url: 'https://picsum.photos/300/400?random=2',
|
|
original_name: '访客侧面照.png',
|
|
extension: 'png',
|
|
size: 2231
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '李四',
|
|
type: 2,
|
|
type_text: '施工人员',
|
|
audit_status: 1,
|
|
audit_status_text: '通过(待进厂)',
|
|
accept_admin: {
|
|
name: '王主管'
|
|
},
|
|
follw_people: [],
|
|
date: '2024-10-13',
|
|
credent: 1,
|
|
idcard: '110101199002025678',
|
|
mobile: '13800138002',
|
|
company_name: '建筑施工集团',
|
|
start_date: '2024-10-13 08:00:00',
|
|
end_date: '2024-10-13 20:00:00',
|
|
gate_logs: null,
|
|
created_at: '2024-10-11 16:00:00',
|
|
admin: {
|
|
name: '管理员B'
|
|
},
|
|
vehicle_images_detail: [
|
|
{
|
|
id: 1003,
|
|
url: 'https://picsum.photos/300/400?random=3',
|
|
original_name: '施工人员照片.png',
|
|
extension: 'png',
|
|
size: 2784
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '王五',
|
|
type: 3,
|
|
type_text: '物流司机',
|
|
audit_status: 4,
|
|
audit_status_text: '已离厂',
|
|
accept_admin: {
|
|
name: '赵总监'
|
|
},
|
|
follw_people: ['司机助手'],
|
|
date: '2024-10-12',
|
|
credent: 1,
|
|
idcard: '110101199003033456',
|
|
mobile: '13800138003',
|
|
company_name: '顺达物流公司',
|
|
start_date: '2024-10-12 10:00:00',
|
|
end_date: '2024-10-12 16:00:00',
|
|
gate_logs: [
|
|
{ remark: '进厂', created_at: '2024-10-12 10:05:00' },
|
|
{ remark: '离厂', created_at: '2024-10-12 15:45:00' }
|
|
],
|
|
created_at: '2024-10-11 14:20:00',
|
|
admin: {
|
|
name: '管理员C'
|
|
},
|
|
vehicle_images_detail: [
|
|
{
|
|
id: 1004,
|
|
url: 'https://picsum.photos/400/300?random=4',
|
|
original_name: '车辆前方照片.png',
|
|
extension: 'png',
|
|
size: 2686
|
|
},
|
|
{
|
|
id: 1005,
|
|
url: 'https://picsum.photos/400/300?random=5',
|
|
original_name: '车辆侧面照片.png',
|
|
extension: 'png',
|
|
size: 2544
|
|
},
|
|
{
|
|
id: 1006,
|
|
url: 'https://picsum.photos/400/300?random=6',
|
|
original_name: '车牌号照片.png',
|
|
extension: 'png',
|
|
size: 2231
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '赵六',
|
|
type: 1,
|
|
type_text: '普通访客',
|
|
audit_status: 0,
|
|
audit_status_text: '待审核',
|
|
accept_admin: {
|
|
name: '刘经理'
|
|
},
|
|
follw_people: [],
|
|
date: '2024-10-14',
|
|
credent: 2,
|
|
idcard: 'P123456789',
|
|
mobile: '13800138004',
|
|
company_name: '国际贸易公司',
|
|
start_date: '2024-10-14 09:00:00',
|
|
end_date: '2024-10-14 17:00:00',
|
|
gate_logs: null,
|
|
created_at: '2024-10-12 08:30:00',
|
|
admin: {
|
|
name: '管理员D'
|
|
},
|
|
vehicle_images_detail: [
|
|
{
|
|
id: 1007,
|
|
url: 'https://picsum.photos/300/400?random=7',
|
|
original_name: '访客证件照.png',
|
|
extension: 'png',
|
|
size: 2544
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '孙七',
|
|
type: 2,
|
|
type_text: '施工人员',
|
|
audit_status: 2,
|
|
audit_status_text: '驳回',
|
|
accept_admin: {
|
|
name: '周主任'
|
|
},
|
|
follw_people: ['施工队员1', '施工队员2', '施工队员3'],
|
|
date: '2024-10-13',
|
|
credent: 1,
|
|
idcard: '110101199004047890',
|
|
mobile: '13800138005',
|
|
company_name: '装修工程队',
|
|
start_date: '2024-10-13 07:00:00',
|
|
end_date: '2024-10-13 19:00:00',
|
|
gate_logs: null,
|
|
created_at: '2024-10-11 17:15:00',
|
|
admin: {
|
|
name: '管理员E'
|
|
},
|
|
vehicle_images_detail: []
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '周八',
|
|
type: 1,
|
|
type_text: '普通访客',
|
|
audit_status: 5,
|
|
audit_status_text: '已取消',
|
|
accept_admin: {
|
|
name: '吴经理'
|
|
},
|
|
follw_people: [],
|
|
date: '2024-10-12',
|
|
credent: 1,
|
|
idcard: '110101199005055432',
|
|
mobile: '13800138006',
|
|
company_name: '咨询服务公司',
|
|
start_date: '2024-10-12 14:00:00',
|
|
end_date: '2024-10-12 17:00:00',
|
|
gate_logs: null,
|
|
created_at: '2024-10-10 10:00:00',
|
|
admin: {
|
|
name: '管理员F'
|
|
},
|
|
vehicle_images_detail: []
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '吴九',
|
|
type: 3,
|
|
type_text: '物流司机',
|
|
audit_status: 3,
|
|
audit_status_text: '已进厂',
|
|
accept_admin: {
|
|
name: '郑部长'
|
|
},
|
|
follw_people: [],
|
|
date: '2024-10-12',
|
|
credent: 1,
|
|
idcard: '110101199006066789',
|
|
mobile: '13800138007',
|
|
company_name: '快运物流',
|
|
start_date: '2024-10-12 11:00:00',
|
|
end_date: '2024-10-12 19:00:00',
|
|
gate_logs: [
|
|
{ remark: '进厂', created_at: '2024-10-12 11:10:00' }
|
|
],
|
|
created_at: '2024-10-11 09:00:00',
|
|
admin: {
|
|
name: '管理员G'
|
|
},
|
|
vehicle_images_detail: [
|
|
{
|
|
id: 1008,
|
|
url: 'https://picsum.photos/400/300?random=8',
|
|
original_name: '货车照片.png',
|
|
extension: 'png',
|
|
size: 2686
|
|
},
|
|
{
|
|
id: 1009,
|
|
url: 'https://picsum.photos/300/400?random=9',
|
|
original_name: '司机照片.png',
|
|
extension: 'png',
|
|
size: 2544
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '郑十',
|
|
type: 1,
|
|
type_text: '普通访客',
|
|
audit_status: -1,
|
|
audit_status_text: '待学习',
|
|
accept_admin: {
|
|
name: '冯总'
|
|
},
|
|
follw_people: ['助理'],
|
|
date: '2024-10-15',
|
|
credent: 1,
|
|
idcard: '110101199007077654',
|
|
mobile: '13800138008',
|
|
company_name: '教育培训机构',
|
|
start_date: '2024-10-15 10:00:00',
|
|
end_date: '2024-10-15 16:00:00',
|
|
gate_logs: null,
|
|
created_at: '2024-10-12 10:30:00',
|
|
admin: {
|
|
name: '管理员H'
|
|
},
|
|
vehicle_images_detail: []
|
|
}
|
|
],
|
|
table: [{
|
|
label: '序号',
|
|
type: "index",
|
|
fixed: "left",
|
|
width: 80
|
|
},
|
|
{
|
|
label: '姓名',
|
|
sortable: false,
|
|
prop: 'name',
|
|
fixed: "left",
|
|
width: 120
|
|
},
|
|
{
|
|
label: '类型',
|
|
sortable: false,
|
|
prop: 'type_text',
|
|
width: 120
|
|
},
|
|
{
|
|
label: '状态',
|
|
sortable: false,
|
|
prop: 'audit_status_text',
|
|
width: 120
|
|
},{
|
|
label: '被访人',
|
|
sortable: false,
|
|
prop: 'accept_admin.name',
|
|
width: 120,
|
|
},
|
|
{
|
|
label: '是否随访',
|
|
sortable: false,
|
|
prop: 'follw_people',
|
|
width: 80,
|
|
formatter:(cell, data, value)=>{
|
|
return value.length>0?'是':'否'
|
|
}
|
|
},
|
|
{
|
|
label: '预约时间',
|
|
sortable: false,
|
|
prop: 'date',
|
|
width: 120
|
|
},
|
|
{
|
|
label: '证件类型',
|
|
sortable: false,
|
|
prop: 'credent',
|
|
width: 120,
|
|
formatter:(cell, data, value)=>{
|
|
return value==1?'身份证':'护照'
|
|
},
|
|
},
|
|
{
|
|
label: '证件号',
|
|
sortable: false,
|
|
prop: 'idcard',
|
|
width: 180
|
|
},
|
|
{
|
|
label: '手机号',
|
|
sortable: false,
|
|
prop: 'mobile',
|
|
width: 120
|
|
},
|
|
{
|
|
label: '单位名称',
|
|
sortable: false,
|
|
prop: 'company_name',
|
|
width: 180
|
|
},
|
|
|
|
{
|
|
label: '开始时间',
|
|
sortable: false,
|
|
prop: 'start_date',
|
|
width: 180
|
|
},
|
|
{
|
|
label: '结束时间',
|
|
sortable: false,
|
|
prop: 'end_date',
|
|
width: 180
|
|
},
|
|
{
|
|
label: '入场时间',
|
|
sortable: false,
|
|
prop: 'gate_start_date',
|
|
width: 180,
|
|
formatter:(cell,data,value)=>{
|
|
if(cell.gate_logs){
|
|
for(let k of cell.gate_logs){
|
|
if(k.remark=='进厂'){
|
|
return k.created_at
|
|
}
|
|
}
|
|
}else{
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: '离场时间',
|
|
sortable: false,
|
|
prop: 'gate_end_date',
|
|
width: 180,
|
|
formatter:(cell,data,value)=>{
|
|
if(cell.gate_logs){
|
|
for(let k of cell.gate_logs){
|
|
if(k.remark=='离厂'){
|
|
return k.created_at
|
|
}
|
|
}
|
|
}else{
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: '创建时间',
|
|
sortable: false,
|
|
prop: 'created_at',
|
|
width: 180
|
|
|
|
},
|
|
{
|
|
label: '创建人',
|
|
sortable: false,
|
|
prop: 'admin.name',
|
|
width: 120,
|
|
formatter(cell, data, value){
|
|
return value?value:''
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
console.log("stote",store)
|
|
// const state = store.state
|
|
// if(state.role && state.role.includes('系统管理员')!=-1){
|
|
// this.select.my_accept_admin = ''
|
|
// }
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
// 使用模拟数据模式
|
|
if (this.useMockData) {
|
|
// 过滤模拟数据
|
|
let filteredData = [...this.mockData]
|
|
|
|
// 关键词搜索
|
|
if (this.select.keyword) {
|
|
filteredData = filteredData.filter(item =>
|
|
item.name.includes(this.select.keyword) ||
|
|
item.mobile.includes(this.select.keyword) ||
|
|
item.idcard.includes(this.select.keyword) ||
|
|
item.company_name.includes(this.select.keyword)
|
|
)
|
|
}
|
|
|
|
// 状态筛选
|
|
if (this.select.audit_status !== '' && this.select.audit_status !== null && this.select.audit_status !== undefined) {
|
|
filteredData = filteredData.filter(item => item.audit_status === this.select.audit_status)
|
|
}
|
|
|
|
// 时间段筛选
|
|
if (this.select.start_date && this.select.end_date) {
|
|
filteredData = filteredData.filter(item => {
|
|
return item.date >= this.select.start_date && item.date <= this.select.end_date
|
|
})
|
|
}
|
|
|
|
// 计算分页
|
|
this.total = filteredData.length
|
|
const start = (this.select.page - 1) * this.select.page_size
|
|
const end = start + this.select.page_size
|
|
this.data = filteredData.slice(start, end)
|
|
|
|
console.log('使用模拟数据:', { total: this.total, data: this.data })
|
|
} else {
|
|
// 原有的真实接口调用逻辑
|
|
let res = await getList(this.select)
|
|
console.log(res)
|
|
this.data = res.data
|
|
this.total = res.total
|
|
}
|
|
},
|
|
selectRanges(val){
|
|
if(val){
|
|
this.select.start_date = val[0]
|
|
this.select.end_date = val[1]
|
|
}else{
|
|
this.select.start_date = ''
|
|
this.select.end_date = ''
|
|
}
|
|
},
|
|
downloadExel() {
|
|
this.select.is_export = 1
|
|
download(
|
|
'/api/admin/visit/index',
|
|
'get', {
|
|
...this.select
|
|
},
|
|
'拜访记录列表.csv')
|
|
this.select.is_export = 0
|
|
},
|
|
deleteStudy(row) {
|
|
destroy({
|
|
id: row.id
|
|
}).then(res => {
|
|
this.$successMessage('destroy', '拜访记录')
|
|
this.getList()
|
|
})
|
|
},
|
|
editorStudy(row) {
|
|
// let addWhat = row.type == 1 ? "addCommon" : (row.type == 2 ? "addBuild" : (row.type == 3 ? "addPark" : ""))
|
|
let addWhat = "addCommon"
|
|
console.log(row)
|
|
this.$refs[addWhat].id = row.id
|
|
this.$refs[addWhat].visitType= parseInt(row.type)
|
|
this.$refs[addWhat].type = 'editor'
|
|
this.$refs[addWhat].isShow = true
|
|
},
|
|
// 查看详情
|
|
viewDetail(row) {
|
|
console.log('查看详情:', row)
|
|
this.currentDetail = row
|
|
this.detailVisible = true
|
|
},
|
|
// 获取进厂/离厂时间
|
|
getGateTime(record, remark) {
|
|
console.log(record,remark)
|
|
if (record.gate_logs && record.gate_logs.length > 0) {
|
|
const logs = record.gate_logs.filter(item => item.remark === remark)
|
|
if (logs && logs.length > 0) {
|
|
// 将多条记录的时间用换行符分隔
|
|
return logs.map(item => item.created_at).join('\n')
|
|
}
|
|
}
|
|
return ''
|
|
},
|
|
// 根据状态获取标签类型
|
|
getStatusType(status) {
|
|
const statusMap = {
|
|
'-1': 'info', // 待学习
|
|
'0': 'warning', // 待审核
|
|
'1': 'primary', // 通过(待进厂)
|
|
'2': 'danger', // 驳回
|
|
'3': 'success', // 已进厂
|
|
'4': '', // 已离厂
|
|
'5': 'info' // 已取消
|
|
}
|
|
return statusMap[status.toString()] || 'info'
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
//::v-deep .el-button + .el-button{
|
|
// margin-left: 0 !important;
|
|
//}
|
|
::v-deep .el-button {
|
|
padding: 5px 8px !important;
|
|
}
|
|
|
|
// 详情弹窗样式
|
|
.detail-content {
|
|
padding: 10px;
|
|
|
|
.detail-row {
|
|
margin-bottom: 20px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
min-height: 32px;
|
|
|
|
.detail-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
min-width: 90px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #303133;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
|
|
&.multi-line {
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
|
|
// 照片展示样式
|
|
&.detail-photos {
|
|
align-items: flex-start;
|
|
|
|
.detail-value {
|
|
width: 100%;
|
|
}
|
|
|
|
.photo-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-top: 5px;
|
|
|
|
.photo-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.photo-wrapper {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 160px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.photo-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid #e4e7ed;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
::v-deep .el-image__inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f7fa;
|
|
color: #909399;
|
|
|
|
i {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.photo-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
pointer-events: none;
|
|
|
|
i {
|
|
font-size: 32px;
|
|
color: #fff;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.photo-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.photo-image ::v-deep .el-image__inner {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.photo-desc {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
text-align: center;
|
|
max-width: 120px;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.selector {
|
|
::v-deep .el-input--suffix .el-input__inner {
|
|
height: 28px;
|
|
}
|
|
|
|
::v-deep .el-select .el-input .el-select__caret {
|
|
line-height: 28px;
|
|
}
|
|
|
|
::v-deep .el-range-editor.el-input__inner {
|
|
height: 28px;
|
|
width: 250px
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range__icon {
|
|
line-height: 21px;
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range-separator {
|
|
line-height: 21px;
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range__close-icon {
|
|
line-height: 21px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// 优化图片预览器的关闭按钮样式（全局样式）
|
|
.el-image-viewer__wrapper {
|
|
.el-image-viewer__close {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
font-size: 28px !important;
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
border-radius: 50% !important;
|
|
color: #fff !important;
|
|
top: 20px !important;
|
|
right: 20px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
transition: all 0.3s !important;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
|
|
|
|
&:hover {
|
|
background: rgba(255, 73, 73, 0.9) !important;
|
|
transform: scale(1.1) rotate(90deg) !important;
|
|
}
|
|
}
|
|
|
|
// 优化左右切换按钮
|
|
.el-image-viewer__prev,
|
|
.el-image-viewer__next {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
font-size: 28px !important;
|
|
background: rgba(0, 0, 0, 0.6) !important;
|
|
border-radius: 50% !important;
|
|
color: #fff !important;
|
|
transition: all 0.3s !important;
|
|
|
|
&:hover {
|
|
background: rgba(64, 158, 255, 0.9) !important;
|
|
transform: scale(1.1) !important;
|
|
}
|
|
}
|
|
|
|
// 优化操作栏按钮
|
|
.el-image-viewer__actions__inner {
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
border-radius: 30px !important;
|
|
padding: 10px 20px !important;
|
|
|
|
i {
|
|
color: #fff !important;
|
|
font-size: 24px !important;
|
|
margin: 0 8px !important;
|
|
transition: all 0.3s !important;
|
|
|
|
&:hover {
|
|
color: #409eff !important;
|
|
transform: scale(1.2) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 优化遮罩层
|
|
.el-image-viewer__mask {
|
|
background: rgba(0, 0, 0, 0.85) !important;
|
|
}
|
|
}
|
|
</style>
|