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