RuoYi-Vue-Plus/zdxt-web-client/zdxt-enforcement-code-app/fordelete/enterprise/enterpriseEvaluate/evaluate.vue

<template>
  <div class="address_edit">
    <div class="warp_body">
      <div class="cardsty">
        <h4>您对我们的执法满意吗？</h4>
        <div class="eval-list">
          <!-- <div id="evalVeryGood" :class="3==submitData.serviceExperience?'active':''">
                  <span @click="checkServiceMetrics(3)"></span><label>满意</label>
                </div>
                <div id="evalGood" :class="2==submitData.serviceExperience?'active':''">
                  <span @click="checkServiceMetrics(2)"></span><label>较满意</label>
                </div>
                <div id="evalBad" :class="1==submitData.serviceExperience?'active':''">
                  <span @click="checkServiceMetrics(1)"></span><label>不满意</label>
                </div> -->
          <div
            id="evalVeryGood"
            :class="3 == submitData.satisfactionLevel ? 'active' : ''"
          >
            <span @click="checkSatisfactionLevel(3)"></span><label>满意</label>
          </div>
          <div
            id="evalGood"
            :class="2 == submitData.satisfactionLevel ? 'active' : ''"
          >
            <span @click="checkSatisfactionLevel(2)"></span
            ><label>较满意</label>
          </div>
          <div
            id="evalBad"
            :class="1 == submitData.satisfactionLevel ? 'active' : ''"
          >
            <span @click="checkSatisfactionLevel(1)"></span
            ><label>不满意</label>
          </div>
        </div>
        <div class="LevelIsNot1" v-if="submitData.satisfactionLevel != 1">
          <div class="eval-item">
            <label class="starText">执法文明</label>
            <span class="eval-star">
              <van-rate
                v-model="submitData.serviceExperience"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
            <span v-if="submitData.serviceExperience == 1" class="starText"
              >非常不满意</span
            >
            <span v-if="submitData.serviceExperience == 2" class="starText"
              >不满意</span
            >
            <span v-if="submitData.serviceExperience == 3" class="starText"
              >基本满意</span
            >
            <span v-if="submitData.serviceExperience == 4" class="starText"
              >满意</span
            >
            <span v-if="submitData.serviceExperience == 5" class="starText"
              >非常满意</span
            >
          </div>
          <div class="eval-item">
            <label class="starText">执法效率</label>
            <span class="eval-star">
              <van-rate
                v-model="submitData.checkEffect"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
            <span v-if="submitData.checkEffect == 1" class="starText"
              >非常不满意</span
            >
            <span v-if="submitData.checkEffect == 2" class="starText"
              >不满意</span
            >
            <span v-if="submitData.checkEffect == 3" class="starText"
              >基本满意</span
            >
            <span v-if="submitData.checkEffect == 4" class="starText"
              >满意</span
            >
            <span v-if="submitData.checkEffect == 5" class="starText"
              >非常满意</span
            >
          </div>
          <div class="eval-item">
            <label class="starText">执法态度</label>
            <span class="eval-star">
              <van-rate
                v-model="submitData.checkAttitude"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
            <span v-if="submitData.checkAttitude == 1" class="starText"
              >非常不满意</span
            >
            <span v-if="submitData.checkAttitude == 2" class="starText"
              >不满意</span
            >
            <span v-if="submitData.checkAttitude == 3" class="starText"
              >基本满意</span
            >
            <span v-if="submitData.checkAttitude == 4" class="starText"
              >满意</span
            >
            <span v-if="submitData.checkAttitude == 5" class="starText"
              >非常满意</span
            >
          </div>
          <div class="eval-item">
            <label class="starText">合法性</label>
            <span class="eval-star">
              <van-rate
                v-model="submitData.proceduralLegality"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
            <span v-if="submitData.proceduralLegality == 1" class="starText"
              >非常不满意</span
            >
            <span v-if="submitData.proceduralLegality == 2" class="starText"
              >不满意</span
            >
            <span v-if="submitData.proceduralLegality == 3" class="starText"
              >基本满意</span
            >
            <span v-if="submitData.proceduralLegality == 4" class="starText"
              >满意</span
            >
            <span v-if="submitData.proceduralLegality == 5" class="starText"
              >非常满意</span
            >
          </div>
          
        </div>
        <div class="cardsty" v-else>
          <label>意见|建议</label>
          <van-field
            class="eval-cont"
            v-model="submitData.evaluateDescription"
            rows="5"
            autosize
            type="textarea"
            maxlength="100"
            show-word-limit
          />
        </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" v-if="submitData.satisfactionLevel == 1">
        <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>

      <div class="otherProBlem">
        <div class="otherProBlemText"><span>其他问题</span>
        <van-switch
          v-model="submitData.otherProblemSwitchBoolean"
          active-color="#00CD00"
          size="16px"
        /></div>
        <div v-if="submitData.otherProblemSwitchBoolean">
          <div class="otherProBlemItem">
            <span
              >1、是否存在逐利执法，接受被执法企业的馈赠、报酬、福利等?</span
            >
            <div class="otherProBlemItemIconList">
              <div @click="checkProblem1(1)" class="otherProBlemItemIcon">
                <div :class="submitData.problem1 == 1 ? 'onbad' : 'bad'"></div>
                <span>是</span>
              </div>
              <div @click="checkProblem1(0)" class="otherProBlemItemIcon">
                <div
                  :class="submitData.problem1 == 0 ? 'ongood' : 'good'"
                ></div>
                <span>否</span>
              </div>
            </div>
          </div>
          <div class="otherProBlemItem">
            <span>2、是否存在要求被执法企业提供宴请、娱乐、旅游等活动?</span>
            <div class="otherProBlemItemIconList">
              <div @click="checkProblem2(1)" class="otherProBlemItemIcon">
                <div :class="submitData.problem2 == 1 ? 'onbad' : 'bad'"></div>
                <span>是</span>
              </div>
              <div @click="checkProblem2(0)" class="otherProBlemItemIcon">
                <div
                  :class="submitData.problem2 == 0 ? 'ongood' : 'good'"
                ></div>
                <span>否</span>
              </div>
            </div>
          </div>
          <div class="otherProBlemItem">
            <span
              >3、是否存在干扰企业正常生产经营，刻意要求法定代表人到场行为?</span
            >
            <div class="otherProBlemItemIconList">
              <div @click="checkProblem3(1)" class="otherProBlemItemIcon">
                <div :class="submitData.problem3 == 1 ? 'onbad' : 'bad'"></div>
                <span>是</span>
              </div>
              <div @click="checkProblem3(0)" class="otherProBlemItemIcon">
                <div
                  :class="submitData.problem3 == 0 ? 'ongood' : 'good'"
                ></div>
                <span>否</span>
              </div>
            </div>
          </div>
          <div class="otherProBlemItem">
            <span
              >4、是否存在任性处罚企业，乱查封、乱扣押、乱冻结、动辄责令停产停业的行为?</span
            >
            <div class="otherProBlemItemIconList">
              <div @click="checkProblem4(1)" class="otherProBlemItemIcon">
                <div :class="submitData.problem4 == 1 ? 'onbad' : 'bad'"></div>
                <span>是</span>
              </div>
              <div @click="checkProblem4(0)" class="otherProBlemItemIcon">
                <div
                  :class="submitData.problem4 == 0 ? 'ongood' : 'good'"
                ></div>
                <span>否</span>
              </div>
            </div>
          </div>
          <div class="otherProBlemItem">
            <span
              >5、是否存在变相执法，以观摩、督导、考察等名义行执法之实?</span
            >
            <div class="otherProBlemItemIconList">
              <div @click="checkProblem5(1)" class="otherProBlemItemIcon">
                <div :class="submitData.problem5 == 1 ? 'onbad' : 'bad'"></div>
                <span>是</span>
              </div>
              <div @click="checkProblem5(0)" class="otherProBlemItemIcon">
                <div
                  :class="submitData.problem5 == 0 ? 'ongood' : 'good'"
                ></div>
                <span>否</span>
              </div>
            </div>
          </div>
        </div>
      </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 { showFailToast, 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:3,
  // checkQuality:0,
  fileList: [],
  userId: useCommon.userId,
  satisfactionLevel: 3,
  serviceExperience: 0,
  checkEffect: 0,
  proceduralLegality: 0,
  checkAttitude: 0,
  otherProblemSwitch: 0,
  otherProblemSwitchBoolean: true,
  problem1: 0,
  problem2: 0,
  problem3: 0,
  problem4: 0,
  problem5: 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 checkSatisfactionLevel = (n) => {
  submitData.satisfactionLevel = n;
  console.log(submitData);
};
const checkProblem1 = (n) => {
  submitData.problem1 = n;
};
const checkProblem2 = (n) => {
  submitData.problem2 = n;
};
const checkProblem3 = (n) => {
  submitData.problem3 = n;
};
const checkProblem4 = (n) => {
  submitData.problem4 = n;
};
const checkProblem5 = (n) => {
  submitData.problem5 = n;
};
const save = () => {
  submitData.enterpriseNumber = useCommon.enterpriseNumber;
  if (submitData.otherProblemSwitchBoolean) {
    submitData.otherProblemSwitch = 1;
  }
  submitData.fileObjList = [];
  console.log(submitData.satisfactionLevel);
  console.log(submitData.satisfactionLevel == 3);
  console.log(submitData.serviceExperience == 0);
  if (submitData.satisfactionLevel == 1) {
    addEvaluateInfo(
      submitData,
      (success) => {
        if (success.success) {
          showSuccessToast("保存成功");
          router.push({ path: "/enterprise/registrationList" });
        }
      },
      (error) => {
        console.log("评价失败");
        console.log(error);
      }
    );
  } else {
    if (submitData.serviceExperience == 0) {
      showFailToast("请为 执法文明项 评分");
    } else if (submitData.checkEffect == 0) {
      showFailToast("请为 执法效率项评分");
    } else if (submitData.proceduralLegality == 0) {
      showFailToast("请为 合法性项 评分");
    } else if (submitData.checkAttitude == 0) {
      showFailToast("请为 执法态度项 评分");
    } else {
      addEvaluateInfo(
        submitData,
        (success) => {
          if (success.success) {
            showSuccessToast("保存成功");
            router.push({ path: "/enterprise/registrationList" });
          }
        },
        (error) => {
          console.log("评价失败");
          console.log(error);
        }
      );
    }
  }
};
const uploadFiles = (file) => {
  if (Array.isArray(file)) {
    for (let i = 0; i < file.length; i++) {
      uploadFile(file[i], (res) => {
        submitData.fileList.push(res.url);
      });
    }
  } else {
    uploadFile(file, (res) => {
      submitData.fileList.push(res.url);
    });
  }
};

const deleteFile = (file, index) => {
  // submitData.fileListObj.filter((item, indexs) => {
  //     if (index.index == indexs) {
  //         submitData.fileListObj.splice(indexs, 1);//splice 删除
  //     }
  // });
  submitData.fileList.filter((item, indexs) => {
    if (index.index == indexs) {
      submitData.fileList.splice(indexs, 1); //splice 删除
    }
  });
  return true;
};
</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: 3rem;
  /*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;
  width: 1.5rem;
  text-align-last: justify;
  white-space: nowrap;
  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;
}

.starText {
  // font-size: 16px;
  font-weight: 800;
}
.otherProBlem {
  margin: 3% 0;
  width: 100%;
  padding: 5%;
  background: #fff;
  border-radius: 0.2rem;
  font-size: 0.37rem;
  box-sizing: border-box;
}
.otherProBlemItem {
  padding: 6px;
  line-height: 30px;
}
.otherProBlemText {
  display: flex;
  align-items: center;
  font-size: 0.43rem;
  margin-right: 0.27rem;
}
.otherProBlemItemIconList {
  padding-right: 15px;
  display: flex;
  float: right;
}

/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;
}

.eval-list {
  display: flex;
  justify-content: space-between;
  margin: 0 3% 8%;
}

.eval-list > div {
  width: 30%;
  text-align: center;
}

.eval-list > div > label {
  margin: 0.2rem 0;
  color: #999;
}

.eval-list > div.active > label {
  color: #323233;
  font-weight: 600;
}

.eval-list > div > span {
  display: block;
  margin: 0.5rem auto 0.2rem;
  width: 0.8rem;
  height: 1rem;
}

.eval-list > div#evalBad > span {
  background: url("../../../assets/images/eval-bad-dis.png") no-repeat;
  background-size: 100%;
  opacity: 0.5;
}

.eval-list > div#evalGood > span {
  background: url("../../../assets/images/eval-good-dis.png") no-repeat;
  background-size: 100%;
  opacity: 0.5;
}

.eval-list > div#evalVeryGood > span {
  background: url("../../../assets/images/eval-verygood-dis.png") no-repeat;
  background-size: 100%;
  opacity: 0.5;
}

.eval-list > div#evalBad.active > span {
  background: url("../../../assets/images/eval-bad.png") no-repeat;
  background-size: 100%;
  opacity: 1;
}

.eval-list > div#evalGood.active > span {
  background: url("../../../assets/images/eval-good.png") no-repeat;
  background-size: 100%;
  opacity: 1;
}

.eval-list > div#evalVeryGood.active > span {
  background: url("../../../assets/images/eval-verygood.png") no-repeat;
  background-size: 100%;
  opacity: 1;
}
.otherProBlemItemIcon {
  display: flex;
  align-items: center;
  padding: 3px;
}
.onbad {
  background: url("../../../assets/images/onbad.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  opacity: 1;
}
.ongood {
  background: url("../../../assets/images/ongood.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  opacity: 1;
}
.bad {
  background: url("../../../assets/images/bad.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  opacity: 1;
}
.good {
  background: url("../../../assets/images/good.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  opacity: 1;
}
</style>