From 900804d792e86519e07fee8094dc88a8cbe8309f Mon Sep 17 00:00:00 2001
From: wklken <wklken@gmail.com>
Date: Tue, 21 Dec 2021 17:25:42 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"fix:=20=E8=BF=87=E6=9C=9F=E7=9A=84?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=9D=83=E9=99=90=E4=B9=9F=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E4=BA=A4=E6=8E=A5=E7=9A=84=E9=97=AE=E9=A2=98=20(#592)?=
 =?UTF-8?q?"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit b1c82162d93043a50529fdd5ecafeb2fa5e92c47.
---
 .../views/transfer/components/perm-table.vue  | 266 ++++++++++++++++++
 .../render-depart-perm-sideslider.vue         | 137 +++++++++
 .../components/render-detail-edit.vue         | 103 +++++++
 .../transfer/components/render-detail.vue     |  61 ++++
 .../render-group-perm-sideslider.vue          | 122 ++++++++
 .../transfer/components/render-member.vue     | 108 +++++++
 .../components/render-renewal-table.vue       | 259 +++++++++++++++++
 .../render-template-perm-sideslider.vue       | 224 +++++++++++++++
 .../src/views/transfer/custom-perm-table.vue  |   2 +-
 frontend/src/views/transfer/custom.vue        |   8 +-
 frontend/src/views/transfer/group.vue         |   7 +-
 11 files changed, 1283 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/views/transfer/components/perm-table.vue
 create mode 100644 frontend/src/views/transfer/components/render-depart-perm-sideslider.vue
 create mode 100644 frontend/src/views/transfer/components/render-detail-edit.vue
 create mode 100644 frontend/src/views/transfer/components/render-detail.vue
 create mode 100644 frontend/src/views/transfer/components/render-group-perm-sideslider.vue
 create mode 100644 frontend/src/views/transfer/components/render-member.vue
 create mode 100644 frontend/src/views/transfer/components/render-renewal-table.vue
 create mode 100644 frontend/src/views/transfer/components/render-template-perm-sideslider.vue

diff --git a/frontend/src/views/transfer/components/perm-table.vue b/frontend/src/views/transfer/components/perm-table.vue
new file mode 100644
index 000000000..e2e6b53db
--- /dev/null
+++ b/frontend/src/views/transfer/components/perm-table.vue
@@ -0,0 +1,266 @@
+<template>
+    <div class="iam-perm-table" v-bkloading="{ isLoading: loading, opacity: 1 }">
+        <bk-table
+            v-if="!loading"
+            :data="tableList"
+            border
+            :cell-class-name="getCellClass">
+            <bk-table-column :label="$t(`m.common['操作']`)">
+                <template slot-scope="{ row }">
+                    <span :title="row.name">{{ row.name }}</span>
+                </template>
+            </bk-table-column>
+            <bk-table-column :resizable="false" :label="$t(`m.common['资源实例']`)" width="491">
+                <template slot-scope="{ row }">
+                    <template v-if="!row.isEmpty">
+                        <p class="related-resource-item"
+                            v-for="item in row.related_resource_types"
+                            :key="item.type">
+                            <render-resource-popover
+                                :key="item.type"
+                                :data="item.condition"
+                                :value="`${item.name}：${item.value}`"
+                                :max-width="380"
+                                @on-view="handleViewResource(row)" />
+                        </p>
+                    </template>
+                    <template v-else>
+                        {{ $t(`m.common['无需关联实例']`) }}
+                    </template>
+                    <Icon
+                        type="detail-new"
+                        class="view-icon"
+                        :title="$t(`m.common['详情']`)"
+                        v-if="isShowPreview(row)"
+                        @click.stop="handleViewResource(row)" />
+                </template>
+            </bk-table-column>
+            <bk-table-column prop="expired_dis" :label="$t(`m.common['到期时间']`)"></bk-table-column>
+            <bk-table-column :label="$t(`m.common['操作']`)">
+                <template slot-scope="{ row }">
+                    <bk-button text @click="handleDelete(row)">{{ $t(`m.common['删除']`) }}</bk-button>
+                </template>
+            </bk-table-column>
+        </bk-table>
+
+        <delete-dialog
+            :show.sync="deleteDialog.visible"
+            :loading="deleteDialog.loading"
+            :title="deleteDialog.title"
+            :sub-title="deleteDialog.subTitle"
+            @on-after-leave="handleAfterDeleteLeave"
+            @on-cancel="hideCancelDelete"
+            @on-sumbit="handleSumbitDelete" />
+
+        <bk-sideslider
+            :is-show.sync="isShowSideslider"
+            :title="sidesliderTitle"
+            :width="725"
+            :quick-close="true"
+            @animation-end="handleAnimationEnd">
+            <div slot="content">
+                <!-- style="padding: 0 30px 17px 30px;" -->
+                <component :is="renderDetailCom" :data="previewData" />
+            </div>
+        </bk-sideslider>
+    </div>
+</template>
+<script>
+    import _ from 'lodash'
+    import RenderDetail from './render-detail'
+    import PermPolicy from '@/model/my-perm-policy'
+    import DeleteDialog from '@/components/iam-confirm-dialog/index.vue'
+    import RenderResourcePopover from '@/components/iam-view-resource-popover'
+    export default {
+        name: '',
+        components: {
+            RenderDetail,
+            DeleteDialog,
+            RenderResourcePopover
+        },
+        props: {
+            systemId: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                tableList: [],
+                policyCountMap: {},
+                initRequestQueue: ['permTable'],
+                previewData: [],
+                curId: '',
+                renderDetailCom: 'RenderDetail',
+                isShowSideslider: false,
+                curDeleteIds: [],
+
+                deleteDialog: {
+                    visible: false,
+                    title: this.$t(`m.dialog['确认删除']`),
+                    subTitle: '',
+                    loading: false
+                },
+                sidesliderTitle: ''
+            }
+        },
+        computed: {
+            loading () {
+                return this.initRequestQueue.length > 0
+            },
+            isShowPreview () {
+                return (payload) => {
+                    return !payload.isEmpty && payload.policy_id !== ''
+                }
+            }
+        },
+        watch: {
+            systemId: {
+                handler (value) {
+                    if (value !== '') {
+                        this.initRequestQueue = ['permTable']
+                        this.fetchData(value)
+                    } else {
+                        this.renderDetailCom = 'RenderDetail'
+                        this.initRequestQueue = []
+                        this.tableList = []
+                        this.policyCountMap = {}
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            async fetchData (payload) {
+                try {
+                    const res = await this.$store.dispatch('permApply/getPolicies', { system_id: payload })
+                    this.tableList = res.data.map(item => new PermPolicy(item))
+                } catch (e) {
+                    console.error(e)
+                    this.bkMessageInstance = this.$bkMessage({
+                        limit: 1,
+                        theme: 'error',
+                        message: e.message || e.data.msg || e.statusText,
+                        ellipsisLine: 2,
+                        ellipsisCopy: true
+                    })
+                } finally {
+                    this.initRequestQueue.shift()
+                }
+            },
+
+            getCellClass ({ row, column, rowIndex, columnIndex }) {
+                if (columnIndex === 1) {
+                    return 'iam-perm-table-cell-cls'
+                }
+                return ''
+            },
+
+            handleAnimationEnd () {
+                this.sidesliderTitle = ''
+                this.previewData = []
+                this.actionTopologyData = []
+                this.curId = ''
+            },
+
+            handleAfterDeleteLeave () {
+                this.deleteDialog.subTitle = ''
+                this.curDeleteIds = []
+            },
+
+            hideCancelDelete () {
+                this.deleteDialog.visible = false
+            },
+
+            handleViewResource (payload) {
+                this.curId = payload.id
+                const params = []
+                if (payload.related_resource_types.length > 0) {
+                    payload.related_resource_types.forEach(item => {
+                        const { name, type, condition } = item
+                        params.push({
+                            name: type,
+                            label: `${name} ${this.$t(`m.common['实例']`)}`,
+                            tabType: 'resource',
+                            data: condition
+                        })
+                    })
+                }
+                this.previewData = _.cloneDeep(params)
+                this.sidesliderTitle = `${this.$t(`m.common['操作']`)}【${payload.name}】${this.$t(`m.common['的资源实例']`)}`
+                this.isShowSideslider = true
+            },
+
+            handleDelete (payload) {
+                this.curDeleteIds.splice(0, this.curDeleteIds.length, ...[payload.policy_id])
+                this.deleteDialog.subTitle = `${this.$t(`m.dialog['将删除']`)}【${payload.name}】${this.$t(`m.common['权限']`)}`
+                this.deleteDialog.visible = true
+            },
+
+            async handleSumbitDelete () {
+                this.deleteDialog.loading = true
+                try {
+                    await this.$store.dispatch('permApply/deletePerm', { policyIds: this.curDeleteIds, systemId: this.systemId })
+                    const index = this.tableList.findIndex(item => item.policy_id === this.curDeleteIds[0])
+                    if (index > -1) {
+                        this.tableList.splice(index, 1)
+                    }
+                    this.messageSuccess(this.$t(`m.info['删除成功']`), 2000)
+                    this.$emit('after-delete', this.tableList.length)
+                } catch (e) {
+                    console.error(e)
+                    this.bkMessageInstance = this.$bkMessage({
+                        limit: 1,
+                        theme: 'error',
+                        message: e.message || e.data.msg || e.statusText,
+                        ellipsisLine: 2,
+                        ellipsisCopy: true
+                    })
+                } finally {
+                    this.deleteDialog.loading = false
+                    this.deleteDialog.visible = false
+                }
+            }
+        }
+    }
+</script>
+<style lang='postcss'>
+    .iam-perm-table {
+        min-height: 101px;
+        .bk-table-enable-row-hover .bk-table-body tr:hover > td {
+            background-color: #fff;
+        }
+        .bk-table {
+            border-right: none;
+            border-bottom: none;
+            .bk-table-header-wrapper {
+                .cell {
+                    padding-left: 20px !important;
+                }
+            }
+            .bk-table-body-wrapper {
+                .cell {
+                    padding: 20px !important;
+                    .view-icon {
+                        display: none;
+                        position: absolute;
+                        top: 50%;
+                        right: 10px;
+                        transform: translate(0, -50%);
+                        font-size: 18px;
+                        cursor: pointer;
+                    }
+                    &:hover {
+                        .view-icon {
+                            display: inline-block;
+                            color: #3a84ff;
+                        }
+                    }
+                }
+            }
+            tr:hover {
+                background-color: #fff;
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-depart-perm-sideslider.vue b/frontend/src/views/transfer/components/render-depart-perm-sideslider.vue
new file mode 100644
index 000000000..6c06a3f4f
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-depart-perm-sideslider.vue
@@ -0,0 +1,137 @@
+<template>
+    <bk-sideslider
+        :is-show.sync="isShowSideslider"
+        :title="title"
+        :width="880"
+        ext-cls="iam-depart-perm-sideslider"
+        :quick-close="true"
+        @animation-end="handleAnimationEnd">
+        <div
+            slot="content"
+            class="content-wrapper"
+            v-bkloading="{ isLoading, opacity: 1 }">
+            <template v-if="orgTemplateList.length && !isLoading">
+                <render-perm-item
+                    v-for="(orgTemplate, orgTemplateIndex) in orgTemplateList"
+                    :key="orgTemplate.id"
+                    :expanded.sync="orgTemplate.expanded"
+                    :ext-cls="orgTemplateIndex > 0 ? 'iam-perm-ext-cls' : ''"
+                    :title="orgTemplate.displayName">
+                    <detail-table :template-id="orgTemplate.id" :system-id="orgTemplate.system.id"
+                        :version="orgTemplate.version" />
+                </render-perm-item>
+            </template>
+            <template v-if="!orgTemplateList.length && !isLoading">
+                <div class="iam-my-perm-empty-wrapper">
+                    <iam-svg />
+                </div>
+            </template>
+        </div>
+    </bk-sideslider>
+</template>
+<script>
+    // import _ from 'lodash'
+    import RenderPermItem from '../organization-perm/render-perm'
+    import DetailTable from '../organization-perm/detail-table'
+    export default {
+        name: '',
+        components: {
+            RenderPermItem,
+            DetailTable
+        },
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            departId: {
+                type: [String, Number],
+                default: ''
+            },
+            title: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                orgTemplateList: [],
+                isShowSideslider: false,
+                requestQueue: ['list']
+            }
+        },
+        computed: {
+            isLoading () {
+                return this.requestQueue.length > 0
+            }
+        },
+        watch: {
+            show: {
+                handler (value) {
+                    this.isShowSideslider = !!value
+                    if (this.isShowSideslider) {
+                        this.fetchData()
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            async fetchData () {
+                try {
+                    const res = await this.$store.dispatch('perm/getOrgTemplates', {
+                        subjectId: this.departId,
+                        subjectType: 'department'
+                    })
+                    const data = res.data || []
+                    data.forEach(item => {
+                        item.displayName = `${item.name}（${item.system.name}）`
+                        item.expanded = false
+                    })
+                    this.orgTemplateList.splice(0, this.orgTemplateList.length, ...data)
+                } catch (e) {
+                    console.error(e)
+                    this.bkMessageInstance = this.$bkMessage({
+                        limit: 1,
+                        theme: 'error',
+                        message: e.message || e.data.msg || e.statusText,
+                        ellipsisLine: 2,
+                        ellipsisCopy: true
+                    })
+                } finally {
+                    this.requestQueue.shift()
+                }
+            },
+
+            handleAnimationEnd () {
+                this.orgTemplateList = []
+                this.requestQueue = ['list']
+                this.$emit('animation-end')
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-depart-perm-sideslider {
+        .bk-sideslider-content {
+            background: #f5f6fa;
+        }
+        .content-wrapper {
+            position: relative;
+            padding: 30px;
+            min-height: calc(100vh - 60px);
+        }
+        .iam-perm-ext-cls {
+            margin-top: 10px;
+        }
+        .iam-my-perm-empty-wrapper {
+            img {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 120px;
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-detail-edit.vue b/frontend/src/views/transfer/components/render-detail-edit.vue
new file mode 100644
index 000000000..33c96602a
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-detail-edit.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="iam-my-perm-related-content">
+        <bk-tab :active.sync="active" type="unborder-card" @tab-change="handleTabChange">
+            <bk-tab-panel
+                v-for="(panel, index) in panels"
+                v-bind="panel"
+                :key="index">
+                <template v-if="panel.tabType === 'relate'">
+                    <tree :data="panel.data" :has-border="true" />
+                </template>
+                <template v-else>
+                    <condition-detail :data="panel.data" :can-edit="canEdit" ref="conditionRef"
+                        @on-change="handleChange" />
+                </template>
+            </bk-tab-panel>
+        </bk-tab>
+    </div>
+</template>
+<script>
+    import Tree from '@/components/attach-action-preview/attach-action-tree'
+    import ConditionDetail from '@/components/render-resource/edit'
+
+    export default {
+        name: '',
+        components: {
+            Tree,
+            ConditionDetail
+        },
+        props: {
+            data: {
+                type: Array,
+                default: () => []
+            },
+            canEdit: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                panels: [
+                    { name: 'relate', label: '关联权限', tabType: 'relate' }
+                ],
+                active: 'relate'
+            }
+        },
+        watch: {
+            data: {
+                handler (value) {
+                    if (value.length > 0) {
+                        this.panels = value
+                        this.active = this.panels[0].name
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            handleTabChange (payload) {
+                const curActiveData = this.panels.find(item => item.name === payload)
+
+                if (curActiveData.tabType === 'relate') {
+                    this.$emit('tab-change', {
+                        disabled: true,
+                        canDelete: false
+                    })
+                    return
+                }
+
+                this.$emit('tab-change', {
+                    disabled: curActiveData.data.length < 1
+                        || curActiveData.data.every(item => !item.instance || item.instance.length < 1),
+                    canDelete: true
+                })
+            },
+
+            handleChange () {
+                this.$emit('on-change')
+            },
+
+            handleGetValue () {
+                const data = this.$refs.conditionRef[0].handleGetValue()
+                const curActiveData = this.panels.find(item => item.name === this.active)
+                if (curActiveData.tabType !== 'relate') {
+                    return {
+                        ...data,
+                        system_id: curActiveData.systemId,
+                        type: this.active
+                    }
+                }
+
+                return data
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-my-perm-related-content {
+        .bk-tab-section {
+            padding: 20px 0 0 0;
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-detail.vue b/frontend/src/views/transfer/components/render-detail.vue
new file mode 100644
index 000000000..16e8762b9
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-detail.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="iam-my-perm-related-content">
+        <bk-tab :active.sync="active" type="unborder-card">
+            <bk-tab-panel
+                v-for="(panel, index) in panels"
+                v-bind="panel"
+                :key="index">
+                <template v-if="panel.tabType === 'relate'">
+                    <tree :data="panel.data" :has-border="true" />
+                </template>
+                <template v-else>
+                    <condition-detail :data="panel.data" />
+                </template>
+            </bk-tab-panel>
+        </bk-tab>
+    </div>
+</template>
+<script>
+    import Tree from '@/components/attach-action-preview/attach-action-tree'
+    import ConditionDetail from '@/components/render-resource/detail'
+
+    export default {
+        name: '',
+        components: {
+            Tree,
+            ConditionDetail
+        },
+        props: {
+            data: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data () {
+            return {
+                panels: [
+                    { name: 'relate', label: '关联权限', tabType: 'relate' }
+                ],
+                active: 'relate'
+            }
+        },
+        watch: {
+            data: {
+                handler (value) {
+                    if (value.length > 0) {
+                        this.panels = value
+                        this.active = this.panels[0].name
+                    }
+                },
+                immediate: true
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-my-perm-related-content {
+        .bk-tab-section {
+            padding: 20px 0 0 0;
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-group-perm-sideslider.vue b/frontend/src/views/transfer/components/render-group-perm-sideslider.vue
new file mode 100644
index 000000000..82acce1d6
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-group-perm-sideslider.vue
@@ -0,0 +1,122 @@
+<template>
+    <bk-sideslider
+        :is-show.sync="isShowSideslider"
+        :title="title"
+        :width="880"
+        ext-cls="iam-group-perm-sideslider"
+        :quick-close="true"
+        @animation-end="handleAnimationEnd">
+        <div slot="header">
+            <p>{{ $t(`m.userGroup['用户组']`) }}【{{ name }}】{{ $t(`m.common['的详情']`) }}</p>
+            <p class="group-id">ID: {{ groupId }}</p>
+        </div>
+        <div slot="content" class="content-wrapper" data-test-id="myPerm_sideslider_groupPermContentWrapper"
+            v-bkloading="{ isLoading, opacity: 1 }">
+            <div class="iam-group-perm-sideslider-tab set-tab-margin-bottom" v-if="!isLoading && showMember">
+                <section class="tab-item active">{{$t(`m.perm['组权限']`)}}</section>
+            </div>
+            <section>
+                <group-perm-new :id="groupId" mode="detail" />
+            </section>
+        </div>
+    </bk-sideslider>
+</template>
+<script>
+    import GroupPermNew from '@/views/group/detail/group-perm-new.vue'
+
+    export default {
+        name: '',
+        components: {
+            GroupPermNew
+        },
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            groupId: {
+                type: [String, Number],
+                default: ''
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            name: {
+                type: String,
+                default: ''
+            },
+            showMember: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                tabActive: 'perm',
+                isShowSideslider: false,
+                isLoading: true
+            }
+        },
+        watch: {
+            show: {
+                handler (value) {
+                    this.isShowSideslider = !!value
+                    if (this.isShowSideslider) {
+                        setTimeout(() => {
+                            this.isLoading = false
+                        }, 300)
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            handleAnimationEnd () {
+                this.$emit('animation-end')
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-group-perm-sideslider {
+        .bk-sideslider-content {
+            background: #f5f6fa;
+        }
+        .group-id {
+            position: relative;
+            top: -12px;
+            line-height: 0;
+            font-size: 12px;
+            color: #c4c6cc;
+        }
+        .content-wrapper {
+            position: relative;
+            padding: 30px;
+            min-height: calc(100vh - 60px);
+        }
+        .set-tab-margin-bottom {
+            margin-bottom: 10px;
+        }
+        .iam-group-perm-sideslider-tab {
+            display: flex;
+            justify-content: flex-start;
+            padding: 0 20px;
+            width: 100%;
+            height: 42px;
+            line-height: 42px;
+            background: #fff;
+            border-radius: 2px;
+            box-shadow: 0px 1px 2px 0px rgba(247, 220, 220, .05);
+            color: #63656e;
+            .tab-item {
+                font-size: 14px;
+                cursor: pointer;
+                &.active {
+                    color: #3a84ff;
+                    border-bottom: 2px solid #3a84ff;
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-member.vue b/frontend/src/views/transfer/components/render-member.vue
new file mode 100644
index 000000000..9b19f6b59
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-member.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="iam-member-display-wrapper">
+        <label class="label">
+            <Icon :type="icon" class="icon" />
+            <span class="name">{{ title }}</span>
+        </label>
+        <div class="content">
+            <!-- eslint-disable max-len -->
+            <div v-for="(item, index) in data"
+                :key="index"
+                class="member-item"
+                :title="isDepartment ? item.full_name || item.name : !!item.name ? `${item.id}(${item.name})` : item.id">
+                <span class="member-name">
+                    {{ isDepartment ? item.name : item.id }}
+                </span>
+                <template v-if="!isDepartment && item.name !== ''">
+                    <span class="name">({{ item.name }})</span>
+                </template>
+                <template v-if="isDepartment">
+                    <span class="count">({{ item.member_count }})</span>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name: '',
+        props: {
+            data: {
+                type: Array,
+                default: () => []
+            },
+            // user：用户，department：组织
+            type: {
+                type: String,
+                default: 'user'
+            }
+        },
+        computed: {
+            icon () {
+                return this.type === 'user' ? 'personal-user' : 'organization-fill'
+            },
+            title () {
+                return this.type === 'user' ? this.$t(`m.common['用户']`) : this.$t(`m.common['组织']`)
+            },
+            isDepartment () {
+                return this.type === 'department'
+            }
+        }
+    }
+</script>
+<style lang="postcss" scoped>
+    .iam-member-display-wrapper {
+        color: #63656e;
+        .label {
+            display: inline-block;
+            margin-bottom: 9px;
+            font-size: 12px;
+            .icon {
+                display: inline-block;
+                color: #3a84ff;
+                vertical-align: middle;
+            }
+            .name {
+                display: inline-block;
+                font-weight: 700;
+                vertical-align: middle;
+            }
+        }
+        .content {
+            .member-item {
+                position: relative;
+                display: inline-block;
+                margin: 0 6px 6px 0;
+                padding: 0 10px;
+                line-height: 22px;
+                background: #f5f6fa;
+                border: 1px solid #dcdee5;
+                border-radius: 2px;
+                font-size: 12px;
+                &:hover {
+                    .remove-icon {
+                        display: block;
+                    }
+                }
+                .member-name {
+                    display: inline-block;
+                    max-width: 200px;
+                    line-height: 17px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    vertical-align: text-top;
+                }
+                .name {
+                    display: inline-block;
+                    vertical-align: top;
+                }
+                .count {
+                    display: inline-block;
+                    color: #c4c6cc;
+                    vertical-align: top;
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-renewal-table.vue b/frontend/src/views/transfer/components/render-renewal-table.vue
new file mode 100644
index 000000000..d25c381fe
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-renewal-table.vue
@@ -0,0 +1,259 @@
+<template>
+    <div class="iam-perm-renewal-table-wrapper" v-bkloading="{ isLoading: loading, opacity: 1 }">
+        <bk-table
+            v-show="!loading"
+            :data="tableList"
+            size="small"
+            ref="permTableRef"
+            ext-cls="perm-renewal-table"
+            :outer-border="false"
+            :header-border="false"
+            :pagination="pagination"
+            @page-change="pageChange"
+            @page-limit-change="limitChange"
+            @select="handlerChange"
+            @select-all="handlerAllChange">
+            <bk-table-column type="selection" align="center" :selectable="getIsSelect"></bk-table-column>
+            <template v-for="item in tableProps">
+                <bk-table-column
+                    v-if="item.prop === 'system'"
+                    :filters="systemFilter"
+                    :filter-method="systemFilterMethod"
+                    :filter-multiple="false"
+                    :key="item.prop"
+                    :label="item.label"
+                    :prop="item.prop">
+                    <template slot-scope="{ row }">
+                        <span>{{ row.system ? row.system.name || '' : '' }}</span>
+                    </template>
+                </bk-table-column>
+                <bk-table-column
+                    v-else-if="item.prop === 'action'"
+                    :key="item.prop"
+                    :label="item.label"
+                    :prop="item.prop">
+                    <template slot-scope="{ row }">
+                        <span>{{ row.action ? row.action.name || '' : '' }}</span>
+                    </template>
+                </bk-table-column>
+                <bk-table-column
+                    v-else
+                    :key="item.prop"
+                    :label="item.label"
+                    :prop="item.prop">
+                    <template slot-scope="{ row }">
+                        <render-expire-display
+                            v-if="item.prop === 'expired_at'"
+                            :selected="currentSelectList.map(v => v.id).includes(row.id)"
+                            :renewal-time="renewalTime"
+                            :cur-time="row.expired_at" />
+                        <span v-else>{{ row[item.prop] }}</span>
+                    </template>
+                </bk-table-column>
+            </template>
+        </bk-table>
+    </div>
+</template>
+<script>
+    import { mapGetters } from 'vuex'
+    import renderExpireDisplay from '@/components/render-renewal-dialog/display'
+    import { PERMANENT_TIMESTAMP } from '@/common/constants'
+
+    // 过期时间的天数区间
+    const EXPIRED_DISTRICT = 15
+
+    export default {
+        name: '',
+        components: {
+            renderExpireDisplay
+        },
+        props: {
+            type: {
+                type: String,
+                default: 'group'
+            },
+            renewalTime: {
+                type: Number,
+                default: 15552000
+            },
+            data: {
+                type: Number,
+                default: () => []
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                tableList: [],
+                allData: [],
+                currentSelectList: [],
+                pagination: {
+                    current: 1,
+                    count: 0,
+                    limit: 10
+                },
+                currentBackup: 1,
+                tableProps: [],
+                systemFilter: []
+            }
+        },
+        computed: {
+            ...mapGetters(['user'])
+        },
+        watch: {
+            'pagination.current' (value) {
+                this.currentBackup = value
+            },
+            type: {
+                handler (value) {
+                    this.tableProps = this.getTableProps(value)
+                },
+                immediate: true
+            },
+            currentSelectList: {
+                handler (value) {
+                    const getTimestamp = payload => {
+                        if (this.renewalTime === PERMANENT_TIMESTAMP) {
+                            return this.renewalTime
+                        }
+                        if (payload < this.user.timestamp) {
+                            return this.user.timestamp + this.renewalTime
+                        }
+                        return payload + this.renewalTime
+                    }
+                    const templateList = value.map(item => {
+                        return {
+                            ...item,
+                            expired_at: getTimestamp(item.expired_at)
+                        }
+                    })
+                    this.$emit('on-select', this.type, templateList)
+                },
+                immediate: true,
+                deep: true
+            },
+            renewalTime (value) {
+                const getTimestamp = payload => {
+                    if (value === PERMANENT_TIMESTAMP) {
+                        return value
+                    }
+                    if (payload < this.user.timestamp) {
+                        return this.user.timestamp + value
+                    }
+                    return payload + value
+                }
+                const templateList = this.currentSelectList.map(item => {
+                    return {
+                        ...item,
+                        expired_at: getTimestamp(item.expired_at)
+                    }
+                })
+                this.$emit('on-select', this.type, templateList)
+            },
+            data: {
+                handler (value) {
+                    this.allData = value
+                    this.pagination.count = this.allData.length
+                    const data = this.getCurPageData()
+                    this.tableList.splice(0, this.tableList.length, ...data)
+                    const getDays = payload => {
+                        const dif = payload - this.user.timestamp
+                        if (dif < 1) {
+                            return 0
+                        }
+                        return Math.ceil(dif / (24 * 3600))
+                    }
+                    this.currentSelectList = this.tableList.filter(item => getDays(item.expired_at) < EXPIRED_DISTRICT)
+                    if (this.type === 'custom') {
+                        this.tableList.forEach(item => {
+                            if (!this.systemFilter.find(subItem => subItem.value === item.system.id)) {
+                                this.systemFilter.push({
+                                    text: item.system.name,
+                                    value: item.system.id
+                                })
+                            }
+                        })
+                    }
+                    this.$nextTick(() => {
+                        this.tableList.forEach(item => {
+                            if (this.currentSelectList.map(_ => _.id).includes(item.id)) {
+                                this.$refs.permTableRef && this.$refs.permTableRef.toggleRowSelection(item, true)
+                            }
+                        })
+                    })
+                }
+            }
+        },
+        methods: {
+            getIsSelect () {
+                return this.tableList.length > 0
+            },
+
+            getTableProps (payload) {
+                if (payload === 'group') {
+                    return [
+                        { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+                        { label: this.$t(`m.common['到期时间']`), prop: 'expired_at' }
+                    ]
+                }
+                return [
+                    { label: this.$t(`m.common['操作']`), prop: 'action' },
+                    { label: this.$t(`m.common['所属系统']`), prop: 'system' },
+                    { label: this.$t(`m.common['到期时间']`), prop: 'expired_at' }
+                ]
+            },
+
+            systemFilterMethod (value, row, column) {
+                const property = column.property
+                return row[property].id === value
+            },
+
+            pageChange (page) {
+                if (this.currentBackup === page) {
+                    return
+                }
+                this.pagination.current = page
+                const data = this.getCurPageData(page)
+                this.tableList.splice(0, this.tableList.length, ...data)
+            },
+
+            limitChange (currentLimit, prevLimit) {
+                this.pagination.limit = currentLimit
+                this.pagination.current = 1
+                this.pageChange()
+            },
+
+            handlerAllChange (selection) {
+                this.currentSelectList = [...selection]
+            },
+
+            handlerChange (selection, row) {
+                this.currentSelectList = [...selection]
+            },
+
+            getCurPageData (page = 1) {
+                let startIndex = (page - 1) * this.pagination.limit
+                let endIndex = page * this.pagination.limit
+                if (startIndex < 0) {
+                    startIndex = 0
+                }
+                if (endIndex > this.allData.length) {
+                    endIndex = this.allData.length
+                }
+                return this.allData.slice(startIndex, endIndex)
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-perm-renewal-table-wrapper {
+        min-height: 200px;
+        .perm-renewal-table {
+            margin-top: 16px;
+            border: none;
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/components/render-template-perm-sideslider.vue b/frontend/src/views/transfer/components/render-template-perm-sideslider.vue
new file mode 100644
index 000000000..c9cbc557f
--- /dev/null
+++ b/frontend/src/views/transfer/components/render-template-perm-sideslider.vue
@@ -0,0 +1,224 @@
+<template>
+    <bk-sideslider
+        :is-show.sync="isShowSideslider"
+        :title="title"
+        :width="880"
+        ext-cls="iam-template-perm-sideslider"
+        :quick-close="true"
+        :cell-class-name="getCellClass"
+        @animation-end="handleAnimationEnd">
+        <div
+            slot="content"
+            class="content-wrapper"
+            v-bkloading="{ isLoading, opacity: 1 }">
+            <bk-table
+                v-if="!isLoading"
+                :data="tableList"
+                border
+                :cell-class-name="getCellClass">
+                <bk-table-column :label="$t(`m.common['操作']`)" width="180">
+                    <template slot-scope="{ row }">
+                        <span :title="row.name">{{ row.name }}</span>
+                    </template>
+                </bk-table-column>
+                <bk-table-column :resizable="false" :label="$t(`m.common['资源实例']`)">
+                    <template slot-scope="{ row }">
+                        <template v-if="!row.isEmpty">
+                            <p class="related-resource-item"
+                                v-for="item in row.related_resource_types"
+                                :key="item.type">
+                                <render-resource-popover
+                                    :key="item.type"
+                                    :data="item.condition"
+                                    :value="`${item.name}：${item.value}`"
+                                    @on-view="handleViewResource(row)" />
+                            </p>
+                        </template>
+                        <template v-else>
+                            {{ $t(`m.common['无需关联实例']`) }}
+                        </template>
+                        <Icon
+                            type="detail-new"
+                            class="view-icon"
+                            :title="$t(`m.common['详情']`)"
+                            v-if="isShowPreview(row)"
+                            @click.stop="handleViewResource(row)" />
+                    </template>
+                </bk-table-column>
+            </bk-table>
+        </div>
+    </bk-sideslider>
+</template>
+<script>
+    import RenderResourcePopover from '@/components/iam-view-resource-popover'
+    import PermPolicy from '@/model/my-perm-policy'
+    export default {
+        name: '',
+        components: {
+            RenderResourcePopover
+        },
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            templateId: {
+                type: [String, Number],
+                default: ''
+            },
+            templateVersion: {
+                type: String,
+                default: ''
+            },
+            // systemId: {
+            //     type: [String, Number],
+            //     default: ''
+            // },
+            title: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                tableList: [],
+                policyCountMap: {},
+                curId: '',
+                isShowSideslider: false,
+                requestQueue: ['list'],
+                systemId: ''
+            }
+        },
+        computed: {
+            isShowPreview () {
+                return (payload) => {
+                    return !payload.isEmpty
+                }
+            },
+            isLoading () {
+                return this.requestQueue.length > 0
+            }
+        },
+        watch: {
+            show: {
+                handler (value) {
+                    this.isShowSideslider = !!value
+                    if (this.isShowSideslider) {
+                        this.handleInit()
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            async handleInit () {
+                await this.fetchData()
+            },
+
+            getCellClass ({ row, column, rowIndex, columnIndex }) {
+                if (columnIndex === 1) {
+                    return 'iam-perm-table-cell-cls'
+                }
+                return ''
+            },
+
+            async fetchData () {
+                try {
+                    const params = {
+                        id: this.templateId
+                    }
+                    if (this.templateVersion !== '') {
+                        params.version = this.templateVersion
+                    }
+
+                    const res = await this.$store.dispatch('perm/getTemplateDetail', params)
+                    const data = res.data || {}
+
+                    this.systemId = data.system.id
+                    this.tableList.splice(0, this.tableList.length, ...data.actions.map(item => new PermPolicy(item)))
+                } catch (e) {
+                    console.error(e)
+                    this.bkMessageInstance = this.$bkMessage({
+                        limit: 1,
+                        theme: 'error',
+                        message: e.message || e.data.msg || e.statusText,
+                        ellipsisLine: 2,
+                        ellipsisCopy: true
+                    })
+                } finally {
+                    this.requestQueue.shift()
+                }
+            },
+
+            handleAnimationEnd () {
+                this.tableList = []
+                this.requestQueue = ['list']
+                this.curId = ''
+                this.$emit('animation-end')
+            },
+
+            handleViewResource (payload) {
+                this.curId = payload.id
+                const params = []
+                if (payload.related_resource_types.length > 0) {
+                    payload.related_resource_types.forEach(item => {
+                        const { name, type, condition } = item
+                        params.push({
+                            name: type,
+                            label: `${name} ${this.$t(`m.common['实例']`)}`,
+                            tabType: 'resource',
+                            data: condition
+                        })
+                    })
+                }
+                this.$emit('on-view', {
+                    name: payload.name,
+                    data: params
+                })
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .iam-template-perm-sideslider {
+        .content-wrapper {
+            padding: 30px;
+            min-height: calc(100vh - 60px);
+        }
+        .bk-table-enable-row-hover .bk-table-body tr:hover > td {
+            background-color: #fff;
+        }
+        .bk-table {
+            border-right: none;
+            border-bottom: none;
+            .bk-table-header-wrapper {
+                .cell {
+                    padding-left: 20px !important;
+                }
+            }
+            .bk-table-body-wrapper {
+                .cell {
+                    padding: 20px !important;
+                    .view-icon {
+                        display: none;
+                        position: absolute;
+                        top: 50%;
+                        right: 10px;
+                        transform: translate(0, -50%);
+                        font-size: 18px;
+                        cursor: pointer;
+                    }
+                    &:hover {
+                        .view-icon {
+                            display: inline-block;
+                            color: #3a84ff;
+                        }
+                    }
+                }
+            }
+            tr:hover {
+                background-color: #fff;
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/views/transfer/custom-perm-table.vue b/frontend/src/views/transfer/custom-perm-table.vue
index 0e96cc147..1cdc04e0a 100644
--- a/frontend/src/views/transfer/custom-perm-table.vue
+++ b/frontend/src/views/transfer/custom-perm-table.vue
@@ -9,7 +9,7 @@
             :cell-class-name="getCellClass"
             @select="handleSelect"
             @select-all="handleSelect">
-            <bk-table-column type="selection" align="center" :selectable="row => !row.isExpired">
+            <bk-table-column type="selection" align="center" :selectable="row => String(row.expired_at) !== '0'">
             </bk-table-column>
             <bk-table-column :label="$t(`m.common['操作']`)">
                 <template slot-scope="{ row }">
diff --git a/frontend/src/views/transfer/custom.vue b/frontend/src/views/transfer/custom.vue
index 9b7a058a5..e368d22be 100644
--- a/frontend/src/views/transfer/custom.vue
+++ b/frontend/src/views/transfer/custom.vue
@@ -50,8 +50,6 @@
     </div>
 </template>
 <script>
-    import { mapGetters } from 'vuex'
-
     import PermPolicy from '@/model/my-perm-policy'
     import PermSystem from '@/model/my-perm-system'
     import CustomPermTable from './custom-perm-table.vue'
@@ -71,9 +69,6 @@
                 customSelectDataMap: {}
             }
         },
-        computed: {
-            ...mapGetters(['user'])
-        },
         mounted () {
             this.fetchData()
         },
@@ -117,9 +112,8 @@
                         const res = await this.$store.dispatch('permApply/getPolicies', { system_id: sys.id })
                         const alreadyLoadedList = sys.policyList
                         sys.policyList = res.data.map(item => {
-                            if (item.expired_at < this.user.timestamp) {
+                            if (item.expired_display === '已过期') {
                                 this.customNotTransferCount += 1
-                                item.isExpired = true
                             }
                             const policy = new PermPolicy(item)
                             const foundPolicy = alreadyLoadedList.find(
diff --git a/frontend/src/views/transfer/group.vue b/frontend/src/views/transfer/group.vue
index c54c3a4b2..2fa56f8ea 100644
--- a/frontend/src/views/transfer/group.vue
+++ b/frontend/src/views/transfer/group.vue
@@ -74,8 +74,6 @@
     </div>
 </template>
 <script>
-    import { mapGetters } from 'vuex'
-
     export default {
         name: '',
         components: {
@@ -93,9 +91,6 @@
                 pageContainer: null
             }
         },
-        computed: {
-            ...mapGetters(['user'])
-        },
         mounted () {
             this.pageContainer = document.querySelector('.main-scroller')
             this.fetchData()
@@ -107,7 +102,7 @@
                     const res = await this.$store.dispatch('perm/getPersonalGroups')
                     const groupList = res.data || []
                     groupList.forEach(item => {
-                        if (String(item.department_id) !== '0' || item.expired_at < this.user.timestamp) {
+                        if (String(item.department_id) !== '0' || item.expired_at_display === '已过期') {
                             this.groupNotTransferCount += 1
                             item.canNotTransfer = true
                         }