axwen-test31 2.0.0

package/src/views/scene/scene-library-manage/scene-center.vue

@@ -0,0 +1,798 @@
+<template>
+    <div class="scene-center">
+        <system-layout leftTitle="场景分类" left-content-padding="0px">
+            <template slot="btn">
+                <yt-button type="primary" icon="el-icon-plus" @click="handleAddScene">新建</yt-button>
+                <yt-dialog-form
+                    ref="addForm"
+                    :addApi="addApi"
+                    :fields="addFields"
+                    :isDefaultShow="false"
+                ></yt-dialog-form>
+            </template>
+            <template slot="left">
+                <Scene-side
+                    ref="tree"
+                    @nodeClickss="nodeClickss"
+                    @reset="resetClickss"
+                    @changeMarketType="handleChangeMarket"
+                    @refreshList="handleRefreshList"
+                    :data="tableData"
+                />
+            </template>
+            <template slot="right">
+                <div class="scene-right d-flex flex-column">
+                    <yt-search ref="table" :fields="currFile" @submit="handleSearch($event, true)"
+                        :toggle="{ isOpen: true }">
+                    </yt-search>
+                    <div class="flex-1 d-flex flex-column h-0">
+                        <div class="scene-table">
+                            <div class="btns">
+                                <div>
+                                    <yt-button
+                                        v-if="$hasAuth('scene_save') && isTravelExport"
+                                        icon="el-icon-plus"
+                                        class="ml-2"
+                                        :disabled="!nodeData.pkId || canAdd"
+                                        type="primary"
+                                        @click="addMarket"
+                                    >新建</yt-button>
+                                    <yt-button
+                                        v-if="$hasAuth('scene_import') && marketType === '0' && isTravelExport"
+                                        class="ml-2"
+                                        :disabled="!nodeData.pkId || canAdd"
+                                        @click="addImportMarket"
+                                    >导入</yt-button>
+                                </div>
+                            </div>
+                            <div class="card-body" v-if="tableData.length" v-loading="searchLoading">
+                                <div class="card"  v-for="(item, index) in tableData"
+                                    :key="item.value" @mouseenter="activeIndex = index" @mousemove="activeIndex = index"
+                                    @mouseleave="activeIndex = null">
+                                    <div class="card--img" :style="{ 'display': marketType === '0' ? 'block' : 'none' }">
+                                        <img @click="openBigImg(index)" src="@/assets/images/icon-svg/big.svg" class="screen" />
+                                        <el-image
+                                            style="width:100%;height:100%;"
+                                            :src="getImgPath(item)"
+                                            alt="icon"
+                                            fit="cover"
+                                            @error="loadError(item)"
+                                            :preview-src-list="[getImgPath(item)]"
+                                            ref="image"
+                                            class="no-preview"
+                                        >
+                                            <div slot="placeholder" class="flex-center height-whole text-gray-400">
+                                                加载中<span class="dot">...</span>
+                                            </div>
+                                        </el-image>
+                                    </div>
+
+                                    <div class="scene-title">
+                                        <div class="scence-bottom">
+                                            <el-tooltip :disabled="item.secneDetailName.length < 16" :content="item.secneDetailName" placement="top-start" effect="dark">
+                                                <div class="title font-bold">{{item.secneDetailName}}</div>
+                                            </el-tooltip>
+                                            <div class="opt">
+                                                <div>
+                                                    <el-button type="text" size="mini" @click="handleDetailScene(item)">查看详情</el-button>
+                                                    <span class="ml-4">{{ item.viewNum || 0 }}次查看</span>
+                                                    <span class="ml-4">
+                                                        <yt-button
+                                                            type="text"
+                                                            @click="handleQuote(item)"
+                                                        >{{ item.referNum || 0 }}次引用</yt-button>
+                                                    </span>
+                                                </div>
+                                                <div class="right">
+                                                    <el-switch 
+                                                        :value="item.sceneStatus" 
+                                                        v-if="isTravelExport && profile.positionId === item.crtEmpNo"
+                                                        active-value="01" 
+                                                        inactive-value="02" 
+                                                        class="mr-3"
+                                                        @change="handleStatusScene(item)" />
+                                                    <img class="pr-2" v-else src="@/assets/images/icon-svg/disabled.svg" />
+                                                    <el-dropdown size="mini" @command="handleCommand($event, item)">
+                                                        <span class="el-dropdown-link">
+                                                            <yt-icon-svg icon="-more" :size="16"></yt-icon-svg>
+                                                        </span>
+                                                        <el-dropdown-menu slot="dropdown">
+                                                            <el-dropdown-item v-for="dropItem in initOptList(item)"
+                                                                :id="dropItem.command" :key="dropItem.command" :command="dropItem.command">
+                                                                {{ dropItem.label }}
+                                                            </el-dropdown-item>
+                                                        </el-dropdown-menu>
+                                                    </el-dropdown>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <yt-empty v-if="tableData.length === 0" class="mt2">暂无数据</yt-empty>
+                        </div>
+                        <div class="pagination--footer">
+                            <yt-pagination 
+                                v-if="tableData.length" 
+                                layout="total, prev, pager, next, jumper" 
+                                :total="total"
+                                :pageNumber="pageNumber" 
+                                :pageSize="pageSize" 
+                                @change="handlePage" />
+                        </div>
+                    </div>
+                    <SceneLog ref="log"></SceneLog>
+                    <activity-import-dialog ref="import" title="导入模板" @on-close="handleCloseImport"></activity-import-dialog>
+                    <scene-quote ref="quote" />
+                    <yt-dialog
+                        :title="`应用到${applyType === 'wp' ? '营销' : '周期' }活动`"
+                        :width="700"
+                        v-model="canvasVis"
+                        :isLoading="canvasLoading"
+                        @confirm="handleConfirm"
+                        cancelText="取 消"
+                    >
+                        <div id="EventMain" style="width:100%;min-height: 350px;">
+                            <EventMain
+                                class="EventMain"
+                                ref="main"
+                                v-bind="eventBind"
+                            />
+                        </div>
+                    </yt-dialog>
+                </div>
+            </template>
+        </system-layout>
+    </div>
+    
+</template>
+<script>
+import SceneSide from './scene-side'
+import SceneLog from './scene-log'
+import SceneQuote from './scene-quote'
+import { mapState, } from 'vuex'
+import { formatDate } from '@/utils'
+import { sceneDetailsSearch, sceneDetailsDelete, openOrColse, sceneAdd, updateViewNum, updateReferNum } from '@/api/scene'
+import { exportMarketEvent } from '@/api/market'
+import EventMain from '@/views/scene/scene-edit/event-main.vue'
+import SystemLayout from '@/components/system-layout.vue'
+import _ from 'lodash'
+import ActivityImportDialog from '@/views/market/components/activity-import-dialog'
+export default {
+    name: 'SceneCenter',
+    // inject: ['removeNav'],
+    provide() {
+        return {
+            getLibId: () => '',
+            getCurrentJobId: () => '',
+            queryType: '0'
+        }
+    },
+    components: { SceneSide, SceneLog, EventMain,SystemLayout, ActivityImportDialog, SceneQuote },
+    data() {
+        return {
+            canvasVis: false,
+            canvasLoading: false,
+            optTypeList: Object.freeze([
+                { label: '应用到营销策略', command: 'applyToMarketEvent' },
+                { label: '应用到周期策略', command: 'applyToLoopEvent' },
+                { label: '应用到表单商机', command: 'handleBusiness' },
+                { label: '编辑', command: 'handleUpdateScene' },
+                { label: '导出', command: 'handleExportScene' },
+                { label: '日志', command: 'handleLogScene' },
+                { label: '删除', command: 'handleDeleteScene' }
+            ]),
+            addApi: sceneAdd,
+            loading: false,
+            currFile: [
+                {
+                    title: '场景名称',
+                    key: 'secneDetailName',
+                    type: 'input',
+                    search: {}
+                },
+                {
+                    title: '创建日期',
+                    key: 'crtTm',
+                    type: 'daterange',
+                    search: {}
+                },
+                {
+                    title: '创建人',
+                    key: 'actInitiatorList',
+                    type: 'creator-select',
+                    search: {}
+                },
+                {
+                    title: '启停状态',
+                    key: 'sceneStatus',
+                    type: 'select',
+                    search: {},
+                    options: [
+                        { label: '启用', value: '01' },
+                        { label: '停用', value: '02' },
+                        { label: '无效', value: '00' }
+                    ]
+                }
+            ],
+            nodeData: {},
+            tableData: [],
+            activeIndex: null,
+            total: 0,
+            pageNumber: 1,
+            pageSize: 9,
+            params: {},
+            defaultBg: require('@/assets/images/sceneDefaultBg.jpg'),
+            selectedCard: [],
+            currentNode: {},
+            applyType: '',
+            marketType: '0',
+            selectedNode: {}, // 用来判断所选节点level
+            addFields: [
+                {
+                    title: '场景分类名称',
+                    key: 'sceneName',
+                    type: 'input',
+                    dialog: {
+                        isRequired: true
+                    }
+                },
+                {
+                    title: '排序号',
+                    key: 'orderBy',
+                    type: 'input-number',
+                    props: {
+                        min: 0,
+                        max: 99999
+                    },
+                    dialog: {
+                        isRequired: true,
+                        props: {
+                            placeholder: '请输入排序号'
+                        },
+                        rule: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
+                    }
+                },
+                {
+                    key: 'firstLevel',
+                    isShow: false,
+                    defaultValue: true,
+                    dialog: {
+                        defaultValue: true
+                    }
+                }
+            ],
+            searchLoading: false
+        }
+    },
+    computed: {
+        ...mapState(['profile']),
+        eventBind() {
+            return {
+                id: this.currentNode.id,
+                pageName: '',
+                mode: 'view',
+                type: 'scene',
+                isLoop: false,
+                actSeriesId: '',
+                readonly: true,
+                cstonly: false,
+                isTestMode: false,
+                cstLoading: false,
+                viewType: '场景库'
+            }
+        },
+        // 新建、导入按钮只能在level为2级时点击
+        canAdd() {
+            if (!this.selectedNode) return true
+            const { level } = this.selectedNode
+            if (level >= 2) {
+                return false
+            } else {
+                return true
+            }
+        },
+        // 判断是否旅程专家
+        isTravelExport() {
+            return this.profile?.roles ? this.profile.roles.some(i => i === 'TRAVEL_ROLE') : false
+        },
+        // 判断是否系统管理员
+        isSysAdmin() {
+            return this.profile?.roles ? this.profile.roles.some(i => i === 'TENANT_ADMIN') : false
+        }
+    },
+    mounted() {
+        this.handleSearch()
+    },
+    methods: {
+        initOptList(row) {
+            const status = row.oaStatus
+            let btns = []
+            // 01草稿  02待审批  03审批通过  04审批驳回
+            if (status === '01') {
+                btns = ['handleExportScene', 'handleUpdateScene', 'handleDeleteScene', 'handleLogScene']
+            } else if (status === '02') {
+                btns = ['handleExportScene', 'handleUpdateScene',, 'handleDeleteScene', 'handleLogScene']
+            } else if (status === '03') {
+                btns = ['handleDeleteScene', 'handleUpdateScene',, 'applyToMarketEvent', 'applyToLoopEvent', 'handleBusiness', 'handleExportScene', 'handleLogScene']
+            } else if (status === '04') {
+                btns = ['handleExportScene', 'handleUpdateScene',, 'handleDeleteScene', 'handleLogScene']
+            }
+            if (this.marketType === '0') {
+                btns = btns.filter(i => !['handleBusiness'].includes(i))
+            } else if (this.marketType === '1') {
+                btns = btns.filter(i => !['applyToMarketEvent', 'applyToLoopEvent', 'handleExportScene'].includes(i))
+            }
+            if (!this.isTravelExport || this.profile.positionId !== row.crtEmpNo) {
+                btns = btns.filter(i => i !== 'handleDeleteScene')
+            }
+            if (row.sceneStatus !== '02') {
+                btns = btns.filter(i => !['handleUpdateScene', 'handleDeleteScene'].includes(i))
+            }
+            if (row.sceneStatus !== '01') {
+                btns = btns.filter(i => !['applyToMarketEvent', 'applyToLoopEvent'].includes(i))
+            }
+            if (this.profile.positionId !== row.crtByPosition) {
+                btns = btns.filter(i => !['handleUpdateScene'].includes(i))
+            }
+            if (btns && btns.length) {
+                return _.cloneDeep(this.optTypeList).filter(v => btns.includes(v.command))
+            }
+            return _.cloneDeep(this.optTypeList)
+        },
+        handleAddScene() {
+            let params = {
+                marketType: this.marketType
+            }
+            this.$refs.addForm.add(params).then(() => {
+                this.$success('操作成功')
+                this.$refs.tree.init()
+            })
+        },
+        handleClick(index){
+            this.$nextTick(()=>{
+                this.$refs.image[index].$children[0].$el.classList.add('grid')
+            })
+        },
+        async handleConfirm() {
+            let valid = await this.validateNav()
+            if (!valid) return
+            let data = this.$refs.main.getData()
+            sessionStorage.setItem('canvas', JSON.stringify(data.canvas))
+            updateReferNum(this.currentNode.pkId)
+            this.canvasVis = false
+            this.$router.replace({
+                path: '/market/event/create',
+                query: {
+                    mode: 'add',
+                    isLoop: this.applyType === 'cycle',
+                    pageName: 'scence',
+                    id: this.currentNode.id,
+                    templateId: this.currentNode.pkId
+                }
+            })
+        },
+        async validateNav () {
+            let valid = false
+            let replaceNav = ['market/event/create', 'market/event/edit', 'market/event/copy1']
+            let nav = localStorage.getItem('mp-web')
+            let navList = JSON.parse(nav).nav.navList
+            navList.forEach(i => {
+                if (replaceNav.includes(i.name)) {
+                    valid = true
+                }
+            })
+            if (!valid) return true
+            try {
+                await this.$confirm('确认后将退出当前打开的新建/编辑/复制/修改/应用的活动或场景模板，是否继续？', '提示', { type: 'warning', confirmButtonText: '确认', closeOnClickModal: false })
+            } catch {
+                return false
+            }
+            navList.forEach(i => {
+                if (replaceNav.includes(i.name)) {
+                    // this.removeNav(i.name)
+                }
+            })
+            return true
+        },
+        //应用到营销活动
+        applyToMarketEvent(item) {
+            this.applyType = 'wp'
+            this.currentNode = item
+            this.canvasVis = true
+            this.canvasLoading = true
+            this.$nextTick(() => this.$refs.main.init())
+            setTimeout(() => this.canvasLoading = false, 1000)
+        },
+        applyToLoopEvent(item) {
+            this.applyType = 'cycle'
+            this.currentNode = item
+            this.canvasVis = true
+            this.canvasLoading = true
+            this.$nextTick(() => this.$refs.main.init())
+            setTimeout(() => this.canvasLoading = false, 1000)
+        },
+        // 应用到表单商机
+        handleBusiness(item) {
+            this.$confirm('是否使用该场景进行商机创建').then(() => {
+                this.$router.push({
+                    name: 'market/business/update',
+                    query: {
+                        id: item.id,
+                        mode: 'copy'
+                    }
+                })
+            })
+        },
+        handleCommand(cmd, item) {
+            if (!cmd || !this[cmd]) return
+            this[cmd](item)
+        },
+        nodeClickss(nodeData, node) {
+            const nodeDataInfo = nodeData || this.nodeData
+            this.selectedNode = node
+            if (nodeData) {
+                this.nodeData = nodeDataInfo
+            }
+            this.$refs.table?.handleReset()
+            const params = {
+                search: {
+                    scenePkId: nodeDataInfo.pkId
+                }
+            }
+            this.getTableData(params)
+        },
+        resetClickss () {
+            this.selectedNode = { level: '1' }
+            this.nodeData = {}
+            this.$refs.table?.handleReset()
+            this.getTableData(params)
+        },
+        handleChangeMarket(marketType) {
+            this.marketType = marketType
+            this.$nextTick(() => {
+                this.$refs.table?.handleSearch()
+            })
+        },
+        handleRefreshList(){
+            this.$refs.table?.handleSearch()
+        },
+        handlePage({ pageSize, pageNumber }) {
+            this.pageSize = pageSize
+            this.pageNumber = pageNumber
+            this.handleSearch()
+        },
+        handleSearch(params, resetPage = false) {
+            if (params) {
+                this.params = params
+            }
+            const value = params || this.params
+            let scenePkId = this.nodeData.pkId
+            const { actInitiatorList = [] } = value
+            const actInitiator = Array.from(new Set(actInitiatorList.map(e => e.userAcct + '-' + e.id))).join()
+            actInitiator && (value.actInitiator = actInitiator)
+            let p = {
+                search: {
+                    secneDetailName: value.secneDetailName,
+                    crtTmStart: value.crtTm ? formatDate(value.crtTm[0]) : null,
+                    crtTmEnd: value.crtTm ? formatDate(value.crtTm[1]) : null,
+                    actInitiator: value.actInitiator,
+                    sceneStatus: value.sceneStatus,
+                    scenePkId:scenePkId || null
+                }
+            }
+            this.getTableData(p, resetPage)
+        },
+        // 新增场景明细
+        addMarket(addType = 'add') {
+            if (this.marketType === '0') {
+                sessionStorage.setItem('currentIds', this.nodeData.pkId)
+                this.$router.push({
+                    path: '/market/event/edit/scene',
+                    query: {
+                        mode: 'add',
+                        paramsData: JSON.stringify(this.nodeData),
+                        type: "scene",
+                        addType
+                    }
+                })
+            } else {
+                this.$router.replace({
+                    name: 'market/business/add',
+                    query: {
+                        mode: 'add',
+                        source: 'scene-center',
+                        paramsData: JSON.stringify(this.nodeData)
+                    }
+                })
+            }
+        },
+        handleQuote(row) {
+            this.$refs.quote.open(row.pkId)
+        },
+        addImportMarket() {
+            this.$refs.import.open()
+        },
+        handleCloseImport(ifGet=false){
+            if (ifGet) {
+                this.addMarket('import')
+            }
+        },
+        async handleDetailScene(nodeData) {
+            this.loading = true
+            await updateViewNum(nodeData.pkId)
+            this.handleSearch()
+            if (this.marketType === '0') {
+                this.$router.push({
+                    path: '/market/event/detail/scene',
+                    query: {
+                        id: nodeData.id,
+                        isScene: 1,
+                        mode: 'update',
+                        pageName: "eventManage",
+                        source: 'scene-center',
+                        sceneStatus: nodeData.sceneStatus,
+                        oaStatus: nodeData.oaStatus
+                    }
+                });
+            } else if (this.marketType === '1') {
+                this.$router.push({
+                    name: 'market/business/detail',
+                    query: {
+                        id: nodeData.id,
+                        mode: 'view',
+                        oaStatus: nodeData.oaStatus,
+                        paramsData: JSON.stringify(this.nodeData)
+                    }
+                })
+            }
+            this.loading = false
+        },
+        handleDeleteScene(data) {
+            this.$deleteConfirm(data.secneDetailName).then(async () => {
+                await sceneDetailsDelete(data.pkId)
+                this.$success("操作成功")
+                const p = {
+                    search: {
+                        scenePkId: data.scenePkId
+                    }
+                }
+                await this.getTableData(p)
+            })
+        },
+        // 编辑
+        handleUpdateScene(row) {
+            this.$router.push({
+                path: '/market/event/edit/scene',
+                query: {
+                    mode: 'update',
+                    id: row.id,
+                    viewType: '场景库',
+                    sceneStatus: row.sceneStatus
+                },
+                params: {
+                    paramsData: JSON.stringify(this.nodeData),
+                }
+            })
+        },
+        // 导出
+        handleExportScene(data) {
+            exportMarketEvent(data.id)
+        },
+        handleChange (event, value) {
+            if(event) {
+                this.selectedCard.push(value.pkId);
+            } else {
+                this.selectedCard.splice(this.selectedCard.indexOf(value.pkId), 1);
+            }
+            this.$forceUpdate()
+        },
+        handleStatusScene(row) {
+            let data = _.cloneDeep(row)
+            const sceneStatusReverseMap = {
+                '01': '02',
+                '02': '01'
+            }
+            data.sceneStatus = sceneStatusReverseMap[data.sceneStatus]
+            let params = {
+                sceneDetailId: data.pkId,
+                status: data.sceneStatus
+            }
+            let s1 = data.sceneStatus === '01' ? '启用' : data.sceneStatus === '02' ? '停用' : ''
+            this.$confirm('是否' + s1 + data.secneDetailName,
+                '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                openOrColse(params).then(res => {
+                    let p = {
+                        search: {
+                            scenePkId: res.data.scenePkId
+                        }
+                    }
+                    this.$refs.table?.handleSearch()
+                })
+            }).catch(() => {
+                data.sceneStatus = sceneStatusReverseMap[data.sceneStatus]
+            })
+        },
+        handleLogScene(data) {
+            this.$refs.log.open(data.pkId, data.secneDetailName)
+        },
+        getImgPath(value) {
+            return value.imagePath ? 'data:image/png;base64,' + value.imagePath : this.defaultBg
+        },
+        loadError(item) {
+            this.$set(item, 'imagePath', this.defaultBg)
+        },
+        async getTableData(params = {}, resetPage = false) {
+            try {
+                this.loading = true
+                this.searchLoading = true
+                if (resetPage) {
+                    this.pageNumber = 1
+                    this.pageSize = 9
+                }
+                const pageInfo = {
+                    pageNum: this.pageNumber,
+                    pageSize: this.pageSize
+                }
+                params.search.marketType = this.marketType
+                params.search.tempType = '1'
+                const res = await sceneDetailsSearch(Object.assign(pageInfo, params))
+                this.tableData = res.data.list
+                this.tableData.forEach(item =>{
+                    item.check = this.selectedCard.includes(item.id)
+                })
+                this.total = res.data.total
+                this.loading = false
+                this.searchLoading = false
+            } catch (error) {
+                this.loading = false
+                this.searchLoading = false
+            }
+        },
+        openBigImg(index) {
+            this.$refs.image[index].showViewer = true
+            this.$nextTick(() => {
+                this.$refs.image[index].$children[0].$el.classList.add('grid')
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.scene-center {
+    height: 100%;
+}
+.scene-right {
+    ::v-deep{
+        .yt-search__wrapper{
+            flex-shrink: 0;
+        }
+    }
+    height: 100%;
+    background: #fff;
+    overflow-x: auto;
+    padding:12px;
+    .scene-table {
+        display: flex;
+        flex-direction: column;
+        gap:16px;
+        height: 100%;
+        overflow: auto;
+        padding: 20px;
+        background: #F3F5F7;
+    }
+    .card-body {
+        display: flex;
+        gap:16px;
+        height: 100%;
+        overflow: auto;
+        flex-wrap: wrap;
+        align-content: flex-start;
+    }
+    .card {
+        width: calc(calc(100% - 32px) / 3);
+        padding: 8px;
+        border-radius: 4px;
+        background-color: #ffffff;
+        border: 1px solid #e3e5e8;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        .card--img {
+            border-radius: 5px;
+            overflow: hidden;
+            position:relative; 
+            min-height:111px;
+            background: #f4f5f6;
+            flex: 1 0 0;
+
+            .no-preview {
+                pointer-events: none;
+            }
+        }
+        ::v-deep.el-switch__core {
+            width: 28px !important;
+            height: 16px;
+        }
+        ::v-deep.el-switch__core::after {
+            width: 12px;
+            height: 12px;
+            margin-top: 0px;
+        }
+        ::v-deep.el-switch.is-checked .el-switch__core::after{
+            margin-left: -13px;
+        }   
+        .screen {
+            position: absolute;
+            top:4px;
+            right:6px;
+            cursor: pointer;
+            z-index: 2;
+        }
+    }
+    .pagination--footer{
+        border-top:1px solid #EBEEF5;
+        height:56px;
+        text-align:right;
+        padding:12px 4px;
+        background:#FFF;
+    }
+    .yt-search {
+        padding: 16px 12px 0;
+    }
+    .yt-search+.yt-table {
+        border-top: 1px solid #dde4ec;
+    }
+    .btns {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 40px;
+        padding-bottom: 8px;
+
+        .table-select--count{
+            color: #999999;
+            font-size: 12px;
+            margin-right:5px;
+        }
+    }
+}
+
+.scene-title {
+    margin-top: 10px;
+    .scence-bottom {
+        .title{
+            line-height: 18px;
+            color: #333333;
+            font-size: 13px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .opt {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .right {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
+</style>
+<style lang="less">
+.grid {
+    .el-image-viewer__canvas .el-image-viewer__img {
+        border-radius: 4px;
+        background-color: #f4f5f6;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2UwZTBlMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
+    }
+}
+</style>