添加签收查询

wjli

2024-04-09 542dcd62fa061525a00339011ff24246f03b820e

添加签收查询

 src/api/open.js

@@ -293,3 +293,6 @@
    export const getNewSignList = (pageNum, pageSize, carName, sendDateStart, sendDateEnd,line,sendDate,userName,batch) => {
    return getRequest(`/signCount/selectBySignNew?pageSize=${pageSize}&pageNum=${pageNum}&carName=${carName}&sendDateStart=${sendDateStart}&sendDateEnd=${sendDateEnd}&line=${line}&sendDate=${sendDate}&userName=${userName}&batch=${batch}`)
}
export const getByPageImgs=(params)=>{
    return getRequest(`/orderTask2/getByPageImgs`, params)
}

 src/views/your/order-manage/orderEvaluateManage.vue

@@ -19,6 +19,7 @@
          <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
        </Select>
        <Button @click="init2" icon="md-search" style="margin-left: 20px">查询</Button>
        <Button @click="init3" icon="md-search" style="margin-left: 20px">签收查询</Button>
      </Row>
      <Table
          :loading="loading"
@@ -237,6 +238,9 @@
    init2() {
      this.getDataList2();
    },
    init3() {
      this.$router.push('/your/sign-compar/index');
    },
    time1(e) {
      this.searchForm.sendDate = e;
      this.searchForm2.sendDate = e;

 src/views/your/sign-compar/index.less

New file
@@ -0,0 +1,13 @@
.permModal {
    .ivu-modal-body {
        max-height: 560px;
        overflow: auto;
    }
}

.depModal {
    .ivu-modal-body {
        max-height: 500px;
        overflow: auto;
    }
}

 src/views/your/sign-compar/index.vue

New file
@@ -0,0 +1,332 @@
<style lang="less">
@import "@/styles/table-common.less";
@import "@/styles/drawer-common.less";
@import "src/views/your/sign-compar/index.less";
</style>
<template>
  <div class="search">
    <Card>
      <Row class="operation">
        <Date-picker clearable @on-change="time1" format="yyyy-MM-dd" type="date" placement="bottom-end"
                     placeholder="请选择发送开始日期(必选)" style="width: 240px;margin-left: 20px">
        </Date-picker>
        <Date-picker clearable @on-change="time2" format="yyyy-MM-dd" type="date" placement="bottom-end"
                     placeholder="请选择发送结束日期(必选)" style="width: 240px;margin-left: 20px">
        </Date-picker>
        <Input v-model="searchForm2.userName" suffix="ios-search"
               placeholder="请输入配送员名字" clearable style="width: 250px;margin-left: 20px"/>
               <Input v-model="searchForm2.carNo" suffix="ios-search"
               placeholder="请输入车牌号" clearable style="width: 250px;margin-left: 20px"/>
        <Input v-model="searchForm2.customerName" suffix="ios-search"
               placeholder="请输入店铺名称" clearable style="width: 250px;margin-left: 20px"/>
        
        <Button @click="init2" icon="md-search" style="margin-left: 20px">查询</Button>
      </Row>
      <Modal
      :title="modalTitle"
      v-model="roleModalVisible"
      :mask-closable="false"
      draggable 
      scrollable
      :width="1200"
    >
    <div style="display:flex;justify-content: space-between;">
      <div style="border:1px solid #000;">
        <img :src="firstimg"
                alt="暂无图片"
                mode="contain" style="width: 400px;"/>
      </div>          
      <div style="border:1px solid #000;">
        <img :src="secondimg"
                alt="暂无图片"
                mode="contain" style="width: 400px;"/>
      </div>       
    </div>
     
      <template #footer>
        <div></div>
      </template>
    </Modal>
      <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
      >
        <template #img="{ row, index }">
          <div v-for="(fit,index) in getImg(row.img)" :key="index">
            <img
                :src="fit"
                alt="暂无图片"
                style="width: 100px;height: 100px"
                @click="handleImageClick"/>
          </div>
        </template>
        <template #action="{ row, index }">
          <div >
            <Button @click="handleEdit(row, index)">查看</Button>
          </div>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
            :current="searchForm2.pageNum"
            :total="total"
            :page-size="searchForm2.pageSize"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- 编辑 -->
  </div>
</template>

<script>
import {
  getByPageImgs,
} from "@/api/open";


export default {
  name: "car-manage",
  data() {
    return {
      previewModal: false,
      maxHeight: 510,
      openTip: true,
      openLevel: "0",
      loading: false,
      modalTitle: "",
      modalVisible: false,
      roleModalVisible:false,
      firstimg:"",
      secondimg:"",
      searchForm2: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面大小
        customerName: '',
        userName:"",       
        carNo:"冀BD27580",        
        sendDateStart:"",
        sendDateEnd:"",
      },
      submitLoading: false,
      selectList: [],
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "区域名称",
          key: "areaName",
          width: 100,
        },
        {
          title: "分段名称",
          key: "areaSectionName",
          width: 100,
        },
        {
          title: "车牌号",
          key: "carNo",
          width: 100,
        },
        {
          title: "送货人",
          key: "userName",
          width: 100,
        },
        {
          title: "客户名称",
          key: "customerName",
          width: 100,
        },
        {
          title: "收货人姓名",
          key: "customerReceiveName",
          width: 100,
        },
        {
          title: "收货时间",
          key: "receiveTime",
          render: (h, params) => {
            let data=params.row.receiveTime
            return h('span', data.substring(0,19))
          }
        },
        {
          title: '接收人原图',
          align: "center",
          width: 200,
          slot: "img",
          render: (h, params) => {
          
            return h('div', {
              attrs: {
                style: 'width: 100px;'
              }
            }, [
              h('img', {
                attrs: {
                  src: params.row.receiveImg || null,
                  style: 'width: 100px;'
                },
                props: {
                  type: 'primary',
                  size: 'large'
                }
              })
            ])
          }
        },
        {
          title: '货物图,接收人图',
          align: "center",
          width: 250,
          slot: "img",
          render: (h, params) => {
            let data=params.row.imgs.split(",")
            let datas=[]
            for(let i=0;i<data.length;i++){
              datas.push(h('div', {
              attrs: {
                style: 'float:left'
              }
            }, [
              h('img', {
                attrs: {
                  src: data[i] || null,
                  style: 'width: 100px;'
                },
                props: {
                  type: 'primary',
                  size: 'large'
                }
              })
            ]))
            }
            return datas
          }
        },
        {
          title: "发货日期",
          key: "sendDate",
          render: (h, params) => {
            let data=params.row.sendDate
            return h('span', data.substring(0,10))
          }
        },
        {
          title: "订单日期",
          key: "orderDate",
          render: (h, params) => {
            let data=params.row.orderDate
            return h('span', data.substring(0,10))
          }
        },
        {
            title: '操作',
            slot: 'action'
          }
      ],
      data: [],
      total: 0,
    };
  },
  methods: {
    handleImageClick(e) {
      console.log(e.target.src);
    },
    getImg(html) {
      let newHtml = [];
      if (html.indexOf('http') === -1) {
        if (typeof html == 'string' && html.indexOf(',') !== -1) {
          newHtml = html.split(',').slice(0, 2);
          return newHtml;
        }
        newHtml.push(html);
        return newHtml;
      } else {
        if (typeof html == 'string' && html.indexOf(',') !== -1) {
          newHtml = html.split(',').slice(0, 2).map(v => '/xboot' + v.split('/xboot')[1])
          return newHtml;
        }
        let result = '/xboot' + html.split('/xboot')[1]
        newHtml.push(result);
        return newHtml;
      }
    },

    init() {
    },
    init2() {
      
      this.getDataList2();
    },
    time1(e) {
      this.searchForm2.sendDateStart = e;
    },
    time2(e){
      this.searchForm2.sendDateEnd=e
    },
    changePage(v) {
      this.searchForm2.pageNum = v;
      this.getDataList2();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm2.pageSize = v;
      this.getDataList2();
    },
    getDataList2() {
      this.loading = true;
      console.log(this.searchForm2);
      getByPageImgs(this.searchForm2).then((res) => {
        this.loading = false;
        console.log(res);
        if (res.success) {
          this.data = res.result.records;
          
          this.total = res.result.total;
        }
      });
    },
    handleEdit(data,index){
      console.log(data,index)
      this.modalTitle = "查看图片";
      this.roleModalVisible = true;
      this.firstimg=data.receiveImg
      this.secondimg=data.imgs.split(",")[1]
    },
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "电子签收单";
      this.$refs.carForm.resetFields();
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let roleInfo = JSON.parse(str);
      this.carForm = roleInfo;
      this.modalVisible = true;
    },
  },
  mounted() {
    this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px";
    this.init();
  },
};
</script>