945 lines
32 KiB
Vue
945 lines
32 KiB
Vue
<template>
|
||
<div class="table-box">
|
||
<ProTable
|
||
ref="proTable"
|
||
title="用户列表"
|
||
:columns="columns"
|
||
:requestApi="getTableList"
|
||
:initParam="initParam"
|
||
:dataCallback="dataCallback"
|
||
:tool-button="false"
|
||
:pagination="true"
|
||
background
|
||
:isShowSearch="false"
|
||
>
|
||
<!-- 表格操作 -->
|
||
<template #operation="{ row }">
|
||
<div class="txtLeft">
|
||
<el-button type="primary" link @click="onSee(row)"
|
||
><img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" /><span>查看</span></el-button
|
||
>
|
||
<el-button type="primary" link @click="onEdit(row)"
|
||
><img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" /><span>编辑</span></el-button
|
||
>
|
||
<el-button type="primary" link @click="openMap(row)"
|
||
><img src="@/assets/images/tableIcon/修正定位.png" alt="" class="configureIcon" /><span>修正定位</span></el-button
|
||
>
|
||
<el-button v-if="row.examineState !== 3" type="primary" link @click="onApprove(row)"
|
||
><img src="@/assets/images/tableIcon/seal.png" alt="" class="configureIcon" /><span>审批</span></el-button
|
||
>
|
||
<el-button v-if="row.examineState === 3" type="primary" link @click="onState(row)"
|
||
><img src="@/assets/images/tableIcon/修改状态.png" alt="" class="configureIcon" /><span>修改状态</span></el-button
|
||
>
|
||
</div>
|
||
<!-- <el-button type="primary" text @click="onConfiguration(scope.row)">
|
||
<img src="@/assets/images/tableIcon/configureIcon.png" alt="" class="configureIcon" />
|
||
<span>授权配置</span>
|
||
</el-button> -->
|
||
<!-- <el-button @click="test"> test</el-button> -->
|
||
</template>
|
||
</ProTable>
|
||
</div>
|
||
<el-dialog title="审批" width="26%" v-model="aproveVisible" show-close>
|
||
<div style="display: flex; align-items: center">
|
||
<el-icon style="color: #e6a23c; margin: 0 12px; font-size: 20px"><WarningFilled /></el-icon>
|
||
<span>是否通过审批?</span>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button style="background: rgba(0, 0, 0, 0.1); opacity: 1; color: #333; margin-right: 25%" @click="reject"
|
||
>驳回</el-button
|
||
>
|
||
<el-button type="primary" @click="onSubmit">通过</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog title="驳回原因" width="26%" v-model="rejectedVisible" show-close>
|
||
<div style="display: flex; align-items: center">
|
||
<el-input v-model="textarea2" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button
|
||
style="background: rgba(0, 0, 0, 0.1); opacity: 1; color: #333; margin-right: 25%"
|
||
@click="rejectedVisible = false"
|
||
>取消</el-button
|
||
>
|
||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog title="查看工程信息" width="70%" v-model="ennMEssageVisible" show-close>
|
||
<div>
|
||
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
||
<el-tab-pane label="工程概况" name="first">
|
||
<div class="littleTitle">基本信息</div>
|
||
<div class="overview">
|
||
<el-form ref="formRef" :model="form" disabled label-width="150px" class="form">
|
||
<el-form-item label="项目名称:">
|
||
<el-input v-model="form.projectName" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="工程名称:">
|
||
<el-input v-model="form.engineeringName" />
|
||
</el-form-item>
|
||
<div class="row">
|
||
<el-form-item label="工程编码:">
|
||
<el-input v-model="form.engineeringCode" />
|
||
</el-form-item>
|
||
<el-form-item label="工程类别:">
|
||
<el-select class="select" v-model="form.engineeringTypeName">
|
||
<!-- <el-option
|
||
v-for="item in engineeringTypeOptions"
|
||
:key="item.dictCode"
|
||
:label="item.dictValue"
|
||
:value="item.dictLabel"
|
||
/> -->
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程用途:">
|
||
<el-select class="select" v-model="form.engineeringUseName">
|
||
<!-- <el-option
|
||
v-for="item in engineeringPurpose"
|
||
:key="item.dictCode"
|
||
:label="item.dictValue"
|
||
:value="item.dictLabel"
|
||
/> -->
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="工程造价（万元）:">
|
||
<el-input v-model="form.engineeringCost" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程总面积（㎡）:">
|
||
<el-input v-model="form.engineeringArea" />
|
||
</el-form-item>
|
||
<el-form-item label="工程总长度（m）:">
|
||
<el-input v-model="form.engineeringLength" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="是否重点工程:">
|
||
<el-radio-group v-model="form.isImportant">
|
||
<el-radio :label="1">是</el-radio>
|
||
<el-radio :label="0">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="工程位置:">
|
||
<!-- <div class="continuous">
|
||
<label class="label"><span>经度</span> <el-input v-model="form.longitude" size="small" /></label>
|
||
<label class="label"><span>纬度</span> <el-input v-model="form.latitude" size="small" /></label> -->
|
||
|
||
<el-input v-model="form.position">
|
||
<template #append>
|
||
<el-icon size="22"><Location /></el-icon> </template
|
||
></el-input>
|
||
<!-- </div> -->
|
||
<!-- <el-icon style="background-color: #008bff; color: #fff; height: 42px; width: 30px" size="22"
|
||
><Location
|
||
/></el-icon> -->
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="所属管辖区域:">
|
||
<el-form-item prop="adress">
|
||
<area-selected v-if="ennMEssageVisible" v-model="addressList"></area-selected>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<el-form-item label="建设地址:">
|
||
<el-input v-model="form.address" />
|
||
</el-form-item>
|
||
<div class="row">
|
||
<el-form-item label="施工许可证号:">
|
||
<el-input v-model="form.licenseKey" />
|
||
</el-form-item>
|
||
<el-form-item label="施工许可发放时间:">
|
||
<el-date-picker
|
||
ref="licenseCreateTimeRef"
|
||
class="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-model="form.licenseCreateTime"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
/>
|
||
<!-- <div class="calendar" @click="licenseCreateTimeRef?.focus()">
|
||
<el-icon class="icon"><Calendar /></el-icon>
|
||
</div> -->
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督站:">
|
||
<el-input v-model="form.safetySupervision" />
|
||
</el-form-item>
|
||
<el-form-item label="质量监督站:">
|
||
<el-input v-model="form.qualitySupervision" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="监督编号（安全）:">
|
||
<el-input v-model="form.safetySupervisionCode" />
|
||
</el-form-item>
|
||
<el-form-item label="监督编号（质量）:">
|
||
<el-input v-model="form.qualitySupervisionCode" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督员:">
|
||
<el-input v-model="form.safetySupervisionPerson" />
|
||
</el-form-item>
|
||
<el-form-item label="质量监督员:">
|
||
<el-input v-model="form.qualitySupervisionPerson" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督工程状态:">
|
||
<el-input v-model="form.safetySupervisionState"> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="质量监督工程状态:">
|
||
<el-input v-model="form.qualitySupervisionState"> </el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督形象进度:">
|
||
<el-input v-model="form.safetySupervisionPlan"> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="质量监督形象进度:">
|
||
<el-input v-model="form.qualitySupervisionPlan"> </el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="合同开工日期:">
|
||
<el-date-picker
|
||
ref="startTimeRef"
|
||
class="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-model="form.startTime"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
/>
|
||
<!-- <div class="calendar" @click="startTimeRef?.focus()">
|
||
<el-icon class="icon"><Calendar /></el-icon>
|
||
</div> -->
|
||
</el-form-item>
|
||
<el-form-item label="合同竣工日期:">
|
||
<el-date-picker
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
ref="endTimeRef"
|
||
class="date"
|
||
v-model="form.endTime"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
/>
|
||
<!-- <div class="calendar" @click="endTimeRef?.focus()">
|
||
<el-icon class="icon"><Calendar /></el-icon>
|
||
</div> -->
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<div class="littleTitle">单体工程</div>
|
||
<div class="table">
|
||
<div class="el-table_main">
|
||
<!-- max-height="340" -->
|
||
<el-table
|
||
:data="form.engineeringSingles"
|
||
border
|
||
:header-cell-style="{ backgroundColor: '#D6E7FF', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column prop="name" label="单体工程名称">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.name" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="shape" label="结构形式">
|
||
<template #default="{ row }">
|
||
<el-select disabled class="select" v-model="row.shapeName" size="small"> </el-select>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="area" label="工程面积（㎡）">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.area" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="floorNum" label="地面层数">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.floorNum" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="underNum" label="地下层数">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.underNum" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="remark" label="备注">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.remark" />
|
||
</template> -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="五方责任主体" name="second">
|
||
<div v-for="item in form.engineeringMains">
|
||
<span class="littleTitle">{{ item.typeName }}</span>
|
||
<el-form class="form" ref="formRef" disabled :model="form" label-width="150px" size="default">
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item :label="`${item.typeName + '名称：'}`">
|
||
<el-input v-model="item.enterpriseName"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="统一社会信用代码：">
|
||
<el-input v-model="item.creditCode"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item label="联系人：">
|
||
<el-input v-model="item.legalPerson"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系人手机号：">
|
||
<el-input v-model="item.legalPersonTel"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item v-if="item.contractType" label="承包类型：">
|
||
<el-input v-model="item.contractType"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="el-table_main">
|
||
<el-table
|
||
:data="item.engineeringMainPersonList"
|
||
border
|
||
max-height="240"
|
||
style="margin-bottom: 30px"
|
||
:header-cell-style="{ backgroundColor: '#e1eeff', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column prop="name" label="姓名">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.name" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="jobId" label="职务">
|
||
<template #default="{ row }">
|
||
<el-select class="select" disabled v-model="row.jobName" size="small">
|
||
<el-option v-for="item in jobOptions" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="station" label="职称/岗位">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.station" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="stationCode" label="职称证号/岗位证号">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.stationCode" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="idCard" label="身份证号">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.idCard" />
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="phone" label="联系电话">
|
||
<!-- <template #default="{ row }">
|
||
<el-input class="test" disabled v-model="row.phone" />
|
||
</template> -->
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="附件信息" name="third">
|
||
<h4 class="littleTitle">工程附件</h4>
|
||
<div style="width: 90%; margin: 0 auto">
|
||
<el-table
|
||
:data="annexFiles"
|
||
class="el-table"
|
||
:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column type="index" label="序号" width="200" />
|
||
<el-table-column prop="dictValue" label="附件名称" />
|
||
<el-table-column label="操作" width="200">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="onAppendix(row)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="ennMEssageVisible = false">关闭</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog title="编辑工程信息" width="60%" v-model="editennMEssageVisible" show-close>
|
||
<div class="overview">
|
||
<div class="littleTitle">概况信息</div>
|
||
<el-form ref="formRef" :model="editFormData" label-width="150px" class="form" size="default">
|
||
<el-form-item label="项目名称:">
|
||
<el-input v-model="editProjectName" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="工程名称:">
|
||
<el-input v-model="editFormData.engineeringName" />
|
||
</el-form-item>
|
||
<div class="row">
|
||
<el-form-item label="工程编码:">
|
||
<el-input v-model="editFormData.engineeringCode" />
|
||
</el-form-item>
|
||
<el-form-item label="工程造价（万元）:">
|
||
<el-input v-model="editFormData.engineeringCost" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程总面积（㎡）:">
|
||
<el-input v-model="editFormData.engineeringArea" />
|
||
</el-form-item>
|
||
<el-form-item label="工程总长度（m）:">
|
||
<el-input v-model="editFormData.engineeringLength" />
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<el-form-item label="所属管辖区域:">
|
||
<el-form-item prop="adress">
|
||
<area-selected v-if="editennMEssageVisible" v-model="addressList" @get-address="handleGetAdress"></area-selected>
|
||
</el-form-item>
|
||
</el-form-item>
|
||
<el-form-item label="建设地址:">
|
||
<el-input v-model="editFormData.address" />
|
||
</el-form-item>
|
||
|
||
<div class="row">
|
||
<el-form-item label="安全监督站:">
|
||
<el-input v-model="editFormData.safetySupervision" />
|
||
</el-form-item>
|
||
<el-form-item label="质量监督站:">
|
||
<el-input v-model="editFormData.qualitySupervision" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="监督编号（安全）:">
|
||
<el-input v-model="editFormData.safetySupervisionCode" />
|
||
</el-form-item>
|
||
<el-form-item label="监督编号（质量）:">
|
||
<el-input v-model="editFormData.qualitySupervisionCode" />
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<el-form-item label="安全监督员:">
|
||
<el-input v-model="editFormData.safetySupervisionPerson" />
|
||
</el-form-item>
|
||
<el-form-item label="质量监督员:">
|
||
<el-input v-model="editFormData.qualitySupervisionPerson" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="littleTitle" style="margin-left: -10%">补录信息</div>
|
||
<div class="row">
|
||
<el-form-item label="是否重点工程:">
|
||
<el-radio-group v-model="editFormData.isImportant">
|
||
<el-radio :label="1">是</el-radio>
|
||
<el-radio :label="0">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="工程类别:">
|
||
<el-select class="select" v-model="editFormData.engineeringType">
|
||
<el-option
|
||
v-for="item in engineeringTypeOptions"
|
||
:key="item.dictCode"
|
||
:label="item.dictValue"
|
||
:value="item.dictLabel"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="工程用途:">
|
||
<el-select class="select" v-model="editFormData.engineeringUse">
|
||
<el-option
|
||
v-for="item in engineeringPurpose"
|
||
:key="item.dictCode"
|
||
:label="item.dictValue"
|
||
:value="item.dictLabel"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="施工许可证号:">
|
||
<el-input v-model="editFormData.licenseKey" />
|
||
</el-form-item>
|
||
<el-form-item label="施工许可发放时间:">
|
||
<el-date-picker
|
||
ref="licenseCreateTimeRef"
|
||
class="date"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-model="editFormData.licenseCreateTime"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
/>
|
||
<div class="calendar" @click="licenseCreateTimeRef?.focus()">
|
||
<el-icon class="icon"><Calendar /></el-icon>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督工程状态:">
|
||
<el-input v-model="editFormData.safetySupervisionState"> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="质量监督工程状态:">
|
||
<el-input v-model="editFormData.qualitySupervisionState"> </el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="row">
|
||
<el-form-item label="安全监督形象进度:">
|
||
<el-input v-model="editFormData.safetySupervisionPlan"> </el-input>
|
||
</el-form-item>
|
||
<el-form-item label="质量监督形象进度:">
|
||
<el-input v-model="editFormData.qualitySupervisionPlan"> </el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button class="cancelButtonStyle" @click="editennMEssageVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirm"> 保存 </el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="dialogVisible" title="查看附件" width="30%" show-close>
|
||
<el-table
|
||
:data="current"
|
||
border
|
||
class="el-table"
|
||
:header-cell-style="{ backgroundColor: '#f5f7fa', textAlign: 'center' }"
|
||
:cell-style="{ textAlign: 'center' }"
|
||
>
|
||
<el-table-column prop="fileName" label="文件名称" />
|
||
<el-table-column label="操作" width="200">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link size="small" @click="onDowmload(row)">下载</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="stateVisible" title="修改工程状态" width="30%" show-close>
|
||
<el-form :model="stateForm" style="display: flex; justify-content: center" label-width="120px">
|
||
<el-form-item label="工程状态：">
|
||
<el-select v-model="stateForm.stateName" @change="onChange">
|
||
<el-option v-for="item in DicStatusList" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancelButtonStyle" @click="stateVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="onConfirm"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<AMap v-model="isOpen" @get-address="getAddress" :default-address="address" />
|
||
<FileUpload v-model="showFilesUpload"></FileUpload>
|
||
</template>
|
||
|
||
<script setup lang="tsx" name="governMentEngineering">
|
||
import { ref, reactive, onMounted, computed } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { useRoute } from "vue-router";
|
||
import { ColumnProps } from "@/components/ProTable/interface";
|
||
import ProTable from "@/components/ProTable/index.vue";
|
||
import {
|
||
getEngineeringApproveList,
|
||
editProjectApprove,
|
||
getIdEngApproveList,
|
||
getIdEngApprovettable,
|
||
getEditEngApprove,
|
||
rejectEngineeringApprove,
|
||
editEngineeringApprovePosition,
|
||
getEngineeringApproveArea,
|
||
editEngineeringApproveState
|
||
} from "@/api/modules/goverment";
|
||
import { getDicList, exportApp } from "@/api/modules/jxjview";
|
||
import { useDownload } from "@/hooks/useDownload";
|
||
import type { TabsPaneContext } from "element-plus";
|
||
import AreaSelected from "@/components/ChinaAreaData/index.vue";
|
||
import AMap from "@/components/AMap/AMap.vue";
|
||
import FileUpload from "@/components/FilesUpload/FilesUpload.vue";
|
||
import type { ReqQueryDictData, EngineeringSingle } from "@/api/types";
|
||
|
||
type DictDataList = Array<ReqQueryDictData>;
|
||
|
||
const activeName = ref("first");
|
||
const textarea2 = ref("");
|
||
const route = useRoute();
|
||
const aproveVisible = ref(false);
|
||
const ennMEssageVisible = ref(false);
|
||
const editennMEssageVisible = ref(false);
|
||
const rejectedVisible = ref(false);
|
||
const isOpen = ref(false);
|
||
const showFilesUpload = ref(false);
|
||
const dialogVisible = ref(false);
|
||
const stateVisible = ref(false);
|
||
const form = ref({});
|
||
const stateForm = ref({
|
||
dictValue: "",
|
||
dictLabel: undefined,
|
||
dictCode: "",
|
||
stateName: ""
|
||
});
|
||
const addressList = ref({});
|
||
const editProjectName = ref("");
|
||
const editFormData = ref();
|
||
const annexFiles = ref([]);
|
||
const engineeringTypeOptions = ref<DictDataList>([]);
|
||
const engineeringPurpose = ref<DictDataList>([]);
|
||
const engineeringArea = ref([]);
|
||
const address = ref({
|
||
lng: undefined,
|
||
lat: undefined,
|
||
address: ""
|
||
});
|
||
|
||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||
console.log(tab, event);
|
||
};
|
||
|
||
const DicTypeList = ref([]);
|
||
const DicStatusList = ref([]);
|
||
|
||
const getDicTypeList = async () => {
|
||
const { result } = await getDicList({ dictType: "engineering_type" });
|
||
DicTypeList.value.length = 0;
|
||
DicTypeList.value.push(...result);
|
||
};
|
||
getDicTypeList();
|
||
|
||
const getDicStatusList = async () => {
|
||
const { result } = await getDicList({ dictType: "engineering_state" });
|
||
DicStatusList.value.length = 0;
|
||
|
||
DicStatusList.value.push(...result);
|
||
};
|
||
getDicStatusList();
|
||
|
||
const getAreaList = async () => {
|
||
const { result } = await getEngineeringApproveArea();
|
||
engineeringArea.value.length = 0;
|
||
engineeringArea.value.push(...result);
|
||
};
|
||
getAreaList();
|
||
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
||
const proTable = ref();
|
||
// 表格配置项
|
||
const columns: ColumnProps[] = [
|
||
{ type: "index", label: "序号", width: 80 },
|
||
{ prop: "engineeringName", label: "工程名称", search: { el: "input" } },
|
||
{
|
||
prop: "engineeringCode",
|
||
label: "工程编号",
|
||
search: { el: "input" }
|
||
},
|
||
// 多级 prop
|
||
{
|
||
prop: "district",
|
||
label: "所在区域",
|
||
enum: engineeringArea?.value,
|
||
search: { el: "select", props: { filterable: true } }
|
||
},
|
||
{
|
||
prop: "engineeringType",
|
||
label: "工程类型",
|
||
enum: DicTypeList.value,
|
||
search: { el: "select", props: { filterable: true } },
|
||
fieldNames: { label: "dictValue", value: "dictLabel" }
|
||
},
|
||
{
|
||
prop: "state",
|
||
label: "工程状态",
|
||
enum: DicStatusList.value,
|
||
search: { el: "select", props: { filterable: true } },
|
||
fieldNames: { label: "dictValue", value: "dictLabel" }
|
||
},
|
||
{
|
||
prop: "examineState",
|
||
label: "审核状态",
|
||
enum: [
|
||
{ label: "全部", value: "" },
|
||
{ label: "已提交", value: 1 },
|
||
{ label: "已退回", value: 2 },
|
||
{ label: "已审核", value: 3 }
|
||
],
|
||
fieldNames: { label: "label", value: "value" },
|
||
search: { el: "select", props: { filterable: true } },
|
||
isShow: false
|
||
},
|
||
{
|
||
prop: "createTime",
|
||
label: "提交时间",
|
||
search: {
|
||
el: "date-picker",
|
||
props: {
|
||
type: "daterange",
|
||
format: "YYYY-MM-DD",
|
||
valueFormat: "YYYY-MM-DD"
|
||
// defaultTime: defaultTime2
|
||
}
|
||
}
|
||
},
|
||
{
|
||
prop: "examineState",
|
||
label: "审核状态"
|
||
// enum: [
|
||
// { label: "全部", value: "" },
|
||
// { label: "已提交", value: 1 },
|
||
// { label: "已退回", value: 2 },
|
||
// { label: "已审核", value: 3 }
|
||
// ],
|
||
// fieldNames: { label: "label", value: "value" },
|
||
// search: { el: "select", props: { filterable: true } }
|
||
},
|
||
{ prop: "operation", label: "操作", fixed: "right", width: 300 }
|
||
];
|
||
|
||
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||
const initParam = reactive({
|
||
// state: 0
|
||
});
|
||
|
||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||
const dataCallback = (data: any) => {
|
||
return {
|
||
list: data.records,
|
||
total: Number(data.total),
|
||
pageNo: Number(data.current),
|
||
pageSize: Number(data.size)
|
||
};
|
||
};
|
||
|
||
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||
const getTableList = (params: any) => {
|
||
let newParams = JSON.parse(JSON.stringify(params));
|
||
if (newParams.createTime) {
|
||
newParams.createTime_begin = newParams.createTime[0];
|
||
newParams.createTime_end = newParams.createTime[1];
|
||
delete newParams.createTime;
|
||
}
|
||
|
||
return getEngineeringApproveList(newParams);
|
||
};
|
||
|
||
const onSee = async row => {
|
||
// console.log(row);
|
||
const res = await getIdEngApproveList({ id: row.id });
|
||
form.value = res.result;
|
||
addressList.value = {
|
||
province: res.result.province,
|
||
city: res.result.city,
|
||
district: res.result.district
|
||
};
|
||
form.value.position = `${"经度：" + res.result.longitude + "，纬度：" + res.result.latitude}`;
|
||
|
||
ennMEssageVisible.value = true;
|
||
};
|
||
|
||
const onEdit = async row => {
|
||
// 标记
|
||
const data1 = await getIdEngApprovettable({ id: row.id });
|
||
editProjectName.value = data1.result.projectName;
|
||
|
||
const data = await getDicList({ dictType: "engineering_type" });
|
||
engineeringTypeOptions.value = data.result;
|
||
const res = await getDicList({ dictType: "engineering_purpose" }); //工程用途
|
||
engineeringPurpose.value = res.result;
|
||
addressList.value = {
|
||
province: row.province,
|
||
city: row.city,
|
||
district: row.district
|
||
};
|
||
editennMEssageVisible.value = true;
|
||
editFormData.value = reactive({ ...row });
|
||
};
|
||
|
||
const stateId = ref("");
|
||
|
||
// 修改弹窗
|
||
const onState = (row: any) => {
|
||
stateVisible.value = true;
|
||
stateId.value = row.id;
|
||
stateForm.value = reactive({ ...row });
|
||
};
|
||
|
||
const onChange = (val: number) => {
|
||
stateForm.value.dictLabel = val;
|
||
};
|
||
|
||
// 修改工程状态
|
||
const onConfirm = async () => {
|
||
// 标记下拉框
|
||
await editEngineeringApproveState({ state: stateForm.value.dictLabel, id: stateId.value });
|
||
ElMessage.success("修改成功");
|
||
stateVisible.value = false;
|
||
proTable.value.getTableList();
|
||
};
|
||
|
||
const reject = async () => {
|
||
rejectedVisible.value = true;
|
||
};
|
||
const onSubmit = async () => {
|
||
await rejectEngineeringApprove({ id: id.value, suggest: 3 });
|
||
ElMessage.success("通过成功");
|
||
aproveVisible.value = false;
|
||
proTable.value.getTableList();
|
||
};
|
||
|
||
const onComfirm = async () => {
|
||
await rejectEngineeringApprove({ id: id.value, suggest: 2, rejectReason: textarea2.value });
|
||
ElMessage.success("驳回成功");
|
||
rejectedVisible.value = false;
|
||
aproveVisible.value = false;
|
||
proTable.value.getTableList();
|
||
};
|
||
|
||
const id = ref("");
|
||
// 审批用户信息
|
||
const onApprove = async (row: any) => {
|
||
aproveVisible.value = true;
|
||
id.value = row.id;
|
||
};
|
||
const confirm = async () => {
|
||
await getEditEngApprove(editFormData.value);
|
||
ElMessage.success("保存成功");
|
||
editennMEssageVisible.value = false;
|
||
proTable.value.getTableList();
|
||
};
|
||
|
||
const openMap = row => {
|
||
console.log(row);
|
||
address.value = { lng: row.longitude, lat: row.latitude, address: row.address };
|
||
isOpen.value = true;
|
||
id.value = row.id;
|
||
};
|
||
|
||
const getAddress = async (e: any) => {
|
||
await editEngineeringApprovePosition({ id: id.value, latitude: e.lat, longitude: e.lng, address: e.address });
|
||
isOpen.value = false;
|
||
ElMessage.success("修改成功");
|
||
proTable.value.getTableList();
|
||
};
|
||
|
||
const current = ref([]);
|
||
|
||
// 附件信息的查看点击
|
||
const onAppendix = row => {
|
||
dialogVisible.value = true;
|
||
|
||
current.value = form.value.annexFiles.filter(item => item.label == row.dictLabel);
|
||
};
|
||
|
||
const handleGetAdress = (data: any) => {
|
||
// form.value.address = data;
|
||
editFormData.value.province = data.name[0];
|
||
editFormData.value.city = data.name[1];
|
||
editFormData.value.district = data.name[2];
|
||
};
|
||
|
||
const onDowmload = row => {
|
||
ElMessageBox.confirm("确认下载数据?", "温馨提示", { type: "warning" }).then(() =>
|
||
useDownload(exportApp, `${row.fileName}`, { fileUrl: row.fileUrl })
|
||
);
|
||
};
|
||
|
||
onMounted(async () => {
|
||
const res = await getDicList({ dictType: "attachment_name" });
|
||
annexFiles.value = res.result.map(item => ({ ...item, files: [] }));
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../../project/supervision/ProjectSupervision/overview.scss";
|
||
@import "../../../project/supervision/ProjectSupervision/duty.scss";
|
||
.littleTitle {
|
||
border-left: 3px solid #008bff;
|
||
padding-left: 6px;
|
||
}
|
||
.form {
|
||
padding: 2% 14% 0 8%;
|
||
}
|
||
|
||
.el-table_main {
|
||
padding: 2% 4% 0 4%;
|
||
}
|
||
:deep(.el-tabs--card > .el-tabs__header) {
|
||
border-bottom: none;
|
||
}
|
||
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
|
||
width: 600px;
|
||
border: none;
|
||
}
|
||
:deep(.el-tabs__nav-scroll) {
|
||
display: flex;
|
||
justify-content: center;
|
||
.el-tabs__item {
|
||
width: 33.33%;
|
||
text-align: center;
|
||
// background: #fff;
|
||
color: #333;
|
||
|
||
border: 1px solid #aeaeae;
|
||
// border-radius: 8px;
|
||
}
|
||
.el-tabs__item.is-active {
|
||
background-color: #008bff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
:deep(#tab-first) {
|
||
border-radius: 4px 0 0 4px;
|
||
border-left: 1px solid #aeaeae;
|
||
}
|
||
:deep(#tab-third) {
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
:deep(.el-input--suffix) {
|
||
width: 100%;
|
||
}
|
||
.test :deep(.el-input__wrapper) {
|
||
box-shadow: 0 0 0 0;
|
||
}
|
||
.test :deep(.el-input__inner) {
|
||
text-align: center;
|
||
}
|
||
</style>
|