logpm_page/src/views/distribution/signfor/distributionSignforedt.vue

<template>
  <basic-container>
    <div class="avue-crud">
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="8" :sm="24" >
          <span style="padding-left: 10%" >当前签收单状态>>>>>>>>> {{signfordata.signingStatusAll}}</span>
        </el-col>
      </el-row>
      <el-divider>基本信息</el-divider>
      <el-row :gutter="24" class="rows">
        <el-col :xl="5" :lg="7" :md="8" :sm="24" >
          <span>预约单号：{{signfordata.reservationCode}} </span>
        </el-col>
        <el-col :xl="5" :lg="7" :md="8" :sm="24">
          <span>商场名称：{{signfordata.mallName}} </span>
        </el-col>
        <el-col :xl="5" :lg="7" :md="8" :sm="24">
          <span>预约时间：{{signfordata.reservationDate}} </span>
        </el-col>
        <el-col :xl="3" :lg="7" :md="8" :sm="24">
          <span>服务类型：{{signfordata.deliveryType}}</span>
        </el-col>
      </el-row>
      <el-divider>收货人信息</el-divider>
      <el-row :gutter="24" class="rows">
        <el-col :xl="7" :lg="7" :md="10" :sm="24" >
          <span>收货人：{{signfordata.consignee}} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>手机号码：{{signfordata.deliveryPhone}} </span>
        </el-col>
        <el-col :xl="7" :lg="7" :md="10" :sm="24">
          <span>收货地址：{{signfordata.deliveryAddress}} </span>
        </el-col>
      </el-row>
<!--      <el-divider>服务内容</el-divider>-->
<!--      <div class="topbox">-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>上楼</div>-->
<!--            <div>2178501088045989849</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div>货物件数：</div>-->
<!--            <div>预估费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>超区</div>-->
<!--            <div>超区公里：10KM</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>预估费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>拆样</div>-->
<!--            <div>货物件数：10件</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>预估费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>返货</div>-->
<!--            <div>货物件数：10件</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>预估费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>搬运</div>-->
<!--            <div>人员：张三，李四</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div></div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>返货</div>-->
<!--            <div>货物件数：10件</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>预估费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>到付运费</div>-->
<!--            <div></div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="titlxbx">-->
<!--          <div>-->
<!--            <div>代收货款</div>-->
<!--            <div></div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div></div>-->
<!--            <div>费用：500.00</div>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
      <el-divider>订单信息</el-divider>
      <tablecmt
        :columnList="columnList"
        :tableData="data"
        :loading="loading"
        @inputTxt="inputsc"
        @timeCheck="timesc"
        @btnCheck="btnsc"
        @selectCheck="selectsc"
        @selection="selectionsc"
      >
        <template #default="slotProps">
          <el-button size="small" @click="editsolt(slotProps.scope.row)">查 看 包 条</el-button>
          <el-button size="small" @click="costadd(slotProps.scope.row)">费 用 增 项</el-button>
        </template>
      </tablecmt>
    </div>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove ,getDetailById} from '@/api/distribution/distributionSignfor';

import { mapGetters } from 'vuex';
import { getDictionaryBiz } from '@/api/system/dict';

export default {
  data() {
    return {
      height: 300,
      // 弹框标题
      title: '',
      // 是否展示弹框
      box: false,
      dataForm: {},
      // 是否显示查询
      search: true,
      // 是否显示新增
      isadd: false,
      signfordata:{},
      // 加载中
      loading: true,
      // 查看按钮
      edt:false,
      // 查看pda
      padview:false,
      // 是否为查看模式。。
      view: false,
      // 查询信息
      query: {},
      inputTypeData:[],
      columnList: [
        // {
        //   prop: '',
        //   label: '序号',
        //   type: 0,
        //   values: '',
        //   width: 55,
        //   checkarr: [],
        //   fixed: true,
        // },
        {
          prop: 'orderSelfNumbering',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: true,
          sortable: true,
          // head: true,
        },
        {
          prop: 'waybillNumber',
          label: '运单号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'signinQuantity',
          label: '数量',
          type: 1,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'mallName',
          label: '商城',
          type: 2,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '150',
          checkarr: [],
          fixed:'right',
          sortable: false,
        }
        // 更多列的配置...
      ],
      // 分页信息
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 40
      },
      // 表单数据
      form: {},
      // 选择行
      selectionList: [],
      isLiabilityData: [],
      //状态列表
      stateData: [],

      // 表单配置
      wrapoption: {
        expand: false,
        index: true,
        border: true,
        selection: true,
        column: [



        ]
      },
      // 表单列表
      data: [],
      // 基本信息表单列表
      basicdata: {},
      //
      wrapdata:[],
    };
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    '$route'(to, from) {
      // this.isadd =false;
      // this.query.masterId = null;
      // this.masterId = null;
      if (!!this.$route.query.data) {
        //   //做一些路由变化的响应
        //   //   this.isadd =true;
        //   this.query.masterId = this.$route.query.data;
        //   this.masterId = this.$route.query.data;
        //重新获取数据
        this.onLoad(this.page);
      } else {
      }
    }
  },
  mounted() {
    this.init();
    this.onLoad();
  },
  created() {
    // //查询字典
    // this.queryDictionary();
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    //修改
    rowUpdate() {

    },
    queryDictionary() {
      getDictionaryBiz('yes_no').then(res => {
        this.isLiabilityData = res.data.data;
      });
      getDictionaryBiz('basic_in_type').then(res => {
        this.inputTypeData = res.data.data;
      });

    },
    //返回
    handleViewpda() {

    },
    init() {
      this.height = this.setPx(document.body.clientHeight - 340);
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    costadd(scope) {
      const { row } = scope;
    },
    selectionsc(value) {
      console.log("进来了>>>>>>>>>>>>>",value);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    editsolt(scope) {

    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectsc(index, row) {
      this.query[row.prop] =index
      if (!index){
        delete this.query[row.prop]
      }
      this.onLoad(this.page);
    },
    timesc(index, row) {
      console.log(index, row);
    },
    inputsc(index, row) {
      this.query[row.prop] =index
      if (!index){
        delete this.query[row.prop]
      }
      this.onLoad(this.page);
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.stringValue =jsonString;
          if (!this.form.id) {
            this.form.masterId = this.propertyformdata.id;
            add(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              let str = {
                val: false
              }
              this.$emit("returnproperty", str);
            });
          } else {
            update(this.form).then(() => {
              this.box = false;
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              let str = {
                val: false
              }
              this.$emit("returnproperty", str);
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleAdd() {
      this.title = '新增';
      this.form = {};
      this.box = true;
    },
    handleEdit(row) {
      this.title = '编辑';
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      console.log("查看>>>>>>>>>>",row);
      this.title = '查看';
      this.view = true;
      this.box = true;
      getWrapdetail(row.id).then(res => {
        console.log("查看>>>>>>>",res.data.data);
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    beforeClose(done) {
      done();
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page) {
      //查询详情
      this.loading = true;
      let id = this.$route.query.id;
      getDetail(id).then(res => {
        const data = res.data.data
        this.signfordata = data
        //this.data = res.data.data.reservationList
      });
      this.loading = false;
    }
  }
};
</script>

<style lang="scss">
.btsbx{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  >button{
    width: 120px;
    height: 40px;
  }
}
.maxitembxlist{
  display: flex;
  flex-direction: column;
  // padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
  >.items{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fcfcfc;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e2e0e0;
    border-radius: 2px;
    margin-bottom: 20px;
    &:nth-last-child(1){
      margin-bottom: 0;
    }
    >.contbx{
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-top: 10px;
      >.tabitem{
        display: flex;
        align-items: center;
        >div{
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f3f3f3;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
        }
      }
      >.contentitem{
        display: flex;
        align-items: center;
        >div{
          flex: 1;
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #ffffff;
          border: 1px solid #e2e0e0;
          margin-bottom: -2px;
          margin-right: -2px;
        }
      }
    }
    >.titltophead{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icons{
        font-size: 27px;
        &:nth-of-type(1){
          margin-right: 8px;
        }
      }
    }
    >.editinput{
      display: flex;
      flex-direction: column;
      padding: 20px 0;
      >.inputitem{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 10px;
        &:nth-last-child(1){
          margin-bottom: 0;
        }
        .inpts{
          display: flex;
          align-items: flex-start;

          flex: 1;
          padding-right: 10px;
          >span{
            width: 90px;
          }
          >div:nth-of-type(1){
            flex: 1;
          }
        }
      }
    }
  }
}
.topbox{
  display: flex;
  flex-direction: column;
  >.titlxbx{
    font-size: 16px;
    display: flex;
    align-items: center;
    >div{
      flex: 1;
      display: flex;
      align-items: center;
      >div{
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e0e0;
        margin-bottom: -1px;
        margin-right: -1px;
        word-break: break-all;
        &:nth-of-type(1){
          background-color: #f3f3f3;
        }
      }

    }
  }
}
</style>