epmet-work-pc/src/views/modules/base/smartExcel/cpts/picture-add.vue

<template>
    <div>
        <div class="dialog-h-content scroll-h">
            <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
                <el-row>

                    <el-col :span="24">
                        <el-form-item label="图片集名称" prop="albumName" label-width="150px">
                            <el-input v-model.trim="formData.albumName" size="small" clearable placeholder="请输入图片集名称(30字以内)"
                                class="u-item-width-normal"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图片集封面" label-width="150px" prop="coverPicture">
                            <template>
                                <upload-image :defaultFileList="fileList" :limit="1" @change="onChangeFileList"
                                    @file-removed="removedImg"></upload-image>
                            </template>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="24">
                        <el-form-item label-width="150px" label="共享范围" prop="sharedScope">
                            <el-select v-model="formData.sharedScope" placeholder="仅本组织内共享" clearable>
                                <el-option v-for="item in sharingScopeList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="div_btn">
            <el-button size="small" @click="handleCancle">取 消</el-button>
            <el-button size="small"  type="primary" 
                @click="handleComfirm">确 定</el-button>

        </div>
    </div>
</template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { Loading } from 'element-ui' // 引入Loading服务
 import { requestPost } from '@/js/dai/request'
 import Tinymce from '@c/tinymce2/index.vue'
 import daiMap from "@/utils/dai-map";
 import util from '@js/util.js';
 // import UploadImage from './upload-image.vue'
 import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
 
 
 var map
 var search
 var markers
 var infoWindowList
 var geocoder // 新建一个正逆地址解析类
 
 let loading // 加载动画
 export default {
    data() {
        return {
            fileList:[],
            sharingScopeList:[
            {
                    value:"0",
                    label:"仅本部门内共享"
                },
                {
                    value:"1",
                    label:"本级和直接下级组织共享"
                },
                {
                    value:"2",
                    label:"本级和直接上级组织共享"
                },
                {
                    value:"3",
                    label:"本级和直接上下级组织共享"
                },
            ],
            formType:"add",
            formData:
            {   
                
                coverPicture:"",
                albumName:"",
                sharedScope:""

            },
            corganizerList: [],
            uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
            customerId: localStorage.getItem('customerId'),

        }

    },
 
    components: {Tinymce, UploadImage  },
    mounted() {
        this.listServerOrg()
    },
 
    methods: {
        removedImg() {
            this.formData.coverPicture = ''
        },
        onChangeFileList(e) {
            this.startLoading()
            console.log(e, 'sssssb');
            this.fileList = e.length > 0 ? e.map(item => ({
                fileType: '0',
                fileUrl: item.response.data.url
            })) : []; // 当e为空时清空fileList
            if (e.length > 0) {
                this.formData.coverPicture = e[0].response.data.url;
            } else {
                this.formData.coverPicture = '';
            }
            this.endLoading()
        },
        async initForm(type, activityId) {
            this.startLoading()
            this.formType = type
            console.log(type,activityId,"进行修改");
            if (type === 'edit') {
                this.formData = activityId
                if (activityId.coverPicture) {
                    let ob = {
                        fileType: '0',
                        fileUrl: activityId.coverPicture
                    };
                    this.fileList = [ob];
                    this.formData.coverPicture = ob.fileUrl;
                }
            }  else {
                
            }
            this.endLoading()
 
        },
        async handleComfirm() {
            if(!this.formData.albumName){
                return this.$message.error("请输入图片集名称")
            }
            if(!this.formData.coverPicture){
                return this.$message.error("请上传封面图片")
            }
            if(!this.formData.sharedScope){
                return this.$message.error("请选择共享范围")
            }
           this.addActivity()
        },
        async addActivity() {
            if(this.formType=="add"){
                let url = '/actual/base/albums/save'
                const { data, code, msg } = await requestPost(url, this.formData)
                if (code === 0) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                } else {
                    this.$message.error(msg)
                }
                this.$emit('closeAdd')
            }else{
                let url = '/actual/base/albums/update'
                const { data, code, msg } = await requestPost(url, this.formData)
                if (code === 0) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                } else {
                    this.$message.error(msg)
                }
                this.$emit('closeAdd') 
            }

            },
        handleCancle() {
             console.log("sdlkfjklsdf ");
            this.$emit('closeAdd')
            
        },
 

        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: '正在加载……', // 加载中需要显示的文字
                background: 'rgba(0,0,0,.7)' // 背景颜色
            })
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close()
            }
        }
    },
    computed: {
        dataRule() {
            return {
                albumName: [
                    { required: true, message: '请输入图片集名称', trigger: 'blur' }
                ],
                sharedScope: [
                    { required: true, message: '请选择共享范围', trigger: 'blur' }
                ],
                coverPicture: [
                    { required: true, message: '请选择图片集封面', trigger: 'blur' }
                ]
            }
        },
 
    },
    props: {
 
 
 
    },
    destroyed () {
     map = null
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
 @import "@/assets/scss/modules/visual/communityManageForm.scss";
 </style>
 <style lang="scss" scoped>
 .item_width_1 {
    width: 634px;
 
    /deep/.tox .tox-dialog {
        z-index: 20000;
    }
 }
 .u-item-width-normal{
    width: 222px;
 }
 
 .tinymce_view {
    ::v-deep .tox .tox-dialog {
        z-index: 2000000000;
    }
 }
 
 .div_map {
    position: relative;
 }
 
 .div_searchmap {
    z-index: 5000;
    position: absolute;
    top: 5px;
    left: 5px;
 }
 
 .tinymce_view {
    height: 400px;
    overflow: auto;
 }
 
 .text_p {
    margin: 0;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
 
    >p {
        margin: 0;
    }
 }
 </style>