You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
7.9 KiB
318 lines
7.9 KiB
3 years ago
|
<template>
|
||
|
|
<view class="ass-content">
|
||
|
|
<view>
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>步骤一：选择固定参会评委</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15">
|
||
|
|
<view class="cu-bar search">
|
||
|
|
<view class="search-form round">
|
||
|
|
<input type="text" v-model="filterText" placeholder="请输入" confirm-type="search"></input>
|
||
|
|
<text class="cuIcon-search"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<ly-tree :tree-data="data"
|
||
|
|
:props="defaultProps"
|
||
|
|
ref="tree"
|
||
|
|
node-key="id"
|
||
|
|
show-radio
|
||
|
|
checkOnlyLeaf
|
||
|
|
@check="handleCheck"
|
||
|
|
@radio-change="handleRadioChange"
|
||
|
|
@node-click="handleNodeClick"
|
||
|
|
:filter-node-method="filterNode"
|
||
|
|
child-visible-for-filter-node
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>参会评委</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15 judges-view">
|
||
|
|
<view class="flex-between judgesList-view" v-for="(item,index) in judgesList" :key="index">
|
||
|
|
<text class="jud-label">{{item.name}}</text>
|
||
|
|
<text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>步骤二：选择备选评委</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15">
|
||
|
|
<view class="cu-bar search">
|
||
|
|
<view class="search-form round">
|
||
|
|
<input type="text" v-model="filterText" placeholder="请输入" confirm-type="search"></input>
|
||
|
|
<text class="cuIcon-search"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<ly-tree :tree-data="data"
|
||
|
|
:props="defaultProps"
|
||
|
|
ref="tree"
|
||
|
|
node-key="id"
|
||
|
|
show-radio
|
||
|
|
checkOnlyLeaf
|
||
|
|
@check="handleCheck"
|
||
|
|
@radio-change="handleRadioChange"
|
||
|
|
@node-click="handleNodeClick"
|
||
|
|
:filter-node-method="filterNode"
|
||
|
|
child-visible-for-filter-node
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>备选评委</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15 judges-view">
|
||
|
|
<view class="flex-between judgesList-view" v-for="(item,index) in judgesList" :key="index">
|
||
|
|
<text class="jud-label">{{item.name}}</text>
|
||
|
|
<text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="flex-align-start mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>步骤三：选取人数</text>
|
||
|
|
</view>
|
||
|
|
<view class="AB-input">
|
||
|
|
<view class="flex">
|
||
|
|
<input type="text" :value="A" placeholder="请输入不大于选取范围的人数"/>
|
||
|
|
<text class="cuIcon-roundclosefill" @click="A = ''"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="lottery-btn mat15">
|
||
|
|
<button class="cu-btn round def-btn" @click="bindPhoneClick">摇号</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>选取评委会成员</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15 judges-view">
|
||
|
|
<view class="flex-between judgesList-view" v-for="(item,index) in judgesList" :key="index">
|
||
|
|
<text class="jud-label">{{item.name}}</text>
|
||
|
|
<text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat15">
|
||
|
|
<view class="ass-label">
|
||
|
|
<text>贷审会参会评委</text>
|
||
|
|
</view>
|
||
|
|
<view class="assign-view mat15 judges-view">
|
||
|
|
<view class="flex-between judgesList-view" v-for="(item,index) in judgesList" :key="index">
|
||
|
|
<text class="jud-label">{{item.name}}</text>
|
||
|
|
<text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="mat40 flex-justify-center ass-foot-btn">
|
||
|
|
<navigator url="/pages/user/user" open-type="redirect">
|
||
|
|
<button class="cu-btn block def-btn margin-tb-sm lg round mar15" @click="bindPhoneClick">确定</button>
|
||
|
|
</navigator>
|
||
|
|
<navigator url="/pages/investigation/investigation" open-type="redirect">
|
||
|
|
<button class="cu-btn block cancel-btn margin-tb-sm lg round mal15" @click="bindPhoneClick">取消</button>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import LyTree from '@/components/ly-tree/ly-tree.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
LyTree
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
filterNodeData: null,
|
||
|
|
filterText: '',
|
||
|
|
A: '小明',
|
||
|
|
B: '小红',
|
||
|
|
data: [{
|
||
|
|
id: 1,
|
||
|
|
label: '一级 1',
|
||
|
|
children: [{
|
||
|
|
id: 4,
|
||
|
|
label: '二级 1-1',
|
||
|
|
children: [{
|
||
|
|
id: 9,
|
||
|
|
label: '三级 1-1-1'
|
||
|
|
}, {
|
||
|
|
id: 10,
|
||
|
|
label: '三级 1-1-2'
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
id: 2,
|
||
|
|
label: '一级 2',
|
||
|
|
children: [{
|
||
|
|
id: 5,
|
||
|
|
label: '二级 2-1'
|
||
|
|
}, {
|
||
|
|
id: 6,
|
||
|
|
label: '二级 2-2'
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
id: 3,
|
||
|
|
label: '一级 3',
|
||
|
|
children: [{
|
||
|
|
id: 7,
|
||
|
|
label: '二级 3-1'
|
||
|
|
}, {
|
||
|
|
id: 8,
|
||
|
|
label: '二级 3-2'
|
||
|
|
}]
|
||
|
|
}],
|
||
|
|
defaultProps: {
|
||
|
|
children: 'children',
|
||
|
|
label: 'label'
|
||
|
|
},
|
||
|
|
judgesList: [{
|
||
|
|
name: '小明'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '小红'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '小宁'
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
onLoad() {
|
||
|
|
// 如果初始化树时设置节点选择需要做适当延时，可以在下一个事件轮询中执行
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.tree.setCheckedKeys([6])
|
||
|
|
})
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
filterText(val) {
|
||
|
|
this.$refs.tree.filter(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
|
||
|
|
methods: {
|
||
|
|
// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
|
||
|
|
handleCheck(obj) {
|
||
|
|
// obj: {
|
||
|
|
// checkedKeys: [9, 5], // 当前选中节点的id数组
|
||
|
|
// checkedNodes: [{...}, {...}], // 当前选中节点数组
|
||
|
|
// data: {...}, // 当前节点的数据
|
||
|
|
// halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
|
||
|
|
// halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
|
||
|
|
// node: Node {...} // 当前节点实例
|
||
|
|
// }
|
||
|
|
|
||
|
|
console.log('handleCheck', obj);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
|
||
|
|
handleRadioChange(obj) {
|
||
|
|
console.log('handleRadioChange', obj);
|
||
|
|
},
|
||
|
|
|
||
|
|
handleNodeClick(obj) {
|
||
|
|
console.log('handleNodeClick', JSON.stringify(obj));
|
||
|
|
console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
|
||
|
|
},
|
||
|
|
// 查询过滤
|
||
|
|
filterNode(value, data) {
|
||
|
|
if (!value) return true;
|
||
|
|
return data.label.indexOf(value) !== -1;
|
||
|
|
},
|
||
|
|
clearJudge(index){
|
||
|
|
this.judgesList.splice(index,1)
|
||
|
|
}
|
||
|
|
|
||
|
|
// handleCheck(obj) {
|
||
|
|
// if (obj.node.checked) {
|
||
|
|
// this.placeholder = `过滤"${obj.data.label}"的子节点`;
|
||
|
|
// this.filterNodeData = obj.data;
|
||
|
|
// } else {
|
||
|
|
// this.placeholder = `过滤所有节点`;
|
||
|
|
// this.filterNodeData = null;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// // filter(val, nodeData),假如要搜索A节点下面的数据，那么nodeData代表treeData中A节点的数据
|
||
|
|
// this.$refs.tree.filter(this.filterText, this.filterNodeData);
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.ass-content{
|
||
|
|
padding: 40rpx 40rpx;
|
||
|
|
.ass-foot-btn .cu-btn.lg{
|
||
|
|
padding: 0 100rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ass-label{
|
||
|
|
color: #00B9FF;
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-right: 40rpx;
|
||
|
|
}
|
||
|
|
.assign-view{
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 0 16rpx #ccc;
|
||
|
|
height: 600rpx;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.cu-bar .search-form{
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
input{
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
.cuIcon-search{
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.AB-input{
|
||
|
|
view{
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
color: #666;
|
||
|
|
padding: 20rpx 40rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
text{
|
||
|
|
color: #B2B2B2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.judges-view{
|
||
|
|
height: 300rpx;
|
||
|
|
padding: 30rpx 30rpx;
|
||
|
|
.judgesList-view{
|
||
|
|
color: #B2B2B2;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
&:first-child{
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
.jud-label{
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.lottery-btn{
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|