zdxtLawEnforcementCodeView/src/views/enterprise/enterpriseEvaluate/evaluate.vue

<template>
    <div class="address_edit">
        <div class="warp_body">

<!--            <div class="cardsty"><label>处置单位</label><span>{{data.dataObj.orgText}}</span></div>-->
            <div class="cardsty">
                <h4>您对我们的执法检查满意吗？</h4>
                <div class="eval-item">
                    <label>请评价</label>
                    <span class="eval-star">
                        <van-icon @click="checkDealSpeedMetrics(n)" class="active" name="star"
                                  v-for="n in data.dataObj.dealSpeedMetrics"/>
                        <van-icon @click="checkDealSpeedMetrics(n + data.dataObj.dealSpeedMetrics)" name="star"
                                  v-for="n in (3 - data.dataObj.dealSpeedMetrics)"/>
                    </span>
                    <span class="eval-star-font" v-if="data.dataObj.dealSpeedMetrics == 1">不满意</span>
                    <span class="eval-star-font" v-if="data.dataObj.dealSpeedMetrics == 2">较满意</span>
                    <span class="eval-star-font" v-if="data.dataObj.dealSpeedMetrics == 3">满意</span>
                    <!-- <span v-if="data.dataObj.dealSpeedMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 5">非常满意</span> -->
                </div>
                <!-- <div class="eval-item">
                    <label>检查效果</label>
                    <span class="eval-star">
                        <van-icon @click="checkDealEffectMetrics(n)" class="active" name="star"
                                  v-for="n in data.dataObj.dealEffectMetrics"/>
                        <van-icon @click="checkDealEffectMetrics(n + data.dataObj.dealEffectMetrics)" name="star"
                                  v-for="n in (5 - data.dataObj.dealEffectMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.dealEffectMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 5">非常满意</span>
                </div> -->
                <!-- <div class="eval-item">
                    <label>服务体验</label>
                    <span class="eval-star">
                        <van-icon @click="checkServiceMetrics(n)" class="active" name="star"
                                  v-for="n in data.dataObj.serviceMetrics"/>
                        <van-icon @click="checkServiceMetrics(n + data.dataObj.serviceMetrics)" name="star"
                                  v-for="n in (5 - data.dataObj.serviceMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.serviceMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 4">满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 5">非常满意</span>
                </div> -->
                <!-- <div class="eval-item">
                    <label>检查质量</label>
                    <span class="eval-star">
                        <van-icon @click="checkDealEffectMetrics(n)" class="active" name="star"
                                  v-for="n in data.dataObj.feedbackQualityMetrics"/>
                        <van-icon @click="checkFeedbackQualityMetrics(n + data.dataObj.feedbackQualityMetrics)"
                                  name="star" v-for="n in (5 - data.dataObj.feedbackQualityMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 4">满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 5">非常满意</span>
                </div> -->

                <!-- <div class="eval-all">
                    <span>整体评价：</span>
                    <i class="verygood bad" v-if="data.dataObj.approveCode == 1 || data.dataObj.approveCode == 2"></i>
                    <i class="verygood good" v-if="data.dataObj.approveCode == 3 || data.dataObj.approveCode == 4"></i>
                    <i class="verygood" v-if="data.dataObj.approveCode == 5"></i>
                    <span v-if="data.dataObj.approveCode == 1">非常不满意</span>
                    <span v-if="data.dataObj.approveCode == 2">不满意</span>
                    <span v-if="data.dataObj.approveCode == 3">基本满意</span>
                    <span v-if="data.dataObj.approveCode == 4">满意</span>
                    <span v-if="data.dataObj.approveCode == 5">非常满意</span>
                    <span v-if="data.dataObj.approveCode == 6">未评价</span>
                    <span v-if="data.dataObj.approveCode == 7">无效评价</span>
                </div> -->

            </div>
            <div class="cardsty">
                <label>意见|建议</label>

                    <van-field class="eval-cont"
                            v-model="submitData.evaluateDescription"
                            rows="5"
                            autosize
                            type="textarea"
                            maxlength="100"
                            show-word-limit
                    />

            </div>

            <div class="file-upload">
                <div class="file-upload-center">
                    <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label> <span>(不多于 8张)</span>
                </div>
                <van-uploader v-model="submitData.fileObjList" class="file" multiple max-count="8"
                              :after-read="uploadFiles" :before-delete="deleteFile">
                    <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                    </template>
                </van-uploader>
            </div>

            <van-action-bar>
                <van-button round block type="info" @click="save">提交</van-button>
            </van-action-bar>
        </div>
    </div>
</template>

<script setup name="register">


    import {uploadFile} from '@/util/fileUpload'
    import {reactive, ref} from "vue";
    import * as w6s from 'szient-js-sdk';
    import {addEvaluateInfo} from "@/api/enterprise";
    import {showSuccessToast} from 'vant';
    const {useCommon, useMy} = $globalStore

    const router = useRouter();
    const route = useRoute();

    const data = reactive({
        dataObj: {
            dealSpeedMetrics: 0,
            dealEffectMetrics: 0,
            serviceMetrics: 0,
            feedbackQualityMetrics: 0,
            writingEvaluation: "",
        },
    });
    //保存参数
    const submitData = reactive({
        fileObjList: [],
        enforcementName:"",
        enforcementId:"",
        evaluateDescription:"",
        linkman:"",
        linkmanTel:"",
        authorization:"",
        enterpriseName:"",
        enterpriseNumber:"",
        inspectionEfficiency:0,
        checkEffect:0,
        serviceExperience:0,
        checkQuality:0
    });

    onMounted(() => {
        submitData.enforcementId = route?.query?.id;
        submitData.enforcementName = route?.query?.lawEnforcementItemText;
    });

    const checkDealSpeedMetrics = (n) => {
        data.dataObj.dealSpeedMetrics = n;
        //检查效率
        submitData.inspectionEfficiency = n;
    }
    const checkDealEffectMetrics = (n) => {
        data.dataObj.dealEffectMetrics = n;
        submitData.checkQuality = n;
    }
    const checkServiceMetrics = (n) => {
        data.dataObj.serviceMetrics = n;
        submitData.serviceExperience = n;
    }
    const checkFeedbackQualityMetrics = (n) => {
        data.dataObj.feedbackQualityMetrics = n;
        submitData.checkEffect = n;
    }

    const save = () => {
      submitData.enterpriseNumber = useCommon.enterpriseNumber;
      addEvaluateInfo(submitData,success=>{
        if(success.success){
          showSuccessToast('保存成功');
          router.push({path:"/enterprise/registrationList"})
        }
      },error =>{

      })
    }


</script>

<style lang="less" scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
        margin: 2% 3%;
        padding-bottom: 3rem;
        width: 94%;
        height: 100%;
        //border-radius: 0.25rem;
        //background-image: linear-gradient(to bottom, #ebf3fb, #fff);
        background: transparent;
        overflow-y: auto;
    }

    .file-upload {
        position: relative;
        min-height: 3.0rem;
        /*max-height: 6.5rem;*/
        padding: 1rem 0.27rem 0.27rem 0.43rem;
        box-sizing: border-box;
        background: #fff;
        border-radius: 0.2rem;
    }

    .file-upload-center {
        position: absolute;
        top: 0.27rem;
        left: 0.43rem;
        width: 90%;
        height: 0.65rem;
        font-size: 0.37rem;

        span {
            font-size: 0.32rem;
            color: #b9b9b9;
        }
    }

    .file {
        position: relative;
        width: 100%;
        height: calc(100% - 1.5rem);
    }

    /deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
        width: 1.95rem !important;
    }

    .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }

    .zoom {
        /*margin-top: 0.65rem;
        padding-top: 0.27rem;
        padding-left: 0.27rem;*/

        img {
            width: 1.95rem;
            height: 2rem;
            margin: 0 0.21rem 0.21rem 0;
            font-size: 0.35rem;
        }
    }

    .cardsty {
        margin: 3% 0;
        width: 100%;
        padding: 5%;
        background: #fff;
        border-radius: 0.2rem;
        font-size: 0.37rem;
        box-sizing: border-box;
    }

    .cardsty h4 {
        margin: 0.2rem 0 0.5rem;
        font-size: 0.42rem;
    }

    .cardsty label {
        margin-right: 0.3rem;
        color: #323233;
    }

    .eval-item {
        display: flex;
        align-items: center;
        margin: 0.27rem 0;
    }

    .eval-star {
        margin: 0 0.7rem 0 0.2rem;
    }

    .eval-star i {
        margin: 0 0.3rem;
        color: #ddd;
        font-size: 0.5rem;
    }

    .eval-star i.active {
        color: #fbb516;
    }
    .eval-star-font{
      font-weight: bold;
    }

    .eval-all {
        display: flex;
        align-items: center;
        margin: 8% 2% 3%;
        padding: 8% 0 0 0;
        width: 96%;
        border-top: 0.02667rem solid #eee;
    }

    .eval-all i {
        display: inline-block;
        margin: 0 0.3rem 0 0.5rem;
        width: 0.75rem;
        height: 0.75rem;
        background: url("../../assets/images/eval-verygood.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.good {
        background: url("../../assets/images/eval-good.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.bad {
        background: url("../../assets/images/eval-bad.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-cont {
        margin: 3% 0;
        width: 100%;
        border-radius: 0.15rem;
        border: 1px solid #f5f6f7;
        box-sizing: border-box;
        line-height: 1.5;
    }

    /deep/ .eval-cont textarea.van-field__control {
      padding: 0.1rem;
      text-align: justify;
    }

    /deep/ .van-button {
      margin: 5% 3%;
      padding: 0;
      width: 94%;
      height: 1rem;
      color: #fff;
      font-size: 0.4rem;
      border-radius: 1rem;
      background: #1367fe;
      border: 1px solid #1367fe;
      text-align: center;
    }

    /deep/ .van-action-bar {
      box-shadow: 0 0 0.27rem #e5e5e5;
    }

</style>