soc_app/src/views/menu/LZRegister/edit.vue

<template>
  <div class="lz-edit">
    <nav-bar></nav-bar>
    <div class="page-container">
      <div class="card" v-if="taskInfo">
        <van-panel :title="taskInfo.title"  :status="getDicts(taskInfo.status,'resumption_status')">
          <van-cell title="日期时间" :value="taskInfo.planstarttime+'~'+taskInfo.planendtime" />
          <van-collapse :border="false" v-model="activeNames">
            <van-collapse-item title="履职内容" :name="1">
              <van-cell title="检查内容：" value="1" />
              <van-cell title="NFC："  >
                <template #extra>
                  <span >已扫{{1}}</span>
                  <span >未扫{{2}}</span>
                </template>
              </van-cell>
              <van-cell title="检查区域：">
                <template #extra>
                  <span >已查{{1}}</span>
                  <span >未查{{2}}</span>
                </template>
              </van-cell>
            </van-collapse-item>
          </van-collapse>
        </van-panel>
      </div>
      <div class="card">
        <van-panel title="巡检区域" v-if="areaList">
          <div style="padding: 10px;">
            <van-row >
              <van-col span="12"  v-for="(v,i) in areaList" :key="v.areaid">
                <div class="check-area" @click="clickArea(v,i)">
                  {{v.areaname}}
                  <van-icon v-if="v.status" name="success" color="primary"/>
                  <van-icon v-else name="fail" color="red"/>
                </div>
              </van-col>
            </van-row>
            <van-cell title="检查内容：" value="内容" />
            <van-cell :value="NFCNum" is-link>
              <template #title>
                <span class="custom-title">NFC:</span>
              </template>

<!--              <template #right-icon>-->
<!--                <van-icon name="search" class="search-icon" />-->
<!--              </template>-->

            </van-cell>
          </div>
        </van-panel>
      </div>

      <div class="card" v-for="v in checkList" :key="v.itemid">
        <van-panel :title="v.itemname">
          <van-collapse v-model="activeNames">
            <van-collapse-item v-for="(item,index) in v.checkitemlist" :title="item.itemname" :name="index" :key="item.itemid">
              <van-cell :border="false" title="入侵报警撤防时间：">
                <template #right-icon>
                  <van-switch
                    v-model="checked"
                    inactive-color="#4fc08d"
                    active-color="orange"
                    size="20" />
                </template>
              </van-cell>
            </van-collapse-item>
          </van-collapse>
        </van-panel>
      </div>


<!--      <div class="card" v-if="selectArea">-->
<!--        <van-collapse v-model="activeNames">-->
<!--          <van-collapse-item title="布撤防检查" name="1">-->
<!--            <van-cell :border="false" title="入侵报警撤防时间：">-->
<!--              <template #right-icon>-->
<!--                <van-switch-->
<!--                  v-model="checked"-->
<!--                  inactive-color="#4fc08d"-->
<!--                  active-color="orange"-->
<!--                  size="20" />-->
<!--              </template>-->
<!--            </van-cell>-->
<!--            <van-cell-group v-show="checked">-->
<!--              <date-cell title="现金区"  v-model="date2"/>-->
<!--              <date-cell title="客户区" date-type="date" v-model="date1"/>-->
<!--              <date-cell title="整改期限" dateType="date" />-->
<!--              <select-cell title="测试" v-model="sss" :dict="'sys_business_type'" is-link/>-->
<!--            </van-cell-group>-->
<!--          </van-collapse-item>-->
<!--          <van-collapse-item title="技防设备检查" name="2">-->
<!--            <van-cell title="报警及通信设备状态是否良好：">-->
<!--              <template #right-icon>-->
<!--                <van-switch-->
<!--                  v-model="checked"-->
<!--                  active-color="#4fc08d"-->
<!--                  inactive-color="orange"-->
<!--                  size="20" />-->
<!--              </template>-->
<!--            </van-cell>-->
<!--            <van-field-->
<!--              v-model="info"-->
<!--              rows="1"-->
<!--              autosize-->
<!--              label="情况描述："-->
<!--              type="textarea"-->
<!--              placeholder="请输入"-->
<!--            />-->
<!--            <div class="upload-box">-->
<!--              <van-uploader v-model="fileList" multiple />-->
<!--            </div>-->
<!--            <van-cell title="整改期限" is-link/>-->
<!--          </van-collapse-item>-->
<!--          <van-collapse-item title="技防设备检查" name="2">-->
<!--            <van-cell title="报警及通信设备状态是否良好：">-->
<!--              <template #right-icon>-->
<!--                <van-switch-->
<!--                  v-model="checked"-->
<!--                  active-color="#4fc08d"-->
<!--                  inactive-color="orange"-->
<!--                  size="20" />-->
<!--              </template>-->
<!--            </van-cell>-->
<!--            <van-field-->
<!--              v-model="info"-->
<!--              rows="1"-->
<!--              autosize-->
<!--              label="情况描述："-->
<!--              type="textarea"-->
<!--              placeholder="请输入"-->
<!--            />-->
<!--            <div class="upload-box">-->
<!--              <van-uploader v-model="fileList" multiple />-->
<!--            </div>-->
<!--            <van-cell title="整改期限" is-link/>-->
<!--          </van-collapse-item>-->
<!--        </van-collapse>-->
<!--      </div >-->

      <p class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
      <div class=""></div>
    </div>

  </div>
</template>

<script>
import SelectCell from '@/components/selectCell';
import DateCell from '@/components/dateCell';
import NavBar from '@/components/NavBar';
import {taskDetails} from "@/views/menu/LZRegister/api";
export default {
  components:{SelectCell,NavBar,DateCell},
  data(){
    return {
      activeNames: ['1'],
      //基本信息
      taskInfo:[],
      //区域列表
      areaList:[],
      //
      fileList:[],
      //字典
      dicts: ['resumption_status'],
      //选中的区域
      selectArea:[],
      //区域下nfc列表
      NFCList:[],
      //区域下检查内容列表
      checkList:[],
      //检查内容具体项列表
      checkItemList:[],
      //nfc扫描数量
      NFCNum:0,
    }
  },
  created() {
    this.getData();
  },
  watch:{
    NFCList(){
      if(!this.NFCList) return;
      let arr = this.NFCList.filter(item=>{
        return item.status == 1;
      })
      this.NFCNum = arr.length;
    },
  },
  methods:{
    getData() {
      let data = {
        dateTime:new Date(),
        taskId:this.$route.query.id,
      }
      taskDetails(data).then(res=>{
        this.taskInfo = res.data.taskObj;
        this.taskInfo.nfcScaning = res.data.nfcScaning;
        this.areaList = res.data.taskarealist;
        this.activeArea(this.areaList[0],0);
        console.log(res)
      })
    },
    clickArea(area,index){
      this.activeArea(area,index);
    },
    activeArea(area,index){
      this.$nextTick(()=>{
        document.getElementsByClassName('check-area')[index].classList.add('active');
      })
      this.selectArea = area;
      this.checkList = area.checklist;
      this.NFCList = area.nfclist;
    },
    openTime(){

    },
  }
}
</script>

<style lang="scss" scoped>
  .lz-edit{
    height: 100%;
    overflow: hidden;
  }
  .page-container{
    overflow: auto;
    padding: 20px;
  }
  .card{
    margin-bottom: 20px;
    box-shadow: 0 10px 10px #eaeaea;
  }
  .check-area{
    background-color: #f1f1f1;
    margin: 10px;
    padding:10px;
    color:#aaa;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .custom-title {
    align-self: center;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 26px;
    font-weight: 600;
    line-height: inherit;
    color: orange;
  }
  .upload-box{
    margin: 30px;
  }
  .warning-msg{
    color: orange;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
  .active{
    color: #fff;
    background-color: #1989fa;
  }
</style>