item-management-web/src/views/statistical/major/sceneImages.vue

<template>
    <div class="app-container organization-index">
      <div class="title-container">
        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
      </div>
      <div>
        <y-page-list-layout :get-page-list="getPage" :page-list="pageData" :page-para="listQuery">
          <template slot="left">
            <el-date-picker
            style="margin-right: 20px;float: left;"
            v-model="selectDate"
            type="daterange"
            :picker-options="pickerOptions"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="实勘日期(开始)"
            end-placeholder="实勘日期(结束)"
            align="right"
          ></el-date-picker>
          <el-input v-model="listQuery.orderName" placeholder="项目名称" clearable style="width: 200px;margin-right: 20px;float: left;"></el-input>
          <el-input v-model="listQuery.orderId" placeholder="订单号" clearable style="width: 200px;margin-right: 20px;float: left;"></el-input>
          <el-input v-model="listQuery.located" placeholder="坐落" clearable style="width: 200px;margin-right: 20px;float: left;"></el-input>
          <el-select v-model="listQuery.sceneUserId" placeholder="实勘人" clearable filterable style="width: 200px;margin-right: 20px;float: left;"
                            class="filter-item">
                            <el-option v-for="(item, id) in sceneUserIds" :key="id" :label="item.name" :value="item.id" />
                        </el-select>
          <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList()"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置
            </el-button>
          </template>
          <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
            <el-table-column label="项目名称"  align="center"  prop="orderName" >
              <template slot-scope="{row}">
                <span>{{ row.orderName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单号" width="150" align="center"  prop="orderId">
              <template slot-scope="{row}">
                <span>{{ row.orderId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="坐落"  width="250" align="center"  prop="located">
              <template slot-scope="{row}">
                <span>{{ row.located }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实勘照片" width="150"  align="center"  prop="sceneImage">
              <template slot-scope="{row}">
                <img @click="openBigImage(row.sceneImage)" class="image_class" :src="env+row.sceneImage" alt="实勘照片">
              </template>
            </el-table-column>
            <el-table-column label="实勘日期" width="150" align="center"  prop="createTime">
              <template slot-scope="{row}">
                <span>{{ row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="估价对象类型" width="150"  align="center"  prop="targetType">
              <template slot-scope="{row}">
                <span>{{ row.targetType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理"  width="150" align="center"  prop="clinetManager">
              <template slot-scope="{row}">
                <span>{{ row.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实勘人" width="150" align="center"  prop="sceneUsers">
              <template slot-scope="{row}">
                <span>{{ row.sceneUsers }}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人" width="150" align="center"  prop="principal">
              <template slot-scope="{row}">
                <span>{{ row.principal }}</span>
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </div>
      <el-dialog :visible.sync="bigImageDialogVisible" center width="50%" top="5vh">
        <div>
          <img class="image_class" :src="env+bigImageUri" alt="实勘照片">
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import YPageListLayout from '@/components/YPageListLayout'
  import Breadcrumb from '@/components/Breadcrumb'
  
  export default {
    name: 'sceneImages',
    components: {
      Breadcrumb,
      YPageListLayout,
    },
  
    data() {
      return {
        pageData:{
            records:[
                {
                    orderName:"龙泉驿区驿都西路3666号108栋，四川炜岸房地产开发有限公司",
                    orderId:"2025031037",
                    located:"龙泉驿区驿都西路3666号108栋",
                    sceneImage:"/dfs/2025/07/01/fce138fb6ab5b6a7073051cc0bb98caf-20250701172429120.jpg",
                    created:"2025-07-01",
                    targetType:"房地产",
                    clinetManager:"李维",
                    sceneUsers:"文宏",
                    principal:"高山"

                }
            ]
        },
        bigImageDialogVisible:false,
        listQuery:{
            page: 1,
            size: 10,
            current: 1,
            startDate:null,
            endDate:null,
            orderName:null,
            orderId:null,
            located:null,
            sceneUserId:null
        },
        listLoading:false,
        env:null,
        bigImageUri:null,
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              },
            },
          ],
        },
        selectDate:null,
        sceneUserIds:[]
      }
    },
    created() {
        this.env = process.env.VUE_APP_API_SERVER;
        this.getPage();
        this.getAllotDepartmentUser();
    },
    methods: {
        getPage(){
          if (this.selectDate) {
            this.listQuery.startDate = this.selectDate[0] + ' 00:00:00';
            this.listQuery.endDate = this.selectDate[1] + ' 23:59:59';
          }
            this.$api.majorTarget.getSceneImages(this.listQuery).then(res=>{
              if (res.code === 200){
                  this.pageData = res.data;
              }
            })
        },
        openBigImage(uri){
            this.bigImageDialogVisible = true;
            this.bigImageUri = uri;
        },
        searchList() {
          // 重置分页
          this.listQuery.current = 1;
          this.listQuery.size = 10;
          this.getPage();
        },
      resetSearch() {
        // 重置分页
        this.listQuery.current = 1;
        this.listQuery.size = 10;
        this.listQuery.orderId = null;
        this.listQuery.orderName = null;
        this.listQuery.located = null;
        this.listQuery.sceneUserId = null;
        this.listQuery.startDate = null;
        this.listQuery.endDate = null;
        this.selectDate = null;
        this.getPage();
      },
      getAllotDepartmentUser() {
            const businessType = "MAJOR_BUSINESS"
            this.$api.user.allotDepartmentUser(businessType).then(res => {
                if (res.code === 200 && res.data != null) {
                    this.sceneUserIds = res.data;
                }
            })
        }
    },
  
  }
  </script>
  <style lang="scss" scoped>
.image_class{
  width: 100%;
  height: auto;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
  </style>