zhang_li
1 month ago
4 changed files with 496 additions and 10 deletions
@ -0,0 +1,449 @@ |
|||
<template> |
|||
<view> |
|||
<u-popup v-model="deptShow" mode="bottom" border-radius="14" z-index='12'> |
|||
<view class="title"> |
|||
<view class="title-txt"> |
|||
责任信息 |
|||
</view> |
|||
<u-icon name="close" color="#4f4f4f" size="28" @click="deptShow = false"></u-icon> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">责任:</view> |
|||
<view class="value"> |
|||
<view class="value"> |
|||
<view class="value1"> |
|||
<view class="" style="line-height: 70rpx;width: 100%;" @click="showDuty"> |
|||
<span v-if='chooseDutyItem.label'>{{chooseDutyItem.label}}</span> |
|||
<span v-else style="color: rgb(192, 196, 204);">请选择责任</span> |
|||
</view> |
|||
<u-icon name="arrow-down" color="#acacac" size="24" v-if='!chooseDutyItem.label'></u-icon> |
|||
<u-icon name="close-circle-fill" color="#acacac" size="36" @click="clearDuty" v-else></u-icon> |
|||
</view> |
|||
<view class="value-box" v-if="showDutyList"> |
|||
<view class="value-list" v-if="dutyList.length>0"> |
|||
<view class="value-item" v-for="(item,index) in dutyList" :key='index' @click='chooseDuty(item)'> |
|||
<view class=""> |
|||
{{item.label}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="value-list" v-else> |
|||
<view class="value-item1"> |
|||
<view class=""> |
|||
暂无数据 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="arrow-down" v-if="showDutyList"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">部门:</view> |
|||
<view class="value"> |
|||
<!-- <uni-data-select v-model="value" :localdata="dutyDetailList" @change="change" placement='top'></uni-data-select> --> |
|||
<view class="value1"> |
|||
<u-input v-model="chooseDeptItem.name" @input="deptInput" placeholder="请选择部门" @focus="deptFocus" @blur="deptBlur"></u-input> |
|||
<u-icon name="arrow-down" color="#acacac" size="24" v-if='!chooseDeptItem.name'></u-icon> |
|||
<u-icon name="close-circle-fill" color="#acacac" size="36" @click="clearDept" v-else></u-icon> |
|||
</view> |
|||
<view class="value-box" v-if="showDeptList"> |
|||
<view class="value-list" v-if="dutyDeptList.length>0"> |
|||
<view class="value-item" v-for="(item,index) in dutyDeptList" :key='index' @click='chooseDept(item)'> |
|||
<view class=""> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="value-list" v-else> |
|||
<view class="value-item1"> |
|||
<view class=""> |
|||
暂无数据 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="arrow-down" v-if="showDeptList"></view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">明细:</view> |
|||
<view class="value duty-details-value"> |
|||
<!-- <uni-data-select v-model="dutyDetails" :localdata="dutyDetailList" @change="change" placement='top' |
|||
:clear="true"></uni-data-select> |
|||
<u-icon name="arrow-down" color="#acacac" size="24" v-if="dutyDetails==''" ></u-icon> |
|||
<u-icon name="close-circle-fill" color="#acacac" size="36" @click="dutyDetails=''" v-else></u-icon> --> |
|||
<view class="value"> |
|||
<view class="value1"> |
|||
<view class="" style="line-height: 70rpx;width: 100%;" @click="showDetail"> |
|||
<span v-if='chooseDetailItem.label'>{{chooseDetailItem.label}}</span> |
|||
<span v-else style="color: rgb(192, 196, 204);">请选择明细</span> |
|||
</view> |
|||
<u-icon name="arrow-down" color="#acacac" size="24" v-if='!chooseDetailItem.label'></u-icon> |
|||
<u-icon name="close-circle-fill" color="#acacac" size="36" @click="clearDetail" v-else></u-icon> |
|||
</view> |
|||
<view class="value-box" v-if="showDetailList"> |
|||
<view class="value-list" v-if="detailList.length>0"> |
|||
<view class="value-item" v-for="(item,index) in detailList" :key='index' @click='chooseDetail(item)'> |
|||
<view class=""> |
|||
{{item.label}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="value-list" v-else> |
|||
<view class="value-item1"> |
|||
<view class=""> |
|||
暂无数据 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="arrow-down" v-if="showDetailList"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-flex uni-row hide_border"> |
|||
<button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="deptShow = false">取消</button> |
|||
<button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="clickConfirm">确认</button> |
|||
</view> |
|||
</u-popup> |
|||
|
|||
<comMessage ref="comMessage"></comMessage> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
deptList, |
|||
} from '@/api/request2.js'; |
|||
import { |
|||
getDirectoryInfo |
|||
} from '@/common/directory.js'; |
|||
|
|||
export default { |
|||
name: 'dept', |
|||
emit:['dutyConfirm'], |
|||
data() { |
|||
return { |
|||
deptShow: false,//整体弹窗 |
|||
// 责任字段 |
|||
dutyList: [],//责任列表 |
|||
showDutyList:false,//是否显示责任列表 |
|||
chooseDutyItem:{},//选择的责任数据 |
|||
// 部门字段 |
|||
dutyDeptListAll: [],//部门全部列表 |
|||
dutyDeptList: [],//部门显示列表 |
|||
showDeptList:false,//是否显示部门列表 |
|||
chooseDeptItem:{},//选择的部门数据 |
|||
// 明细字段 |
|||
detailList:[],//明细列表 |
|||
showDetailList:false,//是否显示明细列表 |
|||
chooseDetailItem:{},//选择的明细数据 |
|||
} |
|||
}, |
|||
created() { |
|||
this.getDeptList() |
|||
this.getDutyList() |
|||
this.getDetailList() |
|||
}, |
|||
methods: { |
|||
//获取责任列表 |
|||
getDutyList() { |
|||
this.dutyList = getDirectoryInfo('duty') |
|||
this.dutyList.forEach(item => item.text = item.label) |
|||
}, |
|||
//获取部门列表 |
|||
getDeptList() { |
|||
deptList().then(res => { |
|||
this.dutyDeptListAll = res.data |
|||
this.dutyDeptList = res.data |
|||
}) |
|||
}, |
|||
//获取明细列表 |
|||
getDetailList() { |
|||
this.detailList = getDirectoryInfo('duty_details') |
|||
this.detailList.forEach(item => item.text = item.label) |
|||
}, |
|||
// 点击责任显示责列表 |
|||
showDuty(){ |
|||
this.showDutyList = true |
|||
this.showDeptList = false |
|||
this.showDetailList = false |
|||
}, |
|||
// 选择单条责任回显 |
|||
chooseDuty(item){ |
|||
this.chooseDutyItem = item |
|||
this.showDutyList = false |
|||
}, |
|||
// 清除责任按钮 |
|||
clearDuty(){ |
|||
this.chooseDutyItem = {} |
|||
this.showDutyList = false |
|||
}, |
|||
// 部门获取焦点显示部门列表 |
|||
deptFocus(){ |
|||
this.showDutyList = false |
|||
this.showDeptList = true |
|||
this.showDetailList = false |
|||
if(this.chooseDeptItem&&this.chooseDeptItem.name){ |
|||
this.dutyDeptList = this.dutyDeptListAll.filter(item => item.name.indexOf(this.chooseDeptItem.name) !== -1) |
|||
}else{ |
|||
this.dutyDeptList = this.dutyDeptListAll |
|||
} |
|||
}, |
|||
// 输入部门过滤部门列表 |
|||
deptInput(e) { |
|||
this.dutyDeptList = this.dutyDeptListAll.filter(item => item.name.indexOf(e) !== -1) |
|||
}, |
|||
// 选择部门回显 |
|||
chooseDept(item){ |
|||
console.log(item) |
|||
this.chooseDeptItem =item |
|||
this.showDeptList = false |
|||
}, |
|||
// 部门失去焦点 |
|||
deptBlur(e){ |
|||
this.deptName = e |
|||
this.chooseDeptItem.name = '' |
|||
setTimeout(()=>{ |
|||
this.showDeptList = false |
|||
},100) |
|||
}, |
|||
// 清除部门按钮 |
|||
clearDept(){ |
|||
this.chooseDeptItem ={} |
|||
this.showDeptList = false |
|||
}, |
|||
// 点击明细显示明细列表 |
|||
showDetail(){ |
|||
this.showDutyList = false |
|||
this.showDeptList = false |
|||
this.showDetailList = true |
|||
}, |
|||
// 选择明细回显 |
|||
chooseDetail(item){ |
|||
this.chooseDetailItem =item |
|||
this.showDetailList = false |
|||
}, |
|||
// 清除明细按钮 |
|||
clearDetail(){ |
|||
this.chooseDetailItem = {} |
|||
this.showDetailList = false |
|||
}, |
|||
clickConfirm(){ |
|||
let obj ={ |
|||
duty:this.chooseDutyItem.value, |
|||
dutyDept:this.chooseDeptItem.id, |
|||
dutyDetails:this.chooseDetailItem.value, |
|||
} |
|||
if(!obj.duty){ |
|||
this.$refs.comMessage.showMessage('请选择责任') |
|||
return |
|||
} |
|||
if(!obj.dutyDept){ |
|||
this.$refs.comMessage.showMessage('请选择部门') |
|||
return |
|||
} |
|||
if(!obj.dutyDetails){ |
|||
this.$refs.comMessage.showMessage('请选择明细') |
|||
return |
|||
} |
|||
console.log(obj) |
|||
this.$emit('dutyConfirm',obj) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.title { |
|||
padding: 30rpx 20rpx; |
|||
display: flex; |
|||
border-bottom: 1px solid rgba(230, 230, 230, 1); |
|||
|
|||
.title-txt { |
|||
flex: 1; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
::v-deep .u-input__right-icon__clear { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #a7a7a7; |
|||
} |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 20rpx; |
|||
border-bottom: 1px solid #dedede; |
|||
position: relative; |
|||
|
|||
.value { |
|||
flex: 1; |
|||
width: 0px; |
|||
// height: 80rpx; |
|||
// border: 1px solid #dedede; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
position: relative |
|||
} |
|||
|
|||
.value1 { |
|||
flex: 1; |
|||
width: 0px; |
|||
// height: 80rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
border: 1px solid #dedede; |
|||
border-radius: 8rpx; |
|||
padding: 0px 20rpx; |
|||
} |
|||
|
|||
.searchIcon { |
|||
width: 40rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
image { |
|||
width: 40rpx; |
|||
height: 40rpx |
|||
} |
|||
} |
|||
|
|||
.uom { |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-select__selector { |
|||
top: unset !important; |
|||
bottom: calc(100% + 12px); |
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-select { |
|||
// border: none; |
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-select__input-text { |
|||
font-size: 14px; |
|||
color: #000000 //修改为你的字体颜色 |
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-select__input-placeholder { |
|||
font-size: 14px; |
|||
color: #7f7f7f //修改为你的字体颜色 |
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-popper__arrow { |
|||
top: unset !important; |
|||
bottom: -6px; |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
::v-deep .duty-details-value .uni-popper__arrow::after { |
|||
top: 0 |
|||
} |
|||
|
|||
::v-deep .u-drawer-content-visible { |
|||
overflow: initial !important; |
|||
} |
|||
|
|||
::v-deep .uni-scroll-view { |
|||
overflow: initial !important; |
|||
} |
|||
::v-deep .uni-select__input-placeholder{ |
|||
color: rgb(192, 196, 204)!important; |
|||
} |
|||
.value-box{ |
|||
padding: 4px 0; |
|||
position: absolute; |
|||
background: white; |
|||
border-radius: 6rpx; |
|||
background-color: #FFFFFF; |
|||
border: 1px solid #EBEEF5; |
|||
bottom: calc(100% + 12px); |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
box-sizing: border-box; left: 0; |
|||
width: 100%; |
|||
border-radius: 6px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
z-index: 2; |
|||
overflow-y: auto; |
|||
} |
|||
.value-list { |
|||
max-height: 600rpx; |
|||
} |
|||
|
|||
.arrow-down { |
|||
bottom: calc(100% + 6px); |
|||
z-index: 2; |
|||
transform: rotate(180deg); |
|||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); |
|||
left: 10%; |
|||
margin-right: 3px; |
|||
border-top-width: 0 !important; |
|||
border-bottom-color: #ffffff !important; |
|||
position: absolute; |
|||
display: block; |
|||
width: 0; |
|||
height: 0; |
|||
border-color: transparent; |
|||
border-style: solid; |
|||
border-width: 6px; |
|||
} |
|||
|
|||
.value-item { |
|||
display: flex; |
|||
cursor: pointer; |
|||
line-height: 70rpx; |
|||
font-size: 0.875rem; |
|||
text-align: center; |
|||
padding: 0px 10px; |
|||
} |
|||
|
|||
.arrow-down::after { |
|||
content: " "; |
|||
top: 1px; |
|||
margin-left: -6px; |
|||
border-top-width: 0; |
|||
border-bottom-color: #fff; |
|||
position: absolute; |
|||
display: block; |
|||
width: 0; |
|||
height: 0; |
|||
border-color: transparent; |
|||
border-style: solid; |
|||
border-width: 6px; |
|||
} |
|||
|
|||
.value-item1 { |
|||
line-height: 35px; |
|||
font-size: 0.875rem; |
|||
text-align: center; |
|||
padding: 0px 10px; |
|||
text-align: center; |
|||
color: #919191; |
|||
} |
|||
::v-deep .uni-input-input{ |
|||
font-size: 28rpx; |
|||
} |
|||
::v-deep .uni-icons{ |
|||
display: none; |
|||
} |
|||
::v-deep .value .u-icon--right { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #a7a7a7; |
|||
position: absolute; |
|||
right: 10rpx; |
|||
} |
|||
</style> |
Loading…
Reference in new issue