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