15 changed files with 2637 additions and 75 deletions
@ -0,0 +1,267 @@
|
||||
/** 自提详情内表格 */ |
||||
export const columnList = [ |
||||
{ |
||||
prop: '', |
||||
label: '复选框', |
||||
type: 0, |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '序号', |
||||
type: 12, |
||||
values: '', |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: 'name', |
||||
label: '姓名', |
||||
type: 2, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: true, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'phone', |
||||
label: '手机号码', |
||||
type: 2, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'typeName', |
||||
label: '司机类型', |
||||
type: 3, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'jobTypeName', |
||||
label: '职务类型', |
||||
type: 3, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'drivingTypeName', |
||||
label: '准驾车型', |
||||
type: 3, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'drivingTypeName', |
||||
label: '准驾车型', |
||||
type: 3, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'bindVehicle', |
||||
label: '绑定车辆', |
||||
type: 2, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'contractStartTime', |
||||
label: '合同开始时间', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'contractEndTime', |
||||
label: '合同结束时间', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'idCard', |
||||
label: '身份证号', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'genderName', |
||||
label: '性别', |
||||
type: 3, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'warehouseNames', |
||||
label: '仓库', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'residentialAddress', |
||||
label: '居住地址', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'bankTypeName', |
||||
label: '银行类型', |
||||
type: 3, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'bankCardNub', |
||||
label: '银行卡号', |
||||
type: 2, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'driverLicenseNub', |
||||
label: '驾驶证号', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'driverLicenseOrgan', |
||||
label: '驾驶证发证机关', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'driverLicenseStartTime', |
||||
label: '驾驶证起始日期', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'driverLicenseEndTime', |
||||
label: '驾驶证到期日期', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'employeeQualificationNub', |
||||
label: '从业资格证编号', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'roadOperationLicenseNub', |
||||
label: '道路经营许可证号', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'carrierId', |
||||
label: '承运商', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'transportationAgreement', |
||||
label: '运输协议', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: 'notes', |
||||
label: '备注', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '操作', |
||||
type: 6, |
||||
values: '', |
||||
width: '200', |
||||
checkarr: [], |
||||
fixed: 'right', |
||||
}, |
||||
]; |
||||
@ -0,0 +1,501 @@
|
||||
<template> |
||||
<basic-container v-loading="loadingObj.pageLoading"> |
||||
<div class="avue-crud"> |
||||
<div v-h5uShow="search"> |
||||
<!-- 查询模块 --> |
||||
<el-form :inline="true" :model="query" class="header_search"> |
||||
<el-form-item label="订单自编号:"> |
||||
<el-input |
||||
v-model="query.orderCodeNum" |
||||
placeholder="请输入订单自编号" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="运单:"> |
||||
<el-input v-model="query.waybillNum" placeholder="请输入运单编号" clearable /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="入库时间:" class="el-times"> |
||||
<el-date-picker |
||||
v-model="stockupDate" |
||||
type="datetimerange" |
||||
unlink-panels |
||||
range-separator="至" |
||||
start-placeholder="开始时间" |
||||
end-placeholder="结束时间" |
||||
:shortcuts="shortcuts" |
||||
:default-time="defaultTime2" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<!-- 查询按钮 --> |
||||
<el-form-item> |
||||
<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> |
||||
</div> |
||||
|
||||
<div class="flex-c-sb mb10"> |
||||
<!-- 头部左侧按钮模块 --> |
||||
<div class="avue-crud__left"> |
||||
<el-button type="primary" icon="Plus" @click="handleAdd"> 新 增 </el-button> |
||||
<el-button type="danger" icon="Delete" @click="handleBatchDelete"> 删 除 </el-button> |
||||
<el-button type="danger" icon="upload" @click="popUpShow.importVisible = true"> |
||||
导 入 |
||||
</el-button> |
||||
<el-button type="danger" icon="Download" @click="handleExport">导 出</el-button> |
||||
</div> |
||||
<!-- 头部右侧按钮模块 --> |
||||
<div class="avue-crud__right"> |
||||
<el-button icon="el-icon-refresh" @click="onLoad()" 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> |
||||
<!-- 列表模块 --> |
||||
<tablecmt |
||||
ref="tableNode" |
||||
:columnList="columnList" |
||||
:tableData="data" |
||||
:loading="loadingObj.loading" |
||||
@inputTxt="inputsc" |
||||
@timeCheck="timesc" |
||||
@selectCheck="selectsc" |
||||
@selection="selectionChange" |
||||
> |
||||
<template #default="slotProps"> |
||||
<template v-if="slotProps.scope.column.label === '操作'"> |
||||
<el-text @click="handleView(slotProps.scope)"> 查 看 </el-text> |
||||
<el-text @click="handleEdit(slotProps.scope)"> 编 辑 </el-text> |
||||
<el-text @click="handleDelete(slotProps.scope)"> 删 除 </el-text> |
||||
</template> |
||||
</template> |
||||
</tablecmt> |
||||
|
||||
<!-- 分页区 --> |
||||
<div class="mt10 flex-c-sb" style="width: 100%"> |
||||
<div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div> |
||||
<!-- 分页模块 --> |
||||
<el-pagination |
||||
align="right" |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" |
||||
:page-sizes="[30, 50, 80, 120]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<!-- 导入 --> |
||||
<el-dialog |
||||
title="司机数据导入" |
||||
append-to-body |
||||
v-model="popUpShow.importVisible" |
||||
width="780px" |
||||
> |
||||
<div> |
||||
<el-divider content-position="left">司机数据导入</el-divider> |
||||
</div> |
||||
|
||||
<div class="flex-c-sb"> |
||||
<P class="fwb">请上传 .xls,.xlsx 标准格式文件</P> |
||||
|
||||
<el-button type="primary" icon="Download" @click="handleTemplate"> 下载模板 </el-button> |
||||
</div> |
||||
|
||||
<div v-loading="loadingObj.UploadLoadong"> |
||||
<el-upload |
||||
class="upload-demo" |
||||
drag |
||||
:headers="header" |
||||
action="/api/logpm-basicdata/driverArtery/import-stockArticle" |
||||
:before-upload="handleBeforeUpload" |
||||
:on-success="handleSuccess" |
||||
:on-error="handleClose" |
||||
multiple |
||||
> |
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
||||
<div class="el-upload__text">拖拽文件或 <em>点击上传</em></div> |
||||
</el-upload> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getList, |
||||
getDetail, |
||||
add, |
||||
update, |
||||
remove, |
||||
getPage, |
||||
} from '@/api/basicdata/basicdataDriverArtery'; |
||||
import { getList as getUserList, getUser } from '@/api/system/user'; |
||||
import { getVehicle } from '@/api/basicdata/basicdataVehicle'; |
||||
import { getMyWarehouseList } from '@/api/work/work.js'; |
||||
import option from '@/option/basicdata/basicdataDriverArtery'; |
||||
import { columnList } from '@/option/basicdata/basicdataDriverArtery1'; |
||||
import { mapGetters } from 'vuex'; |
||||
import { exportBlob } from '@/api/common'; |
||||
import { getToken } from '@/utils/auth'; |
||||
import { downloadXls, setNodeHeight, debounce } from '@/utils/util'; |
||||
import { dateNow } from '@/utils/date'; |
||||
import NProgress from 'nprogress'; |
||||
import 'nprogress/nprogress.css'; |
||||
import { getDetail as getDetailDelineNode } from '@/api/basic/basicDelineNode'; |
||||
import { ElMessageBox } from 'element-plus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
search: false, |
||||
query: {}, |
||||
columnList, |
||||
data: [], |
||||
drawerShow: false, |
||||
page: { |
||||
currentPage: 1, |
||||
pageSize: 30, |
||||
total: 40, |
||||
}, |
||||
// 表单数据 |
||||
form: {}, |
||||
selectionList: [], |
||||
stockupDate: [], |
||||
/** 头部 */ |
||||
header: { |
||||
'Blade-Auth': 'bearer ' + getToken(), |
||||
}, |
||||
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]; |
||||
}, |
||||
}, |
||||
], |
||||
/** loading */ |
||||
loadingObj: { |
||||
/** 表格loading */ |
||||
loading: false, |
||||
/** 页面loading */ |
||||
pageLoading: false, |
||||
/** 导入loading */ |
||||
UploadLoadong: false, |
||||
}, |
||||
/** 弹框 */ |
||||
popUpShow: { |
||||
dialogFormVisible: false, |
||||
/** 导入弹窗 */ |
||||
importVisible: false, |
||||
}, |
||||
onLoad: debounce(async (params = {}, isRefresh = false) => { |
||||
this.loadingObj.loading = true; |
||||
try { |
||||
if (isRefresh) this.page.currentPage = 1; |
||||
|
||||
const res = await getPage(this.page.currentPage, this.page.pageSize, { |
||||
...this.query, |
||||
...params, |
||||
}); |
||||
console.log('res :>> ', res); |
||||
const { code, data } = res.data; |
||||
if (code !== 200) return; |
||||
|
||||
this.page.total = data.total; |
||||
this.data = data.records; |
||||
//查询车辆绑定情况 |
||||
this.getVehiclede(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.loading = false; |
||||
} |
||||
}, 10), |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['permission']), |
||||
permissionList() { |
||||
return { |
||||
addBtn: this.validData(this.permission.basicdataDriverArtery_add, false), |
||||
viewBtn: this.validData(this.permission.basicdataDriverArtery_view, false), |
||||
delBtn: this.validData(this.permission.basicdataDriverArtery_delete, false), |
||||
editBtn: this.validData(this.permission.basicdataDriverArtery_edit, false), |
||||
}; |
||||
}, |
||||
ids() { |
||||
let ids = []; |
||||
for (let i = 0; i < this.selectionList.length; i++) { |
||||
ids.push(this.selectionList[i].id); |
||||
} |
||||
return ids.join(','); |
||||
}, |
||||
}, |
||||
created() { |
||||
this.onLoad(); |
||||
}, |
||||
methods: { |
||||
searchHide() { |
||||
this.search = !this.search; |
||||
|
||||
setNodeHeight(this.$refs.tableNode.$el, '', true); |
||||
}, |
||||
/** 查询车辆绑定情况 */ |
||||
getVehiclede() { |
||||
getVehicle().then(res => { |
||||
console.log('车辆信息', res.data.data); |
||||
res.data.data.map(v => {}); |
||||
}); |
||||
}, |
||||
/** 查看 */ |
||||
handleView({ row }) { |
||||
this.$router.push({ |
||||
path: '/basicdata/driverArtery/basicdataDriverArteryView', |
||||
query: { |
||||
name: `${row.name} - 司机信息查看`, |
||||
backPatch: '/basicdata/driverArtery/basicdataDriverArtery', |
||||
id: row.id, |
||||
}, |
||||
}); |
||||
}, |
||||
/** 编辑 */ |
||||
handleEdit({ row }) { |
||||
this.$store.commit('DEL_ONCE_TAG', 'basicdataDriverArteryAdd'); |
||||
|
||||
this.$router.push({ |
||||
path: '/basicdata/driverArtery/basicdataDriverArteryAdd', |
||||
query: { |
||||
name: `${row.name} - 司机信息编辑`, |
||||
type: 'edit', |
||||
backPatch: '/basicdata/driverArtery/basicdataDriverArtery', |
||||
id: row.id, |
||||
}, |
||||
}); |
||||
}, |
||||
/** 删除 */ |
||||
handleDelete({ row }) { |
||||
ElMessageBox.confirm(`此操作将永久删除【 ${row.name} 】司机数据, 是否继续?`, '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(async () => { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
const res = await remove(row.id); |
||||
console.log('res :>> ', res); |
||||
const { code, msg } = res.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
this.$message.success(msg); |
||||
this.onLoad(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}); |
||||
}, |
||||
selectionChange(list) { |
||||
this.selectionList = list; |
||||
}, |
||||
selectsc(index, row) { |
||||
console.log(index, row); |
||||
|
||||
const key = row.prop.replace('Name', ''); |
||||
|
||||
this.query[key] = index; |
||||
if (!index) delete this.query[key]; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(); |
||||
}, |
||||
timesc(index, row) { |
||||
console.log(index, row); |
||||
if (!!index) { |
||||
index = dayjs(index).format('YYYY-MM-DD'); |
||||
} |
||||
this.query[row.prop] = index; |
||||
if (!index) { |
||||
delete this.query[row.prop]; |
||||
} |
||||
this.onLoad(); |
||||
}, |
||||
inputsc(index, row) { |
||||
this.query[row.prop] = index; |
||||
if (!index) delete this.query[row.prop]; |
||||
this.onLoad(); |
||||
}, |
||||
handleSizeChange(size) { |
||||
this.page.pageSize = size; |
||||
this.onLoad(); |
||||
}, |
||||
handleCurrentChange(current) { |
||||
this.page.currentPage = current; |
||||
this.onLoad(); |
||||
}, |
||||
/** 新增 */ |
||||
handleAdd() { |
||||
this.$store.commit('DEL_ONCE_TAG', 'basicdataDriverArteryAdd'); |
||||
|
||||
this.$router.push({ |
||||
path: '/basicdata/driverArtery/basicdataDriverArteryAdd', |
||||
query: { |
||||
name: '司机信息新增', |
||||
type: 'add', |
||||
backPatch: '/basicdata/driverArtery/basicdataDriverArtery', |
||||
}, |
||||
}); |
||||
}, |
||||
/** 批量删除 */ |
||||
handleBatchDelete() { |
||||
if (!this.selectionList.length) return this.$message.warning('请选择至少一条数据'); |
||||
|
||||
ElMessageBox.confirm( |
||||
`此操作将永久删除【 ${this.selectionList.length} 】条数据, 是否继续?`, |
||||
'提示', |
||||
{ |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
} |
||||
).then(async () => { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
const res = await remove(this.ids); |
||||
const { code, msg } = res.data; |
||||
|
||||
if (code !== 200) return; |
||||
|
||||
this.$message.success(msg); |
||||
this.onLoad(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}); |
||||
}, |
||||
/** 导出 */ |
||||
handleExport() { |
||||
let downloadUrl = `/api/logpm-basicdata/driverArtery/export-basicdataDriverArtery?${ |
||||
this.website.tokenHeader |
||||
}=${getToken()}`; |
||||
this.$confirm('是否导出数据?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(async () => { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
const res = await exportBlob(downloadUrl, this.query); |
||||
if (res.status !== 200) return; |
||||
downloadXls(res.data, `司机信息${dateNow()}.xlsx`); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}); |
||||
}, |
||||
/** 导入 */ |
||||
handleImport() { |
||||
this.popUpShow.dialogFormVisible = true; |
||||
}, |
||||
handleBeforeUpload(file) { |
||||
console.log('file :>> ', file); |
||||
this.loadingObj.UploadLoadong = true; |
||||
|
||||
// 获取文件类型 |
||||
const _fileNameArr = file.name.split('.'); |
||||
const _fileType = _fileNameArr[_fileNameArr.length - 1]; |
||||
|
||||
const whiteArr = ['xls', 'xlsx']; |
||||
|
||||
if (whiteArr.indexOf(_fileType) !== -1) return true; |
||||
|
||||
this.$message.warning('请传入xls或xlsx格式的文件'); |
||||
this.loadingObj.UploadLoadong = false; |
||||
return false; |
||||
}, |
||||
/** 长传成功 */ |
||||
handleSuccess(res) { |
||||
console.log('res :>> ', res); |
||||
this.loadingObj.UploadLoadong = false; |
||||
if (res.code !== 200) return this.$message.warning('上传失败'); |
||||
this.$message.success('上传成功'); |
||||
onLoad({}, true); |
||||
}, |
||||
|
||||
/** 上传失败 */ |
||||
handleClose(res) { |
||||
this.loadingObj.UploadLoadong = false; |
||||
|
||||
this.$message.warning('上传失败'); |
||||
}, |
||||
|
||||
/** 下载模板 */ |
||||
async handleTemplate() { |
||||
try { |
||||
this.loadingObj.UploadLoadong = true; |
||||
|
||||
const res = await exportBlob( |
||||
`/api/logpm-basicdata/driverArtery/export-basicdataDriverArteryMb?${ |
||||
this.website.tokenHeader |
||||
}=${getToken()}` |
||||
); |
||||
if (res.status !== 200) return; |
||||
downloadXls(res.data, '司机信息导入模板.xlsx'); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.UploadLoadong = false; |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
:deep(.header_search .el-date-editor.el-input__wrapper) { |
||||
height: 100% !important; |
||||
} |
||||
|
||||
// 标题 |
||||
:deep(.el-divider__text.is-left) { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: var(--el-color-primary); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,293 @@
|
||||
<template> |
||||
<basic-container v-loading="loadingObj.pageLoading"> |
||||
<div class="avue-crud"> |
||||
<div v-h5uShow="!search"> |
||||
<!-- 查询模块 --> |
||||
<el-form :inline="true" :model="query" class="header_search"> |
||||
<el-form-item label="订单自编号:"> |
||||
<el-input |
||||
v-model="query.orderCodeNum" |
||||
placeholder="请输入订单自编号" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="运单:"> |
||||
<el-input v-model="query.waybillNum" placeholder="请输入运单编号" clearable /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="入库时间:" class="el-times"> |
||||
<el-date-picker |
||||
v-model="stockupDate" |
||||
type="datetimerange" |
||||
unlink-panels |
||||
range-separator="至" |
||||
start-placeholder="开始时间" |
||||
end-placeholder="结束时间" |
||||
:shortcuts="shortcuts" |
||||
:default-time="defaultTime2" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<!-- 查询按钮 --> |
||||
<el-form-item> |
||||
<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> |
||||
</div> |
||||
|
||||
<el-row> |
||||
<div class="avue-crud__header"> |
||||
<!-- 头部左侧按钮模块 --> |
||||
<div class="avue-crud__left"> |
||||
<el-button type="primary" icon="el-icon-edit" @click="handleStockList" v-if="handler" |
||||
>批量转库存品</el-button |
||||
> |
||||
<el-button |
||||
type="danger" |
||||
icon="el-icon-edit" |
||||
@click="handleCallDelivery('3')" |
||||
v-if="handler" |
||||
>修改客户信息</el-button |
||||
> |
||||
<el-button |
||||
type="danger" |
||||
icon="el-icon-edit" |
||||
@click="handleCallDelivery('2')" |
||||
v-if="handler" |
||||
>修改服务类型</el-button |
||||
> |
||||
<el-button type="danger" icon="Download" @click="handleExport" plain>导 出</el-button> |
||||
|
||||
<el-dialog title="零担导入" append-to-body v-model="excelBox" width="555px"> |
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter"> |
||||
<template #excelTemplate> |
||||
<el-button type="primary" @click="handleTemplate"> |
||||
点击下载<i class="el-icon-download el-icon--right"></i> |
||||
</el-button> |
||||
</template> |
||||
</avue-form> |
||||
</el-dialog> |
||||
|
||||
<!-- <el-button type="danger" icon="el-icon-plus" v-if = "handler">转配送</el-button>--> |
||||
</div> |
||||
<div class="avue-crud__left"> |
||||
<el-button type="primary" icon="el-icon-plus" @click="handlebill" v-if="!handler" |
||||
>创建提货单</el-button |
||||
> |
||||
<el-button |
||||
type="danger" |
||||
icon="el-icon-delete" |
||||
@click="handleCallDelivery('1')" |
||||
v-if="!handler" |
||||
>再次通知</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
@click="handleCallDelivery('1')" |
||||
v-if="!handler" |
||||
>通知提货</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 |
||||
ref="tableNode" |
||||
:columnList="columnList" |
||||
:tableData="data" |
||||
:loading="loading" |
||||
@inputTxt="inputsc" |
||||
@timeCheck="timesc" |
||||
@btnCheck="btnsc" |
||||
@selectCheck="selectsc" |
||||
@selection="selectionChange" |
||||
> |
||||
<template #default="slotProps"> |
||||
<template v-if="slotProps.scope.column.label === '货位信息'"> |
||||
<div style="width: 100%"> |
||||
<el-tag |
||||
v-for="item in slotProps.scope.row.allocation |
||||
? slotProps.scope.row.allocation.split(',') |
||||
: []" |
||||
:key="item" |
||||
style="margin-right: 5px" |
||||
> |
||||
{{ item }} |
||||
</el-tag> |
||||
</div> |
||||
</template> |
||||
|
||||
<template v-if="slotProps.scope.column.label === '操作'"> |
||||
<el-text |
||||
v-if="Number(slotProps.scope.row.isZero) !== 0" |
||||
@click="handleShowOrderCode(slotProps.scope)" |
||||
> |
||||
查看二维码 |
||||
</el-text> |
||||
<el-text @click="handleView(slotProps.scope)"> 查看 </el-text> |
||||
<el-text @click="handleCallDeliveryOwn(slotProps.scope)"> 修改客户信息 </el-text> |
||||
<el-text @click="handleGoLogs(slotProps.scope)"> 日志 </el-text> |
||||
</template> |
||||
</template> |
||||
</tablecmt> |
||||
|
||||
<!-- 分页区 --> |
||||
<div class="avue-crud__pagination flex-c-sb" style="width: 100%"> |
||||
<div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div> |
||||
<!-- 分页模块 --> |
||||
<el-pagination |
||||
align="right" |
||||
background |
||||
@size-change="sizeChange" |
||||
@current-change="currentChange" |
||||
:current-page="page.currentPage" |
||||
:page-sizes="[30, 50, 80, 120]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<el-dialog v-model="dialogFormVisible" title="通知提货"> |
||||
<el-form :model="formCall"> |
||||
<el-form-item label="顾客姓名" :label-width="formLabelWidth"> |
||||
<el-input v-model="formCall.customerName" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="顾客电话" :label-width="formLabelWidth"> |
||||
<el-input v-model="formCall.customerTelephone" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="运单" :label-width="formLabelWidth"> |
||||
<el-input v-model="formCall.waybill" autocomplete="off" /> |
||||
</el-form-item> |
||||
<el-form-item label="跟进记录" :label-width="formLabelWidth"> |
||||
<el-input |
||||
v-model="formCall.followUpRecord" |
||||
:rows="2" |
||||
type="textarea" |
||||
placeholder="请填写内容" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="历史跟进" :label-width="formLabelWidth"> </el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="dialogFormVisible = false">取消</el-button> |
||||
<!-- <el-button type="primary" @click="dialogFormVisible = false"> 确定 </el-button>--> |
||||
<el-button type="primary" @click="callFordelivery('1')"> 确定 </el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getList, |
||||
getDetail, |
||||
add, |
||||
update, |
||||
remove, |
||||
getPage, |
||||
} from '@/api/basicdata/basicdataDriverArtery'; |
||||
import { getList as getUserList, getUser } from '@/api/system/user'; |
||||
import { getVehicle } from '@/api/basicdata/basicdataVehicle'; |
||||
import { getMyWarehouseList } from '@/api/work/work.js'; |
||||
import option from '@/option/basicdata/basicdataDriverArtery'; |
||||
import { mapGetters } from 'vuex'; |
||||
import { exportBlob } from '@/api/common'; |
||||
import { getToken } from '@/utils/auth'; |
||||
import { downloadXls } from '@/utils/util'; |
||||
import { dateNow } from '@/utils/date'; |
||||
import NProgress from 'nprogress'; |
||||
import 'nprogress/nprogress.css'; |
||||
import { getDetail as getDetailDelineNode } from '@/api/basic/basicDelineNode'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
search: false, |
||||
query: {}, |
||||
columnList: option.column, |
||||
drawerShow: false, |
||||
page: { |
||||
currentPage: 1, |
||||
pageSize: 30, |
||||
total: 40, |
||||
}, |
||||
// 表单数据 |
||||
form: {}, |
||||
selectionList: [], |
||||
stockupDate: [], |
||||
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]; |
||||
}, |
||||
}, |
||||
], |
||||
/** loading */ |
||||
loadingObj: { |
||||
/** 页面loading */ |
||||
pageLoading: false, |
||||
}, |
||||
/** 弹框 */ |
||||
popUpShow: { |
||||
printVisited: false, |
||||
}, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['permission']), |
||||
permissionList() { |
||||
return { |
||||
addBtn: this.validData(this.permission.basicdataDriverArtery_add, false), |
||||
viewBtn: this.validData(this.permission.basicdataDriverArtery_view, false), |
||||
delBtn: this.validData(this.permission.basicdataDriverArtery_delete, false), |
||||
editBtn: this.validData(this.permission.basicdataDriverArtery_edit, false), |
||||
}; |
||||
}, |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach(ele => { |
||||
ids.push(ele.id); |
||||
}); |
||||
return ids.join(','); |
||||
}, |
||||
}, |
||||
methods: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,811 @@
|
||||
<template> |
||||
<basic-container v-loading="loadingObj.pageLoading"> |
||||
<div class="avue-crud"> |
||||
<el-form label-width="140px" ref="formRef" :inline="true" :model="form"> |
||||
<el-form-item |
||||
style="width: 30%" |
||||
:label="item.label" |
||||
v-for="item in option" |
||||
:key="item.prop" |
||||
:prop="item.prop" |
||||
:rules="item.rules" |
||||
> |
||||
<!-- 输入框 --> |
||||
<el-input |
||||
clearable |
||||
v-model="form[item.prop]" |
||||
@input="() => item.input && item.input(form[item.prop], item)" |
||||
v-if="item.type == 'input'" |
||||
:placeholder="item.placeholder || '请输入' + item.label" |
||||
/> |
||||
|
||||
<!-- 数字输入框 --> |
||||
<el-input-number |
||||
v-model="form[item.prop]" |
||||
@input="() => item.input && item.input(form[item.prop], item)" |
||||
clearable |
||||
v-else-if="item.type == 'number'" |
||||
:precision="item.precision" |
||||
:min="item.min || 0" |
||||
:controls="false" |
||||
:placeholder="item.placeholder || '请输入' + item.label" |
||||
class="w100" |
||||
:value-on-clear="item.min || 0" |
||||
/> |
||||
|
||||
<!-- 日期 --> |
||||
<el-date-picker |
||||
v-model="form[item.prop]" |
||||
v-else-if="item.type == 'date'" |
||||
clearable |
||||
type="date" |
||||
:placeholder="item.placeholder || '请选择' + item.label" |
||||
:disabled-date="disabledDate" |
||||
class="w100" |
||||
:value-format="item.valueFormat || 'yyyy-MM-dd'" |
||||
/> |
||||
|
||||
<!-- 下拉框 --> |
||||
<el-select |
||||
v-else-if="item.type == 'select'" |
||||
v-model="form[item.prop]" |
||||
class="w100" |
||||
clearable |
||||
:placeholder="item.placeholder || '请选择' + item.label" |
||||
:multiple="item.multiple || false" |
||||
:filterable="item.filterable || false" |
||||
> |
||||
<el-option |
||||
v-for="value in item.options" |
||||
:key="value.dictKey" |
||||
:label="value.dictValue" |
||||
:value="value.dictKey" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<div class="img-container"> |
||||
<el-form-item |
||||
style="width: 30%" |
||||
:label="item.label" |
||||
v-for="item in imgOption" |
||||
:key="item.prop" |
||||
:prop="item.prop" |
||||
:rules="item.rules" |
||||
> |
||||
<el-upload |
||||
list-type="picture-card" |
||||
:show-file-list="false" |
||||
:on-preview="handlePreview" |
||||
:action="'/api/blade-resource/oss/endpoint/put-file'" |
||||
:on-success="file => handleUpLoadSuccess(file, item)" |
||||
:before-upload="handleBeforeUpload" |
||||
:on-exceed="() => handleImgError(item)" |
||||
:headers="headers" |
||||
> |
||||
<div v-if="form[item.prop]" @click.stop class="upLoadImg_box"> |
||||
<el-image |
||||
:src="form[item.prop]" |
||||
class="avatar" |
||||
:preview-src-list="[form[item.prop]]" |
||||
/> |
||||
|
||||
<div class="clearIcon" @click="() => handleRemoveImg(item)"> |
||||
<el-icon color="#f00"><DeleteFilled /></el-icon> |
||||
</div> |
||||
</div> |
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<div class="submit_container"> |
||||
<el-button icon="CircleClose" @click="back">关 闭</el-button> |
||||
<el-button icon="Refresh" type="primary" @click="handleReset">重 置</el-button> |
||||
<el-button icon="Promotion" type="primary" @click="submitForm">保 存</el-button> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getList, |
||||
getDetail, |
||||
add, |
||||
update, |
||||
remove, |
||||
getPage, |
||||
} from '@/api/basicdata/basicdataDriverArtery'; |
||||
/** 获取字典 */ |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { getVehicle, getListName, getDictionary } from '@/api/basicdata/basicdataVehicle'; |
||||
import { mapGetters } from 'vuex'; |
||||
import { getToken } from '@/utils/auth'; |
||||
import { downloadXls, setNodeHeight, debounce } from '@/utils/util'; |
||||
import { ElMessageBox } from 'element-plus'; |
||||
export default { |
||||
name: '/basicdata/driverArtery/basicdataDriverArteryAdd', |
||||
data() { |
||||
return { |
||||
// 表单数据 |
||||
form: {}, |
||||
option: [ |
||||
{ |
||||
label: '姓名', |
||||
prop: 'name', |
||||
type: 'input', |
||||
rules: [{ required: true, message: '请输入姓名!', trigger: ['blur', 'change'] }], |
||||
}, |
||||
{ |
||||
label: '手机号码', |
||||
prop: 'phone', |
||||
type: 'input', |
||||
precision: 0, |
||||
blur(payload) { |
||||
console.log('payload :>> ', payload); |
||||
payload.value = payload.value + 1; |
||||
console.log('111 :>> ', 111); |
||||
}, |
||||
|
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入电话号码', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '司机类型', |
||||
prop: 'type', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driver_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '职务类型', |
||||
prop: 'jobType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driverjob_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '准驾车型', |
||||
prop: 'drivingType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driving_type', |
||||
options: [], |
||||
}, |
||||
|
||||
{ |
||||
label: '绑定车辆', |
||||
prop: 'bindVehicles', |
||||
filterable: true, |
||||
type: 'select', |
||||
remote: true, |
||||
multiple: true, |
||||
// dicData: [], |
||||
dicUrl: '/api/logpm-basicdata/vehicle/dictionary?vehicleNub={{key}}', |
||||
options: [], |
||||
multiple: true, |
||||
}, |
||||
{ |
||||
label: '合同开始时间', |
||||
prop: 'contractStartTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '合同结束时间', |
||||
prop: 'contractEndTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '身份证号', |
||||
prop: 'idCard', |
||||
type: 'number', |
||||
}, |
||||
{ |
||||
label: '性别', |
||||
prop: 'gender', |
||||
filterable: true, |
||||
type: 'select', |
||||
|
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=sex', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '仓库', |
||||
prop: 'warehouseIds', |
||||
filterable: true, |
||||
type: 'select', |
||||
remote: true, |
||||
dicUrl: '/logpm-basicdata/warehouse/listName?name={{key}}', |
||||
options: [], |
||||
rules: [{ required: true, message: '请选择仓库!', trigger: 'blur' }], |
||||
multiple: true, |
||||
}, |
||||
{ |
||||
label: '居住地址', |
||||
prop: 'residentialAddress', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '银行类型', |
||||
prop: 'bankType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_bank_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '银行卡号', |
||||
prop: 'bankCardNub', |
||||
type: 'number', |
||||
}, |
||||
{ |
||||
label: '驾驶证号', |
||||
prop: 'driverLicenseNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '驾驶证发证机关', |
||||
prop: 'driverLicenseOrgan', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '驾驶证起始日期', |
||||
prop: 'driverLicenseStartTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '驾驶证到期日期', |
||||
prop: 'driverLicenseEndTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '从业资格证编号', |
||||
prop: 'employeeQualificationNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '道路经营许可证号', |
||||
prop: 'roadOperationLicenseNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '承运商', |
||||
prop: 'carrierId', |
||||
filterable: true, |
||||
type: 'select', |
||||
filterable: true, |
||||
dicUrl: '/api/logpm-basicdata/carrier/dictionary', |
||||
options: [], |
||||
rules: [{ required: true, message: '请选择承运商!', trigger: 'blur' }], |
||||
}, |
||||
{ |
||||
label: '运输协议', |
||||
prop: 'transportationAgreement', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '备注', |
||||
prop: 'notes', |
||||
type: 'input', |
||||
}, |
||||
], |
||||
imgOption: [ |
||||
{ |
||||
label: '人证合照照片', |
||||
prop: 'licensePeoplePhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '身份证正面照片', |
||||
prop: 'idCardFrontPhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '身份证背面照片', |
||||
prop: 'idCardBackPhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '驾驶证照片', |
||||
prop: 'driverLicensePhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '驾驶证背面照片', |
||||
prop: 'driverLicensePhotoBack', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
], |
||||
rules: {}, |
||||
/** 头部 */ |
||||
headers: { |
||||
'Blade-Auth': 'bearer ' + getToken(), |
||||
}, |
||||
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]; |
||||
}, |
||||
}, |
||||
], |
||||
/** loading */ |
||||
loadingObj: { |
||||
/** 表格loading */ |
||||
loading: false, |
||||
/** 页面loading */ |
||||
pageLoading: false, |
||||
}, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['permission']), |
||||
permissionList() { |
||||
return { |
||||
addBtn: this.validData(this.permission.basicdataDriverArtery_add, false), |
||||
}; |
||||
}, |
||||
}, |
||||
async created() { |
||||
console.log('created'); |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
await Promise.all([this.onLoad(), this.hanleOptions()]); |
||||
this.rules = this.getRules(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}, |
||||
methods: { |
||||
/** 获取验证规则 */ |
||||
getRules() { |
||||
const _rulesArr = {}; |
||||
|
||||
for (let i = 0; i < this.option.length; i++) { |
||||
const value = this.option[i]; |
||||
|
||||
if (value.rules && value.rules.length > 0) { |
||||
_rulesArr[value.prop] = value.rules; |
||||
} |
||||
|
||||
return _rulesArr; |
||||
} |
||||
}, |
||||
/** 查询车辆绑定情况 */ |
||||
getVehiclede() { |
||||
getVehicle().then(res => { |
||||
console.log('车辆信息', res.data.data); |
||||
res.data.data.map(v => {}); |
||||
}); |
||||
}, |
||||
/** 获取复选框的值 */ |
||||
async hanleOptions() { |
||||
const res = await Promise.all([ |
||||
// 司机类型 |
||||
getDictionaryBiz('basic_driver_type'), |
||||
// 职务类型 |
||||
getDictionaryBiz('basic_driverjob_type'), |
||||
// 准驾车型 |
||||
getDictionaryBiz('basic_driving_type'), |
||||
// 性别 |
||||
getDictionaryBiz('sex'), |
||||
// 银行类型 |
||||
getDictionaryBiz('basic_bank_type'), |
||||
// 绑定车辆 |
||||
getVehicle(), |
||||
// 仓库 |
||||
getListName({ name: '' }), |
||||
// 承运商 |
||||
getDictionary(), |
||||
]); |
||||
|
||||
const _nameArr = [ |
||||
'司机类型', |
||||
'职务类型', |
||||
'准驾车型', |
||||
'性别', |
||||
'银行类型', |
||||
'绑定车辆', |
||||
'仓库', |
||||
'承运商', |
||||
]; |
||||
|
||||
for (let i = 0; i < this.option.length; i++) { |
||||
const value = this.option[i]; |
||||
|
||||
const _index = _nameArr.indexOf(value.label); |
||||
if (_index === -1) continue; |
||||
const response = res[_index]; |
||||
console.log('response :>> ', response); |
||||
const { code } = response.data; |
||||
const data = response.data.data || []; |
||||
|
||||
if (code !== 200) continue; |
||||
if (value.label === '绑定车辆') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].vehicleNub, |
||||
}); |
||||
} |
||||
|
||||
value.options = _data; |
||||
} else if (value.label === '仓库') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].name, |
||||
}); |
||||
} |
||||
value.options = _data; |
||||
} else if (value.label === '承运商') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].carrierName, |
||||
}); |
||||
} |
||||
value.options = _data; |
||||
} else value.options = data; |
||||
} |
||||
console.log('res :>> ', res); |
||||
}, |
||||
/** 上传前 */ |
||||
handleBeforeUpload(file) { |
||||
const isJPG = file.type === 'image/jpeg'; |
||||
const isPNG = file.type === 'image/png'; |
||||
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
||||
if (!isJPG && !isPNG) { |
||||
this.$message.error('上传图片只能是 JPG 或 PNG 格式!'); |
||||
} |
||||
if (!isLt2M) { |
||||
this.$message.error('上传图片大小不能超过 2MB!'); |
||||
} else { |
||||
return (isJPG || isPNG) && isLt2M; |
||||
} |
||||
|
||||
/* let that = this; |
||||
// ?通过FormData构造函数创建一个空对象 |
||||
let formData = new FormData(); |
||||
let reader = new FileReader(); |
||||
// ?将读取到的文件编码成DataURL |
||||
reader.readAsDataURL(file); |
||||
// ?压缩图片 |
||||
reader.onload = function (ev) { |
||||
try { |
||||
// ?读取图片来获得上传图片的宽高 |
||||
let img = new Image(); |
||||
img.src = ev.target.result; |
||||
img.onload = function (ev) { |
||||
// ?将图片绘制到canvas画布上进行压缩 |
||||
let canvas = document.createElement('canvas'); |
||||
let context = canvas.getContext('2d'); |
||||
let imgwidth = img.width; |
||||
let imgHeight = img.height; |
||||
// ?按比例缩放后图片宽高; |
||||
let targetwidth = imgwidth; |
||||
let targetHeight = imgHeight; |
||||
// ?/如果原图宽大于最大宽度 |
||||
if (targetWidth > targetHeight) { |
||||
// ?原图宽高比例 |
||||
let scale = targetHeight / 1280; |
||||
targetHeight = 1280; |
||||
targetWidth = targetwidth / scale; |
||||
} else { |
||||
// ?原图宽高比例 |
||||
let scale = targetWidth / 1280; |
||||
targetWidth = 1280; |
||||
targetHeight = targetHeight / scale; |
||||
} |
||||
// ?缩放后高度仍然大于最大高度继续按比例缩小 |
||||
canvas.width = targetwidth; //canvas的宽=图片的宽 |
||||
canvas.height = targetHeight; //canvas的高=图片的高 |
||||
context.clearRect(0, 0, canvas.width, canvas.height); |
||||
context.drawImage(this, 0, 0, canvas.width, canvas.height); |
||||
let data = ''; |
||||
// ?如果图片小于0.6Mb，不进行压缩，并返回二进制流 |
||||
if (file.size <= 628288) { |
||||
data = canvas.toDataURL('image/jpeg'); |
||||
formData.append('file', file); |
||||
that.handleChange(file); |
||||
} |
||||
// ?如果图片大于e.6Mb，进行压缩，并返回二进制流 |
||||
else { |
||||
// todo 压缩文件大小比例 |
||||
data = canvas.toDataURL('image/jpeg', 0.4); |
||||
let paper = that.GLOBAL.dataURLtoFile(data, file.name); |
||||
formData.append('file', paper); |
||||
console.log('paper :>> ', paper); |
||||
} |
||||
}; |
||||
} catch (error) { |
||||
console.log('出现错误', error); |
||||
} |
||||
}; */ |
||||
}, |
||||
/** 上传成功 */ |
||||
handleUpLoadSuccess(file, item) { |
||||
console.log('file :>> ', file); |
||||
console.log(' this.form :>> ', this.form); |
||||
if (file.code !== 200) return; |
||||
this.form[item.prop] = file.data.link; |
||||
}, |
||||
/** 移除图片 */ |
||||
handleRemoveImg(item) { |
||||
delete this.form[item.prop]; |
||||
}, |
||||
handleImgError(item) { |
||||
this.$message.error(item.label + '仅需上传一张图片'); |
||||
}, |
||||
handlePreview(file) { |
||||
console.log('file :>> ', file); |
||||
}, |
||||
async onLoad() { |
||||
const _id = this.$route.query.id; |
||||
if (!_id) return; |
||||
const res = await getDetail(_id); |
||||
|
||||
const { code, data } = res.data; |
||||
if (code !== 200) return; |
||||
const _data = data; |
||||
this.form = { |
||||
..._data, |
||||
}; |
||||
|
||||
this.form.bindVehicles = _data.bindVehicles && _data.bindVehicles.split(','); |
||||
this.form.warehouseIds = _data.warehouses.map(val => val.warehouseId); |
||||
console.log('_data :>> ', _data); |
||||
}, |
||||
/** 新增 */ |
||||
async handleAdd() { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
const submitData = { ...this.form }; |
||||
submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(','); |
||||
submitData.phone = this.form.phone.trim(); |
||||
|
||||
const res = await add(submitData); |
||||
const { code, msg } = res.data; |
||||
if (code !== 200) return; |
||||
this.$message.success(msg); |
||||
|
||||
ElMessageBox.confirm('是否继续添加?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
distinguishCancelAndClose: true, |
||||
type: 'warning', |
||||
}) |
||||
.then(() => { |
||||
this.$refs.formRef.resetFields(); |
||||
}) |
||||
.catch(() => this.back()); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}, |
||||
/** 编辑 */ |
||||
async handleEdit() { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
const submitData = { ...this.form }; |
||||
submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(','); |
||||
submitData.phone = this.form.phone.trim(); |
||||
|
||||
const res = await update(submitData); |
||||
const { code, msg } = res.data; |
||||
if (code !== 200) return; |
||||
this.$message.success(msg); |
||||
|
||||
this.back(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}, |
||||
submitForm() { |
||||
this.$refs.formRef.validate(async valid => { |
||||
if (!valid) return; |
||||
console.log('this.form :>> ', this.form); |
||||
ElMessageBox.confirm('是否确定提交?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
const { type } = this.$route.query; |
||||
// 新增 |
||||
if (type === 'add') this.handleAdd(); |
||||
else if (type === 'edit') this.handleEdit(); |
||||
}); |
||||
}); |
||||
}, |
||||
/** 重置 */ |
||||
handleReset() { |
||||
ElMessageBox.confirm('是否重置数据?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}).then(() => { |
||||
const { type } = this.$route.query; |
||||
// 新增 |
||||
this.$refs.formRef.resetFields(); |
||||
if (type === 'edit') this.onLoad(); |
||||
}); |
||||
}, |
||||
back() { |
||||
const { backPath } = this.$route.query; |
||||
this.$store.commit('DEL_TAG_CURRENT'); |
||||
backPath ? this.$route.push({ path: backPath }) : this.$router.go(-1); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
:deep(.header_search .el-date-editor.el-input__wrapper) { |
||||
height: 100% !important; |
||||
} |
||||
|
||||
// 标题 |
||||
:deep(.el-divider__text.is-left) { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
.w100 { |
||||
width: 100% !important; |
||||
} |
||||
|
||||
// 数字输入框 |
||||
:deep(.el-input-number .el-input__inner) { |
||||
text-align: left; |
||||
} |
||||
|
||||
// 日期选择框 |
||||
:deep(.el-date-editor--date) { |
||||
width: 100% !important; |
||||
height: 100% !important; |
||||
} |
||||
|
||||
.img-container { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 147px; |
||||
height: 147px; |
||||
display: block; |
||||
} |
||||
|
||||
.upLoadImg_box { |
||||
position: relative; |
||||
|
||||
.clearIcon { |
||||
opacity: 0; |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 10px; |
||||
transition: all 0.3s; |
||||
width: 30px; |
||||
height: 30px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background-color: #fff; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
&:hover { |
||||
.clearIcon { |
||||
cursor: pointer; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.submit_container { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,605 @@
|
||||
<template> |
||||
<basic-container v-loading="loadingObj.pageLoading"> |
||||
<div class="avue-crud"> |
||||
<el-form label-width="140px" ref="formRef" :inline="true" :model="form"> |
||||
<el-form-item |
||||
style="width: 30%" |
||||
:label="item.label" |
||||
v-for="item in option" |
||||
:key="item.prop" |
||||
:prop="item.prop" |
||||
> |
||||
<!-- 输入框 --> |
||||
<el-input |
||||
readonly |
||||
clearable |
||||
v-model="form[item.prop]" |
||||
@input="() => item.input && item.input(form[item.prop], item)" |
||||
v-if="item.type == 'input'" |
||||
/> |
||||
|
||||
<!-- 数字输入框 --> |
||||
<el-input-number |
||||
readonly |
||||
v-model="form[item.prop]" |
||||
@input="() => item.input && item.input(form[item.prop], item)" |
||||
clearable |
||||
v-else-if="item.type == 'number'" |
||||
:precision="item.precision" |
||||
:min="item.min || 0" |
||||
:controls="false" |
||||
class="w100" |
||||
:value-on-clear="item.min || 0" |
||||
/> |
||||
|
||||
<!-- 日期 --> |
||||
<el-date-picker |
||||
readonly |
||||
v-model="form[item.prop]" |
||||
v-else-if="item.type == 'date'" |
||||
clearable |
||||
type="date" |
||||
:disabled-date="disabledDate" |
||||
class="w100" |
||||
:value-format="item.valueFormat || 'yyyy-MM-dd'" |
||||
/> |
||||
|
||||
<!-- 下拉框 --> |
||||
<el-select |
||||
disabled |
||||
v-else-if="item.type == 'select'" |
||||
v-model="form[item.prop]" |
||||
class="w100" |
||||
clearable |
||||
:multiple="item.multiple || false" |
||||
:filterable="item.filterable || false" |
||||
> |
||||
<el-option |
||||
v-for="value in item.options" |
||||
:key="value.dictKey" |
||||
:label="value.dictValue" |
||||
:value="value.dictKey" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<div class="img-container"> |
||||
<el-form-item |
||||
style="width: 30%" |
||||
:label="item.label" |
||||
v-for="item in imgOption" |
||||
:key="item.prop" |
||||
:prop="item.prop" |
||||
> |
||||
<div v-if="form[item.prop]" @click.stop class="upLoadImg_box"> |
||||
<el-image |
||||
:src="form[item.prop]" |
||||
class="avatar" |
||||
:preview-src-list="[form[item.prop]]" |
||||
/> |
||||
</div> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<div class="submit_container"> |
||||
<el-button icon="CircleClose" @click="back">关 闭</el-button> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getList, |
||||
getDetail, |
||||
add, |
||||
update, |
||||
remove, |
||||
getPage, |
||||
} from '@/api/basicdata/basicdataDriverArtery'; |
||||
/** 获取字典 */ |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { getVehicle, getListName, getDictionary } from '@/api/basicdata/basicdataVehicle'; |
||||
import { mapGetters } from 'vuex'; |
||||
import { getToken } from '@/utils/auth'; |
||||
import { downloadXls, setNodeHeight, debounce } from '@/utils/util'; |
||||
import { ElMessageBox } from 'element-plus'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
// 表单数据 |
||||
form: {}, |
||||
option: [ |
||||
{ |
||||
label: '姓名', |
||||
prop: 'name', |
||||
type: 'input', |
||||
rules: [{ required: true, message: '请输入姓名!', trigger: ['blur', 'change'] }], |
||||
}, |
||||
{ |
||||
label: '手机号码', |
||||
prop: 'phone', |
||||
type: 'input', |
||||
precision: 0, |
||||
blur(payload) { |
||||
console.log('payload :>> ', payload); |
||||
payload.value = payload.value + 1; |
||||
console.log('111 :>> ', 111); |
||||
}, |
||||
|
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
message: '请输入电话号码', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '司机类型', |
||||
prop: 'type', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driver_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '职务类型', |
||||
prop: 'jobType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driverjob_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '准驾车型', |
||||
prop: 'drivingType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driving_type', |
||||
options: [], |
||||
}, |
||||
|
||||
{ |
||||
label: '绑定车辆', |
||||
prop: 'bindVehicles', |
||||
filterable: true, |
||||
type: 'select', |
||||
remote: true, |
||||
multiple: true, |
||||
// dicData: [], |
||||
dicUrl: '/api/logpm-basicdata/vehicle/dictionary?vehicleNub={{key}}', |
||||
options: [], |
||||
multiple: true, |
||||
}, |
||||
{ |
||||
label: '合同开始时间', |
||||
prop: 'contractStartTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '合同结束时间', |
||||
prop: 'contractEndTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '身份证号', |
||||
prop: 'idCard', |
||||
type: 'number', |
||||
}, |
||||
{ |
||||
label: '性别', |
||||
prop: 'gender', |
||||
filterable: true, |
||||
type: 'select', |
||||
|
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=sex', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '仓库', |
||||
prop: 'warehouseIds', |
||||
filterable: true, |
||||
type: 'select', |
||||
remote: true, |
||||
dicUrl: '/logpm-basicdata/warehouse/listName?name={{key}}', |
||||
options: [], |
||||
rules: [{ required: true, message: '请选择仓库!', trigger: 'blur' }], |
||||
multiple: true, |
||||
}, |
||||
{ |
||||
label: '居住地址', |
||||
prop: 'residentialAddress', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '银行类型', |
||||
prop: 'bankType', |
||||
filterable: true, |
||||
type: 'select', |
||||
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_bank_type', |
||||
options: [], |
||||
}, |
||||
{ |
||||
label: '银行卡号', |
||||
prop: 'bankCardNub', |
||||
type: 'number', |
||||
}, |
||||
{ |
||||
label: '驾驶证号', |
||||
prop: 'driverLicenseNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '驾驶证发证机关', |
||||
prop: 'driverLicenseOrgan', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '驾驶证起始日期', |
||||
prop: 'driverLicenseStartTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '驾驶证到期日期', |
||||
prop: 'driverLicenseEndTime', |
||||
type: 'date', |
||||
format: 'YYYY-MM-DD', |
||||
valueFormat: 'YYYY-MM-DD', |
||||
}, |
||||
{ |
||||
label: '从业资格证编号', |
||||
prop: 'employeeQualificationNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '道路经营许可证号', |
||||
prop: 'roadOperationLicenseNub', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '承运商', |
||||
prop: 'carrierId', |
||||
filterable: true, |
||||
type: 'select', |
||||
filterable: true, |
||||
dicUrl: '/api/logpm-basicdata/carrier/dictionary', |
||||
options: [], |
||||
rules: [{ required: true, message: '请选择承运商!', trigger: 'blur' }], |
||||
}, |
||||
{ |
||||
label: '运输协议', |
||||
prop: 'transportationAgreement', |
||||
type: 'input', |
||||
}, |
||||
{ |
||||
label: '备注', |
||||
prop: 'notes', |
||||
type: 'input', |
||||
}, |
||||
], |
||||
imgOption: [ |
||||
{ |
||||
label: '人证合照照片', |
||||
prop: 'licensePeoplePhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '身份证正面照片', |
||||
prop: 'idCardFrontPhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '身份证背面照片', |
||||
prop: 'idCardBackPhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '驾驶证照片', |
||||
prop: 'driverLicensePhoto', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
{ |
||||
label: '驾驶证背面照片', |
||||
prop: 'driverLicensePhotoBack', |
||||
type: 'upload', |
||||
dataType: 'string', |
||||
listType: 'picture-img', |
||||
hide: true, |
||||
multiple: false, |
||||
action: '/blade-resource/oss/endpoint/put-file', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
}, |
||||
], |
||||
rules: {}, |
||||
/** 头部 */ |
||||
headers: { |
||||
'Blade-Auth': 'bearer ' + getToken(), |
||||
}, |
||||
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]; |
||||
}, |
||||
}, |
||||
], |
||||
/** loading */ |
||||
loadingObj: { |
||||
/** 表格loading */ |
||||
loading: false, |
||||
/** 页面loading */ |
||||
pageLoading: false, |
||||
}, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['permission']), |
||||
permissionList() { |
||||
return { |
||||
addBtn: this.validData(this.permission.basicdataDriverArtery_add, false), |
||||
}; |
||||
}, |
||||
}, |
||||
async created() { |
||||
try { |
||||
this.loadingObj.pageLoading = true; |
||||
|
||||
await Promise.all([this.onLoad(), this.hanleOptions()]); |
||||
this.rules = this.getRules(); |
||||
} catch (error) { |
||||
console.log('error :>> ', error); |
||||
} finally { |
||||
this.loadingObj.pageLoading = false; |
||||
} |
||||
}, |
||||
methods: { |
||||
/** 获取验证规则 */ |
||||
getRules() { |
||||
const _rulesArr = {}; |
||||
|
||||
for (let i = 0; i < this.option.length; i++) { |
||||
const value = this.option[i]; |
||||
|
||||
if (value.rules && value.rules.length > 0) { |
||||
_rulesArr[value.prop] = value.rules; |
||||
} |
||||
|
||||
return _rulesArr; |
||||
} |
||||
}, |
||||
/** 查询车辆绑定情况 */ |
||||
getVehiclede() { |
||||
getVehicle().then(res => { |
||||
console.log('车辆信息', res.data.data); |
||||
res.data.data.map(v => {}); |
||||
}); |
||||
}, |
||||
/** 获取复选框的值 */ |
||||
async hanleOptions() { |
||||
const res = await Promise.all([ |
||||
// 司机类型 |
||||
getDictionaryBiz('basic_driver_type'), |
||||
// 职务类型 |
||||
getDictionaryBiz('basic_driverjob_type'), |
||||
// 准驾车型 |
||||
getDictionaryBiz('basic_driving_type'), |
||||
// 性别 |
||||
getDictionaryBiz('sex'), |
||||
// 银行类型 |
||||
getDictionaryBiz('basic_bank_type'), |
||||
// 绑定车辆 |
||||
getVehicle(), |
||||
// 仓库 |
||||
getListName({ name: '' }), |
||||
// 承运商 |
||||
getDictionary(), |
||||
]); |
||||
|
||||
const _nameArr = [ |
||||
'司机类型', |
||||
'职务类型', |
||||
'准驾车型', |
||||
'性别', |
||||
'银行类型', |
||||
'绑定车辆', |
||||
'仓库', |
||||
'承运商', |
||||
]; |
||||
|
||||
for (let i = 0; i < this.option.length; i++) { |
||||
const value = this.option[i]; |
||||
|
||||
const _index = _nameArr.indexOf(value.label); |
||||
if (_index === -1) continue; |
||||
const response = res[_index]; |
||||
console.log('response :>> ', response); |
||||
const { code } = response.data; |
||||
const data = response.data.data || []; |
||||
|
||||
if (code !== 200) continue; |
||||
if (value.label === '绑定车辆') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].vehicleNub, |
||||
}); |
||||
} |
||||
|
||||
value.options = _data; |
||||
} else if (value.label === '仓库') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].name, |
||||
}); |
||||
} |
||||
value.options = _data; |
||||
} else if (value.label === '承运商') { |
||||
const _data = []; |
||||
|
||||
for (let index = 0; index < data.length; index++) { |
||||
_data.push({ |
||||
dictKey: data[index].id, |
||||
dictValue: data[index].carrierName, |
||||
}); |
||||
} |
||||
value.options = _data; |
||||
} else value.options = data; |
||||
} |
||||
console.log('res :>> ', res); |
||||
}, |
||||
async onLoad() { |
||||
const _id = this.$route.query.id; |
||||
if (!_id) return; |
||||
const res = await getDetail(_id); |
||||
|
||||
const { code, data } = res.data; |
||||
if (code !== 200) return; |
||||
const _data = data; |
||||
this.form = { |
||||
..._data, |
||||
}; |
||||
|
||||
this.form.bindVehicles = _data.bindVehicles && _data.bindVehicles.split(','); |
||||
this.form.warehouseIds = _data.warehouses.map(val => val.warehouseId); |
||||
console.log('_data :>> ', _data); |
||||
}, |
||||
back() { |
||||
const { backPath } = this.$route.query; |
||||
this.$store.commit('DEL_TAG_CURRENT'); |
||||
backPath ? this.$route.push({ path: backPath }) : this.$router.go(-1); |
||||
}, |
||||
}, |
||||
watch: { |
||||
'$route.query.id': { |
||||
handler(val) { |
||||
if (this.$route.path !== '/basicdata/driverArtery/basicdataDriverArteryView') return; |
||||
this.$refs.formRef.resetFields(); |
||||
this.onLoad(); |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
:deep(.header_search .el-date-editor.el-input__wrapper) { |
||||
height: 100% !important; |
||||
} |
||||
|
||||
// 标题 |
||||
:deep(.el-divider__text.is-left) { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
.w100 { |
||||
width: 100% !important; |
||||
} |
||||
|
||||
// 数字输入框 |
||||
:deep(.el-input-number .el-input__inner) { |
||||
text-align: left; |
||||
} |
||||
|
||||
// 日期选择框 |
||||
:deep(.el-date-editor--date) { |
||||
width: 100% !important; |
||||
height: 100% !important; |
||||
} |
||||
|
||||
.img-container { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 147px; |
||||
height: 147px; |
||||
display: block; |
||||
} |
||||
|
||||
.upLoadImg_box { |
||||
position: relative; |
||||
} |
||||
|
||||
.submit_container { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue