|
|
@@ -0,0 +1,388 @@
|
|
|
+<template>
|
|
|
+<!-- <van-popup :duration="0.2" :overlay="false" class="employee_selector_popup" v-model="showSelector" position="bottom" >-->
|
|
|
+<!-- <van-nav-bar title="积分规则" left-text="取消" @click-left="cancel" />-->
|
|
|
+<!-- <van-search v-model="keyword" placeholder="搜索规则" show-action >-->
|
|
|
+<!-- <van-icon slot="action" name="bars" @click="showRule = true"/>-->
|
|
|
+<!-- </van-search>-->
|
|
|
+<!-- <div class="container">-->
|
|
|
+<!-- <scroller>-->
|
|
|
+<!-- <van-cell-group inset>-->
|
|
|
+<!-- <van-cell-->
|
|
|
+<!-- v-for="(item,index) in list"-->
|
|
|
+<!-- :key="index"-->
|
|
|
+<!-- @click="onSelected(item)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template slot="label">-->
|
|
|
+<!-- <span class="record green" v-if="item.min_point <= 0">{{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>-->
|
|
|
+<!-- <span class="record red" v-if="item.min_point > 0">+ {{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>-->
|
|
|
+<!-- <span class="type">{{$getTypesName(item.pt_id)}}</span>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <template slot="icon">-->
|
|
|
+<!-- <van-checkbox v-model="item.selected" shape="square" style="margin-right: 0.16rem;" />-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <template slot="title">-->
|
|
|
+<!-- <div class="item-remark">{{item.remark}}</div>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </van-cell>-->
|
|
|
+
|
|
|
+<!-- </van-cell-group>-->
|
|
|
+<!-- </scroller>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+<!-- <div class="flex-box-ce footer">-->
|
|
|
+<!-- <van-button-->
|
|
|
+<!-- size="large"-->
|
|
|
+<!-- plain-->
|
|
|
+<!-- type="info"-->
|
|
|
+<!-- style="margin-right: 0.2rem;"-->
|
|
|
+<!-- :text="`已选${itemSelected.length}条,取消选中`"-->
|
|
|
+<!-- @click="clear"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- <van-button-->
|
|
|
+<!-- text="确认"-->
|
|
|
+<!-- type="info"-->
|
|
|
+<!-- size="large"-->
|
|
|
+<!-- @click="onConfirm"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <van-dialog-->
|
|
|
+<!-- v-model="showRule"-->
|
|
|
+<!-- :show-confirm-button="false"-->
|
|
|
+<!-- close-on-click-overlay-->
|
|
|
+<!-- title="规则分类"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template slot="default">-->
|
|
|
+<!-- <div style="height: 8rem;overflow: auto; " class="scroll-bar">-->
|
|
|
+<!-- <el-button-->
|
|
|
+<!-- type="primary"-->
|
|
|
+<!-- style="margin-left: 0.3rem;"-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- round-->
|
|
|
+<!-- @click="onRuleClear"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- 全部-->
|
|
|
+<!-- </el-button>-->
|
|
|
+<!-- <el-tree-->
|
|
|
+<!-- ref="ruleTree"-->
|
|
|
+<!-- node-key="id"-->
|
|
|
+<!-- :data="ruleTree"-->
|
|
|
+<!-- :props="{children:'child',label:'name'}"-->
|
|
|
+<!-- highlight-current-->
|
|
|
+<!-- style="margin-top: 16px"-->
|
|
|
+<!-- @node-click="onRuleClick"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </van-dialog>-->
|
|
|
+<!-- </van-popup>-->
|
|
|
+ <el-drawer
|
|
|
+ append-to-body
|
|
|
+ :show-close="false"
|
|
|
+ direction="btt"
|
|
|
+ :visible.sync="showSelector"
|
|
|
+ :before-close="cancel"
|
|
|
+ :size="'80%'"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <div>
|
|
|
+<!-- <van-nav-bar title="积分规则" left-text="取消" @click-left="cancel" />-->
|
|
|
+ <van-search v-model="keyword" placeholder="搜索规则" show-action >
|
|
|
+ <van-icon slot="action" name="bars" @click="showRule = true"/>
|
|
|
+ </van-search>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="container">
|
|
|
+ <scroller>
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-cell
|
|
|
+ v-for="(item,index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="onSelected(item)"
|
|
|
+ >
|
|
|
+ <template slot="label">
|
|
|
+ <span class="record green" v-if="item.min_point <= 0">{{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
|
|
|
+ <span class="record red" v-if="item.min_point > 0">+ {{(item.range_type == 1 ? item.min_point : item.min_point+'～'+item.max_point)}}</span>
|
|
|
+ <span class="type">{{$getTypesName(item.pt_id)}}</span>
|
|
|
+ </template>
|
|
|
+ <template slot="icon">
|
|
|
+ <van-checkbox v-model="item.selected" shape="square" style="margin-right: 0.16rem;" />
|
|
|
+ </template>
|
|
|
+ <template slot="title">
|
|
|
+ <div class="item-remark">{{item.remark}}</div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+
|
|
|
+ </van-cell-group>
|
|
|
+ <div style="height: 1rem;"></div>
|
|
|
+ </scroller>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-box-ce footer">
|
|
|
+ <van-button
|
|
|
+ size="large"
|
|
|
+ plain
|
|
|
+ type="info"
|
|
|
+ style="margin-right: 0.2rem;"
|
|
|
+ :text="`已选${itemSelected.length}条,取消选中`"
|
|
|
+ @click="clear"
|
|
|
+ />
|
|
|
+ <van-button
|
|
|
+ text="确认"
|
|
|
+ type="info"
|
|
|
+ size="large"
|
|
|
+ @click="onConfirm"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <van-dialog
|
|
|
+ v-model="showRule"
|
|
|
+ :show-confirm-button="false"
|
|
|
+ close-on-click-overlay
|
|
|
+ title="规则分类"
|
|
|
+ >
|
|
|
+ <template slot="default">
|
|
|
+ <div style="height: 8rem;overflow: auto; " class="scroll-bar">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ style="margin-left: 0.3rem;"
|
|
|
+ size="small"
|
|
|
+ round
|
|
|
+ @click="onRuleClear"
|
|
|
+ >
|
|
|
+ 全部
|
|
|
+ </el-button>
|
|
|
+ <el-tree
|
|
|
+ ref="ruleTree"
|
|
|
+ node-key="id"
|
|
|
+ :data="ruleTree"
|
|
|
+ :props="{children:'child',label:'name'}"
|
|
|
+ highlight-current
|
|
|
+ style="margin-top: 16px"
|
|
|
+ @node-click="onRuleClick"
|
|
|
+ />
|
|
|
+ <div style="height: 0.5rem;"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-dialog>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name:'RuleScopeSelector',
|
|
|
+ props:{
|
|
|
+ visible:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
+ },
|
|
|
+ ptId:{
|
|
|
+ type:Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ multi: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ cycleType:{
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ selected:{
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ showSelector:false,
|
|
|
+ itemObject:null,
|
|
|
+ ruleTree:[],
|
|
|
+ items:[],
|
|
|
+ itemSelected:[],
|
|
|
+ currentRuleId:0,
|
|
|
+ keyword:'',
|
|
|
+ showRule:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ visible(val){
|
|
|
+ this.showSelector = val
|
|
|
+ },
|
|
|
+ showSelector(v){
|
|
|
+ if(v) {
|
|
|
+ this.itemSelected = this.selected.map(item => {
|
|
|
+ return {...item}
|
|
|
+ })
|
|
|
+ this.keyword = ''
|
|
|
+ this.currentRuleId = 0
|
|
|
+ this.getRuleScope()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ list(){
|
|
|
+ if (this.currentRuleId > 0){
|
|
|
+ if (!this.itemObject[`rule_${this.currentRuleId}`]) return []
|
|
|
+ this.items = []
|
|
|
+ this.initItems({1:this.itemObject[`rule_${this.currentRuleId}`]})
|
|
|
+ } else {
|
|
|
+ if (!this.itemObject) return []
|
|
|
+ this.items = []
|
|
|
+ this.initItems(this.itemObject)
|
|
|
+ }
|
|
|
+ return this.items.filter(item => this.keyword ? item.remark.indexOf(this.keyword) > -1 : true)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initItems(itemObj){
|
|
|
+ Object.values(itemObj).forEach((item) => {
|
|
|
+ item.forEach((record) => {
|
|
|
+ let temp = {
|
|
|
+ ...record,
|
|
|
+ selected:this.itemSelected.some(i => i.id === record.id)
|
|
|
+ }
|
|
|
+ this.items.push(temp)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.$emit('update:visible',false)
|
|
|
+ },
|
|
|
+ getRuleScope(){
|
|
|
+ this.ruleTree = []
|
|
|
+ this.itemObject = null
|
|
|
+ this.items = []
|
|
|
+ let data = {
|
|
|
+ cycle_type:this.cycleType,
|
|
|
+ pt_id:this.ptId
|
|
|
+ }
|
|
|
+ this.$axiosUser('get','/api/pro/integral/rule/trees/scope',data)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 1){
|
|
|
+ this.ruleTree = res.data.data.rule_tree
|
|
|
+ this.itemObject = res.data.data.item_list
|
|
|
+ this.initItems(this.itemObject)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelected(item){
|
|
|
+ if (this.multi){
|
|
|
+ if (item.selected){
|
|
|
+ /*取消选中*/
|
|
|
+ this.itemSelected = this.itemSelected.filter(i => i.id !== item.id)
|
|
|
+ } else {
|
|
|
+ /*选中*/
|
|
|
+ this.itemSelected.push(item)
|
|
|
+ }
|
|
|
+ item.selected = !item.selected
|
|
|
+ } else {
|
|
|
+ this.itemSelected = item.selected ? [] : [item]
|
|
|
+ this.items.forEach(i => {
|
|
|
+ i.selected = i.id !== item.id ? false : (!item.selected)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onRuleClick(rule){
|
|
|
+ this.currentRuleId = rule.id || 0
|
|
|
+ },
|
|
|
+ onRuleClear(){
|
|
|
+ this.$refs['ruleTree'].setCurrentKey(null)
|
|
|
+ this.currentRuleId = 0
|
|
|
+ },
|
|
|
+ onConfirm(){
|
|
|
+ this.$emit("confirm",this.itemSelected.map(item => {
|
|
|
+ return {...item}
|
|
|
+ }))
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ this.itemSelected = this.selected.map(item => {
|
|
|
+ return {...item}
|
|
|
+ })
|
|
|
+ this.onConfirm()
|
|
|
+ },
|
|
|
+ clear(){
|
|
|
+ this.itemSelected = []
|
|
|
+ this.initItems(this.itemObject)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {}
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.employee_selector_popup{
|
|
|
+ background-color: rgb(245, 245, 245);
|
|
|
+ height: 90%;
|
|
|
+}
|
|
|
+.container{
|
|
|
+ //height: calc(100% - 3.6rem);
|
|
|
+ height: 90%;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* // 滚动条样式 */
|
|
|
+.scroll-bar {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+}
|
|
|
+.scroll-bar::-webkit-scrollbar {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
|
|
|
+.scroll-bar::-webkit-scrollbar-track {
|
|
|
+ width: 7px;
|
|
|
+ background-color: #fff0;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+/*滚动条的设置*/
|
|
|
+.scroll-bar::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #C1C7D4;
|
|
|
+ background-clip: padding-box;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+/*滚动条移上去的背景*/
|
|
|
+.scroll-bar:hover::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(144, 147, 153, 0.3);
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.footer{
|
|
|
+ padding: 0.24rem;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 2;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-cell .van-checkbox {
|
|
|
+ width: 10%;
|
|
|
+}
|
|
|
+/deep/.van-cell .van-cell__title{
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-cell .van-cell__title .item-remark{
|
|
|
+ white-space: pre-wrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-drawer__header{
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
