页面上方标题组件；普通项目管理和工作组项目管理接口联调
This commit is contained in:
zhaoxiao
@@ -1,22 +1,25 @@
|
||||
<!--进度组件-->
|
||||
<template>
|
||||
<div class="progress">
|
||||
<!-- 将全部付款和部分付款放入一个div中-->
|
||||
<div class="full-and-partial"
|
||||
:style="{width: (data.payInFull + data.partialPayment)/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}">
|
||||
<div :style="{width: data.payInFull/(data.payInFull + data.partialPayment) * 100 + '%'}"
|
||||
class="progress-item pay-in-full">
|
||||
{{ data.payInFull }}
|
||||
<div>
|
||||
<div class="progress" v-if="(data.allPayment + data.partPayment + data.notPayment) !== 0">
|
||||
<!-- 将全部付款和部分付款放入一个div中-->
|
||||
<div class="full-and-partial"
|
||||
:style="{width: (data.allPayment + data.partPayment)/(data.allPayment + data.partPayment + data.notPayment) * 100 + '%'}">
|
||||
<div :style="{width: data.allPayment/(data.allPayment + data.partPayment) * 100 + '%'}"
|
||||
class="progress-item pay-in-full">
|
||||
{{ data.allPayment }}
|
||||
</div>
|
||||
<div :style="{width: data.partPayment/(data.allPayment + data.partPayment) * 100 + '%'}"
|
||||
class="progress-item partial-payment">
|
||||
{{ data.partPayment }}
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{width: data.partialPayment/(data.payInFull + data.partialPayment) * 100 + '%'}"
|
||||
class="progress-item partial-payment">
|
||||
{{ data.partialPayment }}
|
||||
<div :style="{width: data.notPayment/(data.allPayment + data.partPayment + data.notPayment) * 100 + '%'}"
|
||||
class="progress-item non-payment">
|
||||
{{ data.notPayment }}
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{width: data.nonPayment/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}"
|
||||
class="progress-item non-payment">
|
||||
{{ data.nonPayment }}
|
||||
</div>
|
||||
<div class="progress progress-null" v-else>0</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -27,9 +30,9 @@ export default {
|
||||
/**
|
||||
* 进度字段，
|
||||
* {
|
||||
* payInFull: 10, // 已付全款
|
||||
* partialPayment: 10, // 部分付款
|
||||
* nonPayment: 10, // 未付款
|
||||
* allPayment: 10, // 已付全款
|
||||
* partPayment: 10, // 部分付款
|
||||
* notPayment: 10, // 未付款
|
||||
* }
|
||||
*/
|
||||
data: {
|
||||
@@ -46,35 +49,42 @@ export default {
|
||||
<style scoped lang="less">
|
||||
.progress {
|
||||
border-radius: 10px;
|
||||
background-color: rgb(232, 232, 232);
|
||||
background: #e8e8e8;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
&-null {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.full-and-partial {
|
||||
background-color: rgb(0, 133, 192);
|
||||
background: linear-gradient(0deg,#0075a9 0%, #008dcc 100%);
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pay-in-full {
|
||||
background-color: rgb(7, 168, 161);
|
||||
background: linear-gradient(0deg,#069f99 0%, #07b1aa 100%);
|
||||
}
|
||||
|
||||
.partial-payment {
|
||||
background-color: rgb(0, 133, 192);
|
||||
background: linear-gradient(0deg,#0075a9 0%, #008dcc 100%);
|
||||
}
|
||||
|
||||
.non-payment {
|
||||
color: rgb(88,100,95);
|
||||
background-color: rgb(232, 232, 232);
|
||||
color: #57635e;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,8 @@
|
||||
v-on="$listeners"
|
||||
show-search
|
||||
option-filter-prop="children"
|
||||
:filter-option="filterOption">
|
||||
:filter-option="filterOption"
|
||||
@dropdownVisibleChange="handleDropdownOpen">
|
||||
<a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
@@ -40,6 +41,14 @@ export default {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 编辑时回显的数据, 需要id，name两个字段
|
||||
initfContacts: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
@@ -49,13 +58,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
contactsList: [], // 该企业下联系人列表
|
||||
isFirstOpen: true, // 编辑状态下是否为第一次打开
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 编辑 第一次不回显的问题
|
||||
if(this.selectedCompany!== null && this.selectedCompany.hasOwnProperty('id')){
|
||||
this.getContactsList()
|
||||
}
|
||||
this.getContactsList()
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
@@ -66,6 +74,15 @@ export default {
|
||||
this.getContactsList()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
/**
|
||||
* 编辑联系人变化
|
||||
*/
|
||||
initfContacts: {
|
||||
handler() {
|
||||
this.isFirstOpen = true
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -73,12 +90,15 @@ export default {
|
||||
* 获取联系人数据
|
||||
*/
|
||||
getContactsList() {
|
||||
if (this.selectedCompany) {
|
||||
if (this.selectedCompany && this.selectedCompany.hasOwnProperty('id')) {
|
||||
const params = {
|
||||
companyId: this.selectedCompany.id
|
||||
}
|
||||
getContactsByCompany(params).then(res => {
|
||||
this.contactsList = res.result
|
||||
if (this.initfContacts && this.initfContacts.hasOwnProperty('id')) {
|
||||
this.contactsList.push(this.initfContacts)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -99,6 +119,17 @@ export default {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
},
|
||||
handleDropdownOpen() {
|
||||
if (this.isFirstOpen && this.initfContacts && this.initfContacts.hasOwnProperty('id')) {
|
||||
this.contactsList.forEach((item, index) => {
|
||||
if (item.id === this.initfContacts.id) {
|
||||
this.$emit('change', undefined)
|
||||
this.contactsList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.isFirstOpen = false
|
||||
}
|
||||
}
|
||||
},
|
||||
model: {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
show-search
|
||||
option-filter-prop="children"
|
||||
:filter-option="filterOption">
|
||||
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ `${item.username}(${item.orgCodeTxt})` }}</a-select-option>
|
||||
<a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{ `${item.realname}(${item.orgCodeTxt})` }}</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<!-- 页面-->
|
||||
<template v-if="isLevelOne">
|
||||
<img :src="imgForIcon" class="page-header-icon">
|
||||
<span class="page-header-title">{{ $route.meta.title }}</span>
|
||||
</template>
|
||||
<!-- 需要有返回操作的页面-->
|
||||
<template v-else>
|
||||
<img :src="IconBack" class="page-header-icon page-header-icon-back" @click="backPage">
|
||||
<span class="page-header-title">{{ levelTwoTitle }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconBack from '@/assets/imgs/icon/icon_back.png'
|
||||
|
||||
export default {
|
||||
name: 'PageHeaderTitle',
|
||||
props: {
|
||||
// 是否为一级菜单
|
||||
isLevelOne: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 图标图片
|
||||
imgForIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 有返回页面的标题
|
||||
levelTwoTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IconBack
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backPage() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.page-header {
|
||||
height: 60px;
|
||||
background: #ffffff;
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
|
||||
&-icon {
|
||||
height: 20px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
&-icon-back {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC, PingFang SC-Medium;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user