sasp-admin 0.2.57

package/src/views/tenant/appManager.vue

@@ -0,0 +1,642 @@
+<template>
+    <el-container class='appList-box'>
+        <el-header style="height: auto;">
+            <div class="appheader">
+                <el-form :inline="true" size="small" class="demo-form-inline" onSubmit="return false;">
+                    <el-form-item label="应用名称">
+                        <el-input v-model="crud.searchForm.appName" placeholder="请输入"></el-input>
+                    </el-form-item>
+<!--                    <el-form-item label="关联菜单">-->
+<!--                        <el-select v-model="formAppSearchData.linkMenu" placeholder="菜单">-->
+<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
+<!--                            <el-option label="区域二" value="beijing"></el-option>-->
+<!--                        </el-select>-->
+<!--                    </el-form-item>-->
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="crud.doSearch()">查询</el-button>
+                        <el-button icon="el-icon-close" @click="crud.resetSearch()">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+        <el-main style="height: 100%;padding: 0 10px;">
+            <el-container style="height: 100%">
+                <el-header style="height: auto;padding: 10px 0">
+                    <div class='tb-header-box'>
+                        <!--                        <el-button size="medium" type="primary" icon="el-icon-circle-plus-outline" @click="appAdd()">新增</el-button>-->
+                        <el-button size="small" round type="danger" icon="el-icon-delete" @click='appDelete()'>删除
+                        </el-button>
+                    </div>
+                </el-header>
+                <el-main style="height: 100%;padding: 0">
+                    <el-table :ref="crud.tableRef" :data="crud.dataStore.records" stripe border height="100%"
+                              style="width: 100%"
+                              :header-cell-style="getRowClass">
+                        <!--                @selection-change=""-->
+                        <el-table-column type="index" width="50"></el-table-column>
+                        <el-table-column type="selection" width="55"></el-table-column>
+                        <el-table-column prop="appName" label="应用名称" width="160">
+                        </el-table-column>
+                        <el-table-column prop="appMark" label="应用说明" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="linkMenu" label="关联菜单" width="180"
+                                         show-overflow-tooltip></el-table-column>
+                        <el-table-column label="是否已上架" width="100" align="center">
+                            <template slot-scope="scope">
+                                <el-tag effect="dark" type="info" v-if="scope.row.shelf === '0'">
+                                    {{ scope.row.shelf === '0' ? '否' : '是' }}
+                                </el-tag>
+                                <el-tag effect="dark" type="success" v-if="scope.row.shelf === '1'">
+                                    {{ scope.row.shelf === '0' ? '否' : '是' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="是否付费" width="100" align="center">
+                            <template slot-scope="scope">
+                                <el-tag effect="dark" type="info" v-if="scope.row.pay === '0'">
+                                    {{ scope.row.pay === '0' ? '否' : '是' }}
+                                </el-tag>
+                                <el-tag effect="dark" type="success" v-if="scope.row.pay === '1'">
+                                    {{ scope.row.pay === '0' ? '否' : '是' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="version" label="版本号" width="80" align="center"></el-table-column>
+                        <el-table-column label="操作" align="center" width="280">
+                            <template slot-scope="scope">
+                                <el-button size="small" icon="el-icon-view" type="primary" @click="viewApp(scope.row)">
+                                    查看
+                                </el-button>
+                                <el-button size="small" icon="el-icon-edit-outline" type="primary"
+                                           style="margin-right: 10px;"
+                                           @click="editApp(scope.row)">
+                                    修改
+                                </el-button>
+                                <el-popconfirm
+                                    confirm-button-text='确定'
+                                    cancel-button-text='取消'
+                                    icon="el-icon-info"
+                                    icon-color="red"
+                                    :title="appTypeTitle"
+                                    @confirm='changeAppType(scope.row.id,scope.row.shelf)'>
+                                    <el-button slot="reference" size="small" type="info" v-if="scope.row.shelf === '1'"
+                                        @click="changeAppTitle(scope.row.shelf)">
+                                        {{ scope.row.shelf === '0' ? '上架' : '下架' }}
+                                    </el-button>
+                                    <el-button slot="reference" size="small" type="success" v-else
+                                        @click="changeAppTitle(scope.row.shelf)">
+                                        {{ scope.row.shelf === '0' ? '上架' : '下架' }}
+                                    </el-button>
+                                </el-popconfirm>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+        <el-footer style="height: 60px; padding: 16px 10px;">
+            <el-pagination
+                :ref="crud.pageRef"
+                :page-sizes="crud.pageSizes"
+                :page-size="crud.pageSize"
+                :current-page="crud.page"
+                :total="crud.dataStore.total"
+                @size-change="crud.sizeChange()"
+                @current-change="crud.currentPage()"
+                layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+        <!-- 新增或修改app列表信息 -->
+        <el-dialog :title="dialogTitle" :visible.sync="addAppVisible" v-if="addAppVisible" :close-on-click-modal=false
+                   height="70%"
+                   top="12vh" width="50%" center @close="closeAppDialogBox()">
+            <div style="width: 100%;height: 340px;padding-left: 10px;padding-right: 10px;padding-top: 10px">
+                <!-- 修改form表单 -->
+                <el-form label-width="110px" :model="appObjData" class="dialogForm" ref="editFormDataRef" :rules="operate != 'view'?rules:null" :disabled='isDisabled'>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="相同应用标记" prop="appKey"  :class="operate == 'view'?'source-mark-class':''">
+                                <el-select v-model="appObjData.appKey" filterable clearable  @change="changeAppKey()"
+                                           v-if="operate != 'view'"
+                                           style="width: 100%">
+                                    <el-option v-for="application in applicationArr" :key="application.id"
+                                               :label="application.appName"
+                                               :value="application.id">
+                                    </el-option>
+                                </el-select>
+                                <el-tooltip effect="dark" content="选择历史打包应用用于平滑升级" placement="top" v-if="operate != 'view'">
+                                    <i class="el-icon-info" style="position:absolute;top: 10px;right:-15px;
+                                                                font-size: 16px;cursor: pointer;color: #5cb6ff;"></i>
+                                </el-tooltip>
+                                <div v-if="operate == 'view'" class="cloud-div" style="margin-top: 0px;overflow-y: auto;">
+                                    {{ (applicationObj[appObjData.appKey] || {}).appName || ''}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="应用名称" prop="appName" :rules="operate != 'view'?plValidate('required'):null" :class="operate == 'view'?'source-mark-class':''">
+                                <el-input v-model="appObjData.appName" v-if="operate != 'view'"></el-input>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{appObjData.appName}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="应用版本" prop="version" :class="operate == 'view'?'source-mark-class':''" :rules="operate != 'view'? applicationVersionValidator:null">
+                                <el-input v-model="appObjData.version" v-if="operate != 'view'"></el-input>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{appObjData.version}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="应用图标" prop="appIcon">
+                                <el-input v-model="appObjData.appIcon" style="display: none"></el-input>
+                                <el-button @click="iconDialog = true">
+                                    <i :class="(currentIcon || '').indexOf('saspiconfont') > -1 ? currentIcon : 'saspiconfont pl-icon-tuxiang'"
+                                       style="font-size:16px"></i></el-button>
+                                <el-button @click="clearIcon()" v-if="operate != 'view'">清空</el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="应用类型" prop="appType"  :class="operate == 'view'?'source-mark-class':''">
+                                <el-radio-group v-model="appObjData.appType" v-if="operate != 'view'">
+                                    <el-radio :label="key" v-for="(value,key) in appTypeObj" :key="key">
+                                        {{value}}
+                                    </el-radio>
+                                </el-radio-group>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{appTypeObj[appObjData.appType]}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="应用分类" prop="appClassfily"
+                                          :class="operate == 'view'?'source-mark-class':''"
+                                          :rules="operate != 'view'? plValidate('required'):null">
+                                <el-select v-model="appObjData.appClassfily" placeholder="请选择"
+                                           v-if="operate != 'view'"
+                                           :filterable='true' allow-create style='width:100%'>
+                                    <el-option
+                                        v-for="item in appClassfilyOptions"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                        :disabled="item.disabled">
+                                    </el-option>
+                                </el-select>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{appObjData.appClassfily || '暂无'}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="是否上架" prop="shelf"  :class="operate == 'view'?'source-mark-class':''">
+                                <el-radio-group v-model="appObjData.shelf"   v-if="operate != 'view'">
+                                    <el-radio :label="key" v-for="(value,key) in shelfObj" :key="key">
+                                        {{value}}
+                                    </el-radio>
+                                </el-radio-group>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{shelfObj[appObjData.shelf]}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="是否付费" prop="pay" :class="operate == 'view'?'source-mark-class':''">
+                                <el-radio-group v-model="appObjData.pay" v-if="operate != 'view'">
+                                    <el-radio :label="key" v-for="(value,key) in payObj" :key="key">
+                                        {{value}}
+                                    </el-radio>
+                                </el-radio-group>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{payObj[appObjData.pay]}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="appObjData.pay == '1'">
+                            <el-form-item label="付费价格" prop="price" :class="operate == 'view'?'source-mark-class':''">
+                                <el-input v-model="appObjData.price" v-if="operate != 'view'">
+                                    <template slot="append">元</template>
+                                </el-input>
+                                <div v-else class="cloud-div" style="margin-top: 0px;overflow-y: auto;">
+                                    {{payObj[appObjData.price]}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="appObjData.pay == '1'">
+                            <el-form-item label="支持试用" prop="trail" :class="operate == 'view'?'source-mark-class':''">
+                                <el-radio-group v-model="appObjData.trail"  v-if="operate != 'view'">
+                                    <el-radio :label="key" v-for="(value,key) in trailObj" :key="key">
+                                        {{value}}
+                                    </el-radio>
+                                </el-radio-group>
+                                <div v-else class="cloud-div" style="min-height:20px;margin-top: 0px;overflow-y: auto;">
+                                    {{trailObj[appObjData.trail]}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="appObjData.trail == '1'">
+                            <el-form-item label="试用时长" prop="trailTime" :class="operate == 'view'?'source-mark-class':''">
+                                <el-input placeholder="请输入内容" v-model="appObjData.trailTime" v-if="operate != 'view'">
+                                    <template slot="append">天</template>
+                                </el-input>
+                                <div v-else class="cloud-div" style="margin-top: 0px;overflow-y: auto;">
+                                    {{appObjData.trailTime+'天'}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    
+                    <el-row>
+                        <el-col :span="24">
+                            <el-form-item label="应用说明" prop="appMark" :class="operate == 'view'?'source-mark-class':''">
+                                <el-input v-model="appObjData.appMark" :rows="4" type="textarea" v-if="operate != 'view'"
+                                          placeholder="请输入信息"></el-input>
+                                <div v-else class="cloud-div" style="margin-top: 0px;overflow-y: auto;">
+                                    {{appObjData.appMark}}
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                
+                </el-form>
+            </div>
+            <div slot="footer" class="dialog-footer" align="center">
+                <el-button type="primary" @click="appSubmit()" size="small" icon="el-icon-success" v-if="operate === 'update'">确定</el-button>
+                <el-button @click="addAppVisible = false" size="small" icon="el-icon-error" v-if="operate === 'view'">关闭</el-button>
+                <el-button @click="closeAppDialog()" size="small" icon="el-icon-error" v-else>取消</el-button>
+            </div>
+        </el-dialog>
+        <!--        应用图标-->
+        <el-dialog :close-on-click-modal=false :visible.sync="iconDialog" class="font-dialog" title="选择图标" width="70%"
+                   height="80%" top="10vh">
+            <font-icon :callback="getmenuIcon"></font-icon>
+        </el-dialog>
+    </el-container>
+</template>
+<script>
+import {FontIcon} from 'sasp-base';
+
+export default {
+    name: "appManager",
+    components: {FontIcon},
+    data() {
+        /**
+         * 应用版本
+         * @param rule
+         * @param value
+         * @param callback
+         * @returns {*}
+         */
+        let versionValidator =(rule,value,callback) =>{
+            if(!value){
+                callback();
+            }else {
+                let regFd = /^\d+(\.\d+)?$/; //非负浮点数
+                if(!regFd.test(value)){
+                    return callback(new Error('请输入正确的应用版本'));
+                }else {
+                    //判断版本长度
+                    let suffix = value.split(".")[1];
+                    if(suffix.length > 2){
+                        return callback(new Error('版本号最多为两位小数'));
+                    }else if(Number(value) <= (Number(this.oldApplicationVersion)) && Number(value) > 1.0){
+                        //比较上一个版本
+                        return callback(new Error('应用版本必须比上一个版本'+this.oldApplicationVersion+'大'));
+                    }else if(Number(value)  < 1.0){
+                        return callback(new Error('应用版本最小为1.0'));
+                    }else {
+                        callback();
+                    }
+                }
+            }
+        };
+        return {
+            currentIcon: "", // tab页图标
+            appListData: [],//app列表数据
+            operate: 'add', //操作类型
+            dialogTitle: '应用信息',
+            appTypeTitle: '确定要下架应用吗？',
+            isDisabled: false, //是否禁用表单
+            //app列表每一行数据
+            appId: '',
+            appObjData: {
+                appName: '',
+                appMark: '',
+                appType: 'group',
+                linkmenu: '',
+                appIcon: '',
+                shelf: '1',
+                pay: '1',
+                version: '',
+                trail: '1',
+                trailTime: '30',
+                appKey: '应用key1',
+                appClassfily: '工作管理'
+            },
+            appKeyOptions: [],
+            appClassfilyOptions: [{
+                value: '工作管理',
+                label: '工作管理'
+            }, {
+                value: '项目管理',
+                label: '项目管理',
+            }, {
+                value: '行政管理',
+                label: '行政管理'
+            }],
+            addAppVisible: false,
+            iconDialog: false,
+            rules: {
+                appType: {required: true, message: '该输入项为必输项', trigger: 'blur'},
+                shelf: {required: true, message: '该输入项为必输项', trigger: 'blur'},
+                pay: {required: true, message: '该输入项为必输项', trigger: 'blur'},
+                trail: {required: true, message: '该输入项为必输项', trigger: 'blur'},
+                trailTime: [{required: true, message: '该输入项为必输项', trigger: 'blur'},
+                    {
+                        pattern: /^([0-9]|[1-9][0-9]|[1-2][0-9][0-9]|[3][0-5][0-9]|(360|361|363|362|364|365))$/,
+                        message: "请填写正确的天数"
+                    }],
+                appMark: {required: true, message: '该输入项为必输项', trigger: 'blur'},
+            },
+            crud: new this.CrudUtil({
+                vue: this,
+                entityName: "sysApplication",
+                url: this.api.sysApplication.url,
+                searchUrl: this.api.sysApplication.findPage,
+                addUrl: this.api.sysApplication.add,
+                updateUrl: this.api.sysApplication.update,
+                deleteUrl: this.api.sysApplication.delete,
+                searchForm: {order: "CREATE_TIME DESC"},
+                noClearSearchColumns: ["created"],
+                // afterRemoveSuccess: this.afterRemoveSuccess
+            }),
+
+            applicationArr:[], //应用数组
+            applicationObj:{}, //应用对象
+            oldApplicationVersion:'1.0', //上一个版本
+            applicationVersionValidator:[
+                {required: true, message: '该输入项为必输项'},
+                {validator:versionValidator,trigger:'blur'},
+            ],
+            appTypeObj:{ //i应用类型
+                "group":"团体",
+                "person":"个人"
+            },
+            shelfObj:{//是否上架
+                "1":"上架",
+                "0":"下架"
+            },
+            payObj:{//支持付费
+                "1":"是",
+                "0":"否"
+            },
+            trailObj:{ //支持试用
+                "1":"是",
+                "0":"否"
+            },
+        }
+    },
+    created() {
+        // this.getAppListData();
+        this.crud.search();
+    },
+    mounted() {
+    },
+    methods: {
+        //改变上下架提示标题
+        changeAppTitle(status){
+            this.appTypeTitle = status === '0' ? '确定要上架应用吗？' : '确定要下架应用吗？';
+        },
+        //改变上下架状态；0：‘下架’，1：‘上架’
+        changeAppType(id,status) {
+            let shelf = status === '0' ? '1' : '0';
+            this.axios.post(this.api.sysApplication.update, {id, shelf}).then(res => {
+                if (res.data.operateSuccess) {
+                    this.$message({
+                        message: res.data.operateMessage,
+                        type: "success",
+                    });
+                    this.crud.search();
+                } else {
+                    this.$message.error("修改失败~");
+                }
+            })
+        },
+        //新增
+        // appAdd(){
+        //     this.operate = 'add';
+        //     this.dialogTitle = '新增应用信息';
+        //     this.appObjData.appName = '';
+        //     this.appObjData.version = '';
+        //     this.appObjData.appMark = '';
+        //     this.addAppVisible = true;
+        // },
+        //修改保存
+        appSubmit() {
+            this.$refs['editFormDataRef'].validate((valid) => {
+                if (valid) {
+                    this.axios.post(this.api.sysApplication.update, {id: this.appId, ...this.appObjData}).then(res => {
+                        if (res.data.operateSuccess) {
+                            this.$message({
+                                message: res.data.operateMessage,
+                                type: "success",
+                            });
+                            this.addAppVisible = false;
+                            this.currentIcon = '';
+                            // this.crud.search();
+                            // this.$refs[formName].resetFields();
+                        } else {
+                            this.$message.error("修改失败~");
+                        }
+                    })
+                } else {
+                    this.$message({
+                        message: "验证不通过",
+                        type: "error",
+                    });
+                    return false;
+                }
+            });
+        },
+        //选择删除
+        appDelete() {
+            let selection = this.$refs[this.crud.tableRef].selection;
+            this.crud.remove();
+        },
+
+        /**
+         * 请求app列表数据（查询app列表）
+         */
+        // getAppListData() {
+        //     this.axios.post(this.api.sysApplication.find).then(res => {
+        //         console.log(res.data)
+        //     })
+        // },
+        
+        //点击查看按钮
+        viewApp(row){
+            this.isDisabled = true;
+            this.appObjData = row;
+            this.currentIcon = row.appIcon;
+            this.operate = 'view';
+            this.dialogTitle = '查看应用信息'
+            this.applicationArr = [];
+            this.applicationObj = {};
+            this.axios.post(this.api.sysApplication.find).then(res => {
+                this.applicationArr = res && res.data ? (res.data || []) : [];
+                this.applicationArr.forEach(item => {
+                    this.applicationObj[item.id] = item;
+                });
+                this.addAppVisible = true;
+            });
+        },
+        //编辑数据(修改按钮)
+        editApp(row) {
+            this.isDisabled = false;
+            this.appId = row.id;
+            this.oldApplicationVersion = row.version; //上一个版本
+            this.appObjData = JSON.parse(JSON.stringify(row));
+            this.currentIcon = row.appIcon;
+            this.operate = 'update';
+            this.dialogTitle = '编辑应用信息';
+            this.applicationArr = [];
+            this.applicationObj = {};
+            this.axios.post(this.api.sysApplication.find).then(res => {
+                this.applicationArr = res && res.data ? (res.data || []) : [];
+                this.applicationArr.forEach(item => {
+                    this.applicationObj[item.id] = item;
+                });
+                this.addAppVisible = true;
+            });
+
+        },
+        //判断当前点击是修改还是查看
+        closeAppDialogBox(){
+            if (this.operate === 'update'){
+                this.closeAppDialog();
+            }else {
+                this.addAppVisible = false;
+            }
+        },
+        //关闭
+        closeAppDialog() {
+            this.addAppVisible = true;
+            this.$confirm('是否确认取消？若继续操作，本次修改未保存内容将会丢失', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.addAppVisible = false;
+            }).catch(() => {
+            
+            });
+        },
+        /**
+         * 设置tab页图标
+         * @param icon 图标
+         */
+        getmenuIcon(icon) {
+            if (icon.startsWith("el-icon-")) {
+                this.appObjData.appIcon = icon;
+                this.currentIcon = icon;
+            } else {
+                this.appObjData.appIcon = 'saspiconfont ' + icon;
+                this.currentIcon = 'saspiconfont ' + icon;
+            }
+            this.iconDialog = false;
+        },
+        /**
+         * 清除icon图标
+         */
+        clearIcon() {
+            let vm = this;
+            vm.appObjData.appIcon = '';
+            vm.currentIcon = '';
+        },
+        /**
+         * 修改讨论列表表格表头
+         *
+         */
+        getRowClass({row, column, rowIndex, columnIndex}) {
+            if (rowIndex === 0) {
+                return 'background-color:#F2F2F2;color:#000;font-size:15px;font-weight:600;'
+            } else {
+                return ''
+            }
+        },
+
+        /**
+         * 切换应用标识
+         */
+        changeAppKey(){
+            if(this.appObjData.appKey && this.applicationObj[this.appObjData.appKey]){
+                //赋值默认版本 在历史版本上 + 0.01
+                let obj = this.applicationObj[this.appObjData.appKey];
+                //赋值当前打包对象默认值
+                this.$set(this.appObjData,'appName',obj.appName);
+                this.$set(this.appObjData,'appIcon',obj.appIcon);
+                this.appObjData.appKey = obj.id; //赋值
+                //版本
+                this.$set(this.appObjData,'version',(Number(obj.version) + 0.01) +"");
+                if(this.appObjData.version.indexOf(".") == -1){
+                    this.appObjData.version = this.appObjData.version+".0"; //整数情况赋值小数点
+                }
+                this.appObjData.appMark = '';
+            }
+        },
+
+    }
+}
+</script>
+
+<style scoped lang='scss'>
+.appList-box {
+    width: 100%;
+    height: 100%;
+    
+    .appheader {
+        margin-top: 10px;
+        padding: 15px 20px 15px 20px;
+        border: 1px solid #EBEEF5;
+        border-radius: 4px;
+        
+        /deep/ .el-form {
+            .el-form-item {
+                margin-bottom: 0;
+            }
+        }
+    }
+    
+    /deep/ .el-table-column--selection .cell {
+        padding-left: 10px;
+    }
+    
+    /deep/ .el-tag {
+        padding: 0 20px;
+    }
+    /deep/ .el-dialog__title{
+        font-size: 16px;
+    }
+    .source-mark-class /deep/ label{
+        position: relative;
+        top: 0px;
+    }
+    .cloud-div{
+        border: 1px dashed #e6e6e6;padding: 0px 10px;box-sizing: border-box;min-height: 42px;
+    }
+    
+}
+
+</style>
+<style lang='scss'>
+/deep/ .el-popconfirm__main{
+    margin: 10px 0 !important;
+}
+</style>