zdxtLawEnforcementCodeView/src/views/enforce/enforceNoticeDetail-bak.vue

<template>
  <div class="address_edit">
    <div class="warp_body">
      <van-form @failed="onFailed" @submit="submit">
        <van-cell-group v-if="data">
          <div class="qy-name">通知信息</div>
          <van-field
              v-model="data.noticeTitle"
              label="通知标题"
              readonly
          />
          <van-field
              class="mult-line"
              v-model="data.objectType"
              label="通知对象"
              readonly
          />
          <van-field
              class="mult-line"
              v-model="data.bureauDeptNames"
              label="发布部门"
              readonly
          />
          <van-field label="发布内容" readonly/>
          <van-field
              class="complaint-cont"
              v-html="data.noticeContent"
              rows="5"
              autosize
              readonly
              type="textarea"
              show-word-limit
          />

          <div class="file-upload">
            <div class="file-upload-center">
              <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
            </div>
            <div class="zoom">
              <img
                  v-for="(ite, index) in data.images"
                  class="img"
                  :src="ite"
                  alt="预览图片"
                  @click="imagePreview(index)"
                  :key="index"
              />
              <van-image-preview
                  v-model:show="data.show"
                  :images="data.imageList"
                  @change="onChange"
                  ref="imagePre"
              >
                <template v-slot:index>第{{ indexImg + 1 }}页</template>
              </van-image-preview>
            </div>
          </div>
        </van-cell-group>

        <van-divider class="divdsty"/>

      </van-form>
    </div>
  </div>
</template>

<script setup name="register">
import {showSuccessToast, showImagePreview} from "vant";
import {
  queryEnforcementRegistrationById,
  getAttr, queryEnforceSystemNoticeDetail,
} from "@/api/enforce";
import {reactive, ref, nextTick} from "vue";
import {uploadFile} from "@/util/fileUpload";
import {queryLinkageById} from "@/api/linkage";



import {baseUrl} from "@/config/env";
//用户筛选弹窗
// import Popup from './userFilter.vue';

const {useMy} = $globalStore;

const router = useRouter();
//路由参数
const route = useRoute();
const data = reactive({
  showLawEnforcerFlag: false,
  currentPage: 1,
  good: "#7FFFD4",
  bad: "#D3D3D3",
  popupVisible: false,
  popupContent: "",
  popupVisible2: false,
  popupContent2: "",
  imgstr: "",
  lawList: [{text: "", id: ""}],
  lawCer: [{text: "", id: ""}],
  imageList: [],
  show: ref(false),
  show2: ref(false),
  dataList: [],
  evaluateImageList: [],
  regList: [],
  lawList: [],
  arrayLength: 1,
  noticeTitle: "",
  noticeContent: "",
  bureauDeptNames: "",
  objectType: "",
  createTime: "",
  images: "",
});
//保存参数
const submitData = reactive({
  //执法部门
  lawEnforcement: "",
  lawEnforcementId: "",
  //执法人员1
  lawEnforcer: "",
  lawEnforcerId: "",
  //执法人员2
  lawEnforcerTwo: "",
  lawEnforcerIdTwo: "",
  //辅助人员
  subsidiaryer: "",
  subsidiaryerId: "",
  //执法事项
  lawEnforcementItem: "",
  enforce: "",
  //执法依据
  lawEnforcementBasis: "",
  // 检查时间
  enforcementTime: "",
  //执法结果
  reslut: 0,
  //备注
  remark: "",
  //企业名称
  enterpriseName: "",
  //统一信用码
  enterpriseNumber: "",
  //后台保存图片列表
  fileList: [],
  //vant组件上传照片列表
  fileListObj: [],
  /**局级部门 */
  bureauDeptName: "",
  bureauDeptId: "",
  isEvaluate: 0,
  lawFieldText: "",
  checkCategoryText: "",
  uniteCheck: "",
  satisfactionLevel: 3,
  serviceExperience: 0,
  checkEffect: 0,
  proceduralLegality: 0,
  checkEffectiveness: 0,
  otherProblemSwitch: 0,
  otherProblemSwitchBoolean: true,
  problem1: 0,
  problem2: 0,
  problem3: 0,
  problem4: 0,
  problem5: 0,
});

const tapGood = () => {
  data.good = "#7FFFD4";
  data.bad = "#D3D3D3";
  submitData.reslut = 0;
};
const tapBad = () => {
  data.good = "#D3D3D3";
  data.bad = "#7FFFD4";
  submitData.reslut = 1;
};
const indexImg = ref(0);
const indexImg2 = ref(0);
const imagePreview = (newIndex) => {
  var imgstrArr = data.imgstr.split(",");

  nextTick(() => {
    //  console.log(this.$refs.testRef)
    //  this.$refs.imagePre.change(newIndex)
    // const imagePre = ref("imagePre");
    // imagePre.change(newIndex);
  });
  data.show = ref(true);
};
const imagePreview2 = (newIndex) => {
  var imgstrArr = data.imgstr.split(",");

  nextTick(() => {
    //  console.log(this.$refs.testRef)
    //  this.$refs.imagePre.change(newIndex)
    // const imagePre = ref("imagePre");
    // imagePre.change(newIndex);
  });
  data.show2 = ref(true);
};

const setLinkageItem = (id) => {
  queryLinkageById(
      {id: id},
      (success) => {
        submitData.lawEnforcementItem = success.title;
      },
      (error) => {
      }
  );
};
const setLinkageGA = (id) => {
  queryLinkageById(
      {id: id},
      (success) => {
        submitData.lawEnforcementBasis = success.title;
      },
      (error) => {
      }
  );
};

const setAttr = () => {
  // 查询检查要求字典信息
  getAttr(
      route?.query?.id,
      (success) => {
        if (success.data.filePreview != null) {
          if (success.data.filePreview.fileList != null) {
            for (var i = 0; i < success.data.filePreview.fileList.length; i++) {
              data.imgstr += success.data.filePreview.fileList[i] + ",";
            }
            data.imgstr = data.imgstr.substring(0, data.imgstr.length - 1);
          }
          data.imageList = success.data.filePreview.fileList;
          success.data.filePreview.fileList;
          for (const key in success.data.filePreview.fileList) {
            console.log(success.data.filePreview.fileList[key]);
            data.imageList[key] = success.data.filePreview.fileList[key];
          }
        }
      },
      (error) => {
      }
  );
};
const setEvaluateFile = (id) => {
  // 查询检查要求字典信息
  getAttr(
      id,
      (success) => {
        if (success.data.filePreview != null) {
          if (success.data.filePreview.fileList != null) {
            for (var i = 0; i < success.data.filePreview.fileList.length; i++) {
              data.imgstr += success.data.filePreview.fileList[i] + ",";
            }
            data.imgstr = data.imgstr.substring(0, data.imgstr.length - 1);
          }
          data.evaluateImageList = success.data.filePreview.fileList;
          success.data.filePreview.fileList;
          for (const key in success.data.filePreview.fileList) {
            console.log(success.data.filePreview.fileList[key]);
            data.evaluateImageList[key] =
                baseUrl + success.data.filePreview.fileList[key];
          }
        }
      },
      (error) => {
      }
  );
};

const onChange = (newIndex) => {
  indexImg.value = newIndex;
};
const onChange2 = (newIndex) => {
  indexImg2.value = newIndex;
};
//3a0096181c184e5aa56f70923680856d$6e74ceda1463c165fd43eeeadce4f7cd
//初始化参数，获取扫码的企业统一信用编码
onMounted(() => {

  queryRegUniteById();

});


const showArrays = (item) => {
  if (item.downShow) {
    item.downShow = false;
    data.arrayLength = data.regList.length;
  } else {
    data.regList[0].downShow = true;
    data.arrayLength = 1;
  }
};

const queryRegUniteById = () => {
  queryEnforceSystemNoticeDetail(
      route?.query?.id,
      (success) => {
        convertReg(success.data)

      },
      (error) => {
      }
  );
};

const convertReg = (regs) => {

  data.id = regs.noticeId;
  data.noticeTitle = regs.noticeTitle;
  data.noticeContent = regs.noticeContent;
  data.bureauDeptNames = regs.bureauDeptNames;
  data.createTime = regs.createTime;
  if (regs.objectType != null) {
    if (regs.objectType == 1) {
      data.objectType = "监督端";
    } else if (regs.objectType == 2) {
      data.objectType = "执法端";
    } else if (regs.objectType == 3) {
      data.objectType = "企业端";
    } else {
      data.objectType = "全部";
    }
  }

  // 附件
  getAttr(
      data.id,
      (success) => {
        if (success.data.filePreview != null) {
          let images = [];
          for (const key in success.data.filePreview.fileList) {
            images[key] = baseUrl + success.data.filePreview.fileList[key];
            data.imageList.push(
                baseUrl + success.data.filePreview.fileList[key]
            );
          }
          data.images = images;
        }

        console.log(data.imageList);
      },
      (error) => {
      }
  );


}


// 返回
const goBack = () => {
  router.go(-1);
};

const uploadFiles = (file) => {
  if(Array.isArray(file)){
    file.forEach((item,index)=>{
      uploadFile(item, (res) => {
        submitData.fileList.push(res.url)
      });
    });
  }else{
    uploadFile(file, (res) => {
      submitData.fileList.push(res.url)
    });
  }
};

const deleteFile = (file, index) => {
  console.log(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 删除
    }
  });
  console.log(submitData.fileList);
  return true;
};

const submit = () => {
  addEnforcementRegistration(
      submitData,
      (success) => {
        //跳转首页
        if (success.success) {
          showSuccessToast("登记成功");
          router.push({path: "/home"});
        }
      },
      (error) => {
        console.log("登记失败");
      }
  );
};

const showPopup = () => {
  data.popupVisible = true;
};
const showPopup2 = () => {
  data.popupVisible2 = true;
};
const closePopup = () => {
  data.popupVisible = false;
  data.popupVisible2 = false;
};
const reciveData = (item) => {
  submitData.lawEnforcerTwo = item.userName;
  submitData.lawEnforcerIdTwo = item.userId;
};
const reciveData2 = (item) => {
  submitData.subsidiaryer = item.userName;
  submitData.subsidiaryerId = item.userId;
};
</script>
<script>
export default {
  data() {
    return {
      is_show: false,
    };
  },
  computed: {
    words() {
      if (this.is_show === false) return "展开";
      else if (this.is_show === true) return "收起";
      else if (this.is_show === "") return null;
      else return null;
    },
  },
};
</script>

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

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

.qy-name {
  margin: 0 0.27rem;
  font-size: 0.42rem;
  height: 1.2rem;
  background-color: white;
  font-weight: 600;
  line-height: 3.5;
}

.zf-name {
  padding: 0 0.27rem;
  font-size: 0.42rem;
  height: 1.2rem;
  background-color: white;
  font-weight: 600;
  line-height: 3.5;
}

/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast {
  background: var(--van-toast-background) !important;
  box-sizing: content-box !important;
  /* 下面3条css,影响不大 */
  transition: all var(--van-duration-fast) !important;
  width: var(--van-toast-default-width) !important;
  max-width: var(--van-toast-max-width) !important;
}

.van-popup.van-toast .van-toast__icon {
  font-size: var(--van-toast-icon-size) !important;
}

.divdsty {
  margin: auto;
  width: 100%;
  height: 0.25rem;
  background-color: #f4f4f4;
  border: 0;
}

.file-upload {
  position: relative;
  min-height: 3rem;
  // max-height: 6.5rem;
  padding: 1rem 0.27rem 0.27rem 0.43rem;
  box-sizing: border-box;
  border-top: 5px solid #f4f4f4;
}

.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: rgb(221, 229, 227);
  }
}

.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;
    margin: 0 0.6rem 0.21rem 0;
    font-size: 0.35rem;
  }
}

/deep/ .van-picker-column__item--selected {
  background: #e5eef9;
  color: #000;
  font-weight: 600;
}

/deep/ .van-field .van-field__control {
  color: #666;
}

/deep/ .van-field__label--required:before {
  margin-left: -0.2rem;
}

/deep/ .mult-line .van-field__label {
  padding-right: 0.5rem;
  line-height: 1.25;
}

.complaint-cont {
  margin: -1px 0.43rem 2%;
  padding: 0 0 0.5rem;
  width: calc(100% - 0.86rem);
  border-radius: 0.15rem;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 0.37rem;
}

/deep/ .complaint-cont textarea.van-field__control {
  padding: 0.1rem 0.2rem;
  background: #f5f6f7;
  border-radius: 0.15rem;
  line-height: 1.25;
}

.fold-div {
  position: relative;
  display: flex;
  padding: 0 0.43rem 0.13rem;
  width: 100%;
  box-sizing: border-box;
  color: rgb(50, 50, 51);
  font-size: 0.37rem;
}

.fold-div::after {
  position: absolute;
  left: 0.43rem;
  bottom: 0;
  width: calc(100% - 0.86rem);
  border-bottom: 1px solid #f5f6f7;
  content: "";
}

.fold-div label {
  width: 2.6rem;
  padding: 0.27rem 0px 0.27rem 0;
}

.fold-div .van-text-ellipsis {
  padding: 0.27rem 0;
  width: calc(100% - 2.6rem);
  color: #666;
}

.one-label {
  position: relative;
  padding-bottom: 0.25rem;
}

.one-label::after {
  position: absolute;
  left: 0.43rem;
  bottom: 0;
  width: calc(100% - 0.86rem);
  border-bottom: 1px solid #ebedf0;
  content: "";
  transform: scaleY(0.5);
}

.one-label .van-cell {
  padding-bottom: 0;
}

.one-label .no-label {
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: 0;
}

.joint-mark {
  position: relative;
  top: -0.05rem;
  display: inline-block;
  margin: 0 0.25rem;
  width: 0.55rem;
  height: 0.55rem;
  background: #2d94fa;
  border-radius: 50%;
  color: #fff;
  font-size: 0.35rem;
  line-height: 1.65;
  text-align: center;
}

/***折叠**/

.look_all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0.75rem;
  font-size: 0.3rem;
  color: #666;
  cursor: pointer;
  user-select: none;
  border-radius: 0.05rem;
  background-color: #fff;
}

.look_all i {
  margin: 0 0.2rem;
  padding: 0.1rem 0.3rem 0;
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.4rem;
  height: 0.5rem;
  /*background: linear-gradient(to bottom, rgba(0, 0, 0, .1), transparent);*/
  border-radius: 0.2rem 0.2rem 0 0;
}

.new_detail {
  padding-top: 0.3rem;
  height: 100%;
  transition: height 2s linear;
}

.work_detail {
  padding-top: 0.3rem;
  height: 0.2rem;
  overflow: hidden;
}

.new_up {
  position: absolute;
  bottom: 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;
          font-size: 0.4rem;
        }*/

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

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

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

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

.van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
  border: 0;
}

.evaluateText {
  font-size: 0.42rem;
}

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

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

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

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

.otherProBlem {
  margin: 3% 0;
  width: 100%;
  background: #fff;
  border-radius: 0.2rem;
  box-sizing: border-box;
}

// .otherProBlem span{
//   font-size: 0.37rem;
// }
.otherProBlemItem {
  padding: 7px;
  line-height: 30px;
}

.otherProBlemText {
  font-size: 16px;
  margin-right: 10px;
}

.otherProBlemItemIconList {
  padding-right: 15px;
  display: flex;
  float: right;
}

.otherProBlemItemIcon {
  display: flex;
  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>