添加按鈕取消事件;修改UI

This commit is contained in:
gongjiale 2022-11-21 18:22:58 +08:00
parent f795484416
commit 879b43cea5
5 changed files with 37 additions and 11 deletions

View File

@ -143,6 +143,7 @@
show-size-changer show-size-changer
show-less-items show-less-items
show-quick-jumper show-quick-jumper
:showTotal="total => `共 ${total} 项`"
:total="resourceTotal" :total="resourceTotal"
:page-size-options="pageSizeOptions" :page-size-options="pageSizeOptions"
@change="pageChange" @change="pageChange"

View File

@ -40,6 +40,10 @@
:pageSize="5" :pageSize="5"
:total="props.resourceTotal" :total="props.resourceTotal"
show-less-items show-less-items
show-size-changer
show-quick-jumper
:page-size-options="pageSizeOptions"
:showTotal="total => `共 ${total} 项`"
@change="handleCurrentChange" @change="handleCurrentChange"
:showSizeChanger="false" :showSizeChanger="false"
/> />
@ -56,6 +60,7 @@
resourceList: { type: Array, default: null }, resourceList: { type: Array, default: null },
resourceTotal: { type: String, default: '' }, resourceTotal: { type: String, default: '' },
}) })
const pageSizeOptions = ref(['5', '10', '20', '50'])
console.log('props==========>', props) console.log('props==========>', props)
// //
const zskState = reactive({ const zskState = reactive({

View File

@ -191,7 +191,10 @@ export default defineComponent({
mybus.on('getDeptList', () => { mybus.on('getDeptList', () => {
init() init()
}) })
mybus.on('clearChoose', () => {
selectId.value=''
chooseId.value=''
})
const onSelect = async (item, val, child) => { const onSelect = async (item, val, child) => {
let res = {} let res = {}
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) { if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
@ -270,7 +273,7 @@ export default defineComponent({
}, },
beforeUnmount() { beforeUnmount() {
mybus.off('getDeptList') mybus.off('getDeptList')
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~') mybus.off('clearChoose')
}, },
components: { components: {
UpOutlined, UpOutlined,

View File

@ -128,16 +128,21 @@
预约 预约
</a-button> </a-button>
</div> </div>
<!-- <div class="flex-space" style="justify-content: center;display:flex;height:40px;align-items:center;"> -->
<a-pagination <a-pagination
v-model:current="roomPage" v-model:current="roomPage"
v-model:pageSize="roomLimit" v-model:pageSize="roomLimit"
show-quick-jumper show-quick-jumper
:showTotal="total => `共 ${total} 项`"
:total="roomTotal" :total="roomTotal"
:page-size-options="pageSizeOptions" :page-size-options="pageSizeOptions"
@change="onRoomChange" @change="onRoomChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
show-size-changer show-size-changer
/> />
<!-- <el-button @click="onOkChange" class="queding" >确认</el-button>
</div> -->
</div> </div>
<div v-if="roomResult" style="display: grid"> <div v-if="roomResult" style="display: grid">
<a-table <a-table
@ -1440,10 +1445,14 @@
} }
} }
// //
const onRoomChange = (pageNumber) => { const onRoomChange = () => {
roomPage.value = pageNumber roomPage.value = pageNumber
searchData() searchData()
} }
const onOkChange = () => {
current.value = roomPage.value
searchData()
}
const onShowSizeChange = (current, pageSize) => { const onShowSizeChange = (current, pageSize) => {
roomLimit.value = pageSize roomLimit.value = pageSize
searchData() searchData()
@ -2471,6 +2480,16 @@
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.queding{
margin-left: 16px;
cursor: pointer;
background: #0058e1;
color: #ffffff;
width: 56px;
border-radius: 2px;
border: 1px #0058e1 solid;
margin-top: 17px;
}
.infrastructrueBox { .infrastructrueBox {
padding: 0.2rem; padding: 0.2rem;
background: #ffffff; background: #ffffff;
@ -2803,13 +2822,11 @@
} }
} }
:deep(.ant-pagination) {
float: right;
}
:deep(.ant-pagination) {
text-align: end; // :deep(.ant-pagination) {
} // text-align: end;
// }
} }
:deep(.ant-table-thead > tr > th) { :deep(.ant-table-thead > tr > th) {
color: #5580f7 !important; color: #5580f7 !important;

View File

@ -2579,7 +2579,7 @@
} }
:deep(.ant-pagination) { :deep(.ant-pagination) {
float: right; float: center;
} }
:deep(.ant-pagination) { :deep(.ant-pagination) {