7 changed files with 492 additions and 287 deletions
@ -0,0 +1,329 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<div class="avue-crud"> |
||||||
|
<!-- 搜索模块 --> |
||||||
|
<el-row v-if="!details.search"> </el-row> |
||||||
|
|
||||||
|
<!-- 控件模块 --> |
||||||
|
<el-row> |
||||||
|
<div class="avue-crud__header"> |
||||||
|
<!-- 头部左侧按钮模块 --> |
||||||
|
<div class="avue-crud__left"> |
||||||
|
<el-button type="primary" icon="Edit" @click="handleBratchConfiguration" |
||||||
|
>批量配置 |
||||||
|
</el-button> |
||||||
|
</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> |
||||||
|
|
||||||
|
<!-- 表格 --> |
||||||
|
<!-- 列表模块 --> |
||||||
|
<tablecmt |
||||||
|
:columnList="details.packageColumnList" |
||||||
|
:tableData="details.renderData" |
||||||
|
:loading="details.loadingObj.list" |
||||||
|
@inputTxt="inputsc" |
||||||
|
@timeCheck="timesc" |
||||||
|
@selectCheck="selectsc" |
||||||
|
@selection="selectionChange" |
||||||
|
> |
||||||
|
<template #default="slotProps"> |
||||||
|
<el-text @click="handleConfiguration(slotProps.scope)">配置包条码</el-text> |
||||||
|
</template> |
||||||
|
</tablecmt> |
||||||
|
|
||||||
|
<!-- 提交按钮 --> |
||||||
|
<div class="submitBtn-container"> |
||||||
|
<el-button type="primary" icon="Position" @click="handleBratchConfiguration"> |
||||||
|
提交配置 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 配置装车目的地 --> |
||||||
|
<el-dialog |
||||||
|
title="配置装车目的地" |
||||||
|
v-model="details.popUpShow.truckLoadingDetailVisited" |
||||||
|
width="40%" |
||||||
|
append-to-body |
||||||
|
class="truckLoadingDetailPopUp" |
||||||
|
> |
||||||
|
<el-form |
||||||
|
ref="ruleFormRef" |
||||||
|
:model="ruleForm" |
||||||
|
:rules="rules" |
||||||
|
label-width="120px" |
||||||
|
class="demo-ruleForm" |
||||||
|
status-icon |
||||||
|
> |
||||||
|
<el-form-item label="Activity name" prop="name"> |
||||||
|
<el-input v-model="ruleForm.name" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="Activity zone" prop="region"> |
||||||
|
<el-select v-model="ruleForm.region" placeholder="Activity zone"> |
||||||
|
<el-option label="Zone one" value="shanghai" /> |
||||||
|
<el-option label="Zone two" value="beijing" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<!-- 表单按钮 --> |
||||||
|
<template #footer> |
||||||
|
<div class="dialog-footer"> |
||||||
|
<el-button type="primary" icon="el-icon-circle-check" @click="handleEditSubmit(ruleFormRef)" |
||||||
|
>提 交</el-button |
||||||
|
> |
||||||
|
<el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</basic-container> |
||||||
|
</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, setNodeHeight, debounce } from '@/utils/util'; |
||||||
|
import { packageColumnList } from '@/option/distribution/VehicleStowage'; |
||||||
|
import { |
||||||
|
postDetermineHasNoFinalNode, |
||||||
|
postUpdateLoadScanFinalNodeIdById, |
||||||
|
postFindNextNodeList, |
||||||
|
} from '@/api/distribution/VehicleStowage'; |
||||||
|
import { useStore } from 'vuex'; |
||||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||||
|
|
||||||
|
// 获取路由实例 |
||||||
|
const $router = useRouter(); |
||||||
|
const $route = useRoute(); |
||||||
|
|
||||||
|
const $store = useStore(); |
||||||
|
const details = reactive<any>({ |
||||||
|
/** 是否显示搜索控件去 */ |
||||||
|
search: false, |
||||||
|
/** 表格数据 */ |
||||||
|
data: [{}], |
||||||
|
/** 渲染数据 */ |
||||||
|
renderData: [], |
||||||
|
/** loading */ |
||||||
|
loadingObj: { |
||||||
|
list: false, |
||||||
|
}, |
||||||
|
/** 弹窗 */ |
||||||
|
popUpShow: { |
||||||
|
truckLoadingDetailVisited: true, |
||||||
|
}, |
||||||
|
/** 搜索 */ |
||||||
|
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]; |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
packageColumnList, |
||||||
|
/** 复选框选中数据 */ |
||||||
|
selectionList: [], |
||||||
|
/** 后续节点数据 */ |
||||||
|
nextNodeData: [], |
||||||
|
}); |
||||||
|
|
||||||
|
/** 初始化请求数据 */ |
||||||
|
const onLoad = async (params = {}) => { |
||||||
|
try { |
||||||
|
details.loadingObj.list = true; |
||||||
|
|
||||||
|
const res1 = postDetermineHasNoFinalNode({ loadId: $route.query.loadId }); |
||||||
|
const res2 = postFindNextNodeList({ loadId: $route.query.loadId }); |
||||||
|
|
||||||
|
const responseArr = await Promise.all([res1, res2]); |
||||||
|
// postFindNextNodeList |
||||||
|
|
||||||
|
// 包条数据 |
||||||
|
const { code, data } = responseArr[0].data; |
||||||
|
|
||||||
|
if (code !== 200) return; |
||||||
|
|
||||||
|
details.data = data || []; |
||||||
|
details.renderData = [...details.data]; |
||||||
|
|
||||||
|
// 下一步节点数据 |
||||||
|
const { code: code1, data: data1 } = responseArr[1].data; |
||||||
|
if (code1 !== 200) return; |
||||||
|
details.nextNodeData = data1 || []; |
||||||
|
} catch (error) { |
||||||
|
console.log('error :>> ', error); |
||||||
|
} finally { |
||||||
|
details.loadingObj.list = false; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
onLoad(); |
||||||
|
|
||||||
|
/** 搜索 */ |
||||||
|
const searchChange = () => { |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** 清空表单 */ |
||||||
|
const searchReset = () => { |
||||||
|
details.query = {}; |
||||||
|
details.stockupDate = []; |
||||||
|
details.page.pageNum = 1; |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** 展开列表控件 */ |
||||||
|
const showdrawer = (_flag?: boolean) => { |
||||||
|
details.drawerShow = _flag; |
||||||
|
}; |
||||||
|
|
||||||
|
/** 是否展开搜索控件区 */ |
||||||
|
const searchHide = () => { |
||||||
|
details.search = !details.search; |
||||||
|
}; |
||||||
|
|
||||||
|
/** 表格表头输入框搜索 */ |
||||||
|
const inputsc = (value, row) => { |
||||||
|
// 动态设置正则 |
||||||
|
const reg = new RegExp(value, 'i'); |
||||||
|
|
||||||
|
details.query[row.prop] = reg; |
||||||
|
|
||||||
|
if (value === '') delete details.query[row.prop]; |
||||||
|
|
||||||
|
if (Object.keys(details.query).length === 0) return (details.renderData = details.data); |
||||||
|
|
||||||
|
const _data = details.data.filter(item => { |
||||||
|
let _flag = true; |
||||||
|
for (let key in details.query) { |
||||||
|
if (!details.query[key].test(item[key])) _flag = false; |
||||||
|
if (!_flag) break; |
||||||
|
} |
||||||
|
|
||||||
|
return _flag; |
||||||
|
}); |
||||||
|
|
||||||
|
details.renderData = _data; |
||||||
|
}; |
||||||
|
|
||||||
|
/** 表格表头时间选择 */ |
||||||
|
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(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** 表格表头下拉框选择 */ |
||||||
|
const selectsc = (index, row) => { |
||||||
|
details.query[row.prop] = index; |
||||||
|
if (!index) delete details.query[row.prop]; |
||||||
|
onLoad(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** 表格表头复选框选择 */ |
||||||
|
const selectionChange = (list: any) => { |
||||||
|
details.selectionList = list; |
||||||
|
}; |
||||||
|
|
||||||
|
/** 批量配置 */ |
||||||
|
const handleBratchConfiguration = () => { |
||||||
|
details.popUpShow.truckLoadingDetailVisited = true; |
||||||
|
}; |
||||||
|
|
||||||
|
/** 单独配置 */ |
||||||
|
const handleConfiguration = ({ row }) => { |
||||||
|
details.popUpShow.truckLoadingDetailVisited = true; |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.fo-fl { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
zoom: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
// 日期选择器 |
||||||
|
:deep(.el-date-editor.el-input) { |
||||||
|
height: 100% !important; |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-range-editor.el-input__wrapper) { |
||||||
|
height: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
// 提交按钮 |
||||||
|
.submitBtn-container { |
||||||
|
position: fixed; |
||||||
|
bottom: 20px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
// 弹出层标题 |
||||||
|
.popUp_title { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: bold; |
||||||
|
padding: 5px 20px; |
||||||
|
position: relative; |
||||||
|
margin: 20px 0; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
width: 4px; |
||||||
|
height: 100%; |
||||||
|
background: #172e60; |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue