|
@ -2,23 +2,26 @@ |
|
|
<div> |
|
|
<div> |
|
|
<el-card class="resi-card-table"> |
|
|
<el-card class="resi-card-table"> |
|
|
<div class="resi-row-btn"> |
|
|
<div class="resi-row-btn"> |
|
|
<el-button class="diy-button--add" |
|
|
<el-button class="diy-button--add" size="small" @click="handleAdd" |
|
|
size="small" |
|
|
>新增</el-button |
|
|
@click="handleAdd">新增</el-button> |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="m-center" |
|
|
<div class="m-center" v-if="tableData.length > 0"> |
|
|
v-if="tableData.length > 0"> |
|
|
|
|
|
<div class="center-left"> |
|
|
<div class="center-left"> |
|
|
<div class="list"> |
|
|
<div class="list"> |
|
|
<div @click="currentIndex = index" |
|
|
<div |
|
|
|
|
|
@click="currentIndex = index" |
|
|
class="item" |
|
|
class="item" |
|
|
:class="{ 'z-on': currentIndex == index }" |
|
|
:class="{ 'z-on': currentIndex == index }" |
|
|
:key="'ct' + index" |
|
|
:key="'ct' + index" |
|
|
v-for="(item, index) in tableData"> |
|
|
v-for="(item, index) in tableData" |
|
|
<div class="item-btn" |
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="item-btn" |
|
|
v-if="currentIndex == index" |
|
|
v-if="currentIndex == index" |
|
|
@click="handleEdit"> |
|
|
@click="handleEdit" |
|
|
|
|
|
> |
|
|
修改 |
|
|
修改 |
|
|
</div> |
|
|
</div> |
|
|
<div class="item-name">{{ item.centerName }}</div> |
|
|
<div class="item-name">{{ item.centerName }}</div> |
|
@ -48,88 +51,107 @@ |
|
|
> |
|
|
> |
|
|
</div> --> |
|
|
</div> --> |
|
|
|
|
|
|
|
|
<div id="centerIndexApp" |
|
|
<div id="centerIndexApp" class="div_map"></div> |
|
|
class="div_map"></div> |
|
|
|
|
|
|
|
|
|
|
|
<el-table :data="tableData[currentIndex].matterList" |
|
|
<el-table |
|
|
|
|
|
:data="tableData[currentIndex].matterList" |
|
|
border |
|
|
border |
|
|
style="width: 100%" |
|
|
style="width: 100%" |
|
|
class="resi-table" |
|
|
class="resi-table" |
|
|
:max-height="maxTableHeight"> |
|
|
:max-height="maxTableHeight" |
|
|
<el-table-column label="序号" |
|
|
> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
label="序号" |
|
|
type="index" |
|
|
type="index" |
|
|
align="center" |
|
|
align="center" |
|
|
width="50" /> |
|
|
width="50" |
|
|
<el-table-column prop="matterName" |
|
|
/> |
|
|
label="事项名称"> |
|
|
<el-table-column prop="matterName" label="事项名称"> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column prop="allowTime" |
|
|
<el-table-column prop="allowTime" label="可预约时间 "> |
|
|
label="可预约时间 "> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column fixed="right" |
|
|
<el-table-column |
|
|
|
|
|
fixed="right" |
|
|
label="操作" |
|
|
label="操作" |
|
|
align="center" |
|
|
align="center" |
|
|
width="120"> |
|
|
width="120" |
|
|
|
|
|
> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<el-button @click="handleOrder(scope.$index)" |
|
|
<el-button |
|
|
|
|
|
@click="handleOrder(scope.$index)" |
|
|
type="text" |
|
|
type="text" |
|
|
size="small">预约</el-button> |
|
|
size="small" |
|
|
|
|
|
>预约</el-button |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-button @click="handleOrderList(scope.$index)" |
|
|
<el-button |
|
|
|
|
|
@click="handleOrderList(scope.$index)" |
|
|
type="text" |
|
|
type="text" |
|
|
size="small" |
|
|
size="small" |
|
|
style="margin-right: 10px; color: #00a7a9">预约记录</el-button> |
|
|
style="margin-right: 10px; color: #00a7a9" |
|
|
|
|
|
>预约记录</el-button |
|
|
|
|
|
> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="m-hint" |
|
|
<div class="m-hint" v-else> |
|
|
v-else> |
|
|
<el-empty description="暂无内容" :image-size="200"></el-empty> |
|
|
<el-empty description="暂无内容" |
|
|
|
|
|
:image-size="200"></el-empty> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</el-card> |
|
|
</el-card> |
|
|
|
|
|
|
|
|
<!-- 修改弹出框 --> |
|
|
<!-- 修改弹出框 --> |
|
|
<el-dialog :visible.sync="formShow" |
|
|
<el-dialog |
|
|
|
|
|
:visible.sync="formShow" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
:title="formTitle" |
|
|
:title="formTitle" |
|
|
width="850px" |
|
|
width="850px" |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@closed="handleClose"> |
|
|
@closed="handleClose" |
|
|
<edit-form ref="eleEditForm" |
|
|
> |
|
|
|
|
|
<edit-form |
|
|
|
|
|
ref="eleEditForm" |
|
|
@dialogCancle="handleClose" |
|
|
@dialogCancle="handleClose" |
|
|
@dialogOk="handleEditSuccess"></edit-form> |
|
|
@dialogOk="handleEditSuccess" |
|
|
|
|
|
></edit-form> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
<!-- 修改弹出框 --> |
|
|
<!-- 修改弹出框 --> |
|
|
<el-dialog :visible.sync="form2Show" |
|
|
<el-dialog |
|
|
|
|
|
:visible.sync="form2Show" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
title="预约" |
|
|
title="预约" |
|
|
width="850px" |
|
|
width="850px" |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@closed="handleCloseForm2"> |
|
|
@closed="handleCloseForm2" |
|
|
<order-form ref="eleOrderForm" |
|
|
> |
|
|
|
|
|
<order-form |
|
|
|
|
|
ref="eleOrderForm" |
|
|
@dialogCancle="handleCloseForm2" |
|
|
@dialogCancle="handleCloseForm2" |
|
|
@dialogOk="handleOrderSuccess"></order-form> |
|
|
@dialogOk="handleOrderSuccess" |
|
|
|
|
|
></order-form> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
<!-- 修改弹出框 --> |
|
|
<!-- 修改弹出框 --> |
|
|
<el-dialog :visible.sync="orderListShow" |
|
|
<el-dialog |
|
|
|
|
|
:visible.sync="orderListShow" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
title="预约记录" |
|
|
title="预约记录" |
|
|
width="850px" |
|
|
width="850px" |
|
|
top="5vh" |
|
|
top="5vh" |
|
|
class="dialog-h" |
|
|
class="dialog-h" |
|
|
@closed="handleCloseOrderList"> |
|
|
@closed="handleCloseOrderList" |
|
|
<order-list ref="eleOrderList" |
|
|
> |
|
|
@dialogCancle="handleCloseOrderList"></order-list> |
|
|
<order-list |
|
|
|
|
|
ref="eleOrderList" |
|
|
|
|
|
@dialogCancle="handleCloseOrderList" |
|
|
|
|
|
></order-list> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
@ -168,7 +190,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
maxTableHeight() { |
|
|
maxTableHeight() { |
|
|
return this.clientHeight - 410; |
|
|
return this.clientHeight - 520; |
|
|
}, |
|
|
}, |
|
|
...mapGetters(["clientHeight"]), |
|
|
...mapGetters(["clientHeight"]), |
|
|
}, |
|
|
}, |
|
@ -358,6 +380,27 @@ export default { |
|
|
.center-left { |
|
|
.center-left { |
|
|
width: 25%; |
|
|
width: 25%; |
|
|
.list { |
|
|
.list { |
|
|
|
|
|
padding-right: 10px; |
|
|
|
|
|
height: calc(100vh - 210px); |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
&::-webkit-scrollbar { |
|
|
|
|
|
/*滚动条整体样式*/ |
|
|
|
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ |
|
|
|
|
|
height: 1px; |
|
|
|
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-thumb { |
|
|
|
|
|
/*滚动条里面小方块*/ |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
box-shadow: inset 0 0 5px rgba(#333, 0.1); |
|
|
|
|
|
background: linear-gradient(270deg, #eee, #aaa); |
|
|
|
|
|
} |
|
|
|
|
|
&::-webkit-scrollbar-track { |
|
|
|
|
|
/*滚动条里面轨道*/ |
|
|
|
|
|
box-shadow: inset 0 0 5px rgba(#333, 0.1); |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background: #eee; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.item { |
|
|
.item { |
|
|
position: relative; |
|
|
position: relative; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
@ -420,6 +463,7 @@ export default { |
|
|
} |
|
|
} |
|
|
.div_map { |
|
|
.div_map { |
|
|
margin-bottom: 10px; |
|
|
margin-bottom: 10px; |
|
|
|
|
|
height: 300px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -448,7 +492,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.resi-card-table { |
|
|
.resi-card-table { |
|
|
margin-top: 20px; |
|
|
// margin-top: 20px; |
|
|
} |
|
|
} |
|
|
.resi-row-btn { |
|
|
.resi-row-btn { |
|
|
margin-bottom: 13px; |
|
|
margin-bottom: 13px; |
|
|