zhaoyang/sunProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步6/16

Browse Source
This commit is contained in:
Zy
2026-06-01 18:12:58 +08:00
parent 38274ab612
commit 50e7b14fd6
183 changed files with 8956 additions and 4803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/views/system/parking/addParking.vue
View File

@@ -37,9 +37,9 @@
<el-row>
<el-col :span="11">
<el-form-item label="车位类型" prop="type">
<el-radio-group v-model="form.type">
<el-radio v-for="dict in com_parking_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
<el-select v-model="form.type">
<el-option v-for="dict in com_parking_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
@@ -52,10 +52,44 @@
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="持有人类型" prop="contactType">
<el-radio-group v-model="form.contactType">
<el-radio :value="1">业主</el-radio>
<el-radio :value="0">非业主</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.contactType === 0">
<el-col :span="10">
<el-form-item label="联系人名称" prop="contactName">
<el-input v-model.trim="form.contactName"></el-input>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="10">
<el-form-item label="联系人电话" prop="contactPhone">
<el-input v-model.trim="form.contactPhone"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="24">
<el-form-item label="持有人" prop="residentId">
<!-- 公共组件 持有人 -->
<Holder :userid="form.residentId" @change="handleChange"></Holder>
<Holder :isMultiple="false" :userid="form.residentId ?? ''" ref="HolderRef" @change="handleChange">
<template #default>
<div class="residentBox" @click="choiceResidentFun">
<div class="defaultbox" v-if="form.residentId == null || form.residentId === ''">
<span>请选择</span>
<el-icon><Search /></el-icon>
</div>
<div v-else class="overflow-auto overflow-hidden w-full text-ellipsis text-nowrap">
<span>姓名：{{ form?.residentName }}</span>
</div>
</div>
</template>
</Holder>
</el-form-item>
</el-col>
</el-row>
@@ -82,6 +116,7 @@ import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addParking, getParking, updateParking } from '@/api/system/parking';
import { listArea } from '@/api/system/carArea';
import { validator } from '@/utils/Reg';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
@@ -98,17 +133,37 @@ const form = ref({
parkingFloor: null, // 车位楼层
type: '0', // 车位类型
residentId: '', // 住户id
residentName: '', // 住户名
parkingStatus: '', // 车位状态
remark: '', // 备注
parkingCode: '' // 车位编码
parkingCode: '', // 车位编码
contactName: '', // 联系人名称
contactPhone: '', // 联系人手机
contactType: 1 // 联系人类型 0 非业主 1 业主
});
const rules = ref({
areaId: [{ required: true, message: '请选择车位区域', trigger: 'blur' }],
type: [{ required: true, message: '请选择车位类型', trigger: 'blur' }],
parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }]
parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }],
residentId: [{ required: true, message: '请选择持有人', trigger: 'blur' }],
contactPhone: [
{ required: true, message: '请输入联系人电话', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!validator(value, 'phone')) {
callback(new Error('请输入正确的手机号码'));
} else {
callback();
}
}
}
],
contactName: [{ required: true, message: '请输入联系人名称', trigger: 'blur' }]
});
const userid = ref(null);
const HolderRef = ref<typeof Holder>(null);
if (route.query.id) {
userid.value = route.query.id;
@@ -131,23 +186,39 @@ const getAreaList = async () => {
getAreaList();
const holderInfo = ref(null);
function choiceResidentFun() {
if (form.value.residentId) {
HolderRef.value.open([...form.value.residentId]);
} else {
HolderRef.value.open([]);
}
}
function handleChange(pop) {
holderInfo.value = null;
holderInfo.value = pop;
console.log(pop);
form.value.residentId = '';
form.value.residentName = '';
if (pop !== null) {
form.value.residentId = holderInfo.value.id;
form.value.residentName = holderInfo.value.name;
}
}
// !== 提交 =============================================================================
// 提交
const submitForm = () => {
console.log(form.value);
formRef.value?.validate(async (valid: boolean) => {
console.log(valid);
if (valid) {
form.value.residentId = holderInfo.value;
if (userid.value) {
updateParking(form.value).then((res) => {
updateParking(form.value).then(() => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addParking(form.value).then((res) => {
addParking(form.value).then(() => {
ElMessage.success('添加成功');
cancelForm();
});
@@ -206,4 +277,21 @@ const cancelForm = () => {
}
}
}
.residentBox {
width: 385px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 10px;
.defaultbox {
display: flex;
align-items: center;
justify-content: space-between;
}
cursor: pointer;
&:hover {
background-color: #f4f8ff;
}
}
</style>

48
src/views/system/parking/index.vue
View File

@@ -77,15 +77,21 @@
<el-table-column label="持有人" align="center" prop="residentName" />
<el-table-column label="审核状态" align="center" prop="checkStatus">
<template #default="scope">
<dict-tag :options="com_review" :value="scope.row.checkStatus" />
<dict-tag :options="com_review" :value="scope.row.checkStatus ?? '0'" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
<el-table-column label="操作" width="180" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" v-if="scope.row.checkStatus === '0'" @click="handleMain(scope.row)" v-hasPermi="['parking:parking:query']"
<el-button
link
type="primary"
v-if="scope.row.checkStatus === '0'"
@click="handleReview(scope.row)"
v-hasPermi="['parking:parking:query']"
>审核</el-button
>
<el-button link type="primary" v-else @click="handleMain(scope.row)">详情</el-button>
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['parking:parking:edit']">编辑</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['parking:parking:remove']">删除</el-button>
</template>
@@ -99,7 +105,7 @@
<script setup name="Parking" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listParking, getParking, delParking, addParking, updateParking } from '@/api/system/parking/index';
import { listParking, delParking } from '@/api/system/parking/index';
import { ParkingVO, ParkingQuery, ParkingForm } from '@/api/system/parking/type';
import { checkPermi } from '@/utils/permission';
@@ -122,14 +128,14 @@ const queryFormRef = ref<ElFormInstance>();
const initFormData: ParkingForm = {
id: undefined,
areaId: undefined,
parkingCode: undefined,
parkingCode: '',
parkingArea: undefined,
parkingStatus: undefined,
parkingStatus: '',
type: undefined,
residentId: undefined,
addTime: undefined,
addBy: undefined,
checkStatus: undefined,
checkStatus: '',
remark: undefined,
createBy: undefined,
createTime: undefined,
@@ -158,17 +164,16 @@ const AreaList = ref([]);
/** 查询车位管理列表 */
const getList = async () => {
loading.value = true;
const res = await listParking(queryParams.value);
parkingList.value = res.rows;
total.value = res.total;
loading.value = false;
listParking(queryParams.value)
.then((res) => {
parkingList.value = res.rows;
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
};
function getAreaInfoById(id: string) {
const obj = AreaList.value.find((item) => item.id === id);
return `${obj.areaName}${obj.areaCode}`;
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
@@ -197,7 +202,7 @@ const handleAdd = () => {
/** 修改按钮操作 */
const handleUpdate = async (row?: ParkingVO) => {
const _id = row.id || ids.value[0];
const _id = row ? row.id : ids.value[0];
router.push({
path: '/carArea/editParking',
query: {
@@ -206,6 +211,15 @@ const handleUpdate = async (row?: ParkingVO) => {
});
};
/** 审核按钮操作 */
const handleReview = async (row?: ParkingVO) => {
router.push({
path: '/carArea/parkingReview',
query: {
id: row.id
}
});
};
/** 车位审核 */
const handleMain = async (row?: ParkingVO) => {
router.push({
path: '/carArea/parkMain',
@@ -217,7 +231,7 @@ const handleMain = async (row?: ParkingVO) => {
/** 删除按钮操作 */
const handleDelete = async (row?: ParkingVO) => {
const _ids = row?.id || ids.value;
const _ids = row ? row.id : ids.value;
await proxy?.$modal.confirm('该信息删除后无法恢复，确定要删除吗？').finally(() => (loading.value = false));
await delParking(_ids);
proxy?.$modal.msgSuccess('删除成功');

103
src/views/system/parking/parkMain.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="ResidentMainBox p-2 w-full h-full">
<PageHeader title="车位详情"></PageHeader>
<PageHeader></PageHeader>
<div class="ResidentMainBody">
<el-row :span="24" :gutter="20">
<el-col :span="16">
<el-col :span="24">
<!-- 车位信息 -->
<div class="mb-10">
<el-card>
@@ -43,7 +43,12 @@
</div>
<div class="carinfo_item">
<div class="label">持有人：</div>
<div class="main">{{ parkingReviewinfo.parking.residentId }}</div>
<div class="main">
<span>
{{ parkingReviewinfo.parking.residentName }}
</span>
<el-button type="primary" link style="font-size: smaller">详情</el-button>
</div>
</div>
<div class="carinfo_item">
<div class="label">添加时间：</div>
@@ -123,71 +128,6 @@
</div>
</el-card>
</div>
<div class="">
<el-card>
<template #header>
<div class="card-header">
<span>审核</span>
</div>
</template>
<div class="w-full h-full flex mt-2">
<div class="title">审批意见</div>
<div class="preivewBodybox flex-1 ml-5">
<el-input v-model="form.propertyReviewFeedback" type="textarea" :rows="5"></el-input>
<div class="actions mt-5">
<el-button :disabled="!Boolean(parkingReviewinfo.car && parkingReviewinfo.parking.id)" type="primary" @click="handlePreivew(1)"
>审核通过</el-button
>
<el-button :disabled="!Boolean(parkingReviewinfo.car && parkingReviewinfo.parking.id)" type="danger" @click="handlePreivew(0)"
>审核不通过</el-button
>
<el-button @click="handlBacK">返回</el-button>
</div>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="8">
<el-card style="position: relative" class="h-full">
<template #header>
<div class="asideCardHeader w-full h-full">
<div class="cardSubtitle">
<div class="line"></div>
<div class="subtitle">审批流程</div>
</div>
</div>
</template>
<div class="w-full h-50%">
<el-steps space="200px" direction="vertical" :active="activeStop">
<el-step :description="parkingReviewinfo.parkingReviewProcess.submitTime">
<template #title>
<span v-if="active === 0">未提交信息</span>
<span v-if="active >= 1">已提交信息</span>
</template>
</el-step>
<el-step :description="parkingReviewinfo.parkingReviewProcess.propertyTime">
<template #title>
<span v-if="active <= 2">待审核</span>
<span v-if="active === 3">物业审核不通过</span>
<span v-if="active >= 4">物业审核通过</span>
</template>
</el-step>
<el-step :description="parkingReviewinfo.parkingReviewProcess.certificationTime">
<template #title>
<span v-if="active <= 5">未认证</span>
<span v-if="active === 6">已认证</span>
</template>
</el-step>
<el-step>
<template #title>
<span v-if="active <= 5">审核未完成</span>
<span v-else>审核完成</span>
</template>
</el-step>
</el-steps>
</div>
</el-card>
</el-col>
</el-row>
</div>
@@ -205,23 +145,22 @@ const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
/** 住户审核状态 */
enum reviewStatus {
/** 未提交 */
unSubmit = 0,
unSubmit = '0',
/** 已提交 */
Submited = 1,
Submited = '1',
/** 待认证 */
awaitReview = 2,
awaitReview = '2',
/** 认证不通过 */
unReviewPass = 3,
unReviewPass = '3',
/** 认证通过 */
ReviewPass = 4,
ReviewPass = '4',
/** 未认证 */
uncertification = 5,
uncertification = '5',
/** 已认证 */
Certification = 6
Certification = '6'
}
type activeType = reviewStatus;
const active = ref<activeType>(0);
const active = ref(0);
const activeStop = ref(0);
const router = useRouter();
const route = useRoute();
@@ -319,18 +258,18 @@ function handleActivestaus(rews) {
activeStop.value = 1;
// 待认证
if (rews.propertyStatus === 0) {
active.value = reviewStatus.awaitReview;
active.value = 2;
} else if (rews.propertyStatus === 1) {
active.value = reviewStatus.unReviewPass;
active.value = 3;
} else if (rews.propertyStatus === 2) {
active.value = reviewStatus.ReviewPass;
active.value = 4;
activeStop.value = 2;
// 审核
if (rews.certificationStatus === 0) {
active.value = reviewStatus.uncertification;
active.value = 5;
} else if (rews.certificationStatus === 1) {
active.value = reviewStatus.Certification;
active.value = 6;
activeStop.value = 4;
}
}

410
src/views/system/parking/parkReview.vue Normal file
View File

@@ -0,0 +1,410 @@
<template>
<div class="ResidentMainBox p-2 w-full h-full">
<PageHeader></PageHeader>
<div class="ResidentMainBody">
<el-row :span="24" :gutter="20">
<el-col :span="16">
<!-- 车位信息 -->
<div class="mb-10">
<el-card>
<template #header>
<div class="card-header">
<span>车位信息</span>
</div>
</template>
<div class="w-full h-full CarinfoBox gridbox">
<div class="carinfo_item">
<div class="label">区域：</div>
<div class="main">{{ parkingReviewinfo.parking.areaName }}</div>
</div>
<div class="carinfo_item">
<div class="label">车位编号：</div>
<div class="main">{{ parkingReviewinfo.parking.parkingCode }}</div>
</div>
<div class="carinfo_item">
<div class="label">车位面积：</div>
<div class="main">{{ parkingReviewinfo.parking.parkingArea }} ㎡</div>
</div>
<div class="carinfo_item">
<div class="label">楼层：</div>
<div class="main">{{ parkingReviewinfo.parking.parkingFloor }} 层</div>
</div>
<div class="carinfo_item">
<div class="label">车位类型：</div>
<div class="main">
<dict-tag :options="com_parking_type" :value="parkingReviewinfo.parking.type" />
</div>
</div>
<div class="carinfo_item">
<div class="label">车位状态：</div>
<div class="main">
<DictTag :options="com_parking_status" :value="parkingReviewinfo.parking.parkingStatus"></DictTag>
</div>
</div>
<div class="carinfo_item">
<div class="label">持有人：</div>
<div class="main">
<span>
{{ parkingReviewinfo.parking.residentName }}
</span>
<el-button type="primary" link style="font-size: smaller">详情</el-button>
</div>
</div>
<div class="carinfo_item">
<div class="label">添加时间：</div>
<div class="main">{{ parkingReviewinfo.parking.createTime }}</div>
</div>
<div class="carinfo_item">
<div class="label">添加人：</div>
<div class="main">{{ parkingReviewinfo.parking.createName }}</div>
</div>
<div class="carinfo_item">
<div class="label">备注：</div>
<div class="main">{{ parkingReviewinfo.parking.remark }}</div>
</div>
</div>
</el-card>
</div>
<!-- 车辆信息 -->
<div class="mb-10">
<el-card>
<template #header>
<div class="card-header">
<span>车辆信息</span>
</div>
</template>
<div class="w-full h-full CarinfoBox" v-if="parkingReviewinfo.car">
<el-row>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车牌号：</div>
<div class="main">浙B·N6688</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车辆品牌：</div>
<div class="main">宝马</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车辆型号</div>
<div class="main">X5</div>
</div>
</el-col>
</el-row>
<el-row class="mt-30px mb-30px">
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车身颜色：</div>
<div class="main">白色</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">备注：</div>
<div class="main">无</div>
</div>
</el-col>
<el-col :span="8"> </el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="carinfo_item flex-items-start">
<div class="label">车辆照片：</div>
<div class="main">
<el-image
class="carinfoImage"
src="https://ts1.tc.mm.bing.net/th?id=ORMS.76ee9c7ea9fe203b608f9048f54b3cbd&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
></el-image>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="w-full h-full CarinfoBox flex flex-center min-h-17rem" v-else>
<span style="color: #999; font-weight: 500; font-size: larger; letter-spacing: 10px">暂无信息</span>
</div>
</el-card>
</div>
<div class="">
<el-card>
<template #header>
<div class="card-header">
<span>审核</span>
</div>
</template>
<div class="w-full h-full flex mt-2">
<div class="title">审批意见</div>
<div class="preivewBodybox flex-1 ml-5">
<el-input v-model="form.propertyReviewFeedback" type="textarea" :rows="5"></el-input>
<div class="actions mt-5">
<el-button :disabled="!Boolean(parkingReviewinfo.car && parkingReviewinfo.parking.id)" type="primary" @click="handlePreivew(1)"
>审核通过</el-button
>
<el-button :disabled="!Boolean(parkingReviewinfo.car && parkingReviewinfo.parking.id)" type="danger" @click="handlePreivew(0)"
>审核不通过</el-button
>
<el-button @click="handlBacK">返回</el-button>
</div>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="8">
<el-card style="position: relative" class="h-full">
<template #header>
<div class="asideCardHeader w-full h-full">
<div class="cardSubtitle">
<div class="line"></div>
<div class="subtitle">审批流程</div>
</div>
</div>
</template>
<div class="w-full h-50%">
<el-steps space="200px" direction="vertical" :active="activeStop">
<el-step :description="parkingReviewinfo.parkingReviewProcess.submitTime">
<template #title>
<span v-if="active === 0">未提交信息</span>
<span v-if="active >= 1">已提交信息</span>
</template>
</el-step>
<el-step :description="parkingReviewinfo.parkingReviewProcess.propertyTime">
<template #title>
<span v-if="active <= 2">待审核</span>
<span v-if="active === 3">物业审核不通过</span>
<span v-if="active >= 4">物业审核通过</span>
</template>
</el-step>
<el-step :description="parkingReviewinfo.parkingReviewProcess.certificationTime">
<template #title>
<span v-if="active <= 5">未认证</span>
<span v-if="active === 6">已认证</span>
</template>
</el-step>
<el-step>
<template #title>
<span v-if="active <= 5">审核未完成</span>
<span v-else>审核完成</span>
</template>
</el-step>
</el-steps>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getParkingReview, getParkingReviewInfo } from '@/api/system/parking';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
/** 住户审核状态 */
enum reviewStatus {
/** 未提交 */
unSubmit = '0',
/** 已提交 */
Submited = '1',
/** 待认证 */
awaitReview = '2',
/** 认证不通过 */
unReviewPass = '3',
/** 认证通过 */
ReviewPass = '4',
/** 未认证 */
uncertification = '5',
/** 已认证 */
Certification = '6'
}
const active = ref(0);
const activeStop = ref(0);
const router = useRouter();
const route = useRoute();
const id = ref('');
type parkingReviewType = {
parking: {
id: string;
areaId: string;
areaName: string;
villageId: string;
villageName: string;
parkingCode: string;
parkingArea: any;
parkingStatus: string;
type: string;
residentId: any;
residentName: any;
parkingFloor: string;
createName: string;
checkStatus: string;
remark: string;
createTime: string;
delFlag: any;
};
car: any;
parkingReviewProcess: {
submitStatus: null;
propertyStatus: null;
certificationStatus: null;
submitTime: string;
propertyTime: string;
certificationTime: string;
};
};
const parkingReviewinfo = ref<parkingReviewType>({
parking: {
'id': '',
'areaId': '',
'areaName': '',
'villageId': '',
'villageName': '',
'parkingCode': '',
'parkingArea': null,
'parkingStatus': '',
'type': '',
'residentId': null,
'residentName': null,
'parkingFloor': '',
'createName': '',
'checkStatus': '',
'remark': '',
'createTime': '',
'delFlag': null
},
car: null,
parkingReviewProcess: {
submitStatus: null,
propertyStatus: null,
certificationStatus: null,
submitTime: null,
propertyTime: null,
certificationTime: null
}
});
const form = ref({
propertyReviewFeedback: '',
propertyStatus: '0'
});
function getInfo() {
if (route.query.id) {
id.value = route.query.id as string;
getParkingReviewInfo(id.value).then((res) => {
parkingReviewinfo.value = res.data;
handleActivestaus(res.data.parkingReviewProcess);
});
}
}
getInfo();
function handleActivestaus(rews) {
if (!rews) {
activeStop.value = 0;
active.value = 0;
return;
}
// 提交
if (rews.submitStatus === reviewStatus.unSubmit) {
activeStop.value = 0;
active.value = 0;
} else if (rews.submitStatus === reviewStatus.Submited) {
active.value = 1;
activeStop.value = 1;
// 待认证
if (rews.propertyStatus === 0) {
active.value = 2;
} else if (rews.propertyStatus === 1) {
active.value = 3;
} else if (rews.propertyStatus === 2) {
active.value = 4;
activeStop.value = 2;
// 审核
if (rews.certificationStatus === 0) {
active.value = 5;
} else if (rews.certificationStatus === 1) {
active.value = 6;
activeStop.value = 4;
}
}
}
}
// 审核状态
// 物业审核状态 0 待审核 1审核通过 2审核未通过
function handlePreivew(status: number) {
getParkingReview({
...form.value,
propertyStatus: status,
id: id.value
}).then((res) => {
console.log(res);
});
}
function handlBacK() {
router.back();
}
</script>
<style scoped lang="scss">
.ResidentMainBox {
display: flex;
flex-direction: column;
.ResidentMainBody {
flex: 1;
margin-top: 20px;
.CarinfoBox {
&.gridbox {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 20px;
row-gap: 40px;
}
.carinfo_item {
display: flex;
align-items: center;
font-size: 14px;
.label {
font-weight: 600;
width: 80px;
text-align: right;
padding-right: 10px;
}
.carinfoImage {
width: 200px;
height: 100px;
}
}
}
&:deep(div.el-step__head.is-process) {
& > div.el-step__line {
width: 0;
border: 1px dashed gray;
background: transparent;
}
}
&:deep(.el-step.is-vertical .el-step__line) {
top: 20px;
}
&:deep(div.el-step__head.is-finish) {
& > div.el-step__line {
width: 0;
border: 1px solid var(--el-color-primary);
background: transparent;
}
}
}
}
</style>

209
src/views/system/parking/template.vue
View File

@@ -1,209 +0,0 @@
<template>
<div class="AddBuildingBox">
<PageHeader :title="userid ? '编辑月卡' : '添加月卡'"></PageHeader>
<div class="AddBuildingBody">
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
<el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="11">
<el-form-item label="月卡编号" prop="cardCode">
<el-input v-model.trim="form.cardCode" placeholder="请输入月卡编号" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="持卡人姓名" prop="cardName">
<el-input v-model.trim="form.cardName" placeholder="请输入持卡人姓名" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="手机号码" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号码" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="绑定车牌号" prop="carNum">
<el-input v-model.number="form.carNum" placeholder="请输入车牌号" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="办理人" prop="handleName">
<el-input v-model.number="form.handleName" placeholder="请输入办理人姓名" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="有效日期" prop="phone">
<el-date-picker
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="checkDate"
type="daterange"
placeholder="选择日期"
@change="handlDate"
value-format="YYYY-MM-DD"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="费用" prop="cost">
<el-input v-model.number="form.cost" placeholder="请输入费用">
<template #suffix>元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="支付方式" prop="payMethod">
<el-select v-model="form.payMethod" placeholder="请选择支付方式" clearable>
<el-option v-for="dict in com_pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancelForm">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addMonthCard, getMonthCard, updateMonthCard } from '@/api/system/MonthCard';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_pay_method } = toRefs<any>(proxy?.useDict('com_pay_method'));
const router = useRouter();
const route = useRoute();
const formRef = ref();
const form = ref({
id: null,
cardCode: '', // 月卡编号
cardName: null, // 持卡人姓名
phone: '', // 手机号
carNum: null, // 绑定车牌号
handleName: '', // 办理人姓名
cost: null, // 费用/元
payMethod: '', // 支付方式
remark: '', // 备注
startTime: '', // 开始日期
endTime: '' // 结束日期
});
const checkDate = ref([]);
function handlDate() {
form.value.startTime = checkDate.value[0];
form.value.endTime = checkDate.value[1];
}
const rules = ref({
cardCode: [{ required: true, message: '请输入月卡编号', trigger: 'blur' }],
cardName: [{ required: true, message: '请输入持卡人姓名', trigger: 'blur' }],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
carNum: [{ required: true, message: '请绑定车牌号', trigger: 'blur' }],
startTime: [{ required: true, message: '请选择有效日期', trigger: 'blur' }],
payMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
cost: [{ required: true, message: '请输入费用', trigger: 'blur' }]
});
const userid = ref(null);
if (route.query.id) {
userid.value = route.query.id;
getMonthCard(userid.value).then((res) => {
form.value = {
...form.value,
...res.data
};
});
}
// !== 提交 =============================================================================
// 提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (userid.value) {
updateMonthCard(form.value).then((res) => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addMonthCard(form.value).then((res) => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
});
};
// 推出
const cancelForm = () => {
router.back();
};
</script>
<style scoped lang="scss">
.AddBuildingBox {
padding: 15px;
height: 100%;
width: 100%;
}
.AddBuildingBody {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
padding: 15px;
.title {
height: 40px;
line-height: 40px;
padding-left: 20px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
border-bottom: 1px solid #bbbbbb;
margin-bottom: 60px;
}
.formBody {
width: 1050px;
margin: 0 auto;
&:deep(.el-form-item__content, .el-select, .el-input) {
width: 350px !important;
margin-right: 10px;
.el-cascader {
width: 100%;
}
}
.el-form-item {
margin-bottom: 20px;
align-items: center;
}
.el-button {
width: 80px;
height: 35px;
margin-right: 20px;
}
}
}
</style>