Browse Source
feat(inspection): 新增费用明细和附件管理功能
feat(inspection): 新增费用明细和附件管理功能
- 实现费用明细表格展示、新增、编辑、删除功能 - 集成字典选择器用于费用类型选择 - 添加附件上传、下载、删除管理功能 - 实现申请单关联费用功能 - 新增待验货申请列表页面 - 添加多个页签组件用于展示不同业务信息master
qiankanghui
3 months ago
10 changed files with 1387 additions and 358 deletions
-
66src/api/inspection/srmFee.js
-
266src/views/modules/inspection/com_feeDetailTab.vue
-
2src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
-
91src/views/modules/inspection/com_inspectionRequestFeeTab.vue
-
244src/views/modules/inspection/com_requestFeeTab.vue
-
128src/views/modules/inspection/inspectionPendingList.vue
-
118src/views/modules/inspection/inspectionRequestAudit.vue
-
170src/views/modules/inspection/inspectionRequestList.vue
-
142src/views/modules/inspection/inspectionScheduleList.vue
-
518src/views/modules/inspection/srmFeeList.vue
@ -0,0 +1,66 @@ |
|||
import { createAPI } from '@/utils/httpRequest.js' |
|||
|
|||
/** |
|||
* 分页查询费用主记录列表 |
|||
*/ |
|||
export const searchFeeHeaderList = (data) => createAPI(`/inspection/fee/searchFeeHeaderList`, 'post', data) |
|||
|
|||
/** |
|||
* 根据费用单号查询主记录 |
|||
*/ |
|||
export const getFeeHeaderByNo = (params) => createAPI(`/inspection/fee/getFeeHeaderByNo`, 'post', params) |
|||
|
|||
/** |
|||
* 创建费用主记录 |
|||
*/ |
|||
export const createFeeHeader = (data) => createAPI(`/inspection/fee/createFeeHeader`, 'post', data) |
|||
|
|||
/** |
|||
* 更新费用主记录 |
|||
*/ |
|||
export const updateFeeHeader = (data) => createAPI(`/inspection/fee/updateFeeHeader`, 'post', data) |
|||
|
|||
/** |
|||
* 删除费用记录 |
|||
*/ |
|||
export const deleteFeeRecord = (params) => createAPI(`/inspection/fee/deleteFeeRecord`, 'post', params) |
|||
|
|||
/** |
|||
* 查询费用明细列表 |
|||
*/ |
|||
export const getFeeDetailList = (params) => createAPI(`/inspection/fee/getFeeDetailList`, 'post', params) |
|||
|
|||
/** |
|||
* 添加费用明细（单条） |
|||
*/ |
|||
export const addFeeDetail = (data) => createAPI(`/inspection/fee/addFeeDetail`, 'post', data) |
|||
|
|||
/** |
|||
* 更新费用明细 |
|||
*/ |
|||
export const updateFeeDetail = (data) => createAPI(`/inspection/fee/updateFeeDetail`, 'post', data) |
|||
|
|||
/** |
|||
* 删除费用明细 |
|||
*/ |
|||
export const deleteFeeDetail = (params) => createAPI(`/inspection/fee/deleteFeeDetail`, 'post', params) |
|||
|
|||
/** |
|||
* 查询关联的申请单列表 |
|||
*/ |
|||
export const getRequestFeeList = (params) => createAPI(`/inspection/fee/getRequestFeeList`, 'post', params) |
|||
|
|||
/** |
|||
* 添加关联申请单（批量） |
|||
*/ |
|||
export const addRequestFees = (data) => createAPI(`/inspection/fee/addRequestFees`, 'post', data) |
|||
|
|||
/** |
|||
* 删除关联申请单 |
|||
*/ |
|||
export const deleteRequestFee = (params) => createAPI(`/inspection/fee/deleteRequestFee`, 'post', params) |
|||
|
|||
/** |
|||
* 根据申请单号查询费用明细 |
|||
*/ |
|||
export const getFeeDetailByRequestNo = (data) => createAPI(`/inspection/fee/getFeeDetailByRequestNo`, 'post', data) |
|||
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<div class="fee-detail-tab"> |
|||
<div style="margin-bottom: 5px;"> |
|||
<el-button type="primary" size="small" @click="handleAdd">新增明细</el-button> |
|||
</div> |
|||
|
|||
<el-table |
|||
:data="detailList" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="loading" |
|||
style="width: 100%;"> |
|||
<el-table-column type="index" label="行号" header-align="center" align="center" width="60"/> |
|||
<el-table-column prop="feeType" label="费用类型" header-align="center" align="left" min-width="150"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.feeType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="amount" label="金额" header-align="center" align="right" width="120"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.amount ? scope.row.amount.toFixed(2) : '0.00' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" label="备注" header-align="center" align="left" min-width="200"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.remark }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" header-align="center" align="center" width="150" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-link type="primary" @click="handleEdit(scope.row)" style="margin-right: 10px;">编辑</el-link> |
|||
<el-link type="danger" @click="handleDelete(scope.row)">删除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 新增/编辑弹窗 --> |
|||
<el-dialog |
|||
:title="dialogTitle" |
|||
:visible.sync="dialogVisible" |
|||
width="500px" |
|||
custom-class="custom-dialog" |
|||
:close-on-click-modal="false"> |
|||
<el-form :model="formData" :rules="formRules" ref="formRef" label-position="top"> |
|||
<el-form-item label="费用类型" prop="feeType"> |
|||
<sys-dict-select |
|||
v-model="formData.feeType" |
|||
dict-type="fee_type" |
|||
placeholder="请选择费用类型" |
|||
width="50%" |
|||
filterable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="金额" prop="amount"> |
|||
<el-input-number |
|||
v-model="formData.amount" |
|||
:min="0" |
|||
:precision="2" |
|||
style="width: 50%"> |
|||
</el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input |
|||
v-model="formData.remark" |
|||
type="textarea" |
|||
:rows="3" |
|||
placeholder="请输入备注"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button> |
|||
<el-button @click="dialogVisible = false">取消</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getFeeDetailList, addFeeDetail, updateFeeDetail, deleteFeeDetail } from '@/api/inspection/srmFee.js' |
|||
import SysDictSelect from '@/components/dict/SysDictSelect.vue' |
|||
|
|||
export default { |
|||
name: 'FeeDetailTab', |
|||
components: { |
|||
SysDictSelect |
|||
}, |
|||
props: { |
|||
feeData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
tableHeight: { |
|||
type: Number, |
|||
default: 400 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
detailList: [], |
|||
loading: false, |
|||
dialogVisible: false, |
|||
dialogTitle: '新增明细', |
|||
submitLoading: false, |
|||
formData: { |
|||
feeType: '', |
|||
amount: 0, |
|||
remark: '' |
|||
}, |
|||
formRules: { |
|||
feeType: [ |
|||
{ required: true, message: '请输入费用类型', trigger: 'blur' } |
|||
], |
|||
amount: [ |
|||
{ required: true, message: '请输入金额', trigger: 'blur' } |
|||
] |
|||
}, |
|||
currentEditRow: null |
|||
} |
|||
}, |
|||
watch: { |
|||
'feeData.feeNo': { |
|||
handler(newVal) { |
|||
if (newVal) { |
|||
this.loadDetailList() |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载明细列表 |
|||
loadDetailList() { |
|||
if (!this.feeData.feeNo || !this.feeData.site) { |
|||
this.detailList = [] |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
const params = { |
|||
site: this.feeData.site, |
|||
feeNo: this.feeData.feeNo |
|||
} |
|||
|
|||
getFeeDetailList(params).then(({ data }) => { |
|||
if (data.code === 0 && data.details) { |
|||
this.detailList = data.details |
|||
} else { |
|||
this.detailList = [] |
|||
} |
|||
}).catch(() => { |
|||
this.detailList = [] |
|||
}).finally(() => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
|
|||
// 新增明细 |
|||
handleAdd() { |
|||
this.dialogTitle = '新增明细' |
|||
this.formData = { |
|||
feeType: '', |
|||
amount: 0, |
|||
remark: '' |
|||
} |
|||
this.currentEditRow = null |
|||
this.dialogVisible = true |
|||
this.$nextTick(() => { |
|||
if (this.$refs.formRef) { |
|||
this.$refs.formRef.clearValidate() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 编辑 |
|||
handleEdit(row) { |
|||
this.dialogTitle = '编辑明细' |
|||
this.formData = { |
|||
feeType: row.feeType, |
|||
amount: row.amount, |
|||
remark: row.remark |
|||
} |
|||
this.currentEditRow = row |
|||
this.dialogVisible = true |
|||
this.$nextTick(() => { |
|||
if (this.$refs.formRef) { |
|||
this.$refs.formRef.clearValidate() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 提交表单 |
|||
handleSubmit() { |
|||
this.$refs.formRef.validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.submitLoading = true |
|||
const params = { |
|||
site: this.feeData.site, |
|||
feeNo: this.feeData.feeNo, |
|||
feeType: this.formData.feeType, |
|||
amount: this.formData.amount || 0, |
|||
remark: this.formData.remark || '', |
|||
createBy: this.$store.state.user.name, |
|||
updateBy: this.$store.state.user.name |
|||
} |
|||
// 编辑时传 itemNo |
|||
if (this.currentEditRow) { |
|||
params.itemNo = this.currentEditRow.itemNo |
|||
} |
|||
const apiCall = this.currentEditRow |
|||
? updateFeeDetail(params) |
|||
: addFeeDetail(params) |
|||
apiCall.then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('保存成功') |
|||
this.dialogVisible = false |
|||
this.loadDetailList() |
|||
} else { |
|||
this.$message.error(data.msg || '保存失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('保存失败') |
|||
}).finally(() => { |
|||
this.submitLoading = false |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 删除 |
|||
handleDelete(row) { |
|||
this.$confirm('确定要删除该明细吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
feeNo: row.feeNo, |
|||
itemNo: row.itemNo |
|||
} |
|||
|
|||
deleteFeeDetail(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('删除成功') |
|||
this.loadDetailList() |
|||
} else { |
|||
this.$message.error(data.msg || '删除失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('删除失败') |
|||
}) |
|||
}).catch(() => {}) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.custom-dialog .el-dialog__body { |
|||
min-height: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<div class="fee-request-tab"> |
|||
<el-table |
|||
:data="feeDetailList" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="loading" |
|||
style="width: 100%;"> |
|||
<el-table-column type="index" label="行号" header-align="center" align="center" width="60"/> |
|||
<el-table-column prop="feeNo" label="费用单号" header-align="center" align="left" min-width="120"/> |
|||
<el-table-column prop="feeType" label="费用类型" header-align="center" align="left" min-width="120"/> |
|||
<el-table-column prop="amount" label="金额" header-align="center" align="right" width="120"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.amount ? scope.row.amount.toFixed(2) : '0.00' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" label="备注" header-align="center" align="left" min-width="200"/> |
|||
<el-table-column prop="createBy" label="创建人" header-align="center" align="center" width="100"/> |
|||
<el-table-column prop="createDate" label="创建时间" header-align="center" align="center" width="160"/> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getFeeDetailByRequestNo } from '@/api/inspection/srmFee.js' |
|||
|
|||
export default { |
|||
name: 'InspectionRequestFeeTab', |
|||
props: { |
|||
detailData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
tableHeight: { |
|||
type: Number, |
|||
default: 400 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
feeDetailList: [], |
|||
loading: false |
|||
} |
|||
}, |
|||
watch: { |
|||
'detailData.requestNo': { |
|||
handler(newVal) { |
|||
if (newVal) { |
|||
this.loadFeeDetailList() |
|||
} else { |
|||
this.feeDetailList = [] |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
loadFeeDetailList() { |
|||
if (!this.detailData.requestNo || !this.detailData.site) { |
|||
this.feeDetailList = [] |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
const params = { |
|||
site: this.detailData.site, |
|||
requestNo: this.detailData.requestNo, |
|||
feeNo: '' |
|||
} |
|||
|
|||
getFeeDetailByRequestNo(params).then(({ data }) => { |
|||
if (data.code === 0 && data.details) { |
|||
this.feeDetailList = data.details |
|||
} else { |
|||
this.feeDetailList = [] |
|||
} |
|||
}).catch(() => { |
|||
this.feeDetailList = [] |
|||
}).finally(() => { |
|||
this.loading = false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.fee-request-tab { |
|||
padding: 0px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<div class="request-fee-tab"> |
|||
<div style="margin-bottom: 2px;"> |
|||
<el-button type="primary" size="small" @click="handleAddRequest">添加申请单</el-button> |
|||
</div> |
|||
|
|||
<el-table |
|||
:data="requestFeeList" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="loading" |
|||
style="width: 100%;"> |
|||
<el-table-column type="index" label="序号" header-align="center" align="center" width="60"/> |
|||
<el-table-column prop="requestNo" label="申请单号" header-align="center" align="left" min-width="150"/> |
|||
<el-table-column prop="createBy" label="关联人" header-align="center" align="left" width="120"/> |
|||
<el-table-column prop="createDate" label="关联时间" header-align="center" align="center" width="160"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.createDate | formatDate }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" header-align="center" align="center" width="100" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-link type="danger" @click="handleDelete(scope.row)">删除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 选择申请单弹窗 --> |
|||
<el-dialog |
|||
title="选择申请单" |
|||
:visible.sync="selectDialogVisible" |
|||
width="70%" |
|||
top="5vh"> |
|||
<el-form :inline="true" size="small"> |
|||
<el-form-item label="申请单号"> |
|||
<el-input v-model="searchRequestNo" placeholder="请输入申请单号" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="searchRequests">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-table |
|||
:data="availableRequests" |
|||
border |
|||
height="300" |
|||
@selection-change="handleSelectionChange" |
|||
v-loading="requestLoading"> |
|||
<el-table-column type="selection" width="55" align="center"/> |
|||
<el-table-column prop="requestNo" label="申请单号" header-align="center" align="left" min-width="150"/> |
|||
<el-table-column prop="supplierName" label="供应商名称" header-align="center" align="left" min-width="200"/> |
|||
<el-table-column prop="status" label="状态" header-align="center" align="center" width="100"/> |
|||
</el-table> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="confirmAddRequests">确定</el-button> |
|||
<el-button @click="selectDialogVisible = false">取消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getRequestFeeList, addRequestFees, deleteRequestFee } from '@/api/inspection/srmFee.js' |
|||
import { searchInspectionRequestHeaderList } from '@/api/inspection/inspectionRequestHeader.js' |
|||
|
|||
export default { |
|||
name: 'RequestFeeTab', |
|||
props: { |
|||
feeData: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
tableHeight: { |
|||
type: Number, |
|||
default: 400 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
requestFeeList: [], |
|||
loading: false, |
|||
selectDialogVisible: false, |
|||
availableRequests: [], |
|||
requestLoading: false, |
|||
selectedRequests: [], |
|||
searchRequestNo: '' |
|||
} |
|||
}, |
|||
filters: { |
|||
formatDate(value) { |
|||
if (!value) return '' |
|||
const date = new Date(value) |
|||
const year = date.getFullYear() |
|||
const month = String(date.getMonth() + 1).padStart(2, '0') |
|||
const day = String(date.getDate()).padStart(2, '0') |
|||
const hour = String(date.getHours()).padStart(2, '0') |
|||
const minute = String(date.getMinutes()).padStart(2, '0') |
|||
const second = String(date.getSeconds()).padStart(2, '0') |
|||
return `${year}-${month}-${day} ${hour}:${minute}:${second}` |
|||
} |
|||
}, |
|||
watch: { |
|||
'feeData.feeNo': { |
|||
handler(newVal) { |
|||
if (newVal) { |
|||
this.loadRequestFeeList() |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载关联申请单列表 |
|||
loadRequestFeeList() { |
|||
if (!this.feeData.feeNo || !this.feeData.site) { |
|||
this.requestFeeList = [] |
|||
return |
|||
} |
|||
|
|||
this.loading = true |
|||
const params = { |
|||
site: this.feeData.site, |
|||
feeNo: this.feeData.feeNo |
|||
} |
|||
|
|||
getRequestFeeList(params).then(({ data }) => { |
|||
if (data.code === 0 && data.requestFees) { |
|||
this.requestFeeList = data.requestFees |
|||
} else { |
|||
this.requestFeeList = [] |
|||
} |
|||
}).catch(() => { |
|||
this.requestFeeList = [] |
|||
}).finally(() => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
|
|||
// 打开选择申请单弹窗 |
|||
handleAddRequest() { |
|||
this.selectDialogVisible = true |
|||
this.searchRequests() |
|||
}, |
|||
|
|||
// 查询可申请单 |
|||
searchRequests() { |
|||
this.requestLoading = true |
|||
|
|||
const params = { |
|||
page: 1, |
|||
limit: 100, |
|||
site: this.$store.state.user.site |
|||
} |
|||
|
|||
if (this.searchRequestNo) { |
|||
params.requestNo = this.searchRequestNo |
|||
} |
|||
|
|||
searchInspectionRequestHeaderList(params).then(({ data }) => { |
|||
if (data.code === 0 && data.page) { |
|||
// 过滤掉已经关联的申请单 |
|||
const existingRequestNos = this.requestFeeList.map(item => item.requestNo) |
|||
this.availableRequests = data.page.list.filter(item => !existingRequestNos.includes(item.requestNo)) |
|||
} else { |
|||
this.availableRequests = [] |
|||
} |
|||
}).catch(() => { |
|||
this.availableRequests = [] |
|||
}).finally(() => { |
|||
this.requestLoading = false |
|||
}) |
|||
}, |
|||
|
|||
// 选择变化 |
|||
handleSelectionChange(selection) { |
|||
this.selectedRequests = selection |
|||
}, |
|||
|
|||
// 确认添加 |
|||
confirmAddRequests() { |
|||
if (this.selectedRequests.length === 0) { |
|||
this.$message.warning('请至少选择一个申请单') |
|||
return |
|||
} |
|||
|
|||
const requestNos = this.selectedRequests.map(item => item.requestNo) |
|||
|
|||
const params = { |
|||
site: this.feeData.site, |
|||
feeNo: this.feeData.feeNo, |
|||
currentUser: this.$store.state.user.name, |
|||
requestNos: requestNos |
|||
} |
|||
|
|||
addRequestFees(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('添加成功') |
|||
this.selectDialogVisible = false |
|||
this.loadRequestFeeList() |
|||
} else { |
|||
this.$message.error(data.msg || '添加失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('添加失败') |
|||
}) |
|||
}, |
|||
|
|||
// 删除关联 |
|||
handleDelete(row) { |
|||
this.$confirm('确定要删除该关联吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const params = { |
|||
site: row.site, |
|||
feeNo: row.feeNo, |
|||
requestNo: row.requestNo |
|||
} |
|||
|
|||
deleteRequestFee(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('删除成功') |
|||
this.loadRequestFeeList() |
|||
} else { |
|||
this.$message.error(data.msg || '删除失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('删除失败') |
|||
}) |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.request-fee-tab { |
|||
padding-top: 0; |
|||
padding-left: 0; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,518 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<!-- 查询条件 --> |
|||
<el-form :inline="true" label-position="top" class="search-form-inline"> |
|||
<div class="search-row"> |
|||
<el-form-item label="费用单号" class="search-item"> |
|||
<el-input v-model="searchData.feeNo" style="width: 120px" @keyup.enter.native="getMainData"/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="申请人" class="search-item" > |
|||
<el-input v-model="searchData.applyUser" style="width: 120px" @keyup.enter.native="getMainData"/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="费用日期" class="search-item"> |
|||
<el-date-picker |
|||
v-model="searchData.feeDate" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" |
|||
style="width: 100%;"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label=" " class="search-item search-btn-item"> |
|||
<el-button type="primary" @click="getMainData" style="">查询</el-button> |
|||
<el-button @click="handleAdd" type="primary" style="margin-left: 2px">新增</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
|
|||
<el-table |
|||
:height="height" |
|||
:data="mainDataList" |
|||
border |
|||
ref="mainTable" |
|||
highlight-current-row |
|||
@row-click="changeData" |
|||
v-loading="dataListLoading" |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
v-for="(item,index) in columnArray1" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed==''?false:item.fixed" |
|||
:min-width="item.columnWidth" |
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-link type="primary" style="cursor: pointer; margin-right: 10px;" @click="handleEdit(scope.row)">编辑</el-link> |
|||
<el-link type="danger" style="cursor: pointer;" @click="handleDelete(scope.row)">删除</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页插件 --> |
|||
<el-pagination style="margin-top: 0px" |
|||
@size-change="sizeChangeHandle" |
|||
@current-change="currentChangeHandle" |
|||
:current-page="pageIndex" |
|||
:page-sizes="[20, 50, 100, 200, 500]" |
|||
:page-size="pageSize" |
|||
:total="totalPage" |
|||
layout="total, sizes, prev, pager, next, jumper"> |
|||
</el-pagination> |
|||
|
|||
<!-- 详情页签 --> |
|||
<el-tabs v-model="activeTab" style="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card"> |
|||
<!-- 费用明细 --> |
|||
<el-tab-pane label="费用明细" name="detail"> |
|||
<fee-detail-tab ref="feeDetailTab" :fee-data="currentRow" :table-height="detailHeight" /> |
|||
</el-tab-pane> |
|||
<!-- 申请单清单 --> |
|||
<el-tab-pane label="申请单清单" name="request"> |
|||
<request-fee-tab ref="requestFeeTab" :fee-data="currentRow" :table-height="detailHeight" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
<!-- 新增弹窗 --> |
|||
<el-dialog |
|||
title="新增费用记录" |
|||
:visible.sync="addDialogVisible" |
|||
width="30%" |
|||
top="10vh" |
|||
:close-on-click-modal="false"> |
|||
<el-form :model="addFormData" :rules="addRules" ref="addFormData" label-width="100px" size="small" label-position="top"> |
|||
<el-form-item label="费用日期" prop="feeDate" > |
|||
<el-date-picker |
|||
v-model="addFormData.feeDate" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" |
|||
style="width: 50%"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="申请人" prop="applyUser"> |
|||
<el-input v-model="addFormData.applyUser" placeholder="请输入申请人" style="width: 50%"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="备注"> |
|||
<el-input |
|||
type="textarea" |
|||
v-model="addFormData.remark" |
|||
:autosize="{ minRows: 3, maxRows: 6 }" |
|||
placeholder="请输入备注"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="handleSaveAdd">保存</el-button> |
|||
<el-button @click="addDialogVisible = false">取消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { searchFeeHeaderList, createFeeHeader, updateFeeHeader, deleteFeeRecord } from '@/api/inspection/srmFee.js' |
|||
import FeeDetailTab from './com_feeDetailTab.vue' |
|||
import RequestFeeTab from './com_requestFeeTab.vue' |
|||
|
|||
export default { |
|||
name: 'SrmFeeList', |
|||
components: { |
|||
FeeDetailTab, |
|||
RequestFeeTab |
|||
}, |
|||
data() { |
|||
return { |
|||
functionId: this.$route.meta.menuId, |
|||
height: 400, |
|||
detailHeight: 400, |
|||
currentRow: {}, |
|||
activeTab: 'detail', |
|||
addDialogVisible: false, |
|||
addFormData: { |
|||
feeDate: '', |
|||
applyUser: '', |
|||
remark: '' |
|||
}, |
|||
addRules: { |
|||
feeDate: [ |
|||
{ required: true, message: '请选择费用日期', trigger: 'change' } |
|||
], |
|||
applyUser: [ |
|||
{ required: true, message: '请输入申请人', trigger: 'blur' } |
|||
] |
|||
}, |
|||
searchData: { |
|||
feeNo: '', |
|||
applyUser: '', |
|||
feeDate: '', |
|||
site: this.$store.state.user.site, |
|||
page: 1, |
|||
limit: 50 |
|||
}, |
|||
pageIndex: 1, |
|||
pageSize: 50, |
|||
totalPage: 0, |
|||
mainDataList: [], |
|||
dataListLoading: false, |
|||
columnArray1: [ |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1FeeNo', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'feeNo', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '费用单号', |
|||
columnWidth: '150', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1FeeDate', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'feeDate', |
|||
headerAlign: 'center', |
|||
align: 'center', |
|||
columnLabel: '费用日期', |
|||
columnWidth: '120', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1TotalAmount', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'totalAmount', |
|||
headerAlign: 'center', |
|||
align: 'right', |
|||
columnLabel: '总金额', |
|||
columnWidth: '120', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1ApplyUser', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'applyUser', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '申请人', |
|||
columnWidth: '100', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1CreatedBy', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'createdBy', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '创建人', |
|||
columnWidth: '100', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1CreatedDate', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'createdDate', |
|||
headerAlign: 'center', |
|||
align: 'center', |
|||
columnLabel: '创建时间', |
|||
columnWidth: '160', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
}, |
|||
{ |
|||
userId: this.$store.state.user.name, |
|||
functionId: this.functionId, |
|||
serialNumber: 'FeeTable1Remark', |
|||
tableId: 'FeeTable1', |
|||
tableName: '费用管理', |
|||
columnProp: 'remark', |
|||
headerAlign: 'center', |
|||
align: 'left', |
|||
columnLabel: '备注', |
|||
columnWidth: '200', |
|||
columnHidden: false, |
|||
columnImage: false, |
|||
columnSortable: false, |
|||
sortLv: 0, |
|||
status: true, |
|||
fixed: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.height = (window.innerHeight - 220) / 2 |
|||
this.detailHeight = (window.innerHeight - 220) / 2 |
|||
this.getMainData() |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 查询数据 |
|||
getMainData() { |
|||
console.log('开始查询费用列表...') |
|||
this.searchData.limit = this.pageSize |
|||
this.searchData.page = this.pageIndex |
|||
|
|||
this.dataListLoading = true |
|||
console.log('设置 loading 为 true') |
|||
|
|||
searchFeeHeaderList(this.searchData).then(({ data }) => { |
|||
console.log('接口返回数据:', data) |
|||
if (data && data.code === 0) { |
|||
this.mainDataList = data.page.list || [] |
|||
|
|||
this.pageIndex = data.page.currPage |
|||
this.pageSize = data.page.pageSize |
|||
this.totalPage = data.page.totalCount |
|||
|
|||
this.$nextTick(() => { |
|||
if (this.$refs.mainTable) { |
|||
this.$refs.mainTable.clearSelection() |
|||
} |
|||
}) |
|||
|
|||
// 判断是否有数据 |
|||
if (this.mainDataList.length > 0) { |
|||
this.$refs.mainTable.setCurrentRow(this.mainDataList[0]) |
|||
this.changeData(this.mainDataList[0]) |
|||
} else { |
|||
this.changeData(null) |
|||
} |
|||
} else { |
|||
console.error('查询失败:', data) |
|||
this.$message.error((data && data.msg) || '查询失败') |
|||
} |
|||
this.dataListLoading = false |
|||
console.log('设置 loading 为 false') |
|||
}).catch((error) => { |
|||
console.error('查询费用列表异常:', error) |
|||
this.$message.error('查询失败，请稍后重试') |
|||
this.dataListLoading = false |
|||
console.log('异常处理，设置 loading 为 false') |
|||
}) |
|||
}, |
|||
|
|||
// 每页数 |
|||
sizeChangeHandle(val) { |
|||
this.pageSize = val |
|||
this.pageIndex = 1 |
|||
this.getMainData() |
|||
}, |
|||
|
|||
// 当前页 |
|||
currentChangeHandle(val) { |
|||
this.pageIndex = val |
|||
this.getMainData() |
|||
}, |
|||
|
|||
// 行点击事件 |
|||
changeData(row) { |
|||
this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {} |
|||
}, |
|||
|
|||
// 页签点击事件 |
|||
handleTabClick(tab) { |
|||
if (tab.name === 'detail') { |
|||
this.$nextTick(() => { |
|||
if (this.$refs.feeDetailTab) { |
|||
this.$refs.feeDetailTab.loadDetailList() |
|||
} |
|||
}) |
|||
} else if (tab.name === 'request') { |
|||
this.$nextTick(() => { |
|||
if (this.$refs.requestFeeTab) { |
|||
this.$refs.requestFeeTab.loadRequestFeeList() |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 新增 |
|||
handleAdd() { |
|||
this.addDialogVisible = true |
|||
this.addFormData = { |
|||
feeDate: '', |
|||
applyUser: '', |
|||
remark: '' |
|||
} |
|||
if (this.$refs.addFormData) { |
|||
this.$refs.addFormData.clearValidate() |
|||
} |
|||
}, |
|||
|
|||
// 保存新增 |
|||
handleSaveAdd() { |
|||
this.$refs.addFormData.validate((valid) => { |
|||
if (valid) { |
|||
const params = { |
|||
site: this.$store.state.user.site, |
|||
feeDate: this.addFormData.feeDate, |
|||
applyUser: this.addFormData.applyUser, |
|||
remark: this.addFormData.remark, |
|||
createdBy: this.$store.state.user.name, |
|||
updateBy: this.$store.state.user.name |
|||
} |
|||
|
|||
createFeeHeader(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('创建成功') |
|||
this.addDialogVisible = false |
|||
this.getMainData() |
|||
} else { |
|||
this.$message.error(data.msg || '创建失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('创建失败') |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 编辑（切换到费用明细页签） |
|||
handleEdit(row) { |
|||
this.changeData(row) |
|||
this.activeTab = 'detail' |
|||
this.$nextTick(() => { |
|||
if (this.$refs.feeDetailTab) { |
|||
this.$refs.feeDetailTab.loadDetailList() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 删除 |
|||
handleDelete(row) { |
|||
this.$confirm('确定要删除该费用记录吗？删除后将同时删除明细和关联申请单。', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const params = { |
|||
site: row.site, |
|||
feeNo: row.feeNo |
|||
} |
|||
|
|||
deleteFeeRecord(params).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.$message.success('删除成功') |
|||
this.getMainData() |
|||
} else { |
|||
this.$message.error(data.msg || '删除失败') |
|||
} |
|||
}).catch(() => { |
|||
this.$message.error('删除失败') |
|||
}) |
|||
}).catch(() => {}) |
|||
} |
|||
}, |
|||
created() { |
|||
this.getMainData() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.search-form-inline { |
|||
background: #fff; |
|||
} |
|||
|
|||
.search-row { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
flex-wrap: nowrap; |
|||
gap: 15px; |
|||
} |
|||
|
|||
.search-item { |
|||
flex: none; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.search-btn-item { |
|||
flex: none; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.search-btn-item /deep/ .el-form-item__content { |
|||
line-height: normal; |
|||
} |
|||
|
|||
.search-item /deep/ .el-form-item__label { |
|||
font-size: 13px; |
|||
color: #606266; |
|||
padding-bottom: 5px; |
|||
line-height: 1; |
|||
height: auto; |
|||
} |
|||
|
|||
.search-item /deep/ .el-form-item__content { |
|||
line-height: normal; |
|||
} |
|||
|
|||
/deep/ .customer-tab .el-tabs__content { |
|||
padding: 5px !important; |
|||
} |
|||
|
|||
// 按钮样式（与 inspectionRequestList 保持一致） |
|||
.customer-bun-min { |
|||
padding: 7px 12px; |
|||
font-size: 12px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue