<template>
<div class="container">
<el-row class="header" style="margin-bottom: 10px;">
<el-card shadow="never">
<el-form :inline="true" :model="payload" status-icon label-width="80px" class="searchForm">
<el-form-item label="摊位名称">
<el-select v-model="payload.sid" placeholder="请选择摊位(单元)">
<el-option v-for="item in rentStallList" :label="item.stallName" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属市场">
<el-select v-model="payload.aid" placeholder="请选择所属市场">
<el-option v-for="item in areaList" :label="item.areaName" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="合同编号">
<el-input clearable v-model="payload.contractNumber" placeholder="请输入合同编号"></el-input>
</el-form-item>
<el-form-item label="租户姓名">
<el-input clearable v-model="payload.tenantName" placeholder="请输入合同编号"></el-input>
</el-form-item>
<el-form-item label="合同状态">
<el-select v-model="payload.stus" placeholder="请选择合同状态">
<el-option label="生效中" :value="0"></el-option>
<el-option label="已到期" :value="1"></el-option>
<el-option label="已退租" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="租赁结束日期" label-width="150">
<el-date-picker v-model="timeRange" size="mini" type="daterange" align="right" unlink-panels
range-separator="至" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<!-- #409EFF -->
<el-button @click="getContractList()" type="primary" icon="el-icon-search">查询</el-button>
<el-button @click="handleReset" icon="el-icon-refresh-right">重置</el-button>
</el-form>
</el-card>
</el-row>
<el-row class="body">
<el-card shadow="never">
<div class="table-header">
<!-- 导出/新增按钮 -->
<div>
<el-button @click="exportDialogVisible = true" type="primary" icon="el-icon-download">导出</el-button>
<el-button @click="handelOpenEditDialog('新增')" type="primary" icon="el-icon-plus">新增</el-button>
<!-- <el-button @click="openUpdateDialog" type="success" icon="el-icon-edit-outline">批量续租</el-button> -->
</div>
<!-- 刷新按钮 -->
<div>
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
<i @click="getContractList()" class="el-icon-refresh" style="cursor: pointer;"></i>
</el-tooltip>
</div>
</div>
<el-table @selection-change="handleSelectionChange" height="80%" class="table-content" :data="tableData"
style="width: 100%" v-loading="loading" ref="myTable">
<!-- 空状态 -->
<template slot="empty">
<el-empty description="暂无数据"></el-empty>
</template>
<!-- 列表数据 -->
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="序号" width="60" align="center">
<template slot-scope="{ $index }">
<div>
<span> {{ $index + 1 }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="stallNumber" label="单元id">
</el-table-column>
<el-table-column prop="stallName" label="摊位名称" width="100">
</el-table-column>
<el-table-column prop="contractNumber" label="合同编号" width="150">
</el-table-column>
<el-table-column prop="tenantName" label="租户姓名" width="150" fixed="left">
</el-table-column>
<el-table-column prop="tenantPhone" label="租户联系电话" width="150">
</el-table-column>
<el-table-column prop="areaName" label="所属市场">
</el-table-column>
<el-table-column prop="startTime" label="租赁开始日期" width="150">
</el-table-column>
<el-table-column prop="endTime" label="租赁结束日期" width="150">
</el-table-column>
<el-table-column prop="leaseTerm" label="租期">
</el-table-column>
<el-table-column label="到期提醒" width="150">
<template slot-scope="scope">
<span v-if="scope.row.expirationReminder == 0">提前一周</span>
<span v-if="scope.row.expirationReminder == 1">提前一月</span>
<span v-if="scope.row.expirationReminder == 2">提前三月</span>
<span v-if="scope.row.expirationReminder == 3"> 提前半年</span>
</template>
</el-table-column>
<el-table-column prop="stus" label="合同状态" width="150">
<template slot-scope="scope">
<el-tag :type="calculateDayDiff(scope.row.endTime)" v-if="scope.row.stus == 0">生效中</el-tag>
<el-tag type="info" v-if="scope.row.stus == 1">已到期</el-tag>
<el-tag type="info" v-if="scope.row.stus == 2">已退租</el-tag>
</template>
</el-table-column>
<el-table-column prop="foodBusinessNumber" label="食品经营许可证编号" width="150">
</el-table-column>
<el-table-column prop="businessNumber" label="营业执照编号" width="150">
</el-table-column>
<el-table-column prop="businessName" label="企业名称" width="150">
</el-table-column>
<el-table-column label="操作" fixed="right" width="160">
<template slot-scope="scope">
<el-button v-if="scope.row.stus != 2" @click="handelOpenEditDialog('编辑', scope.row)" type="text"
size="small">编辑</el-button>
<el-button @click="handelOpenEditDialog('详情', scope.row)" type="text"
size="small">详情</el-button>
<el-dropdown v-if="scope.row.stus != 2">
<span class="el-dropdown-link" style="color: #409EFF;cursor:pointer;">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@click.native="handelOpenEditDialog('续签', scope.row)">续签</el-dropdown-item>
<el-dropdown-item @click.native="handleRentOut(scope.row)">退租</el-dropdown-item>
<!-- <el-dropdown-item v-if="scope.row.stus != 2"
@click.native="handleDelete(scope.row)">删除
</el-dropdown-item> -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pagination.currentPage" :page-sizes="[1, 50, 100, 500]"
:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total" background>
</el-pagination>
</div>
<!-- 编辑(新增、续签、详情）弹框 -->
<el-dialog :close-on-click-modal="false" v-loading="dialog_loading" :title="dialogTitle"
:visible.sync="editDialogVisible" :modal="true" append-to-body width="60%" class="detail-dialog"
@close="handleCloseEditDialog()">
<el-form label-position="top" :model="editForm" label-width="100px" :rules="rules" ref="editForm"
class="demo-ruleForm">
<el-row :gutter="10">
<div style="height: 500px;overflow-y: auto;">
<el-col :span="12">
<el-form-item label="合同编号" prop="contractNumber">
<el-input :disabled="dialogTitle == '详情'" clearable maxlength="50"
v-model="editForm.contractNumber" placeholder="请输入合同编号(若无将自动生成)"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="sid" label="选择摊位(单位)" v-if="dialogTitle == '新增'">
<el-select @click.native="handleOpenRadioTable()" clearable
v-model="editForm.stallName" placeholder="请选择摊位"></el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="dialogTitle != '新增'">
<el-form-item label="选择摊位" prop="sid">
<el-input disabled v-model="editForm.stallName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租户姓名" prop="tenantName">
<el-input :disabled="dialogTitle == '详情'" clearable v-model="editForm.tenantName"
placeholder="请输入租户姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="摊位面积（平方米）" prop="stallExtent">
<el-input disabled clearable v-model="editForm.stallExtent"
placeholder="请输入摊位面积"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租户联系电话" prop="tenantPhone">
<el-input :disabled="dialogTitle == '详情'" clearable v-model="editForm.tenantPhone"
placeholder="请输入联系电话"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属市场" prop="aid">
<el-input disabled clearable v-model="editForm.aName" placeholder="所属市场"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租户身份证" prop="idCard">
<el-input :disabled="dialogTitle == '详情'" clearable v-model="editForm.idCard"
placeholder="请输入租户身份证"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="摊位类型" prop="stallType">
<el-select disabled clearable v-model="editForm.stallType" placeholder="请选择摊位类型">
<el-option v-for="item in stallTypes" :label="item.styleName"
:value="item.fid"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租赁开始时间" prop="startTime">
<el-date-picker :disabled="dialogTitle == '详情'||dialogTitle == '编辑'" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" v-model="editForm.startTime" type="date"
placeholder="选择开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租赁结束时间" prop="endTime">
<el-date-picker :disabled="dialogTitle == '详情'||dialogTitle == '编辑'" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" v-model="editForm.endTime" type="date"
placeholder="选择结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租期" prop="leaseTerm">
<el-input-number v-model="editForm.leaseTerm" :precision="1" :step="1"
disabled></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保证金" prop="deposit">
<el-input-number :disabled="dialogTitle == '详情'" v-model="editForm.deposit" :min="0"
:max="1000000" :precision="2" :step="100" ></el-input-number>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同附件">
<UploadFz v-model="contractAnnex" :showTip="true" fileSize="60" accept=".pdf">
</UploadFz>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="食品经营许可证编号" prop="foodBusinessNumber">
<el-input :disabled="dialogTitle == '详情'" clearable
v-model="editForm.foodBusinessNumber" placeholder="请输入食品经营许可证编号"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="企业名称" prop="businessName ">
<el-input :disabled="dialogTitle == '详情'" clearable v-model="editForm.businessName"
placeholder="请输入企业名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="营业执照编号" prop="businessNumber">
<el-input :disabled="dialogTitle == '详情'" clearable
v-model="editForm.businessNumber" placeholder="请输入营业执照编号"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-card>
<div slot="header" class="clearfix">
<span>租赁到期提醒</span>
</div>
<el-col :span="24">
<el-form-item label="到期提醒" prop="expirationReminder">
<el-select :disabled="dialogTitle == '详情'" clearable
v-model="editForm.expirationReminder" placeholder="到期提醒">
<el-option label="提前一周" :value="0"></el-option>
<el-option label="提前一个月" :value="1"></el-option>
<el-option label="提前三个月" :value="2"></el-option>
<el-option label="提前半年" :value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒间隔" prop="reminderInterval">
<el-input-number :disabled="dialogTitle == '详情'"
v-model="editForm.reminderInterval" :precision="0" :step="1" :min="0"
:max="1000"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒次数" prop="reminderTotal">
<el-input-number :disabled="dialogTitle == '详情'"
v-model="editForm.reminderTotal" :precision="0" :step="1" :min="0"
:max="1000"></el-input-number>
</el-form-item>
</el-col>
</el-card>
</el-col>
<el-col :span="24">
<el-form-item label="单元编号">
<el-input disabled clearable v-model="editForm.stallNumber"
placeholder=""></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item disabled label="合同状态" prop="stus">
<el-select :disabled="dialogTitle == '详情'" clearable v-model="editForm.stus"
placeholder="合同状态">
<el-option label="生效中" :value="0"></el-option>
<el-option label="已到期" :value="1"></el-option>
<el-option label="已退租" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</div>
<el-col :span="24">
<div style="text-align: right;">
<el-button @click="handleEdit" type="primary">确定</el-button>
<el-button @click="handleCloseEditDialog()">取消</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
<!-- 导出弹框 -->
<el-dialog title="导出数据" :visible.sync="exportDialogVisible" top="30vh" :modal="true" append-to-body
width="40%" class="export-dialog">
<el-radio-group v-model="export_payload.dataType">
<el-radio :label="0">当前页面数据</el-radio>
<el-radio :label="1">全部页面数据</el-radio>
</el-radio-group>
<div style="margin-top: 20px;border-bottom: 1px solid #DCDFE6;padding: 5px 0;"><span
style="font-weight: bold;font-size: 20px;margin-right: 5px;">列表数据</span><span>请选择导出字段</span>
</div>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAllColumn"
@change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="export_payload.selectKey" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(column, i) in export_list" :label="column.prop" :key="i">
{{ column.lable }}</el-checkbox>
</el-checkbox-group>
</el-dialog>
<!-- 批量续租 -->
<el-dialog title="批量续租" :visible.sync="updateDialogVisible" :modal="true" append-to-body width="40%"
class="export-dialog">
<el-form :model="payload_ids" ref="payload_ids" :rules="rules2" label-position="top" label-width="100px"
class="demo-ruleForm">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="租赁开始时间" prop="starttime">
<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"
v-model="payload_ids.starttime" type="date" placeholder="选择开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="租赁结束时间" prop="endtime">
<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"
v-model="payload_ids.endtime" type="date" placeholder="选择结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<div style="text-align: right;">
<el-button @click="handelUpdateByIds" type="primary">确定</el-button>
<el-button @click="updateDialogVisible = false">取消</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
</el-card>
</el-row>
<TableSelect @select="setStall" @close="handleCloseTableDialog" :dialogTableVisible="dialogTableVisible"
title="选择摊位" v-if="dialogTableVisible">
</TableSelect>
</div>
</template>
<script>
import {
ContractList,
AddContract,
EditContract,
DeleteContract,
ContractDetail,
ContractOut,
UpdateRent,
UpdateRentOut,
BatchUpdate,
RentStallList,
StallTypes,
AreaName,
AreaList,
} from '@/api/property/contract'
import { getModelList, deleteModel, exportModel } from '@/api/onlineDev/visualDev'
import UploadFz from '@/components/Generator/components/Upload/UploadFz.vue'
import TableSelect from './TableSelect.vue';
// 438753154494901893 modelId
export default {
name: 'contract',
components: {
UploadFz,
TableSelect,
},
data() {
return {
contractAnnex: [],
dialogTableVisible: false,
// 批量续租表单验证
rules2: {
starttime: [
{ required: true, message: '请选择开始时间', trigger: 'blur' },
],
endtime: [
{ required: true, message: '请选择结束时间', trigger: 'blur' },
],
},
// 表单验证规则
rules: {
sid: [
{ required: true, message: '请选择摊位', trigger: 'blur' },
],
tenantName: [
{ required: true, message: '请填写租户名称', trigger: 'blur' },
{ max: 20, message: '租户名称不能超过20个字符', trigger: 'blur' },
],
stallExtent: [
{ required: true, message: '请输入摊位面积', trigger: 'blur' },
],
tenantPhone: [
{ required: true, message: '请输入租户联系方式', trigger: 'blur' },
{ validator: this.validatePhone, message: '请填写正确的手机号', trigger: 'blur' },
],
aid: [
{ required: true, message: '请选择所属市场', trigger: 'blur' },
],
idCard: [
{ required: true, message: '请输入租户身份证', trigger: 'blur' },
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '请输入正确的身份证号码',
trigger: 'blur'
}
],
startTime: [
{ required: true, message: '请选择开始时间', trigger: 'blur' },
],
endTime: [
{ required: true, message: '请选择结束时间', trigger: 'blur' },
],
leaseTerm: [
{ required: true, message: '请输入租期', trigger: 'blur' },
],
deposit: [
{ required: true, message: '请输入保证金', trigger: 'blur' },
],
expirationReminder: [
{ required: true, message: '请选择到期提醒', trigger: 'blur' },
],
reminderInterval: [
{ required: true, message: '请输入提醒间隔', trigger: 'blur' },
],
reminderTotal: [
{ required: true, message: '请输入提醒次数', trigger: 'blur' },
],
stus: [
{ required: true, message: '请选择合同状态', trigger: 'blur' },
],
// 食品经营许可证和营业执照格式暂不明确，只做长度限制不做格式限制
foodBusinessNumber: [
// { pattern: /^[\d]{15}$/, message: '食品经营许可证格式不正确', trigger: 'blur' },
{ max: 30, message: '食品经营许可证编号不能超过30个字符', trigger: 'blur' },
],
businessName: [
{ max: 50, message: '企业名称不能超过50个字符', trigger: 'blur' },
],
businessNumber: [
// { pattern: /^[A-Za-z0-9]{15}$/, message: '营业执照编号格式不正确', trigger: 'blur' },
{ max: 30, message: '营业执照编号不能超过30个字符', trigger: 'blur' },
],
},
updateDialogVisible: false,
payload_ids: {
ids: [],
starttime: '',
endtime: '',
},
dialog_loading: false,
areaList: [],//市场列表
// 摊位类型
stallTypes: [],
curRentStall: {},//当前选中摊位
rentStallList: [],//摊位列表
// 摊位请求载荷
listPayLoad: {
pageNum: 1,
pageSize: 20,
stallStatus: '',
stallName: "",
areaName: "",
stallType: "",
ascNum: 1
},
// 弹框标题
dialogTitle: '编辑',
dialogType: 0,
sids: [],
editForm: {
contractNumber: "",
tenantName: "",
tenantPhone: "",
idCard: "",
startTime: "",
endTime: "",
leaseTerm: '',
deposit: '',
contractAnnex: "",
expirationReminder: '',
reminderInterval: '',
reminderTotal: '',
stus: 0,
sid: "",
stallName: "",
stallNumber: "",
stallExtent: '',
aid: "",
stallType: "",
foodBusinessNumber: null,
businessName: null,
businessNumber: '',
permission:this.$store.state.user.userInfo.organizeId,
},
editFormCache: {},
multipleSelection: [],
timeRange: [],
is_expand: false,
editDialogVisible: false,
// 列表请求载荷
payload: {
contractNumber: "",
tenantName: "",
aid: "",//
sid: "",//
stus: '',
startTime: "",
endTime: "",
pageNum: 1,
pageSize: 20,
permission:this.$store.state.user.userInfo.organizeId
},
// 重置查询表单
searchFormReset: {
contractNumber: "",
tenantName: "",
aid: "",//
sid: "",//
startTime: "",
endTime: "",
pageNum: 1,
pageSize: 20,
permission:this.$store.state.user.userInfo.organizeId
},
is_reset: false,// 是否重置标识
//列表数据
tableData: [],
//分页数据
pagination: {},
loading: false,//列表加载控制
detail: {},
is_detail: false,
btn_type: 0,//自定义按钮类型
orderId: '',//订单id
listRow: {},
// 导出
export_list: [
{ lable: '单元ID', prop: 'stall_number' },
{ lable: '摊位名称', prop: 'sid' },
{ lable: '合同编号', prop: 'contract_number' },
{ lable: '租户姓名', prop: 'tenant_name' },
{ lable: '租户联系电话', prop: 'tenant_phone' },
{ lable: '所属市场', prop: 'aid' },
{ lable: '租赁开始日期', prop: 'start_time' },
{ lable: '租赁结束日期', prop: 'end_time' },
{ lable: '租期', prop: 'lease_term' },
{ lable: '到期提醒', prop: 'expiration_reminder' },
{ lable: '合同状态', prop: 'stus' },
{ lable: '食品经营许可证编号', prop: 'food_business_number' },
{ lable: '营业执照编号', prop: 'business_number' },
{ lable: '企业名称', prop: 'business_name' },
],
exportDialogVisible: false,//控制导出对话框状态
checkAllColumn: true,//控制全选框是否勾选
isIndeterminate: false,//控制全选框半选状态
// 导出请求载荷
export_payload: {
dataType: 0,// 导出类型 0当前页面1全部页面
selectKey:
[
"stall_number",
"sid",
"contract_number",
"tenant_name",
"tenant_phone",
"aid",
"start_time",
"end_time",
"lease_term",
"expiration_reminder",
"stus",
"food_business_number",
"business_number",
"business_name"
],
},
}
},
computed: {
export_options() {
return this.export_list.map(item => item.prop);
},
calculatedLeaseTerm() {
if (this.editForm.startTime && this.editForm.endTime) {
const startDate = new Date(this.editForm.startTime);
const endDate = new Date(this.editForm.endTime);
const leaseTerm = Number(((endDate - startDate) / (1000 * 60 * 60 * 24 * 365 / 12)).toFixed(1));
return leaseTerm;
} else {
return 0;
}
},
},
watch: {
payload: {
deep: true,
immediate: true,
async handler(newVal) {
this.export_payload = { ...this.export_payload, ...newVal };
await this.getContractList();
}
}
},
methods: {
validatePhone(rule, value, callback) {
const reg = /^[1][3-9][0-9]{9}$/; // 手机号正则表达式
if (!reg.test(value)) {
callback(new Error('请输入有效的手机号'));
} else {
callback();
}
},
getDaysBetweenDates(date1, date2) {
const [year1, month1, day1] = date1.split('-');
const [year2, month2, day2] = date2.split('-');
const timestamp1 = new Date(year1, month1 - 1, day1).getTime();
const timestamp2 = new Date(year2, month2 - 1, day2).getTime();
const timeDiff = Math.abs(timestamp2 - timestamp1);
const daysDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
return daysDiff;
},
calculateDayDiff(targetDateStr) {
// 获取当前日期
const currentDate = new Date();
// 解析目标日期
const targetDateParts = targetDateStr.split('-');
const targetYear = parseInt(targetDateParts[0]);
const targetMonth = parseInt(targetDateParts[1]) - 1; // 月份从 0 开始，所以需要减去 1
const targetDay = parseInt(targetDateParts[2]);
// 构造目标日期对象
const targetDate = new Date(targetYear, targetMonth, targetDay);
// 计算日期差距（以天为单位）
const timeDiff = Math.abs(targetDate.getTime() - currentDate.getTime());
const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
if (dayDiff < 7 || dayDiff == 7) {
return 'danger'
} else if (dayDiff > 7 && dayDiff < 30) {
return 'warning'
} else if (dayDiff > 30 || dayDiff == 30) {
return 'success'
}
},
openUpdateDialog() {
if (this.multipleSelection.length < 1) {
this.$message.warning('请勾选要续租的合同！');
} else {
this.updateDialogVisible = true;
this.payload_ids.ids = this.multipleSelection.map(item => item.id);
}
},
async handelUpdateByIds() {
this.$refs['payload_ids'].validate(async (valid) => {
if (valid) {
let res = await BatchUpdate({ ...this.payload_ids });
if (res.code == 200) {
this.$message.success('续租成功');
this.updateDialogVisible = false;
this.getContractList();
} else {
this.$message.error('续租失败');
}
} else {
console.log('error submit!!');
return false;
}
});
},
async handleRentOut(data) {
let payload = {
sid: data.sid,
contractNumber: data.contractNumber,
}
this.$confirm('确定要退租吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let res = await ContractOut(data.id);
if (res.code == 200) {
this.$message.success('退租成功');
}
await this.getContractList();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
// 获取摊位类型
async getStallTypes(payload) {
let { code, data } = await StallTypes(payload);
if (code == 200) {
this.stallTypes = data;
}
},
handleClearRentStall() {
this.editForm.stallExtent = '';
this.editForm.stallType = '';
this.editForm.aid = '';
this.editForm.aName = '';
this.editForm.stallName = '';
},
// 选择摊位
setStall(current) {
if (current) {
console.log(current);
this.editForm.sid = current.id;
this.editForm.stallExtent = current.stallExtent;
this.editForm.stallType = current.stallType;
this.editForm.aid = current.aid;
this.editForm.stallName = current.stallName;
this.editForm.stallNumber = current.stallNumber;
}
},
//关闭摊位选择
handleCloseTableDialog(val) {
this.dialogTableVisible = val;
},
// 打开摊位选择
handleOpenRadioTable() {
this.dialogTableVisible = true;
},
// 获取摊位列表
async getRentStallList() {
let { code, data } = await RentStallList({ ...this.listPayLoad });
if (code == 200) {
this.rentStallList = data.list;
}
},
// 获取市场列表
async getAreaList(data) {
let res = await AreaList(data);
if (res.code == 200) {
this.areaList = res.data
console.log(res.data);
}
},
// 打开弹框
async handelOpenEditDialog(type, data) {
this.editFormCache = JSON.parse(JSON.stringify(this.editForm));
this.dialogTitle = type;
if (type == '编辑' || type == '续签' || type == '详情') {
let res = await ContractDetail(data.id);
if (res.code == 200) {
this.editForm = Object.assign(this.editForm, res.data);
}
} else {
this.editForm = Object.assign(this.editForm, {});
}
if (type == '续签') {
this.editForm.contractNumber = '';
}
this.dialogType = type;
this.editDialogVisible = true;
},
// 关闭弹框
handleCloseEditDialog() {
this.editForm = JSON.parse(JSON.stringify(this.editFormCache));
this.editDialogVisible = false;
this.$refs['editForm'].resetFields(); // 重置表单字段
this.$refs['editForm'].clearValidate(); // 清空表单验证状态
},
// 新增合同/编辑合同
async handleEdit() {
this.$refs['editForm'].validate(async (valid) => {
if (valid) {
this.dialogTitle == '新增' || this.dialogTitle == '续签' ? this.editForm.id = '' : '';
let res = this.dialogTitle == '新增' || this.dialogTitle == '续签' ? await AddContract({ ...this.editForm }) : await EditContract({ ...this.editForm });
if (res.code == 200) {
this.editDialogVisible = false;
this.editForm = JSON.parse(JSON.stringify(this.editFormCache));
this.$message.success(`${this.dialogTitle}成功`);
this.contractAnnex = [];
await this.getContractList();
}
} else {
console.log('error submit!!');
return false;
}
});
},
// 多选表格项
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 加载列表数据
async getContractList() {
this.loading = true;
if (this.is_reset) {
// 重置查询表单，注意深拷贝
this.payload = JSON.parse(JSON.stringify(this.searchFormReset));
}
this.is_reset = false;
let res = await ContractList({ ...this.payload });
if (res.code == 200) {
this.tableData = res.data.list;
this.pagination.currentPage = res.data.pageNum;
this.pagination.pageSize = res.data.pageSize;
this.pagination.total = res.data.total;
this.loading = false;
}
},
// 重置列表数据
async handleReset() {
this.timeRange = [];
this.is_reset = true;
await this.getContractList();
},
// 更改每页显示条数
async handleSizeChange(size) {
this.payload.pageSize = size;
await this.getContractList();
},
// 换页
async handleCurrentChange(current) {
this.payload.pageNum = current;
await this.getContractList();
},
// 删除订单
async handleDelete(data) {
this.$confirm('此操作将永久删除该合同, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let res = await DeleteContract(data.id);
if (res.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
await this.getContractList();
}
}).catch((error) => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 导出模块
handleCheckAllChange(val) {
this.export_payload.selectKey = val ? this.export_options : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAllColumn = checkedCount === this.export_options.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.export_options.length;
},
async handleExport() {
let res = await exportModel('438753154494901893', { ...this.export_payload });
if (res.code == 200) {
const fileUrl = process.env.VUE_APP_BASE_API + res.data.url;
this.downloadFileWithProgress(fileUrl, res.data.name);
this.exportDialogVisible = false;
}
},
downloadFileWithProgress(fileUrl, fileName) {
const xhr = new XMLHttpRequest();
xhr.open('GET', fileUrl, true);
xhr.responseType = 'blob';
xhr.onprogress = (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`下载进度：${percentComplete.toFixed(2)}%`);
}
};
xhr.onload = () => {
if (xhr.status === 200) {
// 创建一个下载链接
const link = document.createElement('a');
link.href = window.URL.createObjectURL(xhr.response);
link.download = fileName;
// 触发点击事件，开始下载
link.click();
// 释放资源
window.URL.revokeObjectURL(xhr.response);
}
};
xhr.send();
}
},
watch: {
timeRange: {
handler: function (newValue, oldValue) {
this.payload.startTime = newValue[0];
this.payload.endTime = newValue[1];
},
deep: true,
immediate: true,
},
'editForm.aid': {
handler(newVal) {
if (newVal) {
AreaName(newVal)
.then(res => {
// 触发Vue的响应式更新，确保视图正确地反映数据的变化
this.$set(this.editForm, 'aName', res.data.areaName);
})
.catch(error => {
console.error('获取数据失败:', error);
});
}
}
},
calculatedLeaseTerm(newVal) {
this.editForm.leaseTerm = newVal;
},
contractAnnex(newVal) {
this.editForm.contractAnnex = JSON.stringify(newVal);
}
},
async created() {
await this.getContractList();
await this.getRentStallList();
await this.getAreaList({ pid: '' });
await this.getStallTypes({
areaType: "440854091313203781"
});
},
mounted() {
console.log(this.$store.state.user.userInfo,'state.user.userInfo')
}
}
</script>
<style lang="scss" scoped>
.export-dialog {
.dialog-footer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
}
.container {
width: 100%;
height: 100%;
background-color: #F1F7FE;
position: relative;
z-index: 10;
.danger-text-button {
color: #F56C6C;
}
::v-deep .el-card {
height: 100%;
overflow-y: auto;
}
.header {
margin-bottom: 20px;
// height: 10%;
::v-deep .el-card__body {
padding-bottom: 0;
}
.searchForm {
::v-deep .el-form-item .el-form-item__label {
font-weight: bold;
}
}
}
.body {
height: 90%;
::v-deep .el-card {
height: 100%;
}
::v-deep .el-card .el-card__body {
height: 100%;
}
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
height: 10%;
}
// .table-content {
// height: 80%;
// overflow-y: auto;
// }
.table-footer {
text-align: right;
height: 10%;
}
}
}
</style>
05-17
4664
4664
03-31
4846
4846
09-03
1057
1057
09-05
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
