zdxtLawEnforcementCodeView/src/views/enterprise/complaintList.vue

<template>
  <div class="shop app_content">
      <!-- 导航栏 -->
      <!-- <div class="header_body">
      <header-nav
          :slefBack="true"
          @goBack="goBack"
          :titelText="`投诉信息查询`"
        >
        </header-nav>

          </div>-->
      <van-search
              v-model="searchParam.searchValue"
              show-action
              placeholder="请输入关键字查询"
              @search="onSearch"
      >
          <template #action>
              <div @click="onClickButton">搜索</div>
          </template>
      </van-search>
      <div class="search-button-list">
          <van-button plain hairline :class="null==data.checkNum?'search-button active':'search-button'"
                      @click="searchDateType(null)" round type="primary" size="mini">全部
          </van-button>

          <van-button plain hairline :class="0==data.checkNum?'search-button active':'search-button'"
                      @click="searchDateType(0)" round type="primary" size="mini">受理中
          </van-button>

          <van-button plain hairline :class="1==data.checkNum?'search-button active':'search-button'"
                      @click="searchDateType(1)" round type="primary" size="mini">已受理
          </van-button>
          <!--  <van-button plain hairline class="search-button" @click="searchDateType(1)" round type="primary" size="mini">已处理</van-button>-->
          <!--      <van-button plain hairline class="search-button" @click="mssq()" round type="primary" size="mini">临时按钮</van-button>-->

      </div>
      <div class="search-button-date">
          <span class="date-select" @click="selectDate">{{  data.dateSearch }} <van-icon name="play"/></span>
          <div style="border-color: black;" class="van-hairline--bottom"></div>
          <!-- <van-button class="search-button"  type="primary" size="mini">统计分析</van-button> -->
          <van-popup v-model:show="data.showDatePicker" position="bottom">
              <van-date-picker
                      title="选择日期"
                      v-model="data.currentDate"
                      :min-date="data.minDate"
                      :max-date="data.maxDate"
                      :columns-type="data.columnsType"
                      @confirm="onDateConfirm"
                      @cancel="cancelSelectDate"
              />
          </van-popup>
      </div>

      <!-- 中间 -->
      <div class="shop-center">
          <van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
              <van-list v-model:loading="data.loading" :finished="data.finished" finished-text="没有更多了" @load="onLoad">
                  <div class="goods_box" v-for="(item, index) in data?.dataList" :key="index">
                          <van-swipe-cell class="swipe_cell item-todo">
                              <div class="card_box">
                                  <div class="card_box_span">
                                      <p>投诉时间：{{ item.createTime }} <span class="card_box_action">
                  </span></p>
                                      <span class="state-text" v-if="item.status == 0">受理中</span>
                                      <span class="state-text" v-if="item.status >= 1">已受理</span>
                                      <span class="state-text" v-if="item.status >= 2">已办结</span>
                                  </div>

                                  <div @click="toComplaint(item.id)">
                                      <div class="van-hairline--bottom"></div>
                                      <div class="card_box_span">
                                          <p>{{ item.lawEnforcementItemText }}</p>
                                      </div>

                                      <div class="card_box_span">
                                        <p><span class="card_box_label">检查事项：</span> {{ item.lawEnforcementIncident }}
                                        </p>
                                      </div>
                                      <div class="card_box_span">
                                          <p><span class="card_box_label">投诉内容：</span> {{ item.problemDescription }}
                                          </p>
                                      </div>
                                      <!-- <div class="card_box_span">
                                        <p><span class="card_box_label">执法人员：</span> {{ item.lawEnforcer }}，{{ item.lawEnforcerTwo }}</p>
                                      </div> -->
                                      <!--                      <div class="card_box_span">
                                                              <p><span class="card_box_label">企业名称：</span> {{ item.enterpriseName }}</p>
                                                            </div>-->
                                      <div class="btn-list">
                                          <!--                      <a><van-icon name="warning-o" />投诉</a>-->
<!--                                            <a v-if="item.status == 1" @click.stop="toEvaluate(item.id)"><van-icon name="flower-o"/>评价</a>-->
<!--                                            <a v-else style="color: #808080;" @click.stop="toEvaluate(item.proWoCode)"><van-icon color="#808080" name="flower-o"/>评价</a>-->
                                      </div>

                                  </div>
                              </div>
                          </van-swipe-cell>
                      </div>
              </van-list>
          </van-pull-refresh>
      </div>

      <!-- 底部 -->
      <div class="shop_footer_body">
          <footer-nav></footer-nav>
      </div>
  </div>
</template>

<script setup name="registrationList">
  import {Pagination} from 'vant';
  import {queryRegistrationList, toMssqAppraise, queryEnterpriseComplaintList} from '../../api/enterprise';
  import {queryLinkage, queryLinkageById, queryLinkageDictByValueAndParentId} from "@/api/linkage";
  import {setGoodsNum} from "@/util/util";

  const {useCommon, useShopCard} = $globalStore;

  const router = useRouter();
  let allchecked = ref(false); // 是否全选
  let refreshLoad = ref(false); // 是否加载中
  let value = ref('')
  let totalPrice = ref(0); // 总钱数

  let searchParam = reactive({
      // 分页
      pageNum: 1,
      pageSize: 6,
      //执法事件
      lawEnforcementIncident: "",
      //执法部门
      lawEnforcement: "",
      //搜索框
      searchValue: ref(''),
      //时间类型
      dateType: null,
      //是否投诉
      isComplaint: null,
      //企业统一信用码
      enterpriseNumber: ref(useCommon.enterpriseNumber),
      //时间搜索
      dateSearch: "",
      status: null,
  });

  const data = reactive({
      cartList: [],
      dataList: [],
      dateSearch: ref(),
      showDatePicker: false,
      currentDate: ref(['2024', '01']),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2125, 5, 1),
      columnsType: ['year', 'month'],
      ga_columns: [],
      checkNum: null,
      loading: false,
      finished: false,
      refreshing: false,
      curPage: 1,
  });

  const mssq = () => {
      let params = {
          assessServiceCode: "672407221630025057401",
          // assessObjectName: "气象局",
          assessObjectName: "深圳市卫生健康委员会",
          // assessObjectName: "深圳市司法局",  // 实际使用环境用这个
          assessObjectCode: "672407221630025057401",
          // deptCode: "151615",
          deptCode: "152076",
          // deptCode: "151617",  // 司法局的deptCode
          evaluatorName: "测试",
          evaluatorPapersPhone: "18520089969",
          // backUrl: "http://jdm.szssfj.cn/enterprise",  // 正式环境用这个
          backUrl: "http://192.168.31.196:3301/",
      }
      toMssqAppraise(params, success => {
          window.location.href = success.data;
      });
  }

  // 设置初始值为当前时间
  onMounted(() => {
      // getCard();
      searchParam.enterpriseNumber = useCommon.enterpriseNumber;
      // queryList();
      data.dateSearch = nowDate(new Date());
      // queryLinkageDictByValueAndParentId({"value": "check_item", "parentId": "100"}, success => {
      // 		getLinkageByParentIdToItem(success.id)
      // 	},error=>{});
      if (useCommon.enterpriseNumber == null || useCommon.enterpriseNumber == '') {

      }
  });
  const getLinkageByParentIdToItem = (parentId) => {
      // 查询检查要求字典信息
      queryLinkage({"parentId": parentId}, success => {
          for (var i = 0; i < success.length; i++) {
              data.ga_columns.push({text: success[i].title, value: success[i].id, id: success[i].id})
          }
          // queryList();
      }, error => {
      });
  }
  const queryList = () => {
      searchParam.pageNum = (data.curPage-1)*searchParam.pageSize;
      queryEnterpriseComplaintList(searchParam, success => {
          data.curPage++;
          data.loading = false;   // 查出结果停止加载
          if (success.total <= data.dataList.length) {
              // 查到最后没数据
              data.finished = true;
              return;
          }
          // data.dataList = success.data;
          data.dataList.push(...success.rows);
      }, error => {
      })
  }
  const setLinkageItem = (id, item) => {
      queryLinkageById({"id": id}, success => {
          item.lawEnforcementItem = success.title
      }, error => {
      });
  }
  const onSearch = (val) => {
      queryRegistrationList(
          {
              "searchValue": searchParam.searchText
          }
          , success => {
              console.log(success)
              data.dataList = success.data;
          }, error => {

          })
  };
  const onClickButton = () => {
      data.curPage = 1;
      data.dataList = [];
      onRefresh();
  }

  /**
   * 企业投诉页面
   * @param {*} id
   * @param {*} name
   */
  const toComplaintView = (id, name) => {
      console.log(id, name)
      router.push(
          {
              path: "/enterprise/complaint",
              query: {
                  id: id,
                  lawEnforcementIncident: name,
                  isSelect: false
              }
          });
  }
  /**
   * 查看执法登记详情
   * @param {} id
   * @param {*} name
   */
  const toDetailView = (id) => {
      console.log(id)
      router.push(
          {
              path: "/registrationDetail",
              query: {
                  id: id,
              }
          });
  }
  const toComplaint = (id) => {
      router.push({
          path: "/compaintDetailIndex",
          query: {
              comOrOpi: 2,
              isSelect: false,
              id: id,
          }
      });
  }
  const toEvaluate = (id) => {
      router.push({
          path: "/enterprise/complaintEvaluate",
          query: {
              id: id,
          }
      });
  }
  onActivated(() => {
  });

  onDeactivated(() => {

  });

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

  let resetScroll = ref(0); // 滚动记录
  let isLodding = ref(true); // 是否加载中
  let freshMap = reactive({
      refreshLoad: false, // 是否刷新
      listLoading: false, // 是否加载中
      listFinished: false, // 是否加载完成标识
  });

  //下拉刷新
  const onRefresh = () => {
      // 清空列表数据
      data.dataList = [];
      data.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      data.loading = true;
      onLoad();
  };
  // 触底加载
  const onLoad = () => {
      setTimeout(() => {
          if (data.refreshing) {
              data.refreshing = false;
          }
          queryList();
      }, 1000);
  };


  //获取分类下的商品列表
  const getGoodslist = async (onLoad) => {
      // const res = await useClassify.classifyGoods();
      // if (res?.code === 20000) {
      // 	goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
      // 	freshMap.refreshLoad = false;
      // 	freshMap.listLoading = false;
      // 	freshMap.listFinished = res?.listFinished;
      // 	if (goodsList.length > 50) {
      // 		freshMap.listFinished = true;
      // 	}
      // }
      freshMap.refreshLoad = false;
      freshMap.listLoading = false;
      freshMap.listFinished = true;
      isLodding.value = false;
  };

  const selectDate = () => {
      data.showDatePicker = true;
      console.log(data.showDatePicker)
  }

  const onDateConfirm = (value) => {
      console.log(value);
      value.selectedValues.forEach((item, index) => {
          console.log(item);
      });
      data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1];
      data.showDatePicker = false;
      //搜索数据
      searchParam.dateSearch = value.selectedValues[0] + "-" + value.selectedValues[1];

      data.curPage = 1;
      data.dataList = [];
      onRefresh();
  }
  const nowDate = (time) => {
      var year = time.getFullYear(); // 年
      var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
      var date = time.getDate().toString().padStart(2, '0'); // 日
      var hour = time.getHours().toString().padStart(2, '0'); // 时
      var minute = time.getMinutes().toString().padStart(2, '0'); // 分
      var second = time.getSeconds().toString().padStart(2, '0'); // 秒
      return (
          year + "/" + month
      )
  }


  const searchDateType = (val) => {
      console.log(val)
      searchParam.status = val;
      data.checkNum = val;
      searchParam.isComplaint = null;
      if (val == null) {
          // searchParam.dateSearch = null;
          searchParam.status = null;
      }

      data.curPage = 1;
      data.dataList = [];
      onRefresh();
  }
  const searchComplaint = (val) => {
      searchParam.isComplaint = val;
      searchParam.dateType = null;

      data.curPage = 1;
      data.dataList = [];
      onRefresh();
  }
</script>

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

      .header_body {
          height: 1.33rem;
      }

      .shop-center {
          flex: 1;
          overflow-y: scroll;
          position: relative;

          .goods_box {
              display: flex;
              background-color: #fff;
              margin: 0.27rem;
              border-radius: 0.27rem;

              .swipe_cell {
                  width: 100%;
              }

              .card_box {
                  display: flex;
                  width: 100%;
                  padding: 0.27rem 0;
                  flex-direction: column;

                  .card_body {
                      background-color: #fff;
                      border-radius: 0.27rem;
                      flex: 1;
                  }

                  .card_box_span {
                      display: flex;
                      align-items: center;
                      margin: 2% 0;
                      padding-left: 3%;
                      font-size: 0.35rem;
                      line-height: 1.5;

                      p {
                          margin: 0;
                      }
                  }

                  .card_box_action {
                      position: absolute;
                      right: 4%;
                  }
              }
          }
      }

      .shop_footer_body {
          //height: 101px;
          position: relative;

          .footer-one-btn {
              height: 1.33rem;
              bottom: 1.34rem;
          }
      }
  }

  .search-button-list {
      height: 0.7rem;
      display: flex;
      flex-direction: row;
      padding-left: 0.27rem;
      margin-top: 0.27rem;
      align-items: end;

      .search-button {
          width: 15%;
          height: 100%;
          background: #e3e0e0;
          border-color: #e3e0e0;
          color: #4c4c4c;
          font-size: 0.3rem;
      }

      .search-button.active {
          background-color: #1367fe;
          border-color: #1367fe;
          color: #fff;
      }
  }

  .search-button-date {
      display: flex;
      flex-direction: row;
      align-items: end;
      position: relative;

      .date-select {
          font-size: 0.52rem;
          margin: 3% 0 0 4%;

          i {
              transform: rotate(90deg);
              font-size: 0.4rem;
          }
      }

      .search-button {
          width: 15%;
          height: 80%;
          position: absolute;
          top: 1%;
          right: 1%;
      }

      .search-button.active {
          background-color: #1367fe;
          border-color: #1367fe;
          color: #fff;
      }
  }

  /deep/ .van-hairline--bottom {
      margin: -1% 0 3% 0;
      height: 0;
      background-color: transparent;
      border: 1px;
  }

  /deep/ .card_box_span:first-child {
      color: #c1bfbf;
  }

  /deep/ .card_box_span:nth-child(2) p {
      font-size: 0.40rem;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

  }

  /deep/ .card_box_span:nth-child(3) p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }

  .card_box_label {
      color: rgba(128, 128, 128, 0.65);
      white-space: nowrap;
  }

  .state-text {
      color: #999;
      position: absolute;
      top: 0;
      right: 0;
      margin: 0.4rem 0.25rem 0;
  }

  .goods_box .item-todo {
      background-image: linear-gradient(45deg, #fbeaea, transparent);
      border-left: 0.12rem solid #e50505;
      border-radius: 0.27rem;

      .state-text {
          color: #e50505;
      }
  }

  .goods_box .item-doing {
      background-image: linear-gradient(45deg, #eafbf3, transparent);
      border-left: 0.12rem solid #04a920;
      border-radius: 0.27rem;

      .state-text {
          color: #03a159;
      }
  }

  .goods_box .item-done {
      background-image: none;
      border-left: 0.12rem solid #999;
      border-radius: 0.27rem;

      .state-text {
          color: #999;
      }
  }

  /deep/ .van-search__content {
      height: 0.9rem;
      border: 1px solid #ececec;
      border-radius: 0.15rem 0 0 0.15rem;
  }

  /deep/ .van-search__action {
      margin: 0 3% 0 0;
      width: 10%;
      height: 0.9rem;
      background: #1367fe;
      border: 0.01rem solid #1367fe;
      border-radius: 0 0.15rem 0.15rem 0;
      color: #fff;
      text-align: center;
      line-height: 0.9rem;
  }

  .btn-list {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0.3rem 3% 0;
      width: 94%;
      border-top: 1px solid #f4f5f6;
  }

  .btn-list a {
      margin: 3% 3% 1%;
      font-size: 0.35rem;
      color: #1367fe;
      white-space: nowrap;
  }

  .btn-list a i {
      margin: 0 0.12rem;
      font-size: 0.4rem;
  }


</style>