You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
8.0 KiB
307 lines
8.0 KiB
<template> |
|
<basic-container> |
|
<div class="avue-crud"> |
|
<div> |
|
<el-row v-if="!search" class="el_row_top"> |
|
<!-- 查询模块 --> |
|
<el-form :inline="true" :model="query" class="fr-fm el_from_top"> |
|
<div class="fr-fo"> |
|
<!-- <el-form-item label="类型:">--> |
|
<!-- <el-select v-model="searchType" placeholder="请选择搜索类型" @change="changetypesof">--> |
|
<!-- <el-option--> |
|
<!-- v-for="item in searchTypeDate"--> |
|
<!-- :key="item.value"--> |
|
<!-- :label="item.label"--> |
|
<!-- :value="item.value">--> |
|
<!-- </el-option>--> |
|
<!-- </el-select>--> |
|
<!-- </el-form-item>--> |
|
<el-form-item :label="title + ':'"> |
|
<el-input v-model="query.packageCode" :placeholder="'请输入' + title"></el-input> |
|
</el-form-item> |
|
<el-form-item :label="title + ':'" v-show="show"> |
|
<el-input v-model="query.packageCode" :placeholder="'请输入' + title"></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
|
|
</el-form-item> |
|
</div> |
|
<!-- 查询按钮 --> |
|
<el-form-item class="el-btn"> |
|
<el-button type="primary" icon="el-icon-search" @click="searchChange" |
|
>搜 索</el-button |
|
> |
|
<!-- <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button> --> |
|
</el-form-item> |
|
</el-form> |
|
</el-row> |
|
<el-row> |
|
<div class="avue-crud__header"> |
|
<!-- 头部左侧按钮模块 --> |
|
<!-- <div class="avue-crud__left">--> |
|
<!-- <el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain--> |
|
<!-- >导出--> |
|
<!-- </el-button>--> |
|
<!-- <!– v-loading.fullscreen.lock="fullscreenLoading"–>--> |
|
<!-- <el-button type="danger" icon="el-icon-picture" @click="handlePictureInfo" plain--> |
|
<!-- >导出图片--> |
|
<!-- </el-button>--> |
|
<!-- </div>--> |
|
<!-- 头部右侧按钮模块 --> |
|
<div></div> |
|
<div class="avue-crud__right"> |
|
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button> |
|
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button> |
|
<el-button icon="el-icon-search" @click="searchHide" circle></el-button> |
|
</div> |
|
</div> |
|
</el-row> |
|
</div> |
|
<el-row class="el_list"> |
|
<!-- 列表模块 --> |
|
<tablecmt |
|
:columnList="columnList" |
|
:tableData="details.data" |
|
:loading="loadingObj.list" |
|
@inputTxt="inputsc" |
|
@timeCheck="timesc" |
|
@btnCheck="btnsc" |
|
@selectCheck="selectsc" |
|
@selection="selectionChange" |
|
> |
|
<template #default="slotProps"> </template> |
|
</tablecmt> |
|
</el-row> |
|
</div> |
|
</basic-container> |
|
<!-- 列表配置显示 --> |
|
<edittablehead |
|
@setcolum="setnewcolum" |
|
@closce="showdrawer" |
|
:drawerShow="drawerShow" |
|
:columnList="details.columnList" |
|
></edittablehead> |
|
</template> |
|
|
|
<script setup> |
|
import { $_searchNode } from '@/api/distribution/distributionParcelList'; |
|
import { columnList } from '@/api/distribution/packageNodeSearch'; |
|
import { |
|
ref, |
|
reactive, |
|
toRefs, |
|
computed, |
|
onMounted, |
|
nextTick, |
|
watch, |
|
getCurrentInstance, |
|
} from 'vue'; |
|
import functions from '@/utils/functions.js'; |
|
import { useRoute } from 'vue-router'; |
|
const $route = useRoute(); |
|
const show=ref(false) |
|
const title = ref('包条码'); |
|
const searchType = ref(''); |
|
|
|
const details = reactive({ |
|
/** 是否开启搜索 */ |
|
search: false, |
|
/** 表格搜索条件 */ |
|
query: {}, |
|
/** 时间快捷选择设置 */ |
|
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, |
|
|
|
/** 列表数据 */ |
|
data: [], |
|
/** 页面loading */ |
|
loadingObj: { |
|
/** 列表加载loading */ |
|
list: false, |
|
}, |
|
/** 列表复选框选中的数据 */ |
|
selectionList: [], |
|
/** 是否显示设置表格 */ |
|
drawerShow: false, |
|
/** 分页参数 */ |
|
page: { |
|
currentPage: 1, |
|
pageSize: 50, |
|
total: 0, |
|
}, |
|
|
|
/** 弹出层显示 */ |
|
popUpShow: { |
|
/** 包件明细 */ |
|
packageOrderListlVisited: false, |
|
/** 二维码 */ |
|
QRCodeVisible: false, |
|
/** 修改客户信息 */ |
|
editClientInfoVisible: false, |
|
}, |
|
/** 列表Dom节点 */ |
|
listNode: '', |
|
form: {}, |
|
/** 全屏 */ |
|
fullscreenObj: { |
|
/** 包明细 */ |
|
packageOrderListlVisited: false, |
|
}, |
|
}); |
|
|
|
const { |
|
search, |
|
query, |
|
shortcuts, |
|
stockupDate, |
|
data, |
|
loadingObj, |
|
selectionList, |
|
drawerShow, |
|
page, |
|
trickleLoadingPage, |
|
zeroAdditionalRecordingInfo, |
|
popUpShow, |
|
recorddata, |
|
} = toRefs(details); |
|
|
|
const onLoad = () => { |
|
details.columnList = columnList; |
|
}; |
|
|
|
|
|
/** 展开列表控件 */ |
|
const showdrawer = _flag => { |
|
details.drawerShow = _flag; |
|
}; |
|
const onload = () => { |
|
if(!details.query.packageCode){ |
|
return |
|
} |
|
details.loadingObj.list=true |
|
console.log(details.query); |
|
let data = { |
|
searchType: '1', |
|
...details.query, |
|
}; |
|
$_searchNode(data).then(res => { |
|
|
|
console.log(res, 'res'); |
|
if (res.data.data) { |
|
details.data = res.data.data; |
|
} |
|
}).catch(res=>{ |
|
|
|
}).finally(()=>{ |
|
details.loadingObj.list=false |
|
}); |
|
}; |
|
|
|
onLoad(); |
|
const searchChange = () => { |
|
onload(); |
|
}; |
|
const searchHide = () => { |
|
details.search = !details.search; |
|
}; |
|
console.log($route.query.orderPackageCode,'路由参数'); |
|
// 响应路由参数变化 |
|
details.query.packageCode = $route.query.orderPackageCode |
|
searchChange() |
|
watch($route, (newValue, oldValue) => { |
|
// 确保用户ID确实发生了变化 |
|
details.query.packageCode = $route.query.orderPackageCode |
|
if(!details.query.packageCode){ |
|
return |
|
} |
|
searchChange() |
|
}); |
|
|
|
|
|
|
|
/** |
|
* 设置列表 -- 固定函数 |
|
* 弹窗的勾选回调，用于更改头部数组 |
|
* 固定搭配，只需要更换 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); |
|
} |
|
}; |
|
|
|
const inputsc = () => {}; |
|
const timesc = () => {}; |
|
const btnsc = () => {}; |
|
const selectsc = () => {}; |
|
const selectionChange = () => {}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.el_row_top { |
|
.el-form { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.el-btn { |
|
margin-right: 0; |
|
} |
|
} |
|
.avue-crud__right { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
|
|
:deep(.el-card__body) { |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.avue-crud { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
:deep(.is-always-shadow){ |
|
box-shadow: none; |
|
} |
|
</style>
|
|
|