ShipOutHeaderList.vue 4.71 KB
<template>
  <a-card :bordered="false">
    <!-- 查询区域-END -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="收件人">
              <a-input placeholder="请输入收件人" v-model="queryParam.recipient"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="手机号">
              <a-input placeholder="请输入手机号" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="queryReceipt" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->


    <!-- table区域-begin -->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="标准列表">
      <a-list size="large" :pagination="false">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
<!--            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>-->
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>

          <div slot="actions" slot-scope="text, record">
            <a @click="toFinsh(text)">点击收货</a>
          </div>

          <div class="list-content">
            <div class="list-content-item">
              <span>快递单号</span>
              <p>{{ item.code }}</p>
            </div>

            <div class="list-content-item">
              <span>收件人</span>
              <p>{{ item.owner }}</p>
            </div>
            <div class="list-content-item">
              <span>发货时间</span>
              <p>{{ item.startAt }}</p>
            </div>


<!--            <div class="list-content-item">-->
<!--              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />-->
<!--            </div>-->
          </div>
        </a-list-item>
      </a-list>

    </a-card>

    <ship-header-modal ref="modalForm" @ok="modalFormOk"></ship-header-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HeadInfo from '@/components/tools/HeadInfo'
  import {getAction} from '@/api/manage'
  export default {
    name: 'ShipHeaderList',
    mixins:[JeecgListMixin],
    components: {HeadInfo
    },
    data () {
      return {
        description: '发货到现场头表管理页面',
        expandedRowKeys: [],
        url: {
          list: "/ship/shipHeader/list",
          delete: "1",
          finish: "/ship/shipHeader/finish",
          deleteBatch: "/ship/shipHeader/deleteBatch",
          exportXlsUrl: "/ship/shipHeader/exportXls",
          importExcelUrl: "ship/shipHeader/importExcel",
        },
        data:[],
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {

    },
    computed: {

    },
    methods: {
      toFinsh(record){

        alert(record)

      },
      initDictConfig(){
      },
      queryReceipt(){
        let params = {
          'recipient': this.queryParam.recipient,
          'phone': this.queryParam.phone
        }
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.data=[];
            var json={};
            for (let i in res.result.records) {
              json.title = res.result.records[i].workno;
              //json.avatar = res.result.records[i].name;
              json.owner = res.result.records[i].recipient;
              json.startAt = res.result.records[i].arrivalTime;
              json.code = res.result.records[i].code;
              this.data.push(json);
            }

          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
</style>