Skip to content

B
BCDH-APP
Commit 374e3148 authored by 13841799530's avatar 13841799530
Browse files
Options

解润东 

图片显示优化
20211111
parent 31f4d3df
Pipeline #7090 passed with stage
    in 12 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 330 additions and 0 deletions
    src/views/checked/problem/note/detail/index.vue 0 → 100644
    View file @ 374e3148
    <!--
    * 严肃声明：
    * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
    * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
    * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
    * 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>
    src/views/checked/problem/note/edit/index.vue 0 → 100644
    View file @ 374e3148
    <!--
    * 严肃声明：
    * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
    * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
    * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
    * 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>
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment