|
|
|
|
<template>
|
|
|
|
|
<basic-container>
|
|
|
|
|
<!-- 科目费用维护 -->
|
|
|
|
|
<avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
|
|
|
|
|
@row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
|
|
|
|
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
|
|
|
|
|
@refresh-change="refreshChange" @on-load="onLoad">
|
|
|
|
|
<template #menu-left>
|
|
|
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
|
|
|
|
|
<el-button type="success" icon="el-icon-upload">导入</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template #menu="scope">
|
|
|
|
|
<el-button type="text" @click="viewRow(scope.row)">详情</el-button>
|
|
|
|
|
<el-button type="text" @click="maintainRow(scope.row)">维护</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</avue-crud>
|
|
|
|
|
<el-dialog append-to-body title="新增" v-model="showAdd">
|
|
|
|
|
<el-form ref="addForm" :model="addForm" :rules="addRules">
|
|
|
|
|
<el-form-item label="费用科目" prop="expenseAccount">
|
|
|
|
|
<el-input v-model="addForm.expenseAccount" placeholder="请输入费用科目"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="showAdd = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitAdd">保 存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 维护弹窗 -->
|
|
|
|
|
<el-dialog append-to-body :title="title" v-model="showMaintain">
|
|
|
|
|
<el-form :inline="true" :model="maintainForm" ref="maintainForm" :rules="maintainRules">
|
|
|
|
|
<el-form-item label="费用分配方式" prop="distributeType">
|
|
|
|
|
<el-radio-group v-model="maintainForm.distributeType" :disabled="title == '详情'">
|
|
|
|
|
<el-radio label="1">按金额</el-radio>
|
|
|
|
|
<el-radio label="2">按比例</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="总费用金额" prop="totalCost">
|
|
|
|
|
<el-input-number v-model="maintainForm.totalCost" controls-position="right" :min="1" :disabled="title == '详情'"></el-input-number>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-table :data="tableData">
|
|
|
|
|
<el-table-column type="index"></el-table-column>
|
|
|
|
|
<el-table-column label="作业中心" prop="workCenter"></el-table-column>
|
|
|
|
|
<el-table-column label="比例" prop="ratio">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input-number v-model="scope.row.ratio" controls-position="right" :min="1" :max="100" :disabled="title == '详情'"></el-input-number>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="费用金额(元)" prop="money">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input-number v-model="scope.row.money" controls-position="right" :min="1" :disabled="title == '详情'"></el-input-number>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="showMaintain = false">取 消</el-button>
|
|
|
|
|
<el-button v-if="title == '维护'" type="primary" @click="submitMaintain">保 存</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</basic-container>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
data: [],
|
|
|
|
|
form: {},
|
|
|
|
|
distributeType:'',
|
|
|
|
|
loading: false,
|
|
|
|
|
showAdd:false,
|
|
|
|
|
title:'详情',
|
|
|
|
|
tableData:[],
|
|
|
|
|
addForm:{},
|
|
|
|
|
selectionList:[],
|
|
|
|
|
showMaintain:false,
|
|
|
|
|
addRules:{
|
|
|
|
|
expenseAccount:[{required:true,message:'请输入费用科目',trigger:'blur'}]
|
|
|
|
|
},
|
|
|
|
|
maintainForm:{},
|
|
|
|
|
maintainRules:{
|
|
|
|
|
totalCost:[{required:true,message:'请输入总费用金额',trigger:'blur'}]
|
|
|
|
|
},
|
|
|
|
|
page: {
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
total: 0,
|
|
|
|
|
},
|
|
|
|
|
option: {
|
|
|
|
|
height: 'auto',
|
|
|
|
|
calcHeight: 32,
|
|
|
|
|
tip: false,
|
|
|
|
|
size: 'medium',
|
|
|
|
|
simplePage: true,
|
|
|
|
|
searchShow: true,
|
|
|
|
|
searchMenuSpan: 6,
|
|
|
|
|
searchIcon: true,
|
|
|
|
|
searchIndex: 3,
|
|
|
|
|
tree: false,
|
|
|
|
|
border: true,
|
|
|
|
|
index: true,
|
|
|
|
|
selection: true,
|
|
|
|
|
viewBtn: false,
|
|
|
|
|
delBtn: false,
|
|
|
|
|
addBtn: false,
|
|
|
|
|
editBtn: false,
|
|
|
|
|
editBtnText: '修改',
|
|
|
|
|
viewBtnIcon: ' ',
|
|
|
|
|
delBtnIcon: ' ',
|
|
|
|
|
editBtnIcon: ' ',
|
|
|
|
|
viewBtnText: '详情',
|
|
|
|
|
labelWidth: 120,
|
|
|
|
|
searchLabelWidth: 120,
|
|
|
|
|
menuWidth: 220,
|
|
|
|
|
dialogWidth: 1200,
|
|
|
|
|
dialogClickModal: false,
|
|
|
|
|
searchEnter: true,
|
|
|
|
|
excelBtn: false,
|
|
|
|
|
filterBtn: true,
|
|
|
|
|
searchShowBtn: false,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
excelBtn: true,
|
|
|
|
|
columnSort: true,
|
|
|
|
|
index: false,
|
|
|
|
|
showOverflowTooltip: true,
|
|
|
|
|
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchLabelPosition:'left',
|
|
|
|
|
searchGutter:24,
|
|
|
|
|
searchSpan:6,
|
|
|
|
|
menuAlign: 'left',
|
|
|
|
|
gridBtn:false,
|
|
|
|
|
searchMenuPosition:'right',
|
|
|
|
|
addBtnIcon: ' ',
|
|
|
|
|
viewBtnIcon: ' ',
|
|
|
|
|
delBtnIcon: ' ',
|
|
|
|
|
editBtnIcon: ' ',
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
|
|
|
|
column: [
|
|
|
|
|
{
|
|
|
|
|
label: '费用科目',
|
|
|
|
|
prop: 'expenseAccount',
|
|
|
|
|
search: true,
|
|
|
|
|
sortable: true,
|
|
|
|
|
overHidden: true,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入费用科目',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '分配方式',
|
|
|
|
|
prop: 'distributeType',
|
|
|
|
|
type:'select',
|
|
|
|
|
search: false,
|
|
|
|
|
sortable: true,
|
|
|
|
|
overHidden: true,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入分配方式',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
dicData:[
|
|
|
|
|
{label:'按金额',value:'1'},
|
|
|
|
|
{label:'按比例',value:'2'},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '费用总金额(元)',
|
|
|
|
|
prop: 'totalCost',
|
|
|
|
|
search: false,
|
|
|
|
|
sortable: true,
|
|
|
|
|
overHidden: true,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入费用总金额(元)',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '操作人',
|
|
|
|
|
prop: 'createUser',
|
|
|
|
|
search: false,
|
|
|
|
|
sortable: true,
|
|
|
|
|
overHidden: true,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入操作人',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '更新时间',
|
|
|
|
|
prop: 'updateTime',
|
|
|
|
|
search: false,
|
|
|
|
|
sortable: true,
|
|
|
|
|
overHidden: true,
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入更新时间',
|
|
|
|
|
trigger: 'blur',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
// 多选
|
|
|
|
|
selectionChange(val){
|
|
|
|
|
this.selectionList = val
|
|
|
|
|
},
|
|
|
|
|
// 点击删除按钮
|
|
|
|
|
handleDelete(){
|
|
|
|
|
if(this.selectionList.length == 0){
|
|
|
|
|
this.$message.error('请先选择数据')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.$confirm('确定将选择数据删除?', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning',
|
|
|
|
|
}).then(res =>{
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 点击新增按钮
|
|
|
|
|
handleAdd(){
|
|
|
|
|
this.showAdd = true
|
|
|
|
|
},
|
|
|
|
|
// 新增提交
|
|
|
|
|
submitAdd(){
|
|
|
|
|
this.$refs.addForm.validate(valid =>{
|
|
|
|
|
if(valid){
|
|
|
|
|
this.showAdd = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 维护提交
|
|
|
|
|
submitMaintain(){
|
|
|
|
|
this.$refs.maintainForm.validate(valid =>{
|
|
|
|
|
if(valid){
|
|
|
|
|
this.showMaintain = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 详情
|
|
|
|
|
viewRow(row){
|
|
|
|
|
this.title = '详情'
|
|
|
|
|
this.maintainForm = row
|
|
|
|
|
this.tableData = row.tableData
|
|
|
|
|
this.showMaintain = true
|
|
|
|
|
},
|
|
|
|
|
// 维护
|
|
|
|
|
maintainRow(row){
|
|
|
|
|
this.title = '维护'
|
|
|
|
|
this.maintainForm = row
|
|
|
|
|
this.tableData = row.tableData
|
|
|
|
|
this.showMaintain = true
|
|
|
|
|
},
|
|
|
|
|
onLoad(){
|
|
|
|
|
this.data = [
|
|
|
|
|
{id:1,expenseAccount:'房租补贴',distributeType:"1",totalCost:1000,createUser:'张三',updateTime:'2016-09-21 08:50:08',
|
|
|
|
|
tableData:[
|
|
|
|
|
{workCenter:'作业中心一',ratio:40,money:400},
|
|
|
|
|
{workCenter:'作业中心二',ratio:30,money:300},
|
|
|
|
|
{workCenter:'作业中心三',ratio:30,money:300},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{id:2,expenseAccount:'电话费',distributeType:"2",totalCost:1000,createUser:'张三',updateTime:'2016-09-21 08:50:08',
|
|
|
|
|
tableData:[
|
|
|
|
|
{workCenter:'作业中心一',ratio:20,money:200},
|
|
|
|
|
{workCenter:'作业中心二',ratio:50,money:500},
|
|
|
|
|
{workCenter:'作业中心三',ratio:30,money:300},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{id:3,expenseAccount:'差旅费',distributeType:"1",totalCost:1000,createUser:'张三',updateTime:'2016-09-21 08:50:08',
|
|
|
|
|
tableData:[
|
|
|
|
|
{workCenter:'作业中心一',ratio:15,money:150},
|
|
|
|
|
{workCenter:'作业中心二',ratio:35,money:350},
|
|
|
|
|
{workCenter:'作业中心三',ratio:50,money:500},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
