ccongli
/
YX-SCM
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分支机构排版调整

Browse Source
pull/1/head
mhsnet 1 year ago
parent cee6c2c9dd
commit 33ae061d88
2 changed files with 90 additions and 67 deletions
Show Stats Download Patch File Download Diff File

149
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/index.vue
Unescape View File

@ -5,6 +5,7 @@ import DrawerFilter from './src/DrawerFilter.vue'
import { ref, h } from 'vue'
import { EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined, FilterOutlined } from '@ant-design/icons-vue';
const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
const activeKey = ref('1');
const columns: any = [
{
@ -149,81 +150,94 @@ const doShowDrawerFilter = (isshow: boolean) => {
<template>
<a-row :wrap="false" class="y1-enterprise-centre-branch">
<a-col flex="1 1 auto">
<a-row :wrap="false" class="y1y1">
<a-col flex="1 1 auto">
<a-row :wrap="false">
<a-col flex="1 1 300px" class="y1y1x1">
<a-space>
<a-input placeholder="部门名称" />
<a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
<a-button :icon="h(UndoOutlined)">重置</a-button>
</a-space>
</a-col>
<a-col flex="0 0 250px" class="y1y1x2">
<a-space>
<a-button type="primary" :icon="h(PlusOutlined)" @click="doShowModalAdd(true)">新建机构</a-button>
<a-button type="link" :icon="h(FilterOutlined)" @click="doShowDrawerFilter(true)">高级筛选</a-button>
</a-space>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y2">
<a-col flex="1 1 auto">
<a-table class="ant-table-striped" :dataSource="dataSource" :columns="columns"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'k1a'">
<a-row>
<a-col :span="5">
<div style="text-align: center;">
<a-image :width="40"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</div>
</a-col>
<a-col :span="19">
<div>{{ record.k1a }}</div>
</a-col>
</a-row>
</template>
<template v-else-if="column.key === 'k7'">
<template v-if="record.k7 == true">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
</a-col>
<a-col :span="18">
<div>启用</div>
</a-col>
</a-row>
</template>
<template v-else>
<a-card title="分支机构" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
<a-row :wrap="false" class="y1y1">
<a-col flex="1 1 auto">
<a-row :wrap="false">
<a-col flex="1 1 auto" class="y1y1x1">
<a-space>
<a-input placeholder="部门名称" />
<a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
<a-button :icon="h(UndoOutlined)">重置</a-button>
<a-button type="link" :icon="h(FilterOutlined)" @click="doShowDrawerFilter(true)">高级筛选</a-button>
</a-space>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y2">
<a-col flex="1 1 auto">
<a-row :wrap="false">
<a-col flex="1 1 300px" class="y1y1x1">
<a-space>
<a-button type="primary" :icon="h(PlusOutlined)" @click="doShowModalAdd(true)">新建机构</a-button>
</a-space>
</a-col>
<a-col flex="0 0 250px" class="y1y1x2">
<a-space>
</a-space>
</a-col>
</a-row>
</a-col>
</a-row>
<a-row :wrap="false" class="y1y3">
<a-col flex="1 1 auto">
<a-table class="ant-table-striped" :dataSource="dataSource" :columns="columns"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'k1a'">
<a-row>
<a-col :span="6">
<div class="dot-false"></div>
<a-col :span="5">
<div style="text-align: center;">
<a-image :width="40"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</div>
</a-col>
<a-col :span="18">
<div>禁用</div>
<a-col :span="19">
<div>{{ record.k1a }}</div>
</a-col>
</a-row>
</template>
</template>
<template v-else-if="column.key === 'action'">
<a-space size="0">
<template #split>
<a-divider type="vertical" />
<template v-else-if="column.key === 'k7'">
<template v-if="record.k7 == true">
<a-row>
<a-col :span="6">
<div class="dot-true"></div>
</a-col>
<a-col :span="18">
<div>启用</div>
</a-col>
</a-row>
</template>
<!-- <a-button type="link" :icon="h(EditOutlined)" @click=doShowModalEdit(true, record)>编辑</a-button> -->
<a-button type="link" :icon="h(DeleteOutlined)" danger>删除</a-button>
</a-space>
<template v-else>
<a-row>
<a-col :span="6">
<div class="dot-false"></div>
</a-col>
<a-col :span="18">
<div>禁用</div>
</a-col>
</a-row>
</template>
</template>
<template v-else-if="column.key === 'action'">
<a-space size="0">
<template #split>
<a-divider type="vertical" />
</template>
<!-- <a-button type="link" :icon="h(EditOutlined)" @click=doShowModalEdit(true, record)>编辑</a-button> -->
<a-button type="link" :icon="h(DeleteOutlined)" danger>删除</a-button>
</a-space>
</template>
</template>
</template>
</a-table>
</a-col>
</a-row>
</a-table>
</a-col>
</a-row>
</a-card>
<ModalAdd :isShow="isShowModalAdd" @do-cancel="doShowModalAdd"></ModalAdd>
<ModalEdit :isShow="isShowModalEdit" :record="record" @do-cancel="doShowModalEdit"></ModalEdit>
<DrawerFilter :isShow="isShowDrawerFilter"></DrawerFilter>
<DrawerFilter :isShow="isShowDrawerFilter" @do-cancel="doCancelA"></DrawerFilter>
</a-col>
</a-row>
</template>
@ -241,5 +255,8 @@ const doShowDrawerFilter = (isshow: boolean) => {
.y1y2 {
margin: 24px;
}
.y1y3 {
margin: 24px;
}
}
</style>

8
yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/DrawerFilter.vue
Unescape View File

@ -4,12 +4,18 @@
const props = defineProps({
isShow: Boolean
})
const emit = defineEmits(['doClose'])
// 取消
const doClose = () => {
console.log('关闭')
}
</script>
<template>
<template v-if="props.isShow">
<a-drawer :open=true title="高级搜索" placement="right">
<a-drawer :open=true title="高级搜索" placement="right" @close="doClose">
<template #title>
<p>Some contents...</p>
</template>

Write Preview
Loading…
Cancel
Save