logpm_page/src/views/distribution/inventory/CreateOrder.vue

<template>
  <div>
    <basic-container>
      <el-divider style="font-size: 28px">货物托运单</el-divider>

      <el-form :inline="true" :model="query" class="el-fr-d" label-width="100px">
        <!-- 顶部 -->
        <div class="flex-c-sb form_top">
          <div>
            <div>品牌: 欧派 车次号:</div>
            <el-form-item class="mt10" label="运单号: " label-width="80px">
              <div><el-input v-model="query.waybillNo" placeholder="运单号" clearable /></div>
            </el-form-item>
          </div>

          <div class="flex-c-c">
            <div style="margin-right: 10px" class="flex-c-c">
              <el-icon><User /></el-icon>
              <span style="margin-left: 10px">admin</span>
            </div>
            <el-date-picker v-model="query.value1" type="datetime" placeholder="创建时间" />
          </div>
        </div>

        <!-- 第一排 -->
        <div class="table-row">
          <el-form-item label="发站仓:" class="el-times">
            <SelectBox v-model="query.serviceNumber" placeholder="发站仓"> 暂无数据 </SelectBox>
          </el-form-item>

          <el-form-item label="到站:">
            <div class="w100">
              <!-- <el-input v-model="query.serviceNumber" placeholder="请输入服务号"></el-input> -->
              <SelectBox v-model="query.serviceNumber" placeholder="请输入服务号">
                暂无数据
              </SelectBox>
            </div>
          </el-form-item>

          <el-form-item label="目的仓:" class="el-times">
            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="货号:">
            <el-input v-model="query.serviceNumber" disabled placeholder="货号"></el-input>
          </el-form-item>
        </div>

        <!-- 订单自编号 -->
        <div class="table-row">
          <el-form-item label="订单自编号:" class="el-times">
            <el-input
              v-model="query.serviceNumber"
              type="textarea"
              placeholder="订单自编号"
            ></el-input>
            <el-button class="mt10" type="primary" icon="Plus">选取订单</el-button>
          </el-form-item>
        </div>

        <!-- 发货方 && 收货方 -->
        <div class="table-row">
          <div style="margin-right: 10px">
            <div class="flex-c table-row-title">发货方</div>
            <div>
              <el-row>
                <el-form-item label="发货单位:">
                  <SelectBox v-model="query.shipper" placeholder="发货单位"> 暂无数据 </SelectBox>
                </el-form-item>

                <el-form-item label="发货人:">
                  <SelectBox v-model="query.shipperName" placeholder="发货人"> 暂无数据 </SelectBox>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="联系电话:">
                  <SelectBox v-model="query.shipperMobile" placeholder="联系电话">
                    暂无数据
                  </SelectBox>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="发货地址:">
                  <el-input v-model="query.shipperAddress" placeholder="发货地址"></el-input>
                </el-form-item>
              </el-row>
            </div>
          </div>
          <div>
            <div class="flex-c table-row-title">收货方</div>
            <div>
              <el-row>
                <el-form-item label="收货单位:">
                  <SelectBox v-model="query.consignee" placeholder="收货单位"> 暂无数据 </SelectBox>
                </el-form-item>

                <el-form-item label="收货人:">
                  <SelectBox v-model="query.consigneeName" placeholder="收货人">
                    暂无数据
                  </SelectBox>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="联系电话:">
                  <SelectBox v-model="query.consigneeMobile" placeholder="联系电话">
                    暂无数据
                  </SelectBox>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="发货地址:">
                  <el-input v-model="query.consigneeAddress" placeholder="发货地址"></el-input>
                </el-form-item>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 计价方式行 -->
        <div class="table-row table_row_number">
          <div style="width: 55px; flex: none" class="flex-c-c">
            <el-button icon="Plus" type="primary" size="small" circle></el-button>
          </div>
          <div style="width: 230px; flex: none">
            <el-form-item label="计价方式:" label-width="fit-content" class="el-times">
              <el-radio-group v-model="query.serviceNumber" style="display: flex">
                <el-radio :label="3">方</el-radio>
                <el-radio :label="6">件</el-radio>
                <el-radio :label="9">公斤</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <el-form-item label="货物名称:" label-width="fit-content" class="el-times">
            <el-select v-model="query.serviceNumber" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="件数:" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.serviceNumber"
              controls-position="right"
              :precision="0"
              :step="0.1"
            />
          </el-form-item>

          <el-form-item label="重量(kg):" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.serviceNumber"
              controls-position="right"
              :precision="3"
              :step="0.1"
            />
          </el-form-item>

          <el-form-item label="体积(方):" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.serviceNumber"
              controls-position="right"
              :precision="4"
              :step="0.1"
            />
          </el-form-item>

          <el-form-item label="单价:" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.serviceNumber"
              controls-position="right"
              :precision="2"
              :step="0.1"
            />
          </el-form-item>

          <el-form-item label="运费小计:" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.serviceNumber"
              controls-position="right"
              :precision="2"
              :step="0.1"
            />
          </el-form-item>
        </div>

        <!-- 合计行 -->
        <div class="table-row table_row_number table_row_total">
          <div style="width: 55px; flex: none" class="flex-c-c"></div>
          <div style="width: 230px; flex: none">合计</div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

        <!-- 合计运费 && 支付方式 -->
        <div class="table-row">
          <!-- 合计运费 -->
          <div style="margin-right: 10px; width: 60%; flex: none">
            <div style="flex: 1">
              <div class="table-row-title" style="margin-bottom: 10px">合计费用</div>
              <div>
                <el-form label-width="fit-content">
                  <el-row>
                    <el-form-item label="运费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.totalFreight"
                      ></el-input-number>
                    </el-form-item>

                    <el-form-item label="送货费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.deliveryFee"
                      ></el-input-number>
                    </el-form-item>

                    <el-form-item label="提货费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.pickupFee"
                      ></el-input-number>
                    </el-form-item>

                    <el-form-item label="仓库管理费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.warehouseManagementFee"
                      ></el-input-number>
                    </el-form-item>

                    <el-form-item label="仓储费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.storageFee"
                      ></el-input-number>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="装卸费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.handlingFee"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="其它费用:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.otherFee"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="保价费:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.insuranceFee"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="申明价值:">
                      <el-input-number
                        controls-position="right"
                        v-model="query.claimingValue"
                      ></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>

          <!-- 付款方式 -->
          <div>
            <div style="flex: 1">
              <div class="table-row-title" style="margin-bottom: 10px">合计费用</div>
              <div>
                <el-form label-width="fit-content">
                  <el-row>
                    <el-form-item label="支付方式:">
                      <el-select v-model="query.payType" class="m-2" placeholder="Select">
                        <el-option
                          v-for="item in details.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="付款方式:">
                      <el-select v-model="query.payWay" class="m-2" placeholder="Select">
                        <el-option
                          v-for="item in details.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="现付:">
                      <el-input v-model="query.xPay"></el-input>
                    </el-form-item>
                  </el-row>

                  <el-row>
                    <el-form-item label="到付:">
                      <el-input v-model="query.dPay"></el-input>
                    </el-form-item>

                    <el-form-item label="月结:">
                      <el-input v-model="query.yPay"></el-input>
                    </el-form-item>

                    <el-form-item label="回付:">
                      <el-input v-model="query.hPay"></el-input>
                    </el-form-item>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <!-- 计价方式行 -->
        <div class="table-row table_row_number">
          <div>
            <el-form-item label="开单人:" label-width="fit-content" class="el-times">
              <el-input disabled />
            </el-form-item>
          </div>

          <el-form-item label="三方操作费:" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.thirdOperationFee"
              controls-position="right"
              :precision="0"
              :step="0.1"
            />
          </el-form-item>

          <el-form-item label="送货方式:" label-width="fit-content" class="el-times">
            <el-select v-model="query.deliveryWay" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="紧急度:" label-width="fit-content" class="el-times">
            <el-select v-model="query.urgency" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="回单" label-width="fit-content" class="el-times">
            <el-input-number
              v-model="query.receipt"
              controls-position="right"
              :precision="0"
              :step="1"
            />
          </el-form-item>

          <el-form-item label="回单要求:" label-width="fit-content" class="el-times">
            <el-select v-model="query.receipt" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="运输方式:" label-width="fit-content" class="el-times">
            <el-select v-model="query.transportType" class="m-2" placeholder="Select">
              <el-option
                v-for="item in details.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <!-- 订单自编号 -->
        <div class="table-row">
          <el-form-item label="备注:" class="el-times">
            <el-input v-model="query.remark" type="textarea" placeholder="备注"></el-input>
          </el-form-item>

          <div class="flex-c-c">
            <el-button type="primary" icon="Position">提交</el-button>
            <el-button type="primary" icon="Refresh">重置</el-button>
            <el-button type="primary" icon="Close">关闭</el-button>
          </div>
        </div>
      </el-form>
    </basic-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import functions from '@/utils/functions';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { downloadXls } from '@/utils/util';
import { columnList, detailsColumnList } from '@/option/distribution/VehicleStowage';
import { useRouter } from 'vue-router';

// 获取路由实例
const $router = useRouter();

const details = reactive<any>({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  options: [],
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 列表 */
  columnList,
  detailsColumnList,
  /** 列表数据 */
  data: [{}],
  /** 页面loading */
  loadingObj: {
    /** 配载信息loading */
    stowageLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    currentPage: 1,
    pageSize: 30,
    total: 0,
  },
  /** 配载信息分页数据 */
  stowagePage: {
    currentPage: 1,
    pageSize: 30,
    total: 0,
  },
  /** 弹出层显示 */
  popUpShow: {
    /** 装车详情 */
    truckLoadingDetailVisited: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  activeTab: 'tab1',
  activeTabItem: 'tabItem1',
});

const {
  search,
  query,
  shortcuts,
  stockupDate,
  data,
  drawerShow,
  page,
  activeTab,
  activeTabItem,
  loadingObj,
} = toRefs(details);

/** vuex */
const permission = computed(() => mapGetters(['permission', 'tagWel', 'tagList']));
console.log('permission :>> ', permission);

onMounted(() => {
  /*   const timer = setTimeout(() => {
    details.listNode = document.querySelector('.maboxhi');
    details.listNode.style.transition = 'all .5s ease-out';
    console.log('details.listNode :>> ', details.listNode);
    clearTimeout(timer);
  }, 100); */
});

/** 请求页面数据 */
const onLoad = (page: any) => {};

/** 搜索 */
const searchChange = () => {
  onLoad(details.page);
};

/** 清空表单 */
const searchReset = () => {
  details.query = {};
  details.stockupDate = [];
  details.page.currentPage = 1;
  onLoad(details.page);
};

/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
  details.drawerShow = _flag;
};

/** 是否开启搜索区 */
const searchHide = () => {
  function getWinHight() {
    var windowHight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      windowHight =
        document.body.clientHeight < document.documentElement.clientHeight
          ? document.body.clientHeight
          : document.documentElement.clientHeight;
    } else {
    }
    return document.documentElement.clientHeight;
  }
  details.search = !details.search;
  const timer = setTimeout(() => {
    details.listNode.style.height =
      getWinHight() - details.listNode.getBoundingClientRect().top - 70 + 'px';
    clearTimeout(timer);
  }, 10);
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;
  onLoad(details.page);
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
  onLoad(details.page);
};

/** 表格表头输入框搜索 */
const btnsc = () => {};

/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  details.query[row.prop] = index;
  if (!index) delete details.query[row.prop];
  if (row.prop === 'certificateTypeName') {
    details.query['certificateType'] = index;
    if (!index) delete details.query['certificateType'];
  }
  onLoad(details.page);
};

/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
  details.selectionList = list;
};

/** 每页数量改变执行的回调 */
const sizeChange = (pageSize: number) => {
  details.page.pageSize = pageSize;
  onLoad(details.page);
};

/** 页码改变执行的回调 */
const currentChange = () => {};

/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   columnList
 *  */
const setnewcolum = (newarr, headarr, type) => {
  if (type == 1) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'checkList', headarr);
  } else if (type == 2) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'flexList', headarr);
  } else if (type == 3) {
    details.columnList = newarr;
    functions.setStorage(window.location.pathname + 'sortlist', headarr);
  }
};

/** 切换tabber -- 支出费用 */
const getIncurExpenseInfo = () => {};
/** 切换tabber -- 配载信息 */
const getStowageInfo = () => {
  const _node = document.querySelector('.StowageInfo');
  _node.style.height = '400px';
  console.log('_node :>> ', _node);
};
/** 切换tabber -- 中转信息 */
const getTransferInfo = () => {};

/** 详情信息页面tabber切换时执行的回调 */
const handleTabItemClick = tab => {
  console.log('tab :>> ', tab);
  const { name } = tab.props;
  console.log('name :>> ', name);
  switch (name) {
    // 费用支出
    case 'tabItem1':
      getIncurExpenseInfo();
      break;
    // 配载信息
    case 'tabItem2':
      getStowageInfo();
      break;
    // 中转信息
    case 'tabItem3':
      getTransferInfo();
      break;
  }
};
</script>

<style scoped lang="scss">
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  height: 100% !important;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
  border-bottom: 1px solid #777;
}

// 页面字体大小
.avue-crud {
  font-size: 12px !important;
}

.form_top {
  margin-bottom: 10px;
}

.table-row {
  width: 100%;
  display: flex;
  // border: 1px solid #ddd;
  border-bottom: none;

  &:last-child {
    display: block;
    border: 1px solid #777;
    box-sizing: border-box;

    > div {
      width: 100%;
      border: none;
    }
  }

  > div {
    flex: 1;
    padding: 5px;
    border: 1px solid #777;
    display: inline-flex;
    box-sizing: border-box;
  }
}

.table-row-title {
  background: #f5f7fa;
  margin-right: 10px;
  padding: 10px;

  & + div {
    flex: 1;

    :deep(.el-form-item) {
      flex: 1;
      margin-right: 10px;
    }

    :deep(.el-row) {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.table_row_number {
  > div {
    flex-grow: 1;
    justify-content: center;
  }
}

.table_row_total {
  line-height: 32px;
  text-align: center;
  background: #efefef;
}

.flex-c {
  display: flex;
  align-items: center;
}

:deep(.el-select.m-2) {
  width: 100%;
}

:deep(.el-form-item) {
  flex: 1;
  margin: 0;
}

:deep(.el-radio) {
  margin: 0;
}

// 底部
.footer {
  height: 80px;
}

// 提交按钮容器
.submitDataContainer {
  width: 80%;
  position: fixed;
  bottom: 20px;
  z-index: 999;
  text-align: center;
}

.w100 {
  width: 100%;
}
</style>