fj-dc-ui/.svn/pristine/fa/fac10c8a315c083cb26cf57f538b1d42011abc3a.svn-base

<template>
    <el-dialog title="整改详情" :visible.sync="dialogFormVisible" @close="closeDialog"
               :close-on-click-modal="false" :modal-append-to-body="true" :append-to-body="true" width="50%" class="outerDialog custom_dialog">
        <div
                style="width:49%;overflow-y:auto;max-height:52vh;float:left;border:1px solid #d5d5ff;margin-right:5px;">
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;margin-bottom: 10px;">基本信息</p>
            <el-form :model="formInline" label-width="110px" :rules="zhengGaiForm" ref="formInline">
                <el-form-item label="整改状态：" prop="rectConc">
                    <el-select v-model="formInline.rectConc" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in rectifyStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="审核状态：">-->
                    <!--<el-select v-model="formInline.chkState" placeholder="请选择">-->
                        <!--<el-option-->
                                <!--v-for="item in chkState"-->
                                <!--:key="item.value"-->
                                <!--:label="item.label"-->
                                <!--:value="item.value">-->
                        <!--</el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item label="整改时间：" prop="rectTm" clearable>
                    <el-date-picker
                            v-model="formInline.rectTm"
                            type="date"
                            placeholder="选择整改时间"
                            size="small"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注描述：">
                    <el-input v-model="formInline.rectNote" type="textarea" :rows="5" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div
                style="width: 49%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 52vh;"
        >
            <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
            <el-tabs style="margin:0px 5px">
                <el-tab-pane :label="picturetabName">
                    <el-row  style="text-align:right;">
                        <el-button :v-if="!addPicPanel?addPicPanel:addPicPanel"
                            size="mini"
                            type="text"
                            :icon="!addPicPanel?'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                            @click="addPic"
                        >{{!addPicPanel?"添加":"取消"}}</el-button>
                    </el-row>
                    <el-row v-show="addPicPanel">
                        <upload
                                ref="uploadFile"
                                :url="`/pdcApi/file/insert?bizId=`"
                                @uploadOver="removeNewSupervision"
                        ></upload>
                    </el-row>
                    <el-row>
                        <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                            <div class="upload-container" id="imgView">
                                <div
                                    v-if="editPicRefresh"
                                    v-for="(item, index) in pictureArray"
                                    :key="index"
                                    class="image-preview image-app-preview">
                                    <div class="image-preview-wrapper">
                                        <img :src="`${hostUrl}/${item.filePath}`">
                                        <div class="image-preview-action">
                                            <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                                            <i @click="editPicEvent(item)" class="el-icon-edit-outline"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-row>
                </el-tab-pane>

                <el-tab-pane :label="audiotabName">
                    <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                        <el-table-column header-align="center" align="center" label="音频">
                            <template slot-scope="scope">
                                <elaudio
                                        style="margin-left:15%;width:100px;height:30px;"
                                        :theUrl="`${hostUrl}/${scope.row.filePath}`"
                                ></elaudio>
                                <!-- <span>{{scope.row.fileTitle}}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.id,scope.$index)"
                                        type="danger"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="videotabName">
                    <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                        <el-table-column header-align="center" align="center" label="视频">
                            <template slot-scope="scope">
                                <!-- <span>{{scope.row.fileTitle}}</span> -->
                                <video-player
                                        class="vjs-custom-skin"
                                        ref="videoPlayer"
                                        :options="scope.row"
                                        :playsinline="true"
                                ></video-player>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.id,scope.$index)"
                                        type="danger"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="filetabName">
                    <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;">
                        <el-table-column header-align="center" align="center" label="文档">
                            <template slot-scope="scope">
                                <p>
                                    <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank" rel="noopener noreferrer">
                                        {{scope.row.fileName}}
                                    </a>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="removeFile(scope.row.id,scope.$index)"
                                        type="danger"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="closeDialog">取 消</el-button>
            <el-button size="mini" type="primary" @click="addFile('formInline')">保 存</el-button>
        </div>
        <EditPicOnline
                ref="editPicWeakupEvnent"
                v-if="editPicDialog"
                :picUrl="picUrl"
                @cancelHandler="cancelHandler"
                @editPicData="editPicDataEvent"
        ></EditPicOnline>
    </el-dialog>
</template>
<script>
    import request from '@util/gw_ajax_request'
    import {dateFormat} from '@util/gw_date';
    import elaudio from "../../widgets/elAudioShort.vue";
    import {
        findPageInfoShuiKu,
        getShuiKuWenTi,
        getXSKProblemNewExport,
        findPageInfo,
        getXSKProblemNew,
        removeSupervise,
        showDetailsXq,
        submitUpload,
        creatSupervise,
        getSupervisdByID,
        deleteFileById,
        updatelist,
        getEngId
    } from "@api/duChaAPI.js";
    import { hostUrl } from "@util/global_variable.js";
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        props: ['listId', 'rowId'],
        data() {
            //这里存放数据
            return {
                dialogFormVisible: true,
                formInline: {
                    "id": "",
                    "rectConc": "",
                    "chkState": "",
                    "rectTm": "",
                    "rectNote": "",
                    "rectPersId": "",
                },
                gwComFileList: [],
                rectifyStatus: [
                    {label: '未整改', value: '1'},
                    {label: '整改中', value: '2'},
                    {label: '已整改', value: '3'},
                    {label: '不具备整改条件', value: '4'}
                ],
                chkState:[
                    {label: '未审核', value: '0'},
                    {label: '销号', value: '1'},
                    {label: '待复查', value: '2'},
                    {label: '驳回', value: '3'}
                ],
                isAdd: null,
                picturetabName: "",
                addPicPanel: false,
                // 修改督查
                pictureArray: [],
                audioArray: [],
                videoArray: [],
                fileArray: [],
                audiotabName: "",
                videotabName: "",
                filetabName: "",
                changeSupervisionVisible: false,
                changeSupervisionLoading: false,
                editPicRefresh:true,
                editPicDialog:false,
                picUrl:"",
                picId:"",
                downloadIcon:"el-icon-download",
                gwComFiles:[],
                zhengGaiForm:{
                    rectConc:[{ required: true, message: '整改状态不能为空'}],
                    rectTm: [{ required: true, message: '整改时间不能为空'}]
                }
            }
        },
        components: {
            upload: resolve => {
                require(["@widget/uploadFile.vue"], resolve);
            },
            elaudio: elaudio,
            EditPicOnline: resolve => {
                require(["../../widgets/EditPicOnline/EditPicOnline.vue"], resolve);
            }


        },
        computed: {
            persId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
            },
            hostUrl(){
                return hostUrl
            }
        },
        //监控data中的数据变化
        watch: {
            rowId(n) {
                this.rowId = n;
                this.getRowIddata();
            }
        },
        //方法集合
        methods: {
            getRowIddata() {
                var _this = this;
                request.get(`/bis/insp/rect/pblm/${this.rowId}`).then(res => {
                    if (Object.keys(res.data).length) {
                        this.formInline = res.data;
                        this.formInline.rectTm = dateFormat(this.formInline.rectTm, "yyyy-MM-dd");
                        this.gwComFiles = res.data.gwFiles;
                        res.data.gwFiles.forEach(item => {
                            if (
                                item.fileExt == "mp3" ||
                                item.fileExt == "MP3" ||
                                item.fileExt == "m4a"
                            ) {
                                this.audioArray.push(item);
                            } else if (
                                item.fileExt == "jpg" ||
                                item.fileExt == "JPG" ||
                                item.fileExt == "png" ||
                                item.fileExt == "PNG" ||
                                item.fileExt == "JPEG" ||
                                item.fileExt == "jpeg"
                            ) {
                                this.pictureArray.push(item);
                            } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                                this.videoArray.push({
                                    id: item.id,
                                    bizId: item.bizId,
                                    width: "130",
                                    height: "130",
                                    autoplay: false,
                                    muted: true,
                                    language: "en",
                                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                                    sources: [
                                        {
                                            type: "video/mp4",
                                            // mp4
                                            src: this.hostUrl + item.filePath
                                            // webm
                                            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                                        }
                                    ]
                                });
                            } else {
                                this.fileArray.push(item);
                            }
                        });
                        _this.$nextTick(function(){
                            var  ViewerDom = document.getElementById('imgView');
                            var  viewer = new Viewer(ViewerDom, {})
                        });
                        this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                        this.audiotabName = "音频资料(" + this.audioArray.length + ")";
                        this.videotabName = "视频资料(" + this.videoArray.length + ")";
                        this.filetabName = "其它资料(" + this.fileArray.length + ")";
                    }
                })
            },
            //保存
            addFile(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        this.formInline.id = this.rowId;
                        this.formInline.rectPersId = this.persId;
                        request.post(`/bis/insp/rect/pblm/update`, this.formInline).then(res => {
                            if (res.success) {
                                this.$nextTick(()=>{
                                    if (this.$refs.uploadFile.submitUpload(res.data.id)) {
                                        this.removeNewSupervision();
                                        this.$message.success("操作成功");
                                        this.addPicPanel = false;
                                    }
                                })


                            }
                        }).catch(err => {
                            this.$message.error(err)
                        })
                    }
                })

            },
            closeDialog() {
                this.$emit('dialogClose')
            },
            removeNewSupervision(arg) {
                if (arg) {
                    console.log(arg);
                    this.$message.success('上传成功');
                }
                this.getRowIddata();
                this.closeDialog();
                this.$refs.uploadFile.init();
            },

            addPic() {
                this.addPicPanel = !this.addPicPanel;
            },


            // 删除图片文件
            removeFile(id, index) {
                var _self = this;
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "返回",
                    type: "warning"
                }).then(
                    res => {
                        if (res === "confirm") {
                            deleteFileById(id).then(res => {
                                if (res.success) {
                                    this.gwComFiles.forEach(item => {
                                        if (
                                            item.fileExt == "mp3" ||
                                            item.fileExt == "MP3" ||
                                            item.fileExt == "m4a"
                                        ) {
                                            this.audioArray.splice(index, 1);
                                        } else if (
                                            item.fileExt == "jpg" ||
                                            item.fileExt == "JPG" ||
                                            item.fileExt == "png" ||
                                            item.fileExt == "PNG" ||
                                            item.fileExt == "JPEG" ||
                                            item.fileExt == "jpeg"
                                        ) {
                                            this.pictureArray.splice(index, 1);
                                        } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                                            this.videoArray.splice(index, 1);
                                        }else{
                                            this.fileArray.splice(index,1);
                                        }
                                    });
                                    _self.getRowIddata();
                                } else {
                                    this.$message.warning(res.message);
                                }
                            });
                        }
                    },
                    res => {
                        console.log("返回");
                    }
                );

            },
            //图片编辑
            editPicEvent(item){
                this.picUrl = this.hostUrl + "/" + item.filePath;
                this.editPicDialog = true;
                this.editPicRefresh = false;
                this.picId = item.id;
            },
            cancelHandler() {
                this.editPicDialog = false;
                this.editPicRefresh = true;
            },
            editPicDataEvent(item){
                request.post(`/file/updateFile?bizId=${this.rowId}&id=${this.picId}`,item,{headers:{'Content-Type': 'multipart/form-data'}}).then(res => {
                    console.log(res);
                    if(res.success){
                        this.pictureArray = [];
                        this.getRowIddata();
                    }
                });
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getRowIddata();
        }
    }
</script>
<style lang="scss">
    .custom_dialog  {
        .el-dialog__body{
            height: 50vh !important;
        }
    }
    .upload-container {
        width: 100%;
        position: relative;
        .image-uploader {
            width: 35%;
            float: left;
        }
        .image-preview {
            width: 200px;
            height: 200px;
            position: relative;
            border: 1px dashed #d9d9d9;
            float: left;
            // margin-left: 50px;
            .image-preview-wrapper {
                position: relative;
                width: 100%;
                height: 100%;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .image-preview-action {
                position: absolute;
                width: 100%;
                height: 30px;
                left: 0;
                bottom: 0;
                cursor: default;
                text-align: center;
                color: #fff;
                opacity: 0;
                font-size: 20px;
                background-color: rgba(0, 0, 0, 0.5);
                transition: opacity 0.3s;
                cursor: pointer;
                text-align: center;
                line-height: 30px;
                .el-icon-delete {
                    font-size: 25px;
                }
                .el-icon-edit-outline {
                    font-size: 25px;
                }
            }
            &:hover {
                .image-preview-action {
                    opacity: 1;
                }
            }
        }
        .image-app-preview {
            margin-bottom: 10px;
            width: 40vh;
            height: 180px;
            position: relative;
            border: 1px dashed #d9d9d9;
            float: left;
            // margin-left: 50px;
            .app-fake-conver {
                height: 44px;
                position: absolute;
                width: 100%; // background: rgba(0, 0, 0, .1);
                text-align: center;
                line-height: 64px;
                color: #fff;
            }
        }
    }
</style>