解润东

<!--

 * 严肃声明：

 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！

 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！

 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！

 * Copyright (c) 2020 陈尼克 all rights reserved.

 * 版权所有，侵权必究！

 *

-->

<template>

    <div>

        <LHeader v-bind:text="text"></LHeader>

        <div class="card">

            <div>问题位置：{{list.address}}</div>

            <div>责任单位：{{list.deptId}}</div>

            <div>问题描述：{{list.context}}</div>

            <div>法律依据：{{list.checkBasis}}</div>

            <div>图片展示：<van-uploader multiple :deletable="false" :show-upload="false"  v-model="list.pictures" /></div>

            <div>视频展示：<van-uploader multiple :deletable="false" :show-upload="false" :disabled="true" v-model="list.videos" /></div>

        </div>

        <tab-bar :index="1"></tab-bar>

    </div>

</template>

<script>

import tabBar from "@/components/TabBar";

import LHeader from '@/components/header.vue'

import { getFun,postFun } from '@/service/table'

export default {

    name: 'detail',

    components: {

        "LHeader":LHeader,

        "tabBar":tabBar

    },

    data() {

        return {

            text:'问题详情',//顶部文本

            list:{},//详情列表

            id:'',//详情列表id

        }

    },

    mounted() {

        this.id=this.$route.query.id

        this.init()

    },

    methods: {

        /* 获取详情列表 */

        init(){

            this.list={}

            getFun('check/carry/trouble/'+this.id).then((Response)=>{

                this.list=Response.data

            })

        }

    }

}

</script>

<style lang="less" scoped>

    .card{

        width:90%;

        box-shadow: 0px 0px 10px 2px #F3F3F3;

        padding: 0.25rem;

        margin:0.4rem auto;

        background: white;

        border-radius: 4%;

    }

    .card div{

        font-size: 0.4rem;

        line-height: 0.8rem;

    }

</style>

<!--

 * 严肃声明：

 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！

 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！

 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！

 * Copyright (c) 2020 陈尼克 all rights reserved.

 * 版权所有，侵权必究！

 *

-->

<template>

    <div>

        <LHeader v-bind:text="text"></LHeader>

        <van-form @submit="onSubmit" @failed="onFailed">

            <!-- <van-field

                v-model="problemName"

                name="问题名称"

                label="问题名称"

                placeholder="问题名称"

                :rules="[{ required: true, message: '请填写问题名称' }]"

            /> -->

            <van-field

                v-model="problemDescribe"

                name="问题描述"

                label="问题描述"

                placeholder="问题描述"

                :rules="[{ required: true, message: '请填写问题描述' }]"

                :disabled="isFormwork"

            />

            <van-field

                v-if="islay"

                v-model="checkBasis"

                name="法律依据"

                label="法律依据"

                placeholder="法律依据"

                :disabled="isFormwork"

                :rules="[{ required: true, message: '请填写法律依据' }]"

            />

            <van-field

                v-model="problemPosition"

                name="问题位置"

                label="问题位置"

                placeholder="问题位置"

                :rules="[{ required: true, message: '请填写问题位置' }]"

            />

            <van-field

                readonly

                clickable

                name="picker"

                :value="value"

                label="责任单位"

                :disabled="Isvalue"

                placeholder="请选择部门"

                @click="!Isvalue?showPicker = true:showPicker = false"

                :rules="[{ required: true, message: '请填写问题位置' }]"

            />

            <van-popup v-model="showPicker" position="bottom">

                <van-picker ref="apicker"

                    show-toolbar

                    :columns="columns"

                    @confirm="onConfirm"

                    @cancel="showPicker = false"

                    @change="checkScroll"

                />

                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->

            </van-popup> 

            <van-field name="uploader" label="图像上传" :rules="[{ required: true, message: '请上传图像' }]">

                <template #input>

                    <van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderImg" />

                </template>

            </van-field>

            <van-field name="uploader2" label="视频上传" :rules="[{ required: true, message: '请上传视频' }]">

                <template #input>

                    <van-uploader multiple :max-count="5" upload-text="最多上传五个" v-model="uploaderVideo" />

                </template>

            </van-field>

            <div style="margin: 0.5rem">

                <van-button round block type="info" native-type="submit">提交</van-button>

            </div>

        </van-form>

        <tab-bar :index="1"></tab-bar>

    </div>

</template>

<script>

import tabBar from "@/components/TabBar";

import LHeader from '@/components/header.vue'

import { getFun,postFun } from '@/service/table'

export default {

    name: 'list',

    components: {

        "LHeader":LHeader,

        "tabBar":tabBar

    },

    data() {

        return {

            /* form表单 */

            // problemName:'',//问题名称

            problemPosition:'',//问题位置

            value:'',//责任单位

            valueId:0,//责任单位id

            problemDescribe:'',//问题描述

            uploaderImg:[],//图像上传

            uploaderVideo:[],//视频上传

            checkBasis:'',//法律依据

            showPicker:false,//默认是否展示弹出层

            columns: [],//下拉数组

            text:'问题编辑',//顶部文本

            jumpObj:{},//跳转对象

            id:'',//检查执行id

            ids:[],//下拉框选中值数组id

            planId:'',//不合格跳转进本页面所传列表id

            planItemId:'',//不合格跳转进本页面所传列id

            islay:false,//是否显示法律依据

            isFormwork:false,//决定是否从不合格跳转到本页面是否禁用检查名称，内容，法律依据

            Isvalue:false,//是否禁用责任单位

        }

    },

    mounted() {

        if(this.$route.query.id){

            this.id=this.$route.query.id

            var obj=JSON.parse(this.$route.query.obj)

            this.Isvalue=obj.projectFlag

            this.ids=obj.deptIdList

            this.value=obj.deptNameList.join('/')

        }

        if(this.$route.query.name=='formwork'){

            // this.problemName=this.$route.query.checkitem,//检查项目

            this.problemDescribe=this.$route.query.checkContent,//检查内容

            this.checkBasis=this.$route.query.checkBasis//法规依据  

            this.isFormwork=true

            this.planId=this.$route.query.planId

            this.planItemId=this.$route.query.planItemId,

            this.islay=true

        }

        this.init()

    },

    methods: {

        /* 获取下拉树级联列表 */

        init(){

            getFun('check/dept/tree').then((Response)=>{

                this.columns=Response.data

            })

        },

        /* 下拉框文本溢出动画效果 */

        checkScroll () {

            this.$nextTick(() => {

                // 获取选中元素

                let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]

                selectedItems.forEach(item => {

                let child = item.querySelector('.van-ellipsis')

                if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度

                    item.classList.add('scroll')

                } else {

                    item.classList.remove('scroll')

                }

                })

            })

        },

        onFailed(errorInfo){

            this.$toast.fail('提交失败,请完善信息')

        },

        /* 问题提交 */

        onSubmit(value){

            console.log(value)

            var pictures=[];

            value.uploader.forEach((item) => {

                pictures.push(item.content)

            });

            var videos=[];

            value.uploader2.forEach((item) => {

                videos.push(item.content)

            });

            var obj={

                planId:this.planId?this.planId:this.id,

                planItemId:this.planItemId?this.planItemId:'',

                pictures:pictures,

                videos:videos,

                title:value['问题名称'],//问题名称

                address:value['问题位置'],//问题位置

                deptIds:this.ids,//责任单位

                context:value['问题描述'],//问题描述

                checkBasis:value['法律依据']//法律依据

            }

            console.log(obj)

            this.$dialog.confirm({

                title: '提示',

                message: '确定提交检查问题？',

            }).then(()=>{

                this.$toast.loading({

                    message:'提交中...',

                    forbidClick: true,

                    loadingType: 'spinner',

                    duration: 0

                })

                postFun('check/carry/trouble',obj).then((Response)=>{

                    this.$toast.clear()

                    this.$toast.success({

                        message:'提交成功',

                        duration: 2000

                    })

                    this.$router.push({

                        name:'problem',

                        query:{

                            pageName:'problemList'

                        }

                    })

                }).catch(()=>{

                    this.$toast.clear()

                    this.$toast.fail('提交失败,请稍后再试')

                })

            }).catch(()=>{

            })

        },

        /*  确认选择级联菜单的回显数据处理 */

        onConfirm(){

            //获取回显的部门值和部门id数组

            this.value=""

            this.ids=[]

            var valueList=this.$refs.apicker.getValues()

            valueList.forEach((item)=>{

                console.log(item)

                this.ids.push(item.id)

                this.value+=item.text+' / '

            })

            this.showPicker = false;

        }

    }

}

</script>

<style lang="less" scoped>

    .card{

        width:90%;

        box-shadow: 0px 0px 10px 2px #F3F3F3;

        padding: 0.25rem;

        margin:0.4rem auto;

        background: white;

    }

    .card div{

        font-size: 0.4rem;

    }

/deep/ .van-picker-column__item--selected {

/* 重写选中后的效果 */

.van-ellipsis {

    text-overflow: unset;

    overflow: visible;

}

/* 增加scroll类 */

&.scroll > .van-ellipsis {

    animation: move 4s linear infinite;

}

}

@keyframes move {

    0% { transform: translateX(100%); }

    100% { transform: translateX(-100%); }

}

</style>