刘翔宇-旅管家 4 years ago
parent ddae7601e6
commit 9ff778ee0a

@ -1,427 +1,550 @@
<template> <template>
<div> <div>
<!-- 编辑--> <!-- 编辑-->
<xy-dialog :is-show.sync="isShowEditor" title="合同编辑" type="form" :form="detail" :rules="rules" @submit="editor" ref="addContract"> <xy-dialog :is-show.sync="isShowEditor" title="合同编辑" type="form" :form="detail" :rules="rules" @submit="editor"
<template v-slot:name> ref="addContract">
<div class="xy-table-item">
<div class="xy-table-item-label"> <template v-slot:name>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称 <div class="xy-table-item">
</div> <div class="xy-table-item-label">
<div class="xy-table-item-content"> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目名称
<el-input clearable placeholder="请填写项目名称" v-model="detail.name" style="width: 300px;"/> </div>
</div> <div class="xy-table-item-content">
</div> <el-input clearable placeholder="请填写项目名称" v-model="detail.name" style="width: 300px;" />
</template> </div>
<template v-slot:type> </div>
<div class="xy-table-item"> </template>
<div class="xy-table-item-label"> <template v-slot:type>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目类型 <div class="xy-table-item">
</div> <div class="xy-table-item-label">
<div class="xy-table-item-content"> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>项目类型
<el-select clearable placeholder="请选择项目类型" v-model="detail.type" style="width: 300px;"> </div>
<el-option v-for="item in [{label:'服务',value:1},{label:'货物',value:2},{label:'工程',value:3}]" :label="item.label" :value="item.value"></el-option> <div class="xy-table-item-content">
</el-select> <el-select clearable placeholder="请选择项目类型" v-model="detail.type" style="width: 300px;">
</div> <el-option v-for="item in [{label:'',value:1},{label:'',value:2},{label:'',value:3}]"
</div> :label="item.label" :value="item.value"></el-option>
</template> </el-select>
<template v-slot:methods> </div>
<div class="xy-table-item"> </div>
<div class="xy-table-item-label"> </template>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>采购形式 <template v-slot:methods>
</div> <div class="xy-table-item">
<div class="xy-table-item-content"> <div class="xy-table-item-label">
<el-select clearable placeholder="请选择采购形式" v-model="detail.methods" style="width: 300px;"> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>采购形式
<el-option v-for="item in purchaseType" :label="item.value" :value="item.id"></el-option> </div>
</el-select> <div class="xy-table-item-content">
</div> <el-select clearable placeholder="请选择采购形式" v-model="detail.methods" style="width: 300px;">
</div> <el-option v-for="item in purchaseType" :label="item.value" :value="item.id"></el-option>
</template> </el-select>
<template v-slot:modality> </div>
<div class="xy-table-item"> </div>
<div class="xy-table-item-label"> </template>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>采购方式 <template v-slot:modality>
</div> <div class="xy-table-item">
<div class="xy-table-item-content"> <div class="xy-table-item-label">
<el-select clearable placeholder="请选择采购方式" v-model="detail.modality" style="width: 300px;"> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>采购方式
<el-option v-for="item in purchaseWay" :label="item.value" :value="item.id"></el-option> </div>
</el-select> <div class="xy-table-item-content">
</div> <el-select clearable placeholder="请选择采购方式" v-model="detail.modality" style="width: 300px;">
</div> <el-option v-for="item in purchaseWay" :label="item.value" :value="item.id"></el-option>
</template> </el-select>
<template v-slot:price> </div>
<div class="xy-table-item"> </div>
<div class="xy-table-item-label"> </template>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>合同预算价
</div> <template v-slot:price>
<div class="xy-table-item-content xy-table-item-price"> <div class="xy-table-item">
<el-input clearable placeholder="请填写合同预算价" v-model="detail.price" style="width: 300px;"/> <div class="xy-table-item-label">
</div> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>合同预算价
</div> </div>
</template> <div class="xy-table-item-content xy-table-item-price">
<template v-slot:fundingChannels> <el-input clearable placeholder="请填写合同预算价" v-model="detail.price" style="width: 300px;" />
<div class="xy-table-item"> </div>
<div class="xy-table-item-label"> </div>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>资金渠道 </template>
</div> <template v-slot:fundingChannels>
<div class="xy-table-item-content"> <div class="xy-table-item">
<el-select multiple clearable placeholder="请选择资金渠道" v-model="detail.fundingChannels" style="width: 300px;"> <div class="xy-table-item-label">
<el-option v-for="item in moneyWay" :value="item.id" :label="item.value"></el-option> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>资金渠道
</el-select> </div>
</div> <div class="xy-table-item-content">
</div> <el-select multiple clearable placeholder="请选择资金渠道" v-model="detail.fundingChannels" style="width: 300px;">
</template> <el-option v-for="item in moneyWay" :value="item.id" :label="item.value"></el-option>
<template v-slot:isBudget> </el-select>
<div class="xy-table-item"> </div>
<div class="xy-table-item-label" style="width: 200px"> </div>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否为预算内确定项目 </template>
</div> <template v-slot:isBudget>
<div class="xy-table-item-content"> <div class="xy-table-item">
<el-switch v-model="detail.isBudget"/> <div class="xy-table-item-label" style="width: 200px">
</div> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否为预算内确定项目
</div> </div>
</template> <div class="xy-table-item-content">
<template v-slot:plan> <el-switch v-model="detail.isBudget" />
<div class="xy-table-item"> </div>
<div class="xy-table-item-label"> </div>
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>关联预算计划 </template>
</div> <template v-slot:plan>
<div class="xy-table-item-content"> <div class="xy-table-item">
<div class="contract-add-plan" style="width: 300px;" @click="isShowPlan = true,getBudgets()"> <div class="xy-table-item-label">
<template v-if="detail.plan.length > 0"> <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>关联预算计划
<template v-for="item in detail.plan"> </div>
<Tag closable color="primary" @on-close="delPlan(item)">{{item.label}}</Tag> <div class="xy-table-item-content">
</template> <div class="contract-add-plan" style="width: 300px;" @click="isShowPlan = true,getBudgets()">
</template> <template v-if="detail.plan.length > 0">
<template v-else> <template v-for="item in detail.plan">
<div class="contract-add-plan-no-plan">请选择关联计划</div> <Tag closable color="primary" @on-close="delPlan(item)">{{item.label}}</Tag>
</template> </template>
</div> </template>
</div> <template v-else>
</div> <div class="contract-add-plan-no-plan">请选择关联计划</div>
</template> </template>
</xy-dialog> </div>
</div>
<!-- 编辑中 预算计划 --> </div>
<xy-dialog :is-show.sync="isShowPlan" title="预算计划" :width="640" @on-ok="planSelect"> </template>
<template v-slot:normalContent>
<Input v-model="planSearch" search enter-button=" " placeholder="搜索预算计划.." @on-search="getBudgets"/> <template v-slot:req_status v-if="adminEdit">
<div class="xy-table-item">
<xy-table :list="plans" :show-index="false" :table-item="planTable" :height="310" style="margin-top: 10px;" ref="editorPlanTable" @select="selectPlan"> <div class="xy-table-item-label" style="width: 200px">请示流程
<template v-slot:btns> </div>
<el-table-column label="使用金额" header-align="center"> <div class="xy-table-item-content">
<template slot-scope="scope"> <el-select v-model="detail.req_status" placeholder="请选择">
<Input :value="scope.row.useMoney" @input="planInput($event,scope.row)"/> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</template> </el-option>
</el-table-column> </el-select>
</template> </div>
</xy-table> </div>
</template>
<div style="display: flex;justify-content: flex-end;"> <template v-slot:purchase_status v-if="adminEdit">
<Page :total="planTotal" show-elevator @on-change="planPageChange"/> <div class="xy-table-item">
</div> <div class="xy-table-item-label" style="width: 200px">采购流程
</template> </div>
<div class="xy-table-item-content">
<template v-slot:footerContent> <el-select v-model="detail.purchase_status" placeholder="请选择">
<Button type="primary" @click="isShowPlan = false">确定</Button> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</template> </el-option>
</xy-dialog> </el-select>
</div> </div>
</template> </div>
</template>
<script> <template v-slot:invite_status v-if="adminEdit">
import {editorContract,detailContract} from "@/api/contract/contract"; <div class="xy-table-item">
import {getBudget} from "@/api/budget/budget"; <div class="xy-table-item-label" style="width: 200px">招标流程
import {Message} from 'element-ui' </div>
export default { <div class="xy-table-item-content">
props:{ <el-select v-model="detail.invite_status" placeholder="请选择">
purchaseType:Array, <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
moneyWay:Array, </el-option>
purchaseWay:Array </el-select>
}, </div>
data() { </div>
var planPass = (rule, value, callback) => { </template>
if(this.detail.isBudget){ <template v-slot:join_status v-if="adminEdit">
if(this.detail.plan.length === 0){ <div class="xy-table-item">
return callback(new Error('必选')) <div class="xy-table-item-label" style="width: 200px">
}else{ 合同会签流程
callback() </div>
} <div class="xy-table-item-content">
}else{ <el-select v-model="detail.join_status" placeholder="请选择">
callback() <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
} </el-option>
} </el-select>
return { </div>
isFocus:false, </div>
contrantId:'', </template>
isShowEditor:false,
isShowPlan:false,
detail:{}, </xy-dialog>
plan:[],
rules:{ <!-- 编辑中 预算计划 -->
name:[ <xy-dialog :is-show.sync="isShowPlan" title="预算计划" :width="640" @on-ok="planSelect">
{required:true,message:"必填"} <template v-slot:normalContent>
], <Input v-model="planSearch" search enter-button=" " placeholder="搜索预算计划.." @on-search="getBudgets" />
type:[
{required:true,message:"必选"} <xy-table :list="plans" :show-index="false" :table-item="planTable" :height="310" style="margin-top: 10px;"
], ref="editorPlanTable" @select="selectPlan">
methods:[ <template v-slot:btns>
{required:true,message:"必选"} <el-table-column label="使用金额" header-align="center">
], <template slot-scope="scope">
modality:[ <Input :value="scope.row.useMoney" @input="planInput($event,scope.row)" />
{required:true,message:"必选"} </template>
], </el-table-column>
price:[ </template>
{required:true,message:"必填"}, </xy-table>
{pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
], <div style="display: flex;justify-content: flex-end;">
fundingChannels:[ <Page :total="planTotal" show-elevator @on-change="planPageChange" />
{required:true,message:"必填"} </div>
], </template>
plan:[
{validator:planPass} <template v-slot:footerContent>
] <Button type="primary" @click="isShowPlan = false">确定</Button>
}, </template>
plans:[], </xy-dialog>
planSearch:'', </div>
planTable:[ </template>
{
sortable:false, <script>
width:36, import {
type:"selection" editorContract,
}, detailContract
{ } from "@/api/contract/contract";
label:"分类", import {
prop:'type', getBudget
formatter:(cell, data, value) => { } from "@/api/budget/budget";
let res = this.moneyWay.filter(item => {
return item.id === value import {
}) getInfo
return res[0]?.value || '未知' } from '@/api/user.js'
} import {
}, Message
{ } from 'element-ui'
label:"名称", export default {
prop:'name', props: {
align:'left' purchaseType: Array,
}, moneyWay: Array,
{ purchaseWay: Array
label:"计划金额", },
prop:'money', data() {
align:'right' var planPass = (rule, value, callback) => {
} if (this.detail.isBudget) {
], if (this.detail.plan.length === 0) {
planTotal:0, return callback(new Error('必选'))
} else {
} callback()
}, }
methods: { } else {
// callback()
planInput(e,row){ }
if(!/^[0-9]+.?[0-9]*$/.test(e) && e){ }
Message({ return {
type:'warning', userList: ["liuxiangyu", "zhushulan","admin"],
message:'金额格式错误' user: null,
}) adminEdit: false,
row.useMoney = 0 isFocus: false,
return contrantId: '',
} isShowEditor: false,
if(e <= (Number(row.money) - Number(row.use_money_total))){ isShowPlan: false,
row.useMoney = e detail: {},
this.plan.forEach(item => { plan: [],
if(item.value.plan_id == row.id){ options: [{
item.value.use_money = e value: 1,
} label: '待申请'
}) }, {
return value: 2,
} label: '流转中'
Message({ }, {
type:'warning', value: 3,
message:'使用金额大于剩余预算' label: '已办结'
}) }],
row.useMoney = 0 rules: {
}, name: [{
// required: true,
planSelect(){ message: "必填"
if(this.plan.length === 0){ }],
Message({ type: [{
type:'warning', required: true,
message:'选择计划不能为空' message: "必选"
}) }],
return methods: [{
} required: true,
for(let item of this.plan){ message: "必选"
console.log(item) }],
if(!item.value.use_money){ modality: [{
Message({ required: true,
type:'warning', message: "必选"
message:'金额不能为空' }],
}) price: [{
return required: true,
} message: "必填"
} },
this.detail.plan = this.plan {
this.isShowPlan = false pattern: /^\d+(\.\d+)?$/,
}, message: '必须为数字'
// }
selectPlan(sel,row){ ],
if(sel){ fundingChannels: [{
this.plan = sel.map(item => { required: true,
return { message: "必填"
label:item.name, }],
value:{ plan: [{
plan_id:item.id, validator: planPass
use_money:item.useMoney, }]
new_money:item.money },
} plans: [],
} planSearch: '',
}) planTable: [{
}else{ sortable: false,
this.plan = [] width: 36,
} type: "selection"
}, },
delPlan(val){ {
this.detail.plan.map((item,index)=>{ label: "分类",
if(item.value.plan_id === val.value.plan_id){ prop: 'type',
this.detail.plan.splice(index,1) formatter: (cell, data, value) => {
} let res = this.moneyWay.filter(item => {
}) return item.id === value
}, })
// return res[0]?.value || '未知'
async getBudgets(){ }
let res = await getBudget({name:this.planSearch,page_size:10,page:this.plansPageIndex}) },
this.plans = res.list.data {
this.planTotal = res.list.total label: "名称",
prop: 'name',
this.toggleSelection(this.detail.plan.map(item => { align: 'left'
return item.value.plan_id },
})) {
}, label: "计划金额",
planPageChange(e){ prop: 'money',
this.plansPageIndex = e align: 'right'
this.getBudgets() }
}, ],
// planTotal: 0,
toggleSelection(plans) {
if (plans) { }
this.plans.filter(plan => { },
if(plans.includes(plan.id)){ methods: {
plan.useMoney = this.detail.plan[plans.indexOf(plan.id)].value.use_money //
return true planInput(e, row) {
} if (!/^[0-9]+.?[0-9]*$/.test(e) && e) {
}).map(row => { Message({
this.$refs.editorPlanTable.toggleRowSelection(row) type: 'warning',
}) message: '金额格式错误'
} else { })
this.$refs.editorPlanTable.clearSelection() row.useMoney = 0
} return
}, }
async getDetail(id){ if (e <= (Number(row.money) - Number(row.use_money_total))) {
let res = await detailContract({id:id}) row.useMoney = e
this.contrantId = res.id this.plan.forEach(item => {
this.detail = { if (item.value.plan_id == row.id) {
name:res.name, item.value.use_money = e
type:res.type, }
methods:res.purchase_type_id, })
modality:res.purchase_way_id, return
fundingChannels:res.money_way_id.split(',').map(item =>{return Number(item)}), }
price:res.plan_price, Message({
isBudget:res.is_plan === 1 ? true : false, type: 'warning',
plan:res.plans.map(item=>{ message: '使用金额大于剩余预算'
return { })
label:item.name, row.useMoney = 0
value:{ },
plan_id:item.id, //
use_money:res.plan_link.filter(item1 => { planSelect() {
return item1.plan_id === item.id if (this.plan.length === 0) {
})[0].use_money, Message({
new_money:item.money type: 'warning',
} message: '选择计划不能为空'
} })
}) return
} }
this.plan = this.detail.plan for (let item of this.plan) {
}, console.log(item)
editor(){ if (!item.value.use_money) {
editorContract({ Message({
id:this.contrantId, type: 'warning',
type:this.detail.type, message: '金额不能为空'
is_plan:this.detail.isBudget ? 1 : 0, })
purchase_type_id:this.detail.methods, return
purchase_way_id:this.detail.modality, }
money_way_id:this.detail.fundingChannels.toString(), }
plan_price:this.detail.price, this.detail.plan = this.plan
name:this.detail.name, this.isShowPlan = false
contract_plan_links:this.detail.plan.map(item=>{ },
return item.value //
}) selectPlan(sel, row) {
}).then(res=>{ if (sel) {
this.isShowEditor = false this.plan = sel.map(item => {
Message({ return {
type:'success', label: item.name,
message:"操作成功" value: {
}) plan_id: item.id,
this.$emit('success') use_money: item.useMoney,
}) new_money: item.money
}, }
}
}, })
computed:{ } else {
this.plan = []
}, }
mounted() { },
delPlan(val) {
}, this.detail.plan.map((item, index) => {
} if (item.value.plan_id === val.value.plan_id) {
</script> this.detail.plan.splice(index, 1)
}
<style scoped lang="scss"> })
.contract-add-plan{ },
min-height: 30px; //
border: 1px solid #dcdee2; async getBudgets() {
border-radius: 4px; let res = await getBudget({
display: flex; name: this.planSearch,
flex-wrap: wrap; page_size: 10,
align-items: center; page: this.plansPageIndex
align-content: center; })
this.plans = res.list.data
padding: 0 8px; this.planTotal = res.list.total
&-no-plan{
height: 30px; this.toggleSelection(this.detail.plan.map(item => {
line-height: 30px; return item.value.plan_id
color: #CDD0D5; }))
} },
} planPageChange(e) {
this.plansPageIndex = e
.xy-table-item-label{ this.getBudgets()
width: 140px; },
} //
.xy-table-item-price{ toggleSelection(plans) {
position: relative; if (plans) {
&::after{ this.plans.filter(plan => {
z-index: 1; if (plans.includes(plan.id)) {
position: absolute; plan.useMoney = this.detail.plan[plans.indexOf(plan.id)].value.use_money
right: 0; return true
top: 0; }
content:'(元)' }).map(row => {
} this.$refs.editorPlanTable.toggleRowSelection(row)
::v-deep .el-input__clear{ })
position: relative; } else {
right: 30px; this.$refs.editorPlanTable.clearSelection()
z-index: 2; }
} },
} async getDetail(id) {
.xy-table-item-price-wan{ let res = await detailContract({
position: relative; id: id
&::after{ })
position: absolute; this.contrantId = res.id
right: 0; this.detail = {
top: 0; req_status: res.req_status,
content:'(万元)' purchase_status: res.purchase_status,
} join_status: res.join_status,
::v-deep .el-input__clear{ invite_status: res.invite_status,
position: relative; name: res.name,
right: 46px; type: res.type,
z-index: 2; methods: res.purchase_type_id,
} modality: res.purchase_way_id,
} fundingChannels: res.money_way_id.split(',').map(item => {
return Number(item)
}),
price: res.plan_price,
isBudget: res.is_plan === 1 ? true : false,
plan: res.plans.map(item => {
return {
label: item.name,
value: {
plan_id: item.id,
use_money: res.plan_link.filter(item1 => {
return item1.plan_id === item.id
})[0].use_money,
new_money: item.money
}
}
})
}
this.plan = this.detail.plan
},
editor() {
editorContract({
id: this.contrantId,
type: this.detail.type,
is_plan: this.detail.isBudget ? 1 : 0,
purchase_type_id: this.detail.methods,
purchase_way_id: this.detail.modality,
money_way_id: this.detail.fundingChannels.toString(),
plan_price: this.detail.price,
name: this.detail.name,
req_status: this.detail.req_status,
purchase_status: this.detail.purchase_status,
join_status: this.detail.join_status,
invite_status: this.detail.invite_status,
contract_plan_links: this.detail.plan.map(item => {
return item.value
})
}).then(res => {
this.isShowEditor = false
Message({
type: 'success',
message: "操作成功"
})
this.$emit('success')
})
},
},
computed: {
},
mounted() {
let that = this;
getInfo().then(response => {
console.log(response)
this.user = response;
if (that.userList.indexOf(response.username) != -1) {
that.adminEdit = true;
}
}).catch(error => {})
}
}
</script>
<style scoped lang="scss">
.contract-add-plan {
min-height: 30px;
border: 1px solid #dcdee2;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
padding: 0 8px;
&-no-plan {
height: 30px;
line-height: 30px;
color: #CDD0D5;
}
}
.xy-table-item-label {
width: 140px;
}
.xy-table-item-price {
position: relative;
&::after {
z-index: 1;
position: absolute;
right: 0;
top: 0;
content: '(元)'
}
::v-deep .el-input__clear {
position: relative;
right: 30px;
z-index: 2;
}
}
.xy-table-item-price-wan {
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
content: '(万元)'
}
::v-deep .el-input__clear {
position: relative;
right: 46px;
z-index: 2;
}
}
</style> </style>

@ -384,7 +384,7 @@ export default {
table: [ table: [
{ {
label: "项目名称", label: "项目名称",
width: 150, width: 380,
prop: 'name', prop: 'name',
fixed: 'left', fixed: 'left',
align: 'left' align: 'left'

Loading…
Cancel
Save