123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <template>
- <div class="tree-select-content">
- <!-- <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" /> -->
- <div class="tree-select-class">
- <div class="select-class-left">
- <div class="class-left-header">可放开定向</div>
- <div class="class-left-content">
- <template>
- <a-checkbox-group v-model="checkedValue" @change="handleCheckGroup">
- <a-row>
- <a-col :span="24" v-for="item in changeCheckData" :key="item.value">
- <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
- </a-col>
- </a-row>
- </a-checkbox-group>
- </template>
- <div class="example">
- <span v-if="!changeCheckData.length">暂无数据</span>
- </div>
- </div>
- </div>
- <div class="select-class-right">
- <div class="class-left-header">
- 已选 ({{ applyTypeOption.length ? applyTypeOption.length : 0}})
- <span class="clear-all-class"><a @click="handleClearAll">清空</a></span>
- </div>
- <div v-if="applyTypeOption.length" class="class-left-content">
- <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.value">
- <p class="left-content-p">
- <a-tooltip placement="left">
- <template slot="title">
- <span>{{ item.label }}</span>
- </template>
- {{ item.label }}
- </a-tooltip>
- </p>
- <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
- </div>
- </div>
- <div v-else class="no-data-class">暂无数据</div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {mapGetters} from 'vuex';
- export default {
- name: 'tree-select',
- props: {
- defaultlist: {
- type: Array,
- default: () => []
- },
- editdata: {
- type: Array,
- default: () => []
- }
- },
- data() {
- return {
- checkedValue: [],
- checkedKeys: [],
- treeData: [],
- updateTreeData: [],
- applyTypeOption: [],
- changeCheckData: []
- };
- },
- mounted() {
- this.changeCheckData = this.defaultlist;
- this.updateTreeData = this.defaultlist;
- if (this.editdata.length) {
- this.checkedValue = [...this.editdata];
- const rightSelectList = [];
- this.updateTreeData.forEach(item => {
- if (this.editdata.includes(item.value)) {
- rightSelectList.push(item);
- }
- });
- this.applyTypeOption = rightSelectList;
- }
- },
- methods: {
- ...mapGetters(['userInfo']),
- handleCheckGroup(checkedValues) {
- const rightSelectList = [];
- this.checkedValue = checkedValues;
- this.updateTreeData.forEach(item => {
- if (checkedValues.includes(item.value)) {
- rightSelectList.push(item);
- }
- });
- this.applyTypeOption = rightSelectList;
- this.$emit('select-finally-result', this.applyTypeOption);
- },
- handleClearAll() {
- this.checkedValue = [];
- this.applyTypeOption = [];
- this.$emit('select-finally-result', this.applyTypeOption);
- },
- handleDelTree(list) {
- const defaultData = this.applyTypeOption;
- this.applyTypeOption = defaultData.filter(item => item.value !== list.value);
- this.checkedValue = this.applyTypeOption.map(item => item.value);
- this.$emit('select-finally-result', this.applyTypeOption);
- },
- onChange(e) {
- const value = e.target.value;
- this.changeCheckData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
- },
- getNewTreeData(data, value) {
- const checkList = [];
- data.forEach(item => {
- if (item.label.indexOf(value) !== -1) {
- checkList.push(item);
- }
- });
- return checkList;
- },
- }
- };
- </script>
- <style lang="less" scoped>
- @import 'tree-select';
- </style>
|